@wordpress/block-library 8.13.0 → 8.14.0

package/src/latest-posts/index.php

@@ -51,7 +51,7 @@ function render_block_core_latest_posts( $attributes ) {
 	$filter_latest_posts_excerpt_more = static function( $more ) use ( $attributes ) {
 		$use_excerpt = 'excerpt' === $attributes['displayPostContentRadio'];
 		/* translators: %1$s is a URL to a post, excerpt truncation character, default … */
-		return $use_excerpt ? sprintf( __( ' … <a href="%1$s" rel="noopener noreferrer">Read more</a>', 'gutenberg' ), esc_url( get_permalink() ) ) : $more;
+		return $use_excerpt ? sprintf( __( ' … <a href="%1$s" rel="noopener noreferrer">Read more</a>' ), esc_url( get_permalink() ) ) : $more;
 	};
 
 	add_filter( 'excerpt_more', $filter_latest_posts_excerpt_more );

package/src/list/block.json

@@ -61,7 +61,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"__unstablePasteTextInline": true,
 		"__experimentalSelector": "ol,ul",

package/src/media-text/block.json

@@ -100,6 +100,7 @@
 		"html": false,
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,

package/src/missing/edit.js

@@ -16,22 +16,46 @@ import { safeHTML } from '@wordpress/dom';
 function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
 	const { originalName, originalUndelimitedContent } = attributes;
 	const hasContent = !! originalUndelimitedContent;
-	const hasHTMLBlock = useSelect(
+	const { hasFreeformBlock, hasHTMLBlock } = useSelect(
 		( select ) => {
 			const { canInsertBlockType, getBlockRootClientId } =
 				select( blockEditorStore );
 
-			return canInsertBlockType(
-				'core/html',
-				getBlockRootClientId( clientId )
-			);
+			return {
+				hasFreeformBlock: canInsertBlockType(
+					'core/freeform',
+					getBlockRootClientId( clientId )
+				),
+				hasHTMLBlock: canInsertBlockType(
+					'core/html',
+					getBlockRootClientId( clientId )
+				),
+			};
 		},
 		[ clientId ]
 	);
 
 	const actions = [];
 	let messageHTML;
-	if ( hasContent && hasHTMLBlock ) {
+
+	const convertToHtmlButton = (
+		<Button key="convert" onClick={ convertToHTML } variant="primary">
+			{ __( 'Keep as HTML' ) }
+		</Button>
+	);
+
+	if ( hasContent && ! hasFreeformBlock && ! originalName ) {
+		if ( hasHTMLBlock ) {
+			messageHTML = __(
+				'It appears you are trying to use the deprecated Classic block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely. Alternatively, you can refresh the page to use the Classic block.'
+			);
+			actions.push( convertToHtmlButton );
+		} else {
+			messageHTML = __(
+				'It appears you are trying to use the deprecated Classic block. You can leave this block intact, or remove it entirely. Alternatively, you can refresh the page to use the Classic block.'
+			);
+		}
+	} else if ( hasContent && hasHTMLBlock ) {
 		messageHTML = sprintf(
 			/* translators: %s: block name */
 			__(
@@ -39,11 +63,7 @@ function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
 			),
 			originalName
 		);
-		actions.push(
-			<Button key="convert" onClick={ convertToHTML } variant="primary">
-				{ __( 'Keep as HTML' ) }
-			</Button>
-		);
+		actions.push( convertToHtmlButton );
 	} else {
 		messageHTML = sprintf(
 			/* translators: %s: block name */

package/src/navigation/block.json

@@ -131,9 +131,10 @@
 					}
 				}
 			}
-		}
+		},
+		"interactivity": true
 	},
-	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
+	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
 }

package/src/navigation/edit/index.js

@@ -69,7 +69,6 @@ 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( {
@@ -224,7 +223,7 @@ function Navigation( {
 	// that automatically saves the menu as an entity when changes are made to the inner blocks.
 	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
 
-	const { getNavigationFallbackId } = useSelect( coreStore );
+	const { getNavigationFallbackId } = unlock( useSelect( coreStore ) );
 
 	const navigationFallbackId = ! ( ref || hasUnsavedBlocks )
 		? getNavigationFallbackId()

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

@@ -60,7 +60,6 @@ function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
 			onClose={ () => {
 				setInsertedBlock( null );
 			} }
-			hasCreateSuggestion={ false }
 			onChange={ ( updatedValue ) => {
 				updateAttributes(
 					updatedValue,

package/src/navigation/index.php

@@ -94,7 +94,7 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 	 *
 	 * @return string Submenu markup with the directives injected.
 	 */
-	function gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_attributes ) {
+	function block_core_navigation_add_directives_to_submenu( $w, $block_attributes ) {
 		while ( $w->next_tag(
 			array(
 				'tag_name'   => 'LI',
@@ -103,7 +103,7 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 		) ) {
 			// 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-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' );
@@ -123,26 +123,21 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 				$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.
-			gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_attributes );
+			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 );
 }
 
 
@@ -341,7 +336,11 @@ function block_core_navigation_get_fallback_blocks() {
 	// If `core/page-list` is not registered then return empty blocks.
 	$fallback_blocks = $registry->is_registered( 'core/page-list' ) ? $page_list_fallback : array();
 
-	$navigation_post = WP_Navigation_Fallback_Gutenberg::get_fallback();
+	if ( class_exists( 'WP_Navigation_Fallback' ) ) {
+		$navigation_post = WP_Navigation_Fallback::get_fallback();
+	} else {
+		$navigation_post = Gutenberg_Navigation_Fallback::get_fallback();
+	}
 
 	// Use the first non-empty Navigation as fallback if available.
 	if ( $navigation_post ) {
@@ -673,7 +672,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	// Add directives to the submenu if needed.
 	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 );
+		$inner_blocks_html = block_core_navigation_add_directives_to_submenu( $w, $attributes );
 	}
 
 	$modal_unique_id = wp_unique_id( 'modal-' );
@@ -722,7 +721,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	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": "" } } }\'
+			data-wp-context=\'{ "core": { "navigation": { "overlayOpenedBy": {}, "type": "overlay", "roleAttribute": "" } } }\'
 		';
 		$open_button_directives          = '
 			data-wp-on--click="actions.core.navigation.openMenuOnClick"
@@ -747,11 +746,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>
@@ -836,6 +835,8 @@ add_filter( 'render_block_data', 'block_core_navigation_typographic_presets_back
 /**
  * Turns menu item data into a nested array of parsed blocks
  *
+ * @deprecated 6.3.0 Use WP_Navigation_Fallback::parse_blocks_from_menu_items() instead.
+ *
  * @param array $menu_items               An array of menu items that represent
  *                                        an individual level of a menu.
  * @param array $menu_items_by_parent_id  An array keyed by the id of the
@@ -846,7 +847,7 @@ add_filter( 'render_block_data', 'block_core_navigation_typographic_presets_back
  */
 function block_core_navigation_parse_blocks_from_menu_items( $menu_items, $menu_items_by_parent_id ) {
 
-	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::parse_blocks_from_menu_items' );
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback::parse_blocks_from_menu_items' );
 
 	if ( empty( $menu_items ) ) {
 		return array();
@@ -891,11 +892,13 @@ function block_core_navigation_parse_blocks_from_menu_items( $menu_items, $menu_
 /**
  * Get the classic navigation menu to use as a fallback.
  *
+ * @deprecated 6.3.0 Use WP_Navigation_Fallback::get_classic_menu_fallback() instead.
+ *
  * @return object WP_Term The classic navigation.
  */
 function block_core_navigation_get_classic_menu_fallback() {
 
-	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::get_classic_menu_fallback' );
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback::get_classic_menu_fallback' );
 
 	$classic_nav_menus = wp_get_nav_menus();
 
@@ -933,12 +936,14 @@ function block_core_navigation_get_classic_menu_fallback() {
 /**
  * Converts a classic navigation to blocks.
  *
+ * @deprecated 6.3.0 Use WP_Navigation_Fallback::get_classic_menu_fallback_blocks() instead.
+ *
  * @param  object $classic_nav_menu WP_Term The classic navigation object to convert.
  * @return array the normalized parsed blocks.
  */
 function block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu ) {
 
-	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::get_classic_menu_fallback_blocks' );
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback::get_classic_menu_fallback_blocks' );
 
 	// BEGIN: Code that already exists in wp_nav_menu().
 	$menu_items = wp_get_nav_menu_items( $classic_nav_menu->term_id, array( 'update_post_term_cache' => false ) );
@@ -971,13 +976,15 @@ function block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_me
 }
 
 /**
- * If there's a the classic menu then use it as a fallback.
+ * If there's a classic menu then use it as a fallback.
+ *
+ * @deprecated 6.3.0 Use WP_Navigation_Fallback::create_classic_menu_fallback() instead.
  *
  * @return array the normalized parsed blocks.
  */
 function block_core_navigation_maybe_use_classic_menu_fallback() {
 
-	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::create_classic_menu_fallback' );
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback::create_classic_menu_fallback' );
 
 	// See if we have a classic menu.
 	$classic_nav_menu = block_core_navigation_get_classic_menu_fallback();
@@ -1016,11 +1023,13 @@ function block_core_navigation_maybe_use_classic_menu_fallback() {
 /**
  * Finds the most recently published `wp_navigation` Post.
  *
+ * @deprecated 6.3.0 Use WP_Navigation_Fallback::get_most_recently_published_navigation() instead.
+ *
  * @return WP_Post|null the first non-empty Navigation or null.
  */
 function block_core_navigation_get_most_recently_published_navigation() {
 
-	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::get_most_recently_published_navigation' );
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback::get_most_recently_published_navigation' );
 
 	// Default to the most recently created menu.
 	$parsed_args = array(

package/src/navigation/view.js

@@ -1,74 +1,196 @@
-// Open on click functionality.
-function closeSubmenus( element ) {
-	element
-		.querySelectorAll( '[aria-expanded="true"]' )
-		.forEach( function ( toggle ) {
-			toggle.setAttribute( 'aria-expanded', 'false' );
-		} );
-}
+/**
+ * WordPress dependencies
+ */
+import { store as wpStore } from '@wordpress/interactivity';
 
-function toggleSubmenuOnClick( event ) {
-	const buttonToggle = event.target.closest( '[aria-expanded]' );
-	const isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );
+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^="-"])',
+];
 
-	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' );
+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' );
 	}
-}
+};
 
-// 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'
-	);
+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();
+		}
+		context.core.navigation.modal = null;
+		context.core.navigation.previousFocus = null;
+		if ( context.core.navigation.type === 'overlay' ) {
+			document.documentElement.classList.remove( 'has-modal-open' );
+		}
+	}
+};
 
-	submenuButtons.forEach( function ( button ) {
-		button.addEventListener( 'click', toggleSubmenuOnClick );
-	} );
+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'
+						: '';
+				},
+				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;
+						}
 
-	// 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();
-			}
-		} );
-	} );
+						// 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' );
+					}
+				},
+			},
+		},
+	},
 } );

package/src/navigation-link/edit.js

@@ -35,10 +35,7 @@ import {
 } from '@wordpress/dom';
 import { decodeEntities } from '@wordpress/html-entities';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
-import {
-	store as coreStore,
-	useResourcePermissions,
-} from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -184,9 +181,6 @@ export default function NavigationLinkEdit( {
 	const itemLabelPlaceholder = __( 'Add label…' );
 	const ref = useRef();
 
-	const pagesPermissions = useResourcePermissions( 'pages' );
-	const postsPermissions = useResourcePermissions( 'posts' );
-
 	const {
 		innerBlocks,
 		isAtMaxNesting,
@@ -322,13 +316,6 @@ export default function NavigationLinkEdit( {
 		setIsLinkOpen( false );
 	}
 
-	let userCanCreate = false;
-	if ( ! type || type === 'page' ) {
-		userCanCreate = pagesPermissions.canCreate;
-	} else if ( type === 'post' ) {
-		userCanCreate = postsPermissions.canCreate;
-	}
-
 	const {
 		textColor,
 		customTextColor,
@@ -589,7 +576,6 @@ export default function NavigationLinkEdit( {
 							link={ attributes }
 							onClose={ () => setIsLinkOpen( false ) }
 							anchor={ popoverAnchor }
-							hasCreateSuggestion={ userCanCreate }
 							onRemove={ removeLink }
 							onChange={ ( updatedValue ) => {
 								updateAttributes(

package/src/navigation-link/link-ui.js

@@ -10,7 +10,10 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { createInterpolateElement, useMemo } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	useResourcePermissions,
+} from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { switchToBlockType } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -125,6 +128,8 @@ function LinkControlTransforms( { clientId } ) {
 
 export function LinkUI( props ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
+	const pagesPermissions = useResourcePermissions( 'pages' );
+	const postsPermissions = useResourcePermissions( 'posts' );
 
 	async function handleCreate( pageTitle ) {
 		const postType = props.link.type || 'page';
@@ -155,6 +160,13 @@ export function LinkUI( props ) {
 
 	const { label, url, opensInNewTab, type, kind } = props.link;
 
+	let userCanCreate = false;
+	if ( ! type || type === 'page' ) {
+		userCanCreate = pagesPermissions.canCreate;
+	} else if ( type === 'post' ) {
+		userCanCreate = postsPermissions.canCreate;
+	}
+
 	// Memoize link value to avoid overriding the LinkControl's internal state.
 	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/50976#issuecomment-1568226407.
 	const link = useMemo(
@@ -179,7 +191,7 @@ export function LinkUI( props ) {
 				className={ props.className }
 				value={ link }
 				showInitialSuggestions={ true }
-				withCreateSuggestion={ props.hasCreateSuggestion }
+				withCreateSuggestion={ userCanCreate }
 				createSuggestion={ handleCreate }
 				createSuggestionButtonText={ ( searchTerm ) => {
 					let format;