From ef6d276f29bafe1326b7baba1705ce6db7c29e6c Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 6 Jun 2023 13:14:58 +0200 Subject: [PATCH 01/10] Remove experimental flag from file block --- lib/experimental/interactivity-api/blocks.php | 25 +------------ lib/load.php | 3 +- packages/block-library/src/file/block.json | 2 +- packages/block-library/src/file/index.php | 35 +++++++++++++++---- packages/block-library/src/file/view.js | 9 ----- phpunit/blocks/render-block-file-test.php | 24 +++++++++++-- 6 files changed, 54 insertions(+), 44 deletions(-) delete mode 100644 packages/block-library/src/file/view.js diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php index 7625a8c35e723..737a589625644 100644 --- a/lib/experimental/interactivity-api/blocks.php +++ b/lib/experimental/interactivity-api/blocks.php @@ -6,29 +6,6 @@ * @package gutenberg */ -/** - * Adds Interactivity API directives to the File block markup using the Tag Processor. - * - * @param string $block_content Markup of the File block. - * @param array $block The full block, including name and attributes. - * @param WP_Block $instance The block instance. - * - * @return string File block markup with the directives injected when applicable. - */ -function gutenberg_block_core_file_add_directives_to_content( $block_content, $block, $instance ) { - if ( empty( $instance->attributes['displayPreview'] ) ) { - return $block_content; - } - $processor = new WP_HTML_Tag_Processor( $block_content ); - $processor->next_tag(); - $processor->set_attribute( 'data-wp-interactive', '' ); - $processor->next_tag( 'object' ); - $processor->set_attribute( 'data-wp-bind--hidden', '!selectors.core.file.hasPdfPreview' ); - $processor->set_attribute( 'hidden', true ); - return $processor->get_updated_html(); -} -add_filter( 'render_block_core/file', 'gutenberg_block_core_file_add_directives_to_content', 10, 3 ); - /** * Add Interactivity API directives to the navigation block markup using the Tag Processor * The final HTML of the navigation block will look similar to this: @@ -231,7 +208,7 @@ function gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_a */ function gutenberg_block_update_interactive_view_script( $metadata ) { if ( - in_array( $metadata['name'], array( 'core/file', 'core/navigation', 'core/image' ), true ) && + in_array( $metadata['name'], array( 'core/navigation', 'core/image' ), true ) && str_contains( $metadata['file'], 'build/block-library/blocks' ) ) { $metadata['viewScript'] = array( 'file:./interactivity.min.js' ); diff --git a/lib/load.php b/lib/load.php index 801cd27527c96..4f947263a572b 100644 --- a/lib/load.php +++ b/lib/load.php @@ -104,11 +104,12 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/experimental/kses.php'; require __DIR__ . '/experimental/l10n.php'; require __DIR__ . '/experimental/navigation-fallback.php'; +require __DIR__ . '/experimental/interactivity-api/script-loader.php'; if ( gutenberg_is_experiment_enabled( 'gutenberg-interactivity-api-core-blocks' ) ) { - require __DIR__ . '/experimental/interactivity-api/script-loader.php'; require __DIR__ . '/experimental/interactivity-api/blocks.php'; } + // Fonts API. if ( ! class_exists( 'WP_Fonts' ) ) { // Fonts API files. diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json index 12edc20630d1e..4789e014e1083 100644 --- a/packages/block-library/src/file/block.json +++ b/packages/block-library/src/file/block.json @@ -67,7 +67,7 @@ } } }, - "viewScript": "file:./view.min.js", + "viewScript": "file:./interactivity.min.js", "editorStyle": "wp-block-file-editor", "style": "wp-block-file" } diff --git a/packages/block-library/src/file/index.php b/packages/block-library/src/file/index.php index b68ee8eacc591..758715ec90fbe 100644 --- a/packages/block-library/src/file/index.php +++ b/packages/block-library/src/file/index.php @@ -8,15 +8,27 @@ /** * When the `core/file` block is rendering, check if we need to enqueue the `'wp-block-file-view` script. * - * @param array $attributes The block attributes. - * @param string $content The block content. + * @param array $attributes The block attributes. + * @param string $content The block content. + * @param WP_Block $block The parsed block. * * @return string Returns the block content. */ -function render_block_core_file( $attributes, $content ) { - $should_load_view_script = ! empty( $attributes['displayPreview'] ) && ! wp_script_is( 'wp-block-file-view' ); - if ( $should_load_view_script ) { - wp_enqueue_script( 'wp-block-file-view' ); +function render_block_core_file( $attributes, $content, $block ) { + $should_load_view_script = ! empty( $attributes['displayPreview'] ); + $view_js_file = 'wp-block-file-view'; + // If the script already exists, there is no point in removing it from viewScript. + if ( ! wp_script_is( $view_js_file ) ) { + $script_handles = $block->block_type->view_script_handles; + + // If the script is not needed, and it is still in the `view_script_handles`, remove it. + if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) { + $block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) ); + } + // If the script is needed, but it was previously removed, add it again. + if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) { + $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) ); + } } // Update object's aria-label attribute if present in block HTML. @@ -41,6 +53,17 @@ static function ( $matches ) { $content ); + // If it uses the Interactivity API, add the directives. + if ( $should_load_view_script ) { + $processor = new WP_HTML_Tag_Processor( $content ); + $processor->next_tag(); + $processor->set_attribute( 'data-wp-interactive', '' ); + $processor->next_tag( 'object' ); + $processor->set_attribute( 'data-wp-bind--hidden', '!selectors.core.file.hasPdfPreview' ); + $processor->set_attribute( 'hidden', true ); + return $processor->get_updated_html(); + } + return $content; } diff --git a/packages/block-library/src/file/view.js b/packages/block-library/src/file/view.js deleted file mode 100644 index 6d0b61fa51cb7..0000000000000 --- a/packages/block-library/src/file/view.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Internal dependencies - */ -import { hidePdfEmbedsOnUnsupportedBrowsers } from './utils'; - -document.addEventListener( - 'DOMContentLoaded', - hidePdfEmbedsOnUnsupportedBrowsers -); diff --git a/phpunit/blocks/render-block-file-test.php b/phpunit/blocks/render-block-file-test.php index 7fdeb60a707a9..1dffc320d9671 100644 --- a/phpunit/blocks/render-block-file-test.php +++ b/phpunit/blocks/render-block-file-test.php @@ -27,7 +27,13 @@ public function test_render_block_core_file() { ); $content = '
yoloDownload
'; - $new_content = gutenberg_render_block_core_file( $attributes, $content ); + $parsed_blocks = parse_blocks( + '' + ); + $parsed_block = $parsed_blocks[0]; + $block = new WP_Block( $parsed_block ); + + $new_content = gutenberg_render_block_core_file( $attributes, $content, $block ); $this->assertStringContainsString( 'aria-label="Embed of yolo."', $new_content ); } @@ -45,7 +51,13 @@ public function test_render_block_core_file_custom_filename() { ); $content = '
custom filenameDownload
'; - $new_content = gutenberg_render_block_core_file( $attributes, $content ); + $parsed_blocks = parse_blocks( + '' + ); + $parsed_block = $parsed_blocks[0]; + $block = new WP_Block( $parsed_block ); + + $new_content = gutenberg_render_block_core_file( $attributes, $content, $block ); $this->assertStringContainsString( 'aria-label="Embed of custom filename."', $new_content ); } @@ -63,7 +75,13 @@ public function test_render_block_core_file_empty_filename() { ); $content = '
yoloDownload
'; - $new_content = gutenberg_render_block_core_file( $attributes, $content ); + $parsed_blocks = parse_blocks( + '' + ); + $parsed_block = $parsed_blocks[0]; + $block = new WP_Block( $parsed_block ); + + $new_content = gutenberg_render_block_core_file( $attributes, $content, $block ); $this->assertStringContainsString( 'aria-label="PDF embed"', $new_content ); } } From 3f41748d5b8e38471e1283a8669a12a413503199 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 6 Jun 2023 14:13:08 +0200 Subject: [PATCH 02/10] Remove experimental flag from navigation block --- lib/experimental/interactivity-api/blocks.php | 200 +----------------- .../block-library/src/navigation/block.json | 2 +- .../block-library/src/navigation/index.php | 143 +++++++++++-- .../src/navigation/view-modal.js | 78 ------- packages/block-library/src/navigation/view.js | 74 ------- 5 files changed, 132 insertions(+), 365 deletions(-) delete mode 100644 packages/block-library/src/navigation/view-modal.js delete mode 100644 packages/block-library/src/navigation/view.js diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php index 737a589625644..0087f95cbf144 100644 --- a/lib/experimental/interactivity-api/blocks.php +++ b/lib/experimental/interactivity-api/blocks.php @@ -1,206 +1,12 @@ - * - * Title - * - * - * - * @param string $w Markup of the navigation block. - * @param array $block_attributes Block attributes. - * - * @return void - */ -function gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_attributes ) { - while ( $w->next_tag( - array( - 'tag_name' => 'LI', - 'class_name' => 'has-child', - ) - ) ) { - // Add directives to the parent `
  • `. - $w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false }, "overlay": false } } }' ); - $w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' ); - $w->set_attribute( 'data-wp-on--focusout', 'actions.core.navigation.handleMenuFocusout' ); - $w->set_attribute( 'data-wp-on--keydown', 'actions.core.navigation.handleMenuKeydown' ); - if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) { - $w->set_attribute( 'data-wp-on--mouseenter', 'actions.core.navigation.openMenuOnHover' ); - $w->set_attribute( 'data-wp-on--mouseleave', 'actions.core.navigation.closeMenuOnHover' ); - } - - // Add directives to the toggle submenu button. - if ( $w->next_tag( - array( - 'tag_name' => 'BUTTON', - 'class_name' => 'wp-block-navigation-submenu__toggle', - ) - ) ) { - $w->set_attribute( 'data-wp-on--click', 'actions.core.navigation.toggleMenuOnClick' ); - $w->set_attribute( 'data-wp-bind--aria-expanded', 'selectors.core.navigation.isMenuOpen' ); - }; - - // Iterate through subitems if exist. - gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_attributes ); - } -}; - -add_filter( 'render_block_core/navigation', 'gutenberg_block_core_navigation_add_directives_to_markup', 10, 2 ); - -/** - * Replaces view script for the File, Navigation, and Image blocks with version using Interactivity API. + * Replaces view script for the Image block with version using Interactivity API. * * @param array $metadata Block metadata as read in via block.json. * @@ -208,7 +14,7 @@ function gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_a */ function gutenberg_block_update_interactive_view_script( $metadata ) { if ( - in_array( $metadata['name'], array( 'core/navigation', 'core/image' ), true ) && + in_array( $metadata['name'], array( 'core/image' ), true ) && str_contains( $metadata['file'], 'build/block-library/blocks' ) ) { $metadata['viewScript'] = array( 'file:./interactivity.min.js' ); diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index ba84263013ab5..7aab5432f0df1 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -134,7 +134,7 @@ } } }, - "viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ], + "viewScript": "file:./interactivity.min.js", "editorStyle": "wp-block-navigation-editor", "style": "wp-block-navigation" } diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 8667511d00f2a..798d94d83b3f9 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -364,14 +364,21 @@ function render_block_core_navigation( $attributes, $content, $block ) { */ $has_old_responsive_attribute = ! empty( $attributes['isResponsive'] ) && $attributes['isResponsive']; $is_responsive_menu = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] || $has_old_responsive_attribute; - $should_load_view_script = ! wp_script_is( 'wp-block-navigation-view' ) && ( $is_responsive_menu || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ); - if ( $should_load_view_script ) { - wp_enqueue_script( 'wp-block-navigation-view' ); - } + $should_load_view_script = ( $is_responsive_menu || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ); + $view_js_file = 'wp-block-navigation-view'; + + // If the script already exists, there is no point in removing it from viewScript. + if ( ! wp_script_is( $view_js_file ) ) { + $script_handles = $block->block_type->view_script_handles; - $should_load_modal_view_script = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu']; - if ( $should_load_modal_view_script ) { - wp_enqueue_script( 'wp-block-navigation-view-modal' ); + // If the script is not needed, and it is still in the `view_script_handles`, remove it. + if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) { + $block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) ); + } + // If the script is needed, but it was previously removed, add it again. + if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) { + $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) ); + } } $inner_blocks = $block->inner_blocks; @@ -575,6 +582,12 @@ function render_block_core_navigation( $attributes, $content, $block ) { $inner_blocks_html .= ''; } + // Add directives to the submenu if needed. + if ( $should_load_view_script ) { + $w = new WP_HTML_Tag_Processor( $inner_blocks_html ); + $inner_blocks_html = gutenberg_block_core_navigation_add_directives_to_submenu( $w, $attributes ); + } + $modal_unique_id = wp_unique_id( 'modal-' ); // Determine whether or not navigation elements should be wrapped in the markup required to make it responsive, @@ -612,12 +625,45 @@ function render_block_core_navigation( $attributes, $content, $block ) { $toggle_aria_label_open = $should_display_icon_label ? 'aria-label="' . __( 'Open menu' ) . '"' : ''; // Open button label. $toggle_aria_label_close = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label. + // Add Interactivity API directives to the markup if needed. + $nav_element_directives = ''; + $open_button_directives = ''; + $responsive_container_directives = ''; + $responsive_dialog_directives = ''; + $close_button_directives = ''; + if ( $should_load_view_script ) { + $nav_element_directives = ' + data-wp-interactive + data-wp-context=\'{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false }, "overlay": true, "roleAttribute": "" } } }\' + '; + $open_button_directives = ' + data-wp-on--click="actions.core.navigation.openMenuOnClick" + data-wp-on--keydown="actions.core.navigation.handleMenuKeydown" + '; + $responsive_container_directives = ' + data-wp-class--has-modal-open="selectors.core.navigation.isMenuOpen" + data-wp-class--is-menu-open="selectors.core.navigation.isMenuOpen" + data-wp-effect="effects.core.navigation.initMenu" + data-wp-on--keydown="actions.core.navigation.handleMenuKeydown" + data-wp-on--focusout="actions.core.navigation.handleMenuFocusout" + tabindex="-1" + '; + $responsive_dialog_directives = ' + data-wp-bind--aria-modal="selectors.core.navigation.isMenuOpen" + data-wp-bind--role="selectors.core.navigation.roleAttribute" + data-wp-effect="effects.core.navigation.focusFirstElement" + '; + $close_button_directives = ' + data-wp-on--click="actions.core.navigation.closeMenuOnClick" + '; + } + $responsive_container_markup = sprintf( - ' -
    -
    -
    - + ' +
    +
    +
    +
    %2$s
    @@ -633,13 +679,18 @@ function render_block_core_navigation( $attributes, $content, $block ) { esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) ), __( 'Menu' ), $toggle_button_content, - $toggle_close_button_content + $toggle_close_button_content, + $open_button_directives, + $responsive_container_directives, + $responsive_dialog_directives, + $close_button_directives ); return sprintf( - '', + '', $wrapper_attributes, - $responsive_container_markup + $responsive_container_markup, + $nav_element_directives ); } @@ -902,3 +953,65 @@ function block_core_navigation_get_most_recently_published_navigation() { return null; } + +/** + * Add Interactivity API directives to the navigation-submenu and page-list blocks markup using the Tag Processor + * The final HTML of the navigation-submenu and the page-list blocks will look similar to this: + * + *
  • + * + * Title + *
      + * SUBMENU ITEMS + *
    + *
    • + * + * @param string $w Markup of the navigation block. + * @param array $block_attributes Block attributes. + * + * @return string Submenu markup with the directives injected. + */ +function gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_attributes ) { + while ( $w->next_tag( + array( + 'tag_name' => 'LI', + 'class_name' => 'has-child', + ) + ) ) { + // Add directives to the parent `
  • `. + $w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false }, "overlay": false } } }' ); + $w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' ); + $w->set_attribute( 'data-wp-on--focusout', 'actions.core.navigation.handleMenuFocusout' ); + $w->set_attribute( 'data-wp-on--keydown', 'actions.core.navigation.handleMenuKeydown' ); + if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) { + $w->set_attribute( 'data-wp-on--mouseenter', 'actions.core.navigation.openMenuOnHover' ); + $w->set_attribute( 'data-wp-on--mouseleave', 'actions.core.navigation.closeMenuOnHover' ); + } + + // Add directives to the toggle submenu button. + if ( $w->next_tag( + array( + 'tag_name' => 'BUTTON', + 'class_name' => 'wp-block-navigation-submenu__toggle', + ) + ) ) { + $w->set_attribute( 'data-wp-on--click', 'actions.core.navigation.toggleMenuOnClick' ); + $w->set_attribute( 'data-wp-bind--aria-expanded', 'selectors.core.navigation.isMenuOpen' ); + }; + + // Iterate through subitems if exist. + gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_attributes ); + } + return $w->get_updated_html(); +}; diff --git a/packages/block-library/src/navigation/view-modal.js b/packages/block-library/src/navigation/view-modal.js deleted file mode 100644 index 9477d262816d9..0000000000000 --- a/packages/block-library/src/navigation/view-modal.js +++ /dev/null @@ -1,78 +0,0 @@ -/** - * External dependencies - */ -import MicroModal from 'micromodal'; - -// Responsive navigation toggle. -function navigationToggleModal( modal ) { - const dialogContainer = modal.querySelector( - `.wp-block-navigation__responsive-dialog` - ); - - const isHidden = 'true' === modal.getAttribute( 'aria-hidden' ); - - modal.classList.toggle( 'has-modal-open', ! isHidden ); - dialogContainer.toggleAttribute( 'aria-modal', ! isHidden ); - - if ( isHidden ) { - dialogContainer.removeAttribute( 'role' ); - dialogContainer.removeAttribute( 'aria-modal' ); - } else { - dialogContainer.setAttribute( 'role', 'dialog' ); - dialogContainer.setAttribute( 'aria-modal', 'true' ); - } - - // Add a class to indicate the modal is open. - const htmlElement = document.documentElement; - htmlElement.classList.toggle( 'has-modal-open' ); -} - -function isLinkToAnchorOnCurrentPage( node ) { - return ( - node.hash && - node.protocol === window.location.protocol && - node.host === window.location.host && - node.pathname === window.location.pathname && - node.search === window.location.search - ); -} - -window.addEventListener( 'load', () => { - MicroModal.init( { - onShow: navigationToggleModal, - onClose: navigationToggleModal, - openClass: 'is-menu-open', - } ); - - // Close modal automatically on clicking anchor links inside modal. - const navigationLinks = document.querySelectorAll( - '.wp-block-navigation-item__content' - ); - - navigationLinks.forEach( function ( link ) { - // Ignore non-anchor links and anchor links which open on a new tab. - if ( - ! isLinkToAnchorOnCurrentPage( link ) || - link.attributes?.target === '_blank' - ) { - return; - } - - // Find the specific parent modal for this link - // since .close() won't work without an ID if there are - // multiple navigation menus in a post/page. - const modal = link.closest( - '.wp-block-navigation__responsive-container' - ); - const modalId = modal?.getAttribute( 'id' ); - - link.addEventListener( 'click', () => { - // check if modal exists and is open before trying to close it - // otherwise Micromodal will toggle the `has-modal-open` class - // on the html tag which prevents scrolling - if ( modalId && modal.classList.contains( 'has-modal-open' ) ) { - MicroModal.close( modalId ); - } - } ); - } ); -} ); diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js deleted file mode 100644 index 19805a44ae4ae..0000000000000 --- a/packages/block-library/src/navigation/view.js +++ /dev/null @@ -1,74 +0,0 @@ -// Open on click functionality. -function closeSubmenus( element ) { - element - .querySelectorAll( '[aria-expanded="true"]' ) - .forEach( function ( toggle ) { - toggle.setAttribute( 'aria-expanded', 'false' ); - } ); -} - -function toggleSubmenuOnClick( event ) { - const buttonToggle = event.target.closest( '[aria-expanded]' ); - const isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' ); - - if ( isSubmenuOpen === 'true' ) { - closeSubmenus( buttonToggle.closest( '.wp-block-navigation-item' ) ); - } else { - // Close all sibling submenus. - const parentElement = buttonToggle.closest( - '.wp-block-navigation-item' - ); - const navigationParent = buttonToggle.closest( - '.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list' - ); - navigationParent - .querySelectorAll( '.wp-block-navigation-item' ) - .forEach( function ( child ) { - if ( child !== parentElement ) { - closeSubmenus( child ); - } - } ); - // Open submenu. - buttonToggle.setAttribute( 'aria-expanded', 'true' ); - } -} - -// Necessary for some themes such as TT1 Blocks, where -// scripts could be loaded before the body. -window.addEventListener( 'load', () => { - const submenuButtons = document.querySelectorAll( - '.wp-block-navigation-submenu__toggle' - ); - - submenuButtons.forEach( function ( button ) { - button.addEventListener( 'click', toggleSubmenuOnClick ); - } ); - - // Close on click outside. - document.addEventListener( 'click', function ( event ) { - const navigationBlocks = document.querySelectorAll( - '.wp-block-navigation' - ); - navigationBlocks.forEach( function ( block ) { - if ( ! block.contains( event.target ) ) { - closeSubmenus( block ); - } - } ); - } ); - // Close on focus outside or escape key. - document.addEventListener( 'keyup', function ( event ) { - const submenuBlocks = document.querySelectorAll( - '.wp-block-navigation-item.has-child' - ); - submenuBlocks.forEach( function ( block ) { - if ( ! block.contains( event.target ) ) { - closeSubmenus( block ); - } else if ( event.key === 'Escape' ) { - const toggle = block.querySelector( '[aria-expanded="true"]' ); - closeSubmenus( block ); - // Focus the submenu trigger so focus does not get trapped in the closed submenu. - toggle?.focus(); - } - } ); - } ); -} ); From 0c8a3ae70cf9f27d28004d31f698976baad3675c Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 6 Jun 2023 14:17:48 +0200 Subject: [PATCH 03/10] Fix ESC triggering closeMenu more than expected --- packages/block-library/src/navigation/interactivity.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/interactivity.js b/packages/block-library/src/navigation/interactivity.js index dfc9cb0f9c4a5..210e82a378667 100644 --- a/packages/block-library/src/navigation/interactivity.js +++ b/packages/block-library/src/navigation/interactivity.js @@ -111,7 +111,7 @@ store( { }, handleMenuKeydown: ( args ) => { const { context, event } = args; - if ( context.core.navigation.isMenuOpen ) { + if ( context.core.navigation.isMenuOpen.click ) { // If Escape close the menu if ( event?.key === 'Escape' || From 2e23de1a8e7095851eb05ec0269bac92e823cd8c Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 6 Jun 2023 14:34:25 +0200 Subject: [PATCH 04/10] Update experiments page label --- lib/experiments-page.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 3b9dd9437b372..81ba43786b0ff 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -96,7 +96,7 @@ function gutenberg_initialize_experiments_settings() { 'gutenberg-experiments', 'gutenberg_experiments_section', array( - 'label' => __( 'Use the Interactivity API in File, Navigation and Image core blocks. It also enables the Behaviors UI in the Image block.', 'gutenberg' ), + 'label' => __( 'Use the Interactivity API in Image core block. It also enables the Behaviors UI in the Image block.', 'gutenberg' ), 'id' => 'gutenberg-interactivity-api-core-blocks', ) ); From 972a836aa1395b8d349dac480e6b0efd65942eb7 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 6 Jun 2023 17:54:22 +0200 Subject: [PATCH 05/10] Don't send JS files when there are no submenus --- .../block-library/src/navigation/index.php | 38 ++++++++++--------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 798d94d83b3f9..c8c4b9232e012 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -364,22 +364,6 @@ function render_block_core_navigation( $attributes, $content, $block ) { */ $has_old_responsive_attribute = ! empty( $attributes['isResponsive'] ) && $attributes['isResponsive']; $is_responsive_menu = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] || $has_old_responsive_attribute; - $should_load_view_script = ( $is_responsive_menu || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ); - $view_js_file = 'wp-block-navigation-view'; - - // If the script already exists, there is no point in removing it from viewScript. - if ( ! wp_script_is( $view_js_file ) ) { - $script_handles = $block->block_type->view_script_handles; - - // If the script is not needed, and it is still in the `view_script_handles`, remove it. - if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) { - $block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) ); - } - // If the script is needed, but it was previously removed, add it again. - if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) { - $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) ); - } - } $inner_blocks = $block->inner_blocks; @@ -552,7 +536,11 @@ function render_block_core_navigation( $attributes, $content, $block ) { $inner_blocks_html = ''; $is_list_open = false; + $has_submenus = false; foreach ( $inner_blocks as $inner_block ) { + if ( count( $inner_block->inner_blocks ) > 0 ) { + $has_submenus = true; + } $is_list_item = in_array( $inner_block->name, $list_item_nav_blocks, true ); if ( $is_list_item && ! $is_list_open ) { @@ -582,8 +570,24 @@ function render_block_core_navigation( $attributes, $content, $block ) { $inner_blocks_html .= ''; } + // If the script already exists, there is no point in removing it from viewScript. + $should_load_view_script = ( $is_responsive_menu || ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ) ); + $view_js_file = 'wp-block-navigation-view'; + if ( ! wp_script_is( $view_js_file ) ) { + $script_handles = $block->block_type->view_script_handles; + + // If the script is not needed, and it is still in the `view_script_handles`, remove it. + if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) { + $block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) ); + } + // If the script is needed, but it was previously removed, add it again. + if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) { + $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) ); + } + } + // Add directives to the submenu if needed. - if ( $should_load_view_script ) { + if ( $has_submenus && $should_load_view_script ) { $w = new WP_HTML_Tag_Processor( $inner_blocks_html ); $inner_blocks_html = gutenberg_block_core_navigation_add_directives_to_submenu( $w, $attributes ); } From b0ec79b77c3711b3274a477131ff09eda2be6c12 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 6 Jun 2023 17:55:46 +0200 Subject: [PATCH 06/10] Add `data-wp-interactive` to submenus --- packages/block-library/src/navigation/index.php | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index c8c4b9232e012..0bc8a2c57a666 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -994,6 +994,7 @@ function gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_a ) ) ) { // Add directives to the parent `
  • `. + $w->set_attribute( 'data-wp-interactive', true ); $w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false }, "overlay": false } } }' ); $w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' ); $w->set_attribute( 'data-wp-on--focusout', 'actions.core.navigation.handleMenuFocusout' ); From 5e2f22656e4426aec1f4dc491e854e002873a2f0 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 6 Jun 2023 19:22:21 +0200 Subject: [PATCH 07/10] Change has_submenu conditional to include subpages --- packages/block-library/src/navigation/index.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 0bc8a2c57a666..3c5b8f155f372 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -538,9 +538,6 @@ function render_block_core_navigation( $attributes, $content, $block ) { $is_list_open = false; $has_submenus = false; foreach ( $inner_blocks as $inner_block ) { - if ( count( $inner_block->inner_blocks ) > 0 ) { - $has_submenus = true; - } $is_list_item = in_array( $inner_block->name, $list_item_nav_blocks, true ); if ( $is_list_item && ! $is_list_open ) { @@ -557,6 +554,9 @@ function render_block_core_navigation( $attributes, $content, $block ) { } $inner_block_content = $inner_block->render(); + if ( strpos( $inner_block_content, 'has-child' ) !== false ) { + $has_submenus = true; + } if ( ! empty( $inner_block_content ) ) { if ( in_array( $inner_block->name, $needs_list_item_wrapper, true ) ) { $inner_blocks_html .= '
  • ' . $inner_block_content . '
    • '; From b318b9f5181774eb886ea3e8d0211ce6f462d74d Mon Sep 17 00:00:00 2001 From: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com> Date: Tue, 6 Jun 2023 19:23:29 +0200 Subject: [PATCH 08/10] Update experimental label Co-authored-by: Luis Herranz --- lib/experiments-page.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 81ba43786b0ff..20533089b23bb 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -96,7 +96,7 @@ function gutenberg_initialize_experiments_settings() { 'gutenberg-experiments', 'gutenberg_experiments_section', array( - 'label' => __( 'Use the Interactivity API in Image core block. It also enables the Behaviors UI in the Image block.', 'gutenberg' ), + 'label' => __( 'Use the Interactivity API to enable the Behaviors UI in the Image block.', 'gutenberg' ), 'id' => 'gutenberg-interactivity-api-core-blocks', ) ); From b840ed330af519ce8e9a06a79688290414947941 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 6 Jun 2023 21:07:32 +0200 Subject: [PATCH 09/10] Use Tag Processor instead of `strpos` --- packages/block-library/src/navigation/index.php | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 3c5b8f155f372..e97959c0edf6a 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -554,7 +554,13 @@ function render_block_core_navigation( $attributes, $content, $block ) { } $inner_block_content = $inner_block->render(); - if ( strpos( $inner_block_content, 'has-child' ) !== false ) { + $p = new WP_HTML_Tag_Processor( $inner_block_content ); + if ( $p->next_tag( + array( + 'name' => 'LI', + 'class_name' => 'has-child', + ) + ) ) { $has_submenus = true; } if ( ! empty( $inner_block_content ) ) { From 6f5f82ba56ab5d740be6b189d5b383db0db28627 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 6 Jun 2023 21:10:06 +0200 Subject: [PATCH 10/10] Format `index.php` file --- packages/block-library/src/navigation/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index e97959c0edf6a..ac4e9661cf44c 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -554,7 +554,7 @@ function render_block_core_navigation( $attributes, $content, $block ) { } $inner_block_content = $inner_block->render(); - $p = new WP_HTML_Tag_Processor( $inner_block_content ); + $p = new WP_HTML_Tag_Processor( $inner_block_content ); if ( $p->next_tag( array( 'name' => 'LI',