@wordpress/block-library 8.27.2 → 8.28.0

package/src/navigation-link/link-ui.js

@@ -2,21 +2,42 @@
  * WordPress dependencies
  */
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { Popover, Button } from '@wordpress/components';
+import {
+	Popover,
+	Button,
+	VisuallyHidden,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	__experimentalLinkControl as LinkControl,
-	BlockIcon,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { createInterpolateElement, useMemo } from '@wordpress/element';
+import {
+	createInterpolateElement,
+	useMemo,
+	useState,
+	useRef,
+	useEffect,
+} from '@wordpress/element';
 import {
 	store as coreStore,
 	useResourcePermissions,
 } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { switchToBlockType } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { chevronLeftSmall, plus } from '@wordpress/icons';
+import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { PrivateQuickInserter: QuickInserter } = unlock(
+	blockEditorPrivateApis
+);
 
 /**
  * Given the Link block's type attribute, return the query params to give to
@@ -56,85 +77,78 @@ export function getSuggestionsQuery( type, kind ) {
 	}
 }
 
-/**
- * Add transforms to Link Control
- *
- * @param {Object} props          Component props.
- * @param {string} props.clientId Block client ID.
- */
-function LinkControlTransforms( { clientId } ) {
-	const { getBlock, blockTransforms } = useSelect(
+function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
+	const { rootBlockClientId } = useSelect(
 		( select ) => {
-			const {
-				getBlock: _getBlock,
-				getBlockRootClientId,
-				getBlockTransformItems,
-			} = select( blockEditorStore );
+			const { getBlockRootClientId } = select( blockEditorStore );
 
 			return {
-				getBlock: _getBlock,
-				blockTransforms: getBlockTransformItems(
-					_getBlock( clientId ),
-					getBlockRootClientId( clientId )
-				),
+				rootBlockClientId: getBlockRootClientId( clientId ),
 			};
 		},
 		[ clientId ]
 	);
 
-	const { replaceBlock } = useDispatch( blockEditorStore );
-
-	const featuredBlocks = [
-		'core/page-list',
-		'core/site-logo',
-		'core/social-links',
-		'core/search',
-	];
-
-	const transforms = blockTransforms.filter( ( item ) => {
-		return featuredBlocks.includes( item.name );
-	} );
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 
-	if ( ! transforms?.length ) {
-		return null;
-	}
+	const dialogTitleId = useInstanceId(
+		LinkControl,
+		`link-ui-block-inserter__title`
+	);
+	const dialogDescritionId = useInstanceId(
+		LinkControl,
+		`link-ui-block-inserter__description`
+	);
 
 	if ( ! clientId ) {
 		return null;
 	}
 
 	return (
-		<div className="link-control-transform">
-			<h3 className="link-control-transform__subheading">
-				{ __( 'Transform' ) }
-			</h3>
-			<div className="link-control-transform__items">
-				{ transforms.map( ( item, index ) => {
-					return (
-						<Button
-							key={ `transform-${ index }` }
-							onClick={ () =>
-								replaceBlock(
-									clientId,
-									switchToBlockType(
-										getBlock( clientId ),
-										item.name
-									)
-								)
-							}
-							className="link-control-transform__item"
-						>
-							<BlockIcon icon={ item.icon } />
-							{ item.title }
-						</Button>
-					);
-				} ) }
-			</div>
+		<div
+			className="link-ui-block-inserter"
+			role="dialog"
+			aria-labelledby={ dialogTitleId }
+			aria-describedby={ dialogDescritionId }
+			ref={ focusOnMountRef }
+		>
+			<VisuallyHidden>
+				<h2 id={ dialogTitleId }>{ __( 'Add block' ) }</h2>
+
+				<p id={ dialogDescritionId }>
+					{ __( 'Choose a block to add to your Navigation.' ) }
+				</p>
+			</VisuallyHidden>
+
+			<Button
+				className="link-ui-block-inserter__back"
+				icon={ chevronLeftSmall }
+				onClick={ ( e ) => {
+					e.preventDefault();
+					onBack();
+				} }
+				size="small"
+			>
+				{ __( 'Back' ) }
+			</Button>
+
+			<QuickInserter
+				rootClientId={ rootBlockClientId }
+				clientId={ clientId }
+				isAppender={ false }
+				prioritizePatterns={ false }
+				selectBlockOnInsert={ true }
+				hasSearch={ false }
+				onSelect={ onSelectBlock }
+			/>
 		</div>
 	);
 }
 
 export function LinkUI( props ) {
+	const [ addingBlock, setAddingBlock ] = useState( false );
+	const [ focusAddBlockButton, setFocusAddBlockButton ] = useState( false );
+	const [ showBackdrop, setShowBackdrop ] = useState( true );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const pagesPermissions = useResourcePermissions( 'pages' );
 	const postsPermissions = useResourcePermissions( 'posts' );
@@ -186,54 +200,145 @@ export function LinkUI( props ) {
 		[ label, opensInNewTab, url ]
 	);
 
+	const dialogTitleId = useInstanceId(
+		LinkUI,
+		`link-ui-link-control__title`
+	);
+	const dialogDescritionId = useInstanceId(
+		LinkUI,
+		`link-ui-link-control__description`
+	);
+
+	// Selecting a block should close the popover and also remove the (previously) automatically inserted
+	// link block so that the newly selected block can be inserted in its place.
+	const { onClose: onSelectBlock } = props;
+
 	return (
-		<Popover
-			placement="bottom"
-			onClose={ props.onClose }
-			anchor={ props.anchor }
-			shift
-		>
-			<LinkControl
-				hasTextControl
-				hasRichPreviews
-				value={ link }
-				showInitialSuggestions={ true }
-				withCreateSuggestion={ userCanCreate }
-				createSuggestion={ handleCreate }
-				createSuggestionButtonText={ ( searchTerm ) => {
-					let format;
-
-					if ( type === 'post' ) {
-						/* translators: %s: search term. */
-						format = __( 'Create draft post: <mark>%s</mark>' );
-					} else {
-						/* translators: %s: search term. */
-						format = __( 'Create draft page: <mark>%s</mark>' );
-					}
-
-					return createInterpolateElement(
-						sprintf( format, searchTerm ),
-						{
-							mark: <mark />,
-						}
-					);
-				} }
-				noDirectEntry={ !! type }
-				noURLSuggestion={ !! type }
-				suggestionsQuery={ getSuggestionsQuery( type, kind ) }
-				onChange={ props.onChange }
-				onRemove={ props.onRemove }
-				onCancel={ props.onCancel }
-				renderControlBottom={
-					! url
-						? () => (
-								<LinkControlTransforms
-									clientId={ props.clientId }
-								/>
-						  )
-						: null
-				}
-			/>
-		</Popover>
+		<>
+			{ showBackdrop && (
+				<div
+					className="components-popover-pointer-events-trap"
+					aria-hidden="true"
+					onClick={ () => setShowBackdrop( false ) }
+				/>
+			) }
+			<Popover
+				placement="bottom"
+				onClose={ props.onClose }
+				anchor={ props.anchor }
+				shift
+			>
+				{ ! addingBlock && (
+					<div
+						role="dialog"
+						aria-labelledby={ dialogTitleId }
+						aria-describedby={ dialogDescritionId }
+					>
+						<VisuallyHidden>
+							<h2 id={ dialogTitleId }>{ __( 'Add link' ) }</h2>
+
+							<p id={ dialogDescritionId }>
+								{ __(
+									'Search for and add a link to your Navigation.'
+								) }
+							</p>
+						</VisuallyHidden>
+						<LinkControl
+							hasTextControl
+							hasRichPreviews
+							value={ link }
+							showInitialSuggestions={ true }
+							withCreateSuggestion={ userCanCreate }
+							createSuggestion={ handleCreate }
+							createSuggestionButtonText={ ( searchTerm ) => {
+								let format;
+
+								if ( type === 'post' ) {
+									/* translators: %s: search term. */
+									format = __(
+										'Create draft post: <mark>%s</mark>'
+									);
+								} else {
+									/* translators: %s: search term. */
+									format = __(
+										'Create draft page: <mark>%s</mark>'
+									);
+								}
+
+								return createInterpolateElement(
+									sprintf( format, searchTerm ),
+									{
+										mark: <mark />,
+									}
+								);
+							} }
+							noDirectEntry={ !! type }
+							noURLSuggestion={ !! type }
+							suggestionsQuery={ getSuggestionsQuery(
+								type,
+								kind
+							) }
+							onChange={ props.onChange }
+							onRemove={ props.onRemove }
+							onCancel={ props.onCancel }
+							renderControlBottom={ () =>
+								! link?.url?.length && (
+									<LinkUITools
+										focusAddBlockButton={
+											focusAddBlockButton
+										}
+										setAddingBlock={ () => {
+											setAddingBlock( true );
+											setFocusAddBlockButton( false );
+										} }
+									/>
+								)
+							}
+						/>
+					</div>
+				) }
+
+				{ addingBlock && (
+					<LinkUIBlockInserter
+						clientId={ props.clientId }
+						onBack={ () => {
+							setAddingBlock( false );
+							setFocusAddBlockButton( true );
+						} }
+						onSelectBlock={ onSelectBlock }
+					/>
+				) }
+			</Popover>
+		</>
 	);
 }
+
+const LinkUITools = ( { setAddingBlock, focusAddBlockButton } ) => {
+	const blockInserterAriaRole = 'listbox';
+	const addBlockButtonRef = useRef();
+
+	// Focus the add block button when the popover is opened.
+	useEffect( () => {
+		if ( focusAddBlockButton ) {
+			addBlockButtonRef.current?.focus();
+		}
+	}, [ focusAddBlockButton ] );
+
+	return (
+		<VStack className="link-ui-tools">
+			<Button
+				ref={ addBlockButtonRef }
+				icon={ plus }
+				onClick={ ( e ) => {
+					e.preventDefault();
+					setAddingBlock( true );
+				} }
+				aria-haspopup={ blockInserterAriaRole }
+			>
+				{ __( 'Add block' ) }
+			</Button>
+		</VStack>
+	);
+};
+
+export default LinkUITools;

package/src/navigation-link/style.scss

@@ -14,3 +14,29 @@
 		display: none;
 	}
 }
+
+.link-ui-tools {
+	border-top: 1px solid $gray-100;
+	padding: $grid-unit-10;
+}
+
+.link-ui-block-inserter {
+	padding-top: $grid-unit-10;
+}
+
+.link-ui-block-inserter__back {
+	margin-left: $grid-unit-10;
+	text-transform: uppercase;
+}
+
+// Ensure Popover `onClose` is fired for clicks on the canvas iframe.
+// See https: //github.com/WordPress/gutenberg/pull/57756#discussion_r1475852009.
+.components-popover-pointer-events-trap {
+	// Same z-index as popover, but rendered before the popover element
+	// in DOM order = it will display just under the popover
+	z-index: z-index(".components-popover");
+	position: fixed;
+	inset: 0;
+	background-color: transparent;
+	cursor: pointer;
+}

package/src/navigation-submenu/block.json

@@ -58,7 +58,10 @@
 	],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-navigation-submenu-editor",
 	"style": "wp-block-navigation-submenu"

package/src/navigation-submenu/index.js

@@ -21,16 +21,23 @@ export const settings = {
 		if ( context === 'list-view' ) {
 			return page;
 		}
-
 		return addSubmenu;
 	},
+	__experimentalLabel( attributes, { context } ) {
+		const { label } = attributes;
 
-	__experimentalLabel: ( { label } ) => label,
+		const customName = attributes?.metadata?.name;
 
-	edit,
+		// In the list view, use the block's menu label as the label.
+		// If the menu label is empty, fall back to the default label.
+		if ( context === 'list-view' && ( customName || label ) ) {
+			return attributes?.metadata?.name || label;
+		}
 
+		return label;
+	},
+	edit,
 	save,
-
 	transforms,
 };
 

package/src/nextpage/block.json

@@ -11,7 +11,10 @@
 	"supports": {
 		"customClassName": false,
 		"className": false,
-		"html": false
+		"html": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-nextpage-editor"
 }

package/src/page-list/block.json

@@ -4,6 +4,7 @@
 	"name": "core/page-list",
 	"title": "Page List",
 	"category": "widgets",
+	"allowedBlocks": [ "core/page-list-item" ],
 	"description": "Display a list of all pages.",
 	"keywords": [ "menu", "navigation" ],
 	"textdomain": "default",
@@ -47,6 +48,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-page-list-editor",

package/src/page-list/edit.js

@@ -286,7 +286,6 @@ export default function PageListEdit( {
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/page-list-item' ],
 		renderAppender: false,
 		__unstableDisableDropZone: true,
 		templateLock: isChildOfNavigation ? false : 'all',

package/src/page-list-item/block.json

@@ -45,7 +45,10 @@
 		"html": false,
 		"lock": false,
 		"inserter": false,
-		"__experimentalToolbar": false
+		"__experimentalToolbar": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-page-list-editor",
 	"style": "wp-block-page-list"

package/src/paragraph/block.json

@@ -64,7 +64,10 @@
 			}
 		},
 		"__experimentalSelector": "p",
-		"__unstablePasteTextInline": true
+		"__unstablePasteTextInline": true,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-paragraph-editor",
 	"style": "wp-block-paragraph"

package/src/paragraph/edit.js

@@ -51,9 +51,9 @@ function hasDropCapDisabled( align ) {
 }
 
 function DropCapControl( { clientId, attributes, setAttributes } ) {
-	// Please do no add a useSelect call to the paragraph block unconditionaly.
-	// Every useSelect added to a (frequestly used) block will degrade the load
-	// and type bit. By moving it within InspectorControls, the subscription is
+	// Please do not add a useSelect call to the paragraph block unconditionally.
+	// Every useSelect added to a (frequently used) block will degrade load
+	// and type performance. By moving it within InspectorControls, the subscription is
 	// now only added for the selected block(s).
 	const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' );
 

package/src/pattern/block.json

@@ -8,7 +8,10 @@
 	"supports": {
 		"html": false,
 		"inserter": false,
-		"renaming": false
+		"renaming": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"textdomain": "default",
 	"attributes": {

package/src/post-author/block.json

@@ -61,6 +61,9 @@
 				"background": true,
 				"text": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"style": "wp-block-post-author"

package/src/post-author-biography/block.json

@@ -37,6 +37,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/post-author-name/block.json

@@ -47,6 +47,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/post-comment/block.json

@@ -5,6 +5,14 @@
 	"name": "core/post-comment",
 	"title": "Comment (deprecated)",
 	"category": "theme",
+	"allowedBlocks": [
+		"core/avatar",
+		"core/comment-author-name",
+		"core/comment-content",
+		"core/comment-date",
+		"core/comment-edit-link",
+		"core/comment-reply-link"
+	],
 	"description": "This block is deprecated. Please use the Comments block instead.",
 	"textdomain": "default",
 	"attributes": {
@@ -17,6 +25,9 @@
 	},
 	"supports": {
 		"html": false,
-		"inserter": false
+		"inserter": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	}
 }

package/src/post-comment/edit.js

@@ -7,14 +7,6 @@ import { useState } from '@wordpress/element';
 import { blockDefault } from '@wordpress/icons';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-const ALLOWED_BLOCKS = [
-	'core/avatar',
-	'core/comment-author-name',
-	'core/comment-content',
-	'core/comment-date',
-	'core/comment-edit-link',
-	'core/comment-reply-link',
-];
 const TEMPLATE = [
 	[ 'core/avatar' ],
 	[ 'core/comment-author-name' ],
@@ -29,7 +21,6 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
-		allowedBlocks: ALLOWED_BLOCKS,
 	} );
 
 	if ( ! commentId ) {

package/src/post-comments-count/block.json

@@ -38,6 +38,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/post-comments-link/block.json

@@ -39,6 +39,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/post-content/editor.scss

@@ -0,0 +1,4 @@
+// Disable text selection in the post content placeholder.
+.wp-block-post-content.wp-block-post-content {
+	user-select: none;
+}

package/src/post-date/block.json

@@ -50,6 +50,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/post-excerpt/block.json

@@ -50,6 +50,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-post-excerpt-editor",