@wordpress/block-library 9.47.0 → 9.48.0

package/src/image/test/use-open-image-media-editor-modal.js

@@ -111,6 +111,45 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		jest.clearAllMocks();
 	} );
 
+	it( 'passes an onClose handler for returning focus when the media editor closes', async () => {
+		const cropButton = document.createElement( 'button' );
+		const otherButton = document.createElement( 'button' );
+		document.body.append( cropButton, otherButton );
+		const registry = createRegistry();
+		useRegistry.mockReturnValue( registry );
+		const setAttributes = jest.fn();
+		const openMediaEditorModal = jest.fn();
+		mockMediaEditorModalSetting( openMediaEditorModal );
+		const onClose = () => cropButton.focus();
+		const { result } = renderHook( () =>
+			useOpenImageMediaEditorModal( {
+				attributes: {
+					id: 1,
+					url: 'original.jpg',
+					alt: '',
+					caption: '',
+				},
+				setAttributes,
+				onClose,
+			} )
+		);
+
+		try {
+			await act( async () => {
+				await result.current();
+			} );
+			otherButton.focus();
+			expect( otherButton ).toHaveFocus();
+
+			openMediaEditorModal.mock.calls[ 0 ][ 0 ].onClose();
+
+			expect( cropButton ).toHaveFocus();
+		} finally {
+			cropButton.remove();
+			otherButton.remove();
+		}
+	} );
+
 	it( 'resolves fresh attachment metadata when the same attachment id has a stale cache', async () => {
 		const originalAttachment = {
 			id: 1,
@@ -187,6 +226,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		expect( openMediaEditorModal ).toHaveBeenCalledWith( {
 			id: 1,
 			onUpdate: expect.any( Function ),
+			onClose: undefined,
 		} );
 		expect( setAttributes ).toHaveBeenCalledWith( {
 			alt: 'Updated alt',
@@ -229,6 +269,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		expect( openMediaEditorModal ).toHaveBeenCalledWith( {
 			id: 1,
 			onUpdate: expect.any( Function ),
+			onClose: undefined,
 		} );
 		expect( setAttributes ).toHaveBeenCalledWith( {
 			caption: 'Updated attachment caption',

package/src/image/use-open-image-media-editor-modal.js

@@ -136,7 +136,11 @@ function hasKnownAttachmentMetadata( attachment ) {
 	return hasKnownAlt && hasKnownCaption;
 }
 
-export function useOpenImageMediaEditorModal( { attributes, setAttributes } ) {
+export function useOpenImageMediaEditorModal( {
+	attributes,
+	setAttributes,
+	onClose,
+} ) {
 	// Keep this hook private to the Image block and pass the block attributes
 	// object so the callsite stays compact. Destructure only the attributes
 	// currently used for metadata sync; add more here if the sync policy grows.
@@ -342,11 +346,13 @@ export function useOpenImageMediaEditorModal( { attributes, setAttributes } ) {
 		openMediaEditorModal( {
 			id,
 			onUpdate: handleMediaUpdate,
+			onClose,
 		} );
 	}, [
 		getCachedAttachmentRecord,
 		handleMediaUpdate,
 		id,
+		onClose,
 		openMediaEditorModal,
 		resolveAttachmentRecord,
 	] );

package/src/navigation-link/test/__snapshots__/hooks.js.snap

@@ -8,30 +8,14 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
     {
       "attributes": {},
       "description": "A link to a custom URL.",
-      "icon": {
-        "$$typeof": Symbol(react.transitional.element),
-        "_owner": null,
-        "_store": {},
-        "key": null,
-        "props": {
-          "children": {
-            "$$typeof": Symbol(react.transitional.element),
-            "_owner": null,
-            "_store": {},
-            "key": null,
-            "props": {
-              "d": "M4 20h9v-1.5H4V20zm0-5.5V16h16v-1.5H4zm.8-4l.7.7 2-2V12h1V9.2l2 2 .7-.7-2-2H12v-1H9.2l2-2-.7-.7-2 2V4h-1v2.8l-2-2-.7.7 2 2H4v1h2.8l-2 2z",
-            },
-            "type": [Function],
-          },
-          "viewBox": "0 0 24 24",
-          "xmlns": "http://www.w3.org/2000/svg",
-        },
-        "type": {
-          "$$typeof": Symbol(react.forward_ref),
-          "render": [Function],
-        },
-      },
+      "icon": <SVG
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <Path
+          d="M4 20h9v-1.5H4V20zm0-5.5V16h16v-1.5H4zm.8-4l.7.7 2-2V12h1V9.2l2 2 .7-.7-2-2H12v-1H9.2l2-2-.7-.7-2 2V4h-1v2.8l-2-2-.7.7 2 2H4v1h2.8l-2 2z"
+        />
+      </SVG>,
       "isActive": [Function],
       "name": "link",
       "title": "Custom Link",
@@ -41,30 +25,14 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
         "type": "post",
       },
       "description": "A link to a post.",
-      "icon": {
-        "$$typeof": Symbol(react.transitional.element),
-        "_owner": null,
-        "_store": {},
-        "key": null,
-        "props": {
-          "children": {
-            "$$typeof": Symbol(react.transitional.element),
-            "_owner": null,
-            "_store": {},
-            "key": null,
-            "props": {
-              "d": "M18 5.5H6a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5ZM6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm1 5h1.5v1.5H7V9Zm1.5 4.5H7V15h1.5v-1.5ZM10 9h7v1.5h-7V9Zm7 4.5h-7V15h7v-1.5Z",
-            },
-            "type": [Function],
-          },
-          "viewBox": "0 0 24 24",
-          "xmlns": "http://www.w3.org/2000/svg",
-        },
-        "type": {
-          "$$typeof": Symbol(react.forward_ref),
-          "render": [Function],
-        },
-      },
+      "icon": <SVG
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <Path
+          d="M18 5.5H6a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5ZM6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm1 5h1.5v1.5H7V9Zm1.5 4.5H7V15h1.5v-1.5ZM10 9h7v1.5h-7V9Zm7 4.5h-7V15h7v-1.5Z"
+        />
+      </SVG>,
       "isActive": [Function],
       "name": "post",
       "title": "Post Link",
@@ -74,42 +42,17 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
         "type": "page",
       },
       "description": "A link to a page.",
-      "icon": {
-        "$$typeof": Symbol(react.transitional.element),
-        "_owner": null,
-        "_store": {},
-        "key": null,
-        "props": {
-          "children": [
-            {
-              "$$typeof": Symbol(react.transitional.element),
-              "_owner": null,
-              "_store": {},
-              "key": null,
-              "props": {
-                "d": "M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z",
-              },
-              "type": [Function],
-            },
-            {
-              "$$typeof": Symbol(react.transitional.element),
-              "_owner": null,
-              "_store": {},
-              "key": null,
-              "props": {
-                "d": "M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z",
-              },
-              "type": [Function],
-            },
-          ],
-          "viewBox": "0 0 24 24",
-          "xmlns": "http://www.w3.org/2000/svg",
-        },
-        "type": {
-          "$$typeof": Symbol(react.forward_ref),
-          "render": [Function],
-        },
-      },
+      "icon": <SVG
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <Path
+          d="M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z"
+        />
+        <Path
+          d="M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z"
+        />
+      </SVG>,
       "isActive": [Function],
       "name": "page",
       "title": "Page Link",
@@ -119,32 +62,16 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
         "type": "category",
       },
       "description": "A link to a category.",
-      "icon": {
-        "$$typeof": Symbol(react.transitional.element),
-        "_owner": null,
-        "_store": {},
-        "key": null,
-        "props": {
-          "children": {
-            "$$typeof": Symbol(react.transitional.element),
-            "_owner": null,
-            "_store": {},
-            "key": null,
-            "props": {
-              "clipRule": "evenodd",
-              "d": "M6 5.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM4 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm11-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM13 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2h-3a2 2 0 01-2-2V6zm5 8.5h-3a.5.5 0 00-.5.5v3a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5zM15 13a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2v-3a2 2 0 00-2-2h-3zm-9 1.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5zM4 15a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2v-3z",
-              "fillRule": "evenodd",
-            },
-            "type": [Function],
-          },
-          "viewBox": "0 0 24 24",
-          "xmlns": "http://www.w3.org/2000/svg",
-        },
-        "type": {
-          "$$typeof": Symbol(react.forward_ref),
-          "render": [Function],
-        },
-      },
+      "icon": <SVG
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <Path
+          clipRule="evenodd"
+          d="M6 5.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM4 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm11-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM13 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2h-3a2 2 0 01-2-2V6zm5 8.5h-3a.5.5 0 00-.5.5v3a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5zM15 13a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2v-3a2 2 0 00-2-2h-3zm-9 1.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5zM4 15a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2v-3z"
+          fillRule="evenodd"
+        />
+      </SVG>,
       "isActive": [Function],
       "name": "category",
       "title": "Category Link",
@@ -154,30 +81,14 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
         "type": "tag",
       },
       "description": "A link to a tag.",
-      "icon": {
-        "$$typeof": Symbol(react.transitional.element),
-        "_owner": null,
-        "_store": {},
-        "key": null,
-        "props": {
-          "children": {
-            "$$typeof": Symbol(react.transitional.element),
-            "_owner": null,
-            "_store": {},
-            "key": null,
-            "props": {
-              "d": "M4.75 4a.75.75 0 0 0-.75.75v7.826c0 .2.08.39.22.53l6.72 6.716a2.313 2.313 0 0 0 3.276-.001l5.61-5.611-.531-.53.532.528a2.315 2.315 0 0 0 0-3.264L13.104 4.22a.75.75 0 0 0-.53-.22H4.75ZM19 12.576a.815.815 0 0 1-.236.574l-5.61 5.611a.814.814 0 0 1-1.153 0L5.5 12.264V5.5h6.763l6.5 6.502a.816.816 0 0 1 .237.574ZM8.75 9.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
-            },
-            "type": [Function],
-          },
-          "viewBox": "0 0 24 24",
-          "xmlns": "http://www.w3.org/2000/svg",
-        },
-        "type": {
-          "$$typeof": Symbol(react.forward_ref),
-          "render": [Function],
-        },
-      },
+      "icon": <SVG
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <Path
+          d="M4.75 4a.75.75 0 0 0-.75.75v7.826c0 .2.08.39.22.53l6.72 6.716a2.313 2.313 0 0 0 3.276-.001l5.61-5.611-.531-.53.532.528a2.315 2.315 0 0 0 0-3.264L13.104 4.22a.75.75 0 0 0-.53-.22H4.75ZM19 12.576a.815.815 0 0 1-.236.574l-5.61 5.611a.814.814 0 0 1-1.153 0L5.5 12.264V5.5h6.763l6.5 6.502a.816.816 0 0 1 .237.574ZM8.75 9.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+        />
+      </SVG>,
       "isActive": [Function],
       "name": "tag",
       "title": "Tag Link",

package/src/post-featured-image/edit.js

@@ -137,10 +137,12 @@ export default function PostFeaturedImageEdit( {
 		return imageId;
 	}, [ storedFeaturedImage, useFirstImageFromPost, postContent ] );
 
-	const { media, postType, postPermalink } = useSelect(
+	const { media, postType, postPermalink, hasSelectedStyleState } = useSelect(
 		( select ) => {
 			const { getEntityRecord, getPostType, getEditedEntityRecord } =
 				select( coreStore );
+			const { hasSelectedStyleState: hasSelectedBlockStyleState } =
+				unlock( select( blockEditorStore ) );
 			return {
 				media:
 					featuredImage &&
@@ -153,9 +155,10 @@ export default function PostFeaturedImageEdit( {
 					postTypeSlug,
 					postId
 				)?.link,
+				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
 			};
 		},
-		[ featuredImage, postTypeSlug, postId ]
+		[ clientId, featuredImage, postTypeSlug, postId ]
 	);
 
 	const mediaUrl =
@@ -237,14 +240,16 @@ export default function PostFeaturedImageEdit( {
 					clientId={ clientId }
 				/>
 			</InspectorControls>
-			<InspectorControls group="dimensions">
-				<DimensionControls
-					clientId={ clientId }
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-					media={ media }
-				/>
-			</InspectorControls>
+			{ ! hasSelectedStyleState && (
+				<InspectorControls group="dimensions">
+					<DimensionControls
+						clientId={ clientId }
+						attributes={ attributes }
+						setAttributes={ setAttributes }
+						media={ media }
+					/>
+				</InspectorControls>
+			) }
 			{ ( featuredImage || isDescendentOfQueryLoop || ! postId ) && (
 				<InspectorControls>
 					<ToolsPanel

package/src/site-logo/edit.js

@@ -10,6 +10,7 @@ import { isBlobURL } from '@wordpress/blob';
 import {
 	createInterpolateElement,
 	useEffect,
+	useRef,
 	useState,
 } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
@@ -73,6 +74,7 @@ const SiteLogo = ( {
 	const isResizable = ! isWideAligned && isLargeViewport;
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
+	const cropButtonRef = useRef();
 	const { toggleSelection } = useDispatch( blockEditorStore );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
@@ -401,12 +403,15 @@ const SiteLogo = ( {
 				shouldShowCropAndDimensions && (
 					<BlockControls group="block">
 						<ToolbarButton
+							ref={ cropButtonRef }
 							onClick={
 								openMediaEditorModal && logoId
 									? () =>
 											openMediaEditorModal( {
 												id: logoId,
 												onUpdate: handleMediaUpdate,
+												onClose: () =>
+													cropButtonRef.current?.focus(),
 											} )
 									: () => setIsEditingImage( true )
 							}