@wordpress/block-library 9.45.1-next.v.202605131032.0 → 9.47.0

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

@@ -147,11 +147,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 +165,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 +255,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 +287,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 +324,7 @@ export function useOpenImageMediaEditorModal( { attributes, setAttributes } ) {
 		const cachedAttachmentRecord = getCachedAttachmentRecord( id );
 		const fallbackAttachmentRecord =
 			getAttachmentFallbackForEmptyBlockMetadata(
-				blockMetadataRef.current
+				blockAttributesRef.current
 			);
 		const resolvedAttachmentRecord = hasKnownAttachmentMetadata(
 			cachedAttachmentRecord

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(

package/src/navigation-link/shared/test/use-handle-link-change.test.js

@@ -423,6 +423,51 @@ describe( 'useHandleLinkChange', () => {
 				} )
 			);
 		} );
+
+		it( 'should update text when editing text and changing a bound entity link to a custom URL in the link editing UI', () => {
+			useEntityBinding.mockReturnValue( {
+				hasUrlBinding: true,
+				createBinding: mockCreateBinding,
+				clearBinding: mockClearBinding,
+			} );
+
+			const attributes = {
+				id: 456,
+				url: 'https://example.com/my-page',
+				label: 'My Page',
+				kind: 'post-type',
+				type: 'page',
+			};
+
+			const { result } = renderHook( () =>
+				useHandleLinkChange( {
+					clientId,
+					attributes,
+					setAttributes: mockSetAttributes,
+					allowTextUpdate: true,
+				} )
+			);
+
+			const updatedLink = {
+				url: 'https://external-site.com',
+				title: 'Updated Navigation Text',
+			};
+
+			result.current( updatedLink );
+
+			expect( mockClearBinding ).toHaveBeenCalled();
+			expect( mockUpdateBlockAttributes ).toHaveBeenCalledWith(
+				clientId,
+				expect.objectContaining( {
+					url: 'https://external-site.com',
+					kind: 'custom',
+					type: 'custom',
+					id: undefined,
+					label: 'Updated Navigation Text',
+				} )
+			);
+			expect( updateAttributes ).not.toHaveBeenCalled();
+		} );
 	} );
 
 	describe( 'updating existing links', () => {
@@ -503,6 +548,87 @@ describe( 'useHandleLinkChange', () => {
 			);
 		} );
 
+		it( 'should preserve label when changing the link without editing text in the link editing UI', () => {
+			const attributes = {
+				id: 123,
+				url: 'https://example.com/page',
+				label: 'Custom Label',
+				kind: 'post-type',
+				type: 'page',
+			};
+
+			const { result } = renderHook( () =>
+				useHandleLinkChange( {
+					clientId,
+					attributes,
+					setAttributes: mockSetAttributes,
+					allowTextUpdate: true,
+				} )
+			);
+
+			const updatedLink = {
+				id: 456,
+				url: 'https://example.com/new-page',
+				title: 'Custom Label',
+				kind: 'post-type',
+				type: 'page',
+			};
+
+			result.current( updatedLink );
+
+			expect( updateAttributes ).toHaveBeenCalledWith(
+				expect.not.objectContaining( {
+					title: 'Custom Label',
+				} ),
+				mockSetAttributes,
+				attributes
+			);
+			expect( mockUpdateBlockAttributes ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should include title when editing text and changing the entity link in the link editing UI', () => {
+			const attributes = {
+				id: 123,
+				url: 'https://example.com/page',
+				label: 'Sample Page',
+				kind: 'post-type',
+				type: 'page',
+			};
+
+			const { result } = renderHook( () =>
+				useHandleLinkChange( {
+					clientId,
+					attributes,
+					setAttributes: mockSetAttributes,
+					allowTextUpdate: true,
+				} )
+			);
+
+			const updatedLink = {
+				id: 456,
+				url: 'https://example.com/new-page',
+				title: 'Updated Navigation Text',
+				kind: 'post-type',
+				type: 'page',
+			};
+
+			result.current( updatedLink );
+
+			expect( updateAttributes ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					title: 'Updated Navigation Text',
+				} ),
+				mockSetAttributes,
+				attributes
+			);
+			expect( mockUpdateBlockAttributes ).toHaveBeenCalledWith(
+				clientId,
+				{
+					label: 'Updated Navigation Text',
+				}
+			);
+		} );
+
 		it( 'should include title when creating link without existing label', () => {
 			const attributes = {};
 
@@ -606,6 +732,92 @@ describe( 'useHandleLinkChange', () => {
 			);
 		} );
 
+		it( 'should include title when editing text for the same existing entity link', () => {
+			const attributes = {
+				id: 123,
+				url: 'https://example.com/page',
+				label: 'Sample Page',
+				kind: 'post-type',
+				type: 'page',
+			};
+
+			const { result } = renderHook( () =>
+				useHandleLinkChange( {
+					clientId,
+					attributes,
+					setAttributes: mockSetAttributes,
+					allowTextUpdate: true,
+				} )
+			);
+
+			const updatedLink = {
+				id: 123,
+				url: 'https://example.com/page',
+				title: 'Updated Sample Page',
+				kind: 'post-type',
+				type: 'page',
+			};
+
+			result.current( updatedLink );
+
+			expect( updateAttributes ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					title: 'Updated Sample Page',
+				} ),
+				mockSetAttributes,
+				attributes
+			);
+			expect( mockUpdateBlockAttributes ).toHaveBeenCalledWith(
+				clientId,
+				{
+					label: 'Updated Sample Page',
+				}
+			);
+		} );
+
+		it( 'should clear text when the inline link editing UI title is emptied', () => {
+			const attributes = {
+				id: 123,
+				url: 'https://example.com/page',
+				label: 'Sample Page',
+				kind: 'post-type',
+				type: 'page',
+			};
+
+			const { result } = renderHook( () =>
+				useHandleLinkChange( {
+					clientId,
+					attributes,
+					setAttributes: mockSetAttributes,
+					allowTextUpdate: true,
+				} )
+			);
+
+			const updatedLink = {
+				id: 123,
+				url: 'https://example.com/page',
+				title: '',
+				kind: 'post-type',
+				type: 'page',
+			};
+
+			result.current( updatedLink );
+
+			expect( updateAttributes ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					title: '',
+				} ),
+				mockSetAttributes,
+				attributes
+			);
+			expect( mockUpdateBlockAttributes ).toHaveBeenCalledWith(
+				clientId,
+				{
+					label: '',
+				}
+			);
+		} );
+
 		it( 'should update custom link to another custom link', () => {
 			updateAttributes.mockImplementation( ( attrs ) => ( {
 				isEntityLink: false,