Upstream
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Editor: Update the WordPress packages to Gutenberg 17.7RC1. 

This brings the latest and greatest from Gutenberg.
The full changelog is available here 
https://github.com/WordPress/gutenberg/releases/tag/v17.7.0-rc.1

Props youknowriad, get_dave.
See #60315.
Built from https://develop.svn.wordpress.org/trunk@57578


git-svn-id: http://core.svn.wordpress.org/trunk@57079 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
youknowriad 2024-02-09 18:22:22 +00:00
parent 336be7695c
commit f7c63b630c
227 changed files with 13322 additions and 10228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
wp-admin/includes/update-core.php
View File

@ -833,10 +833,6 @@ $_old_files = array(
'wp-includes/blocks/heading/editor.min.css',
'wp-includes/blocks/heading/editor-rtl.css',
'wp-includes/blocks/heading/editor-rtl.min.css',
'wp-includes/blocks/post-content/editor.css',
'wp-includes/blocks/post-content/editor.min.css',
'wp-includes/blocks/post-content/editor-rtl.css',
'wp-includes/blocks/post-content/editor-rtl.min.css',
'wp-includes/blocks/query-title/editor.css',
'wp-includes/blocks/query-title/editor.min.css',
'wp-includes/blocks/query-title/editor-rtl.css',

2
wp-includes/assets/script-loader-packages.min.php
View File

File diff suppressed because one or more lines are too long

2
wp-includes/assets/script-loader-packages.php
View File

File diff suppressed because one or more lines are too long

3
wp-includes/blocks/archives/block.json
View File

@ -47,6 +47,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-archives-editor"

3
wp-includes/blocks/audio/block.json
View File

@ -54,6 +54,9 @@
"margin": false,
"padding": false
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-audio-editor",

3
wp-includes/blocks/avatar/block.json
View File

@ -50,6 +50,9 @@
"text": false,
"background": false,
"__experimentalDuotone": "img"
},
"interactivity": {
"clientNavigation": true
}
},
"selectors": {

17
wp-includes/blocks/block.php
View File

@ -46,7 +46,20 @@ function render_block_core_block( $attributes ) {
$content = $wp_embed->run_shortcode( $reusable_block->post_content );
$content = $wp_embed->autoembed( $content );
$has_pattern_overrides = isset( $attributes['overrides'] );
// Back compat, the content attribute was previously named overrides and
// had a slightly different format. For blocks that have not been migrated,
// also convert the format here so that the provided `pattern/overrides`
// context is correct.
if ( isset( $attributes['overrides'] ) && ! isset( $attributes['content'] ) ) {
$migrated_content = array();
foreach ( $attributes['overrides'] as $id => $values ) {
$migrated_content[ $id ] = array(
'values' => $values,
);
}
$attributes['content'] = $migrated_content;
}
$has_pattern_overrides = isset( $attributes['content'] );
/**
* We set the `pattern/overrides` context through the `render_block_context`
@ -55,7 +68,7 @@ function render_block_core_block( $attributes ) {
*/
if ( $has_pattern_overrides ) {
$filter_block_context = static function ( $context ) use ( $attributes ) {
$context['pattern/overrides'] = $attributes['overrides'];
$context['pattern/overrides'] = $attributes['content'];
return $context;
};
add_filter( 'render_block_context', $filter_block_context, 1 );

9
wp-includes/blocks/block/block.json
View File

@ -4,14 +4,14 @@
"name": "core/block",
"title": "Pattern",
"category": "reusable",
"description": "Create and save content to reuse across your site. Update the pattern, and the changes apply everywhere it’s used.",
"description": "Reuse this design across your site.",
"keywords": [ "reusable" ],
"textdomain": "default",
"attributes": {
"ref": {
"type": "number"
},
"overrides": {
"content": {
"type": "object"
}
},
@ -19,6 +19,9 @@
"customClassName": false,
"html": false,
"inserter": false,
"renaming": false
"renaming": false,
"interactivity": {
"clientNavigation": true
}
}
}

351
wp-includes/blocks/blocks-json.php
View File

@ -48,6 +48,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-archives-editor'
@ -113,6 +116,9 @@
'margin' => false,
'padding' => false
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-audio-editor',
@ -174,6 +180,9 @@
'text' => false,
'background' => false,
'__experimentalDuotone' => 'img'
),
'interactivity' => array(
'clientNavigation' => true
)
),
'selectors' => array(
@ -188,7 +197,7 @@
'name' => 'core/block',
'title' => 'Pattern',
'category' => 'reusable',
'description' => 'Create and save content to reuse across your site. Update the pattern, and the changes apply everywhere it’s used.',
'description' => 'Reuse this design across your site.',
'keywords' => array(
'reusable'
),
@ -197,7 +206,7 @@
'ref' => array(
'type' => 'number'
),
'overrides' => array(
'content' => array(
'type' => 'object'
)
),
@ -205,7 +214,10 @@
'customClassName' => false,
'html' => false,
'inserter' => false,
'renaming' => false
'renaming' => false,
'interactivity' => array(
'clientNavigation' => true
)
)
),
'button' => array(
@ -317,7 +329,9 @@
)
),
'reusable' => false,
'shadow' => true,
'shadow' => array(
'__experimentalSkipSerialization' => true
),
'spacing' => array(
'__experimentalSkipSerialization' => true,
'padding' => array(
@ -341,7 +355,10 @@
'width' => true
)
),
'__experimentalSelector' => '.wp-block-button .wp-block-button__link'
'__experimentalSelector' => '.wp-block-button .wp-block-button__link',
'interactivity' => array(
'clientNavigation' => true
)
),
'styles' => array(
array(
@ -363,6 +380,9 @@
'name' => 'core/buttons',
'title' => 'Buttons',
'category' => 'design',
'allowedBlocks' => array(
'core/button'
),
'description' => 'Prompt visitors to take action with a group of button-style links.',
'keywords' => array(
'link'
@ -405,6 +425,9 @@
'default' => array(
'type' => 'flex'
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-buttons-editor',
@ -455,6 +478,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'style' => 'wp-block-calendar'
@ -512,6 +538,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-categories-editor',
@ -580,6 +609,9 @@
'background' => true,
'text' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'style' => 'wp-block-code'
@ -633,6 +665,7 @@
'text' => true
)
),
'shadow' => true,
'spacing' => array(
'blockGap' => true,
'padding' => true,
@ -664,7 +697,10 @@
'fontSize' => true
)
),
'layout' => true
'layout' => true,
'interactivity' => array(
'clientNavigation' => true
)
)
),
'columns' => array(
@ -673,6 +709,9 @@
'name' => 'core/columns',
'title' => 'Columns',
'category' => 'design',
'allowedBlocks' => array(
'core/column'
),
'description' => 'Display content in multiple columns, with blocks added to each column.',
'textdomain' => 'default',
'attributes' => array(
@ -764,7 +803,11 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
)
),
'interactivity' => array(
'clientNavigation' => true
),
'shadow' => true
),
'editorStyle' => 'wp-block-columns-editor',
'style' => 'wp-block-columns'
@ -823,6 +866,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -929,6 +975,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -982,6 +1031,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -1068,6 +1120,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'style' => 'wp-block-comment-template'
@ -1139,6 +1194,11 @@
'parent' => array(
'core/comments'
),
'allowedBlocks' => array(
'core/comments-pagination-previous',
'core/comments-pagination-numbers',
'core/comments-pagination-next'
),
'description' => 'Displays a paginated navigation to next/previous set of comments, when applicable.',
'textdomain' => 'default',
'attributes' => array(
@ -1182,6 +1242,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-comments-pagination-editor',
@ -1229,6 +1292,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -1268,6 +1334,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -1313,6 +1382,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -1384,6 +1456,9 @@
'__experimentalFontStyle' => true,
'__experimentalFontWeight' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -1537,6 +1612,9 @@
),
'layout' => array(
'allowJustification' => false
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-cover-editor',
@ -1610,6 +1688,9 @@
),
'layout' => array(
'allowEditing' => false
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-details-editor',
@ -1661,6 +1742,9 @@
'align' => true,
'spacing' => array(
'margin' => true
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-embed-editor',
@ -1809,6 +1893,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'style' => 'wp-block-footnotes'
@ -1840,6 +1927,9 @@
'name' => 'core/gallery',
'title' => 'Gallery',
'category' => 'media',
'allowedBlocks' => array(
'core/image'
),
'description' => 'Display multiple images in a rich gallery.',
'keywords' => array(
'images',
@ -1992,6 +2082,9 @@
'default' => array(
'type' => 'flex'
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-gallery-editor',
@ -2105,6 +2198,9 @@
),
'layout' => array(
'allowSizingOnChildren' => true
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-group-editor',
@ -2181,7 +2277,10 @@
)
),
'__unstablePasteTextInline' => true,
'__experimentalSlashInserter' => true
'__experimentalSlashInserter' => true,
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-heading-editor',
'style' => 'wp-block-heading'
@ -2226,6 +2325,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-home-link-editor',
@ -2251,7 +2353,10 @@
'supports' => array(
'customClassName' => false,
'className' => false,
'html' => false
'html' => false,
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-html-editor'
),
@ -2384,10 +2489,14 @@
'radius' => true,
'width' => true
)
),
'shadow' => array(
'__experimentalSkipSerialization' => true
)
),
'selectors' => array(
'border' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder',
'shadow' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder',
'filter' => array(
'duotone' => '.wp-block-image img, .wp-block-image .components-placeholder'
)
@ -2456,6 +2565,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-latest-comments-editor',
@ -2579,6 +2691,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-latest-posts-editor',
@ -2619,6 +2734,9 @@
'name' => 'core/list',
'title' => 'List',
'category' => 'text',
'allowedBlocks' => array(
'core/list-item'
),
'description' => 'Create a bulleted or numbered list.',
'keywords' => array(
'bullet list',
@ -2692,7 +2810,10 @@
'__unstablePasteTextInline' => true,
'__experimentalSelector' => 'ol,ul',
'__experimentalOnMerge' => true,
'__experimentalSlashInserter' => true
'__experimentalSlashInserter' => true,
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-list-editor',
'style' => 'wp-block-list'
@ -2706,6 +2827,9 @@
'parent' => array(
'core/list'
),
'allowedBlocks' => array(
'core/list'
),
'description' => 'Create a list item.',
'textdomain' => 'default',
'attributes' => array(
@ -2742,6 +2866,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -2790,6 +2917,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -2924,6 +3054,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-media-text-editor',
@ -2954,7 +3087,10 @@
'customClassName' => false,
'inserter' => false,
'html' => false,
'reusable' => false
'reusable' => false,
'interactivity' => array(
'clientNavigation' => true
)
)
),
'more' => array(
@ -2981,7 +3117,10 @@
'customClassName' => false,
'className' => false,
'html' => false,
'multiple' => false
'multiple' => false,
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-more-editor'
),
@ -2991,6 +3130,19 @@
'name' => 'core/navigation',
'title' => 'Navigation',
'category' => 'theme',
'allowedBlocks' => array(
'core/navigation-link',
'core/search',
'core/social-links',
'core/page-list',
'core/spacer',
'core/home-link',
'core/site-title',
'core/site-logo',
'core/navigation-submenu',
'core/loginout',
'core/buttons'
),
'description' => 'A collection of blocks that allow visitors to get around your site.',
'keywords' => array(
'menu',
@ -3158,6 +3310,11 @@
'parent' => array(
'core/navigation'
),
'allowedBlocks' => array(
'core/navigation-link',
'core/navigation-submenu',
'core/page-list'
),
'description' => 'Add a page, link, or another item to your navigation.',
'textdomain' => 'default',
'attributes' => array(
@ -3225,7 +3382,10 @@
'fontSize' => true
)
),
'renaming' => false
'renaming' => false,
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-navigation-link-editor',
'style' => 'wp-block-navigation-link'
@ -3292,7 +3452,10 @@
),
'supports' => array(
'reusable' => false,
'html' => false
'html' => false,
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-navigation-submenu-editor',
'style' => 'wp-block-navigation-submenu'
@ -3315,7 +3478,10 @@
'supports' => array(
'customClassName' => false,
'className' => false,
'html' => false
'html' => false,
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-nextpage-editor'
),
@ -3325,6 +3491,9 @@
'name' => 'core/page-list',
'title' => 'Page List',
'category' => 'widgets',
'allowedBlocks' => array(
'core/page-list-item'
),
'description' => 'Display a list of all pages.',
'keywords' => array(
'menu',
@ -3371,6 +3540,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-page-list-editor',
@ -3429,7 +3601,10 @@
'html' => false,
'lock' => false,
'inserter' => false,
'__experimentalToolbar' => false
'__experimentalToolbar' => false,
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-page-list-editor',
'style' => 'wp-block-page-list'
@ -3508,7 +3683,10 @@
)
),
'__experimentalSelector' => 'p',
'__unstablePasteTextInline' => true
'__unstablePasteTextInline' => true,
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-paragraph-editor',
'style' => 'wp-block-paragraph'
@ -3523,7 +3701,10 @@
'supports' => array(
'html' => false,
'inserter' => false,
'renaming' => false
'renaming' => false,
'interactivity' => array(
'clientNavigation' => true
)
),
'textdomain' => 'default',
'attributes' => array(
@ -3599,6 +3780,9 @@
'background' => true,
'text' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'style' => 'wp-block-post-author'
@ -3645,6 +3829,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -3700,6 +3887,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -3860,6 +4050,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -3919,6 +4112,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-post-excerpt-editor',
@ -4017,6 +4213,9 @@
'spacing' => array(
'margin' => true,
'padding' => true
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-post-featured-image-editor',
@ -4053,9 +4252,6 @@
'type' => 'string',
'default' => 'none'
),
'inSameTerm' => array(
'type' => 'boolean'
),
'taxonomy' => array(
'type' => 'string',
'default' => ''
@ -4083,6 +4279,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'style' => 'wp-block-post-navigation-link'
@ -4142,6 +4341,9 @@
'__experimentalDefaultControls' => array(
'blockGap' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'style' => 'wp-block-post-template',
@ -4206,6 +4408,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'style' => 'wp-block-post-terms'
@ -4276,6 +4481,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'style' => 'wp-block-post-title'
@ -4322,6 +4530,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'style' => 'wp-block-preformatted'
@ -4402,6 +4613,9 @@
'fontSize' => '1.5em',
'lineHeight' => '1.6'
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-pullquote-editor',
@ -4465,10 +4679,10 @@
'full'
),
'html' => false,
'layout' => true
'layout' => true,
'interactivity' => true
),
'editorStyle' => 'wp-block-query-editor',
'style' => 'wp-block-query'
'editorStyle' => 'wp-block-query-editor'
),
'query-no-results' => array(
'$schema' => 'https://schemas.wp.org/trunk/block.json',
@ -4505,6 +4719,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -4514,9 +4731,14 @@
'name' => 'core/query-pagination',
'title' => 'Pagination',
'category' => 'theme',
'parent' => array(
'ancestor' => array(
'core/query'
),
'allowedBlocks' => array(
'core/query-pagination-previous',
'core/query-pagination-numbers',
'core/query-pagination-next'
),
'description' => 'Displays a paginated navigation to next/previous set of posts, when applicable.',
'textdomain' => 'default',
'attributes' => array(
@ -4569,6 +4791,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-query-pagination-editor',
@ -4619,6 +4844,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -4666,6 +4894,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-query-pagination-numbers-editor'
@ -4715,6 +4946,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -4775,6 +5009,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'style' => 'wp-block-query-title'
@ -4842,6 +5079,9 @@
),
'spacing' => array(
'blockGap' => true
),
'interactivity' => array(
'clientNavigation' => true
)
),
'styles' => array(
@ -4915,6 +5155,9 @@
'__experimentalDefaultControls' => array(
'width' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'style' => 'wp-block-read-more'
@ -4967,7 +5210,10 @@
),
'supports' => array(
'align' => true,
'html' => false
'html' => false,
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-rss-editor',
'style' => 'wp-block-rss'
@ -5113,6 +5359,9 @@
'top',
'bottom'
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'styles' => array(
@ -5201,6 +5450,9 @@
'margin' => false,
'padding' => false
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'styles' => array(
@ -5269,6 +5521,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-site-tagline-editor'
@ -5336,6 +5591,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-site-title-editor',
@ -5376,7 +5634,10 @@
),
'supports' => array(
'reusable' => false,
'html' => false
'html' => false,
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-social-link-editor'
),
@ -5386,6 +5647,9 @@
'name' => 'core/social-links',
'title' => 'Social Icons',
'category' => 'widgets',
'allowedBlocks' => array(
'core/social-link'
),
'description' => 'Display icons linking to your social media profiles or sites.',
'keywords' => array(
'links'
@ -5474,6 +5738,9 @@
'margin' => true,
'padding' => false
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'styles' => array(
@ -5524,6 +5791,9 @@
'__experimentalDefaultControls' => array(
'margin' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-spacer-editor',
@ -5738,7 +6008,10 @@
'width' => true
)
),
'__experimentalSelector' => '.wp-block-table > table'
'__experimentalSelector' => '.wp-block-table > table',
'interactivity' => array(
'clientNavigation' => true
)
),
'styles' => array(
array(
@ -5811,6 +6084,9 @@
'__experimentalFontStyle' => true,
'__experimentalTextTransform' => true,
'__experimentalLetterSpacing' => true
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-tag-cloud-editor'
@ -5841,7 +6117,10 @@
'align' => true,
'html' => false,
'reusable' => false,
'renaming' => false
'renaming' => false,
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-template-part-editor'
),
@ -5887,6 +6166,9 @@
'__experimentalDefaultControls' => array(
'fontSize' => true
)
),
'interactivity' => array(
'clientNavigation' => true
)
)
),
@ -5928,7 +6210,10 @@
)
),
'supports' => array(
'inserter' => false
'inserter' => false,
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-text-columns-editor',
'style' => 'wp-block-text-columns'
@ -5993,6 +6278,9 @@
'width' => true,
'color' => true,
'style' => true
),
'interactivity' => array(
'clientNavigation' => true
)
),
'style' => 'wp-block-verse',
@ -6092,6 +6380,9 @@
'margin' => false,
'padding' => false
)
),
'interactivity' => array(
'clientNavigation' => true
)
),
'editorStyle' => 'wp-block-video-editor',

9
wp-includes/blocks/button/block.json
View File

@ -98,7 +98,9 @@
}
},
"reusable": false,
"shadow": true,
"shadow": {
"__experimentalSkipSerialization": true
},
"spacing": {
"__experimentalSkipSerialization": true,
"padding": [ "horizontal", "vertical" ],
@ -119,7 +121,10 @@
"width": true
}
},
"__experimentalSelector": ".wp-block-button .wp-block-button__link"
"__experimentalSelector": ".wp-block-button .wp-block-button__link",
"interactivity": {
"clientNavigation": true
}
},
"styles": [
{ "name": "fill", "label": "Fill", "isDefault": true },

4
wp-includes/blocks/buttons/block.json
View File

@ -4,6 +4,7 @@
"name": "core/buttons",
"title": "Buttons",
"category": "design",
"allowedBlocks": [ "core/button" ],
"description": "Prompt visitors to take action with a group of button-style links.",
"keywords": [ "link" ],
"textdomain": "default",
@ -38,6 +39,9 @@
"default": {
"type": "flex"
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-buttons-editor",

3
wp-includes/blocks/calendar/block.json
View File

@ -37,6 +37,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"style": "wp-block-calendar"

3
wp-includes/blocks/categories/block.json
View File

@ -51,6 +51,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-categories-editor",

3
wp-includes/blocks/code/block.json
View File

@ -56,6 +56,9 @@
"background": true,
"text": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"style": "wp-block-code"

6
wp-includes/blocks/column/block.json
View File

@ -37,6 +37,7 @@
"text": true
}
},
"shadow": true,
"spacing": {
"blockGap": true,
"padding": true,
@ -68,6 +69,9 @@
"fontSize": true
}
},
"layout": true
"layout": true,
"interactivity": {
"clientNavigation": true
}
}
}

7
wp-includes/blocks/columns/block.json
View File

@ -4,6 +4,7 @@
"name": "core/columns",
"title": "Columns",
"category": "design",
"allowedBlocks": [ "core/column" ],
"description": "Display content in multiple columns, with blocks added to each column.",
"textdomain": "default",
"attributes": {
@ -78,7 +79,11 @@
"__experimentalDefaultControls": {
"fontSize": true
}
}
},
"interactivity": {
"clientNavigation": true
},
"shadow": true
},
"editorStyle": "wp-block-columns-editor",
"style": "wp-block-columns"

3
wp-includes/blocks/comment-author-name/block.json
View File

@ -48,6 +48,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

3
wp-includes/blocks/comment-date/block.json
View File

@ -44,6 +44,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

3
wp-includes/blocks/comment-edit-link/block.json
View File

@ -44,6 +44,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

3
wp-includes/blocks/comment-template/block.json
View File

@ -28,6 +28,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"style": "wp-block-comment-template"

3
wp-includes/blocks/comments-pagination-next/block.json
View File

@ -35,6 +35,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

3
wp-includes/blocks/comments-pagination-numbers/block.json
View File

@ -30,6 +30,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

3
wp-includes/blocks/comments-pagination-previous/block.json
View File

@ -35,6 +35,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

8
wp-includes/blocks/comments-pagination/block.json
View File

@ -5,6 +5,11 @@
"title": "Comments Pagination",
"category": "theme",
"parent": [ "core/comments" ],
"allowedBlocks": [
"core/comments-pagination-previous",
"core/comments-pagination-numbers",
"core/comments-pagination-next"
],
"description": "Displays a paginated navigation to next/previous set of comments, when applicable.",
"textdomain": "default",
"attributes": {
@ -48,6 +53,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-comments-pagination-editor",

3
wp-includes/blocks/comments-title/block.json
View File

@ -61,6 +61,9 @@
"__experimentalFontStyle": true,
"__experimentalFontWeight": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

3
wp-includes/blocks/cover/block.json
View File

@ -132,6 +132,9 @@
},
"layout": {
"allowJustification": false
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-cover-editor",

3
wp-includes/blocks/details/block.json
View File

@ -58,6 +58,9 @@
},
"layout": {
"allowEditing": false
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-details-editor",

3
wp-includes/blocks/embed/block.json
View File

@ -44,6 +44,9 @@
"align": true,
"spacing": {
"margin": true
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-embed-editor",

6
wp-includes/blocks/embed/editor-rtl.css
View File

@ -10,9 +10,13 @@
.wp-block-embed .components-placeholder__error{
word-break:break-word;
}
.wp-block-embed .components-placeholder__learn-more{
.wp-block-embed__learn-more{
margin-top:1em;
}
.wp-block-post-content .wp-block-embed__learn-more a{
color:var(--wp-admin-theme-color);
}
.block-library-embed__interactive-overlay{
bottom:0;

2
wp-includes/blocks/embed/editor-rtl.min.css vendored
View File

@ -1 +1 @@
.wp-block-embed{clear:both;margin-left:0;margin-right:0}.wp-block-embed.is-loading{display:flex;justify-content:center}.wp-block-embed .components-placeholder__error{word-break:break-word}.wp-block-embed .components-placeholder__learn-more{margin-top:1em}.block-library-embed__interactive-overlay{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}.wp-block[data-align=left]>.wp-block-embed,.wp-block[data-align=right]>.wp-block-embed{max-width:360px;width:100%}.wp-block[data-align=left]>.wp-block-embed .wp-block-embed__wrapper,.wp-block[data-align=right]>.wp-block-embed .wp-block-embed__wrapper{min-width:280px}
.wp-block-embed{clear:both;margin-left:0;margin-right:0}.wp-block-embed.is-loading{display:flex;justify-content:center}.wp-block-embed .components-placeholder__error{word-break:break-word}.wp-block-embed__learn-more{margin-top:1em}.wp-block-post-content .wp-block-embed__learn-more a{color:var(--wp-admin-theme-color)}.block-library-embed__interactive-overlay{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}.wp-block[data-align=left]>.wp-block-embed,.wp-block[data-align=right]>.wp-block-embed{max-width:360px;width:100%}.wp-block[data-align=left]>.wp-block-embed .wp-block-embed__wrapper,.wp-block[data-align=right]>.wp-block-embed .wp-block-embed__wrapper{min-width:280px}

6
wp-includes/blocks/embed/editor.css
View File

@ -10,9 +10,13 @@
.wp-block-embed .components-placeholder__error{
word-break:break-word;
}
.wp-block-embed .components-placeholder__learn-more{
.wp-block-embed__learn-more{
margin-top:1em;
}
.wp-block-post-content .wp-block-embed__learn-more a{
color:var(--wp-admin-theme-color);
}
.block-library-embed__interactive-overlay{
bottom:0;

2
wp-includes/blocks/embed/editor.min.css vendored
View File

@ -1 +1 @@
.wp-block-embed{clear:both;margin-left:0;margin-right:0}.wp-block-embed.is-loading{display:flex;justify-content:center}.wp-block-embed .components-placeholder__error{word-break:break-word}.wp-block-embed .components-placeholder__learn-more{margin-top:1em}.block-library-embed__interactive-overlay{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}.wp-block[data-align=left]>.wp-block-embed,.wp-block[data-align=right]>.wp-block-embed{max-width:360px;width:100%}.wp-block[data-align=left]>.wp-block-embed .wp-block-embed__wrapper,.wp-block[data-align=right]>.wp-block-embed .wp-block-embed__wrapper{min-width:280px}
.wp-block-embed{clear:both;margin-left:0;margin-right:0}.wp-block-embed.is-loading{display:flex;justify-content:center}.wp-block-embed .components-placeholder__error{word-break:break-word}.wp-block-embed__learn-more{margin-top:1em}.wp-block-post-content .wp-block-embed__learn-more a{color:var(--wp-admin-theme-color)}.block-library-embed__interactive-overlay{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}.wp-block[data-align=left]>.wp-block-embed,.wp-block[data-align=right]>.wp-block-embed{max-width:360px;width:100%}.wp-block[data-align=left]>.wp-block-embed .wp-block-embed__wrapper,.wp-block[data-align=right]>.wp-block-embed .wp-block-embed__wrapper{min-width:280px}

18
wp-includes/blocks/file.php
View File

@ -38,6 +38,17 @@ function render_block_core_file( $attributes, $content ) {
// If it's interactive, enqueue the script module and add the directives.
if ( ! empty( $attributes['displayPreview'] ) ) {
$suffix = wp_scripts_get_suffix();
if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
$module_url = gutenberg_url( '/build/interactivity/file.min.js' );
}
wp_register_script_module(
'@wordpress/block-library/file',
isset( $module_url ) ? $module_url : includes_url( "blocks/file/view{$suffix}.js" ),
array( '@wordpress/interactivity' ),
defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
);
wp_enqueue_script_module( '@wordpress/block-library/file' );
$processor = new WP_HTML_Tag_Processor( $content );
@ -62,12 +73,5 @@ function register_block_core_file() {
'render_callback' => 'render_block_core_file',
)
);
wp_register_script_module(
'@wordpress/block-library/file',
defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ? gutenberg_url( '/build/interactivity/file.min.js' ) : includes_url( 'blocks/file/view.min.js' ),
array( '@wordpress/interactivity' ),
defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
);
}
add_action( 'init', 'register_block_core_file' );

2
wp-includes/blocks/file/view.js
View File

@ -89,5 +89,7 @@ const createActiveXObject = type => {
return browserSupportsPdfs();
}
}
}, {
lock: true
});

2
wp-includes/blocks/file/view.min.js vendored
View File

@ -1 +1 @@
import*as e from"@wordpress/interactivity";var t={d:(e,o)=>{for(var r in o)t.o(o,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:o[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const o=(e=>{var o={};return t.d(o,e),o})({store:()=>e.store}),r=e=>{let t;try{t=new window.ActiveXObject(e)}catch(e){t=void 0}return t};(0,o.store)("core/file",{state:{get hasPdfPreview(){return!(window.navigator.userAgent.indexOf("Mobi")>-1||window.navigator.userAgent.indexOf("Android")>-1||window.navigator.userAgent.indexOf("Macintosh")>-1&&window.navigator.maxTouchPoints&&window.navigator.maxTouchPoints>2||(window.ActiveXObject||"ActiveXObject"in window)&&!r("AcroPDF.PDF")&&!r("PDF.PdfCtrl"))}}});
import*as e from"@wordpress/interactivity";var t={d:(e,o)=>{for(var r in o)t.o(o,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:o[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const o=(e=>{var o={};return t.d(o,e),o})({store:()=>e.store}),r=e=>{let t;try{t=new window.ActiveXObject(e)}catch(e){t=void 0}return t};(0,o.store)("core/file",{state:{get hasPdfPreview(){return!(window.navigator.userAgent.indexOf("Mobi")>-1||window.navigator.userAgent.indexOf("Android")>-1||window.navigator.userAgent.indexOf("Macintosh")>-1&&window.navigator.maxTouchPoints&&window.navigator.maxTouchPoints>2||(window.ActiveXObject||"ActiveXObject"in window)&&!r("AcroPDF.PDF")&&!r("PDF.PdfCtrl"))}}},{lock:!0});

3
wp-includes/blocks/footnotes/block.json
View File

@ -55,6 +55,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"style": "wp-block-footnotes"

72
wp-includes/blocks/gallery.php
View File

@ -33,32 +33,18 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );
/**
* Filter to randomize the order of image blocks.
*
* @param array $parsed_block The block being rendered.
* @return array The block object with randomized order of image blocks.
*/
function block_core_gallery_random_order( $parsed_block ) {
if ( 'core/gallery' === $parsed_block['blockName'] && ! empty( $parsed_block['attrs']['randomOrder'] ) ) {
shuffle( $parsed_block['innerBlocks'] );
}
return $parsed_block;
}
add_filter( 'render_block_data', 'block_core_gallery_random_order' );
/**
* Adds a style tag for the --wp--style--unstable-gallery-gap var.
*
* The Gallery block needs to recalculate Image block width based on
* the current gap setting in order to maintain the number of flex columns
* so a css var is added to allow this.
* Renders the `core/gallery` block on the server.
*
* @param array $attributes Attributes of the block being rendered.
* @param string $content Content of the block being rendered.
* @return string The content of the block being rendered.
*/
function block_core_gallery_render( $attributes, $content ) {
// Adds a style tag for the --wp--style--unstable-gallery-gap var.
// The Gallery block needs to recalculate Image block width based on
// the current gap setting in order to maintain the number of flex columns
// so a css var is added to allow this.
$gap = $attributes['style']['spacing']['blockGap'] ?? null;
// Skip if gap value contains unsupported characters.
// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
@ -130,7 +116,51 @@ function block_core_gallery_render( $attributes, $content ) {
'context' => 'block-supports',
)
);
return (string) $processed_content;
// The WP_HTML_Tag_Processor class calls get_updated_html() internally
// when the instance is treated as a string, but here we explicitly
// convert it to a string.
$updated_content = $processed_content->get_updated_html();
/*
* Randomize the order of image blocks. Ideally we should shuffle
* the `$parsed_block['innerBlocks']` via the `render_block_data` hook.
* However, this hook doesn't apply inner block updates when blocks are
* nested.
* @todo: In the future, if this hook supports updating innerBlocks in
* nested blocks, it should be refactored.
*
* @see: https://github.com/WordPress/gutenberg/pull/58733
*/
if ( empty( $attributes['randomOrder'] ) ) {
return $updated_content;
}
// This pattern matches figure elements with the `wp-block-image` class to
// avoid the gallery's wrapping `figure` element and extract images only.
$pattern = '/<figure[^>]*\bwp-block-image\b[^>]*>.*?<\/figure>/';
// Find all Image blocks.
preg_match_all( $pattern, $updated_content, $matches );
if ( ! $matches ) {
return $updated_content;
}
$image_blocks = $matches[0];
// Randomize the order of Image blocks.
shuffle( $image_blocks );
$i = 0;
$content = preg_replace_callback(
$pattern,
static function () use ( $image_blocks, &$i ) {
$new_image_block = $image_blocks[ $i ];
++$i;
return $new_image_block;
},
$updated_content
);
return $content;
}
/**
* Registers the `core/gallery` block on server.

4
wp-includes/blocks/gallery/block.json
View File

@ -4,6 +4,7 @@
"name": "core/gallery",
"title": "Gallery",
"category": "media",
"allowedBlocks": [ "core/image" ],
"description": "Display multiple images in a rich gallery.",
"keywords": [ "images", "photos" ],
"textdomain": "default",
@ -136,6 +137,9 @@
"default": {
"type": "flex"
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-gallery-editor",

3
wp-includes/blocks/group/block.json
View File

@ -87,6 +87,9 @@
},
"layout": {
"allowSizingOnChildren": true
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-group-editor",

5
wp-includes/blocks/heading/block.json
View File

@ -61,7 +61,10 @@
}
},
"__unstablePasteTextInline": true,
"__experimentalSlashInserter": true
"__experimentalSlashInserter": true,
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-heading-editor",
"style": "wp-block-heading"

5
wp-includes/blocks/home-link.php
View File

@ -129,7 +129,10 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
*/
function render_block_core_home_link( $attributes, $content, $block ) {
if ( empty( $attributes['label'] ) ) {
return '';
// Using a fallback for the label attribute allows rendering the block even if no attributes have been set,
// e.g. when using the block as a hooked block.
// Note that the fallback value needs to be kept in sync with the one set in `edit.js` (upon first loading the block in the editor).
$attributes['label'] = __( 'Home' );
}
$aria_current = '';

3
wp-includes/blocks/home-link/block.json
View File

@ -36,6 +36,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-home-link-editor",

5
wp-includes/blocks/html/block.json
View File

@ -16,7 +16,10 @@
"supports": {
"customClassName": false,
"className": false,
"html": false
"html": false,
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-html-editor"
}

291
wp-includes/blocks/image.php
View File

@ -20,26 +20,26 @@ function render_block_core_image( $attributes, $content, $block ) {
return '';
}
$processor = new WP_HTML_Tag_Processor( $content );
$p = new WP_HTML_Tag_Processor( $content );
if ( ! $processor->next_tag( 'img' ) || null === $processor->get_attribute( 'src' ) ) {
if ( ! $p->next_tag( 'img' ) || null === $p->get_attribute( 'src' ) ) {
return '';
}
if ( isset( $attributes['data-id'] ) ) {
// Add the data-id="$id" attribute to the img element
// to provide backwards compatibility for the Gallery Block,
// which now wraps Image Blocks within innerBlocks.
// The data-id attribute is added in a core/gallery `render_block_data` hook.
$processor->set_attribute( 'data-id', $attributes['data-id'] );
// Adds the data-id="$id" attribute to the img element to provide backwards
// compatibility for the Gallery Block, which now wraps Image Blocks within
// innerBlocks. The data-id attribute is added in a core/gallery
// `render_block_data` hook.
$p->set_attribute( 'data-id', $attributes['data-id'] );
}
$link_destination = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
$lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block );
/*
* If the lightbox is enabled and the image is not linked, add the filter
* and the JavaScript view file.
* If the lightbox is enabled and the image is not linked, adds the filter and
* the JavaScript view file.
*/
if (
isset( $lightbox_settings ) &&
@ -47,15 +47,27 @@ function render_block_core_image( $attributes, $content, $block ) {
isset( $lightbox_settings['enabled'] ) &&
true === $lightbox_settings['enabled']
) {
$suffix = wp_scripts_get_suffix();
if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
$module_url = gutenberg_url( '/build/interactivity/image.min.js' );
}
wp_register_script_module(
'@wordpress/block-library/image',
isset( $module_url ) ? $module_url : includes_url( "blocks/image/view{$suffix}.js" ),
array( '@wordpress/interactivity' ),
defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
);
wp_enqueue_script_module( '@wordpress/block-library/image' );
/*
* This render needs to happen in a filter with priority 15 to ensure that
* it runs after the duotone filter and that duotone styles are applied to
* the image in the lightbox. Lightbox has to work with any plugins that
* might use filters as well. Removing this can be considered in the
* future if the way the blocks are rendered changes, or if a
* new kind of filter is introduced.
* might use filters as well. Removing this can be considered in the future
* if the way the blocks are rendered changes, or if a new kind of filter is
* introduced.
*/
add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 );
} else {
@ -65,7 +77,7 @@ function render_block_core_image( $attributes, $content, $block ) {
remove_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15 );
}
return $processor->get_updated_html();
return $p->get_updated_html();
}
/**
@ -78,7 +90,7 @@ function render_block_core_image( $attributes, $content, $block ) {
* @return array Filtered block data.
*/
function block_core_image_get_lightbox_settings( $block ) {
// Get the lightbox setting from the block attributes.
// Gets the lightbox setting from the block attributes.
if ( isset( $block['attrs']['lightbox'] ) ) {
$lightbox_settings = $block['attrs']['lightbox'];
}
@ -89,9 +101,9 @@ function block_core_image_get_lightbox_settings( $block ) {
// If not present in global settings, check the top-level global settings.
//
// NOTE: If no block-level settings are found, the previous call to
// `wp_get_global_settings` will return the whole `theme.json`
// structure in which case we can check if the "lightbox" key is present at
// the top-level of the global settings and use its value.
// `wp_get_global_settings` will return the whole `theme.json` structure in
// which case we can check if the "lightbox" key is present at the top-level
// of the global settings and use its value.
if ( isset( $lightbox_settings['lightbox'] ) ) {
$lightbox_settings = wp_get_global_settings( array( 'lightbox' ) );
}
@ -110,103 +122,76 @@ function block_core_image_get_lightbox_settings( $block ) {
*/
function block_core_image_render_lightbox( $block_content, $block ) {
/*
* If it's not possible that an IMG element exists then return the given
* block content as-is. It may be that there's no actual image in the block
* or it could be that another plugin already modified this HTML.
* If there's no IMG tag in the block then return the given block content
* as-is. There's nothing that this code can knowingly modify to add the
* lightbox behavior.
*/
if ( false === stripos( $block_content, '<img' ) ) {
$p = new WP_HTML_Tag_Processor( $block_content );
if ( $p->next_tag( 'figure' ) ) {
$p->set_bookmark( 'figure' );
}
if ( ! $p->next_tag( 'img' ) ) {
return $block_content;
}
$processor = new WP_HTML_Tag_Processor( $block_content );
$alt = $p->get_attribute( 'alt' );
$img_uploaded_src = $p->get_attribute( 'src' );
$img_class_names = $p->get_attribute( 'class' );
$img_styles = $p->get_attribute( 'style' );
$img_width = 'none';
$img_height = 'none';
$aria_label = __( 'Enlarge image' );
$aria_label = __( 'Enlarge image' );
/*
* If there's definitely no IMG element in the block then return the given
* block content as-is. There's nothing that this code can knowingly modify
* to add the lightbox behavior.
*/
if ( ! $processor->next_tag( 'img' ) ) {
return $block_content;
}
$alt_attribute = $processor->get_attribute( 'alt' );
// An empty alt attribute `alt=""` is valid for decorative images.
if ( is_string( $alt_attribute ) ) {
$alt_attribute = trim( $alt_attribute );
}
// It only makes sense to append the alt text to the button aria-label when the alt text is non-empty.
if ( $alt_attribute ) {
if ( $alt ) {
/* translators: %s: Image alt text. */
$aria_label = sprintf( __( 'Enlarge image: %s' ), $alt_attribute );
$aria_label = sprintf( __( 'Enlarge image: %s' ), $alt );
}
// Currently, we are only enabling the zoom animation.
$lightbox_animation = 'zoom';
// Note: We want to store the `src` in the context so we
// can set it dynamically when the lightbox is opened.
if ( isset( $block['attrs']['id'] ) ) {
$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
$img_metadata = wp_get_attachment_metadata( $block['attrs']['id'] );
$img_width = $img_metadata['width'] ?? 'none';
$img_height = $img_metadata['height'] ?? 'none';
} else {
$img_uploaded_src = $processor->get_attribute( 'src' );
$img_width = 'none';
$img_height = 'none';
}
if ( isset( $block['attrs']['scale'] ) ) {
$scale_attr = $block['attrs']['scale'];
} else {
$scale_attr = false;
}
$w = new WP_HTML_Tag_Processor( $block_content );
$w->next_tag( 'figure' );
$w->add_class( 'wp-lightbox-container' );
$w->set_attribute( 'data-wp-interactive', '{"namespace":"core/image"}' );
$w->set_attribute(
// Figure.
$p->seek( 'figure' );
$figure_class_names = $p->get_attribute( 'class' );
$figure_styles = $p->get_attribute( 'style' );
$p->add_class( 'wp-lightbox-container' );
$p->set_attribute( 'data-wp-interactive', '{"namespace":"core/image"}' );
$p->set_attribute(
'data-wp-context',
sprintf(
'{ "imageLoaded": false,
"initialized": false,
"lightboxEnabled": false,
"hideAnimationEnabled": false,
"preloadInitialized": false,
"lightboxAnimation": "%s",
"imageUploadedSrc": "%s",
"imageCurrentSrc": "",
"targetWidth": "%s",
"targetHeight": "%s",
"scaleAttr": "%s",
"dialogLabel": "%s"
}',
$lightbox_animation,
$img_uploaded_src,
$img_width,
$img_height,
$scale_attr,
__( 'Enlarged image' )
wp_json_encode(
array(
'uploadedSrc' => $img_uploaded_src,
'figureClassNames' => $figure_class_names,
'figureStyles' => $figure_styles,
'imgClassNames' => $img_class_names,
'imgStyles' => $img_styles,
'targetWidth' => $img_width,
'targetHeight' => $img_height,
'scaleAttr' => $block['attrs']['scale'] ?? false,
'ariaLabel' => $aria_label,
'alt' => $alt,
),
JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
)
);
$w->next_tag( 'img' );
$w->set_attribute( 'data-wp-init', 'callbacks.initOriginImage' );
$w->set_attribute( 'data-wp-on--load', 'actions.handleLoad' );
$w->set_attribute( 'data-wp-watch', 'callbacks.setButtonStyles' );
// We need to set an event callback on the `img` specifically
// because the `figure` element can also contain a caption, and
// we don't want to trigger the lightbox when the caption is clicked.
$w->set_attribute( 'data-wp-on--click', 'actions.showLightbox' );
$w->set_attribute( 'data-wp-watch--setStylesOnResize', 'callbacks.setStylesOnResize' );
$body_content = $w->get_updated_html();
// Add a button alongside image in the body content.
// Image.
$p->next_tag( 'img' );
$p->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
$p->set_attribute( 'data-wp-on--load', 'callbacks.setButtonStyles' );
$p->set_attribute( 'data-wp-on-window--resize', 'callbacks.setButtonStyles' );
// Sets an event callback on the `img` because the `figure` element can also
// contain a caption, and we don't want to trigger the lightbox when the
// caption is clicked.
$p->set_attribute( 'data-wp-on--click', 'actions.showLightbox' );
$body_content = $p->get_updated_html();
// Adds a button alongside image in the body content.
$img = null;
preg_match( '/<img[^>]+>/', $body_content, $img );
@ -229,46 +214,17 @@ function block_core_image_render_lightbox( $block_content, $block ) {
$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
// We need both a responsive image and an enlarged image to animate
// the zoom seamlessly on slow internet connections; the responsive
// image is a copy of the one in the body, which animates immediately
// as the lightbox is opened, while the enlarged one is a full-sized
// version that will likely still be loading as the animation begins.
$m = new WP_HTML_Tag_Processor( $block_content );
$m->next_tag( 'figure' );
$m->add_class( 'responsive-image' );
$m->next_tag( 'img' );
// We want to set the 'src' attribute to an empty string in the responsive image
// because otherwise, as of this writing, the wp_filter_content_tags() function in
// WordPress will automatically add a 'srcset' attribute to the image, which will at
// times cause the incorrectly sized image to be loaded in the lightbox on Firefox.
// Because of this, we bind the 'src' attribute explicitly the current src to reliably
// use the exact same image as in the content when the lightbox is first opened while
// we wait for the larger image to load.
$m->set_attribute( 'src', '' );
$m->set_attribute( 'data-wp-bind--src', 'context.imageCurrentSrc' );
$m->set_attribute( 'data-wp-style--object-fit', 'state.lightboxObjectFit' );
$initial_image_content = $m->get_updated_html();
add_action( 'wp_footer', 'block_core_image_print_lightbox_overlay' );
$q = new WP_HTML_Tag_Processor( $block_content );
$q->next_tag( 'figure' );
$q->add_class( 'enlarged-image' );
$q->next_tag( 'img' );
return $body_content;
}
// We set the 'src' attribute to an empty string to prevent the browser from loading the image
// on initial page load, then bind the attribute to a selector that returns the full-sized image src when
// the lightbox is opened. We could use 'loading=lazy' in combination with the 'hidden' attribute to
// accomplish the same behavior, but that approach breaks progressive loading of the image in Safari
// and Chrome (see https://github.com/WordPress/gutenberg/pull/52765#issuecomment-1674008151). Until that
// is resolved, manually setting the 'src' seems to be the best solution to load the large image on demand.
$q->set_attribute( 'src', '' );
$q->set_attribute( 'data-wp-bind--src', 'state.enlargedImgSrc' );
$q->set_attribute( 'data-wp-style--object-fit', 'state.lightboxObjectFit' );
$enlarged_image_content = $q->get_updated_html();
function block_core_image_print_lightbox_overlay() {
$close_button_label = esc_attr__( 'Close' );
// If the current theme does NOT have a `theme.json`, or the colors are not defined,
// we need to set the background color & close button color to some default values
// because we can't get them from the Global Styles.
// If the current theme does NOT have a `theme.json`, or the colors are not
// defined, it needs to set the background color & close button color to some
// default values because it can't get them from the Global Styles.
$background_color = '#fff';
$close_button_color = '#000';
if ( wp_theme_has_theme_json() ) {
@ -281,35 +237,43 @@ function block_core_image_render_lightbox( $block_content, $block ) {
}
}
$close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
$close_button_label = esc_attr__( 'Close' );
$lightbox_html = <<<HTML
<div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
data-wp-bind--role="state.roleAttribute"
data-wp-bind--aria-label="state.dialogLabel"
data-wp-class--initialized="context.initialized"
data-wp-class--active="context.lightboxEnabled"
data-wp-class--hideAnimationEnabled="context.hideAnimationEnabled"
data-wp-bind--aria-modal="state.ariaModal"
data-wp-watch="callbacks.initLightbox"
data-wp-on--keydown="actions.handleKeydown"
data-wp-on--touchstart="actions.handleTouchStart"
data-wp-on--touchmove="actions.handleTouchMove"
data-wp-on--touchend="actions.handleTouchEnd"
data-wp-on--click="actions.hideLightbox"
tabindex="-1"
>
<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.hideLightbox">
$close_button_icon
</button>
<div class="lightbox-image-container">$initial_image_content</div>
<div class="lightbox-image-container">$enlarged_image_content</div>
<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
</div>
echo <<<HTML
<div
class="wp-lightbox-overlay zoom"
data-wp-interactive='{"namespace":"core/image"}'
data-wp-context='{}'
data-wp-bind--role="state.roleAttribute"
data-wp-bind--aria-label="state.currentImage.ariaLabel"
data-wp-bind--aria-modal="state.ariaModal"
data-wp-class--active="state.overlayEnabled"
data-wp-class--show-closing-animation="state.showClosingAnimation"
data-wp-watch="callbacks.setOverlayFocus"
data-wp-on--keydown="actions.handleKeydown"
data-wp-on--touchstart="actions.handleTouchStart"
data-wp-on--touchmove="actions.handleTouchMove"
data-wp-on--touchend="actions.handleTouchEnd"
data-wp-on--click="actions.hideLightbox"
data-wp-on-window--resize="callbacks.setOverlayStyles"
data-wp-on-window--scroll="actions.handleScroll"
tabindex="-1"
>
<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
</button>
<div class="lightbox-image-container">
<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.currentImage.figureStyles">
<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.currentImage.currentSrc">
</figure>
</div>
<div class="lightbox-image-container">
<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.currentImage.figureStyles">
<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.enlargedSrc">
</figure>
</div>
<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
<style data-wp-text="state.overlayStyles"></style>
</div>
HTML;
return str_replace( '</figure>', $lightbox_html . '</figure>', $body_content );
}
/**
@ -322,12 +286,5 @@ function register_block_core_image() {
'render_callback' => 'render_block_core_image',
)
);
wp_register_script_module(
'@wordpress/block-library/image',
defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ? gutenberg_url( '/build/interactivity/image.min.js' ) : includes_url( 'blocks/image/view.min.js' ),
array( '@wordpress/interactivity' ),
defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
);
}
add_action( 'init', 'register_block_core_image' );

4
wp-includes/blocks/image/block.json
View File

@ -117,10 +117,14 @@
"radius": true,
"width": true
}
},
"shadow": {
"__experimentalSkipSerialization": true
}
},
"selectors": {
"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
"shadow": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
"filter": {
"duotone": ".wp-block-image img, .wp-block-image .components-placeholder"
}

12
wp-includes/blocks/image/style-rtl.css
View File

@ -221,10 +221,10 @@
.wp-lightbox-overlay.active img{
animation:turn-on-visibility .35s both;
}
.wp-lightbox-overlay.hideanimationenabled:not(.active){
.wp-lightbox-overlay.show-closing-animation:not(.active){
animation:turn-off-visibility .35s both;
}
.wp-lightbox-overlay.hideanimationenabled:not(.active) img{
.wp-lightbox-overlay.show-closing-animation:not(.active) img{
animation:turn-off-visibility .25s both;
}
@media (prefers-reduced-motion:no-preference){
@ -242,16 +242,16 @@
.wp-lightbox-overlay.zoom.active .scrim{
animation:turn-on-visibility .4s forwards;
}
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active){
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active){
animation:none;
}
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .lightbox-image-container{
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container{
animation:lightbox-zoom-out .4s;
}
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .lightbox-image-container img{
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img{
animation:none;
}
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .scrim{
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim{
animation:turn-off-visibility .4s forwards;
}
}

2
wp-includes/blocks/image/style-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
wp-includes/blocks/image/style.css
View File

@ -221,10 +221,10 @@
.wp-lightbox-overlay.active img{
animation:turn-on-visibility .35s both;
}
.wp-lightbox-overlay.hideanimationenabled:not(.active){
.wp-lightbox-overlay.show-closing-animation:not(.active){
animation:turn-off-visibility .35s both;
}
.wp-lightbox-overlay.hideanimationenabled:not(.active) img{
.wp-lightbox-overlay.show-closing-animation:not(.active) img{
animation:turn-off-visibility .25s both;
}
@media (prefers-reduced-motion:no-preference){
@ -242,16 +242,16 @@
.wp-lightbox-overlay.zoom.active .scrim{
animation:turn-on-visibility .4s forwards;
}
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active){
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active){
animation:none;
}
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .lightbox-image-container{
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container{
animation:lightbox-zoom-out .4s;
}
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .lightbox-image-container img{
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img{
animation:none;
}
.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .scrim{
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim{
animation:turn-off-visibility .4s forwards;
}
}

2
wp-includes/blocks/image/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

642
wp-includes/blocks/image/view.js
View File

@ -32,242 +32,315 @@ const interactivity_namespaceObject = x({ ["getContext"]: () => __WEBPACK_EXTERN
* WordPress dependencies
*/
const focusableSelectors = ['a[href]', 'area[href]', 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', 'select:not([disabled]):not([aria-hidden])', 'textarea:not([disabled]):not([aria-hidden])', 'button:not([disabled]):not([aria-hidden])', 'iframe', 'object', 'embed', '[contenteditable]', '[tabindex]:not([tabindex^="-"])'];
/**
* Stores a context-bound scroll handler.
*
* This callback could be defined inline inside of the store
* object but it's created externally to avoid confusion about
* how its logic is called. This logic is not referenced directly
* by the directives in the markup because the scroll event we
* need to listen to is triggered on the window; so by defining it
* outside of the store, we signal that the behavior here is different.
* If we find a compelling reason to move it to the store, feel free.
*
* @type {Function}
*/
let scrollCallback;
/**
* Tracks whether user is touching screen; used to
* differentiate behavior for touch and mouse input.
* Tracks whether user is touching screen; used to differentiate behavior for
* touch and mouse input.
*
* @type {boolean}
*/
let isTouching = false;
/**
* Tracks the last time the screen was touched; used to
* differentiate behavior for touch and mouse input.
* Tracks the last time the screen was touched; used to differentiate behavior
* for touch and mouse input.
*
* @type {number}
*/
let lastTouchTime = 0;
/**
* Lightbox page-scroll handler: prevents scrolling.
* Stores the image reference of the currently opened lightbox.
*
* This handler is added to prevent scrolling behaviors that
* trigger content shift while the lightbox is open.
*
* It would be better to accomplish this through CSS alone, but
* using overflow: hidden is currently the only way to do so, and
* that causes the layout to shift and prevents the zoom animation
* from working in some cases because we're unable to account for
* the layout shift when doing the animation calculations. Instead,
* here we use JavaScript to prevent and reset the scrolling
* behavior. In the future, we may be able to use CSS or overflow: hidden
* instead to not rely on JavaScript, but this seems to be the best approach
* for now that provides the best visual experience.
*
* @param {Object} ctx Context object with the `core/image` namespace.
* @type {HTMLElement}
*/
function handleScroll(ctx) {
// We can't override the scroll behavior on mobile devices
// because doing so breaks the pinch to zoom functionality, and we
// want to allow users to zoom in further on the high-res image.
if (!isTouching && Date.now() - lastTouchTime > 450) {
// We are unable to use event.preventDefault() to prevent scrolling
// because the scroll event can't be canceled, so we reset the position instead.
window.scrollTo(ctx.scrollLeftReset, ctx.scrollTopReset);
}
}
let imageRef;
/**
* Stores the button reference of the currently opened lightbox.
*
* @type {HTMLElement}
*/
let buttonRef;
const {
state,
actions,
callbacks
} = (0,interactivity_namespaceObject.store)('core/image', {
state: {
windowWidth: window.innerWidth,
windowHeight: window.innerHeight,
currentImage: {},
get overlayOpened() {
return state.currentImage.currentSrc;
},
get roleAttribute() {
const ctx = (0,interactivity_namespaceObject.getContext)();
return ctx.lightboxEnabled ? 'dialog' : null;
return state.overlayOpened ? 'dialog' : null;
},
get ariaModal() {
const ctx = (0,interactivity_namespaceObject.getContext)();
return ctx.lightboxEnabled ? 'true' : null;
return state.overlayOpened ? 'true' : null;
},
get dialogLabel() {
const ctx = (0,interactivity_namespaceObject.getContext)();
return ctx.lightboxEnabled ? ctx.dialogLabel : null;
get enlargedSrc() {
return state.currentImage.uploadedSrc || 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
},
get lightboxObjectFit() {
const ctx = (0,interactivity_namespaceObject.getContext)();
if (ctx.initialized) {
return 'cover';
}
},
get enlargedImgSrc() {
const ctx = (0,interactivity_namespaceObject.getContext)();
return ctx.initialized ? ctx.imageUploadedSrc : 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
get imgStyles() {
return state.overlayOpened && `${state.currentImage.imgStyles?.replace(/;$/, '')}; object-fit:cover;`;
}
},
actions: {
showLightbox(event) {
showLightbox() {
const ctx = (0,interactivity_namespaceObject.getContext)();
// We can't initialize the lightbox until the reference
// image is loaded, otherwise the UX is broken.
if (!ctx.imageLoaded) {
// Bails out if the image has not loaded yet.
if (!ctx.imageRef?.complete) {
return;
}
ctx.initialized = true;
ctx.lastFocusedElement = window.document.activeElement;
ctx.scrollDelta = 0;
ctx.pointerType = event.pointerType;
ctx.lightboxEnabled = true;
setStyles(ctx, ctx.imageRef);
ctx.scrollTopReset = window.pageYOffset || document.documentElement.scrollTop;
// In most cases, this value will be 0, but this is included
// in case a user has created a page with horizontal scrolling.
ctx.scrollLeftReset = window.pageXOffset || document.documentElement.scrollLeft;
// Stores the positons of the scroll to fix it until the overlay is
// closed.
state.scrollTopReset = document.documentElement.scrollTop;
state.scrollLeftReset = document.documentElement.scrollLeft;
// We define and bind the scroll callback here so
// that we can pass the context and as an argument.
// We may be able to change this in the future if we
// define the scroll callback in the store instead, but
// this approach seems to tbe clearest for now.
scrollCallback = handleScroll.bind(null, ctx);
// Moves the information of the expaned image to the state.
ctx.currentSrc = ctx.imageRef.currentSrc;
imageRef = ctx.imageRef;
buttonRef = ctx.buttonRef;
state.currentImage = ctx;
state.overlayEnabled = true;
// We need to add a scroll event listener to the window
// here because we are unable to otherwise access it via
// the Interactivity API directives. If we add a native way
// to access the window, we can remove this.
window.addEventListener('scroll', scrollCallback, false);
// Computes the styles of the overlay for the animation.
callbacks.setOverlayStyles();
},
hideLightbox() {
const ctx = (0,interactivity_namespaceObject.getContext)();
ctx.hideAnimationEnabled = true;
if (ctx.lightboxEnabled) {
// We want to wait until the close animation is completed
// before allowing a user to scroll again. The duration of this
// animation is defined in the styles.scss and depends on if the
// animation is 'zoom' or 'fade', but in any case we should wait
// a few milliseconds longer than the duration, otherwise a user
// may scroll too soon and cause the animation to look sloppy.
if (state.overlayEnabled) {
// Waits until the close animation has completed before allowing a
// user to scroll again. The duration of this animation is defined in
// the `styles.scss` file, but in any case we should wait a few
// milliseconds longer than the duration, otherwise a user may scroll
// too soon and cause the animation to look sloppy.
setTimeout(function () {
window.removeEventListener('scroll', scrollCallback);
// If we don't delay before changing the focus,
// the focus ring will appear on Firefox before
// the image has finished animating, which looks broken.
ctx.lightboxTriggerRef.focus({
// Delays before changing the focus. Otherwise the focus ring will
// appear on Firefox before the image has finished animating, which
// looks broken.
buttonRef.focus({
preventScroll: true
});
// Resets the current image to mark the overlay as closed.
state.currentImage = {};
imageRef = null;
buttonRef = null;
}, 450);
ctx.lightboxEnabled = false;
// Starts the overlay closing animation. The showClosingAnimation
// class is used to avoid showing it on page load.
state.showClosingAnimation = true;
state.overlayEnabled = false;
}
},
handleKeydown(event) {
const ctx = (0,interactivity_namespaceObject.getContext)();
if (ctx.lightboxEnabled) {
if (event.key === 'Tab' || event.keyCode === 9) {
// If shift + tab it change the direction
if (event.shiftKey && window.document.activeElement === ctx.firstFocusableElement) {
event.preventDefault();
ctx.lastFocusableElement.focus();
} else if (!event.shiftKey && window.document.activeElement === ctx.lastFocusableElement) {
event.preventDefault();
ctx.firstFocusableElement.focus();
}
if (state.overlayEnabled) {
// Focuses the close button when the user presses the tab key.
if (event.key === 'Tab') {
event.preventDefault();
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
ref.querySelector('button').focus();
}
if (event.key === 'Escape' || event.keyCode === 27) {
actions.hideLightbox(event);
// Closes the lightbox when the user presses the escape key.
if (event.key === 'Escape') {
actions.hideLightbox();
}
}
},
// This is fired just by lazily loaded
// images on the page, not all images.
handleLoad() {
const ctx = (0,interactivity_namespaceObject.getContext)();
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
ctx.imageLoaded = true;
ctx.imageCurrentSrc = ref.currentSrc;
callbacks.setButtonStyles();
handleTouchMove(event) {
// On mobile devices, prevents triggering the scroll event because
// otherwise the page jumps around when it resets the scroll position.
// This also means that closing the lightbox requires that a user
// perform a simple tap. This may be changed in the future if there is a
// better alternative to override or reset the scroll position during
// swipe actions.
if (state.overlayEnabled) {
event.preventDefault();
}
},
handleTouchStart() {
isTouching = true;
},
handleTouchMove(event) {
const ctx = (0,interactivity_namespaceObject.getContext)();
// On mobile devices, we want to prevent triggering the
// scroll event because otherwise the page jumps around as
// we reset the scroll position. This also means that closing
// the lightbox requires that a user perform a simple tap. This
// may be changed in the future if we find a better alternative
// to override or reset the scroll position during swipe actions.
if (ctx.lightboxEnabled) {
event.preventDefault();
}
},
handleTouchEnd() {
// We need to wait a few milliseconds before resetting
// to ensure that pinch to zoom works consistently
// on mobile devices when the lightbox is open.
// Waits a few milliseconds before resetting to ensure that pinch to
// zoom works consistently on mobile devices when the lightbox is open.
lastTouchTime = Date.now();
isTouching = false;
},
handleScroll() {
// Prevents scrolling behaviors that trigger content shift while the
// lightbox is open. It would be better to accomplish through CSS alone,
// but using overflow: hidden is currently the only way to do so and
// that causes a layout to shift and prevents the zoom animation from
// working in some cases because it's not possible to account for the
// layout shift when doing the animation calculations. Instead, it uses
// JavaScript to prevent and reset the scrolling behavior.
if (state.overlayOpened) {
// Avoids overriding the scroll behavior on mobile devices because
// doing so breaks the pinch to zoom functionality, and users should
// be able to zoom in further on the high-res image.
if (!isTouching && Date.now() - lastTouchTime > 450) {
// It doesn't rely on `event.preventDefault()` to prevent scrolling
// because the scroll event can't be canceled, so it resets the
// position instead.
window.scrollTo(state.scrollLeftReset, state.scrollTopReset);
}
}
}
},
callbacks: {
initOriginImage() {
setOverlayStyles() {
if (!imageRef) return;
let {
naturalWidth,
naturalHeight,
offsetWidth: originalWidth,
offsetHeight: originalHeight
} = imageRef;
let {
x: screenPosX,
y: screenPosY
} = imageRef.getBoundingClientRect();
// Natural ratio of the image clicked to open the lightbox.
const naturalRatio = naturalWidth / naturalHeight;
// Original ratio of the image clicked to open the lightbox.
let originalRatio = originalWidth / originalHeight;
// If it has object-fit: contain, recalculates the original sizes
// and the screen position without the blank spaces.
if (state.currentImage.scaleAttr === 'contain') {
if (naturalRatio > originalRatio) {
const heightWithoutSpace = originalWidth / naturalRatio;
// Recalculates screen position without the top space.
screenPosY += (originalHeight - heightWithoutSpace) / 2;
originalHeight = heightWithoutSpace;
} else {
const widthWithoutSpace = originalHeight * naturalRatio;
// Recalculates screen position without the left space.
screenPosX += (originalWidth - widthWithoutSpace) / 2;
originalWidth = widthWithoutSpace;
}
}
originalRatio = originalWidth / originalHeight;
// Typically, it uses the image's full-sized dimensions. If those
// dimensions have not been set (i.e. an external image with only one
// size), the image's dimensions in the lightbox are the same
// as those of the image in the content.
let imgMaxWidth = parseFloat(state.currentImage.targetWidth !== 'none' ? state.currentImage.targetWidth : naturalWidth);
let imgMaxHeight = parseFloat(state.currentImage.targetHeight !== 'none' ? state.currentImage.targetHeight : naturalHeight);
// Ratio of the biggest image stored in the database.
let imgRatio = imgMaxWidth / imgMaxHeight;
let containerMaxWidth = imgMaxWidth;
let containerMaxHeight = imgMaxHeight;
let containerWidth = imgMaxWidth;
let containerHeight = imgMaxHeight;
// Checks if the target image has a different ratio than the original
// one (thumbnail). Recalculates the width and height.
if (naturalRatio.toFixed(2) !== imgRatio.toFixed(2)) {
if (naturalRatio > imgRatio) {
// If the width is reached before the height, it keeps the maxWidth
// and recalculates the height unless the difference between the
// maxHeight and the reducedHeight is higher than the maxWidth,
// where it keeps the reducedHeight and recalculate the width.
const reducedHeight = imgMaxWidth / naturalRatio;
if (imgMaxHeight - reducedHeight > imgMaxWidth) {
imgMaxHeight = reducedHeight;
imgMaxWidth = reducedHeight * naturalRatio;
} else {
imgMaxHeight = imgMaxWidth / naturalRatio;
}
} else {
// If the height is reached before the width, it keeps the maxHeight
// and recalculate the width unlesss the difference between the
// maxWidth and the reducedWidth is higher than the maxHeight, where
// it keeps the reducedWidth and recalculate the height.
const reducedWidth = imgMaxHeight * naturalRatio;
if (imgMaxWidth - reducedWidth > imgMaxHeight) {
imgMaxWidth = reducedWidth;
imgMaxHeight = reducedWidth / naturalRatio;
} else {
imgMaxWidth = imgMaxHeight * naturalRatio;
}
}
containerWidth = imgMaxWidth;
containerHeight = imgMaxHeight;
imgRatio = imgMaxWidth / imgMaxHeight;
// Calculates the max size of the container.
if (originalRatio > imgRatio) {
containerMaxWidth = imgMaxWidth;
containerMaxHeight = containerMaxWidth / originalRatio;
} else {
containerMaxHeight = imgMaxHeight;
containerMaxWidth = containerMaxHeight * originalRatio;
}
}
// If the image has been pixelated on purpose, it keeps that size.
if (originalWidth > containerWidth || originalHeight > containerHeight) {
containerWidth = originalWidth;
containerHeight = originalHeight;
}
// Calculates the final lightbox image size and the scale factor.
// MaxWidth is either the window container (accounting for padding) or
// the image resolution.
let horizontalPadding = 0;
if (window.innerWidth > 480) {
horizontalPadding = 80;
} else if (window.innerWidth > 1920) {
horizontalPadding = 160;
}
const verticalPadding = 80;
const targetMaxWidth = Math.min(window.innerWidth - horizontalPadding, containerWidth);
const targetMaxHeight = Math.min(window.innerHeight - verticalPadding, containerHeight);
const targetContainerRatio = targetMaxWidth / targetMaxHeight;
if (originalRatio > targetContainerRatio) {
// If targetMaxWidth is reached before targetMaxHeight.
containerWidth = targetMaxWidth;
containerHeight = containerWidth / originalRatio;
} else {
// If targetMaxHeight is reached before targetMaxWidth.
containerHeight = targetMaxHeight;
containerWidth = containerHeight * originalRatio;
}
const containerScale = originalWidth / containerWidth;
const lightboxImgWidth = imgMaxWidth * (containerWidth / containerMaxWidth);
const lightboxImgHeight = imgMaxHeight * (containerHeight / containerMaxHeight);
// As of this writing, using the calculations above will render the
// lightbox with a small, erroneous whitespace on the left side of the
// image in iOS Safari, perhaps due to an inconsistency in how browsers
// handle absolute positioning and CSS transformation. In any case,
// adding 1 pixel to the container width and height solves the problem,
// though this can be removed if the issue is fixed in the future.
state.overlayStyles = `
:root {
--wp--lightbox-initial-top-position: ${screenPosY}px;
--wp--lightbox-initial-left-position: ${screenPosX}px;
--wp--lightbox-container-width: ${containerWidth + 1}px;
--wp--lightbox-container-height: ${containerHeight + 1}px;
--wp--lightbox-image-width: ${lightboxImgWidth}px;
--wp--lightbox-image-height: ${lightboxImgHeight}px;
--wp--lightbox-scale: ${containerScale};
--wp--lightbox-scrollbar-width: ${window.innerWidth - document.documentElement.clientWidth}px;
}
`;
},
setButtonStyles() {
const ctx = (0,interactivity_namespaceObject.getContext)();
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
ctx.imageRef = ref;
if (ref.complete) {
ctx.imageLoaded = true;
ctx.imageCurrentSrc = ref.currentSrc;
}
},
initTriggerButton() {
const ctx = (0,interactivity_namespaceObject.getContext)();
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
ctx.lightboxTriggerRef = ref;
},
initLightbox() {
const ctx = (0,interactivity_namespaceObject.getContext)();
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
if (ctx.lightboxEnabled) {
const focusableElements = ref.querySelectorAll(focusableSelectors);
ctx.firstFocusableElement = focusableElements[0];
ctx.lastFocusableElement = focusableElements[focusableElements.length - 1];
// Move focus to the dialog when opening it.
ref.focus();
}
},
setButtonStyles() {
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
const {
naturalWidth,
naturalHeight,
@ -275,18 +348,17 @@ const {
offsetHeight
} = ref;
// If the image isn't loaded yet, we can't
// calculate where the button should be.
// If the image isn't loaded yet, it can't calculate where the button
// should be.
if (naturalWidth === 0 || naturalHeight === 0) {
return;
}
const figure = ref.parentElement;
const figureWidth = ref.parentElement.clientWidth;
// We need special handling for the height because
// a caption will cause the figure to be taller than
// the image, which means we need to account for that
// when calculating the placement of the button in the
// It needs special handling for the height because a caption will cause
// the figure to be taller than the image, which means it needs to
// account for that when calculating the placement of the button in the
// top right corner of the image.
let figureHeight = ref.parentElement.clientHeight;
const caption = figure.querySelector('figcaption');
@ -298,25 +370,24 @@ const {
}
const buttonOffsetTop = figureHeight - offsetHeight;
const buttonOffsetRight = figureWidth - offsetWidth;
const ctx = (0,interactivity_namespaceObject.getContext)();
// In the case of an image with object-fit: contain, the
// size of the <img> element can be larger than the image itself,
// so we need to calculate where to place the button.
// In the case of an image with object-fit: contain, the size of the
// <img> element can be larger than the image itself, so it needs to
// calculate where to place the button.
if (ctx.scaleAttr === 'contain') {
// Natural ratio of the image.
const naturalRatio = naturalWidth / naturalHeight;
// Offset ratio of the image.
const offsetRatio = offsetWidth / offsetHeight;
if (naturalRatio >= offsetRatio) {
// If it reaches the width first, keep
// the width and compute the height.
// If it reaches the width first, it keeps the width and compute the
// height.
const referenceHeight = offsetWidth / naturalRatio;
ctx.imageButtonTop = (offsetHeight - referenceHeight) / 2 + buttonOffsetTop + 16;
ctx.imageButtonRight = buttonOffsetRight + 16;
} else {
// If it reaches the height first, keep
// the height and compute the width.
// If it reaches the height first, it keeps the height and compute
// the width.
const referenceWidth = offsetHeight * naturalRatio;
ctx.imageButtonTop = buttonOffsetTop + 16;
ctx.imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 16;
@ -326,197 +397,24 @@ const {
ctx.imageButtonRight = buttonOffsetRight + 16;
}
},
setStylesOnResize() {
setOverlayFocus() {
if (state.overlayEnabled) {
// Moves the focus to the dialog when it opens.
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
ref.focus();
}
},
initTriggerButton() {
const ctx = (0,interactivity_namespaceObject.getContext)();
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
if (ctx.lightboxEnabled && (state.windowWidth || state.windowHeight)) {
setStyles(ctx, ref);
}
ctx.buttonRef = ref;
}
}
}, {
lock: true
});
window.addEventListener('resize', debounce(() => {
state.windowWidth = window.innerWidth;
state.windowHeight = window.innerHeight;
}));
/**
* Computes styles for the lightbox and adds them to the document.
*
* @function
* @param {Object} ctx - Context for the `core/image` namespace.
* @param {Object} ref - The element reference.
*/
function setStyles(ctx, ref) {
// The reference img element lies adjacent
// to the event target button in the DOM.
let {
naturalWidth,
naturalHeight,
offsetWidth: originalWidth,
offsetHeight: originalHeight
} = ref;
let {
x: screenPosX,
y: screenPosY
} = ref.getBoundingClientRect();
// Natural ratio of the image clicked to open the lightbox.
const naturalRatio = naturalWidth / naturalHeight;
// Original ratio of the image clicked to open the lightbox.
let originalRatio = originalWidth / originalHeight;
// If it has object-fit: contain, recalculate the original sizes
// and the screen position without the blank spaces.
if (ctx.scaleAttr === 'contain') {
if (naturalRatio > originalRatio) {
const heightWithoutSpace = originalWidth / naturalRatio;
// Recalculate screen position without the top space.
screenPosY += (originalHeight - heightWithoutSpace) / 2;
originalHeight = heightWithoutSpace;
} else {
const widthWithoutSpace = originalHeight * naturalRatio;
// Recalculate screen position without the left space.
screenPosX += (originalWidth - widthWithoutSpace) / 2;
originalWidth = widthWithoutSpace;
}
}
originalRatio = originalWidth / originalHeight;
// Typically, we use the image's full-sized dimensions. If those
// dimensions have not been set (i.e. an external image with only one size),
// the image's dimensions in the lightbox are the same
// as those of the image in the content.
let imgMaxWidth = parseFloat(ctx.targetWidth !== 'none' ? ctx.targetWidth : naturalWidth);
let imgMaxHeight = parseFloat(ctx.targetHeight !== 'none' ? ctx.targetHeight : naturalHeight);
// Ratio of the biggest image stored in the database.
let imgRatio = imgMaxWidth / imgMaxHeight;
let containerMaxWidth = imgMaxWidth;
let containerMaxHeight = imgMaxHeight;
let containerWidth = imgMaxWidth;
let containerHeight = imgMaxHeight;
// Check if the target image has a different ratio than the original one (thumbnail).
// Recalculate the width and height.
if (naturalRatio.toFixed(2) !== imgRatio.toFixed(2)) {
if (naturalRatio > imgRatio) {
// If the width is reached before the height, we keep the maxWidth
// and recalculate the height.
// Unless the difference between the maxHeight and the reducedHeight
// is higher than the maxWidth, where we keep the reducedHeight and
// recalculate the width.
const reducedHeight = imgMaxWidth / naturalRatio;
if (imgMaxHeight - reducedHeight > imgMaxWidth) {
imgMaxHeight = reducedHeight;
imgMaxWidth = reducedHeight * naturalRatio;
} else {
imgMaxHeight = imgMaxWidth / naturalRatio;
}
} else {
// If the height is reached before the width, we keep the maxHeight
// and recalculate the width.
// Unless the difference between the maxWidth and the reducedWidth
// is higher than the maxHeight, where we keep the reducedWidth and
// recalculate the height.
const reducedWidth = imgMaxHeight * naturalRatio;
if (imgMaxWidth - reducedWidth > imgMaxHeight) {
imgMaxWidth = reducedWidth;
imgMaxHeight = reducedWidth / naturalRatio;
} else {
imgMaxWidth = imgMaxHeight * naturalRatio;
}
}
containerWidth = imgMaxWidth;
containerHeight = imgMaxHeight;
imgRatio = imgMaxWidth / imgMaxHeight;
// Calculate the max size of the container.
if (originalRatio > imgRatio) {
containerMaxWidth = imgMaxWidth;
containerMaxHeight = containerMaxWidth / originalRatio;
} else {
containerMaxHeight = imgMaxHeight;
containerMaxWidth = containerMaxHeight * originalRatio;
}
}
// If the image has been pixelated on purpose, keep that size.
if (originalWidth > containerWidth || originalHeight > containerHeight) {
containerWidth = originalWidth;
containerHeight = originalHeight;
}
// Calculate the final lightbox image size and the
// scale factor. MaxWidth is either the window container
// (accounting for padding) or the image resolution.
let horizontalPadding = 0;
if (window.innerWidth > 480) {
horizontalPadding = 80;
} else if (window.innerWidth > 1920) {
horizontalPadding = 160;
}
const verticalPadding = 80;
const targetMaxWidth = Math.min(window.innerWidth - horizontalPadding, containerWidth);
const targetMaxHeight = Math.min(window.innerHeight - verticalPadding, containerHeight);
const targetContainerRatio = targetMaxWidth / targetMaxHeight;
if (originalRatio > targetContainerRatio) {
// If targetMaxWidth is reached before targetMaxHeight
containerWidth = targetMaxWidth;
containerHeight = containerWidth / originalRatio;
} else {
// If targetMaxHeight is reached before targetMaxWidth
containerHeight = targetMaxHeight;
containerWidth = containerHeight * originalRatio;
}
const containerScale = originalWidth / containerWidth;
const lightboxImgWidth = imgMaxWidth * (containerWidth / containerMaxWidth);
const lightboxImgHeight = imgMaxHeight * (containerHeight / containerMaxHeight);
// Add the CSS variables needed.
let styleTag = document.getElementById('wp-lightbox-styles');
if (!styleTag) {
styleTag = document.createElement('style');
styleTag.id = 'wp-lightbox-styles';
document.head.appendChild(styleTag);
}
// As of this writing, using the calculations above will render the lightbox
// with a small, erroneous whitespace on the left side of the image in iOS Safari,
// perhaps due to an inconsistency in how browsers handle absolute positioning and CSS
// transformation. In any case, adding 1 pixel to the container width and height solves
// the problem, though this can be removed if the issue is fixed in the future.
styleTag.innerHTML = `
:root {
--wp--lightbox-initial-top-position: ${screenPosY}px;
--wp--lightbox-initial-left-position: ${screenPosX}px;
--wp--lightbox-container-width: ${containerWidth + 1}px;
--wp--lightbox-container-height: ${containerHeight + 1}px;
--wp--lightbox-image-width: ${lightboxImgWidth}px;
--wp--lightbox-image-height: ${lightboxImgHeight}px;
--wp--lightbox-scale: ${containerScale};
--wp--lightbox-scrollbar-width: ${window.innerWidth - document.documentElement.clientWidth}px;
}
`;
}
/**
* Debounces a function call.
*
* @function
* @param {Function} func - A function to be called
* @param {number} wait - The time to wait before calling the function
*/
function debounce(func, wait = 50) {
let timeout;
return () => {
const later = () => {
timeout = null;
func();
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}

2
wp-includes/blocks/image/view.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
wp-includes/blocks/latest-comments/block.json
View File

@ -46,6 +46,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-latest-comments-editor",

3
wp-includes/blocks/latest-posts/block.json
View File

@ -110,6 +110,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-latest-posts-editor",

4
wp-includes/blocks/list-item/block.json
View File

@ -5,6 +5,7 @@
"title": "List item",
"category": "text",
"parent": [ "core/list" ],
"allowedBlocks": [ "core/list" ],
"description": "Create a list item.",
"textdomain": "default",
"attributes": {
@ -41,6 +42,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

6
wp-includes/blocks/list/block.json
View File

@ -4,6 +4,7 @@
"name": "core/list",
"title": "List",
"category": "text",
"allowedBlocks": [ "core/list-item" ],
"description": "Create a bulleted or numbered list.",
"keywords": [ "bullet list", "ordered list", "numbered list" ],
"textdomain": "default",
@ -70,7 +71,10 @@
"__unstablePasteTextInline": true,
"__experimentalSelector": "ol,ul",
"__experimentalOnMerge": true,
"__experimentalSlashInserter": true
"__experimentalSlashInserter": true,
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-list-editor",
"style": "wp-block-list"

3
wp-includes/blocks/loginout/block.json
View File

@ -39,6 +39,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

3
wp-includes/blocks/media-text/block.json
View File

@ -123,6 +123,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-media-text-editor",

5
wp-includes/blocks/missing/block.json
View File

@ -23,6 +23,9 @@
"customClassName": false,
"inserter": false,
"html": false,
"reusable": false
"reusable": false,
"interactivity": {
"clientNavigation": true
}
}
}

5
wp-includes/blocks/more/block.json
View File

@ -20,7 +20,10 @@
"customClassName": false,
"className": false,
"html": false,
"multiple": false
"multiple": false,
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-more-editor"
}

141
wp-includes/blocks/navigation-link.php
View File

@ -132,6 +132,10 @@ function block_core_navigation_link_maybe_urldecode( $url ) {
$query_params = wp_parse_args( $query );
foreach ( $query_params as $query_param ) {
$can_query_param_be_encoded = is_string( $query_param ) && ! empty( $query_param );
if ( ! $can_query_param_be_encoded ) {
continue;
}
if ( rawurldecode( $query_param ) !== $query_param ) {
$is_url_encoded = true;
break;
@ -323,70 +327,40 @@ function build_variation_for_navigation_link( $entity, $kind ) {
}
/**
* Register a variation for a post type / taxonomy for the navigation link block.
* Filters the registered variations for a block type.
* Returns the dynamically built variations for all post-types and taxonomies.
*
* @param array $variation Variation array from build_variation_for_navigation_link.
* @return void
* @since 6.5.0
*
* @param array $variations Array of registered variations for a block type.
* @param WP_Block_Type $block_type The full block type object.
*/
function block_core_navigation_link_register_variation( $variation ) {
// Directly set the variations on the registered block type
// because there's no server side registration for variations (see #47170).
$navigation_block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core/navigation-link' );
// If the block is not registered yet, bail early.
// Variation will be registered in register_block_core_navigation_link then.
if ( ! $navigation_block_type ) {
return;
function block_core_navigation_link_filter_variations( $variations, $block_type ) {
if ( 'core/navigation-link' !== $block_type->name ) {
return $variations;
}
$navigation_block_type->variations = array_merge(
$navigation_block_type->variations,
array( $variation )
);
$generated_variations = block_core_navigation_link_build_variations();
return array_merge( $variations, $generated_variations );
}
/**
* Unregister a variation for a post type / taxonomy for the navigation link block.
*
* @param string $name Name of the post type / taxonomy (which was used as variation name).
* @return void
*/
function block_core_navigation_link_unregister_variation( $name ) {
// Directly get the variations from the registered block type
// because there's no server side (un)registration for variations (see #47170).
$navigation_block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core/navigation-link' );
// If the block is not registered (yet), there's no need to remove a variation.
if ( ! $navigation_block_type || empty( $navigation_block_type->variations ) ) {
return;
}
$variations = $navigation_block_type->variations;
// Search for the variation and remove it from the array.
foreach ( $variations as $i => $variation ) {
if ( $variation['name'] === $name ) {
unset( $variations[ $i ] );
break;
}
}
// Reindex array after removing one variation.
$navigation_block_type->variations = array_values( $variations );
}
/**
* Register the navigation link block.
* Returns an array of variations for the navigation link block.
*
* @since 6.5.0
*
* @return array
*/
function build_navigation_link_block_variations() {
// This will only handle post types and taxonomies registered until this point (init on priority 9).
// See action hooks below for other post types and taxonomies.
// See https://github.com/WordPress/gutenberg/issues/53826 for details.
function block_core_navigation_link_build_variations() {
$post_types = get_post_types( array( 'show_in_nav_menus' => true ), 'objects' );
$taxonomies = get_taxonomies( array( 'show_in_nav_menus' => true ), 'objects' );
// Use two separate arrays as a way to order the variations in the UI.
// Known variations (like Post Link and Page Link) are added to the
// `built_ins` array. Variations for custom post types and taxonomies are
// added to the `variations` array and will always appear after `built-ins.
/*
* Use two separate arrays as a way to order the variations in the UI.
* Known variations (like Post Link and Page Link) are added to the
* `built_ins` array. Variations for custom post types and taxonomies are
* added to the `variations` array and will always appear after `built-ins.
*/
$built_ins = array();
$variations = array();
@ -415,76 +389,23 @@ function build_navigation_link_block_variations() {
}
/**
* Register the navigation link block.
* Registers the navigation link block.
*
* @uses render_block_core_navigation()
* @uses render_block_core_navigation_link()
* @uses build_navigation_link_block_variations()
* @throws WP_Error An WP_Error exception parsing the block definition.
*/
function register_block_core_navigation_link() {
register_block_type_from_metadata(
__DIR__ . '/navigation-link',
array(
'render_callback' => 'render_block_core_navigation_link',
'variation_callback' => 'build_navigation_link_block_variations',
'render_callback' => 'render_block_core_navigation_link',
)
);
}
add_action( 'init', 'register_block_core_navigation_link' );
// Register actions for all post types and taxonomies, to add variations when they are registered.
// All post types/taxonomies registered before register_block_core_navigation_link, will be handled by that function.
add_action( 'registered_post_type', 'block_core_navigation_link_register_post_type_variation', 10, 2 );
add_action( 'registered_taxonomy', 'block_core_navigation_link_register_taxonomy_variation', 10, 3 );
// Handle unregistering of post types and taxonomies and remove the variations.
add_action( 'unregistered_post_type', 'block_core_navigation_link_unregister_post_type_variation' );
add_action( 'unregistered_taxonomy', 'block_core_navigation_link_unregister_taxonomy_variation' );
/**
* Register custom post type variations for navigation link on post type registration
* Handles all post types registered after the block is registered in register_navigation_link_post_type_variations
*
* @param string $post_type The post type name passed from registered_post_type action hook.
* @param WP_Post_Type $post_type_object The post type object passed from registered_post_type.
* @return void
* Creates all variations for post types / taxonomies dynamically (= each time when variations are requested).
* Do not use variation_callback, to also account for unregistering post types/taxonomies later on.
*/
function block_core_navigation_link_register_post_type_variation( $post_type, $post_type_object ) {
if ( $post_type_object->show_in_nav_menus ) {
$variation = build_variation_for_navigation_link( $post_type_object, 'post-type' );
block_core_navigation_link_register_variation( $variation );
}
}
/**
* Register a custom taxonomy variation for navigation link on taxonomy registration
* Handles all taxonomies registered after the block is registered in register_navigation_link_post_type_variations
*
* @param string $taxonomy Taxonomy slug.
* @param array|string $object_type Object type or array of object types.
* @param array $args Array of taxonomy registration arguments.
* @return void
*/
function block_core_navigation_link_register_taxonomy_variation( $taxonomy, $object_type, $args ) {
if ( isset( $args['show_in_nav_menus'] ) && $args['show_in_nav_menus'] ) {
$variation = build_variation_for_navigation_link( (object) $args, 'post-type' );
block_core_navigation_link_register_variation( $variation );
}
}
/**
* Unregisters a custom post type variation for navigation link on post type unregistration.
*
* @param string $post_type The post type name passed from unregistered_post_type action hook.
* @return void
*/
function block_core_navigation_link_unregister_post_type_variation( $post_type ) {
block_core_navigation_link_unregister_variation( $post_type );
}
/**
* Unregisters a custom taxonomy variation for navigation link on taxonomy unregistration.
*
* @param string $taxonomy The taxonomy name passed from unregistered_taxonomy action hook.
* @return void
*/
function block_core_navigation_link_unregister_taxonomy_variation( $taxonomy ) {
block_core_navigation_link_unregister_variation( $taxonomy );
}
add_action( 'get_block_type_variations', 'block_core_navigation_link_filter_variations', 10, 2 );

10
wp-includes/blocks/navigation-link/block.json
View File

@ -5,6 +5,11 @@
"title": "Custom Link",
"category": "design",
"parent": [ "core/navigation" ],
"allowedBlocks": [
"core/navigation-link",
"core/navigation-submenu",
"core/page-list"
],
"description": "Add a page, link, or another item to your navigation.",
"textdomain": "default",
"attributes": {
@ -72,7 +77,10 @@
"fontSize": true
}
},
"renaming": false
"renaming": false,
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-navigation-link-editor",
"style": "wp-block-navigation-link"

22
wp-includes/blocks/navigation-link/style-rtl.css
View File

@ -3,4 +3,26 @@
}
.wp-block-navigation .wp-block-navigation-item__description{
display:none;
}
.link-ui-tools{
border-top:1px solid #f0f0f0;
padding:8px;
}
.link-ui-block-inserter{
padding-top:8px;
}
.link-ui-block-inserter__back{
margin-right:8px;
text-transform:uppercase;
}
.components-popover-pointer-events-trap{
background-color:initial;
cursor:pointer;
inset:0;
position:fixed;
z-index:1000000;
}

2
wp-includes/blocks/navigation-link/style-rtl.min.css vendored
View File

@ -1 +1 @@
.wp-block-navigation .wp-block-navigation-item__label{overflow-wrap:break-word}.wp-block-navigation .wp-block-navigation-item__description{display:none}
.wp-block-navigation .wp-block-navigation-item__label{overflow-wrap:break-word}.wp-block-navigation .wp-block-navigation-item__description{display:none}.link-ui-tools{border-top:1px solid #f0f0f0;padding:8px}.link-ui-block-inserter{padding-top:8px}.link-ui-block-inserter__back{margin-right:8px;text-transform:uppercase}.components-popover-pointer-events-trap{background-color:initial;cursor:pointer;inset:0;position:fixed;z-index:1000000}

22
wp-includes/blocks/navigation-link/style.css
View File

@ -3,4 +3,26 @@
}
.wp-block-navigation .wp-block-navigation-item__description{
display:none;
}
.link-ui-tools{
border-top:1px solid #f0f0f0;
padding:8px;
}
.link-ui-block-inserter{
padding-top:8px;
}
.link-ui-block-inserter__back{
margin-left:8px;
text-transform:uppercase;
}
.components-popover-pointer-events-trap{
background-color:initial;
cursor:pointer;
inset:0;
position:fixed;
z-index:1000000;
}

2
wp-includes/blocks/navigation-link/style.min.css vendored
View File

@ -1 +1 @@
.wp-block-navigation .wp-block-navigation-item__label{overflow-wrap:break-word}.wp-block-navigation .wp-block-navigation-item__description{display:none}
.wp-block-navigation .wp-block-navigation-item__label{overflow-wrap:break-word}.wp-block-navigation .wp-block-navigation-item__description{display:none}.link-ui-tools{border-top:1px solid #f0f0f0;padding:8px}.link-ui-block-inserter{padding-top:8px}.link-ui-block-inserter__back{margin-left:8px;text-transform:uppercase}.components-popover-pointer-events-trap{background-color:initial;cursor:pointer;inset:0;position:fixed;z-index:1000000}

5
wp-includes/blocks/navigation-submenu/block.json
View File

@ -58,7 +58,10 @@
],
"supports": {
"reusable": false,
"html": false
"html": false,
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-navigation-submenu-editor",
"style": "wp-block-navigation-submenu"

117
wp-includes/blocks/navigation.php
View File

@ -9,18 +9,11 @@
* Helper functions used to render the navigation block.
*/
class WP_Navigation_Block_Renderer {
/**
* Used to determine which blocks are wrapped in an <li>.
*
* @var array
* Used to determine whether or not a navigation has submenus.
*/
private static $nav_blocks_wrapped_in_list_item = array(
'core/navigation-link',
'core/home-link',
'core/site-title',
'core/site-logo',
'core/navigation-submenu',
);
private static $has_submenus = false;
/**
* Used to determine which blocks need an <li> wrapper.
@ -58,22 +51,37 @@ class WP_Navigation_Block_Renderer {
* Returns whether or not a navigation has a submenu.
*
* @param WP_Block_List $inner_blocks The list of inner blocks.
* @return bool Returns whether or not a navigation has a submenu.
* @return bool Returns whether or not a navigation has a submenu and also sets the member variable.
*/
private static function has_submenus( $inner_blocks ) {
if ( true === static::$has_submenus ) {
return static::$has_submenus;
}
foreach ( $inner_blocks as $inner_block ) {
$inner_block_content = $inner_block->render();
$p = new WP_HTML_Tag_Processor( $inner_block_content );
if ( $p->next_tag(
array(
'name' => 'LI',
'class_name' => 'has-child',
)
) ) {
return true;
// If this is a page list then work out if any of the pages have children.
if ( 'core/page-list' === $inner_block->name ) {
$all_pages = get_pages(
array(
'sort_column' => 'menu_order,post_title',
'order' => 'asc',
)
);
foreach ( (array) $all_pages as $page ) {
if ( $page->post_parent ) {
static::$has_submenus = true;
break;
}
}
}
// If this is a navigation submenu then we know we have submenus.
if ( 'core/navigation-submenu' === $inner_block->name ) {
static::$has_submenus = true;
break;
}
}
return false;
return static::$has_submenus;
}
/**
@ -96,7 +104,23 @@ class WP_Navigation_Block_Renderer {
* @return bool Returns whether or not a block needs a list item wrapper.
*/
private static function does_block_need_a_list_item_wrapper( $block ) {
return in_array( $block->name, static::$needs_list_item_wrapper, true );
/**
* Filter the list of blocks that need a list item wrapper.
*
* Affords the ability to customize which blocks need a list item wrapper when rendered
* within a core/navigation block.
* This is useful for blocks that are not list items but should be wrapped in a list
* item when used as a child of a navigation block.
*
* @since 6.5.0
*
* @param array $needs_list_item_wrapper The list of blocks that need a list item wrapper.
* @return array The list of blocks that need a list item wrapper.
*/
$needs_list_item_wrapper = apply_filters( 'block_core_navigation_listable_blocks', static::$needs_list_item_wrapper );
return in_array( $block->name, $needs_list_item_wrapper, true );
}
/**
@ -140,7 +164,9 @@ class WP_Navigation_Block_Renderer {
$is_list_open = false;
foreach ( $inner_blocks as $inner_block ) {
$is_list_item = in_array( $inner_block->name, static::$nav_blocks_wrapped_in_list_item, true );
$inner_block_markup = static::get_markup_for_inner_block( $inner_block );
$p = new WP_HTML_Tag_Processor( $inner_block_markup );
$is_list_item = $p->next_tag( 'LI' );
if ( $is_list_item && ! $is_list_open ) {
$is_list_open = true;
@ -155,7 +181,7 @@ class WP_Navigation_Block_Renderer {
$inner_blocks_html .= '</ul>';
}
$inner_blocks_html .= static::get_markup_for_inner_block( $inner_block );
$inner_blocks_html .= $inner_block_markup;
}
if ( $is_list_open ) {
@ -567,6 +593,17 @@ class WP_Navigation_Block_Renderer {
*/
private static function handle_view_script_module_loading( $attributes, $block, $inner_blocks ) {
if ( static::is_interactive( $attributes, $inner_blocks ) ) {
$suffix = wp_scripts_get_suffix();
if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
$module_url = gutenberg_url( '/build/interactivity/navigation.min.js' );
}
wp_register_script_module(
'@wordpress/block-library/navigation',
isset( $module_url ) ? $module_url : includes_url( "blocks/navigation/view{$suffix}.js" ),
array( '@wordpress/interactivity' ),
defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
);
wp_enqueue_script_module( '@wordpress/block-library/navigation' );
}
}
@ -968,7 +1005,9 @@ function block_core_navigation_block_contains_core_navigation( $inner_blocks ) {
function block_core_navigation_get_fallback_blocks() {
$page_list_fallback = array(
array(
'blockName' => 'core/page-list',
'blockName' => 'core/page-list',
'innerContent' => array(),
'attrs' => array(),
),
);
@ -976,12 +1015,7 @@ function block_core_navigation_get_fallback_blocks() {
// If `core/page-list` is not registered then return empty blocks.
$fallback_blocks = $registry->is_registered( 'core/page-list' ) ? $page_list_fallback : array();
if ( class_exists( 'WP_Navigation_Fallback' ) ) {
$navigation_post = WP_Navigation_Fallback::get_fallback();
} else {
$navigation_post = Gutenberg_Navigation_Fallback::get_fallback();
}
$navigation_post = WP_Navigation_Fallback::get_fallback();
// Use the first non-empty Navigation as fallback if available.
if ( $navigation_post ) {
@ -1079,13 +1113,6 @@ function register_block_core_navigation() {
'render_callback' => 'render_block_core_navigation',
)
);
wp_register_script_module(
'@wordpress/block-library/navigation',
defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ? gutenberg_url( '/build/interactivity/navigation.min.js' ) : includes_url( 'blocks/navigation/view.min.js' ),
array( '@wordpress/interactivity' ),
defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
);
}
add_action( 'init', 'register_block_core_navigation' );
@ -1418,9 +1445,14 @@ function block_core_navigation_update_ignore_hooked_blocks_meta( $post ) {
}
}
// Before adding our filter, we verify if it's already added in Core.
// However, during the build process, Gutenberg automatically prefixes our functions with "gutenberg_".
// Therefore, we concatenate the Core's function name to circumvent this prefix for our check.
$rest_insert_wp_navigation_core_callback = 'block_core_navigation_' . 'update_ignore_hooked_blocks_meta';
// Injection of hooked blocks into the Navigation block relies on some functions present in WP >= 6.5
// that are not present in Gutenberg's WP 6.5 compatibility layer.
if ( function_exists( 'get_hooked_block_markup' ) ) {
if ( function_exists( 'get_hooked_block_markup' ) && ! has_filter( 'rest_insert_wp_navigation', $rest_insert_wp_navigation_core_callback ) ) {
add_action( 'rest_insert_wp_navigation', 'block_core_navigation_update_ignore_hooked_blocks_meta', 10, 3 );
}
@ -1450,8 +1482,13 @@ function block_core_navigation_insert_hooked_blocks_into_rest_response( $respons
return $response;
}
// Before adding our filter, we verify if it's already added in Core.
// However, during the build process, Gutenberg automatically prefixes our functions with "gutenberg_".
// Therefore, we concatenate the Core's function name to circumvent this prefix for our check.
$rest_prepare_wp_navigation_core_callback = 'block_core_navigation_' . 'insert_hooked_blocks_into_rest_response';
// Injection of hooked blocks into the Navigation block relies on some functions present in WP >= 6.5
// that are not present in Gutenberg's WP 6.5 compatibility layer.
if ( function_exists( 'get_hooked_block_markup' ) ) {
if ( function_exists( 'get_hooked_block_markup' ) && ! has_filter( 'rest_prepare_wp_navigation', $rest_prepare_wp_navigation_core_callback ) ) {
add_filter( 'rest_prepare_wp_navigation', 'block_core_navigation_insert_hooked_blocks_into_rest_response', 10, 3 );
}

13
wp-includes/blocks/navigation/block.json
View File

@ -4,6 +4,19 @@
"name": "core/navigation",
"title": "Navigation",
"category": "theme",
"allowedBlocks": [
"core/navigation-link",
"core/search",
"core/social-links",
"core/page-list",
"core/spacer",
"core/home-link",
"core/site-title",
"core/site-logo",
"core/navigation-submenu",
"core/loginout",
"core/buttons"
],
"description": "A collection of blocks that allow visitors to get around your site.",
"keywords": [ "menu", "navigation", "links" ],
"textdomain": "default",

3
wp-includes/blocks/navigation/view.js
View File

@ -31,7 +31,6 @@ const interactivity_namespaceObject = x({ ["getContext"]: () => __WEBPACK_EXTERN
const DEFAULT_BLOCK = {
name: 'core/navigation-link'
};
const ALLOWED_BLOCKS = (/* unused pure expression or super */ null && (['core/navigation-link', 'core/search', 'core/social-links', 'core/page-list', 'core/spacer', 'core/home-link', 'core/site-title', 'core/site-logo', 'core/navigation-submenu', 'core/loginout', 'core/buttons']));
const PRIORITIZED_INSERTER_BLOCKS = (/* unused pure expression or super */ null && (['core/navigation-link/page', 'core/navigation-link']));
// These parameters must be kept aligned with those in
@ -245,5 +244,7 @@ const {
};
}
}
}, {
lock: true
});

2
wp-includes/blocks/navigation/view.min.js vendored
View File

@ -1 +1 @@
import*as e from"@wordpress/interactivity";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const n=(e=>{var n={};return t.d(n,e),n})({getContext:()=>e.getContext,getElement:()=>e.getElement,store:()=>e.store}),o=["a[href]",'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',"select:not([disabled]):not([aria-hidden])","textarea:not([disabled]):not([aria-hidden])","button:not([disabled]):not([aria-hidden])","[contenteditable]",'[tabindex]:not([tabindex^="-"])'];document.addEventListener("click",(()=>{}));const{state:l,actions:c}=(0,n.store)("core/navigation",{state:{get roleAttribute(){return"overlay"===(0,n.getContext)().type&&l.isMenuOpen?"dialog":null},get ariaModal(){return"overlay"===(0,n.getContext)().type&&l.isMenuOpen?"true":null},get ariaLabel(){const e=(0,n.getContext)();return"overlay"===e.type&&l.isMenuOpen?e.ariaLabel:null},get isMenuOpen(){return Object.values(l.menuOpenedBy).filter(Boolean).length>0},get menuOpenedBy(){const e=(0,n.getContext)();return"overlay"===e.type?e.overlayOpenedBy:e.submenuOpenedBy}},actions:{openMenuOnHover(){const{type:e,overlayOpenedBy:t}=(0,n.getContext)();"submenu"===e&&0===Object.values(t||{}).filter(Boolean).length&&c.openMenu("hover")},closeMenuOnHover(){c.closeMenu("hover")},openMenuOnClick(){const e=(0,n.getContext)(),{ref:t}=(0,n.getElement)();e.previousFocus=t,c.openMenu("click")},closeMenuOnClick(){c.closeMenu("click"),c.closeMenu("focus")},openMenuOnFocus(){c.openMenu("focus")},toggleMenuOnClick(){const e=(0,n.getContext)(),{ref:t}=(0,n.getElement)();window.document.activeElement!==t&&t.focus();const{menuOpenedBy:o}=l;o.click||o.focus?(c.closeMenu("click"),c.closeMenu("focus")):(e.previousFocus=t,c.openMenu("click"))},handleMenuKeydown(e){const{type:t,firstFocusableElement:o,lastFocusableElement:s}=(0,n.getContext)();if(l.menuOpenedBy.click){if("Escape"===e?.key)return c.closeMenu("click"),void c.closeMenu("focus");"overlay"===t&&"Tab"===e.key&&(e.shiftKey&&window.document.activeElement===o?(e.preventDefault(),s.focus()):e.shiftKey||window.document.activeElement!==s||(e.preventDefault(),o.focus()))}},handleMenuFocusout(e){const{modal:t}=(0,n.getContext)();(null===e.relatedTarget||!t?.contains(e.relatedTarget)&&e.target!==window.document.activeElement)&&(c.closeMenu("click"),c.closeMenu("focus"))},openMenu(e="click"){const{type:t}=(0,n.getContext)();l.menuOpenedBy[e]=!0,"overlay"===t&&document.documentElement.classList.add("has-modal-open")},closeMenu(e="click"){const t=(0,n.getContext)();l.menuOpenedBy[e]=!1,l.isMenuOpen||(t.modal?.contains(window.document.activeElement)&&t.previousFocus?.focus(),t.modal=null,t.previousFocus=null,"overlay"===t.type&&document.documentElement.classList.remove("has-modal-open"))}},callbacks:{initMenu(){const e=(0,n.getContext)(),{ref:t}=(0,n.getElement)();if(l.isMenuOpen){const n=t.querySelectorAll(o);e.modal=t,e.firstFocusableElement=n[0],e.lastFocusableElement=n[n.length-1]}},focusFirstElement(){const{ref:e}=(0,n.getElement)();if(l.isMenuOpen){const t=e.querySelectorAll(o);t?.[0]?.focus()}},initNav(){const e=(0,n.getContext)(),t=window.matchMedia("(max-width: 600px)");function o(t){e.isCollapsed=t.matches}return e.isCollapsed=t.matches,t.addEventListener("change",o),()=>{t.removeEventListener("change",o)}}}});
import*as e from"@wordpress/interactivity";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const n=(e=>{var n={};return t.d(n,e),n})({getContext:()=>e.getContext,getElement:()=>e.getElement,store:()=>e.store}),o=["a[href]",'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',"select:not([disabled]):not([aria-hidden])","textarea:not([disabled]):not([aria-hidden])","button:not([disabled]):not([aria-hidden])","[contenteditable]",'[tabindex]:not([tabindex^="-"])'];document.addEventListener("click",(()=>{}));const{state:l,actions:c}=(0,n.store)("core/navigation",{state:{get roleAttribute(){return"overlay"===(0,n.getContext)().type&&l.isMenuOpen?"dialog":null},get ariaModal(){return"overlay"===(0,n.getContext)().type&&l.isMenuOpen?"true":null},get ariaLabel(){const e=(0,n.getContext)();return"overlay"===e.type&&l.isMenuOpen?e.ariaLabel:null},get isMenuOpen(){return Object.values(l.menuOpenedBy).filter(Boolean).length>0},get menuOpenedBy(){const e=(0,n.getContext)();return"overlay"===e.type?e.overlayOpenedBy:e.submenuOpenedBy}},actions:{openMenuOnHover(){const{type:e,overlayOpenedBy:t}=(0,n.getContext)();"submenu"===e&&0===Object.values(t||{}).filter(Boolean).length&&c.openMenu("hover")},closeMenuOnHover(){c.closeMenu("hover")},openMenuOnClick(){const e=(0,n.getContext)(),{ref:t}=(0,n.getElement)();e.previousFocus=t,c.openMenu("click")},closeMenuOnClick(){c.closeMenu("click"),c.closeMenu("focus")},openMenuOnFocus(){c.openMenu("focus")},toggleMenuOnClick(){const e=(0,n.getContext)(),{ref:t}=(0,n.getElement)();window.document.activeElement!==t&&t.focus();const{menuOpenedBy:o}=l;o.click||o.focus?(c.closeMenu("click"),c.closeMenu("focus")):(e.previousFocus=t,c.openMenu("click"))},handleMenuKeydown(e){const{type:t,firstFocusableElement:o,lastFocusableElement:s}=(0,n.getContext)();if(l.menuOpenedBy.click){if("Escape"===e?.key)return c.closeMenu("click"),void c.closeMenu("focus");"overlay"===t&&"Tab"===e.key&&(e.shiftKey&&window.document.activeElement===o?(e.preventDefault(),s.focus()):e.shiftKey||window.document.activeElement!==s||(e.preventDefault(),o.focus()))}},handleMenuFocusout(e){const{modal:t}=(0,n.getContext)();(null===e.relatedTarget||!t?.contains(e.relatedTarget)&&e.target!==window.document.activeElement)&&(c.closeMenu("click"),c.closeMenu("focus"))},openMenu(e="click"){const{type:t}=(0,n.getContext)();l.menuOpenedBy[e]=!0,"overlay"===t&&document.documentElement.classList.add("has-modal-open")},closeMenu(e="click"){const t=(0,n.getContext)();l.menuOpenedBy[e]=!1,l.isMenuOpen||(t.modal?.contains(window.document.activeElement)&&t.previousFocus?.focus(),t.modal=null,t.previousFocus=null,"overlay"===t.type&&document.documentElement.classList.remove("has-modal-open"))}},callbacks:{initMenu(){const e=(0,n.getContext)(),{ref:t}=(0,n.getElement)();if(l.isMenuOpen){const n=t.querySelectorAll(o);e.modal=t,e.firstFocusableElement=n[0],e.lastFocusableElement=n[n.length-1]}},focusFirstElement(){const{ref:e}=(0,n.getElement)();if(l.isMenuOpen){const t=e.querySelectorAll(o);t?.[0]?.focus()}},initNav(){const e=(0,n.getContext)(),t=window.matchMedia("(max-width: 600px)");function o(t){e.isCollapsed=t.matches}return e.isCollapsed=t.matches,t.addEventListener("change",o),()=>{t.removeEventListener("change",o)}}}},{lock:!0});

5
wp-includes/blocks/nextpage/block.json
View File

@ -11,7 +11,10 @@
"supports": {
"customClassName": false,
"className": false,
"html": false
"html": false,
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-nextpage-editor"
}

5
wp-includes/blocks/page-list-item/block.json
View File

@ -45,7 +45,10 @@
"html": false,
"lock": false,
"inserter": false,
"__experimentalToolbar": false
"__experimentalToolbar": false,
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-page-list-editor",
"style": "wp-block-page-list"

4
wp-includes/blocks/page-list/block.json
View File

@ -4,6 +4,7 @@
"name": "core/page-list",
"title": "Page List",
"category": "widgets",
"allowedBlocks": [ "core/page-list-item" ],
"description": "Display a list of all pages.",
"keywords": [ "menu", "navigation" ],
"textdomain": "default",
@ -47,6 +48,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-page-list-editor",

5
wp-includes/blocks/paragraph/block.json
View File

@ -64,7 +64,10 @@
}
},
"__experimentalSelector": "p",
"__unstablePasteTextInline": true
"__unstablePasteTextInline": true,
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-paragraph-editor",
"style": "wp-block-paragraph"

5
wp-includes/blocks/pattern/block.json
View File

@ -8,7 +8,10 @@
"supports": {
"html": false,
"inserter": false,
"renaming": false
"renaming": false,
"interactivity": {
"clientNavigation": true
}
},
"textdomain": "default",
"attributes": {

3
wp-includes/blocks/post-author-biography/block.json
View File

@ -37,6 +37,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

3
wp-includes/blocks/post-author-name/block.json
View File

@ -47,6 +47,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

3
wp-includes/blocks/post-author/block.json
View File

@ -61,6 +61,9 @@
"background": true,
"text": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"style": "wp-block-post-author"

4
wp-includes/blocks/post-content/editor-rtl.css Normal file
View File

@ -0,0 +1,4 @@
.wp-block-post-content.wp-block-post-content{
-webkit-user-select:none;
user-select:none;
}

1
wp-includes/blocks/post-content/editor-rtl.min.css vendored Normal file
View File

@ -0,0 +1 @@
.wp-block-post-content.wp-block-post-content{-webkit-user-select:none;user-select:none}

4
wp-includes/blocks/post-content/editor.css Normal file
View File

@ -0,0 +1,4 @@
.wp-block-post-content.wp-block-post-content{
-webkit-user-select:none;
user-select:none;
}

1
wp-includes/blocks/post-content/editor.min.css vendored Normal file
View File

@ -0,0 +1 @@
.wp-block-post-content.wp-block-post-content{-webkit-user-select:none;user-select:none}

3
wp-includes/blocks/post-date/block.json
View File

@ -50,6 +50,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

3
wp-includes/blocks/post-excerpt/block.json
View File

@ -50,6 +50,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-post-excerpt-editor",

3
wp-includes/blocks/post-featured-image/block.json
View File

@ -81,6 +81,9 @@
"spacing": {
"margin": true,
"padding": true
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-post-featured-image-editor",

7
wp-includes/blocks/post-navigation-link.php
View File

@ -99,9 +99,6 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
}
}
$in_same_term = isset( $attributes['inSameTerm'] ) ? $attributes['inSameTerm'] : false;
$taxonomy = isset( $attributes['taxonomy'] ) && $in_same_term ? $attributes['taxonomy'] : '';
/*
* The dynamic portion of the function name, `$navigation_type`,
* Refers to the type of adjacency, 'next' or 'previous'.
@ -111,8 +108,8 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
*/
$get_link_function = "get_{$navigation_type}_post_link";
if ( $in_same_term ) {
$content = $get_link_function( $format, $link, $in_same_term, '', $taxonomy );
if ( ! empty( $attributes['taxonomy'] ) ) {
$content = $get_link_function( $format, $link, true, '', $attributes['taxonomy'] );
} else {
$content = $get_link_function( $format, $link );
}

6
wp-includes/blocks/post-navigation-link/block.json
View File

@ -29,9 +29,6 @@
"type": "string",
"default": "none"
},
"inSameTerm": {
"type": "boolean"
},
"taxonomy": {
"type": "string",
"default": ""
@ -57,6 +54,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"style": "wp-block-post-navigation-link"

3
wp-includes/blocks/post-template/block.json
View File

@ -48,6 +48,9 @@
"__experimentalDefaultControls": {
"blockGap": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"style": "wp-block-post-template",

4
wp-includes/blocks/post-terms.php
View File

@ -63,7 +63,7 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
*
* @return array The available variations for the block.
*/
function build_post_term_block_variations() {
function block_core_post_terms_build_variations() {
$taxonomies = get_taxonomies(
array(
'publicly_queryable' => true,
@ -116,7 +116,7 @@ function register_block_core_post_terms() {
__DIR__ . '/post-terms',
array(
'render_callback' => 'render_block_core_post_terms',
'variation_callback' => 'build_post_term_block_variations',
'variation_callback' => 'block_core_post_terms_build_variations',
)
);
}

3
wp-includes/blocks/post-terms/block.json
View File

@ -54,6 +54,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"style": "wp-block-post-terms"

3
wp-includes/blocks/post-title/block.json
View File

@ -57,6 +57,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"style": "wp-block-post-title"

3
wp-includes/blocks/preformatted/block.json
View File

@ -40,6 +40,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"style": "wp-block-preformatted"

3
wp-includes/blocks/pullquote/block.json
View File

@ -69,6 +69,9 @@
"fontSize": "1.5em",
"lineHeight": "1.6"
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-pullquote-editor",

3
wp-includes/blocks/query-no-results/block.json
View File

@ -28,6 +28,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

3
wp-includes/blocks/query-pagination-next/block.json
View File

@ -41,6 +41,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

3
wp-includes/blocks/query-pagination-numbers/block.json
View File

@ -36,6 +36,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-query-pagination-numbers-editor"

3
wp-includes/blocks/query-pagination-previous/block.json
View File

@ -41,6 +41,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
}

10
wp-includes/blocks/query-pagination/block.json
View File

@ -4,7 +4,12 @@
"name": "core/query-pagination",
"title": "Pagination",
"category": "theme",
"parent": [ "core/query" ],
"ancestor": [ "core/query" ],
"allowedBlocks": [
"core/query-pagination-previous",
"core/query-pagination-numbers",
"core/query-pagination-next"
],
"description": "Displays a paginated navigation to next/previous set of posts, when applicable.",
"textdomain": "default",
"attributes": {
@ -54,6 +59,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"editorStyle": "wp-block-query-pagination-editor",

3
wp-includes/blocks/query-title/block.json
View File

@ -52,6 +52,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
},
"style": "wp-block-query-title"

104
wp-includes/blocks/query.php
View File

@ -17,11 +17,33 @@
* @return string Returns the modified output of the query block.
*/
function render_block_core_query( $attributes, $content, $block ) {
$is_interactive = isset( $attributes['enhancedPagination'] ) && true === $attributes['enhancedPagination'] && isset( $attributes['queryId'] );
$is_interactive = isset( $attributes['enhancedPagination'] )
&& true === $attributes['enhancedPagination']
&& isset( $attributes['queryId'] );
// Enqueue the script module and add the necessary directives if the block is
// interactive.
if ( $is_interactive ) {
$suffix = wp_scripts_get_suffix();
if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
$module_url = gutenberg_url( '/build/interactivity/query.min.js' );
}
wp_register_script_module(
'@wordpress/block-library/query',
isset( $module_url ) ? $module_url : includes_url( "blocks/query/view{$suffix}.js" ),
array(
array(
'id' => '@wordpress/interactivity',
'import' => 'static',
),
array(
'id' => '@wordpress/interactivity-router',
'import' => 'dynamic',
),
),
defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
);
wp_enqueue_script_module( '@wordpress/block-library/query' );
$p = new WP_HTML_Tag_Processor( $content );
@ -30,43 +52,8 @@ function render_block_core_query( $attributes, $content, $block ) {
$p->set_attribute( 'data-wp-interactive', '{"namespace":"core/query"}' );
$p->set_attribute( 'data-wp-router-region', 'query-' . $attributes['queryId'] );
$p->set_attribute( 'data-wp-init', 'callbacks.setQueryRef' );
// Use context to send translated strings.
$p->set_attribute(
'data-wp-context',
wp_json_encode(
array(
'loadingText' => __( 'Loading page, please wait.' ),
'loadedText' => __( 'Page Loaded.' ),
),
JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
)
);
$p->set_attribute( 'data-wp-context', '{}' );
$content = $p->get_updated_html();
// Mark the block as interactive.
$block->block_type->supports['interactivity'] = true;
// Add a div to announce messages using `aria-live`.
$html_tag = 'div';
if ( ! empty( $attributes['tagName'] ) ) {
$html_tag = esc_attr( $attributes['tagName'] );
}
$last_tag_position = strripos( $content, '</' . $html_tag . '>' );
$content = substr_replace(
$content,
'<div
class="screen-reader-text"
aria-live="polite"
data-wp-text="context.message"
></div>
<div
class="wp-block-query__enhanced-pagination-animation"
data-wp-class--start-animation="state.startAnimation"
data-wp-class--finish-animation="state.finishAnimation"
></div>',
$last_tag_position,
0
);
}
}
@ -98,22 +85,6 @@ function register_block_core_query() {
'render_callback' => 'render_block_core_query',
)
);
wp_register_script_module(
'@wordpress/block-library/query',
defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ? gutenberg_url( '/build/interactivity/query.min.js' ) : includes_url( 'blocks/query/view.min.js' ),
array(
array(
'id' => '@wordpress/interactivity',
'import' => 'static',
),
array(
'id' => '@wordpress/interactivity-router',
'import' => 'dynamic',
),
),
defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
);
}
add_action( 'init', 'register_block_core_query' );
@ -133,10 +104,18 @@ function block_core_query_disable_enhanced_pagination( $parsed_block ) {
static $dirty_enhanced_queries = array();
static $render_query_callback = null;
$is_interactive = isset( $parsed_block['attrs']['enhancedPagination'] ) && true === $parsed_block['attrs']['enhancedPagination'] && isset( $parsed_block['attrs']['queryId'] );
$block_name = $parsed_block['blockName'];
$block_name = $parsed_block['blockName'];
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
$has_enhanced_pagination = isset( $parsed_block['attrs']['enhancedPagination'] ) && true === $parsed_block['attrs']['enhancedPagination'] && isset( $parsed_block['attrs']['queryId'] );
/*
* Client side navigation can be true in two states:
* - supports.interactivity = true;
* - supports.interactivity.clientNavigation = true;
*/
$supports_client_navigation = ( isset( $block_type->supports['interactivity']['clientNavigation'] ) && true === $block_type->supports['interactivity']['clientNavigation'] )
|| ( isset( $block_type->supports['interactivity'] ) && true === $block_type->supports['interactivity'] );
if ( 'core/query' === $block_name && $is_interactive ) {
if ( 'core/query' === $block_name && $has_enhanced_pagination ) {
$enhanced_query_stack[] = $parsed_block['attrs']['queryId'];
if ( ! isset( $render_query_callback ) ) {
@ -151,18 +130,15 @@ function block_core_query_disable_enhanced_pagination( $parsed_block ) {
* @return string Returns the modified output of the query block.
*/
$render_query_callback = static function ( $content, $block ) use ( &$enhanced_query_stack, &$dirty_enhanced_queries, &$render_query_callback ) {
$is_interactive = isset( $block['attrs']['enhancedPagination'] ) && true === $block['attrs']['enhancedPagination'] && isset( $block['attrs']['queryId'] );
$has_enhanced_pagination = isset( $block['attrs']['enhancedPagination'] ) && true === $block['attrs']['enhancedPagination'] && isset( $block['attrs']['queryId'] );
if ( ! $is_interactive ) {
if ( ! $has_enhanced_pagination ) {
return $content;
}
if ( isset( $dirty_enhanced_queries[ $block['attrs']['queryId'] ] ) ) {
$p = new WP_HTML_Tag_Processor( $content );
if ( $p->next_tag() ) {
$p->set_attribute( 'data-wp-navigation-disabled', 'true' );
}
$content = $p->get_updated_html();
// Disable navigation in the router store config.
wp_interactivity_config( 'core/router', array( 'clientNavigationDisabled' => true ) );
$dirty_enhanced_queries[ $block['attrs']['queryId'] ] = null;
}
@ -181,7 +157,7 @@ function block_core_query_disable_enhanced_pagination( $parsed_block ) {
} elseif (
! empty( $enhanced_query_stack ) &&
isset( $block_name ) &&
( ! str_starts_with( $block_name, 'core/' ) || 'core/post-content' === $block_name )
( ! $supports_client_navigation )
) {
foreach ( $enhanced_query_stack as $query_id ) {
$dirty_enhanced_queries[ $query_id ] = true;

Some files were not shown because too many files have changed in this diff Show More