@wordpress/block-library 9.33.6 → 9.33.7

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 ? (
+							<MissingEntityHelpText
+								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
+								}
 							/>
 						)
 					}
@@ -266,3 +335,32 @@ function BindingHelpText( { type, kind } ) {
 		entityType
 	);
 }
+
+/**
+ * Component to display error help text for missing entity bindings.
+ *
+ * @param {Object} props      - Component props
+ * @param {string} props.id   - ID for the help text element (for aria-describedby)
+ * @param {string} props.type - The entity type
+ * @param {string} props.kind - The entity kind
+ * @return {JSX.Element} Error help text component
+ */
+function MissingEntityHelpText( { id, type, kind } ) {
+	const entityType = getEntityTypeName( type, kind );
+	return (
+		<span
+			id={ id }
+			className="navigation-link-control__error-text"
+			role="alert"
+			aria-live="polite"
+		>
+			{ sprintf(
+				/* translators: %s is the entity type (e.g., "page", "post", "category") */
+				__(
+					'Synced %s is missing. Please update or remove this link.'
+				),
+				entityType
+			) }
+		</span>
+	);
+}

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', () => {

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

@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { useCallback } from '@wordpress/element';
-import { useBlockBindingsUtils } from '@wordpress/block-editor';
+import {
+	useBlockBindingsUtils,
+	useBlockEditingMode,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Builds entity binding configuration for navigation link URLs.
@@ -16,7 +21,7 @@ import { useBlockBindingsUtils } from '@wordpress/block-editor';
  * @throws {Error} If kind is not 'post-type' or 'taxonomy'
  */
 export function buildNavigationLinkEntityBinding( kind ) {
-	// Validate kind parameter exists
+	// Validate kind parameter exists.
 	if ( kind === undefined ) {
 		throw new Error(
 			'buildNavigationLinkEntityBinding requires a kind parameter. ' +
@@ -24,7 +29,7 @@ export function buildNavigationLinkEntityBinding( kind ) {
 		);
 	}
 
-	// Validate kind parameter value
+	// Validate kind parameter value.
 	if ( kind !== 'post-type' && kind !== 'taxonomy' ) {
 		throw new Error(
 			`Invalid kind "${ kind }" provided to buildNavigationLinkEntityBinding. ` +
@@ -57,7 +62,8 @@ export function buildNavigationLinkEntityBinding( kind ) {
  */
 export function useEntityBinding( { clientId, attributes } ) {
 	const { updateBlockBindings } = useBlockBindingsUtils( clientId );
-	const { metadata, id, kind } = attributes;
+	const { metadata, id, kind, type } = attributes;
+	const blockEditingMode = useBlockEditingMode();
 
 	const hasUrlBinding = !! metadata?.bindings?.url && !! id;
 	const expectedSource =
@@ -65,6 +71,47 @@ export function useEntityBinding( { clientId, attributes } ) {
 	const hasCorrectBinding =
 		hasUrlBinding && metadata?.bindings?.url?.source === expectedSource;
 
+	// Check if the bound entity is available (not deleted).
+	const isBoundEntityAvailable = useSelect(
+		( select ) => {
+			// First check: metadata/binding must exist
+			if ( ! hasCorrectBinding || ! id ) {
+				return false;
+			}
+
+			const isPostType = kind === 'post-type';
+			const isTaxonomy = kind === 'taxonomy';
+
+			// Only check entity availability for post types and taxonomies.
+			if ( ! isPostType && ! isTaxonomy ) {
+				return false;
+			}
+
+			// Skip check in disabled contexts to avoid unnecessary requests.
+			if ( blockEditingMode === 'disabled' ) {
+				return true; // Assume available in disabled contexts.
+			}
+
+			// Second check: entity must exist
+			const { getEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+
+			// Use the correct entity type based on kind.
+			const entityType = isTaxonomy ? 'taxonomy' : 'postType';
+			const entityRecord = getEntityRecord( entityType, type, id );
+			const hasResolved = hasFinishedResolution( 'getEntityRecord', [
+				entityType,
+				type,
+				id,
+			] );
+
+			// If resolution has finished and entityRecord is undefined, the entity was deleted.
+			// Return true if entity exists, false if deleted.
+			return hasResolved ? entityRecord !== undefined : true;
+		},
+		[ kind, type, id, hasCorrectBinding, blockEditingMode ]
+	);
+
 	const clearBinding = useCallback( () => {
 		if ( hasUrlBinding ) {
 			updateBlockBindings( { url: undefined } );
@@ -73,11 +120,11 @@ export function useEntityBinding( { clientId, attributes } ) {
 
 	const createBinding = useCallback(
 		( updatedAttributes ) => {
-			// Use updated attributes if provided, otherwise fall back to closure attributes
-			// updatedAttributes needed to access the most up-to-date data when called synchronously
+			// Use updated attributes if provided, otherwise fall back to closure attributes.
+			// updatedAttributes needed to access the most up-to-date data when called synchronously.
 			const kindToUse = updatedAttributes?.kind ?? kind;
 
-			// Avoid creating binding if no kind is provided
+			// Avoid creating binding if no kind is provided.
 			if ( ! kindToUse ) {
 				return;
 			}
@@ -91,14 +138,15 @@ export function useEntityBinding( { clientId, attributes } ) {
 					'Failed to create entity binding:',
 					error.message
 				);
-				// Don't create binding if validation fails
+				// Don't create binding if validation fails.
 			}
 		},
-		[ updateBlockBindings, kind, id ]
+		[ updateBlockBindings, kind ]
 	);
 
 	return {
 		hasUrlBinding: hasCorrectBinding,
+		isBoundEntityAvailable,
 		clearBinding,
 		createBinding,
 	};

package/src/paragraph/index.js

@@ -13,6 +13,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -54,6 +55,7 @@ export const settings = {
 	},
 	edit,
 	save,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/paragraph/variations.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Path, SVG } from '@wordpress/primitives';
+import { paragraph } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'paragraph',
+		title: __( 'Paragraph' ),
+		description: __(
+			'Start with the basic building block of all narrative.'
+		),
+		isDefault: true,
+		scope: [ 'block', 'inserter', 'transform' ],
+		attributes: { fitText: undefined },
+		icon: paragraph,
+	},
+	// 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-paragraph',
+		title: __( 'Stretchy Paragraph' ),
+		description: __( 'Paragraph that resizes to fit its container.' ),
+		icon: (
+			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<Path d="M3 9c0 2.8 2.2 5 5 5v-.2V20h1.5V5.5H12V20h1.5V5.5h3V4H8C5.2 4 3 6.2 3 9Zm16.2-.2v1.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;