@wordpress/block-library 9.33.6 → 9.33.8

package/src/heading/variations.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Path, SVG } from '@wordpress/primitives';
+import { heading } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'heading',
+		title: __( 'Heading' ),
+		description: __(
+			'Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.'
+		),
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		attributes: { fitText: undefined },
+		icon: heading,
+	},
+	// There is a hardcoded workaround in packages/block-editor/src/store/selectors.js
+	// to make Stretchy variations appear as the last of their sections in the inserter.
+	{
+		name: 'stretchy-heading',
+		title: __( 'Stretchy Heading' ),
+		description: __( 'Heading that resizes to fit its container.' ),
+		icon: (
+			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<Path d="m3 18.6 6-4.7 6 4.7V5H3v13.6Zm16.2-9.8v1.5h2.2L17.7 14l1.1 1.1 3.7-3.7v2.2H24V8.8h-4.8Z" />
+			</SVG>
+		),
+		attributes: { fitText: true },
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes.fitText === true,
+	},
+];
+
+export default variations;

package/src/navigation-link/edit.js

@@ -8,9 +8,13 @@ import clsx from 'clsx';
  */
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import {
+	ToolbarButton,
+	ToolbarGroup,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	BlockControls,
 	InspectorControls,
@@ -26,13 +30,19 @@ import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { useMergeRefs, usePrevious } from '@wordpress/compose';
+import { useMergeRefs, usePrevious, useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { getColors } from '../navigation/edit/utils';
-import { Controls, LinkUI, updateAttributes, useEntityBinding } from './shared';
+import {
+	Controls,
+	LinkUI,
+	updateAttributes,
+	useEntityBinding,
+	MissingEntityHelpText,
+} from './shared';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
 const NESTING_BLOCK_NAMES = [
@@ -97,21 +107,35 @@ const useIsInvalidLink = ( kind, type, id, enabled ) => {
 	const hasId = Number.isInteger( id );
 	const blockEditingMode = useBlockEditingMode();
 
-	const postStatus = useSelect(
+	const { postStatus, isDeleted } = useSelect(
 		( select ) => {
 			if ( ! isPostType ) {
-				return null;
+				return { postStatus: null, isDeleted: false };
 			}
 
 			// Fetching the posts status is an "expensive" operation. Especially for sites with large navigations.
 			// When the block is rendered in a template or other disabled contexts we can skip this check in order
 			// to avoid all these additional requests that don't really add any value in that mode.
 			if ( blockEditingMode === 'disabled' || ! enabled ) {
-				return null;
+				return { postStatus: null, isDeleted: false };
 			}
 
-			const { getEntityRecord } = select( coreStore );
-			return getEntityRecord( 'postType', type, id )?.status;
+			const { getEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const entityRecord = getEntityRecord( 'postType', type, id );
+			const hasResolved = hasFinishedResolution( 'getEntityRecord', [
+				'postType',
+				type,
+				id,
+			] );
+
+			// If resolution has finished and entityRecord is undefined, the entity was deleted.
+			const deleted = hasResolved && entityRecord === undefined;
+
+			return {
+				postStatus: entityRecord?.status,
+				isDeleted: deleted,
+			};
 		},
 		[ isPostType, blockEditingMode, enabled, type, id ]
 	);
@@ -121,11 +145,13 @@ const useIsInvalidLink = ( kind, type, id, enabled ) => {
 	// 2. It has an id.
 	// 3. It's neither null, nor undefined, as valid items might be either of those while loading.
 	// If those conditions are met, check if
-	// 1. The post status is published.
-	// 2. The Navigation Link item has no label.
+	// 1. The post status is trash (trashed).
+	// 2. The entity doesn't exist (deleted).
 	// If either of those is true, invalidate.
 	const isInvalid =
-		isPostType && hasId && postStatus && 'trash' === postStatus;
+		isPostType &&
+		hasId &&
+		( isDeleted || ( postStatus && 'trash' === postStatus ) );
 	const isDraft = 'draft' === postStatus;
 
 	return [ isInvalid, isDraft ];
@@ -248,7 +274,12 @@ export default function NavigationLinkEdit( {
 	const { getBlocks } = useSelect( blockEditorStore );
 
 	// URL binding logic
-	const { clearBinding, createBinding } = useEntityBinding( {
+	const {
+		clearBinding,
+		createBinding,
+		hasUrlBinding,
+		isBoundEntityAvailable,
+	} = useEntityBinding( {
 		clientId,
 		attributes,
 	} );
@@ -373,6 +404,12 @@ export default function NavigationLinkEdit( {
 		}
 	}
 
+	const instanceId = useInstanceId( NavigationLinkEdit );
+	const hasMissingEntity = hasUrlBinding && ! isBoundEntityAvailable;
+	const missingEntityDescriptionId = hasMissingEntity
+		? sprintf( 'navigation-link-edit-%d-desc', instanceId )
+		: undefined;
+
 	const blockProps = useBlockProps( {
 		ref: useMergeRefs( [ setPopoverAnchor, listItemRef ] ),
 		className: clsx( 'wp-block-navigation-item', {
@@ -386,6 +423,8 @@ export default function NavigationLinkEdit( {
 			[ getColorClassName( 'background-color', backgroundColor ) ]:
 				!! backgroundColor,
 		} ),
+		'aria-describedby': missingEntityDescriptionId,
+		'aria-invalid': hasMissingEntity,
 		style: {
 			color: ! textColor && customTextColor,
 			backgroundColor: ! backgroundColor && customBackgroundColor,
@@ -405,14 +444,23 @@ export default function NavigationLinkEdit( {
 		}
 	);
 
-	if ( ! url || isInvalid || isDraft ) {
+	if (
+		! url ||
+		isInvalid ||
+		isDraft ||
+		( hasUrlBinding && ! isBoundEntityAvailable )
+	) {
 		blockProps.onClick = () => {
 			setIsLinkOpen( true );
 		};
 	}
 
 	const classes = clsx( 'wp-block-navigation-item__content', {
-		'wp-block-navigation-link__placeholder': ! url || isInvalid || isDraft,
+		'wp-block-navigation-link__placeholder':
+			! url ||
+			isInvalid ||
+			isDraft ||
+			( hasUrlBinding && ! isBoundEntityAvailable ),
 	} );
 
 	const missingText = getMissingText( type );
@@ -452,6 +500,11 @@ export default function NavigationLinkEdit( {
 				/>
 			</InspectorControls>
 			<div { ...blockProps }>
+				{ hasMissingEntity && (
+					<VisuallyHidden id={ missingEntityDescriptionId }>
+						<MissingEntityHelpText type={ type } kind={ kind } />
+					</VisuallyHidden>
+				) }
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<a className={ classes }>
 					{ /* eslint-enable */ }
@@ -531,9 +584,10 @@ export default function NavigationLinkEdit( {
 							link={ attributes }
 							onClose={ () => {
 								setIsLinkOpen( false );
-								// If there is no link then remove the auto-inserted block.
+								// If there is no link and no binding, remove the auto-inserted block.
 								// This avoids empty blocks which can provided a poor UX.
-								if ( ! url ) {
+								// Don't remove if binding exists (even if entity is unavailable) so user can fix it.
+								if ( ! url && ! hasUrlBinding ) {
 									onReplace( [] );
 								} else if ( isNewLink.current ) {
 									// If we just created a new link, select it

package/src/navigation-link/editor.scss

@@ -143,3 +143,10 @@
 		text-transform: uppercase;
 	}
 }
+
+/**
+ * Error text styling for missing entity help text.
+ */
+.navigation-link-control__error-text {
+	color: $alert-red;
+}

package/src/navigation-link/link-ui/index.js

@@ -26,6 +26,7 @@ import { useInstanceId } from '@wordpress/compose';
  */
 import { LinkUIPageCreator } from './page-creator';
 import LinkUIBlockInserter from './block-inserter';
+import { useEntityBinding } from '../shared/use-entity-binding';
 
 /**
  * Given the Link block's type attribute, return the query params to give to
@@ -66,7 +67,8 @@ export function getSuggestionsQuery( type, kind ) {
 }
 
 function UnforwardedLinkUI( props, ref ) {
-	const { label, url, opensInNewTab, type, kind, id, metadata } = props.link;
+	const { label, url, opensInNewTab, type, kind, id } = props.link;
+	const { clientId } = props;
 	const postType = type || 'page';
 
 	const [ addingBlock, setAddingBlock ] = useState( false );
@@ -78,12 +80,11 @@ function UnforwardedLinkUI( props, ref ) {
 		name: postType,
 	} );
 
-	// Check if there's a URL binding with the new binding sources
-	// Only enable handleEntities when there's actually a binding present
-	const hasUrlBinding =
-		( metadata?.bindings?.url?.source === 'core/post-data' ||
-			metadata?.bindings?.url?.source === 'core/term-data' ) &&
-		!! id;
+	// Use the entity binding hook to get binding status
+	const { isBoundEntityAvailable } = useEntityBinding( {
+		clientId,
+		attributes: props.link,
+	} );
 
 	// Memoize link value to avoid overriding the LinkControl's internal state.
 	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/50976#issuecomment-1568226407.
@@ -152,7 +153,7 @@ function UnforwardedLinkUI( props, ref ) {
 						onChange={ props.onChange }
 						onRemove={ props.onRemove }
 						onCancel={ props.onCancel }
-						handleEntities={ hasUrlBinding }
+						handleEntities={ isBoundEntityAvailable }
 						renderControlBottom={ () => {
 							// Don't show the tools when there is submitted link (preview state).
 							if ( link?.url?.length ) {

package/src/navigation-link/shared/controls.js

@@ -11,7 +11,7 @@ import {
 	TextareaControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
+import { useRef, useEffect, useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { safeDecodeURI } from '@wordpress/url';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
@@ -72,19 +72,31 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 	const { label, url, description, rel, opensInNewTab } = attributes;
 	const lastURLRef = useRef( url );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const urlInputRef = useRef();
+	const shouldFocusURLInputRef = useRef( false );
 	const inputId = useInstanceId( Controls, 'link-input' );
 	const helpTextId = `${ inputId }__help`;
 
+	// Local state to control the input value
+	const [ inputValue, setInputValue ] = useState( url );
+
+	// Sync local state when url prop changes (e.g., from undo/redo or external updates)
+	useEffect( () => {
+		setInputValue( url );
+		lastURLRef.current = url;
+	}, [ url ] );
+
 	// Use the entity binding hook internally
-	const { hasUrlBinding, clearBinding } = useEntityBinding( {
-		clientId,
-		attributes,
-	} );
+	const { hasUrlBinding, isBoundEntityAvailable, clearBinding } =
+		useEntityBinding( {
+			clientId,
+			attributes,
+		} );
 
 	// Get direct store dispatch to bypass setBoundAttributes wrapper
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const editBoundLink = () => {
+	const unsyncBoundLink = () => {
 		// Clear the binding first
 		clearBinding();
 
@@ -93,9 +105,22 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 		// setAttributes is actually setBoundAttributes, a wrapper function that
 		// processes attributes through the binding system.
 		// See: packages/block-editor/src/components/block-edit/edit.js
-		updateBlockAttributes( clientId, { url: '', id: undefined } );
+		updateBlockAttributes( clientId, {
+			url: lastURLRef.current, // set the lastURLRef as the new editable value so we avoid bugs from empty link states
+			id: undefined,
+		} );
 	};
 
+	useEffect( () => {
+		// Only want to focus the input if the url is not bound to an entity.
+		if ( ! hasUrlBinding && shouldFocusURLInputRef.current ) {
+			// focuses and highlights the url input value, giving the user
+			// the ability to delete the value quickly or edit it.
+			urlInputRef.current?.select();
+		}
+		shouldFocusURLInputRef.current = false;
+	}, [ hasUrlBinding ] );
+
 	return (
 		<ToolsPanel
 			label={ __( 'Settings' ) }
@@ -135,56 +160,100 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 				isShownByDefault
 			>
 				<InputControl
+					ref={ urlInputRef }
 					__nextHasNoMarginBottom
 					__next40pxDefaultSize
 					id={ inputId }
 					label={ __( 'Link' ) }
-					value={ url ? safeDecodeURI( url ) : '' }
-					onChange={ ( urlValue ) => {
-						if ( hasUrlBinding ) {
-							return; // Prevent editing when URL is bound
+					value={ ( () => {
+						if ( hasUrlBinding && ! isBoundEntityAvailable ) {
+							return '';
 						}
-						setAttributes( {
-							url: encodeURI( safeDecodeURI( urlValue ) ),
-						} );
-					} }
+						return inputValue ? safeDecodeURI( inputValue ) : '';
+					} )() }
 					autoComplete="off"
 					type="url"
 					disabled={ hasUrlBinding }
+					aria-invalid={
+						hasUrlBinding && ! isBoundEntityAvailable
+							? 'true'
+							: undefined
+					}
+					aria-describedby={ helpTextId }
+					className={
+						hasUrlBinding && ! isBoundEntityAvailable
+							? 'navigation-link-control__input-with-error-suffix'
+							: undefined
+					}
+					onChange={ ( newValue ) => {
+						if ( isBoundEntityAvailable ) {
+							return;
+						}
+
+						// Defer updating the url attribute until onBlur to prevent the canvas from
+						// treating a temporary empty value as a committed value, which replaces the
+						// label with placeholder text.
+						setInputValue( newValue );
+					} }
 					onFocus={ () => {
-						if ( hasUrlBinding ) {
+						if ( isBoundEntityAvailable ) {
 							return;
 						}
 						lastURLRef.current = url;
 					} }
 					onBlur={ () => {
-						if ( hasUrlBinding ) {
+						if ( isBoundEntityAvailable ) {
 							return;
 						}
+
+						const finalValue = ! inputValue
+							? lastURLRef.current
+							: inputValue;
+
+						// Update local state immediately so input reflects the reverted value if the value was cleared
+						setInputValue( finalValue );
+
 						// Defer the updateAttributes call to ensure entity connection isn't severed by accident.
-						updateAttributes(
-							{ url: ! url ? lastURLRef.current : url },
-							setAttributes,
-							{ ...attributes, url: lastURLRef.current }
-						);
+						updateAttributes( { url: finalValue }, setAttributes, {
+							...attributes,
+							url: lastURLRef.current,
+						} );
 					} }
 					help={
-						hasUrlBinding && (
-							<BindingHelpText
+						hasUrlBinding && ! isBoundEntityAvailable ? (
+							<MissingEntityHelp
+								id={ helpTextId }
 								type={ attributes.type }
 								kind={ attributes.kind }
 							/>
+						) : (
+							isBoundEntityAvailable && (
+								<BindingHelpText
+									type={ attributes.type }
+									kind={ attributes.kind }
+								/>
+							)
 						)
 					}
 					suffix={
 						hasUrlBinding && (
 							<Button
 								icon={ unlinkIcon }
-								onClick={ editBoundLink }
+								onClick={ () => {
+									unsyncBoundLink();
+									// Focus management to send focus to the URL input
+									// on next render after disabled state is removed.
+									shouldFocusURLInputRef.current = true;
+								} }
 								aria-describedby={ helpTextId }
 								showTooltip
 								label={ __( 'Unsync and edit' ) }
 								__next40pxDefaultSize
+								className={
+									hasUrlBinding && ! isBoundEntityAvailable
+										? 'navigation-link-control__error-suffix-button'
+										: undefined
+								}
 							/>
 						)
 					}
@@ -258,7 +327,7 @@ export function Controls( { attributes, setAttributes, clientId } ) {
  * @param {string} props.kind - The entity kind
  * @return {string} Help text for the bound URL
  */
-function BindingHelpText( { type, kind } ) {
+export function BindingHelpText( { type, kind } ) {
 	const entityType = getEntityTypeName( type, kind );
 	return sprintf(
 		/* translators: %s is the entity type (e.g., "page", "post", "category") */
@@ -266,3 +335,28 @@ function BindingHelpText( { type, kind } ) {
 		entityType
 	);
 }
+
+/**
+ * Component to display error help text for missing entity bindings.
+ *
+ * @param {Object} props      - Component props
+ * @param {string} props.type - The entity type
+ * @param {string} props.kind - The entity kind
+ * @return {JSX.Element} Error help text component
+ */
+export function MissingEntityHelpText( { type, kind } ) {
+	const entityType = getEntityTypeName( type, kind );
+	return sprintf(
+		/* translators: %s is the entity type (e.g., "page", "post", "category") */
+		__( 'Synced %s is missing. Please update or remove this link.' ),
+		entityType
+	);
+}
+
+function MissingEntityHelp( { id, type, kind } ) {
+	return (
+		<span id={ id } className="navigation-link-control__error-text">
+			<MissingEntityHelpText type={ type } kind={ kind } />
+		</span>
+	);
+}

package/src/navigation-link/shared/index.js

@@ -5,7 +5,7 @@
  * to reduce code duplication and ensure consistent behavior.
  */
 
-export { Controls } from './controls';
+export { Controls, BindingHelpText, MissingEntityHelpText } from './controls';
 export { updateAttributes } from './update-attributes';
 export {
 	useEntityBinding,

package/src/navigation-link/shared/test/controls.js

@@ -6,6 +6,7 @@
  * External dependencies
  */
 import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -27,6 +28,7 @@ jest.mock( '../../../utils/hooks', () => ( {
 jest.mock( '../use-entity-binding', () => ( {
 	useEntityBinding: jest.fn( () => ( {
 		hasUrlBinding: false,
+		isBoundEntityAvailable: false,
 		clearBinding: jest.fn(),
 	} ) ),
 } ) );
@@ -95,18 +97,22 @@ describe( 'Controls', () => {
 		expect( urlInput.value ).toBe( 'https://example.com/test page' );
 	} );
 
-	it( 'encodes URL values when changed', () => {
+	it( 'calls updateAttributes with new URL on blur', async () => {
+		const user = userEvent.setup();
 		render( <Controls { ...defaultProps } /> );
 
 		const urlInput = screen.getByLabelText( 'Link' );
 
-		fireEvent.change( urlInput, {
-			target: { value: 'https://example.com/test page' },
-		} );
+		await user.click( urlInput );
+		await user.clear( urlInput );
+		await user.type( urlInput, 'https://example.com/test page' );
+		await user.tab();
 
-		expect( defaultProps.setAttributes ).toHaveBeenCalledWith( {
-			url: 'https://example.com/test%20page',
-		} );
+		expect( mockUpdateAttributes ).toHaveBeenCalledWith(
+			{ url: 'https://example.com/test page' },
+			defaultProps.setAttributes,
+			{ ...defaultProps.attributes, url: 'https://example.com' }
+		);
 	} );
 
 	it( 'calls updateAttributes on URL blur', () => {
@@ -143,11 +149,11 @@ describe( 'Controls', () => {
 			target: { value: 'https://new.com' },
 		} );
 
-		// Blur should call updateAttributes with the current URL (since url exists)
+		// Blur should call updateAttributes with the new URL value from the input
 		fireEvent.blur( urlInput );
 
 		expect( mockUpdateAttributes ).toHaveBeenCalledWith(
-			{ url: 'https://different.com' }, // Current URL from attributes (not input value)
+			{ url: 'https://new.com' }, // New URL from input value
 			defaultProps.setAttributes,
 			{
 				...propsWithDifferentUrl.attributes,
@@ -197,6 +203,7 @@ describe( 'Controls', () => {
 			const { useEntityBinding } = require( '../use-entity-binding' );
 			useEntityBinding.mockReturnValue( {
 				hasUrlBinding: true,
+				isBoundEntityAvailable: true,
 				clearBinding: jest.fn(),
 			} );
 
@@ -220,6 +227,7 @@ describe( 'Controls', () => {
 			const { useEntityBinding } = require( '../use-entity-binding' );
 			useEntityBinding.mockReturnValue( {
 				hasUrlBinding: true,
+				isBoundEntityAvailable: true,
 				clearBinding: jest.fn(),
 			} );
 
@@ -257,6 +265,7 @@ describe( 'Controls', () => {
 			const { useEntityBinding } = require( '../use-entity-binding' );
 			useEntityBinding.mockReturnValue( {
 				hasUrlBinding: true,
+				isBoundEntityAvailable: true,
 				clearBinding: jest.fn(),
 			} );
 
@@ -280,6 +289,7 @@ describe( 'Controls', () => {
 			const { useEntityBinding } = require( '../use-entity-binding' );
 			useEntityBinding.mockReturnValue( {
 				hasUrlBinding: true,
+				isBoundEntityAvailable: true,
 				clearBinding: jest.fn(),
 			} );
 

package/src/navigation-link/shared/test/use-entity-binding.js

@@ -18,12 +18,23 @@ import {
 // Mock the entire @wordpress/block-editor module
 jest.mock( '@wordpress/block-editor', () => ( {
 	useBlockBindingsUtils: jest.fn(),
+	useBlockEditingMode: jest.fn(),
 } ) );
 
+// Mock useSelect specifically to avoid needing to set up full data store
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	const mock = jest.fn();
+	return mock;
+} );
+
 /**
  * WordPress dependencies
  */
-import { useBlockBindingsUtils } from '@wordpress/block-editor';
+import {
+	useBlockBindingsUtils,
+	useBlockEditingMode,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 
 describe( 'useEntityBinding', () => {
 	const mockUpdateBlockBindings = jest.fn();
@@ -33,6 +44,8 @@ describe( 'useEntityBinding', () => {
 		useBlockBindingsUtils.mockReturnValue( {
 			updateBlockBindings: mockUpdateBlockBindings,
 		} );
+		useBlockEditingMode.mockReturnValue( 'default' );
+		useSelect.mockReturnValue( true );
 	} );
 
 	describe( 'hasUrlBinding', () => {