@wordpress/block-library 9.34.1-next.2f1c7c01b.0 → 9.35.1-next.16d95556a.0

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,

package/src/paragraph/deprecated.js

@@ -90,9 +90,62 @@ const migrateCustomColorsAndFontSizes = ( attributes ) => {
 	};
 };
 
+const migrateTextAlign = ( attributes ) => {
+	const { align, ...restAttributes } = attributes;
+	if ( ! align ) {
+		return attributes;
+	}
+	return {
+		...restAttributes,
+		style: {
+			...attributes.style,
+			typography: {
+				...attributes.style?.typography,
+				textAlign: align,
+			},
+		},
+	};
+};
+
 const { style, ...restBlockAttributes } = blockAttributes;
 
 const deprecated = [
+	// Version with `align` attribute.
+	{
+		supports: {
+			className: false,
+			typography: {
+				fontSize: true,
+			},
+		},
+		attributes: blockAttributes,
+		isEligible( attributes ) {
+			return (
+				!! attributes.align ||
+				!! attributes.className?.match(
+					/\bhas-text-align-(left|center|right)\b/
+				)
+			);
+		},
+		save( { attributes } ) {
+			const { align, content, dropCap, direction } = attributes;
+			const className = clsx( {
+				'has-drop-cap':
+					align === ( isRTL() ? 'left' : 'right' ) ||
+					align === 'center'
+						? false
+						: dropCap,
+				[ `has-text-align-${ align }` ]: align,
+			} );
+
+			return (
+				<p { ...useBlockProps.save( { className, dir: direction } ) }>
+					<RichText.Content value={ content } />
+				</p>
+			);
+		},
+		migrate: migrateTextAlign,
+	},
 	// Version without drop cap on aligned text.
 	{
 		supports,
@@ -108,6 +161,7 @@ const deprecated = [
 				type: 'number',
 			},
 		},
+		migrate: migrateTextAlign,
 		save( { attributes } ) {
 			const { align, content, dropCap, direction } = attributes;
 			const className = clsx( {
@@ -140,7 +194,11 @@ const deprecated = [
 				type: 'number',
 			},
 		},
-		migrate: migrateCustomColorsAndFontSizes,
+		migrate( attributes ) {
+			return migrateCustomColorsAndFontSizes(
+				migrateTextAlign( attributes )
+			);
+		},
 		save( { attributes } ) {
 			const {
 				align,
@@ -205,7 +263,11 @@ const deprecated = [
 				type: 'number',
 			},
 		},
-		migrate: migrateCustomColorsAndFontSizes,
+		migrate( attributes ) {
+			return migrateCustomColorsAndFontSizes(
+				migrateTextAlign( attributes )
+			);
+		},
 		save( { attributes } ) {
 			const {
 				align,
@@ -273,7 +335,11 @@ const deprecated = [
 				type: 'string',
 			},
 		},
-		migrate: migrateCustomColorsAndFontSizes,
+		migrate( attributes ) {
+			return migrateCustomColorsAndFontSizes(
+				migrateTextAlign( attributes )
+			);
+		},
 		save( { attributes } ) {
 			const {
 				width,
@@ -363,21 +429,24 @@ const deprecated = [
 			);
 		},
 		migrate( attributes ) {
-			return migrateCustomColorsAndFontSizes( {
-				...attributes,
-				customFontSize: Number.isFinite( attributes.fontSize )
-					? attributes.fontSize
-					: undefined,
-				customTextColor:
-					attributes.textColor && '#' === attributes.textColor[ 0 ]
-						? attributes.textColor
-						: undefined,
-				customBackgroundColor:
-					attributes.backgroundColor &&
-					'#' === attributes.backgroundColor[ 0 ]
-						? attributes.backgroundColor
+			return migrateCustomColorsAndFontSizes(
+				migrateTextAlign( {
+					...attributes,
+					customFontSize: Number.isFinite( attributes.fontSize )
+						? attributes.fontSize
 						: undefined,
-			} );
+					customTextColor:
+						attributes.textColor &&
+						'#' === attributes.textColor[ 0 ]
+							? attributes.textColor
+							: undefined,
+					customBackgroundColor:
+						attributes.backgroundColor &&
+						'#' === attributes.backgroundColor[ 0 ]
+							? attributes.backgroundColor
+							: undefined,
+				} )
+			);
 		},
 	},
 	{
@@ -393,9 +462,7 @@ const deprecated = [
 		save( { attributes } ) {
 			return <RawHTML>{ attributes.content }</RawHTML>;
 		},
-		migrate( attributes ) {
-			return attributes;
-		},
+		migrate: ( attributes ) => attributes,
 	},
 ];
 

package/src/paragraph/edit.js

@@ -13,7 +13,6 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
-	AlignmentControl,
 	BlockControls,
 	InspectorControls,
 	RichText,
@@ -58,10 +57,11 @@ function DropCapControl( { clientId, attributes, setAttributes, name } ) {
 		return null;
 	}
 
-	const { align, dropCap } = attributes;
+	const { style, dropCap } = attributes;
+	const textAlign = style?.typography?.textAlign;
 
 	let helpText;
-	if ( hasDropCapDisabled( align ) ) {
+	if ( hasDropCapDisabled( textAlign ) ) {
 		helpText = __( 'Not available for aligned text.' );
 	} else if ( dropCap ) {
 		helpText = __( 'Showing large initial letter.' );
@@ -91,7 +91,7 @@ function DropCapControl( { clientId, attributes, setAttributes, name } ) {
 					checked={ !! dropCap }
 					onChange={ () => setAttributes( { dropCap: ! dropCap } ) }
 					help={ helpText }
-					disabled={ hasDropCapDisabled( align ) }
+					disabled={ hasDropCapDisabled( textAlign ) }
 				/>
 			</ToolsPanelItem>
 		</InspectorControls>
@@ -108,12 +108,12 @@ function ParagraphBlock( {
 	isSelected: isSingleSelected,
 	name,
 } ) {
-	const { align, content, direction, dropCap, placeholder } = attributes;
+	const { content, direction, dropCap, placeholder, style } = attributes;
+	const textAlign = style?.typography?.textAlign;
 	const blockProps = useBlockProps( {
 		ref: useOnEnter( { clientId, content } ),
 		className: clsx( {
-			'has-drop-cap': hasDropCapDisabled( align ) ? false : dropCap,
-			[ `has-text-align-${ align }` ]: align,
+			'has-drop-cap': hasDropCapDisabled( textAlign ) ? false : dropCap,
 		} ),
 		style: { direction },
 	} );
@@ -123,17 +123,6 @@ function ParagraphBlock( {
 		<>
 			{ blockEditingMode === 'default' && (
 				<BlockControls group="block">
-					<AlignmentControl
-						value={ align }
-						onChange={ ( newAlign ) =>
-							setAttributes( {
-								align: newAlign,
-								dropCap: hasDropCapDisabled( newAlign )
-									? false
-									: dropCap,
-							} )
-						}
-					/>
 					<ParagraphRTLControl
 						direction={ direction }
 						setDirection={ ( newDirection ) =>

package/src/paragraph/edit.native.js

@@ -29,7 +29,8 @@ function ParagraphBlock( {
 		return !! select( blockEditorStore ).getSettings().isRTL;
 	}, [] );
 
-	const { align, content, placeholder } = attributes;
+	const { content, placeholder, style: attributesStyle } = attributes;
+	const textAlign = attributesStyle?.typography?.textAlign;
 
 	const styles = {
 		...( style?.baseColors && {
@@ -40,9 +41,20 @@ function ParagraphBlock( {
 		...style,
 	};
 
-	const onAlignmentChange = useCallback( ( nextAlign ) => {
-		setAttributes( { align: nextAlign } );
-	}, [] );
+	const onAlignmentChange = useCallback(
+		( nextAlign ) => {
+			setAttributes( {
+				style: {
+					...attributesStyle,
+					typography: {
+						...attributesStyle?.typography,
+						textAlign: nextAlign,
+					},
+				},
+			} );
+		},
+		[ attributesStyle, setAttributes ]
+	);
 
 	const parentTextAlignment = allowedParentBlockAlignments.includes(
 		parentBlockAlignment
@@ -50,13 +62,13 @@ function ParagraphBlock( {
 		? parentBlockAlignment
 		: undefined;
 
-	const textAlignment = align || parentTextAlignment;
+	const textAlignment = textAlign || parentTextAlignment;
 
 	return (
 		<>
 			<BlockControls group="block">
 				<AlignmentControl
-					value={ align }
+					value={ textAlign }
 					isRTL={ isRTL }
 					onChange={ onAlignmentChange }
 				/>

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/save.js

@@ -10,13 +10,14 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { isRTL } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
-	const { align, content, dropCap, direction } = attributes;
+	const { content, dropCap, direction, style } = attributes;
+	const textAlign = style?.typography?.textAlign;
 	const className = clsx( {
 		'has-drop-cap':
-			align === ( isRTL() ? 'left' : 'right' ) || align === 'center'
+			textAlign === ( isRTL() ? 'left' : 'right' ) ||
+			textAlign === 'center'
 				? false
 				: dropCap,
-		[ `has-text-align-${ align }` ]: align,
 	} );
 
 	return (

package/src/paragraph/test/__snapshots__/transforms.native.js.snap

@@ -44,12 +44,6 @@ exports[`Paragraph block transforms to Preformatted block 1`] = `
 <!-- /wp:preformatted -->"
 `;
 
-exports[`Paragraph block transforms to Pullquote block 1`] = `
-"<!-- wp:pullquote -->
-<figure class="wp-block-pullquote"><blockquote><p>Example text</p></blockquote></figure>
-<!-- /wp:pullquote -->"
-`;
-
 exports[`Paragraph block transforms to Quote block 1`] = `
 "<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:paragraph -->