@wordpress/block-editor 15.21.0 → 15.21.1

package/src/components/inserter/index.js

@@ -9,10 +9,13 @@ import clsx from 'clsx';
 import { speak } from '@wordpress/a11y';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Dropdown, Button } from '@wordpress/components';
-import { Component } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose, ifCondition } from '@wordpress/compose';
-import { createBlock, store as blocksStore } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	createBlock,
+	store as blocksStore,
+	__experimentalGetBlockLabel as getBlockLabel,
+} from '@wordpress/blocks';
+import { forwardRef } from '@wordpress/element';
 import { plus } from '@wordpress/icons';
 
 /**
@@ -23,15 +26,18 @@ import QuickInserter from './quick-inserter';
 import { store as blockEditorStore } from '../../store';
 import { getAppenderLabel } from './get-appender-label';
 
-const defaultRenderToggle = ( {
-	onToggle,
-	disabled,
-	isOpen,
-	blockTitle,
-	hasSingleBlockType,
-	appenderLabel,
-	toggleProps = {},
-} ) => {
+const UnforwardedInserterToggle = (
+	{
+		onToggle,
+		disabled,
+		isOpen,
+		blockTitle,
+		hasSingleBlockType,
+		appenderLabel,
+		toggleProps = {},
+	},
+	ref
+) => {
 	const {
 		as: Wrapper = Button,
 		label: labelProp,
@@ -65,6 +71,7 @@ const defaultRenderToggle = ( {
 
 	return (
 		<Wrapper
+			ref={ ref }
 			__next40pxDefaultSize={ toggleProps.as ? undefined : true }
 			icon={ plus }
 			label={ label }
@@ -80,78 +87,236 @@ const defaultRenderToggle = ( {
 	);
 };
 
-class Inserter extends Component {
-	constructor() {
-		super( ...arguments );
+const InserterToggle = forwardRef( UnforwardedInserterToggle );
+
+const UnforwardedInserter = (
+	{
+		clientId,
+		rootClientId,
+		disabled,
+		isAppender,
+		position,
+		selectBlockOnInsert,
+		shouldDirectInsert = true,
+		showInserterHelpPanel,
+		// This prop is experimental to give some time for the quick inserter to mature
+		// Feel free to make them stable after a few releases.
+		__experimentalIsQuick: isQuick,
+		onSelectOrClose,
+		onToggle,
+		renderToggle: renderToggleProp,
+		toggleProps,
+	},
+	ref
+) => {
+	const {
+		hasItems,
+		hasSingleBlockType,
+		blockTitle,
+		allowedBlockType,
+		blockToInsert,
+		appenderLabel,
+		targetRootClientId,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				hasInserterItems,
+				getAllowedBlocks,
+				getDirectInsertBlock,
+				getBlockListSettings,
+			} = select( blockEditorStore );
+			const { getBlockVariations, getBlockType } = select( blocksStore );
 
-		this.onToggle = this.onToggle.bind( this );
-		this.renderToggle = this.renderToggle.bind( this );
-		this.renderContent = this.renderContent.bind( this );
+			const _targetRootClientId =
+				rootClientId || getBlockRootClientId( clientId ) || undefined;
+
+			const allowedBlocks = getAllowedBlocks( _targetRootClientId );
+			const directInsertBlock =
+				shouldDirectInsert &&
+				getDirectInsertBlock( _targetRootClientId );
+			const { defaultBlock } =
+				getBlockListSettings( _targetRootClientId ) ?? {};
+
+			const _hasSingleBlockType =
+				allowedBlocks?.length === 1 &&
+				getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
+					?.length === 0;
+			const _allowedBlockType = _hasSingleBlockType
+				? allowedBlocks[ 0 ]
+				: null;
+
+			// Single-block-type parents get adjacent-attribute copying
+			// without needing to set `directInsert: true`.
+			let _blockToInsert = directInsertBlock || null;
+			if (
+				! _blockToInsert &&
+				_hasSingleBlockType &&
+				defaultBlock?.name === _allowedBlockType.name
+			) {
+				_blockToInsert = defaultBlock;
+			}
+
+			const defaultBlockType = directInsertBlock
+				? getBlockType( directInsertBlock.name )
+				: null;
+			return {
+				hasItems: hasInserterItems( _targetRootClientId ),
+				hasSingleBlockType: _hasSingleBlockType,
+				blockTitle: _allowedBlockType ? _allowedBlockType.title : '',
+				allowedBlockType: _allowedBlockType,
+				blockToInsert: _blockToInsert,
+				appenderLabel: getAppenderLabel(
+					directInsertBlock,
+					defaultBlockType
+				),
+				targetRootClientId: _targetRootClientId,
+			};
+		},
+		[ rootClientId, clientId, shouldDirectInsert ]
+	);
+
+	const { insertBlock } = useDispatch( blockEditorStore );
+	const {
+		getBlock,
+		getBlockIndex,
+		getBlockOrder,
+		getBlockRootClientId,
+		getBlockSelectionEnd,
+		getPreviousBlockClientId,
+	} = useSelect( blockEditorStore );
+	const { getActiveBlockVariation, getBlockType } = useSelect( blocksStore );
+
+	// The global inserter (no isAppender, no rootClientId, no clientId) should
+	// always render, even with no items.
+	if ( ! hasItems && ( isAppender || targetRootClientId || clientId ) ) {
+		return null;
 	}
 
-	onToggle( isOpen ) {
-		const { onToggle } = this.props;
+	function insertOnlyAllowedBlock() {
+		const blockName = blockToInsert?.name ?? allowedBlockType.name;
 
-		// Surface toggle callback to parent component.
-		if ( onToggle ) {
-			onToggle( isOpen );
+		function getAdjacentBlockAttributes( attributesToCopy ) {
+			if ( ! attributesToCopy?.length ) {
+				return {};
+			}
+
+			// Find the adjacent block of the same type whose attributes
+			// should be copied: previous sibling when inserting next to
+			// an existing block, otherwise the last child of the root.
+			let adjacentAttributes;
+			if ( clientId ) {
+				const currentBlock = getBlock( clientId );
+				const previousBlock = getBlock(
+					getPreviousBlockClientId( clientId )
+				);
+				if ( currentBlock?.name === previousBlock?.name ) {
+					adjacentAttributes = previousBlock?.attributes;
+				}
+			} else if ( targetRootClientId ) {
+				const lastInnerBlock =
+					getBlock( targetRootClientId )?.innerBlocks?.at( -1 );
+				if ( lastInnerBlock?.name === blockName ) {
+					adjacentAttributes = lastInnerBlock.attributes;
+				}
+			}
+
+			if ( ! adjacentAttributes ) {
+				return {};
+			}
+
+			return Object.fromEntries(
+				attributesToCopy
+					.filter( ( attr ) => attr in adjacentAttributes )
+					.map( ( attr ) => [ attr, adjacentAttributes[ attr ] ] )
+			);
 		}
-	}
 
-	/**
-	 * Render callback to display Dropdown toggle element.
-	 *
-	 * @param {Object}   options
-	 * @param {Function} options.onToggle Callback to invoke when toggle is
-	 *                                    pressed.
-	 * @param {boolean}  options.isOpen   Whether dropdown is currently open.
-	 *
-	 * @return {Element} Dropdown toggle element.
-	 */
-	renderToggle( { onToggle, isOpen } ) {
-		const {
-			disabled,
-			blockTitle,
-			hasSingleBlockType,
-			appenderLabel,
-			toggleProps,
-			hasItems,
-			renderToggle = defaultRenderToggle,
-		} = this.props;
+		function getInsertionIndex() {
+			// If the clientId is defined, we insert at the position of the block.
+			if ( clientId ) {
+				return getBlockIndex( clientId );
+			}
+
+			// If there a selected block, we insert after the selected block.
+			const end = getBlockSelectionEnd();
+			if (
+				! isAppender &&
+				end &&
+				getBlockRootClientId( end ) === targetRootClientId
+			) {
+				return getBlockIndex( end ) + 1;
+			}
 
-		return renderToggle( {
-			onToggle,
+			// Otherwise, we insert at the end of the current rootClientId.
+			return getBlockOrder( targetRootClientId ).length;
+		}
+
+		// Attempt to augment the inserted block with attributes from an adjacent block.
+		// This ensures styling from nearby blocks is preserved in the newly inserted block.
+		// See: https://github.com/WordPress/gutenberg/issues/37904
+		const newAttributes = getAdjacentBlockAttributes(
+			blockToInsert?.attributesToCopy
+		);
+
+		const newBlock = createBlock( blockName, {
+			...blockToInsert?.attributes,
+			...newAttributes,
+		} );
+
+		insertBlock(
+			newBlock,
+			getInsertionIndex(),
+			targetRootClientId,
+			selectBlockOnInsert
+		);
+
+		onSelectOrClose?.( newBlock );
+
+		const blockTypeToInsert = getBlockType( blockName );
+		let blockLabelToInsert;
+		if ( blockTypeToInsert ) {
+			blockLabelToInsert = getBlockLabel(
+				blockTypeToInsert,
+				newBlock.attributes
+			);
+
+			if ( blockLabelToInsert === blockTypeToInsert.title ) {
+				blockLabelToInsert =
+					getActiveBlockVariation( blockName, newBlock.attributes )
+						?.title || blockLabelToInsert;
+			}
+		}
+
+		if ( blockLabelToInsert ) {
+			const message = sprintf(
+				// translators: %s: the name of the block that has been added
+				__( '%s block added' ),
+				blockLabelToInsert
+			);
+			speak( message );
+		}
+	}
+
+	function renderToggle( { onToggle: dropdownOnToggle, isOpen } ) {
+		const toggleArgs = {
+			onToggle: dropdownOnToggle,
 			isOpen,
 			disabled: disabled || ! hasItems,
 			blockTitle,
 			hasSingleBlockType,
 			appenderLabel,
 			toggleProps,
-		} );
-	}
+		};
+
+		if ( renderToggleProp ) {
+			return renderToggleProp( toggleArgs );
+		}
 
-	/**
-	 * Render callback to display Dropdown content element.
-	 *
-	 * @param {Object}   options
-	 * @param {Function} options.onClose Callback to invoke when dropdown is
-	 *                                   closed.
-	 *
-	 * @return {Element} Dropdown content element.
-	 */
-	renderContent( { onClose } ) {
-		const {
-			rootClientId,
-			clientId,
-			isAppender,
-			showInserterHelpPanel,
-			// This prop is experimental to give some time for the quick inserter to mature
-			// Feel free to make them stable after a few releases.
-			__experimentalIsQuick: isQuick,
-			onSelectOrClose,
-			selectBlockOnInsert,
-		} = this.props;
+		return <InserterToggle ref={ ref } { ...toggleArgs } />;
+	}
 
+	function renderContent( { onClose } ) {
 		if ( isQuick ) {
 			return (
 				<QuickInserter
@@ -168,7 +333,7 @@ class Inserter extends Component {
 						}
 						onClose();
 					} }
-					rootClientId={ rootClientId }
+					rootClientId={ targetRootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
 					selectBlockOnInsert={ selectBlockOnInsert }
@@ -182,7 +347,7 @@ class Inserter extends Component {
 					onClose();
 				} }
 				onClose={ onClose }
-				rootClientId={ rootClientId }
+				rootClientId={ targetRootClientId }
 				clientId={ clientId }
 				isAppender={ isAppender }
 				showInserterHelpPanel={ showInserterHelpPanel }
@@ -190,223 +355,27 @@ class Inserter extends Component {
 		);
 	}
 
-	render() {
-		const {
-			position,
-			hasSingleBlockType,
-			blockToInsert,
-			insertOnlyAllowedBlock,
-			__experimentalIsQuick: isQuick,
-			onSelectOrClose,
-		} = this.props;
-
-		if ( hasSingleBlockType || blockToInsert ) {
-			return this.renderToggle( { onToggle: insertOnlyAllowedBlock } );
-		}
-
-		return (
-			<Dropdown
-				className="block-editor-inserter"
-				contentClassName={ clsx( 'block-editor-inserter__popover', {
-					'is-quick': isQuick,
-				} ) }
-				popoverProps={ { position, shift: true } }
-				onToggle={ this.onToggle }
-				expandOnMobile
-				headerTitle={ __( 'Add a block' ) }
-				renderToggle={ this.renderToggle }
-				renderContent={ this.renderContent }
-				onClose={ onSelectOrClose }
-			/>
-		);
+	if ( hasSingleBlockType || blockToInsert ) {
+		return renderToggle( { onToggle: insertOnlyAllowedBlock } );
 	}
-}
-
-export default compose( [
-	withSelect(
-		( select, { clientId, rootClientId, shouldDirectInsert = true } ) => {
-			const {
-				getBlockRootClientId,
-				hasInserterItems,
-				getAllowedBlocks,
-				getDirectInsertBlock,
-				getBlockListSettings,
-			} = select( blockEditorStore );
-			const { getBlockVariations, getBlockType } = select( blocksStore );
-
-			rootClientId =
-				rootClientId || getBlockRootClientId( clientId ) || undefined;
-
-			const allowedBlocks = getAllowedBlocks( rootClientId );
-			const directInsertBlock =
-				shouldDirectInsert && getDirectInsertBlock( rootClientId );
-			const { defaultBlock } = getBlockListSettings( rootClientId ) ?? {};
-
-			const hasSingleBlockType =
-				allowedBlocks?.length === 1 &&
-				getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
-					?.length === 0;
-			const allowedBlockType = hasSingleBlockType
-				? allowedBlocks[ 0 ]
-				: null;
 
-			// Single-block-type parents get adjacent-attribute copying
-			// without needing to set `directInsert: true`.
-			let blockToInsert = directInsertBlock || null;
-			if (
-				! blockToInsert &&
-				hasSingleBlockType &&
-				defaultBlock?.name === allowedBlockType.name
-			) {
-				blockToInsert = defaultBlock;
-			}
-
-			const defaultBlockType = directInsertBlock
-				? getBlockType( directInsertBlock.name )
-				: null;
-			const appenderLabel = getAppenderLabel(
-				directInsertBlock,
-				defaultBlockType
-			);
-
-			return {
-				hasItems: hasInserterItems( rootClientId ),
-				hasSingleBlockType,
-				blockTitle: allowedBlockType ? allowedBlockType.title : '',
-				allowedBlockType,
-				blockToInsert,
-				appenderLabel,
-				rootClientId,
-			};
-		}
-	),
-	withDispatch( ( dispatch, ownProps, { select } ) => {
-		return {
-			insertOnlyAllowedBlock() {
-				const {
-					rootClientId,
-					clientId,
-					isAppender,
-					hasSingleBlockType,
-					allowedBlockType,
-					blockToInsert,
-					onSelectOrClose,
-					selectBlockOnInsert,
-				} = ownProps;
-
-				if ( ! hasSingleBlockType && ! blockToInsert ) {
-					return;
-				}
-
-				const blockName = blockToInsert?.name ?? allowedBlockType.name;
-
-				function getAdjacentBlockAttributes( attributesToCopy ) {
-					if ( ! attributesToCopy?.length ) {
-						return {};
-					}
-
-					const { getBlock, getPreviousBlockClientId } =
-						select( blockEditorStore );
-
-					// Find the adjacent block of the same type whose attributes
-					// should be copied: previous sibling when inserting next to
-					// an existing block, otherwise the last child of the root.
-					let adjacentAttributes;
-					if ( clientId ) {
-						const currentBlock = getBlock( clientId );
-						const previousBlock = getBlock(
-							getPreviousBlockClientId( clientId )
-						);
-						if ( currentBlock?.name === previousBlock?.name ) {
-							adjacentAttributes = previousBlock?.attributes;
-						}
-					} else if ( rootClientId ) {
-						const lastInnerBlock =
-							getBlock( rootClientId )?.innerBlocks?.at( -1 );
-						if ( lastInnerBlock?.name === blockName ) {
-							adjacentAttributes = lastInnerBlock.attributes;
-						}
-					}
-
-					if ( ! adjacentAttributes ) {
-						return {};
-					}
-
-					return Object.fromEntries(
-						attributesToCopy
-							.filter( ( attr ) => attr in adjacentAttributes )
-							.map( ( attr ) => [
-								attr,
-								adjacentAttributes[ attr ],
-							] )
-					);
-				}
-
-				function getInsertionIndex() {
-					const {
-						getBlockIndex,
-						getBlockSelectionEnd,
-						getBlockOrder,
-						getBlockRootClientId,
-					} = select( blockEditorStore );
-
-					// If the clientId is defined, we insert at the position of the block.
-					if ( clientId ) {
-						return getBlockIndex( clientId );
-					}
-
-					// If there a selected block, we insert after the selected block.
-					const end = getBlockSelectionEnd();
-					if (
-						! isAppender &&
-						end &&
-						getBlockRootClientId( end ) === rootClientId
-					) {
-						return getBlockIndex( end ) + 1;
-					}
-
-					// Otherwise, we insert at the end of the current rootClientId.
-					return getBlockOrder( rootClientId ).length;
-				}
-
-				const { insertBlock } = dispatch( blockEditorStore );
-
-				// Attempt to augment the inserted block with attributes from an adjacent block.
-				// This ensures styling from nearby blocks is preserved in the newly inserted block.
-				// See: https://github.com/WordPress/gutenberg/issues/37904
-				const newAttributes = getAdjacentBlockAttributes(
-					blockToInsert?.attributesToCopy
-				);
-
-				const newBlock = createBlock( blockName, {
-					...( blockToInsert?.attributes || {} ),
-					...newAttributes,
-				} );
-
-				insertBlock(
-					newBlock,
-					getInsertionIndex(),
-					rootClientId,
-					selectBlockOnInsert
-				);
+	return (
+		<Dropdown
+			className="block-editor-inserter"
+			contentClassName={ clsx( 'block-editor-inserter__popover', {
+				'is-quick': isQuick,
+			} ) }
+			popoverProps={ { position, shift: true } }
+			onToggle={ onToggle }
+			expandOnMobile
+			headerTitle={ __( 'Add a block' ) }
+			renderToggle={ renderToggle }
+			renderContent={ renderContent }
+			onClose={ onSelectOrClose }
+		/>
+	);
+};
 
-				if ( onSelectOrClose ) {
-					onSelectOrClose( newBlock );
-				}
+const Inserter = forwardRef( UnforwardedInserter );
 
-				const message = sprintf(
-					// translators: %s: the name of the block that has been added
-					__( '%s block added' ),
-					allowedBlockType.title
-				);
-				speak( message );
-			},
-		};
-	} ),
-	// The global inserter should always be visible, we are using ( ! isAppender && ! rootClientId && ! clientId ) as
-	// a way to detect the global Inserter.
-	ifCondition(
-		( { hasItems, isAppender, rootClientId, clientId } ) =>
-			hasItems || ( ! isAppender && ! rootClientId && ! clientId )
-	),
-] )( Inserter );
+export default Inserter;

package/src/components/inserter/search-results.js

@@ -181,9 +181,7 @@ function InserterSearchResults( {
 
 	const patternsUI = !! filteredBlockPatterns.length && (
 		<InserterPanel
-			title={
-				<VisuallyHidden>{ __( 'Block patterns' ) }</VisuallyHidden>
-			}
+			title={ <VisuallyHidden>{ __( 'Patterns' ) }</VisuallyHidden> }
 		>
 			<div className="block-editor-inserter__quick-inserter-patterns">
 				<BlockPatternsList

package/src/components/justify-content-control/README.md

@@ -27,7 +27,7 @@ const MyJustifyToolbar = ( { attributes, setAttributes } ) => (
 );
 ```
 
-**NOTE:** The justfify toolbar does not add any classes to your component, you must do this using the `setAttributes` function. The toolbar does define the following classnames you should use:
+**NOTE:** The justify toolbar does not add any classes to your component, you must do this using the `setAttributes` function. The toolbar does define the following classnames you should use:
 
     items-justified-left
     items-justified-center

package/src/components/list-view/block-select-button.js

@@ -36,7 +36,6 @@ import { useBlockLock } from '../block-lock';
 import useListViewImages from './use-list-view-images';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { getBlockVisibilityLabel } from '../block-visibility';
 
 const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
@@ -55,6 +54,7 @@ function ListViewBlockSelectButton(
 		draggable,
 		isExpanded,
 		ariaDescribedBy,
+		visibilityLabel,
 	},
 	ref
 ) {
@@ -64,14 +64,10 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const { hasPatternName, blockVisibility } = useSelect(
+	const hasPatternName = useSelect(
 		( select ) => {
 			const { getBlockAttributes } = unlock( select( blockEditorStore ) );
-			const attributes = getBlockAttributes( clientId );
-			return {
-				hasPatternName: !! attributes?.metadata?.patternName,
-				blockVisibility: attributes?.metadata?.blockVisibility,
-			};
+			return !! getBlockAttributes( clientId )?.metadata?.patternName;
 		},
 		[ clientId ]
 	);
@@ -80,9 +76,6 @@ function ListViewBlockSelectButton(
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
 
-	// Determine visibility label from blockVisibility metadata
-	const visibilityLabel = getBlockVisibilityLabel( blockVisibility );
-
 	// The `href` attribute triggers the browser's native HTML drag operations.
 	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
 	// We need to clear any HTML drag data to prevent `pasteHandler` from firing
@@ -166,9 +159,12 @@ function ListViewBlockSelectButton(
 					</span>
 				) : null }
 				{ !! visibilityLabel && (
-					// TODO: `visibilityLabel` is not exposed to
-					// assistive technology — the trigger is
-					// `aria-hidden`, so the label is sighted-hover-only.
+					// The tooltip below is a sighted-hover affordance for
+					// the (decorative) visibility icon. The same
+					// `visibilityLabel` is exposed to assistive technology
+					// via the row's `aria-describedby`, which references the
+					// hidden `AriaReferencedText` rendered by the parent
+					// `ListViewBlock`.
 					<Tooltip.Root>
 						<Tooltip.Trigger
 							render={

package/src/components/list-view/block.js

@@ -630,6 +630,7 @@ function ListViewBlock( {
 							isExpanded={ canEditBlock ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
 							ariaDescribedBy={ descriptionId }
+							visibilityLabel={ blockVisibilityDescription }
 						/>
 						<AriaReferencedText id={ descriptionId }>
 							{ [