@wordpress/block-editor 12.0.0 → 12.1.0

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

@@ -56,16 +56,18 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}         props                   Components props.
- * @param {string}         props.id                An HTML element id for the root element of ListView.
- * @param {Array}          props.blocks            _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {?boolean}       props.showBlockMovers   Flag to enable block movers. Defaults to `false`.
- * @param {?boolean}       props.isExpanded        Flag to determine whether nested levels are expanded by default. Defaults to `false`.
- * @param {?boolean}       props.showAppender      Flag to show or hide the block appender. Defaults to `false`.
- * @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
- * @param {string}         props.rootClientId      The client id of the root block from which we determine the blocks to show in the list.
- * @param {string}         props.description       Optional accessible description for the tree grid component.
- * @param {Ref}            ref                     Forwarded ref
+ * @param {Object}         props                         Components props.
+ * @param {string}         props.id                      An HTML element id for the root element of ListView.
+ * @param {Array}          props.blocks                  _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {?boolean}       props.showBlockMovers         Flag to enable block movers. Defaults to `false`.
+ * @param {?boolean}       props.isExpanded              Flag to determine whether nested levels are expanded by default. Defaults to `false`.
+ * @param {?boolean}       props.showAppender            Flag to show or hide the block appender. Defaults to `false`.
+ * @param {?ComponentType} props.blockSettingsMenu       Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
+ * @param {string}         props.rootClientId            The client id of the root block from which we determine the blocks to show in the list.
+ * @param {string}         props.description             Optional accessible description for the tree grid component.
+ * @param {?Function}      props.onSelect                Optional callback to be invoked when a block is selected. Receives the block object that was selected.
+ * @param {Function}       props.renderAdditionalBlockUI Function that renders additional block content UI.
+ * @param {Ref}            ref                           Forwarded ref
  */
 function ListViewComponent(
 	{
@@ -77,6 +79,8 @@ function ListViewComponent(
 		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
 		rootClientId,
 		description,
+		onSelect,
+		renderAdditionalBlockUI,
 	},
 	ref
 ) {
@@ -95,6 +99,7 @@ function ListViewComponent(
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( { blocks, rootClientId } );
 
+	const { getBlock } = useSelect( blockEditorStore );
 	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -128,11 +133,14 @@ function ListViewComponent(
 		setExpandedState,
 	} );
 	const selectEditorBlock = useCallback(
-		( event, clientId ) => {
-			updateBlockSelection( event, clientId );
-			setSelectedTreeId( clientId );
+		( event, blockClientId ) => {
+			updateBlockSelection( event, blockClientId );
+			setSelectedTreeId( blockClientId );
+			if ( onSelect ) {
+				onSelect( getBlock( blockClientId ) );
+			}
 		},
-		[ setSelectedTreeId, updateBlockSelection ]
+		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
 	useEffect( () => {
 		isMounted.current = true;
@@ -203,6 +211,7 @@ function ListViewComponent(
 			collapse,
 			BlockSettingsMenu,
 			listViewInstanceId: instanceId,
+			renderAdditionalBlockUI,
 		} ),
 		[
 			draggedClientIds,
@@ -211,6 +220,7 @@ function ListViewComponent(
 			collapse,
 			BlockSettingsMenu,
 			instanceId,
+			renderAdditionalBlockUI,
 		]
 	);
 
@@ -264,6 +274,8 @@ export default forwardRef( ( props, ref ) => {
 			showAppender={ false }
 			blockSettingsMenu={ BlockSettingsDropdown }
 			rootClientId={ null }
+			onSelect={ null }
+			renderAdditionalBlockUICallback={ null }
 		/>
 	);
 } );

package/src/components/list-view/style.scss

@@ -15,10 +15,10 @@
 	// Use position relative for row animation.
 	position: relative;
 
-	.components-button {
+	.block-editor-list-view-block-select-button {
 		// When a row is expanded, retain the dark color.
 		&[aria-expanded="true"] {
-			color: $gray-900;
+			color: inherit;
 		}
 
 		// Ensure that on hover, the admin color is still used.
@@ -376,6 +376,9 @@ $block-navigation-max-indent: 8;
 	}
 }
 
+// When updating the margin for each indentation level, the corresponding
+// indentation in `use-list-view-drop-zone.js` must be updated as well
+// to ensure the drop zone is aligned with the indentation.
 @for $i from 0 to $block-navigation-max-indent {
 	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander {
 		@if $i - 1 >= 0 {

package/src/components/list-view/test/use-list-view-drop-zone.js

@@ -1,7 +1,10 @@
 /**
  * Internal dependencies
  */
-import { getListViewDropTarget } from '../use-list-view-drop-zone';
+import {
+	getListViewDropTarget,
+	NESTING_LEVEL_INDENTATION,
+} from '../use-list-view-drop-zone';
 
 describe( 'getListViewDropTarget', () => {
 	const blocksData = [
@@ -15,10 +18,10 @@ describe( 'getListViewDropTarget', () => {
 					top: 50,
 					bottom: 100,
 					left: 10,
-					right: 100,
+					right: 300,
 					x: 10,
 					y: 50,
-					width: 90,
+					width: 290,
 					height: 50,
 				} ),
 			},
@@ -26,6 +29,7 @@ describe( 'getListViewDropTarget', () => {
 			isDraggedBlock: false,
 			isExpanded: true,
 			rootClientId: '',
+			nestingLevel: 1,
 		},
 		{
 			blockIndex: 0,
@@ -37,32 +41,56 @@ describe( 'getListViewDropTarget', () => {
 					top: 100,
 					bottom: 150,
 					left: 10,
-					right: 100,
+					right: 300,
 					x: 10,
 					y: 100,
-					width: 90,
+					width: 290,
 					height: 50,
 				} ),
 			},
-			innerBlockCount: 0,
+			innerBlockCount: 1,
 			isDraggedBlock: false,
-			isExpanded: false,
+			isExpanded: true,
 			rootClientId: 'block-1',
+			nestingLevel: 2,
 		},
 		{
-			blockIndex: 1,
+			blockIndex: 0,
 			canInsertDraggedBlocksAsChild: true,
 			canInsertDraggedBlocksAsSibling: true,
 			clientId: 'block-3',
 			element: {
 				getBoundingClientRect: () => ( {
 					top: 150,
-					bottom: 150,
+					bottom: 200,
 					left: 10,
-					right: 100,
+					right: 300,
 					x: 10,
 					y: 150,
-					width: 90,
+					width: 290,
+					height: 50,
+				} ),
+			},
+			innerBlockCount: 0,
+			isDraggedBlock: false,
+			isExpanded: true,
+			rootClientId: 'block-2',
+			nestingLevel: 3,
+		},
+		{
+			blockIndex: 1,
+			canInsertDraggedBlocksAsChild: true,
+			canInsertDraggedBlocksAsSibling: true,
+			clientId: 'block-4',
+			element: {
+				getBoundingClientRect: () => ( {
+					top: 200,
+					bottom: 250,
+					left: 10,
+					right: 300,
+					x: 10,
+					y: 200,
+					width: 290,
 					height: 50,
 				} ),
 			},
@@ -70,6 +98,7 @@ describe( 'getListViewDropTarget', () => {
 			isDraggedBlock: false,
 			isExpanded: false,
 			rootClientId: '',
+			nestingLevel: 1,
 		},
 	];
 
@@ -96,8 +125,55 @@ describe( 'getListViewDropTarget', () => {
 		} );
 	} );
 
+	it( 'should nest when dragging a block over the right side of the bottom half of a block nested to three levels', () => {
+		const position = { x: 250, y: 180 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 0,
+			dropPosition: 'inside',
+			rootClientId: 'block-3',
+		} );
+	} );
+
+	it( 'should drag below when positioned at the bottom half of a block nested to three levels, and over the third level horizontally', () => {
+		const position = { x: 10 + NESTING_LEVEL_INDENTATION * 3, y: 180 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-3',
+			dropPosition: 'bottom',
+			rootClientId: 'block-2',
+		} );
+	} );
+
+	it( 'should drag one level up below when positioned at the bottom half of a block nested to three levels, and over the second level horizontally', () => {
+		const position = { x: 10 + NESTING_LEVEL_INDENTATION * 2, y: 180 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-3',
+			dropPosition: 'bottom',
+			rootClientId: 'block-1',
+		} );
+	} );
+
+	it( 'should drag two levels up below when positioned at the bottom half of a block nested to three levels, and over the first level horizontally', () => {
+		const position = { x: 10 + NESTING_LEVEL_INDENTATION, y: 180 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-3',
+			dropPosition: 'bottom',
+			rootClientId: '',
+		} );
+	} );
+
 	it( 'should nest when dragging a block over the right side and bottom half of a collapsed block with children', () => {
-		const position = { x: 70, y: 90 };
+		const position = { x: 160, y: 90 };
 
 		const collapsedBlockData = [ ...blocksData ];
 

package/src/components/list-view/use-list-view-drop-zone.js

@@ -27,9 +27,9 @@ import { store as blockEditorStore } from '../../store';
  */
 
 /**
- * An array representing data for blocks in the DOM used by drag and drop.
+ * An object representing data for blocks in the DOM used by drag and drop.
  *
- * @typedef {Object} WPListViewDropZoneBlocks
+ * @typedef {Object} WPListViewDropZoneBlock
  * @property {string}  clientId                        The client id for the block.
  * @property {string}  rootClientId                    The root client id for the block.
  * @property {number}  blockIndex                      The block's index.
@@ -41,6 +41,12 @@ import { store as blockEditorStore } from '../../store';
  * @property {boolean} canInsertDraggedBlocksAsChild   Whether the dragged block can be a child of this block.
  */
 
+/**
+ * An array representing data for blocks in the DOM used by drag and drop.
+ *
+ * @typedef {WPListViewDropZoneBlock[]} WPListViewDropZoneBlocks
+ */
+
 /**
  * An object containing details of a drop target.
  *
@@ -52,19 +58,110 @@ import { store as blockEditorStore } from '../../store';
  *                                                  'inside' refers to nesting as an inner block.
  */
 
+// When the indentation level, the corresponding left margin in `style.scss`
+// must be updated as well to ensure the drop zone is aligned with the indentation.
+export const NESTING_LEVEL_INDENTATION = 28;
+
+/**
+ * Determines whether the user is positioning the dragged block to be
+ * moved up to a parent level.
+ *
+ * Determined based on nesting level indentation of the current block.
+ *
+ * @param {WPPoint} point        The point representing the cursor position when dragging.
+ * @param {DOMRect} rect         The rectangle.
+ * @param {number}  nestingLevel The nesting level of the block.
+ * @return {boolean} Whether the gesture is an upward gesture.
+ */
+function isUpGesture( point, rect, nestingLevel = 1 ) {
+	// If the block is nested, and the user is dragging to the bottom
+	// left of the block, then it is an upward gesture.
+	const blockIndentPosition =
+		rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+	return point.x < blockIndentPosition;
+}
+
+/**
+ * Returns how many nesting levels up the user is attempting to drag to.
+ *
+ * The relative parent level is calculated based on how far
+ * the cursor is from the provided nesting level (e.g. of a candidate block
+ * that the user is hovering over). The nesting level is considered "desired"
+ * because it is not guaranteed that the user will be able to drag to the desired level.
+ *
+ * The returned integer can be used to access an ascending array
+ * of parent blocks, where the first item is the block the user
+ * is hovering over, and the last item is the root block.
+ *
+ * @param {WPPoint} point        The point representing the cursor position when dragging.
+ * @param {DOMRect} rect         The rectangle.
+ * @param {number}  nestingLevel The nesting level of the block.
+ * @return {number} The desired relative parent level.
+ */
+function getDesiredRelativeParentLevel( point, rect, nestingLevel = 1 ) {
+	const blockIndentPosition =
+		rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+	const desiredParentLevel = Math.round(
+		( point.x - blockIndentPosition ) / NESTING_LEVEL_INDENTATION
+	);
+	return Math.abs( desiredParentLevel );
+}
+
+/**
+ * Returns an array of the parent blocks of the block the user is dropping to.
+ *
+ * @param {WPListViewDropZoneBlock}  candidateBlockData The block the user is dropping to.
+ * @param {WPListViewDropZoneBlocks} blocksData         Data about the blocks in list view.
+ * @return {WPListViewDropZoneBlocks} An array of block parents, including the block the user is dropping to.
+ */
+function getCandidateBlockParents( candidateBlockData, blocksData ) {
+	const candidateBlockParents = [];
+	let currentBlockData = candidateBlockData;
+
+	while ( currentBlockData ) {
+		candidateBlockParents.push( { ...currentBlockData } );
+		currentBlockData = blocksData.find(
+			( blockData ) =>
+				blockData.clientId === currentBlockData.rootClientId
+		);
+	}
+
+	return candidateBlockParents;
+}
+
+/**
+ * Given a list of blocks data and a block index, return the next non-dragged
+ * block. This is used to determine the block that the user is dropping to,
+ * while ignoring the dragged block.
+ *
+ * @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
+ * @param {number}                   index      The index to begin searching from.
+ * @return {WPListViewDropZoneBlock | undefined} The next non-dragged block.
+ */
+function getNextNonDraggedBlock( blocksData, index ) {
+	const nextBlockData = blocksData[ index + 1 ];
+	if ( nextBlockData && nextBlockData.isDraggedBlock ) {
+		return getNextNonDraggedBlock( blocksData, index + 1 );
+	}
+
+	return nextBlockData;
+}
+
 /**
  * Determines whether the user positioning the dragged block to nest as an
  * inner block.
  *
- * Presently this is determined by whether the cursor is on the right hand side
- * of the block.
+ * Determined based on nesting level indentation of the current block, plus
+ * the indentation of the next level of nesting.
  *
- * @param {WPPoint} point The point representing the cursor position when dragging.
- * @param {DOMRect} rect  The rectangle.
+ * @param {WPPoint} point        The point representing the cursor position when dragging.
+ * @param {DOMRect} rect         The rectangle.
+ * @param {number}  nestingLevel The nesting level of the block.
  */
-function isNestingGesture( point, rect ) {
-	const blockCenterX = rect.left + rect.width / 2;
-	return point.x > blockCenterX;
+function isNestingGesture( point, rect, nestingLevel = 1 ) {
+	const blockIndentPosition =
+		rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+	return point.x > blockIndentPosition + NESTING_LEVEL_INDENTATION;
 }
 
 // Block navigation is always a vertical list, so only allow dropping
@@ -84,8 +181,10 @@ export function getListViewDropTarget( blocksData, position ) {
 	let candidateBlockData;
 	let candidateDistance;
 	let candidateRect;
+	let candidateBlockIndex;
 
-	for ( const blockData of blocksData ) {
+	for ( let i = 0; i < blocksData.length; i++ ) {
+		const blockData = blocksData[ i ];
 		if ( blockData.isDraggedBlock ) {
 			continue;
 		}
@@ -121,10 +220,12 @@ export function getListViewDropTarget( blocksData, position ) {
 				candidateEdge = 'bottom';
 				candidateRect =
 					previousBlockData.element.getBoundingClientRect();
+				candidateBlockIndex = index - 1;
 			} else {
 				candidateBlockData = blockData;
 				candidateEdge = edge;
 				candidateRect = rect;
+				candidateBlockIndex = index;
 			}
 
 			// If the mouse position is within the block, break early
@@ -143,8 +244,79 @@ export function getListViewDropTarget( blocksData, position ) {
 		return;
 	}
 
+	const candidateBlockParents = getCandidateBlockParents(
+		candidateBlockData,
+		blocksData
+	);
+
 	const isDraggingBelow = candidateEdge === 'bottom';
 
+	// If the user is dragging towards the bottom of the block check whether
+	// they might be trying to move the block to be at a parent level.
+	if (
+		isDraggingBelow &&
+		candidateBlockData.rootClientId &&
+		isUpGesture( position, candidateRect, candidateBlockParents.length )
+	) {
+		const nextBlock = getNextNonDraggedBlock(
+			blocksData,
+			candidateBlockIndex
+		);
+		const currentLevel = candidateBlockData.nestingLevel;
+		const nextLevel = nextBlock ? nextBlock.nestingLevel : 1;
+
+		if ( currentLevel && nextLevel ) {
+			// Determine the desired relative level of the block to be dropped.
+			const desiredRelativeLevel = getDesiredRelativeParentLevel(
+				position,
+				candidateRect,
+				candidateBlockParents.length
+			);
+
+			const targetParentIndex = Math.max(
+				Math.min( desiredRelativeLevel, currentLevel - nextLevel ),
+				0
+			);
+
+			if ( candidateBlockParents[ targetParentIndex ] ) {
+				// Default to the block index of the candidate block.
+				let newBlockIndex = candidateBlockData.blockIndex;
+
+				// If the next block is at the same level, use that as the default
+				// block index. This ensures that the block is dropped in the correct
+				// position when dragging to the bottom of a block.
+				if (
+					candidateBlockParents[ targetParentIndex ].nestingLevel ===
+					nextBlock?.nestingLevel
+				) {
+					newBlockIndex = nextBlock?.blockIndex;
+				} else {
+					// Otherwise, search from the current block index back
+					// to find the last block index within the same target parent.
+					for ( let i = candidateBlockIndex; i >= 0; i-- ) {
+						const blockData = blocksData[ i ];
+						if (
+							blockData.rootClientId ===
+							candidateBlockParents[ targetParentIndex ]
+								.rootClientId
+						) {
+							newBlockIndex = blockData.blockIndex + 1;
+							break;
+						}
+					}
+				}
+
+				return {
+					rootClientId:
+						candidateBlockParents[ targetParentIndex ].rootClientId,
+					clientId: candidateBlockData.clientId,
+					blockIndex: newBlockIndex,
+					dropPosition: candidateEdge,
+				};
+			}
+		}
+	}
+
 	// If the user is dragging towards the bottom of the block check whether
 	// they might be trying to nest the block as a child.
 	// If the block already has inner blocks, and is expanded, this should be treated
@@ -156,7 +328,11 @@ export function getListViewDropTarget( blocksData, position ) {
 		candidateBlockData.canInsertDraggedBlocksAsChild &&
 		( ( candidateBlockData.innerBlockCount > 0 &&
 			candidateBlockData.isExpanded ) ||
-			isNestingGesture( position, candidateRect ) )
+			isNestingGesture(
+				position,
+				candidateRect,
+				candidateBlockParents.length
+			) )
 	) {
 		return {
 			rootClientId: candidateBlockData.clientId,
@@ -213,6 +389,12 @@ export default function useListViewDropZone() {
 				const blocksData = blockElements.map( ( blockElement ) => {
 					const clientId = blockElement.dataset.block;
 					const isExpanded = blockElement.dataset.expanded === 'true';
+
+					// Get nesting level from `aria-level` attribute because Firefox does not support `element.ariaLevel`.
+					const nestingLevel = parseInt(
+						blockElement.getAttribute( 'aria-level' ),
+						10
+					);
 					const rootClientId = getBlockRootClientId( clientId );
 
 					return {
@@ -221,6 +403,7 @@ export default function useListViewDropZone() {
 						rootClientId,
 						blockIndex: getBlockIndex( clientId ),
 						element: blockElement,
+						nestingLevel: nestingLevel || undefined,
 						isDraggedBlock: isBlockDrag
 							? draggedBlockClientIds.includes( clientId )
 							: false,

package/src/components/media-placeholder/index.js

@@ -17,6 +17,8 @@ import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { keyboardReturn } from '@wordpress/icons';
+import { pasteHandler } from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -74,12 +76,19 @@ export function MediaPlaceholder( {
 	onToggleFeaturedImage,
 	onDoubleClick,
 	onFilesPreUpload = noop,
-	onHTMLDrop = noop,
+	onHTMLDrop: deprecatedOnHTMLDrop,
 	children,
 	mediaLibraryButton,
 	placeholder,
 	style,
 } ) {
+	if ( deprecatedOnHTMLDrop ) {
+		deprecated( 'wp.blockEditor.MediaPlaceholder onHTMLDrop prop', {
+			since: '6.2',
+			version: '6.4',
+		} );
+	}
+
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().mediaUpload;
@@ -177,6 +186,70 @@ export function MediaPlaceholder( {
 		} );
 	};
 
+	async function handleBlocksDrop( blocks ) {
+		if ( ! blocks || ! Array.isArray( blocks ) ) {
+			return;
+		}
+
+		function recursivelyFindMediaFromBlocks( _blocks ) {
+			return _blocks.flatMap( ( block ) =>
+				( block.name === 'core/image' ||
+					block.name === 'core/audio' ||
+					block.name === 'core/video' ) &&
+				block.attributes.url
+					? [ block ]
+					: recursivelyFindMediaFromBlocks( block.innerBlocks )
+			);
+		}
+
+		const mediaBlocks = recursivelyFindMediaFromBlocks( blocks );
+
+		if ( ! mediaBlocks.length ) {
+			return;
+		}
+
+		const uploadedMediaList = await Promise.all(
+			mediaBlocks.map( ( block ) =>
+				block.attributes.id
+					? block.attributes
+					: new Promise( ( resolve, reject ) => {
+							window
+								.fetch( block.attributes.url )
+								.then( ( response ) => response.blob() )
+								.then( ( blob ) =>
+									mediaUpload( {
+										filesList: [ blob ],
+										additionalData: {
+											title: block.attributes.title,
+											alt_text: block.attributes.alt,
+											caption: block.attributes.caption,
+										},
+										onFileChange: ( [ media ] ) => {
+											if ( media.id ) {
+												resolve( media );
+											}
+										},
+										allowedTypes,
+										onError: reject,
+									} )
+								)
+								.catch( () => resolve( block.attributes.url ) );
+					  } )
+			)
+		).catch( ( err ) => onError( err ) );
+
+		if ( multiple ) {
+			onSelect( uploadedMediaList );
+		} else {
+			onSelect( uploadedMediaList[ 0 ] );
+		}
+	}
+
+	async function onHTMLDrop( HTML ) {
+		const blocks = pasteHandler( { HTML } );
+		return await handleBlocksDrop( blocks );
+	}
+
 	const onUpload = ( event ) => {
 		onFilesUpload( event.target.files );
 	};

package/src/components/multi-selection-inspector/index.js

@@ -23,14 +23,14 @@ function MultiSelectionInspector( { blocks } ) {
 				<div className="block-editor-multi-selection-inspector__card-title">
 					{ sprintf(
 						/* translators: %d: number of blocks */
-						_n( '%d block', '%d blocks', blocks.length ),
+						_n( '%d Block', '%d Blocks', blocks.length ),
 						blocks.length
 					) }
 				</div>
 				<div className="block-editor-multi-selection-inspector__card-description">
 					{ sprintf(
 						/* translators: %d: number of words */
-						_n( '%d word', '%d words', words ),
+						_n( '%d word selected.', '%d words selected.', words ),
 						words
 					) }
 				</div>

package/src/components/off-canvas-editor/leaf-more-menu.js

@@ -88,7 +88,8 @@ function AddSubmenuItem( { block, onClose } ) {
 }
 
 export default function LeafMoreMenu( props ) {
-	const { clientId, block } = props;
+	const { block } = props;
+	const { clientId } = block;
 
 	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
 		useDispatch( blockEditorStore );