@wordpress/block-editor 12.24.0 → 12.25.0

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

@@ -6,7 +6,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	Button,
 	__experimentalHStack as HStack,
@@ -15,11 +14,8 @@ import {
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
-import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { SPACE, ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
-import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -29,9 +25,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
-import { store as blockEditorStore } from '../../store';
 import useListViewImages from './use-list-view-images';
-import { useListViewContext } from './context';
 
 function ListViewBlockSelectButton(
 	{
@@ -48,7 +42,6 @@ function ListViewBlockSelectButton(
 		draggable,
 		isExpanded,
 		ariaDescribedBy,
-		updateFocusAndSelection,
 	},
 	ref
 ) {
@@ -58,27 +51,8 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const {
-		canInsertBlockType,
-		getSelectedBlockClientIds,
-		getPreviousBlockClientId,
-		getBlockRootClientId,
-		getBlockOrder,
-		getBlockParents,
-		getBlocksByClientId,
-		canRemoveBlocks,
-	} = useSelect( blockEditorStore );
-	const {
-		duplicateBlocks,
-		multiSelect,
-		removeBlocks,
-		insertAfterBlock,
-		insertBeforeBlock,
-	} = useDispatch( blockEditorStore );
-	const isMatch = useShortcutEventMatch();
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
-	const { collapseAll, expand, rootClientId } = useListViewContext();
 
 	const positionLabel = blockInformation?.positionLabel
 		? sprintf(
@@ -97,256 +71,89 @@ function ListViewBlockSelectButton(
 		onDragStart?.( event );
 	};
 
-	// Determine which blocks to update:
-	// If the current (focused) block is part of the block selection, use the whole selection.
-	// If the focused block is not part of the block selection, only update the focused block.
-	function getBlocksToUpdate() {
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-		const isUpdatingSelectedBlocks =
-			selectedBlockClientIds.includes( clientId );
-		const firstBlockClientId = isUpdatingSelectedBlocks
-			? selectedBlockClientIds[ 0 ]
-			: clientId;
-		const firstBlockRootClientId =
-			getBlockRootClientId( firstBlockClientId );
-
-		const blocksToUpdate = isUpdatingSelectedBlocks
-			? selectedBlockClientIds
-			: [ clientId ];
-
-		return {
-			blocksToUpdate,
-			firstBlockClientId,
-			firstBlockRootClientId,
-			selectedBlockClientIds,
-		};
-	}
-
 	/**
 	 * @param {KeyboardEvent} event
 	 */
-	async function onKeyDownHandler( event ) {
+	function onKeyDown( event ) {
 		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
 			onClick( event );
-		} else if (
-			event.keyCode === BACKSPACE ||
-			event.keyCode === DELETE ||
-			isMatch( 'core/block-editor/remove', event )
-		) {
-			const {
-				blocksToUpdate: blocksToDelete,
-				firstBlockClientId,
-				firstBlockRootClientId,
-				selectedBlockClientIds,
-			} = getBlocksToUpdate();
-
-			// Don't update the selection if the blocks cannot be deleted.
-			if ( ! canRemoveBlocks( blocksToDelete, firstBlockRootClientId ) ) {
-				return;
-			}
-
-			let blockToFocus =
-				getPreviousBlockClientId( firstBlockClientId ) ??
-				// If the previous block is not found (when the first block is deleted),
-				// fallback to focus the parent block.
-				firstBlockRootClientId;
-
-			removeBlocks( blocksToDelete, false );
-
-			// Update the selection if the original selection has been removed.
-			const shouldUpdateSelection =
-				selectedBlockClientIds.length > 0 &&
-				getSelectedBlockClientIds().length === 0;
-
-			// If there's no previous block nor parent block, focus the first block.
-			if ( ! blockToFocus ) {
-				blockToFocus = getBlockOrder()[ 0 ];
-			}
-
-			updateFocusAndSelection( blockToFocus, shouldUpdateSelection );
-		} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {
-			if ( event.defaultPrevented ) {
-				return;
-			}
-			event.preventDefault();
-
-			const { blocksToUpdate, firstBlockRootClientId } =
-				getBlocksToUpdate();
-
-			const canDuplicate = getBlocksByClientId( blocksToUpdate ).every(
-				( block ) => {
-					return (
-						!! block &&
-						hasBlockSupport( block.name, 'multiple', true ) &&
-						canInsertBlockType( block.name, firstBlockRootClientId )
-					);
-				}
-			);
-
-			if ( canDuplicate ) {
-				const updatedBlocks = await duplicateBlocks(
-					blocksToUpdate,
-					false
-				);
-
-				if ( updatedBlocks?.length ) {
-					// If blocks have been duplicated, focus the first duplicated block.
-					updateFocusAndSelection( updatedBlocks[ 0 ], false );
-				}
-			}
-		} else if ( isMatch( 'core/block-editor/insert-before', event ) ) {
-			if ( event.defaultPrevented ) {
-				return;
-			}
-			event.preventDefault();
-
-			const { blocksToUpdate } = getBlocksToUpdate();
-			await insertBeforeBlock( blocksToUpdate[ 0 ] );
-			const newlySelectedBlocks = getSelectedBlockClientIds();
-
-			// Focus the first block of the newly inserted blocks, to keep focus within the list view.
-			updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
-		} else if ( isMatch( 'core/block-editor/insert-after', event ) ) {
-			if ( event.defaultPrevented ) {
-				return;
-			}
-			event.preventDefault();
-
-			const { blocksToUpdate } = getBlocksToUpdate();
-			await insertAfterBlock( blocksToUpdate.at( -1 ) );
-			const newlySelectedBlocks = getSelectedBlockClientIds();
-
-			// Focus the first block of the newly inserted blocks, to keep focus within the list view.
-			updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
-		} else if ( isMatch( 'core/block-editor/select-all', event ) ) {
-			if ( event.defaultPrevented ) {
-				return;
-			}
-			event.preventDefault();
-
-			const { firstBlockRootClientId, selectedBlockClientIds } =
-				getBlocksToUpdate();
-			const blockClientIds = getBlockOrder( firstBlockRootClientId );
-			if ( ! blockClientIds.length ) {
-				return;
-			}
-
-			// If we have selected all sibling nested blocks, try selecting up a level.
-			// This is a similar implementation to that used by `useSelectAll`.
-			// `isShallowEqual` is used for the list view instead of a length check,
-			// as the array of siblings of the currently focused block may be a different
-			// set of blocks from the current block selection if the user is focused
-			// on a different part of the list view from the block selection.
-			if ( isShallowEqual( selectedBlockClientIds, blockClientIds ) ) {
-				// Only select up a level if the first block is not the root block.
-				// This ensures that the block selection can't break out of the root block
-				// used by the list view, if the list view is only showing a partial hierarchy.
-				if (
-					firstBlockRootClientId &&
-					firstBlockRootClientId !== rootClientId
-				) {
-					updateFocusAndSelection( firstBlockRootClientId, true );
-					return;
-				}
-			}
-
-			// Select all while passing `null` to skip focusing to the editor canvas,
-			// and retain focus within the list view.
-			multiSelect(
-				blockClientIds[ 0 ],
-				blockClientIds[ blockClientIds.length - 1 ],
-				null
-			);
-		} else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) {
-			if ( event.defaultPrevented ) {
-				return;
-			}
-			event.preventDefault();
-			const { firstBlockClientId } = getBlocksToUpdate();
-			const blockParents = getBlockParents( firstBlockClientId, false );
-			// Collapse all blocks.
-			collapseAll();
-			// Expand all parents of the current block.
-			expand( blockParents );
 		}
 	}
 
 	return (
-		<>
-			<Button
-				className={ classnames(
-					'block-editor-list-view-block-select-button',
-					className
-				) }
-				onClick={ onClick }
-				onContextMenu={ onContextMenu }
-				onKeyDown={ onKeyDownHandler }
-				onMouseDown={ onMouseDown }
-				ref={ ref }
-				tabIndex={ tabIndex }
-				onFocus={ onFocus }
-				onDragStart={ onDragStartHandler }
-				onDragEnd={ onDragEnd }
-				draggable={ draggable }
-				href={ `#block-${ clientId }` }
-				aria-describedby={ ariaDescribedBy }
-				aria-expanded={ isExpanded }
+		<Button
+			className={ classnames(
+				'block-editor-list-view-block-select-button',
+				className
+			) }
+			onClick={ onClick }
+			onContextMenu={ onContextMenu }
+			onKeyDown={ onKeyDown }
+			onMouseDown={ onMouseDown }
+			ref={ ref }
+			tabIndex={ tabIndex }
+			onFocus={ onFocus }
+			onDragStart={ onDragStartHandler }
+			onDragEnd={ onDragEnd }
+			draggable={ draggable }
+			href={ `#block-${ clientId }` }
+			aria-describedby={ ariaDescribedBy }
+			aria-expanded={ isExpanded }
+		>
+			<ListViewExpander onClick={ onToggleExpanded } />
+			<BlockIcon
+				icon={ blockInformation?.icon }
+				showColors
+				context="list-view"
+			/>
+			<HStack
+				alignment="center"
+				className="block-editor-list-view-block-select-button__label-wrapper"
+				justify="flex-start"
+				spacing={ 1 }
 			>
-				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon
-					icon={ blockInformation?.icon }
-					showColors
-					context="list-view"
-				/>
-				<HStack
-					alignment="center"
-					className="block-editor-list-view-block-select-button__label-wrapper"
-					justify="flex-start"
-					spacing={ 1 }
-				>
-					<span className="block-editor-list-view-block-select-button__title">
-						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
-					</span>
-					{ blockInformation?.anchor && (
-						<span className="block-editor-list-view-block-select-button__anchor-wrapper">
-							<Truncate
-								className="block-editor-list-view-block-select-button__anchor"
-								ellipsizeMode="auto"
-							>
-								{ blockInformation.anchor }
-							</Truncate>
-						</span>
-					) }
-					{ positionLabel && isSticky && (
-						<Tooltip text={ positionLabel }>
-							<Icon icon={ pinSmall } />
-						</Tooltip>
-					) }
-					{ images.length ? (
-						<span
-							className="block-editor-list-view-block-select-button__images"
-							aria-hidden
+				<span className="block-editor-list-view-block-select-button__title">
+					<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
+				</span>
+				{ blockInformation?.anchor && (
+					<span className="block-editor-list-view-block-select-button__anchor-wrapper">
+						<Truncate
+							className="block-editor-list-view-block-select-button__anchor"
+							ellipsizeMode="auto"
 						>
-							{ images.map( ( image, index ) => (
-								<span
-									className="block-editor-list-view-block-select-button__image"
-									key={ image.clientId }
-									style={ {
-										backgroundImage: `url(${ image.url })`,
-										zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.
-									} }
-								/>
-							) ) }
-						</span>
-					) : null }
-					{ isLocked && (
-						<span className="block-editor-list-view-block-select-button__lock">
-							<Icon icon={ lock } />
-						</span>
-					) }
-				</HStack>
-			</Button>
-		</>
+							{ blockInformation.anchor }
+						</Truncate>
+					</span>
+				) }
+				{ positionLabel && isSticky && (
+					<Tooltip text={ positionLabel }>
+						<Icon icon={ pinSmall } />
+					</Tooltip>
+				) }
+				{ images.length ? (
+					<span
+						className="block-editor-list-view-block-select-button__images"
+						aria-hidden
+					>
+						{ images.map( ( image, index ) => (
+							<span
+								className="block-editor-list-view-block-select-button__image"
+								key={ image.clientId }
+								style={ {
+									backgroundImage: `url(${ image.url })`,
+									zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.
+								} }
+							/>
+						) ) }
+					</span>
+				) : null }
+				{ isLocked && (
+					<span className="block-editor-list-view-block-select-button__lock">
+						<Icon icon={ lock } />
+					</span>
+				) }
+			</HStack>
+		</Button>
 	);
 }
 

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

@@ -22,7 +22,9 @@ import {
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { ESCAPE } from '@wordpress/keycodes';
+import { BACKSPACE, DELETE } from '@wordpress/keycodes';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -44,6 +46,7 @@ import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 import AriaReferencedText from './aria-referenced-text';
+import { unlock } from '../../lock-unlock';
 
 function ListViewBlock( {
 	block: { clientId },
@@ -78,29 +81,49 @@ function ListViewBlock( {
 		isSelected &&
 		selectedClientIds[ selectedClientIds.length - 1 ] === clientId;
 
-	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
-
-	const blockInformation = useBlockDisplayInformation( clientId );
+	const {
+		toggleBlockHighlight,
+		duplicateBlocks,
+		multiSelect,
+		removeBlocks,
+		insertAfterBlock,
+		insertBeforeBlock,
+		setOpenedBlockSettingsMenu,
+	} = unlock( useDispatch( blockEditorStore ) );
 
-	const { block, blockName, blockEditingMode } = useSelect(
-		( select ) => {
-			const { getBlock, getBlockName, getBlockEditingMode } =
-				select( blockEditorStore );
+	const {
+		canInsertBlockType,
+		getSelectedBlockClientIds,
+		getPreviousBlockClientId,
+		getBlockRootClientId,
+		getBlockOrder,
+		getBlockParents,
+		getBlocksByClientId,
+		canRemoveBlocks,
+	} = useSelect( blockEditorStore );
 
-			return {
-				block: getBlock( clientId ),
-				blockName: getBlockName( clientId ),
-				blockEditingMode: getBlockEditingMode( clientId ),
-			};
-		},
-		[ clientId ]
-	);
+	const blockInformation = useBlockDisplayInformation( clientId );
 
-	const allowRightClickOverrides = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings().allowRightClickOverrides,
-		[]
-	);
+	const { block, blockName, blockEditingMode, allowRightClickOverrides } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlock,
+					getBlockName,
+					getBlockEditingMode,
+					getSettings,
+				} = select( blockEditorStore );
+
+				return {
+					block: getBlock( clientId ),
+					blockName: getBlockName( clientId ),
+					blockEditingMode: getBlockEditingMode( clientId ),
+					allowRightClickOverrides:
+						getSettings().allowRightClickOverrides,
+				};
+			},
+			[ clientId ]
+		);
 
 	const showBlockActions =
 		// When a block hides its toolbar it also hides the block settings menu,
@@ -115,26 +138,194 @@ function ListViewBlock( {
 	const {
 		expand,
 		collapse,
+		collapseAll,
 		BlockSettingsMenu,
 		listViewInstanceId,
 		expandedState,
 		setInsertedBlock,
 		treeGridElementRef,
+		rootClientId,
 	} = useListViewContext();
+	const isMatch = useShortcutEventMatch();
+
+	// Determine which blocks to update:
+	// If the current (focused) block is part of the block selection, use the whole selection.
+	// If the focused block is not part of the block selection, only update the focused block.
+	function getBlocksToUpdate() {
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const isUpdatingSelectedBlocks =
+			selectedBlockClientIds.includes( clientId );
+		const firstBlockClientId = isUpdatingSelectedBlocks
+			? selectedBlockClientIds[ 0 ]
+			: clientId;
+		const firstBlockRootClientId =
+			getBlockRootClientId( firstBlockClientId );
+
+		const blocksToUpdate = isUpdatingSelectedBlocks
+			? selectedBlockClientIds
+			: [ clientId ];
 
-	// If multiple blocks are selected, deselect all blocks when the user
-	// presses the escape key.
-	const onKeyDown = ( event ) => {
+		return {
+			blocksToUpdate,
+			firstBlockClientId,
+			firstBlockRootClientId,
+			selectedBlockClientIds,
+		};
+	}
+
+	/**
+	 * @param {KeyboardEvent} event
+	 */
+	async function onKeyDown( event ) {
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		// If multiple blocks are selected, deselect all blocks when the user
+		// presses the escape key.
 		if (
-			event.keyCode === ESCAPE &&
-			! event.defaultPrevented &&
+			isMatch( 'core/block-editor/unselect', event ) &&
 			selectedClientIds.length > 0
 		) {
 			event.stopPropagation();
 			event.preventDefault();
 			selectBlock( event, undefined );
+		} else if (
+			event.keyCode === BACKSPACE ||
+			event.keyCode === DELETE ||
+			isMatch( 'core/block-editor/remove', event )
+		) {
+			const {
+				blocksToUpdate: blocksToDelete,
+				firstBlockClientId,
+				firstBlockRootClientId,
+				selectedBlockClientIds,
+			} = getBlocksToUpdate();
+
+			// Don't update the selection if the blocks cannot be deleted.
+			if ( ! canRemoveBlocks( blocksToDelete, firstBlockRootClientId ) ) {
+				return;
+			}
+
+			let blockToFocus =
+				getPreviousBlockClientId( firstBlockClientId ) ??
+				// If the previous block is not found (when the first block is deleted),
+				// fallback to focus the parent block.
+				firstBlockRootClientId;
+
+			removeBlocks( blocksToDelete, false );
+
+			// Update the selection if the original selection has been removed.
+			const shouldUpdateSelection =
+				selectedBlockClientIds.length > 0 &&
+				getSelectedBlockClientIds().length === 0;
+
+			// If there's no previous block nor parent block, focus the first block.
+			if ( ! blockToFocus ) {
+				blockToFocus = getBlockOrder()[ 0 ];
+			}
+
+			updateFocusAndSelection( blockToFocus, shouldUpdateSelection );
+		} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {
+			event.preventDefault();
+
+			const { blocksToUpdate, firstBlockRootClientId } =
+				getBlocksToUpdate();
+
+			const canDuplicate = getBlocksByClientId( blocksToUpdate ).every(
+				( blockToUpdate ) => {
+					return (
+						!! blockToUpdate &&
+						hasBlockSupport(
+							blockToUpdate.name,
+							'multiple',
+							true
+						) &&
+						canInsertBlockType(
+							blockToUpdate.name,
+							firstBlockRootClientId
+						)
+					);
+				}
+			);
+
+			if ( canDuplicate ) {
+				const updatedBlocks = await duplicateBlocks(
+					blocksToUpdate,
+					false
+				);
+
+				if ( updatedBlocks?.length ) {
+					// If blocks have been duplicated, focus the first duplicated block.
+					updateFocusAndSelection( updatedBlocks[ 0 ], false );
+				}
+			}
+		} else if ( isMatch( 'core/block-editor/insert-before', event ) ) {
+			event.preventDefault();
+
+			const { blocksToUpdate } = getBlocksToUpdate();
+			await insertBeforeBlock( blocksToUpdate[ 0 ] );
+			const newlySelectedBlocks = getSelectedBlockClientIds();
+
+			// Focus the first block of the newly inserted blocks, to keep focus within the list view.
+			setOpenedBlockSettingsMenu( undefined );
+			updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
+		} else if ( isMatch( 'core/block-editor/insert-after', event ) ) {
+			event.preventDefault();
+
+			const { blocksToUpdate } = getBlocksToUpdate();
+			await insertAfterBlock( blocksToUpdate.at( -1 ) );
+			const newlySelectedBlocks = getSelectedBlockClientIds();
+
+			// Focus the first block of the newly inserted blocks, to keep focus within the list view.
+			setOpenedBlockSettingsMenu( undefined );
+			updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
+		} else if ( isMatch( 'core/block-editor/select-all', event ) ) {
+			event.preventDefault();
+
+			const { firstBlockRootClientId, selectedBlockClientIds } =
+				getBlocksToUpdate();
+			const blockClientIds = getBlockOrder( firstBlockRootClientId );
+			if ( ! blockClientIds.length ) {
+				return;
+			}
+
+			// If we have selected all sibling nested blocks, try selecting up a level.
+			// This is a similar implementation to that used by `useSelectAll`.
+			// `isShallowEqual` is used for the list view instead of a length check,
+			// as the array of siblings of the currently focused block may be a different
+			// set of blocks from the current block selection if the user is focused
+			// on a different part of the list view from the block selection.
+			if ( isShallowEqual( selectedBlockClientIds, blockClientIds ) ) {
+				// Only select up a level if the first block is not the root block.
+				// This ensures that the block selection can't break out of the root block
+				// used by the list view, if the list view is only showing a partial hierarchy.
+				if (
+					firstBlockRootClientId &&
+					firstBlockRootClientId !== rootClientId
+				) {
+					updateFocusAndSelection( firstBlockRootClientId, true );
+					return;
+				}
+			}
+
+			// Select all while passing `null` to skip focusing to the editor canvas,
+			// and retain focus within the list view.
+			multiSelect(
+				blockClientIds[ 0 ],
+				blockClientIds[ blockClientIds.length - 1 ],
+				null
+			);
+		} else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) {
+			event.preventDefault();
+			const { firstBlockClientId } = getBlocksToUpdate();
+			const blockParents = getBlockParents( firstBlockClientId, false );
+			// Collapse all blocks.
+			collapseAll();
+			// Expand all parents of the current block.
+			expand( blockParents );
 		}
-	};
+	}
 
 	const onMouseEnter = useCallback( () => {
 		setIsHovered( true );
@@ -345,7 +536,6 @@ function ListViewBlock( {
 							isExpanded={ canEdit ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
 							ariaDescribedBy={ descriptionId }
-							updateFocusAndSelection={ updateFocusAndSelection }
 						/>
 						<AriaReferencedText id={ descriptionId }>
 							{ `${ blockPositionDescription } ${ blockPropertiesDescription }` }

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

@@ -64,7 +64,7 @@ const expanded = ( state, action ) => {
 	return state;
 };
 
-export const BLOCK_LIST_ITEM_HEIGHT = 36;
+export const BLOCK_LIST_ITEM_HEIGHT = 32;
 
 /** @typedef {import('react').ComponentType} ComponentType */
 /** @typedef {import('react').Ref<HTMLElement>} Ref */