@wordpress/block-library 9.46.0 → 9.48.0

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,

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

@@ -4,6 +4,8 @@
 import { useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { escapeHTML } from '@wordpress/escape-html';
 
 /**
  * Internal dependencies
@@ -16,13 +18,19 @@ import { useEntityBinding } from './use-entity-binding';
  * Manages the transition between entity links and custom links,
  * including proper binding creation and cleanup.
  *
- * @param {Object}   options               - Configuration options
- * @param {string}   options.clientId      - Block client ID
- * @param {Object}   options.attributes    - Current block attributes
- * @param {Function} options.setAttributes - Standard setAttribute function
+ * @param {Object}   options                 - Configuration options
+ * @param {string}   options.clientId        - Block client ID
+ * @param {Object}   options.attributes      - Current block attributes
+ * @param {Function} options.setAttributes   - Standard setAttribute function
+ * @param {boolean}  options.allowTextUpdate - Whether this control can update the link text
  * @return {Function} Callback function to handle link changes
  */
-export function useHandleLinkChange( { clientId, attributes, setAttributes } ) {
+export function useHandleLinkChange( {
+	clientId,
+	attributes,
+	setAttributes,
+	allowTextUpdate = false,
+} ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const { hasUrlBinding, createBinding, clearBinding } = useEntityBinding( {
 		clientId,
@@ -42,12 +50,25 @@ export function useHandleLinkChange( { clientId, attributes, setAttributes } ) {
 				id: updatedLink.id,
 			};
 
-			// Only include title when there's no existing label
-			// This preserves user-customized labels when updating links
-			if ( ! attributes.label || attributes.label === '' ) {
+			const currentText = attributes.label
+				? stripHTML( attributes.label )
+				: '';
+			const updatedText = updatedLink.title ?? '';
+			const hasTextUpdate =
+				allowTextUpdate &&
+				updatedLink.title !== undefined &&
+				updatedText !== currentText;
+			const textUpdateAttributes = hasTextUpdate
+				? { label: escapeHTML( updatedText ) }
+				: {};
+
+			if (
+				! attributes.label ||
+				attributes.label === '' ||
+				hasTextUpdate
+			) {
 				attrs.title = updatedLink.title;
 			}
-
 			// Check if transitioning from entity to custom link
 			const willBeCustomLink = ! updatedLink.id && hasUrlBinding;
 
@@ -62,6 +83,7 @@ export function useHandleLinkChange( { clientId, attributes, setAttributes } ) {
 					kind: 'custom',
 					type: 'custom',
 					id: undefined,
+					...textUpdateAttributes,
 				} );
 			} else {
 				// Normal flow for entity links or unbound custom links
@@ -76,10 +98,15 @@ export function useHandleLinkChange( { clientId, attributes, setAttributes } ) {
 				} else {
 					clearBinding();
 				}
+
+				if ( Object.keys( textUpdateAttributes ).length ) {
+					updateBlockAttributes( clientId, textUpdateAttributes );
+				}
 			}
 		},
 		[
 			attributes,
+			allowTextUpdate,
 			clientId,
 			hasUrlBinding,
 			createBinding,

package/src/navigation-submenu/edit.js

@@ -35,8 +35,8 @@ import { ItemSubmenuIcon } from './icons';
 import {
 	Controls,
 	LinkUI,
-	updateAttributes,
 	useEntityBinding,
+	useHandleLinkChange,
 	useIsInvalidLink,
 	InvalidDraftDisplay,
 	useEnableLinkStatusValidation,
@@ -92,15 +92,17 @@ export default function NavigationSubmenuEdit( {
 		blockEditingMode !== 'default' ? true : submenuVisibility === 'click';
 
 	// URL binding logic
-	const {
-		clearBinding,
-		createBinding,
-		hasUrlBinding,
-		isBoundEntityAvailable,
-		entityRecord,
-	} = useEntityBinding( {
+	const { hasUrlBinding, isBoundEntityAvailable, entityRecord } =
+		useEntityBinding( {
+			clientId,
+			attributes,
+		} );
+
+	const handleLinkChange = useHandleLinkChange( {
 		clientId,
 		attributes,
+		setAttributes,
+		allowTextUpdate: true,
 	} );
 
 	const { __unstableMarkNextChangeAsNotPersistent, replaceBlock } =
@@ -398,26 +400,7 @@ export default function NavigationSubmenuEdit( {
 								setAttributes( { url: '' } );
 								speak( __( 'Link removed.' ), 'assertive' );
 							} }
-							onChange={ ( updatedValue ) => {
-								// updateAttributes determines the final state and returns metadata
-								const {
-									isEntityLink,
-									attributes: updatedAttributes,
-								} = updateAttributes(
-									updatedValue,
-									setAttributes,
-									attributes
-								);
-
-								// Handle URL binding based on the final computed state
-								// Only create bindings for entity links (posts, pages, taxonomies)
-								// Never create bindings for custom links (manual URLs)
-								if ( isEntityLink ) {
-									createBinding( updatedAttributes );
-								} else {
-									clearBinding();
-								}
-							} }
+							onChange={ handleLinkChange }
 						/>
 					) }
 				</ParentElement>

package/src/navigation-submenu/index.php

@@ -9,6 +9,19 @@ require_once __DIR__ . '/navigation-link/shared/item-should-render.php';
 require_once __DIR__ . '/navigation-link/shared/render-submenu-icon.php';
 require_once __DIR__ . '/navigation-link/shared/build-css-font-sizes.php';
 
+/**
+ * Renders the submenu icon SVG for the Navigation Submenu block.
+ *
+ * @since 5.9.0
+ * @deprecated 7.0.0 Use block_core_shared_navigation_render_submenu_icon() instead.
+ *
+ * @return string SVG markup for the submenu icon.
+ */
+function block_core_navigation_submenu_render_submenu_icon() {
+	_deprecated_function( __FUNCTION__, '7.0.0', 'block_core_shared_navigation_render_submenu_icon()' );
+	return block_core_shared_navigation_render_submenu_icon();
+}
+
 /**
  * Returns the submenu visibility value with backward compatibility
  * for the deprecated openSubmenusOnClick attribute.

package/src/paragraph/use-enter.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 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, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -13,6 +16,13 @@ import {
 	getDefaultBlockName,
 } from '@wordpress/blocks';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
+
 export function useOnEnter( props ) {
 	const { batch } = useRegistry();
 	const { moveBlocksToPosition, replaceBlocks, selectionChange } =
@@ -119,9 +129,13 @@ export function useOnEnter( props ) {
 			} );
 		}
 
-		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/post-date/edit.js

@@ -99,11 +99,15 @@ export default function PostDateEdit( props ) {
 
 	const blockEditingMode = useBlockEditingMode();
 
+	const validDatetime = datetime || new Date();
 	let postDate = (
-		<time dateTime={ dateI18n( 'c', datetime ) } ref={ setPopoverAnchor }>
+		<time
+			dateTime={ dateI18n( 'c', validDatetime ) }
+			ref={ setPopoverAnchor }
+		>
 			{ format === 'human-diff'
-				? humanTimeDiff( datetime )
-				: dateI18n( format || siteFormat, datetime ) }
+				? humanTimeDiff( validDatetime )
+				: dateI18n( format || siteFormat, validDatetime ) }
 		</time>
 	);
 

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
@@ -278,7 +283,6 @@ export default function PostFeaturedImageEdit( {
 							}
 						>
 							<ToggleControl
-								__nextHasNoMarginBottom
 								label={ __( 'Make image a link' ) }
 								onChange={ () =>
 									setAttributes( { isLink: ! isLink } )

package/src/search/edit.native.js

@@ -17,7 +17,7 @@ import {
 	PanelBody,
 	SelectControl,
 	ToggleControl,
-	Icon,
+	Icon as WCIcon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { search } from '@wordpress/icons';
@@ -374,7 +374,7 @@ export default function SearchEdit( {
 		return (
 			<View style={ richTextButtonContainerStyle }>
 				{ buttonUseIcon && (
-					<Icon
+					<WCIcon
 						icon={ search }
 						{ ...iconStyles }
 						onLayout={ onLayoutButton }

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

@@ -6,7 +6,7 @@ import { render } from 'test/helpers';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -129,7 +129,7 @@ describe( 'Search Block', () => {
 		} );
 
 		it( 'search button uses icon', () => {
-			const button = instance.UNSAFE_getByType( Icon );
+			const button = instance.UNSAFE_getByType( WCIcon );
 			expect( button ).toBeTruthy();
 		} );
 

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();
 
@@ -116,8 +118,9 @@ const SiteLogo = ( {
 		}
 	}, [ isSelected ] );
 
+	// Always apply modal updates as snackbar Undo may restore the original id.
 	const handleMediaUpdate = ( { id: newId } ) => {
-		if ( typeof newId === 'number' && newId !== logoId ) {
+		if ( typeof newId === 'number' ) {
 			setLogo( newId );
 		}
 	};
@@ -400,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 )
 							}

package/src/social-link/edit.js

@@ -19,7 +19,7 @@ import {
 } from '@wordpress/block-editor';
 import { useState, useRef, createInterpolateElement } from '@wordpress/element';
 import {
-	Icon,
+	Icon as WCIcon,
 	Button,
 	Dropdown,
 	TextControl,
@@ -277,7 +277,7 @@ const SocialLinkEdit = ( {
 				 */
 				/* eslint-disable jsx-a11y/no-redundant-roles */ }
 				<button aria-haspopup="dialog" { ...blockProps } role="button">
-					<Icon icon={ icon } />
+					<WCIcon icon={ icon } />
 					<span
 						className={ clsx( 'wp-block-social-link-label', {
 							'screen-reader-text': ! showLabels,

package/src/tab-list/edit.js

@@ -14,6 +14,8 @@ import { useSelect } from '@wordpress/data';
 import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
 import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
 
+const TAB_LIST_TEMPLATE = [ [ 'core/tab' ], [ 'core/tab' ] ];
+
 function Edit( { clientId } ) {
 	const tabsClientId = useSelect(
 		( select ) =>
@@ -26,6 +28,7 @@ function Edit( { clientId } ) {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/tab' ],
 		orientation: 'horizontal',
+		template: TAB_LIST_TEMPLATE,
 		templateLock: false,
 		renderAppender: false,
 	} );

package/src/tab-panels/edit.js

@@ -7,6 +7,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -14,7 +15,15 @@ import { useSelect } from '@wordpress/data';
 import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
 import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
 
-const TAB_PANELS_TEMPLATE = [ [ 'core/tab-panel', {} ] ];
+/**
+ * Initial template applied only when the block is first inserted (i.e. when
+ * inner blocks are empty). templateLock is false, so this is never applied to
+ * existing blocks that already have tab panels saved.
+ */
+const TAB_PANELS_TEMPLATE = [
+	[ 'core/tab-panel', { label: __( 'Tab' ) } ],
+	[ 'core/tab-panel', { label: __( 'Tab' ) } ],
+];
 
 export default function Edit( { clientId } ) {
 	const blockProps = useBlockProps();

package/src/table/edit.js

@@ -631,6 +631,7 @@ const Cell = memo( function ( {
 			) }
 		>
 			<RichText
+				identifier={ `${ name }.${ rowIndex }.cells.${ columnIndex }.content` }
 				value={ content }
 				onChange={ onChange }
 				onFocus={ () => {