@wordpress/block-library 8.30.0 → 8.32.0

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

@@ -117,16 +117,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenus: null,
 			navigationMenu: undefined,
 			canSwitchNavigationMenu: false,
-			canUserCreateNavigationMenu: false,
+			canUserCreateNavigationMenus: false,
 			canUserDeleteNavigationMenu: undefined,
 			canUserUpdateNavigationMenu: undefined,
-			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenus: false,
 			hasResolvedCanUserDeleteNavigationMenu: undefined,
 			hasResolvedCanUserUpdateNavigationMenu: undefined,
 			hasResolvedNavigationMenus: false,
 			isNavigationMenuMissing: true,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );
@@ -139,16 +139,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenus,
 			navigationMenu: undefined,
 			canSwitchNavigationMenu: true,
-			canUserCreateNavigationMenu: true,
+			canUserCreateNavigationMenus: true,
 			canUserDeleteNavigationMenu: undefined,
 			canUserUpdateNavigationMenu: undefined,
-			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserCreateNavigationMenus: true,
 			hasResolvedCanUserDeleteNavigationMenu: undefined,
 			hasResolvedCanUserUpdateNavigationMenu: undefined,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: true,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );
@@ -159,16 +159,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenu: navigationMenu1,
 			navigationMenus,
 			canSwitchNavigationMenu: true,
-			canUserCreateNavigationMenu: false,
+			canUserCreateNavigationMenus: false,
 			canUserDeleteNavigationMenu: false,
 			canUserUpdateNavigationMenu: false,
-			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenus: false,
 			hasResolvedCanUserDeleteNavigationMenu: false,
 			hasResolvedCanUserUpdateNavigationMenu: false,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );
@@ -181,16 +181,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenu: navigationMenuDraft,
 			navigationMenus: testMenus,
 			canSwitchNavigationMenu: true,
-			canUserCreateNavigationMenu: false,
+			canUserCreateNavigationMenus: false,
 			canUserDeleteNavigationMenu: false,
 			canUserUpdateNavigationMenu: false,
-			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenus: false,
 			hasResolvedCanUserDeleteNavigationMenu: false,
 			hasResolvedCanUserUpdateNavigationMenu: false,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );
@@ -205,16 +205,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenu: navigationMenu1,
 			navigationMenus,
 			canSwitchNavigationMenu: true,
-			canUserCreateNavigationMenu: true,
+			canUserCreateNavigationMenus: true,
 			canUserDeleteNavigationMenu: false,
 			canUserUpdateNavigationMenu: true,
-			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserCreateNavigationMenus: true,
 			hasResolvedCanUserDeleteNavigationMenu: true,
 			hasResolvedCanUserUpdateNavigationMenu: true,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );
@@ -229,16 +229,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenu: navigationMenu1,
 			navigationMenus,
 			canSwitchNavigationMenu: true,
-			canUserCreateNavigationMenu: false,
+			canUserCreateNavigationMenus: false,
 			canUserDeleteNavigationMenu: true,
 			canUserUpdateNavigationMenu: false,
-			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserCreateNavigationMenus: true,
 			hasResolvedCanUserDeleteNavigationMenu: true,
 			hasResolvedCanUserUpdateNavigationMenu: true,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );
@@ -254,16 +254,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenu: requestedMenu,
 			navigationMenus,
 			canSwitchNavigationMenu: true,
-			canUserCreateNavigationMenu: false,
+			canUserCreateNavigationMenus: false,
 			canUserDeleteNavigationMenu: false,
 			canUserUpdateNavigationMenu: false,
-			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenus: false,
 			hasResolvedCanUserDeleteNavigationMenu: false,
 			hasResolvedCanUserUpdateNavigationMenu: false,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );

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

@@ -27,8 +27,18 @@ export default function useNavigationMenu( ref ) {
 		[ ref ]
 	);
 
-	const { canCreate, canUpdate, canDelete, isResolving, hasResolved } =
-		permissions;
+	const {
+		// Can the user create navigation menus?
+		canCreate: canCreateNavigationMenus,
+
+		// Can the user update the specific navigation menu with the given post ID?
+		canUpdate: canUpdateNavigationMenu,
+
+		// Can the user delete the specific navigation menu with the given post ID?
+		canDelete: canDeleteNavigationMenu,
+		isResolving: isResolvingPermissions,
+		hasResolved: hasResolvedPermissions,
+	} = permissions;
 
 	const {
 		records: navigationMenus,
@@ -52,13 +62,17 @@ export default function useNavigationMenu( ref ) {
 		isResolvingNavigationMenus,
 		hasResolvedNavigationMenus,
 		canSwitchNavigationMenu,
-		canUserCreateNavigationMenu: canCreate,
-		isResolvingCanUserCreateNavigationMenu: isResolving,
-		hasResolvedCanUserCreateNavigationMenu: hasResolved,
-		canUserUpdateNavigationMenu: canUpdate,
-		hasResolvedCanUserUpdateNavigationMenu: ref ? hasResolved : undefined,
-		canUserDeleteNavigationMenu: canDelete,
-		hasResolvedCanUserDeleteNavigationMenu: ref ? hasResolved : undefined,
+		canUserCreateNavigationMenus: canCreateNavigationMenus,
+		isResolvingCanUserCreateNavigationMenus: isResolvingPermissions,
+		hasResolvedCanUserCreateNavigationMenus: hasResolvedPermissions,
+		canUserUpdateNavigationMenu: canUpdateNavigationMenu,
+		hasResolvedCanUserUpdateNavigationMenu: ref
+			? hasResolvedPermissions
+			: undefined,
+		canUserDeleteNavigationMenu: canDeleteNavigationMenu,
+		hasResolvedCanUserDeleteNavigationMenu: ref
+			? hasResolvedPermissions
+			: undefined,
 	};
 }
 

package/src/navigation/view.js

@@ -62,11 +62,20 @@ const { state, actions } = store(
 					// Only open on hover if the overlay is closed.
 					Object.values( overlayOpenedBy || {} ).filter( Boolean )
 						.length === 0
-				)
+				) {
 					actions.openMenu( 'hover' );
+				}
 			},
 			closeMenuOnHover() {
-				actions.closeMenu( 'hover' );
+				const { type, overlayOpenedBy } = getContext();
+				if (
+					type === 'submenu' &&
+					// Only close on hover if the overlay is closed.
+					Object.values( overlayOpenedBy || {} ).filter( Boolean )
+						.length === 0
+				) {
+					actions.closeMenu( 'hover' );
+				}
 			},
 			openMenuOnClick() {
 				const ctx = getContext();

package/src/navigation-link/edit.js

@@ -16,7 +16,7 @@ import {
 	Tooltip,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
+import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import {
 	BlockControls,
@@ -29,14 +29,11 @@ import {
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
 import { useState, useEffect, useRef } from '@wordpress/element';
-import {
-	placeCaretAtHorizontalEdge,
-	__unstableStripHTML as stripHTML,
-} from '@wordpress/dom';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { decodeEntities } from '@wordpress/html-entities';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -93,7 +90,7 @@ const useIsDraggingWithin = ( elementRef ) => {
 			ownerDocument.removeEventListener( 'dragend', handleDragEnd );
 			ownerDocument.removeEventListener( 'dragenter', handleDragEnter );
 		};
-	}, [] );
+	}, [ elementRef ] );
 
 	return isDraggingWithin;
 };
@@ -171,9 +168,14 @@ export default function NavigationLinkEdit( {
 	const [ isInvalid, isDraft ] = useIsInvalidLink( kind, type, id );
 	const { maxNestingLevel } = context;
 
-	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
+	const {
+		replaceBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+		selectPreviousBlock,
+	} = useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
+	// Store what element opened the popover, so we know where to return focus to (toolbar button vs navigation link text)
+	const [ openedBy, setOpenedBy ] = useState( null );
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
@@ -181,6 +183,7 @@ export default function NavigationLinkEdit( {
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
 	const itemLabelPlaceholder = __( 'Add label…' );
 	const ref = useRef();
+	const prevUrl = usePrevious( url );
 
 	// Change the label using inspector causes rich text to change focus on firefox.
 	// This is a workaround to keep the focus on the label field when label filed is focused we don't render the rich text.
@@ -220,13 +223,13 @@ export default function NavigationLinkEdit( {
 				hasChildren: !! getBlockCount( clientId ),
 			};
 		},
-		[ clientId ]
+		[ clientId, maxNestingLevel ]
 	);
 
 	/**
 	 * Transform to submenu block.
 	 */
-	function transformToSubmenu() {
+	const transformToSubmenu = () => {
 		const newSubmenu = createBlock(
 			'core/navigation-submenu',
 			attributes,
@@ -235,7 +238,7 @@ export default function NavigationLinkEdit( {
 				: [ createBlock( 'core/navigation-link' ) ]
 		);
 		replaceBlock( clientId, newSubmenu );
-	}
+	};
 
 	useEffect( () => {
 		// Show the LinkControl on mount if the URL is empty
@@ -269,20 +272,18 @@ export default function NavigationLinkEdit( {
 
 	// If the LinkControl popover is open and the URL has changed, close the LinkControl and focus the label text.
 	useEffect( () => {
-		if ( isLinkOpen && url ) {
-			// Does this look like a URL and have something TLD-ish?
-			if (
-				isURL( prependHTTP( label ) ) &&
-				/^.+\.[a-z]+/.test( label )
-			) {
-				// Focus and select the label text.
-				selectLabelText();
-			} else {
-				// Focus it (but do not select).
-				placeCaretAtHorizontalEdge( ref.current, true );
-			}
+		// We only want to do this when the URL has gone from nothing to a new URL AND the label looks like a URL
+		if (
+			! prevUrl &&
+			url &&
+			isLinkOpen &&
+			isURL( prependHTTP( label ) ) &&
+			/^.+\.[a-z]+/.test( label )
+		) {
+			// Focus and select the label text.
+			selectLabelText();
 		}
-	}, [ url ] );
+	}, [ prevUrl, url, isLinkOpen, label ] );
 
 	/**
 	 * Focus the Link label text and select it.
@@ -329,11 +330,15 @@ export default function NavigationLinkEdit( {
 	} = getColors( context, ! isTopLevelLink );
 
 	function onKeyDown( event ) {
-		if (
-			isKeyboardEvent.primary( event, 'k' ) ||
-			( ( ! url || isDraft || isInvalid ) && event.keyCode === ENTER )
-		) {
+		if ( isKeyboardEvent.primary( event, 'k' ) ) {
+			// Required to prevent the command center from opening,
+			// as it shares the CMD+K shortcut.
+			// See https://github.com/WordPress/gutenberg/pull/59845.
+			event.preventDefault();
+			// If this link is a child of a parent submenu item, the parent submenu item event will also open, closing this popover
+			event.stopPropagation();
 			setIsLinkOpen( true );
+			setOpenedBy( ref.current );
 		}
 	}
 
@@ -370,7 +375,10 @@ export default function NavigationLinkEdit( {
 	);
 
 	if ( ! url || isInvalid || isDraft ) {
-		blockProps.onClick = () => setIsLinkOpen( true );
+		blockProps.onClick = () => {
+			setIsLinkOpen( true );
+			setOpenedBy( ref.current );
+		};
 	}
 
 	const classes = classnames( 'wp-block-navigation-item__content', {
@@ -396,7 +404,10 @@ export default function NavigationLinkEdit( {
 						icon={ linkIcon }
 						title={ __( 'Link' ) }
 						shortcut={ displayShortcut.primary( 'k' ) }
-						onClick={ () => setIsLinkOpen( true ) }
+						onClick={ ( event ) => {
+							setIsLinkOpen( true );
+							setOpenedBy( event.currentTarget );
+						} }
 					/>
 					{ ! isAtMaxNesting && (
 						<ToolbarButton
@@ -413,17 +424,19 @@ export default function NavigationLinkEdit( {
 				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ label ? stripHTML( label ) : '' }
 						onChange={ ( labelValue ) => {
 							setAttributes( { label: labelValue } );
 						} }
-						label={ __( 'Label' ) }
+						label={ __( 'Text' ) }
 						autoComplete="off"
 						onFocus={ () => setIsLabelFieldFocused( true ) }
 						onBlur={ () => setIsLabelFieldFocused( false ) }
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ url ? safeDecodeURI( url ) : '' }
 						onChange={ ( urlValue ) => {
 							updateAttributes(
@@ -432,7 +445,7 @@ export default function NavigationLinkEdit( {
 								attributes
 							);
 						} }
-						label={ __( 'URL' ) }
+						label={ __( 'Link' ) }
 						autoComplete="off"
 					/>
 					<TextareaControl
@@ -448,6 +461,7 @@ export default function NavigationLinkEdit( {
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ title || '' }
 						onChange={ ( titleValue ) => {
 							setAttributes( { title: titleValue } );
@@ -460,6 +474,7 @@ export default function NavigationLinkEdit( {
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ rel || '' }
 						onChange={ ( relValue ) => {
 							setAttributes( { rel: relValue } );
@@ -518,11 +533,6 @@ export default function NavigationLinkEdit( {
 												'core/image',
 												'core/strikethrough',
 											] }
-											onClick={ () => {
-												if ( ! url ) {
-													setIsLinkOpen( true );
-												}
-											} }
 										/>
 										{ description && (
 											<span className="wp-block-navigation-item__description">
@@ -567,8 +577,23 @@ export default function NavigationLinkEdit( {
 								// If there is no link then remove the auto-inserted block.
 								// This avoids empty blocks which can provided a poor UX.
 								if ( ! url ) {
-									// Need to handle refocusing the Nav block or the inserter?
+									// Select the previous block to keep focus nearby
+									selectPreviousBlock( clientId, true );
+									// Remove the link.
 									onReplace( [] );
+									return;
+								}
+
+								setIsLinkOpen( false );
+								if ( openedBy ) {
+									openedBy.focus();
+									setOpenedBy( null );
+								} else if ( ref.current ) {
+									// select the ref when adding a new link
+									ref.current.focus();
+								} else {
+									// Fallback
+									selectPreviousBlock( clientId, true );
 								}
 							} }
 							anchor={ popoverAnchor }

package/src/navigation-link/index.php

@@ -9,6 +9,8 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
  *
+ * @since 5.9.0
+ *
  * @param  array $context     Navigation block context.
  * @param  array $attributes  Block attributes.
  * @param  bool  $is_sub_menu Whether the link is part of a sub-menu.
@@ -79,6 +81,8 @@ function block_core_navigation_link_build_css_colors( $context, $attributes, $is
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the navigation markup in the front-end.
  *
+ * @since 5.9.0
+ *
  * @param  array $context Navigation block context.
  * @return array Font size CSS classes and inline styles.
  */
@@ -113,6 +117,8 @@ function block_core_navigation_link_build_css_font_sizes( $context ) {
 /**
  * Returns the top-level submenu SVG chevron icon.
  *
+ * @since 5.9.0
+ *
  * @return string
  */
 function block_core_navigation_link_render_submenu_icon() {
@@ -122,6 +128,8 @@ function block_core_navigation_link_render_submenu_icon() {
 /**
  * Decodes a url if it's encoded, returning the same url if not.
  *
+ * @since 6.2.0
+ *
  * @param string $url The url to decode.
  *
  * @return string $url Returns the decoded url.
@@ -153,6 +161,8 @@ function block_core_navigation_link_maybe_urldecode( $url ) {
 /**
  * Renders the `core/navigation-link` block.
  *
+ * @since 5.9.0
+ *
  * @param array    $attributes The block attributes.
  * @param string   $content    The saved content.
  * @param WP_Block $block      The parsed block.
@@ -269,6 +279,8 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 /**
  * Returns a navigation link variation
  *
+ * @since 5.9.0
+ *
  * @param WP_Taxonomy|WP_Post_Type $entity post type or taxonomy entity.
  * @param string                   $kind string of value 'taxonomy' or 'post-type'.
  *
@@ -391,6 +403,8 @@ function block_core_navigation_link_build_variations() {
 /**
  * Registers the navigation link block.
  *
+ * @since 5.9.0
+ *
  * @uses render_block_core_navigation_link()
  * @throws WP_Error An WP_Error exception parsing the block definition.
  */

package/src/navigation-submenu/edit.js

@@ -28,7 +28,6 @@ import {
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
 import { useState, useEffect, useRef } from '@wordpress/element';
-import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
 import { useResourcePermissions } from '@wordpress/core-data';
 import { speak } from '@wordpress/a11y';
@@ -139,9 +138,14 @@ export default function NavigationSubmenuEdit( {
 
 	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
 
-	const { __unstableMarkNextChangeAsNotPersistent, replaceBlock } =
-		useDispatch( blockEditorStore );
+	const {
+		__unstableMarkNextChangeAsNotPersistent,
+		replaceBlock,
+		selectBlock,
+	} = useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
+	// Store what element opened the popover, so we know where to return focus to (toolbar button vs navigation link text)
+	const [ openedBy, setOpenedBy ] = useState( null );
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
@@ -241,9 +245,6 @@ export default function NavigationSubmenuEdit( {
 			) {
 				// Focus and select the label text.
 				selectLabelText();
-			} else {
-				// Focus it (but do not select).
-				placeCaretAtHorizontalEdge( ref.current, true );
 			}
 		}
 	}, [ url ] );
@@ -279,7 +280,14 @@ export default function NavigationSubmenuEdit( {
 
 	function onKeyDown( event ) {
 		if ( isKeyboardEvent.primary( event, 'k' ) ) {
+			// Required to prevent the command center from opening,
+			// as it shares the CMD+K shortcut.
+			// See https://github.com/WordPress/gutenberg/pull/59845.
+			event.preventDefault();
+			// If we don't stop propogation, this event bubbles up to the parent submenu item
+			event.stopPropagation();
 			setIsLinkOpen( true );
+			setOpenedBy( ref.current );
 		}
 	}
 
@@ -366,7 +374,10 @@ export default function NavigationSubmenuEdit( {
 							icon={ linkIcon }
 							title={ __( 'Link' ) }
 							shortcut={ displayShortcut.primary( 'k' ) }
-							onClick={ () => setIsLinkOpen( true ) }
+							onClick={ ( event ) => {
+								setIsLinkOpen( true );
+								setOpenedBy( event.currentTarget );
+							} }
 						/>
 					) }
 
@@ -385,20 +396,22 @@ export default function NavigationSubmenuEdit( {
 				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ label || '' }
 						onChange={ ( labelValue ) => {
 							setAttributes( { label: labelValue } );
 						} }
-						label={ __( 'Label' ) }
+						label={ __( 'Text' ) }
 						autoComplete="off"
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ url || '' }
 						onChange={ ( urlValue ) => {
 							setAttributes( { url: urlValue } );
 						} }
-						label={ __( 'URL' ) }
+						label={ __( 'Link' ) }
 						autoComplete="off"
 					/>
 					<TextareaControl
@@ -416,6 +429,7 @@ export default function NavigationSubmenuEdit( {
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ title || '' }
 						onChange={ ( titleValue ) => {
 							setAttributes( { title: titleValue } );
@@ -428,6 +442,7 @@ export default function NavigationSubmenuEdit( {
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ rel || '' }
 						onChange={ ( relValue ) => {
 							setAttributes( { rel: relValue } );
@@ -467,6 +482,7 @@ export default function NavigationSubmenuEdit( {
 							onClick={ () => {
 								if ( ! openSubmenusOnClick && ! url ) {
 									setIsLinkOpen( true );
+									setOpenedBy( ref.current );
 								}
 							} }
 						/>
@@ -475,7 +491,15 @@ export default function NavigationSubmenuEdit( {
 						<LinkUI
 							clientId={ clientId }
 							link={ attributes }
-							onClose={ () => setIsLinkOpen( false ) }
+							onClose={ () => {
+								setIsLinkOpen( false );
+								if ( openedBy ) {
+									openedBy.focus();
+									setOpenedBy( null );
+								} else {
+									selectBlock( clientId );
+								}
+							} }
 							anchor={ popoverAnchor }
 							hasCreateSuggestion={ userCanCreate }
 							onRemove={ () => {

package/src/navigation-submenu/index.php

@@ -9,6 +9,8 @@
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the navigation markup in the front-end.
  *
+ * @since 5.9.0
+ *
  * @param  array $context Navigation block context.
  * @return array Font size CSS classes and inline styles.
  */
@@ -43,6 +45,8 @@ function block_core_navigation_submenu_build_css_font_sizes( $context ) {
 /**
  * Returns the top-level submenu SVG chevron icon.
  *
+ * @since 5.9.0
+ *
  * @return string
  */
 function block_core_navigation_submenu_render_submenu_icon() {
@@ -52,6 +56,8 @@ function block_core_navigation_submenu_render_submenu_icon() {
 /**
  * Renders the `core/navigation-submenu` block.
  *
+ * @since 5.9.0
+ *
  * @param array    $attributes The block attributes.
  * @param string   $content    The saved content.
  * @param WP_Block $block      The parsed block.
@@ -238,6 +244,8 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 /**
  * Register the navigation submenu block.
  *
+ * @since 5.9.0
+ *
  * @uses render_block_core_navigation_submenu()
  * @throws WP_Error An WP_Error exception parsing the block definition.
  */