@wordpress/block-library 8.18.0 → 8.19.0

package/src/navigation/index.php

@@ -67,99 +67,61 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 	}
 }
 
-if ( gutenberg_should_block_use_interactivity_api( 'core/navigation' ) ) {
 
-	/**
-	 * 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:
-	 *
-	 * <li
-	 *   class="has-child"
-	 *   data-wp-context='{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }'
-	 *   data-wp-effect="effects.core.navigation.initMenu"
-	 *   data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
-	 *   data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
-	 * >
-	 *   <button
-	 *     class="wp-block-navigation-submenu__toggle"
-	 *     data-wp-on.click="actions.core.navigation.openMenu"
-	 *     data-wp-bind.aria-expanded="context.core.navigation.isMenuOpen"
-	 *   >
-	 *   </button>
-	 *   <span>Title</span>
-	 *   <ul class="wp-block-navigation__submenu-container">
-	 *     SUBMENU ITEMS
-	 *   </ul>
-	 * </li>
-	 *
-	 * @param string $w Markup of the navigation block.
-	 * @param array  $block_attributes Block attributes.
-	 *
-	 * @return string Submenu markup with the directives injected.
-	 */
-	function block_core_navigation_add_directives_to_submenu( $w, $block_attributes ) {
-		while ( $w->next_tag(
+/**
+ * Add Interactivity API directives to the navigation-submenu and page-list
+ * blocks markup using the Tag Processor.
+ *
+ * @param string $w Markup of the navigation block.
+ * @param array  $block_attributes Block attributes.
+ *
+ * @return string Submenu markup with the directives injected.
+ */
+function 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 `<li>`.
+		$w->set_attribute( 'data-wp-interactive', true );
+		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "submenuOpenedBy": {}, "type": "submenu" } } }' );
+		$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'   => 'LI',
-				'class_name' => 'has-child',
+				'tag_name'   => 'BUTTON',
+				'class_name' => 'wp-block-navigation-submenu__toggle',
 			)
 		) ) {
-			// Add directives to the parent `<li>`.
-			$w->set_attribute( 'data-wp-interactive', true );
-			$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "submenuOpenedBy": {}, "type": "submenu" } } }' );
-			$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' );
-			};
-
-			// Add directives to the submenu.
-			if ( $w->next_tag(
-				array(
-					'tag_name'   => 'UL',
-					'class_name' => 'wp-block-navigation__submenu-container',
-				)
-			) ) {
-				$w->set_attribute( 'data-wp-on--focusin', 'actions.core.navigation.openMenuOnFocus' );
-			}
-
-			// Iterate through subitems if exist.
-			block_core_navigation_add_directives_to_submenu( $w, $block_attributes );
+			$w->set_attribute( 'data-wp-on--click', 'actions.core.navigation.toggleMenuOnClick' );
+			$w->set_attribute( 'data-wp-bind--aria-expanded', 'selectors.core.navigation.isMenuOpen' );
+			// The `aria-expanded` attribute for SSR is already added in the submenu block.
 		}
-		return $w->get_updated_html();
-	};
-
-	/**
-	 * Replaces view script for the Navigation block with version using Interactivity API.
-	 *
-	 * @param array $metadata Block metadata as read in via block.json.
-	 *
-	 * @return array Filtered block type metadata.
-	 */
-	function gutenberg_block_core_navigation_update_interactive_view_script( $metadata ) {
-		if ( 'core/navigation' === $metadata['name'] ) {
-			$metadata['viewScript']                = array( 'file:./view-interactivity.min.js' );
-			$metadata['supports']['interactivity'] = true;
+		// Add directives to the submenu.
+		if ( $w->next_tag(
+			array(
+				'tag_name'   => 'UL',
+				'class_name' => 'wp-block-navigation__submenu-container',
+			)
+		) ) {
+			$w->set_attribute( 'data-wp-on--focus', 'actions.core.navigation.openMenuOnFocus' );
 		}
-		return $metadata;
+
+		// Iterate through subitems if exist.
+		block_core_navigation_add_directives_to_submenu( $w, $block_attributes );
 	}
-	add_filter( 'block_type_metadata', 'gutenberg_block_core_navigation_update_interactive_view_script', 10, 1 );
+	return $w->get_updated_html();
 }
 
-
 /**
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
@@ -289,10 +251,6 @@ function block_core_navigation_render_submenu_icon() {
 	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 }
 
-
-
-
-
 /**
  * Filter out empty "null" blocks from the block list.
  * 'parse_blocks' includes a null block with '\n\n' as the content when
@@ -305,7 +263,7 @@ function block_core_navigation_render_submenu_icon() {
 function block_core_navigation_filter_out_empty_blocks( $parsed_blocks ) {
 	$filtered = array_filter(
 		$parsed_blocks,
-		static function( $block ) {
+		static function ( $block ) {
 			return isset( $block['blockName'] );
 		}
 	);
@@ -435,7 +393,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	// a fallback (i.e. the block has no menu associated with it).
 	$is_fallback = false;
 
-	$nav_menu_name = '';
+	$nav_menu_name = $attributes['ariaLabel'] ?? '';
 
 	/**
 	 * Deprecated:
@@ -571,7 +529,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	}
 
 	// Manually add block support text decoration as CSS class.
-	$text_decoration       = _wp_array_get( $attributes, array( 'style', 'typography', 'textDecoration' ), null );
+	$text_decoration       = $attributes['style']['typography']['textDecoration'] ?? null;
 	$text_decoration_class = sprintf( 'has-text-decoration-%s', $text_decoration );
 
 	$colors     = block_core_navigation_build_css_colors( $attributes );
@@ -671,38 +629,25 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$inner_blocks_html .= '</ul>';
 	}
 
-	$needed_script_map = array(
-		'wp-block-navigation-view'   => ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ),
-		'wp-block-navigation-view-2' => $is_responsive_menu,
-	);
-
-	$should_load_view_script = false;
-	if ( gutenberg_should_block_use_interactivity_api( 'core/navigation' ) ) {
-		// TODO: The script is still loaded even when it isn't needed when the Interactivity API is used.
-		$should_load_view_script = count( array_filter( $needed_script_map ) ) > 0;
-	} else {
-		foreach ( $needed_script_map as $view_script_handle => $is_view_script_needed ) {
-
-			// If the script already exists, there is no point in removing it from viewScript.
-			if ( wp_script_is( $view_script_handle ) ) {
-				continue;
-			}
+	$should_load_view_script = ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ) || $is_responsive_menu;
+	$view_js_file            = 'wp-block-navigation-view';
 
-			$script_handles = $block->block_type->view_script_handles;
+	// 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 ( ! $is_view_script_needed && in_array( $view_script_handle, $script_handles, true ) ) {
-				$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_script_handle ) );
-			}
-			// If the script is needed, but it was previously removed, add it again.
-			if ( $is_view_script_needed && ! in_array( $view_script_handle, $script_handles, true ) ) {
-				$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_script_handle ) );
-			}
+		// 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 ( gutenberg_should_block_use_interactivity_api( 'core/navigation' ) && $has_submenus && $should_load_view_script ) {
+	if ( $has_submenus && $should_load_view_script ) {
 		$w                 = new WP_HTML_Tag_Processor( $inner_blocks_html );
 		$inner_blocks_html = block_core_navigation_add_directives_to_submenu( $w, $attributes );
 	}
@@ -750,7 +695,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$responsive_container_directives = '';
 	$responsive_dialog_directives    = '';
 	$close_button_directives         = '';
-	if ( gutenberg_should_block_use_interactivity_api( 'core/navigation' ) && $should_load_view_script ) {
+	if ( $should_load_view_script ) {
 		$nav_element_directives          = '
 			data-wp-interactive
 			data-wp-context=\'{ "core": { "navigation": { "overlayOpenedBy": {}, "type": "overlay", "roleAttribute": "" } } }\'
@@ -768,7 +713,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 			tabindex="-1"
 		';
 		$responsive_dialog_directives    = '
-			data-wp-bind--aria-modal="selectors.core.navigation.isMenuOpen"
+			data-wp-bind--aria-modal="selectors.core.navigation.ariaModal"
 			data-wp-bind--role="selectors.core.navigation.roleAttribute"
 			data-wp-effect="effects.core.navigation.focusFirstElement"
 		';
@@ -778,11 +723,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	}
 
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" %3$s class="%6$s" data-micromodal-trigger="%1$s" %11$s>%9$s</button>
+		'<button aria-haspopup="true" %3$s class="%6$s" %11$s>%9$s</button>
 			<div class="%5$s" style="%7$s" id="%1$s" %12$s>
-				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
+				<div class="wp-block-navigation__responsive-close" tabindex="-1">
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" %13$s>
-							<button %4$s data-micromodal-close class="wp-block-navigation__responsive-container-close" %14$s>%10$s</button>
+							<button %4$s class="wp-block-navigation__responsive-container-close" %14$s>%10$s</button>
 						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>
@@ -864,6 +809,23 @@ function block_core_navigation_typographic_presets_backcompatibility( $parsed_bl
 
 add_filter( 'render_block_data', 'block_core_navigation_typographic_presets_backcompatibility' );
 
+/**
+ * Ensure that the view script has the `wp-interactivity` dependency.
+ *
+ * @since 6.4.0
+ */
+function block_core_navigation_ensure_interactivity_dependency() {
+	global $wp_scripts;
+	if (
+		isset( $wp_scripts->registered['wp-block-navigation-view'] ) &&
+		! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-navigation-view']->deps, true )
+	) {
+		$wp_scripts->registered['wp-block-navigation-view']->deps[] = 'wp-interactivity';
+	}
+}
+
+add_action( 'wp_print_scripts', 'block_core_navigation_ensure_interactivity_dependency' );
+
 /**
  * Turns menu item data into a nested array of parsed blocks
  *
@@ -957,7 +919,7 @@ function block_core_navigation_get_classic_menu_fallback() {
 		// Otherwise return the most recently created classic menu.
 		usort(
 			$classic_nav_menus,
-			static function( $a, $b ) {
+			static function ( $a, $b ) {
 				return $b->term_id - $a->term_id;
 			}
 		);

package/src/navigation/view.js

@@ -1,107 +1,203 @@
-/*eslint-env browser*/
-// Open on click functionality.
-
-/**
- * Keep track of whether a submenu is open to short-circuit delegated event listeners.
- *
- * @type {boolean}
- */
-let hasOpenSubmenu = false;
-
-/**
- * Close submenu items for a navigation item.
- *
- * @param {HTMLElement} navigationItem - Either a NAV or LI element.
- */
-function closeSubmenus( navigationItem ) {
-	navigationItem
-		.querySelectorAll( '[aria-expanded="true"]' )
-		.forEach( function ( toggle ) {
-			toggle.setAttribute( 'aria-expanded', 'false' );
-		} );
-	hasOpenSubmenu = false;
-}
-
 /**
- * Toggle submenu on click.
- *
- * @param {HTMLButtonElement} buttonToggle
+ * WordPress dependencies
  */
-function toggleSubmenuOnClick( buttonToggle ) {
-	const isSubmenuOpen =
-		buttonToggle.getAttribute( 'aria-expanded' ) === 'true';
-	const navigationItem = buttonToggle.closest( '.wp-block-navigation-item' );
+import { store as wpStore } from '@wordpress/interactivity';
 
-	if ( isSubmenuOpen ) {
-		closeSubmenus( navigationItem );
-	} else {
-		// Close all sibling submenus.
-		const navigationParent = buttonToggle.closest(
-			'.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'
-		);
-		navigationParent
-			.querySelectorAll( '.wp-block-navigation-item' )
-			.forEach( ( child ) => {
-				if ( child !== navigationItem ) {
-					closeSubmenus( child );
-				}
-			} );
+const focusableSelectors = [
+	'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^="-"])',
+];
 
-		// Open submenu.
-		buttonToggle.setAttribute( 'aria-expanded', 'true' );
-		hasOpenSubmenu = true;
+const openMenu = ( store, menuOpenedOn ) => {
+	const { context, ref, selectors } = store;
+	selectors.core.navigation.menuOpenedBy( store )[ menuOpenedOn ] = true;
+	context.core.navigation.previousFocus = ref;
+	if ( context.core.navigation.type === 'overlay' ) {
+		// Add a `has-modal-open` class to the <html> root.
+		document.documentElement.classList.add( 'has-modal-open' );
 	}
-}
+};
 
-// Open on button click or close on click outside.
-document.addEventListener(
-	'click',
-	function ( event ) {
-		const target = event.target;
-		const button = target.closest( '.wp-block-navigation-submenu__toggle' );
-
-		// Close any other open submenus.
-		if ( hasOpenSubmenu ) {
-			const navigationBlocks = document.querySelectorAll(
-				'.wp-block-navigation'
-			);
-			navigationBlocks.forEach( function ( block ) {
-				if ( ! block.contains( target ) ) {
-					closeSubmenus( block );
-				}
-			} );
+const closeMenu = ( store, menuClosedOn ) => {
+	const { context, selectors } = store;
+	selectors.core.navigation.menuOpenedBy( store )[ menuClosedOn ] = false;
+	// Check if the menu is still open or not.
+	if ( ! selectors.core.navigation.isMenuOpen( store ) ) {
+		if (
+			context.core.navigation.modal?.contains(
+				window.document.activeElement
+			)
+		) {
+			context.core.navigation.previousFocus.focus();
 		}
-
-		// Now open the submenu if one was clicked.
-		if ( button instanceof HTMLButtonElement ) {
-			toggleSubmenuOnClick( button );
+		context.core.navigation.modal = null;
+		context.core.navigation.previousFocus = null;
+		if ( context.core.navigation.type === 'overlay' ) {
+			document.documentElement.classList.remove( 'has-modal-open' );
 		}
-	},
-	{ passive: true }
-);
+	}
+};
 
-// Close on focus outside or escape key.
-document.addEventListener(
-	'keyup',
-	function ( event ) {
-		// Abort if there aren't any submenus open anyway.
-		if ( ! hasOpenSubmenu ) {
-			return;
-		}
+wpStore( {
+	effects: {
+		core: {
+			navigation: {
+				initMenu: ( store ) => {
+					const { context, selectors, ref } = store;
+					if ( selectors.core.navigation.isMenuOpen( store ) ) {
+						const focusableElements =
+							ref.querySelectorAll( focusableSelectors );
+						context.core.navigation.modal = ref;
+						context.core.navigation.firstFocusableElement =
+							focusableElements[ 0 ];
+						context.core.navigation.lastFocusableElement =
+							focusableElements[ focusableElements.length - 1 ];
+					}
+				},
+				focusFirstElement: ( store ) => {
+					const { selectors, ref } = store;
+					if ( selectors.core.navigation.isMenuOpen( store ) ) {
+						ref.querySelector(
+							'.wp-block-navigation-item > *:first-child'
+						).focus();
+					}
+				},
+			},
+		},
+	},
+	selectors: {
+		core: {
+			navigation: {
+				roleAttribute: ( store ) => {
+					const { context, selectors } = store;
+					return context.core.navigation.type === 'overlay' &&
+						selectors.core.navigation.isMenuOpen( store )
+						? 'dialog'
+						: null;
+				},
+				ariaModal: ( store ) => {
+					const { context, selectors } = store;
+					return context.core.navigation.type === 'overlay' &&
+						selectors.core.navigation.isMenuOpen( store )
+						? 'true'
+						: null;
+				},
+				isMenuOpen: ( { context } ) =>
+					// The menu is opened if either `click`, `hover` or `focus` is true.
+					Object.values(
+						context.core.navigation[
+							context.core.navigation.type === 'overlay'
+								? 'overlayOpenedBy'
+								: 'submenuOpenedBy'
+						]
+					).filter( Boolean ).length > 0,
+				menuOpenedBy: ( { context } ) =>
+					context.core.navigation[
+						context.core.navigation.type === 'overlay'
+							? 'overlayOpenedBy'
+							: 'submenuOpenedBy'
+					],
+			},
+		},
+	},
+	actions: {
+		core: {
+			navigation: {
+				openMenuOnHover( store ) {
+					const { navigation } = store.context.core;
+					if (
+						navigation.type === 'submenu' &&
+						// Only open on hover if the overlay is closed.
+						Object.values(
+							navigation.overlayOpenedBy || {}
+						).filter( Boolean ).length === 0
+					)
+						openMenu( store, 'hover' );
+				},
+				closeMenuOnHover( store ) {
+					closeMenu( store, 'hover' );
+				},
+				openMenuOnClick( store ) {
+					openMenu( store, 'click' );
+				},
+				closeMenuOnClick( store ) {
+					closeMenu( store, 'click' );
+					closeMenu( store, 'focus' );
+				},
+				openMenuOnFocus( store ) {
+					openMenu( store, 'focus' );
+				},
+				toggleMenuOnClick: ( store ) => {
+					const { selectors } = store;
+					const menuOpenedBy =
+						selectors.core.navigation.menuOpenedBy( store );
+					if ( menuOpenedBy.click || menuOpenedBy.focus ) {
+						closeMenu( store, 'click' );
+						closeMenu( store, 'focus' );
+					} else {
+						openMenu( store, 'click' );
+					}
+				},
+				handleMenuKeydown: ( store ) => {
+					const { context, selectors, event } = store;
+					if (
+						selectors.core.navigation.menuOpenedBy( store ).click
+					) {
+						// If Escape close the menu.
+						if ( event?.key === 'Escape' ) {
+							closeMenu( store, 'click' );
+							closeMenu( store, 'focus' );
+							return;
+						}
 
-		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();
-			}
-		} );
+						// Trap focus if it is an overlay (main menu).
+						if (
+							context.core.navigation.type === 'overlay' &&
+							event.key === 'Tab'
+						) {
+							// If shift + tab it change the direction.
+							if (
+								event.shiftKey &&
+								window.document.activeElement ===
+									context.core.navigation
+										.firstFocusableElement
+							) {
+								event.preventDefault();
+								context.core.navigation.lastFocusableElement.focus();
+							} else if (
+								! event.shiftKey &&
+								window.document.activeElement ===
+									context.core.navigation.lastFocusableElement
+							) {
+								event.preventDefault();
+								context.core.navigation.firstFocusableElement.focus();
+							}
+						}
+					}
+				},
+				handleMenuFocusout: ( store ) => {
+					const { context, event } = store;
+					// If focus is outside modal, and in the document, close menu
+					// event.target === The element losing focus
+					// event.relatedTarget === The element receiving focus (if any)
+					// When focusout is outsite the document,
+					// `window.document.activeElement` doesn't change.
+					if (
+						! context.core.navigation.modal?.contains(
+							event.relatedTarget
+						) &&
+						event.target !== window.document.activeElement
+					) {
+						closeMenu( store, 'click' );
+						closeMenu( store, 'focus' );
+					}
+				},
+			},
+		},
 	},
-	{ passive: true }
-);
+} );