@wordpress/block-library 8.12.0 → 8.12.2

package/src/navigation/edit/index.js

@@ -26,6 +26,7 @@ import {
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 
@@ -67,6 +68,9 @@ import { detectColors } from './utils';
 import ManageMenusButton from './manage-menus-button';
 import MenuInspectorControls from './menu-inspector-controls';
 import DeletedNavigationWarning from './deleted-navigation-warning';
+import { unlock } from '../../lock-unlock';
+
+const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
 function Navigation( {
 	attributes,
@@ -114,6 +118,8 @@ function Navigation( {
 	const recursionId = `navigationMenu/${ ref }`;
 	const hasAlreadyRendered = useHasRecursion( recursionId );
 
+	const blockEditingMode = useBlockEditingMode();
+
 	// Preload classic menus, so that they don't suddenly pop-in when viewing
 	// the Select Menu dropdown.
 	const { menus: classicMenus } = useNavigationEntities();
@@ -282,6 +288,7 @@ function Navigation( {
 	const textDecoration = attributes.style?.typography?.textDecoration;
 
 	const hasBlockOverlay = useBlockOverlayActive( clientId );
+	const isResponsive = 'never' !== overlayMenu;
 	const blockProps = useBlockProps( {
 		ref: navRef,
 		className: classnames( className, {
@@ -291,7 +298,7 @@ function Navigation( {
 			'items-justified-center': justifyContent === 'center',
 			'is-vertical': orientation === 'vertical',
 			'no-wrap': flexWrap === 'nowrap',
-			'is-responsive': 'never' !== overlayMenu,
+			'is-responsive': isResponsive,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName( 'color', textColor?.slug ) ]:
 				!! textColor?.slug,
@@ -473,7 +480,6 @@ function Navigation( {
 
 	const hasManagePermissions =
 		canUserCreateNavigationMenu || canUserUpdateNavigationMenu;
-	const isResponsive = 'never' !== overlayMenu;
 
 	const overlayMenuPreviewClasses = classnames(
 		'wp-block-navigation__overlay-menu-preview',
@@ -652,15 +658,16 @@ function Navigation( {
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
 					isLoading={ isLoading }
+					blockEditingMode={ blockEditingMode }
 				/>
-				{ stylingInspectorControls }
+				{ blockEditingMode === 'default' && stylingInspectorControls }
 				<ResponsiveWrapper
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
 					isOpen={ isResponsiveMenuOpen }
 					hasIcon={ hasIcon }
 					icon={ icon }
-					isResponsive={ 'never' !== overlayMenu }
+					isResponsive={ isResponsive }
 					isHiddenByDefault={ 'always' === overlayMenu }
 					overlayBackgroundColor={ overlayBackgroundColor }
 					overlayTextColor={ overlayTextColor }
@@ -693,6 +700,7 @@ function Navigation( {
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
 					isLoading={ isLoading }
+					blockEditingMode={ blockEditingMode }
 				/>
 				<DeletedNavigationWarning
 					onCreateNew={ createUntitledEmptyNavigationMenu }
@@ -760,9 +768,10 @@ function Navigation( {
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
 					isLoading={ isLoading }
+					blockEditingMode={ blockEditingMode }
 				/>
-				{ stylingInspectorControls }
-				{ isEntityAvailable && (
+				{ blockEditingMode === 'default' && stylingInspectorControls }
+				{ blockEditingMode === 'default' && isEntityAvailable && (
 					<InspectorControls group="advanced">
 						{ hasResolvedCanUserUpdateNavigationMenu &&
 							canUserUpdateNavigationMenu && (

package/src/navigation/edit/leaf-more-menu.js

@@ -15,8 +15,7 @@ import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [

package/src/navigation/edit/menu-inspector-controls.js

@@ -19,7 +19,7 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import NavigationMenuSelector from './navigation-menu-selector';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import useNavigationMenu from '../use-navigation-menu';
 import LeafMoreMenu from './leaf-more-menu';
@@ -32,6 +32,7 @@ const BLOCKS_WITH_LINK_UI_SUPPORT = [
 	'core/navigation-link',
 	'core/navigation-submenu',
 ];
+const { PrivateListView } = unlock( blockEditorPrivateApis );
 
 function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
@@ -82,14 +83,9 @@ const MainContent = ( {
 	isNavigationMenuMissing,
 	onCreateNew,
 } ) => {
-	const { PrivateListView } = unlock( blockEditorPrivateApis );
-
-	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
-	// This is required else the list view will display the entire block tree.
-	const clientIdsTree = useSelect(
+	const hasChildren = useSelect(
 		( select ) => {
-			const { __unstableGetClientIdsTree } = select( blockEditorStore );
-			return __unstableGetClientIdsTree( clientId );
+			return !! select( blockEditorStore ).getBlockCount( clientId );
 		},
 		[ clientId ]
 	);
@@ -116,13 +112,12 @@ const MainContent = ( {
 
 	return (
 		<div className="wp-block-navigation__menu-inspector-controls">
-			{ clientIdsTree.length === 0 && (
+			{ ! hasChildren && (
 				<p className="wp-block-navigation__menu-inspector-controls__empty-message">
 					{ __( 'This navigation menu is empty.' ) }
 				</p>
 			) }
 			<PrivateListView
-				blocks={ clientIdsTree }
 				rootClientId={ clientId }
 				isExpanded
 				description={ description }
@@ -143,6 +138,7 @@ const MenuInspectorControls = ( props ) => {
 		onSelectClassicMenu,
 		onSelectNavigationMenu,
 		isManageMenusButtonDisabled,
+		blockEditingMode,
 	} = props;
 
 	return (
@@ -155,22 +151,24 @@ const MenuInspectorControls = ( props ) => {
 					>
 						{ __( 'Menu' ) }
 					</Heading>
-					<NavigationMenuSelector
-						currentMenuId={ currentMenuId }
-						onSelectClassicMenu={ onSelectClassicMenu }
-						onSelectNavigationMenu={ onSelectNavigationMenu }
-						onCreateNew={ onCreateNew }
-						createNavigationMenuIsSuccess={
-							createNavigationMenuIsSuccess
-						}
-						createNavigationMenuIsError={
-							createNavigationMenuIsError
-						}
-						actionLabel={ actionLabel }
-						isManageMenusButtonDisabled={
-							isManageMenusButtonDisabled
-						}
-					/>
+					{ blockEditingMode === 'default' && (
+						<NavigationMenuSelector
+							currentMenuId={ currentMenuId }
+							onSelectClassicMenu={ onSelectClassicMenu }
+							onSelectNavigationMenu={ onSelectNavigationMenu }
+							onCreateNew={ onCreateNew }
+							createNavigationMenuIsSuccess={
+								createNavigationMenuIsSuccess
+							}
+							createNavigationMenuIsError={
+								createNavigationMenuIsError
+							}
+							actionLabel={ actionLabel }
+							isManageMenusButtonDisabled={
+								isManageMenusButtonDisabled
+							}
+						/>
+					) }
 				</HStack>
 				<MainContent { ...props } />
 			</PanelBody>

package/src/navigation/edit/navigation-menu-selector.js

@@ -19,12 +19,22 @@ import { useEntityProp } from '@wordpress/core-data';
 import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 
-function buildMenuLabel( title, id ) {
-	const label =
-		decodeEntities( title?.rendered ) ||
+function buildMenuLabel( title, id, status ) {
+	if ( ! title?.rendered ) {
 		/* translators: %s is the index of the menu in the list of menus. */
-		sprintf( __( '(no title %s)' ), id );
-	return label;
+		return sprintf( __( '(no title %s)' ), id );
+	}
+
+	if ( status === 'publish' ) {
+		return decodeEntities( title?.rendered );
+	}
+
+	return sprintf(
+		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
+		__( '%1$s (%2$s)' ),
+		decodeEntities( title?.rendered ),
+		status
+	);
 }
 
 function NavigationMenuSelector( {
@@ -61,8 +71,8 @@ function NavigationMenuSelector( {
 
 	const menuChoices = useMemo( () => {
 		return (
-			navigationMenus?.map( ( { id, title }, index ) => {
-				const label = buildMenuLabel( title, index + 1 );
+			navigationMenus?.map( ( { id, title, status }, index ) => {
+				const label = buildMenuLabel( title, index + 1, status );
 
 				return {
 					value: id,

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -11,7 +11,11 @@ import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { areBlocksDirty } from './are-blocks-dirty';
-import { DEFAULT_BLOCK, ALLOWED_BLOCKS } from '../constants';
+import {
+	DEFAULT_BLOCK,
+	ALLOWED_BLOCKS,
+	SELECT_NAVIGATION_MENUS_ARGS,
+} from '../constants';
 
 const EMPTY_OBJECT = {};
 
@@ -82,11 +86,7 @@ export default function UnsavedInnerBlocks( {
 				isSaving: isSavingEntityRecord( 'postType', 'wp_navigation' ),
 				hasResolvedAllNavigationMenus: hasFinishedResolution(
 					'getEntityRecords',
-					[
-						'postType',
-						'wp_navigation',
-						{ per_page: -1, status: [ 'publish', 'draft' ] },
-					]
+					SELECT_NAVIGATION_MENUS_ARGS
 				),
 			};
 		},

package/src/navigation/editor.scss

@@ -503,30 +503,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	left: 0;
 }
 
-// Without this, the block cannot be selected, nor does the right container get focus.
-// @todo: this is disruptive. Ideally we can retire a few of the containers,
-// so focus is applied naturally on the block container.
-// It's important the right container has focus, otherwise you can't press
-// "Delete" to remove the block.
-.wp-block-navigation:not(.is-editing-disabled) {
-	.wp-block-navigation__responsive-container,
-	.wp-block-navigation__responsive-close {
-		@include break-small() {
-			pointer-events: none;
-
-			.wp-block-navigation__responsive-container-close,
-			.block-editor-block-list__layout * {
-				pointer-events: all;
-			}
-		}
-
-		// Page List items should remain inert.
-		.wp-block-pages-list__item__link {
-			pointer-events: none;
-		}
-	}
-}
-
 // The menu and close buttons need higher specificity in the editor.
 .components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
 .components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {

package/src/navigation/index.php

@@ -65,6 +65,84 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 
 		return $menu_items_by_parent_id;
 	}
+
+	/**
+	 * 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 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 `<li>`.
+			$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' );
+			$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();
+	};
+
+	/**
+	 * 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:./interactivity.min.js' );
+		}
+		return $metadata;
+	}
+	add_filter( 'block_type_metadata', 'gutenberg_block_core_navigation_update_interactive_view_script', 10, 1 );
 }
 
 
@@ -584,16 +662,16 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 		// 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 ) );
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file, 'wp-block-navigation-view-2' ) );
 		}
 		// 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 ) );
+			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file, 'wp-block-navigation-view-2' ) );
 		}
 	}
 
 	// Add directives to the submenu if needed.
-	if ( $has_submenus && $should_load_view_script ) {
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $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 );
 	}
@@ -641,7 +719,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$responsive_container_directives = '';
 	$responsive_dialog_directives    = '';
 	$close_button_directives         = '';
-	if ( $should_load_view_script ) {
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $should_load_view_script ) {
 		$nav_element_directives          = '
 			data-wp-interactive
 			data-wp-context=\'{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false }, "overlay": true, "roleAttribute": "" } } }\'
@@ -669,11 +747,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	}
 
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" %3$s class="%6$s" %11$s>%9$s</button>
+		'<button aria-haspopup="true" %3$s class="%6$s" data-micromodal-trigger="%1$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">
+				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" %13$s>
-							<button %4$s class="wp-block-navigation__responsive-container-close" %14$s>%10$s</button>
+							<button %4$s data-micromodal-close 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>
@@ -963,66 +1041,3 @@ 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:
- *
- * <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 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 `<li>`.
-		$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' );
-		$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();
-};

package/src/navigation/test/use-navigation-menu.js

@@ -36,16 +36,28 @@ function resolveRecords( registry, menus ) {
 	dispatch.startResolution( 'getEntityRecords', [
 		'postType',
 		'wp_navigation',
-		{ per_page: -1, status: [ 'publish', 'draft' ] },
+		{
+			per_page: 100,
+			status: [ 'publish', 'draft' ],
+			order: 'desc',
+			orderby: 'date',
+		},
 	] );
 	dispatch.finishResolution( 'getEntityRecords', [
 		'postType',
 		'wp_navigation',
-		{ per_page: -1, status: [ 'publish', 'draft' ] },
+		{
+			per_page: 100,
+			status: [ 'publish', 'draft' ],
+			order: 'desc',
+			orderby: 'date',
+		},
 	] );
 	dispatch.receiveEntityRecords( 'postType', 'wp_navigation', menus, {
-		per_page: -1,
+		per_page: 100,
 		status: [ 'publish', 'draft' ],
+		order: 'desc',
+		orderby: 'date',
 	} );
 }
 

package/src/navigation/use-navigation-menu.js

@@ -7,6 +7,11 @@ import {
 } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { SELECT_NAVIGATION_MENUS_ARGS } from './constants';
+
 export default function useNavigationMenu( ref ) {
 	const permissions = useResourcePermissions( 'navigation', ref );
 
@@ -68,17 +73,15 @@ function selectNavigationMenus( select ) {
 	const { getEntityRecords, hasFinishedResolution, isResolving } =
 		select( coreStore );
 
-	const args = [
-		'postType',
-		'wp_navigation',
-		{ per_page: -1, status: [ 'publish', 'draft' ] },
-	];
 	return {
-		navigationMenus: getEntityRecords( ...args ),
-		isResolvingNavigationMenus: isResolving( 'getEntityRecords', args ),
+		navigationMenus: getEntityRecords( ...SELECT_NAVIGATION_MENUS_ARGS ),
+		isResolvingNavigationMenus: isResolving(
+			'getEntityRecords',
+			SELECT_NAVIGATION_MENUS_ARGS
+		),
 		hasResolvedNavigationMenus: hasFinishedResolution(
 			'getEntityRecords',
-			args
+			SELECT_NAVIGATION_MENUS_ARGS
 		),
 	};
 }

package/src/navigation/view-modal.js

@@ -0,0 +1,78 @@
+/**
+ * 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 );
+			}
+		} );
+	} );
+} );