@wordpress/block-library 9.46.0 → 9.48.0

package/src/image/save.js

@@ -37,6 +37,7 @@ export default function save( { attributes } ) {
 		linkTarget,
 		sizeSlug,
 		title,
+		isDecorative,
 		metadata: { bindings = {} } = {},
 	} = attributes;
 
@@ -65,19 +66,45 @@ export default function save( { attributes } ) {
 			src={ url }
 			alt={ alt }
 			className={ imageClasses || undefined }
-			style={ {
-				...borderProps.style,
-				...shadowProps.style,
-				aspectRatio,
-				objectFit: scale,
-				objectPosition:
-					focalPoint && scale
-						? mediaPosition( focalPoint )
-						: undefined,
-				width,
-				height,
-			} }
+			style={ ( () => {
+				const style = {
+					...borderProps.style,
+					...shadowProps.style,
+					aspectRatio,
+					objectFit: scale,
+					objectPosition:
+						focalPoint && scale
+							? mediaPosition( focalPoint )
+							: undefined,
+				};
+				// Only apply dimension styles when a width or height is provided.
+				if ( width !== undefined || height !== undefined ) {
+					// Only apply width when explicitly provided.
+					if ( width === 'auto' ) {
+						style.width = 'auto';
+					} else if ( width !== undefined && width !== null ) {
+						style.width =
+							typeof width === 'number' ? `${ width }px` : width;
+					}
+					// Force height to auto when unspecified to prevent
+					// theme CSS from squishing the image.
+					if (
+						height === 'auto' ||
+						height === undefined ||
+						height === null
+					) {
+						style.height = 'auto';
+					} else {
+						style.height =
+							typeof height === 'number'
+								? `${ height }px`
+								: height;
+					}
+				}
+				return style;
+			} )() }
 			title={ title }
+			role={ isDecorative ? 'none' : undefined }
 		/>
 	);
 

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',
@@ -317,6 +358,66 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		} );
 	} );
 
+	it( 'updates back to the previous attachment from the original modal callback', async () => {
+		const originalAttachment = {
+			id: 1,
+			alt_text: '',
+			caption: { raw: '' },
+		};
+		const croppedAttachment = {
+			id: 2,
+			alt_text: '',
+			caption: { raw: '' },
+		};
+		const deferredAttachment = createDeferred();
+		const registry = createRegistry( {
+			getEntityRecord: ( kind, name, attachmentId ) =>
+				attachmentId === 1 ? originalAttachment : undefined,
+			resolveGetEntityRecord: ( kind, name, attachmentId ) =>
+				attachmentId === 2 ? deferredAttachment.promise : undefined,
+		} );
+		useRegistry.mockReturnValue( registry );
+		const setAttributes = jest.fn();
+		const openMediaEditorModal = jest.fn();
+		mockMediaEditorModalSetting( openMediaEditorModal );
+		const { result } = renderHook(
+			( { attributes } ) =>
+				useOpenImageMediaEditorModal( { attributes, setAttributes } ),
+			{
+				initialProps: {
+					attributes: {
+						id: 1,
+						url: 'original.jpg',
+						alt: '',
+						caption: '',
+					},
+				},
+			}
+		);
+
+		await act( async () => {
+			await result.current();
+		} );
+		const onUpdate = openMediaEditorModal.mock.calls[ 0 ][ 0 ].onUpdate;
+		let updatePromise;
+		await act( async () => {
+			updatePromise = onUpdate( { id: 2, url: 'cropped.jpg' } );
+		} );
+		await act( async () => {
+			await onUpdate( { id: 1, url: 'original.jpg' } );
+		} );
+		await act( async () => {
+			deferredAttachment.resolve( croppedAttachment );
+			await updatePromise;
+		} );
+
+		expect( setAttributes ).toHaveBeenCalledTimes( 1 );
+		expect( setAttributes ).toHaveBeenCalledWith( {
+			id: 1,
+			url: 'original.jpg',
+		} );
+	} );
+
 	it( 'resolves fresh metadata when the new attachment id has an incomplete cached record', async () => {
 		const originalAttachment = {
 			id: 1,

package/src/image/transforms.js

@@ -41,7 +41,7 @@ function getFirstAnchorAttributeFormHTML( html, attributeName ) {
 
 const imageSchema = {
 	img: {
-		attributes: [ 'src', 'alt', 'title' ],
+		attributes: [ 'src', 'alt', 'title', 'width', 'height' ],
 		classes: [
 			'alignleft',
 			'aligncenter',
@@ -52,6 +52,14 @@ const imageSchema = {
 	},
 };
 
+// Read a pixel dimension from an `<img>` HTML attribute and normalise it to
+// the `<value>px` form the Image block stores in its `width` / `height`
+// attributes. Non-integer values (e.g. `50%`) are dropped because the block
+// attribute round-trips through inline styles that expect pixel units.
+function parsePixelDimension( value ) {
+	return value && /^\d+$/.test( value ) ? `${ value }px` : undefined;
+}
+
 const schema = ( { phrasingContentSchema } ) => ( {
 	figure: {
 		require: [ 'img' ],
@@ -77,12 +85,10 @@ const transforms = {
 				node.nodeName === 'FIGURE' && !! node.querySelector( 'img' ),
 			schema,
 			transform: ( node ) => {
+				const img = node.querySelector( 'img' );
 				// Search both figure and image classes. Alignment could be
 				// set on either. ID is set on the image.
-				const className =
-					node.className +
-					' ' +
-					node.querySelector( 'img' ).className;
+				const className = node.className + ' ' + img.className;
 				const alignMatches =
 					/(?:^|\s)align(left|center|right)(?:$|\s)/.exec(
 						className
@@ -108,6 +114,14 @@ const transforms = {
 					anchorElement && anchorElement.className
 						? anchorElement.className
 						: undefined;
+				// Preserve explicit pixel dimensions set on the source `<img>`
+				// (e.g. legacy "Add Media" output: `<img width="77" height="77">`).
+				const width = parsePixelDimension(
+					img.getAttribute( 'width' )
+				);
+				const height = parsePixelDimension(
+					img.getAttribute( 'height' )
+				);
 				const attributes = getBlockAttributes(
 					'core/image',
 					node.outerHTML,
@@ -119,6 +133,8 @@ const transforms = {
 						rel,
 						linkClass,
 						anchor,
+						width,
+						height,
 					}
 				);
 

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.
@@ -147,11 +151,16 @@ export function useOpenImageMediaEditorModal( { attributes, setAttributes } ) {
 			select( blockEditorStore ).getSettings()[ openMediaEditorModalKey ],
 		[]
 	);
-	// Track the block's current alt and caption in a ref so handleMediaUpdate
-	// can read the latest values without being listed as a dependency (which
-	// would recreate the callback and re-register the onUpdate handler on every
-	// keystroke while the modal is open).
-	const blockMetadataRef = useRef( { alt, caption: caption?.toString() } );
+	// Track the block's current attachment and metadata in a ref so
+	// handleMediaUpdate can read the latest values without being listed as
+	// dependencies (which would recreate the callback and re-register the
+	// onUpdate handler on every block change while the modal is open).
+	const blockAttributesRef = useRef( {
+		id,
+		url,
+		alt,
+		caption: caption?.toString(),
+	} );
 	// Snapshot of the attachment's metadata taken just before the modal opens,
 	// used as the baseline for detecting what changed during the editing session.
 	const mediaEditorMetadataBaselineRef = useRef();
@@ -160,8 +169,13 @@ export function useOpenImageMediaEditorModal( { attributes, setAttributes } ) {
 	const mediaEditorMetadataSyncRequestRef = useRef( 0 );
 
 	useEffect( () => {
-		blockMetadataRef.current = { alt, caption: caption?.toString() };
-	}, [ alt, caption ] );
+		blockAttributesRef.current = {
+			id,
+			url,
+			alt,
+			caption: caption?.toString(),
+		};
+	}, [ alt, caption, id, url ] );
 
 	const getCachedAttachmentRecord = useCallback(
 		( attachmentId ) => {
@@ -245,9 +259,16 @@ export function useOpenImageMediaEditorModal( { attributes, setAttributes } ) {
 			const syncRequest = ++mediaEditorMetadataSyncRequestRef.current;
 			const nextAttributes = {};
 
-			if ( newId !== id ) {
+			const currentBlockAttributes = blockAttributesRef.current;
+
+			if ( newId !== currentBlockAttributes.id ) {
 				nextAttributes.id = newId;
-				nextAttributes.url = newUrl ?? url;
+				nextAttributes.url = newUrl ?? currentBlockAttributes.url;
+				blockAttributesRef.current = {
+					...blockAttributesRef.current,
+					id: nextAttributes.id,
+					url: nextAttributes.url,
+				};
 			}
 
 			if ( originalAttachment ) {
@@ -270,27 +291,28 @@ export function useOpenImageMediaEditorModal( { attributes, setAttributes } ) {
 				// has independently customised on the block (i.e. values
 				// that don't match the pre-session attachment metadata)
 				// are left untouched.
+				const latestBlockAttributes = blockAttributesRef.current;
 				const resolvedMetadataAttributes =
 					getSyncedImageBlockAttributes(
-						blockMetadataRef.current,
+						latestBlockAttributes,
 						originalAttachment,
 						resolvedAttachment
 					);
 
 				if ( Object.keys( resolvedMetadataAttributes ).length ) {
 					Object.assign( nextAttributes, resolvedMetadataAttributes );
-					blockMetadataRef.current = {
-						...blockMetadataRef.current,
-						...resolvedMetadataAttributes,
-					};
 				}
 			}
 
 			if ( Object.keys( nextAttributes ).length ) {
+				blockAttributesRef.current = {
+					...blockAttributesRef.current,
+					...nextAttributes,
+				};
 				setAttributes( nextAttributes );
 			}
 		},
-		[ id, resolveFreshAttachmentRecord, setAttributes, url ]
+		[ resolveFreshAttachmentRecord, setAttributes ]
 	);
 
 	const openImageMediaEditorModal = useCallback( async () => {
@@ -306,7 +328,7 @@ export function useOpenImageMediaEditorModal( { attributes, setAttributes } ) {
 		const cachedAttachmentRecord = getCachedAttachmentRecord( id );
 		const fallbackAttachmentRecord =
 			getAttachmentFallbackForEmptyBlockMetadata(
-				blockMetadataRef.current
+				blockAttributesRef.current
 			);
 		const resolvedAttachmentRecord = hasKnownAttachmentMetadata(
 			cachedAttachmentRecord
@@ -324,11 +346,13 @@ export function useOpenImageMediaEditorModal( { attributes, setAttributes } ) {
 		openMediaEditorModal( {
 			id,
 			onUpdate: handleMediaUpdate,
+			onClose,
 		} );
 	}, [
 		getCachedAttachmentRecord,
 		handleMediaUpdate,
 		id,
+		onClose,
 		openMediaEditorModal,
 		resolveAttachmentRecord,
 	] );

package/src/latest-posts/edit.native.js

@@ -17,7 +17,7 @@ import {
 } from '@wordpress/block-editor';
 import apiFetch from '@wordpress/api-fetch';
 import {
-	Icon,
+	Icon as WCIcon,
 	PanelBody,
 	ToggleControl,
 	RangeControl,
@@ -265,7 +265,7 @@ class LatestPostsEdit extends Component {
 			>
 				<View style={ blockStyle }>
 					{ isSelected && this.getInspectorControls() }
-					<Icon icon={ icon } { ...iconStyle } />
+					<WCIcon icon={ icon } { ...iconStyle } />
 					<Text style={ titleStyle }>{ blockTitle }</Text>
 					<Text style={ styles.latestPostBlockSubtitle }>
 						{ __( 'CUSTOMIZE' ) }

package/src/list-item/hooks/use-enter.js

@@ -7,7 +7,10 @@ import {
 	cloneBlock,
 } from '@wordpress/blocks';
 import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
+import {
+	useRefEffect,
+	privateApis as composePrivateApis,
+} from '@wordpress/compose';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -16,6 +19,9 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import useOutdentListItem from './use-outdent-list-item';
+import { unlock } from '../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default function useEnter( props ) {
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
@@ -82,9 +88,13 @@ export default function useEnter( props ) {
 			selectionChange( middle.clientId );
 		}
 
-		element.addEventListener( 'keydown', onKeyDown );
-		return () => {
-			element.removeEventListener( 'keydown', onKeyDown );
-		};
+		// Capture phase so we run before writing-flow's ancestor-bubble
+		// keydown handlers that gate on `event.defaultPrevented`.
+		return subscribeDelegatedListener(
+			element,
+			'keydown',
+			onKeyDown,
+			true
+		);
 	}, [] );
 }

package/src/list-item/hooks/use-space.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { useRefEffect } from '@wordpress/compose';
+import {
+	useRefEffect,
+	privateApis as composePrivateApis,
+} from '@wordpress/compose';
 import { SPACE, TAB } from '@wordpress/keycodes';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -11,6 +14,9 @@ import { useSelect } from '@wordpress/data';
  */
 import useIndentListItem from './use-indent-list-item';
 import useOutdentListItem from './use-outdent-list-item';
+import { unlock } from '../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default function useSpace( clientId ) {
 	const { getSelectionStart, getSelectionEnd, getBlockIndex } =
@@ -55,10 +61,14 @@ export default function useSpace( clientId ) {
 				}
 			}
 
-			element.addEventListener( 'keydown', onKeyDown );
-			return () => {
-				element.removeEventListener( 'keydown', onKeyDown );
-			};
+			// Capture phase so we run before writing-flow's ancestor-bubble
+			// keydown handlers that gate on `event.defaultPrevented`.
+			return subscribeDelegatedListener(
+				element,
+				'keydown',
+				onKeyDown,
+				true
+			);
 		},
 		[ clientId, indentListItem ]
 	);

package/src/list-item/list-style-type.native.js

@@ -6,7 +6,7 @@ import { View, Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -85,7 +85,7 @@ function IconList( { fontSize, color, defaultFontSize, indentationLevel } ) {
 
 	return (
 		<View style={ listStyles }>
-			<Icon icon={ listIcon } size={ iconSize } />
+			<WCIcon icon={ listIcon } size={ iconSize } />
 		</View>
 	);
 }

package/src/media-text/media-container.native.js

@@ -12,7 +12,11 @@ import {
 	requestImageUploadCancelDialog,
 	requestImageFullscreenPreview,
 } from '@wordpress/react-native-bridge';
-import { Icon, Image, IMAGE_DEFAULT_FOCAL_POINT } from '@wordpress/components';
+import {
+	Icon as WCIcon,
+	Image,
+	IMAGE_DEFAULT_FOCAL_POINT,
+} from '@wordpress/components';
 import {
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
@@ -117,7 +121,7 @@ class MediaContainer extends Component {
 								styles.iconRetryVideoDark
 						  );
 
-				return <Icon icon={ SvgIconRetry } { ...iconStyle } />;
+				return <WCIcon icon={ SvgIconRetry } { ...iconStyle } />;
 			case ICON_TYPE.PLACEHOLDER:
 				iconStyle = getStylesFromColorScheme(
 					styles.iconPlaceholder,
@@ -125,7 +129,7 @@ class MediaContainer extends Component {
 				);
 				break;
 		}
-		return <Icon icon={ icon } { ...iconStyle } />;
+		return <WCIcon icon={ icon } { ...iconStyle } />;
 	}
 
 	updateMediaProgress( payload ) {

package/src/missing/edit.native.js

@@ -6,9 +6,8 @@ import { View, Text, TouchableOpacity } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { coreBlocks } from '@wordpress/block-library';
 import { normalizeIconObject, rawHandler, serialize } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -21,6 +20,7 @@ import {
 } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { requestUnsupportedBlockFallback } from '@wordpress/react-native-bridge';
+import { coreBlocks } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
@@ -116,7 +116,7 @@ export class UnsupportedBlockEdit extends Component {
 				accessibilityRole="button"
 				accessibilityHint={ __( 'Tap here to show help' ) }
 			>
-				<Icon
+				<WCIcon
 					className="unsupported-icon-help"
 					label={ __( 'Help icon' ) }
 					icon={ help }
@@ -245,7 +245,7 @@ export class UnsupportedBlockEdit extends Component {
 					{ ! this.canEditUnsupportedBlock() &&
 						this.renderHelpIcon() }
 					<View style={ styles.unsupportedBlockHeader }>
-						<Icon
+						<WCIcon
 							className={ iconClassName }
 							icon={ icon && icon.src ? icon.src : icon }
 							fill={ iconStyle.color }

package/src/missing/test/edit.native.js

@@ -7,7 +7,7 @@ import { Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { BottomSheet, Icon } from '@wordpress/components';
+import { BottomSheet, Icon as WCIcon } from '@wordpress/components';
 import { help, plugins } from '@wordpress/icons';
 import { storeConfig } from '@wordpress/block-editor';
 jest.mock( '@wordpress/block-editor/src/store/selectors' );
@@ -39,7 +39,7 @@ describe( 'Missing block', () => {
 	describe( 'help modal', () => {
 		it( 'renders help icon', () => {
 			const testInstance = getTestComponentWithContent();
-			const icons = testInstance.UNSAFE_getAllByType( Icon );
+			const icons = testInstance.UNSAFE_getAllByType( WCIcon );
 			expect( icons.length ).toBe( 2 );
 			expect( icons[ 0 ].props.icon ).toBe( help );
 		} );
@@ -66,7 +66,7 @@ describe( 'Missing block', () => {
 
 	it( 'renders admin plugins icon', () => {
 		const testInstance = getTestComponentWithContent();
-		const icons = testInstance.UNSAFE_getAllByType( Icon );
+		const icons = testInstance.UNSAFE_getAllByType( WCIcon );
 		expect( icons.length ).toBe( 2 );
 		expect( icons[ 1 ].props.icon ).toBe( plugins );
 	} );

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

@@ -70,8 +70,14 @@ function resolveRecords( registry, menus ) {
 function resolveReadPermission( registry, allowed ) {
 	const dispatch = registry.dispatch( coreStore );
 	dispatch.receiveUserPermission( 'read/postType/wp_navigation', allowed );
-	dispatch.startResolution( 'canUser', [ 'read', BASE_ENTITY ] );
-	dispatch.finishResolution( 'canUser', [ 'read', BASE_ENTITY ] );
+	dispatch.startResolution( 'canUser', [
+		'read',
+		{ kind: 'postType', name: 'wp_navigation' },
+	] );
+	dispatch.finishResolution( 'canUser', [
+		'read',
+		{ kind: 'postType', name: 'wp_navigation' },
+	] );
 }
 
 function resolveReadRecordPermission( registry, ref, allowed ) {

package/src/navigation-link/edit.js

@@ -174,6 +174,7 @@ export default function NavigationLinkEdit( {
 		clientId,
 		attributes,
 		setAttributes,
+		allowTextUpdate: true,
 	} );
 
 	const [ isInvalid, isDraft ] = useIsInvalidLink(