@wordpress/block-library 8.31.0 → 8.32.0

package/src/block/edit.js

@@ -38,7 +38,7 @@ import { name as patternBlockName } from './index';
 import { unlock } from '../lock-unlock';
 
 const { useLayoutClasses } = unlock( blockEditorPrivateApis );
-const { PARTIAL_SYNCING_SUPPORTED_BLOCKS } = unlock( patternsPrivateApis );
+const { isOverridableBlock } = unlock( patternsPrivateApis );
 
 const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
 
@@ -90,21 +90,9 @@ const useInferredLayout = ( blocks, parentLayout ) => {
 	}, [ blocks, parentLayout ] );
 };
 
-function hasOverridableAttributes( block ) {
-	return (
-		Object.keys( PARTIAL_SYNCING_SUPPORTED_BLOCKS ).includes(
-			block.name
-		) &&
-		!! block.attributes.metadata?.bindings &&
-		Object.values( block.attributes.metadata.bindings ).some(
-			( binding ) => binding.source === 'core/pattern-overrides'
-		)
-	);
-}
-
 function hasOverridableBlocks( blocks ) {
 	return blocks.some( ( block ) => {
-		if ( hasOverridableAttributes( block ) ) return true;
+		if ( isOverridableBlock( block ) ) return true;
 		return hasOverridableBlocks( block.innerBlocks );
 	} );
 }
@@ -133,7 +121,7 @@ function applyInitialContentValuesToInnerBlocks(
 		const metadataName =
 			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
 
-		if ( ! metadataName || ! hasOverridableAttributes( block ) ) {
+		if ( ! metadataName || ! isOverridableBlock( block ) ) {
 			return { ...block, innerBlocks };
 		}
 
@@ -184,7 +172,7 @@ function getContentValuesFromInnerBlocks( blocks, defaultValues, legacyIdMap ) {
 		}
 		const metadataName =
 			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
-		if ( ! metadataName || ! hasOverridableAttributes( block ) ) {
+		if ( ! metadataName || ! isOverridableBlock( block ) ) {
 			continue;
 		}
 
@@ -217,7 +205,7 @@ function setBlockEditMode( setEditMode, blocks, mode ) {
 	blocks.forEach( ( block ) => {
 		const editMode =
 			mode ||
-			( hasOverridableAttributes( block ) ? 'contentOnly' : 'disabled' );
+			( isOverridableBlock( block ) ? 'contentOnly' : 'disabled' );
 		setEditMode( block.clientId, editMode );
 
 		setBlockEditMode(

package/src/button/edit.native.js

@@ -494,7 +494,7 @@ function ButtonEdit( props ) {
 					<View pointerEvents="none" style={ outLineStyles } />
 				) }
 				<RichText
-					setRef={ onSetRef }
+					ref={ onSetRef }
 					placeholder={ placeholderText }
 					value={ text }
 					onChange={ onChangeText }

package/src/cover/style.scss

@@ -1,12 +1,16 @@
+// Lowest specificity styles are used to ensure that the default styles for the cover block can be overridden by global styles.
+:where(.wp-block-cover-image, .wp-block-cover) {
+	min-height: 430px;
+	padding: 1em;
+}
+
 .wp-block-cover-image,
 .wp-block-cover {
 	position: relative;
 	background-position: center center;
-	min-height: 430px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	padding: 1em;
 	// Prevent the `wp-block-cover__background` span from overflowing the container when border-radius is applied.
 	// `overflow: hidden` is provided as a fallback for browsers that don't support `overflow: clip`.
 	overflow: hidden;

package/src/embed/theme.scss

@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-.wp-block-embed {
+:where(.wp-block-embed) {
 	margin: 0 0 1em 0;
 }

package/src/gallery/editor.scss

@@ -27,7 +27,7 @@ figure.wp-block-gallery {
 		}
 	}
 
-	// @todo: this deserves a refactor, by being moved to the toolbar.
+	// @todo this deserves a refactor, by being moved to the toolbar.
 	.block-editor-media-placeholder.is-appender {
 		.components-placeholder__label {
 			display: none;

package/src/gallery/index.php

@@ -131,7 +131,7 @@ function block_core_gallery_render( $attributes, $content ) {
 	 * the `$parsed_block['innerBlocks']` via the `render_block_data` hook.
 	 * However, this hook doesn't apply inner block updates when blocks are
 	 * nested.
-	 * @todo: In the future, if this hook supports updating innerBlocks in
+	 * @todo In the future, if this hook supports updating innerBlocks in
 	 * nested blocks, it should be refactored.
 	 *
 	 * @see: https://github.com/WordPress/gutenberg/pull/58733

package/src/image/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { isBlobURL } from '@wordpress/blob';
 import { store as blocksStore } from '@wordpress/blocks';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -28,6 +28,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { unlock } from '../lock-unlock';
+import { useUploadMediaFromBlobURL } from '../utils/hooks';
 import Image from './image';
 
 /**
@@ -116,7 +117,9 @@ export function ImageEdit( {
 		align,
 		metadata,
 	} = attributes;
-	const [ temporaryURL, setTemporaryURL ] = useState();
+	const [ temporaryURL, setTemporaryURL ] = useState( () => {
+		return isTemporaryImage( id, url ) ? url : undefined;
+	} );
 
 	const altRef = useRef();
 	useEffect( () => {
@@ -267,44 +270,12 @@ export function ImageEdit( {
 		}
 	}
 
-	let isTemp = isTemporaryImage( id, url );
-
-	// Upload a temporary image on mount.
-	useEffect( () => {
-		if ( ! isTemp ) {
-			return;
-		}
-
-		const file = getBlobByURL( url );
-
-		if ( file ) {
-			const { mediaUpload } = getSettings();
-			if ( ! mediaUpload ) {
-				return;
-			}
-			mediaUpload( {
-				filesList: [ file ],
-				onFileChange: ( [ img ] ) => {
-					onSelectImage( img );
-				},
-				allowedTypes: ALLOWED_MEDIA_TYPES,
-				onError: ( message ) => {
-					isTemp = false;
-					onUploadError( message );
-				},
-			} );
-		}
-	}, [] );
-
-	// If an image is temporary, revoke the Blob url when it is uploaded (and is
-	// no longer temporary).
-	useEffect( () => {
-		if ( isTemp ) {
-			setTemporaryURL( url );
-			return;
-		}
-		revokeBlobURL( temporaryURL );
-	}, [ isTemp, url ] );
+	useUploadMediaFromBlobURL( {
+		url,
+		allowedTypes: ALLOWED_MEDIA_TYPES,
+		onChange: onSelectImage,
+		onError: onUploadError,
+	} );
 
 	const isExternal = isExternalImage( id, url );
 	const src = isExternal ? url : undefined;

package/src/image/editor.scss

@@ -1,5 +1,5 @@
 // Provide special styling for the placeholder.
-// @todo: this particular minimal style of placeholder could be componentized further.
+// @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-image.wp-block-image {
 
 	// Show Placeholder style on-select.
@@ -13,7 +13,7 @@
 		// Disable any duotone filter applied in the selected state.
 		filter: none !important;
 
-		// @todo: this should eventually be overridden by a custom border-radius set in the inspector.
+		// @todo this should eventually be overridden by a custom border-radius set in the inspector.
 		border-radius: $radius-block-ui;
 
 		> svg {

package/src/image/image.js

@@ -83,8 +83,7 @@ const ImageWrapper = ( { href, children } ) => {
 				// When the Image block is linked,
 				// it's wrapped with a disabled <a /> tag.
 				// Restore cursor style so it doesn't appear 'clickable'
-				// and remove pointer events. Safari needs the display property.
-				pointerEvents: 'none',
+				// Safari needs the display property.
 				cursor: 'default',
 				display: 'inline',
 			} }
@@ -274,6 +273,22 @@ export default function Image( {
 		}
 	}
 
+	function resetLightbox() {
+		// When deleting a link from an image while lightbox settings
+		// are enabled by default, we should disable the lightbox,
+		// otherwise the resulting UX looks like a mistake.
+		// See https://github.com/WordPress/gutenberg/pull/59890/files#r1532286123.
+		if ( lightboxSetting?.enabled && lightboxSetting?.allowEditing ) {
+			setAttributes( {
+				lightbox: { enabled: false },
+			} );
+		} else {
+			setAttributes( {
+				lightbox: undefined,
+			} );
+		}
+	}
+
 	function onSetTitle( value ) {
 		// This is the HTML title attribute, separate from the media object
 		// title.
@@ -348,7 +363,10 @@ export default function Image( {
 	const [ lightboxSetting ] = useSettings( 'lightbox' );
 
 	const showLightboxSetting =
-		!! lightbox || lightboxSetting?.allowEditing === true;
+		// If a block-level override is set, we should give users the option to
+		// remove that override, even if the lightbox UI is disabled in the settings.
+		( !! lightbox && lightbox?.enabled !== lightboxSetting?.enabled ) ||
+		lightboxSetting?.allowEditing;
 
 	const lightboxChecked =
 		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
@@ -498,6 +516,7 @@ export default function Image( {
 							showLightboxSetting={ showLightboxSetting }
 							lightboxEnabled={ lightboxChecked }
 							onSetLightbox={ onSetLightbox }
+							resetLightbox={ resetLightbox }
 						/>
 					) }
 				{ allowCrop && (
@@ -692,6 +711,7 @@ export default function Image( {
 			<InspectorControls group="advanced">
 				<TextControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'Title attribute' ) }
 					value={ title || '' }
 					onChange={ onSetTitle }
@@ -913,9 +933,7 @@ export default function Image( {
 
 	return (
 		<>
-			{ /* Hide controls during upload to avoid component remount,
-				which causes duplicated image upload. */ }
-			{ ! temporaryURL && controls }
+			{ controls }
 			{ img }
 
 			<Caption
@@ -925,7 +943,7 @@ export default function Image( {
 				insertBlocksAfter={ insertBlocksAfter }
 				label={ __( 'Image caption text' ) }
 				showToolbarButton={ isSingleSelected && hasNonContentControls }
-				disableEditing={ lockCaption }
+				readOnly={ lockCaption }
 			/>
 		</>
 	);

package/src/image/theme.scss

@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-.wp-block-image {
+:where(.wp-block-image) {
 	margin: 0 0 1em 0;
 }

package/src/navigation/index.php

@@ -1520,6 +1520,14 @@ function block_core_navigation_update_ignore_hooked_blocks_meta( $post ) {
 		return $post;
 	}
 
+	/**
+	 * Skip meta generation when consumers intentionally update specific Navigation fields
+	 * and omit the content update.
+	 */
+	if ( ! isset( $post->post_content ) ) {
+		return $post;
+	}
+
 	/*
 	 * We run the Block Hooks mechanism to inject the `metadata.ignoredHookedBlocks` attribute into
 	 * all anchor blocks. For the root level, we create a mock Navigation and extract them from there.

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

@@ -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.
@@ -226,7 +229,7 @@ export default function NavigationLinkEdit( {
 	/**
 	 * 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, isLinkOpen, label ] );
+	}, [ prevUrl, url, isLinkOpen, label ] );
 
 	/**
 	 * Focus the Link label text and select it.
@@ -334,7 +335,10 @@ export default function NavigationLinkEdit( {
 			// 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 );
 		}
 	}
 
@@ -373,6 +377,7 @@ export default function NavigationLinkEdit( {
 	if ( ! url || isInvalid || isDraft ) {
 		blockProps.onClick = () => {
 			setIsLinkOpen( true );
+			setOpenedBy( ref.current );
 		};
 	}
 
@@ -399,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
@@ -416,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(
@@ -435,7 +445,7 @@ export default function NavigationLinkEdit( {
 								attributes
 							);
 						} }
-						label={ __( 'URL' ) }
+						label={ __( 'Link' ) }
 						autoComplete="off"
 					/>
 					<TextareaControl
@@ -451,6 +461,7 @@ export default function NavigationLinkEdit( {
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ title || '' }
 						onChange={ ( titleValue ) => {
 							setAttributes( { title: titleValue } );
@@ -463,6 +474,7 @@ export default function NavigationLinkEdit( {
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ rel || '' }
 						onChange={ ( relValue ) => {
 							setAttributes( { rel: relValue } );
@@ -565,10 +577,24 @@ 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 }
 							onRemove={ removeLink }

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 ] );
@@ -283,7 +284,10 @@ export default function NavigationSubmenuEdit( {
 			// 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 );
 		}
 	}
 
@@ -370,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 );
+							} }
 						/>
 					) }
 
@@ -389,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
@@ -420,6 +429,7 @@ export default function NavigationSubmenuEdit( {
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ title || '' }
 						onChange={ ( titleValue ) => {
 							setAttributes( { title: titleValue } );
@@ -432,6 +442,7 @@ export default function NavigationSubmenuEdit( {
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ rel || '' }
 						onChange={ ( relValue ) => {
 							setAttributes( { rel: relValue } );
@@ -471,6 +482,7 @@ export default function NavigationSubmenuEdit( {
 							onClick={ () => {
 								if ( ! openSubmenusOnClick && ! url ) {
 									setIsLinkOpen( true );
+									setOpenedBy( ref.current );
 								}
 							} }
 						/>
@@ -479,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/pattern/edit.js

@@ -108,6 +108,10 @@ const PatternEdit = ( { attributes, clientId } ) => {
 						metadata: {
 							...clonedBlocks[ 0 ].attributes.metadata,
 							categories: selectedPattern.categories,
+							patternName: selectedPattern.name,
+							name:
+								clonedBlocks[ 0 ].attributes.metadata.name ||
+								selectedPattern.title,
 						},
 					};
 				}