@wordpress/block-library 9.35.1-next.16d95556a.0 → 9.36.0

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, 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 = [
@@ -203,8 +213,11 @@ export default function NavigationLinkEdit( {
 	const itemLabelPlaceholder = __( 'Add label…' );
 	const ref = useRef();
 	const linkUIref = useRef();
-	const prevUrl = usePrevious( url );
-	const isNewLink = useRef( ! url );
+	// A link is "new" only if it has an undefined label
+	// After the link is created, even if no label is provided, it's set to an empty string.
+	const isNewLink = useRef( label === undefined );
+	// Track whether we should focus the submenu appender when closing the link UI
+	const shouldSelectSubmenuAppenderOnClose = useRef( false );
 
 	const {
 		isAtMaxNesting,
@@ -213,6 +226,7 @@ export default function NavigationLinkEdit( {
 		hasChildren,
 		validateLinkStatus,
 		parentBlockClientId,
+		isSubmenu,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -257,6 +271,7 @@ export default function NavigationLinkEdit( {
 				hasChildren: !! getBlockCount( clientId ),
 				validateLinkStatus: enableLinkStatusValidation,
 				parentBlockClientId: parentBlockId,
+				isSubmenu: parentBlockName === 'core/navigation-submenu',
 			};
 		},
 		[ clientId, maxNestingLevel ]
@@ -304,7 +319,7 @@ export default function NavigationLinkEdit( {
 	// If we leave focus on this block, then when we close the link without creating a link, focus will
 	// be lost during the new block selection process.
 	useEffect( () => {
-		if ( isNewLink.current && isSelected && ! url ) {
+		if ( isNewLink.current && isSelected ) {
 			selectBlock( parentBlockClientId );
 		}
 	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
@@ -323,20 +338,46 @@ export default function NavigationLinkEdit( {
 		transformToSubmenu,
 	] );
 
-	// If the LinkControl popover is open and the URL has changed, close the LinkControl and focus the label text.
+	// Handle link UI when a new link is created
 	useEffect( () => {
-		// We only want to do this when the URL has gone from nothing to a new URL AND the label looks like a URL
-		if (
-			! prevUrl &&
-			url &&
-			isLinkOpen &&
-			isURL( prependHTTP( label ) ) &&
-			/^.+\.[a-z]+/.test( label )
-		) {
+		// We know if a link was just created from our link UI if
+		// 1. isNewLink.current is true
+		// 2. url has a value
+		// 3. isLinkOpen is true
+		if ( ! isNewLink.current || ! url || ! isLinkOpen ) {
+			return;
+		}
+
+		// Ensure this only runs once
+		isNewLink.current = false;
+
+		// We just created a link and the block is now selected.
+		// If the label looks like a URL, focus and select the label text.
+		if ( isURL( prependHTTP( label ) ) && /^.+\.[a-z]+/.test( label ) ) {
 			// Focus and select the label text.
 			selectLabelText();
+		} else {
+			// If the link was just created, we want to select the block so the inspector controls
+			// are accurate.
+			selectBlock( clientId, null );
+
+			// Edge case: When the created link is the first child of a submenu, the focus will have
+			// originated from the add submenu toolbar button. In this case, we need to return focus
+			// to the submenu appender if the user closes the link ui using the keyboard.
+			// Check if this is the first and only child of a newly created submenu.
+			if ( isSubmenu ) {
+				const parentBlocks = getBlocks( parentBlockClientId );
+				// If this is the only child, then this is a new submenu.
+				// Set the flag to select the submenu appender when the link ui is closed.
+				if (
+					parentBlocks.length === 1 &&
+					parentBlocks[ 0 ].clientId === clientId
+				) {
+					shouldSelectSubmenuAppenderOnClose.current = true;
+				}
+			}
 		}
-	}, [ prevUrl, url, isLinkOpen, label ] );
+	}, [ url, isLinkOpen, isNewLink, label ] );
 
 	/**
 	 * Focus the Link label text and select it.
@@ -394,6 +435,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', {
@@ -407,6 +454,8 @@ export default function NavigationLinkEdit( {
 			[ getColorClassName( 'background-color', backgroundColor ) ]:
 				!! backgroundColor,
 		} ),
+		'aria-describedby': missingEntityDescriptionId,
+		'aria-invalid': hasMissingEntity,
 		style: {
 			color: ! textColor && customTextColor,
 			backgroundColor: ! backgroundColor && customBackgroundColor,
@@ -426,23 +475,20 @@ export default function NavigationLinkEdit( {
 		}
 	);
 
-	if (
-		! url ||
+	const needsValidLink =
+		( ! url && ! ( hasUrlBinding && isBoundEntityAvailable ) ) ||
 		isInvalid ||
 		isDraft ||
-		( hasUrlBinding && ! isBoundEntityAvailable )
-	) {
+		( hasUrlBinding && ! isBoundEntityAvailable );
+
+	if ( needsValidLink ) {
 		blockProps.onClick = () => {
 			setIsLinkOpen( true );
 		};
 	}
 
 	const classes = clsx( 'wp-block-navigation-item__content', {
-		'wp-block-navigation-link__placeholder':
-			! url ||
-			isInvalid ||
-			isDraft ||
-			( hasUrlBinding && ! isBoundEntityAvailable ),
+		'wp-block-navigation-link__placeholder': needsValidLink,
 	} );
 
 	const missingText = getMissingText( type );
@@ -482,6 +528,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 */ }
@@ -566,9 +617,27 @@ export default function NavigationLinkEdit( {
 								// 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
-									selectBlock( clientId );
+									return;
+								}
+
+								// Edge case: If this is the first child of a new submenu, focus the submenu's appender
+								if (
+									shouldSelectSubmenuAppenderOnClose.current
+								) {
+									shouldSelectSubmenuAppenderOnClose.current = false;
+
+									// The appender is the next sibling in the DOM after the current block
+									if (
+										listItemRef.current?.nextElementSibling
+									) {
+										const appenderButton =
+											listItemRef.current.nextElementSibling.querySelector(
+												'.block-editor-button-block-appender'
+											);
+										if ( appenderButton ) {
+											appenderButton.focus();
+										}
+									}
 								}
 							} }
 							anchor={ popoverAnchor }

package/src/navigation-link/index.js

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { _x } from '@wordpress/i18n';
+import { _x, __ } from '@wordpress/i18n';
 import { customLink as linkIcon } from '@wordpress/icons';
 import { InnerBlocks } from '@wordpress/block-editor';
 import { addFilter } from '@wordpress/hooks';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -15,6 +16,9 @@ import edit from './edit';
 import save from './save';
 import { enhanceNavigationLinkVariations } from './hooks';
 import transforms from './transforms';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -89,6 +93,29 @@ export const settings = {
 	transforms,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings[ fieldsKey ] = [
+		{
+			id: 'label',
+			label: __( 'Label' ),
+			type: 'richtext',
+		},
+		{
+			id: 'link',
+			label: __( 'Link' ),
+			type: 'link',
+			mapping: {
+				href: 'url',
+				rel: 'rel',
+				// TODO - opens in new tab? id?
+			},
+		},
+	];
+	settings[ formKey ] = {
+		fields: [ 'label' ],
+	};
+}
+
 export const init = () => {
 	addFilter(
 		'blocks.registerBlockType',

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

@@ -221,7 +221,7 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 					} }
 					help={
 						hasUrlBinding && ! isBoundEntityAvailable ? (
-							<MissingEntityHelpText
+							<MissingEntityHelp
 								id={ helpTextId }
 								type={ attributes.type }
 								kind={ attributes.kind }
@@ -327,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") */
@@ -340,27 +340,23 @@ function BindingHelpText( { type, kind } ) {
  * 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 } ) {
+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"
-			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 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/use-entity-binding.js

@@ -98,10 +98,13 @@ export function useEntityBinding( { clientId, attributes } ) {
 
 			// Use the correct entity type based on kind.
 			const entityType = isTaxonomy ? 'taxonomy' : 'postType';
-			const entityRecord = getEntityRecord( entityType, type, id );
+			// Convert 'tag' back to 'post_tag' for the API call
+			// (it was converted from 'post_tag' to 'tag' for storage in updateAttributes)
+			const typeForAPI = type === 'tag' ? 'post_tag' : type;
+			const entityRecord = getEntityRecord( entityType, typeForAPI, id );
 			const hasResolved = hasFinishedResolution( 'getEntityRecord', [
 				entityType,
-				type,
+				typeForAPI,
 				id,
 			] );
 

package/src/navigation-submenu/block.json

@@ -29,7 +29,8 @@
 			"default": false
 		},
 		"url": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"title": {
 			"type": "string"

package/src/navigation-submenu/index.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { page, addSubmenu } from '@wordpress/icons';
-import { _x } from '@wordpress/i18n';
+import { _x, __ } from '@wordpress/i18n';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -12,6 +13,9 @@ import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import transforms from './transforms';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -48,4 +52,27 @@ export const settings = {
 	transforms,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings[ fieldsKey ] = [
+		{
+			id: 'label',
+			label: __( 'Label' ),
+			type: 'richtext',
+		},
+		{
+			id: 'link',
+			label: __( 'Link' ),
+			type: 'link',
+			mapping: {
+				href: 'url',
+				rel: 'rel',
+				// TODO - opens in new tab? id?
+			},
+		},
+	];
+	settings[ formKey ] = {
+		fields: [ 'label' ],
+	};
+}
+
 export const init = () => initBlock( { name, metadata, settings } );

package/src/paragraph/deprecated-attributes.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { useEvent } from '@wordpress/compose';
+import { useEffect, useRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+import { useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * If a plugin is still using the old align attribute, we need to migrate its value
+ * to the new style.typography.textAlign attribute.
+ *
+ * @param {string?}          align         Align attribute value.
+ * @param {Object?}          style         Style attribute value.
+ * @param {(Object) => void} setAttributes Updater function for block attributes.
+ */
+export default function useDeprecatedAlign( align, style, setAttributes ) {
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const updateStyleWithAlign = useEvent( () => {
+		deprecated( 'align attribute in paragraph block', {
+			alternative: 'style.typography.textAlign',
+			since: '7.0',
+		} );
+		__unstableMarkNextChangeAsNotPersistent();
+		setAttributes( {
+			style: {
+				...style,
+				typography: {
+					...style?.typography,
+					textAlign: align,
+				},
+			},
+		} );
+	} );
+	const lastUpdatedAlignRef = useRef();
+	useEffect( () => {
+		if ( align === lastUpdatedAlignRef.current ) {
+			return;
+		}
+		lastUpdatedAlignRef.current = align;
+		updateStyleWithAlign();
+	}, [ align, updateStyleWithAlign ] );
+}

package/src/paragraph/edit.js

@@ -26,6 +26,7 @@ import { formatLtr } from '@wordpress/icons';
  * Internal dependencies
  */
 import { useOnEnter } from './use-enter';
+import useDeprecatedAlign from './deprecated-attributes';
 
 function ParagraphRTLControl( { direction, setDirection } ) {
 	return (
@@ -110,6 +111,7 @@ function ParagraphBlock( {
 } ) {
 	const { content, direction, dropCap, placeholder, style } = attributes;
 	const textAlign = style?.typography?.textAlign;
+	useDeprecatedAlign( attributes.align, style, setAttributes );
 	const blockProps = useBlockProps( {
 		ref: useOnEnter( { clientId, content } ),
 		className: clsx( {

package/src/paragraph/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { paragraph as icon } from '@wordpress/icons';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -14,6 +15,9 @@ import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
 import variations from './variations';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -58,4 +62,17 @@ export const settings = {
 	variations,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings[ fieldsKey ] = [
+		{
+			id: 'content',
+			label: __( 'Content' ),
+			type: 'richtext',
+		},
+	];
+	settings[ formKey ] = {
+		fields: [ 'content' ],
+	};
+}
+
 export const init = () => initBlock( { name, metadata, settings } );

package/src/pattern/block.json

@@ -9,7 +9,7 @@
 		"html": false,
 		"inserter": false,
 		"renaming": false,
-		"blockVisibility": false,
+		"visibility": false,
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/post-comments-count/edit.js

@@ -9,13 +9,11 @@ import clsx from 'clsx';
 import {
 	AlignmentControl,
 	BlockControls,
-	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
-import { __ } from '@wordpress/i18n';
 
 export default function PostCommentsCountEdit( {
 	attributes,
@@ -68,13 +66,7 @@ export default function PostCommentsCountEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps } style={ blockStyles }>
-				{ hasPostAndComments ? (
-					commentsCount
-				) : (
-					<Warning>
-						{ __( 'Post Comments Count block: post not found.' ) }
-					</Warning>
-				) }
+				{ hasPostAndComments ? commentsCount : '0' }
 			</div>
 		</>
 	);

package/src/post-comments-link/edit.js

@@ -9,7 +9,6 @@ import clsx from 'clsx';
 import {
 	AlignmentControl,
 	BlockControls,
-	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
@@ -59,18 +58,6 @@ function PostCommentsLinkEdit( { context, attributes, setAttributes } ) {
 		[ postType, postId ]
 	);
 
-	if ( ! post ) {
-		return (
-			<div { ...blockProps }>
-				<Warning>
-					{ __( 'Post Comments Link block: post not found.' ) }
-				</Warning>
-			</div>
-		);
-	}
-
-	const { link } = post;
-
 	let commentsText;
 	if ( commentsCount !== undefined ) {
 		const commentsNumber = parseInt( commentsCount );
@@ -98,17 +85,20 @@ function PostCommentsLinkEdit( { context, attributes, setAttributes } ) {
 			</BlockControls>
 
 			<div { ...blockProps }>
-				{ link && commentsText !== undefined ? (
+				{ post?.link && commentsText !== undefined ? (
 					<a
-						href={ link + '#comments' }
+						href={ post?.link + '#comments' }
 						onClick={ ( event ) => event.preventDefault() }
 					>
 						{ commentsText }
 					</a>
 				) : (
-					<Warning>
-						{ __( 'Post Comments Link block: post not found.' ) }
-					</Warning>
+					<a
+						href="#post-comments-link-pseudo-link"
+						onClick={ ( event ) => event.preventDefault() }
+					>
+						{ __( 'No comments' ) }
+					</a>
 				) }
 			</div>
 		</>

package/src/preformatted/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { preformatted as icon } from '@wordpress/icons';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -12,6 +13,9 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -39,4 +43,17 @@ export const settings = {
 	},
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings[ fieldsKey ] = [
+		{
+			id: 'content',
+			label: __( 'Content' ),
+			type: 'richtext',
+		},
+	];
+	settings[ formKey ] = {
+		fields: [ 'content' ],
+	};
+}
+
 export const init = () => initBlock( { name, metadata, settings } );

package/src/pullquote/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { pullquote as icon } from '@wordpress/icons';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -13,6 +14,9 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -36,4 +40,22 @@ export const settings = {
 	deprecated,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings[ fieldsKey ] = [
+		{
+			id: 'value',
+			label: __( 'Content' ),
+			type: 'richtext',
+		},
+		{
+			id: 'citation',
+			label: __( 'Citation' ),
+			type: 'richtext',
+		},
+	];
+	settings[ formKey ] = {
+		fields: [ 'value' ],
+	};
+}
+
 export const init = () => initBlock( { name, metadata, settings } );