@wordpress/block-library 9.34.0 → 9.35.0

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/navigation-submenu/edit.js

@@ -391,9 +391,7 @@ export default function NavigationSubmenuEdit( {
 				/>
 			</InspectorControls>
 			<div { ...blockProps }>
-				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<ParentElement className="wp-block-navigation-item__content">
-					{ /* eslint-enable */ }
 					<RichText
 						ref={ ref }
 						identifier="label"

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/edit.native.js

@@ -283,7 +283,7 @@ describe( 'Paragraph block', () => {
 
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
-		"<!-- wp:paragraph {"align":"left"} -->
+		"<!-- wp:paragraph {"style":{"typography":{"textAlign":"left"}}} -->
 		<p class="has-text-align-left">A quick brown fox jumps over the lazy dog.</p>
 		<!-- /wp:paragraph -->"
 	` );
@@ -308,7 +308,7 @@ describe( 'Paragraph block', () => {
 
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
-		"<!-- wp:paragraph {"align":"center"} -->
+		"<!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} -->
 		<p class="has-text-align-center">A quick brown fox jumps over the lazy dog.</p>
 		<!-- /wp:paragraph -->"
 	` );
@@ -333,7 +333,7 @@ describe( 'Paragraph block', () => {
 
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
-		"<!-- wp:paragraph {"align":"right"} -->
+		"<!-- wp:paragraph {"style":{"typography":{"textAlign":"right"}}} -->
 		<p class="has-text-align-right">A quick brown fox jumps over the lazy dog.</p>
 		<!-- /wp:paragraph -->"
 	` );
@@ -399,11 +399,11 @@ describe( 'Paragraph block', () => {
 
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
-		"<!-- wp:paragraph {"align":"center"} -->
+		"<!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} -->
 		<p class="has-text-align-center">A quick brown fox jum</p>
 		<!-- /wp:paragraph -->
 
-		<!-- wp:paragraph {"align":"center"} -->
+		<!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} -->
 		<p class="has-text-align-center">ps over the lazy dog.</p>
 		<!-- /wp:paragraph -->"
 	` );

package/src/paragraph/transforms.js

@@ -30,7 +30,13 @@ const transforms = {
 					textAlign === 'center' ||
 					textAlign === 'right'
 				) {
-					attributes.align = textAlign;
+					attributes.style = {
+						...attributes.style,
+						typography: {
+							...attributes.style?.typography,
+							textAlign,
+						},
+					};
 				}
 
 				return createBlock( name, attributes );

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;

package/src/site-logo/edit.js

@@ -133,12 +133,8 @@ const SiteLogo = ( {
 	);
 
 	let imgWrapper = img;
-
-	// Disable reason: Image itself is not meant to be interactive, but
-	// should direct focus to block.
 	if ( isLink ) {
 		imgWrapper = (
-			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 			<a
 				href={ siteUrl }
 				className="custom-logo-link"
@@ -148,7 +144,6 @@ const SiteLogo = ( {
 			>
 				{ img }
 			</a>
-			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 		);
 	}
 

package/src/style.scss

@@ -69,8 +69,10 @@
 @use "./social-links/style.scss" as *;
 @use "./spacer/style.scss" as *;
 @use "./tag-cloud/style.scss" as *;
+@use "./tab/style.scss" as *;
 @use "./table/style.scss" as *;
 @use "./table-of-contents/style.scss" as *;
+@use "./tabs/style.scss" as *;
 @use "./term-count/style.scss" as *;
 @use "./term-description/style.scss" as *;
 @use "./term-name/style.scss" as *;