@wordpress/block-library 10.2.0 → 10.3.0

package/src/navigation/edit/index.js

@@ -75,6 +75,7 @@ import AccessibleMenuDescription from './accessible-menu-description';
 import { unlock } from '../../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 import { isWithinNavigationOverlay } from '../../utils/is-within-overlay';
+import useLayoutCustomProperties from './use-layout-custom-properties';
 import {
 	DEFAULT_BLOCK,
 	NAVIGATION_OVERLAY_TEMPLATE_PART_AREA,
@@ -280,6 +281,11 @@ function Navigation( {
 	} = attributes;
 
 	const ref = attributes.ref;
+	useLayoutCustomProperties( {
+		clientId,
+		layout: attributes.layout,
+		style: attributes.style,
+	} );
 
 	const setRef = useCallback(
 		( postId ) => {
@@ -297,22 +303,30 @@ function Navigation( {
 		onNavigateToEntityRecord,
 		currentTheme,
 		editorDisabledResponsive,
-	} = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-
-		return {
-			isPreviewMode: settings.isPreviewMode,
-			onNavigateToEntityRecord: settings?.onNavigateToEntityRecord,
-			// Needed to construct the template part ID for the overlay preview.
-			currentTheme: select( coreStore ).getCurrentTheme()?.stylesheet,
-			// When editing a navigation post directly in an isolated editor,
-			// always show navigation expanded (no hamburger) so users can see
-			// and interact with all menu items.
-			editorDisabledResponsive:
-				!! settings?.[ isNavigationPostEditorKey ],
-		};
-	}, [] );
+		hasSelectedStyleState,
+	} = useSelect(
+		( select ) => {
+			const {
+				getSettings,
+				hasSelectedStyleState: hasSelectedBlockStyleState,
+			} = unlock( select( blockEditorStore ) );
+			const settings = getSettings();
+
+			return {
+				isPreviewMode: settings.isPreviewMode,
+				onNavigateToEntityRecord: settings?.onNavigateToEntityRecord,
+				// Needed to construct the template part ID for the overlay preview.
+				currentTheme: select( coreStore ).getCurrentTheme()?.stylesheet,
+				// When editing a navigation post directly in an isolated editor,
+				// always show navigation expanded (no hamburger) so users can see
+				// and interact with all menu items.
+				editorDisabledResponsive:
+					!! settings?.[ isNavigationPostEditorKey ],
+				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
+			};
+		},
+		[ clientId ]
+	);
 	const hasAlreadyRendered = isPreviewMode ? false : recursionDetected;
 
 	const blockEditingMode = useBlockEditingMode();
@@ -924,26 +938,28 @@ function Navigation( {
 					/>
 				</InspectorControls>
 			) }
-			<InspectorControls group="color">
-				{ /*
-				 * Avoid useMultipleOriginColorsAndGradients and detectColors
-				 * on block mount. InspectorControls only mounts this component
-				 * when the block is selected.
-				 * */ }
-				<ColorTools
-					textColor={ textColor }
-					setTextColor={ setTextColor }
-					backgroundColor={ backgroundColor }
-					setBackgroundColor={ setBackgroundColor }
-					overlayTextColor={ overlayTextColor }
-					setOverlayTextColor={ setOverlayTextColor }
-					overlayBackgroundColor={ overlayBackgroundColor }
-					setOverlayBackgroundColor={ setOverlayBackgroundColor }
-					clientId={ clientId }
-					navRef={ navRef }
-					hasCustomOverlay={ !! overlay }
-				/>
-			</InspectorControls>
+			{ ! hasSelectedStyleState && (
+				<InspectorControls group="color">
+					{ /*
+					 * Avoid useMultipleOriginColorsAndGradients and detectColors
+					 * on block mount. InspectorControls only mounts this component
+					 * when the block is selected.
+					 * */ }
+					<ColorTools
+						textColor={ textColor }
+						setTextColor={ setTextColor }
+						backgroundColor={ backgroundColor }
+						setBackgroundColor={ setBackgroundColor }
+						overlayTextColor={ overlayTextColor }
+						setOverlayTextColor={ setOverlayTextColor }
+						overlayBackgroundColor={ overlayBackgroundColor }
+						setOverlayBackgroundColor={ setOverlayBackgroundColor }
+						clientId={ clientId }
+						navRef={ navRef }
+						hasCustomOverlay={ !! overlay }
+					/>
+				</InspectorControls>
+			) }
 		</>
 	);
 

package/src/navigation/edit/test/layout-custom-properties.js

@@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSettings, useStyleOverride } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import useLayoutCustomProperties from '../use-layout-custom-properties';
+
+const mockGetResponsiveMediaQueries = jest.fn();
+
+jest.mock( '@wordpress/block-editor', () => ( {
+	useSettings: jest.fn(),
+	useStyleOverride: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/global-styles-engine', () => ( {
+	privateApis: {},
+} ) );
+
+jest.mock( '../../../lock-unlock', () => ( {
+	unlock: () => ( {
+		getResponsiveMediaQueries: ( ...args ) =>
+			mockGetResponsiveMediaQueries( ...args ),
+	} ),
+} ) );
+
+describe( 'Navigation layout custom properties', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+		useSettings.mockReturnValue( [ { mobile: 480, tablet: 782 } ] );
+		mockGetResponsiveMediaQueries.mockReturnValue( {
+			'@tablet': '@media (480px < width <= 782px)',
+			'@mobile': '@media (width <= 480px)',
+		} );
+	} );
+
+	describe( 'vertical layouts', () => {
+		it.each( [
+			[ 'left', 'initial', 'flex-start' ],
+			[ 'center', 'center', 'center' ],
+			[ 'right', 'flex-end', 'flex-end' ],
+			[ 'space-between', 'space-between', 'flex-start' ],
+		] )(
+			'reproduces the vertical %s class cascade',
+			( justifyContent, justify, align ) => {
+				renderHook( () =>
+					useLayoutCustomProperties( {
+						clientId: 'test',
+						style: {
+							'@mobile': {
+								layout: {
+									orientation: 'vertical',
+									justifyContent,
+									flexWrap: 'nowrap',
+								},
+							},
+						},
+					} )
+				);
+
+				const { css } = useStyleOverride.mock.calls.at( -1 )[ 0 ];
+				expect( css ).toContain(
+					'--navigation-layout-direction: column;'
+				);
+				expect( css ).toContain( '--navigation-layout-wrap: nowrap;' );
+				expect( css ).toContain(
+					`--navigation-layout-justify: ${ justify };`
+				);
+				expect( css ).toContain(
+					`--navigation-layout-align: ${ align };`
+				);
+			}
+		);
+	} );
+
+	describe( 'responsive styles', () => {
+		it( 'merges viewport overrides with the base layout', () => {
+			renderHook( () =>
+				useLayoutCustomProperties( {
+					clientId: 'test',
+					layout: {
+						justifyContent: 'right',
+						flexWrap: 'nowrap',
+					},
+					style: {
+						'@mobile': {
+							layout: { orientation: 'vertical' },
+						},
+					},
+				} )
+			);
+
+			expect( useStyleOverride ).toHaveBeenCalledWith( {
+				css: '@media (width <= 480px){#block-test {--navigation-layout-justification-setting: flex-end;--navigation-layout-direction: column;--navigation-layout-wrap: nowrap;--navigation-layout-justify: flex-end;--navigation-layout-align: flex-end;}}',
+			} );
+		} );
+
+		it( 'uses default values for explicit viewport resets', () => {
+			renderHook( () =>
+				useLayoutCustomProperties( {
+					clientId: 'test',
+					layout: { justifyContent: 'right' },
+					style: {
+						'@tablet': {
+							layout: { justifyContent: null },
+						},
+					},
+				} )
+			);
+
+			expect( useStyleOverride ).toHaveBeenCalledWith( {
+				css: expect.stringContaining(
+					'--navigation-layout-justify: flex-start;'
+				),
+			} );
+		} );
+
+		it( 'does not emit styles without a viewport layout override', () => {
+			renderHook( () =>
+				useLayoutCustomProperties( {
+					clientId: 'test',
+					style: {
+						'@mobile': { spacing: { blockGap: '10px' } },
+					},
+				} )
+			);
+
+			expect( useStyleOverride ).toHaveBeenCalledWith( { css: '' } );
+		} );
+	} );
+} );

package/src/navigation/edit/use-layout-custom-properties.js

@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies
+ */
+import { useSettings, useStyleOverride } from '@wordpress/block-editor';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );
+
+const JUSTIFICATION_VALUES = {
+	left: 'flex-start',
+	center: 'center',
+	right: 'flex-end',
+	'space-between': 'space-between',
+};
+
+/**
+ * Adds responsive Navigation layout custom properties to the editor canvas.
+ *
+ * @param {Object} options          Options.
+ * @param {string} options.clientId Block client ID.
+ * @param {Object} options.layout   Base layout configuration.
+ * @param {Object} options.style    Block style attribute.
+ */
+export default function useLayoutCustomProperties( {
+	clientId,
+	layout,
+	style,
+} ) {
+	const [ viewportSettings ] = useSettings( 'viewport' );
+	const selector = `#block-${ clientId }`;
+	const css = Object.entries( getResponsiveMediaQueries( viewportSettings ) )
+		.map( ( [ viewport, mediaQuery ] ) => {
+			const viewportLayout = style?.[ viewport ]?.layout;
+			if (
+				! viewportLayout ||
+				typeof viewportLayout !== 'object' ||
+				Array.isArray( viewportLayout ) ||
+				! Object.keys( viewportLayout ).length
+			) {
+				return '';
+			}
+
+			const effectiveLayout = { ...layout, ...viewportLayout };
+			const justifyContent = Object.hasOwn(
+				JUSTIFICATION_VALUES,
+				effectiveLayout.justifyContent
+			)
+				? effectiveLayout.justifyContent
+				: 'left';
+			const justification = JUSTIFICATION_VALUES[ justifyContent ];
+			const isVertical = effectiveLayout.orientation === 'vertical';
+			let align = 'center';
+			if ( isVertical ) {
+				align = [ 'center', 'right' ].includes( justifyContent )
+					? justification
+					: 'flex-start';
+			}
+			const justify =
+				isVertical && justifyContent === 'left'
+					? 'initial'
+					: justification;
+			const declarations = {
+				'--navigation-layout-justification-setting': justification,
+				'--navigation-layout-direction': isVertical ? 'column' : 'row',
+				'--navigation-layout-wrap':
+					effectiveLayout.flexWrap === 'nowrap' ? 'nowrap' : 'wrap',
+				'--navigation-layout-justify': justify,
+				'--navigation-layout-align': align,
+			};
+			const cssDeclarations = Object.entries( declarations )
+				.map( ( [ property, value ] ) => `${ property }: ${ value };` )
+				.join( '' );
+
+			return `${ mediaQuery }{${ selector } {${ cssDeclarations }}}`;
+		} )
+		.join( '' );
+
+	useStyleOverride( { css } );
+}

package/src/navigation/index.php

@@ -16,7 +16,7 @@
  * will always have a value even for legacy blocks. We check the legacy openSubmenusOnClick
  * attribute first to preserve original behavior for blocks saved before the migration.
  *
- * @since 6.9.0
+ * @since 7.0.0
  *
  * @param array $attributes Block attributes containing submenuVisibility and/or openSubmenusOnClick.
  * @return string The visibility mode: 'hover', 'click', or 'always'.
@@ -40,6 +40,45 @@ function block_core_navigation_get_submenu_visibility( $attributes ) {
 	return $submenu_visibility ?? 'hover';
 }
 
+/**
+ * Returns the custom properties used by the Navigation block for a layout.
+ *
+ * @since 7.1.0
+ *
+ * @param array $layout Layout configuration.
+ * @return array Navigation layout custom property declarations.
+ */
+function block_core_navigation_get_layout_custom_property_declarations( $layout ) {
+	$justification_values = array(
+		'left'          => 'flex-start',
+		'center'        => 'center',
+		'right'         => 'flex-end',
+		'space-between' => 'space-between',
+	);
+	$justify_content      = is_array( $layout ) ? ( $layout['justifyContent'] ?? 'left' ) : 'left';
+	if ( ! is_string( $justify_content ) || ! isset( $justification_values[ $justify_content ] ) ) {
+		$justify_content = 'left';
+	}
+
+	$justification = $justification_values[ $justify_content ];
+	$is_vertical   = is_array( $layout ) && 'vertical' === ( $layout['orientation'] ?? null );
+	$align         = 'center';
+	$justify       = $justification;
+
+	if ( $is_vertical ) {
+		$align   = in_array( $justify_content, array( 'center', 'right' ), true ) ? $justification : 'flex-start';
+		$justify = 'left' === $justify_content ? 'initial' : $justification;
+	}
+
+	return array(
+		'--navigation-layout-justification-setting' => $justification,
+		'--navigation-layout-direction'             => $is_vertical ? 'column' : 'row',
+		'--navigation-layout-wrap'                  => is_array( $layout ) && 'nowrap' === ( $layout['flexWrap'] ?? null ) ? 'nowrap' : 'wrap',
+		'--navigation-layout-justify'               => $justify,
+		'--navigation-layout-align'                 => $align,
+	);
+}
+
 /**
  * Helper functions used to render the navigation block.
  *
@@ -576,12 +615,13 @@ class WP_Navigation_Block_Renderer {
 			'space-between' => 'items-justified-space-between',
 		);
 
-		$layout_class = '';
+		$layout_class        = '';
+		$nav_justify_content = $attributes['layout']['justifyContent'] ?? null;
 		if (
-			isset( $attributes['layout']['justifyContent'] ) &&
-			isset( $layout_justification[ $attributes['layout']['justifyContent'] ] )
+			is_string( $nav_justify_content ) &&
+			isset( $layout_justification[ $nav_justify_content ] )
 		) {
-			$layout_class .= $layout_justification[ $attributes['layout']['justifyContent'] ];
+			$layout_class .= $layout_justification[ $nav_justify_content ];
 		}
 		if ( isset( $attributes['layout']['orientation'] ) && 'vertical' === $attributes['layout']['orientation'] ) {
 			$layout_class .= ' is-vertical';
@@ -1211,7 +1251,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 			)
 		) ) {
 			$tags->set_attribute( 'data-wp-on--click', 'actions.toggleMenuOnClick' );
-			$tags->set_attribute( 'data-wp-bind--aria-expanded', 'state.isMenuOpen' );
+			$tags->set_attribute( 'data-wp-bind--aria-expanded', 'state.isSubmenuOpen' );
 			// The `aria-expanded` attribute for SSR is already added in the submenu block.
 		}
 		// Add directives to the submenu.
@@ -1558,13 +1598,18 @@ function register_block_core_navigation() {
 add_action( 'init', 'register_block_core_navigation' );
 
 /**
- * Adds the Navigation block state class to inner list containers.
+ * Adds Navigation block support classes to inner list containers.
  *
  * State block support adds the generated `wp-states-*` class to the outer
  * block wrapper. The Navigation block renders its menu items inside an inner
  * `wp-block-navigation__container` list, so the same state class is also needed
  * there for state styles to apply directly to the menu list.
  *
+ * Navigation also uses layout classes on its outer wrapper to define custom
+ * properties consumed by its inner containers. Viewport layout styles cannot
+ * change those classes, so equivalent custom properties and a scoping class
+ * are generated for each configured viewport layout.
+ *
  * Currently this is required as a workaround because of how difficult it is for nav
  * child blocks to inherit styles through the complex responsive nav block html. The
  * bug in https://github.com/WordPress/gutenberg/issues/62690 also prevents inheritance.
@@ -1575,25 +1620,83 @@ add_action( 'init', 'register_block_core_navigation' );
  * @param array  $block         The full block, including name and attributes.
  * @return string The updated block content.
  */
-function block_core_navigation_add_state_class_to_container( $block_content, $block ) {
+function block_core_navigation_add_support_classes_to_container( $block_content, $block ) {
 	if ( 'core/navigation' !== ( $block['blockName'] ?? null ) || empty( $block_content ) ) {
 		return $block_content;
 	}
 
+	$attributes = is_array( $block['attrs'] ?? null ) ? $block['attrs'] : array();
+	$style      = is_array( $attributes['style'] ?? null ) ? $attributes['style'] : array();
+	if (
+		defined( 'IS_GUTENBERG_PLUGIN' ) &&
+		IS_GUTENBERG_PLUGIN &&
+		function_exists( 'gutenberg_resolve_style_state_aliases' )
+	) {
+		$style = gutenberg_resolve_style_state_aliases( $style, 'core/navigation' );
+	}
+
+	$global_settings          = wp_get_global_settings();
+	$viewport_settings        = $global_settings['viewport'] ?? null;
+	$responsive_media_queries = array();
+	if ( method_exists( 'WP_Theme_JSON_Gutenberg', 'get_viewport_media_queries' ) ) {
+		$responsive_media_queries = WP_Theme_JSON_Gutenberg::get_viewport_media_queries( $viewport_settings );
+	} elseif ( method_exists( 'WP_Theme_JSON', 'get_viewport_media_queries' ) ) {
+		$responsive_media_queries = WP_Theme_JSON::get_viewport_media_queries( $viewport_settings );
+	}
+
+	$styles      = array();
+	$base_layout = is_array( $attributes['layout'] ?? null ) ? $attributes['layout'] : array();
+	foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
+		$viewport_style  = is_array( $style[ $breakpoint ] ?? null ) ? $style[ $breakpoint ] : array();
+		$viewport_layout = is_array( $viewport_style['layout'] ?? null ) ? $viewport_style['layout'] : array();
+		if ( empty( $viewport_layout ) ) {
+			continue;
+		}
+
+		$styles[] = array(
+			'declarations' => block_core_navigation_get_layout_custom_property_declarations(
+				array_replace( $base_layout, $viewport_layout )
+			),
+			'rules_group'  => $media_query,
+		);
+	}
+
 	$processor = new WP_HTML_Tag_Processor( $block_content );
 	if ( ! $processor->next_tag() ) {
 		return $block_content;
 	}
 
 	$class_attribute = $processor->get_attribute( 'class' );
-	if ( ! is_string( $class_attribute ) || ! preg_match( '/\bwp-states-[a-f0-9]{8}\b/', $class_attribute, $matches ) ) {
+	$state_class     = null;
+	if ( is_string( $class_attribute ) && preg_match( '/\bwp-states-[a-f0-9]{8}\b/', $class_attribute, $matches ) ) {
+		$state_class = $matches[0];
+	}
+
+	$layout_class = null;
+	if ( ! empty( $styles ) ) {
+		$layout_class = wp_unique_id( 'wp-block-navigation-' );
+		// The inner selector includes both Navigation classes so it overrides the
+		// default layout custom properties set by `.wp-block-navigation.items-*`.
+		$selector = ".wp-block-navigation.{$layout_class},.wp-block-navigation.wp-block-navigation__container.{$layout_class}";
+		foreach ( $styles as &$style_rule ) {
+			$style_rule['selector'] = $selector;
+		}
+		unset( $style_rule );
+
+		$processor->add_class( $layout_class );
+		wp_style_engine_get_stylesheet_from_css_rules(
+			$styles,
+			array( 'context' => 'block-supports' )
+		);
+	}
+
+	if ( null === $state_class && null === $layout_class ) {
 		return $block_content;
 	}
 
-	$state_class = $matches[0];
 	while ( $processor->next_tag() ) {
 		// Custom overlay content can include nested Navigation blocks.
-		// Avoid applying the outer Navigation state class to an inner nav block.
+		// Avoid applying the outer Navigation classes to an inner nav block.
 		if ( $processor->has_class( 'wp-block-navigation' ) && ! $processor->has_class( 'wp-block-navigation__container' ) ) {
 			break;
 		}
@@ -1602,6 +1705,14 @@ function block_core_navigation_add_state_class_to_container( $block_content, $bl
 			continue;
 		}
 
+		if ( null !== $layout_class ) {
+			$processor->add_class( $layout_class );
+		}
+
+		if ( null === $state_class ) {
+			continue;
+		}
+
 		$class_attribute = $processor->get_attribute( 'class' );
 		if ( is_string( $class_attribute ) && preg_match( '/\bwp-states-[a-f0-9]{8}\b/', $class_attribute ) ) {
 			continue;
@@ -1613,7 +1724,7 @@ function block_core_navigation_add_state_class_to_container( $block_content, $bl
 	return $processor->get_updated_html();
 }
 
-add_filter( 'render_block', 'block_core_navigation_add_state_class_to_container', 11, 2 );
+add_filter( 'render_block', 'block_core_navigation_add_support_classes_to_container', 11, 2 );
 
 /**
  * Filter that changes the parsed attribute values of navigation blocks contain typographic presets to contain the values directly.

package/src/navigation/test/view.js

@@ -0,0 +1,51 @@
+let mockRegisteredStore;
+let mockCurrentContext;
+
+jest.mock( '@wordpress/interactivity', () => ( {
+	store: ( name, config ) => {
+		mockRegisteredStore = config;
+		return config;
+	},
+	getContext: () => mockCurrentContext,
+	getElement: () => ( { ref: {} } ),
+	withSyncEvent: ( fn ) => fn,
+} ) );
+
+describe( 'Navigation view script', () => {
+	beforeEach( async () => {
+		jest.resetModules();
+		mockRegisteredStore = null;
+		mockCurrentContext = null;
+		// Import the view.js script to register the store
+		await import( '../view.js' );
+	} );
+
+	it( 'updates submenuOpenedBy.hover when hovering a submenu inside an open overlay', () => {
+		// Mock the context for a submenu inside an open overlay
+		mockCurrentContext = {
+			type: 'submenu',
+			submenuOpenedBy: { click: false, hover: false, focus: false },
+			overlayOpenedBy: { click: true, hover: false, focus: false },
+		};
+
+		const { state, actions } = mockRegisteredStore;
+
+		// Verify initial state
+		expect( state.isSubmenuOpen ).toBe( true ); // because overlay is open
+		expect( mockCurrentContext.submenuOpenedBy.hover ).toBe( false );
+
+		// Simulate hover enter
+		actions.openMenuOnHover( { pointerType: 'mouse' } );
+
+		// Verify that hover state is tracked even though submenu is already "open" visually
+		expect( mockCurrentContext.submenuOpenedBy.hover ).toBe( true );
+		expect( state.isSubmenuOpen ).toBe( true ); // remains true
+
+		// Simulate hover leave
+		actions.closeMenuOnHover( { pointerType: 'mouse' } );
+
+		// Verify hover state is cleared
+		expect( mockCurrentContext.submenuOpenedBy.hover ).toBe( false );
+		expect( state.isSubmenuOpen ).toBe( true ); // remains true because overlay is still open
+	} );
+} );

package/src/navigation/view.js

@@ -80,6 +80,17 @@ const { state, actions } = store(
 					? ctx.overlayOpenedBy
 					: ctx.submenuOpenedBy;
 			},
+			get isSubmenuOpen() {
+				const ctx = getContext();
+				// Once the overlay itself is open, its styles always expand
+				// every submenu regardless of hover/click/focus state, so the
+				// toggle's `aria-expanded` should reflect that immediately
+				// instead of waiting for a hover/click/focus interaction.
+				const isOverlayOpen =
+					Object.values( ctx.overlayOpenedBy || {} ).filter( Boolean )
+						.length > 0;
+				return isOverlayOpen || state.isMenuOpen;
+			},
 		},
 		actions: {
 			openMenuOnHover( event ) {
@@ -88,13 +99,8 @@ const { state, actions } = store(
 				if ( event?.pointerType === 'touch' ) {
 					return;
 				}
-				const { type, overlayOpenedBy } = getContext();
-				if (
-					type === 'submenu' &&
-					// Only open on hover if the overlay is closed.
-					Object.values( overlayOpenedBy || {} ).filter( Boolean )
-						.length === 0
-				) {
+				const { type } = getContext();
+				if ( type === 'submenu' ) {
 					actions.openMenu( 'hover' );
 				}
 			},
@@ -102,13 +108,8 @@ const { state, actions } = store(
 				if ( event?.pointerType === 'touch' ) {
 					return;
 				}
-				const { type, overlayOpenedBy } = getContext();
-				if (
-					type === 'submenu' &&
-					// Only close on hover if the overlay is closed.
-					Object.values( overlayOpenedBy || {} ).filter( Boolean )
-						.length === 0
-				) {
+				const { type } = getContext();
+				if ( type === 'submenu' ) {
 					actions.closeMenu( 'hover' );
 				}
 			},

package/src/navigation-link/edit.js

@@ -425,12 +425,15 @@ export default function NavigationLinkEdit( {
 										}
 										onMerge={ mergeBlocks }
 										onReplace={ onReplace }
-										__unstableOnSplitAtEnd={ () =>
-											insertBlocksAfter(
-												createBlock(
-													'core/navigation-link'
-												)
-											)
+										__unstableOnSplitAtEnd={
+											insertBlocksAfter
+												? () =>
+														insertBlocksAfter(
+															createBlock(
+																'core/navigation-link'
+															)
+														)
+												: undefined
 										}
 										aria-label={ __(
 											'Navigation link text'
@@ -470,7 +473,8 @@ export default function NavigationLinkEdit( {
 								// If there is no link and no binding, remove the auto-inserted block.
 								// This avoids empty blocks which can provided a poor UX.
 								// Don't remove if binding exists (even if entity is unavailable) so user can fix it.
-								if ( ! url && ! hasUrlBinding ) {
+								// `onReplace` is undefined when the block can't be removed.
+								if ( ! url && ! hasUrlBinding && onReplace ) {
 									onReplace( [] );
 									return;
 								}