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

package/src/navigation-link/edit.js

@@ -30,7 +30,7 @@ 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, useInstanceId } from '@wordpress/compose';
+import { useMergeRefs, useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -213,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,
@@ -223,6 +226,7 @@ export default function NavigationLinkEdit( {
 		hasChildren,
 		validateLinkStatus,
 		parentBlockClientId,
+		isSubmenu,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -267,6 +271,7 @@ export default function NavigationLinkEdit( {
 				hasChildren: !! getBlockCount( clientId ),
 				validateLinkStatus: enableLinkStatusValidation,
 				parentBlockClientId: parentBlockId,
+				isSubmenu: parentBlockName === 'core/navigation-submenu',
 			};
 		},
 		[ clientId, maxNestingLevel ]
@@ -314,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
@@ -333,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.
@@ -444,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 );
@@ -589,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

@@ -5,6 +5,7 @@ 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;
 
@@ -90,19 +94,16 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'label',
 			label: __( 'Label' ),
-			type: 'RichText',
-			shownByDefault: true,
-			mapping: {
-				value: 'label',
-			},
+			type: 'richtext',
 		},
 		{
+			id: 'link',
 			label: __( 'Link' ),
-			type: 'Link',
-			shownByDefault: false,
+			type: 'link',
 			mapping: {
 				href: 'url',
 				rel: 'rel',
@@ -110,6 +111,9 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
 			},
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'label' ],
+	};
 }
 
 export const init = () => {

package/src/navigation-submenu/index.js

@@ -3,6 +3,7 @@
  */
 import { page, addSubmenu } from '@wordpress/icons';
 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;
 
@@ -49,19 +53,16 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'label',
 			label: __( 'Label' ),
-			type: 'RichText',
-			shownByDefault: true,
-			mapping: {
-				value: 'label',
-			},
+			type: 'richtext',
 		},
 		{
+			id: 'link',
 			label: __( 'Link' ),
-			type: 'Link',
-			shownByDefault: false,
+			type: 'link',
 			mapping: {
 				href: 'url',
 				rel: 'rel',
@@ -69,6 +70,9 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
 			},
 		},
 	];
+	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;
 
@@ -59,16 +63,16 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'content',
 			label: __( 'Content' ),
-			type: 'RichText',
-			shownByDefault: true,
-			mapping: {
-				value: '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/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;
 
@@ -40,16 +44,16 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'content',
 			label: __( 'Content' ),
-			type: 'RichText',
-			shownByDefault: true,
-			mapping: {
-				value: '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;
 
@@ -37,24 +41,21 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'value',
 			label: __( 'Content' ),
-			type: 'RichText',
-			shownByDefault: true,
-			mapping: {
-				value: 'value',
-			},
+			type: 'richtext',
 		},
 		{
+			id: 'citation',
 			label: __( 'Citation' ),
-			type: 'RichText',
-			shownByDefault: false,
-			mapping: {
-				value: 'citation',
-			},
+			type: 'richtext',
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'value' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/search/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { search as icon } from '@wordpress/icons';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -11,6 +12,9 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import variations from './variations';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -27,32 +31,27 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'label',
 			label: __( 'Label' ),
-			type: 'RichText',
+			type: 'richtext',
 			shownByDefault: true,
-			mapping: {
-				value: 'label',
-			},
 		},
 		{
+			id: 'buttonText',
 			label: __( 'Button text' ),
-			type: 'RichText',
-			shownByDefault: false,
-			mapping: {
-				value: 'buttonText',
-			},
+			type: 'richtext',
 		},
 		{
+			id: 'placeholder',
 			label: __( 'Placeholder' ),
-			type: 'RichText',
-			shownByDefault: false,
-			mapping: {
-				value: 'placeholder',
-			},
+			type: 'richtext',
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'label' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/social-link/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { share as icon } from '@wordpress/icons';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -11,6 +12,9 @@ import initBlock from '../utils/init-block';
 import edit from './edit';
 import metadata from './block.json';
 import variations from './variations';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -23,25 +27,25 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'link',
 			label: __( 'Link' ),
-			type: 'Link',
-			shownByDefault: true,
+			type: 'link',
 			mapping: {
 				href: 'url',
 				rel: 'rel',
 			},
 		},
 		{
+			id: 'label',
 			label: __( 'Label' ),
-			type: 'RichText',
-			shownByDefault: false,
-			mapping: {
-				value: 'label',
-			},
+			type: 'richtext',
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'link' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/style.scss

@@ -1,3 +1,4 @@
+@use "./accordion/style.scss" as *;
 @use "./accordion-item/style.scss" as *;
 @use "./accordion-heading/style.scss" as *;
 @use "./accordion-panel/style.scss" as *;

package/src/template-part/edit/index.js

@@ -39,6 +39,17 @@ import {
 	useAlternativeTemplateParts,
 	useTemplatePartArea,
 } from './utils/hooks';
+import { unlock } from '../../lock-unlock';
+
+function getTemplatePartEditButtonTitle( clientId, editedContentOnlySection ) {
+	if ( ! window?.__experimentalContentOnlyPatternInsertion ) {
+		return __( 'Edit' );
+	}
+
+	return editedContentOnlySection === clientId
+		? __( 'Exit section' )
+		: __( 'Edit section' );
+}
 
 function ReplaceButton( {
 	isEntityAvailable,
@@ -108,8 +119,18 @@ export default function TemplatePartEdit( {
 } ) {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { editEntityRecord } = useDispatch( coreStore );
-	const currentTheme = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,
+	const { editContentOnlySection, stopEditingContentOnlySection } = unlock(
+		useDispatch( blockEditorStore )
+	);
+	const { currentTheme, editedContentOnlySection } = useSelect(
+		( select ) => {
+			return {
+				currentTheme: select( coreStore ).getCurrentTheme()?.stylesheet,
+				editedContentOnlySection: unlock(
+					select( blockEditorStore )
+				).getEditedContentOnlySection(),
+			};
+		},
 		[]
 	);
 	const { slug, theme = currentTheme, tagName, layout = {} } = attributes;
@@ -240,14 +261,31 @@ export default function TemplatePartEdit( {
 					canUserEdit && (
 						<BlockControls group="other">
 							<ToolbarButton
-								onClick={ () =>
+								onClick={ () => {
+									if (
+										window?.__experimentalContentOnlyPatternInsertion
+									) {
+										if (
+											editedContentOnlySection !==
+											clientId
+										) {
+											editContentOnlySection( clientId );
+										} else {
+											stopEditingContentOnlySection();
+										}
+										return;
+									}
+
 									onNavigateToEntityRecord( {
 										postId: templatePartId,
 										postType: 'wp_template_part',
-									} )
-								}
+									} );
+								} }
 							>
-								{ __( 'Edit' ) }
+								{ getTemplatePartEditButtonTitle(
+									clientId,
+									editedContentOnlySection
+								) }
 							</ToolbarButton>
 						</BlockControls>
 					) }

package/src/template-part/edit/utils/hooks.js

@@ -83,10 +83,8 @@ export function useAlternativeBlockPatterns( area, clientId ) {
 			const blockNameWithArea = area
 				? `core/template-part/${ area }`
 				: 'core/template-part';
-			const { getBlockRootClientId, getPatternsByBlockTypes } =
-				select( blockEditorStore );
-			const rootClientId = getBlockRootClientId( clientId );
-			return getPatternsByBlockTypes( blockNameWithArea, rootClientId );
+			const { getPatternsByBlockTypes } = select( blockEditorStore );
+			return getPatternsByBlockTypes( blockNameWithArea, clientId );
 		},
 		[ area, clientId ]
 	);

package/src/term-count/index.js

@@ -15,6 +15,7 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {},
 	edit,
 };