@wordpress/block-library 9.34.1-next.2f1c7c01b.0 → 9.35.0

package/src/navigation-link/edit.js

@@ -97,21 +97,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 +135,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 +264,12 @@ export default function NavigationLinkEdit( {
 	const { getBlocks } = useSelect( blockEditorStore );
 
 	// URL binding logic
-	const { clearBinding, createBinding } = useEntityBinding( {
+	const {
+		clearBinding,
+		createBinding,
+		hasUrlBinding,
+		isBoundEntityAvailable,
+	} = useEntityBinding( {
 		clientId,
 		attributes,
 	} );
@@ -405,14 +426,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 );
@@ -531,9 +561,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/index.php

@@ -312,11 +312,50 @@ function build_variation_for_navigation_link( $entity, $kind ) {
 	$title       = '';
 	$description = '';
 
+	// Get default labels based on entity type
+	$default_labels = null;
+	if ( $entity instanceof WP_Post_Type ) {
+		$default_labels = WP_Post_Type::get_default_labels();
+	} elseif ( $entity instanceof WP_Taxonomy ) {
+		$default_labels = WP_Taxonomy::get_default_labels();
+	}
+
+	// Get title and check if it's default
+	$is_default_title = false;
 	if ( property_exists( $entity->labels, 'item_link' ) ) {
 		$title = $entity->labels->item_link;
+		if ( isset( $default_labels['item_link'] ) ) {
+			$is_default_title = in_array( $title, $default_labels['item_link'], true );
+		}
 	}
+
+	// Get description and check if it's default
+	$is_default_description = false;
 	if ( property_exists( $entity->labels, 'item_link_description' ) ) {
 		$description = $entity->labels->item_link_description;
+		if ( isset( $default_labels['item_link_description'] ) ) {
+			$is_default_description = in_array( $description, $default_labels['item_link_description'], true );
+		}
+	}
+
+	// Calculate singular name once (used for both title and description)
+	$singular = isset( $entity->labels->singular_name ) ? $entity->labels->singular_name : ucfirst( $entity->name );
+
+	// Set default title if needed
+	if ( $is_default_title || '' === $title ) {
+		/* translators: %s: Singular label of the entity. */
+		$title = sprintf( __( '%s link' ), $singular );
+	}
+
+	// Default description if needed.
+	// Use a single space character instead of an empty string to prevent fallback to the
+	// block.json default description ("Add a page, link, or another item to your navigation.").
+	// An empty string would be treated as missing and trigger the fallback, while a single
+	// space appears blank in the UI but prevents the fallback behavior.
+	// We avoid generating descriptions like "A link to a %s" to prevent grammatical errors
+	// (e.g., "A link to a event" should be "A link to an event").
+	if ( $is_default_description || '' === $description ) {
+		$description = ' ';
 	}
 
 	$variation = array(
@@ -368,6 +407,7 @@ function build_variation_for_navigation_link( $entity, $kind ) {
  *
  * @param array         $variations Array of registered variations for a block type.
  * @param WP_Block_Type $block_type The full block type object.
+ * @return array Numerically indexed array of block variations.
  */
 function block_core_navigation_link_filter_variations( $variations, $block_type ) {
 	if ( 'core/navigation-link' !== $block_type->name ) {
@@ -375,7 +415,28 @@ function block_core_navigation_link_filter_variations( $variations, $block_type
 	}
 
 	$generated_variations = block_core_navigation_link_build_variations();
-	return array_merge( $variations, $generated_variations );
+
+	/*
+	 * IMPORTANT: Order matters for deduplication.
+	 *
+	 * The variations returned from this filter are bootstrapped to JavaScript and
+	 * processed by the block variations reducer. The reducer uses `getUniqueItemsByName()`
+	 * (packages/blocks/src/store/reducer.js:51-57) which keeps the FIRST variation with
+	 * a given 'name' and discards later duplicates when processing the array in order.
+	 *
+	 * By placing generated variations first in `array_merge()`, the improved
+	 * labels (e.g., "Product link" instead of generic "Post Link") are processed first
+	 * and preserved. The generic incoming variations are then discarded as duplicates.
+	 *
+	 * Why `array_merge()` instead of manual deduplication?
+	 * - Both arrays use numeric indices (0, 1, 2...), so `array_merge()` concatenates
+	 *   and re-indexes them sequentially, preserving order
+	 * - The reducer handles deduplication, so it is not needed here
+	 * - This keeps the PHP code simple and relies on the established JavaScript behavior
+	 *
+	 * See: https://github.com/WordPress/gutenberg/pull/72517
+	 */
+	return array_merge( $generated_variations, $variations );
 }
 
 /**
@@ -419,7 +480,9 @@ function block_core_navigation_link_build_variations() {
 		}
 	}
 
-	return array_merge( $built_ins, $variations );
+	$all_variations = array_merge( $built_ins, $variations );
+
+	return $all_variations;
 }
 
 /**

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

@@ -87,10 +87,11 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 	}, [ 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 );
@@ -111,8 +112,7 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 	};
 
 	useEffect( () => {
-		// Checking for ! hasUrlBinding is a defensive check, as we would
-		// only want to focus the input if the url is not bound to an entity.
+		// 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.
@@ -165,12 +165,28 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 					__next40pxDefaultSize
 					id={ inputId }
 					label={ __( 'Link' ) }
-					value={ inputValue ? safeDecodeURI( inputValue ) : '' }
+					value={ ( () => {
+						if ( hasUrlBinding && ! isBoundEntityAvailable ) {
+							return '';
+						}
+						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 ( hasUrlBinding ) {
+						if ( isBoundEntityAvailable ) {
 							return;
 						}
 
@@ -180,13 +196,13 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 						setInputValue( newValue );
 					} }
 					onFocus={ () => {
-						if ( hasUrlBinding ) {
+						if ( isBoundEntityAvailable ) {
 							return;
 						}
 						lastURLRef.current = url;
 					} }
 					onBlur={ () => {
-						if ( hasUrlBinding ) {
+						if ( isBoundEntityAvailable ) {
 							return;
 						}
 
@@ -204,11 +220,19 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 						} );
 					} }
 					help={
-						hasUrlBinding && (
-							<BindingHelpText
+						hasUrlBinding && ! isBoundEntityAvailable ? (
+							<MissingEntityHelpText
+								id={ helpTextId }
 								type={ attributes.type }
 								kind={ attributes.kind }
 							/>
+						) : (
+							isBoundEntityAvailable && (
+								<BindingHelpText
+									type={ attributes.type }
+									kind={ attributes.kind }
+								/>
+							)
 						)
 					}
 					suffix={
@@ -225,6 +249,11 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 								showTooltip
 								label={ __( 'Unsync and edit' ) }
 								__next40pxDefaultSize
+								className={
+									hasUrlBinding && ! isBoundEntityAvailable
+										? 'navigation-link-control__error-suffix-button'
+										: undefined
+								}
 							/>
 						)
 					}
@@ -306,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

@@ -28,6 +28,7 @@ jest.mock( '../../../utils/hooks', () => ( {
 jest.mock( '../use-entity-binding', () => ( {
 	useEntityBinding: jest.fn( () => ( {
 		hasUrlBinding: false,
+		isBoundEntityAvailable: false,
 		clearBinding: jest.fn(),
 	} ) ),
 } ) );
@@ -202,6 +203,7 @@ describe( 'Controls', () => {
 			const { useEntityBinding } = require( '../use-entity-binding' );
 			useEntityBinding.mockReturnValue( {
 				hasUrlBinding: true,
+				isBoundEntityAvailable: true,
 				clearBinding: jest.fn(),
 			} );
 
@@ -225,6 +227,7 @@ describe( 'Controls', () => {
 			const { useEntityBinding } = require( '../use-entity-binding' );
 			useEntityBinding.mockReturnValue( {
 				hasUrlBinding: true,
+				isBoundEntityAvailable: true,
 				clearBinding: jest.fn(),
 			} );
 
@@ -262,6 +265,7 @@ describe( 'Controls', () => {
 			const { useEntityBinding } = require( '../use-entity-binding' );
 			useEntityBinding.mockReturnValue( {
 				hasUrlBinding: true,
+				isBoundEntityAvailable: true,
 				clearBinding: jest.fn(),
 			} );
 
@@ -285,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/block.json

@@ -8,9 +8,6 @@
 	"keywords": [ "text" ],
 	"textdomain": "default",
 	"attributes": {
-		"align": {
-			"type": "string"
-		},
 		"content": {
 			"type": "rich-text",
 			"source": "rich-text",
@@ -58,6 +55,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalTextDecoration": true,
 			"__experimentalFontStyle": true,