@wordpress/block-editor 12.8.0 → 12.9.0

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

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	Button,
 	__experimentalHStack as HStack,
@@ -55,13 +56,15 @@ function ListViewBlockSelectButton(
 	} );
 	const { isLocked } = useBlockLock( clientId );
 	const {
+		canInsertBlockType,
 		getSelectedBlockClientIds,
 		getPreviousBlockClientId,
 		getBlockRootClientId,
 		getBlockOrder,
+		getBlocksByClientId,
 		canRemoveBlocks,
 	} = useSelect( blockEditorStore );
-	const { removeBlocks } = useDispatch( blockEditorStore );
+	const { duplicateBlocks, removeBlocks } = useDispatch( blockEditorStore );
 	const isMatch = useShortcutEventMatch();
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
@@ -83,10 +86,35 @@ 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
 	 */
-	function onKeyDownHandler( event ) {
+	async function onKeyDownHandler( event ) {
 		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
 			onClick( event );
 		} else if (
@@ -94,18 +122,12 @@ function ListViewBlockSelectButton(
 			event.keyCode === DELETE ||
 			isMatch( 'core/block-editor/remove', event )
 		) {
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const isDeletingSelectedBlocks =
-				selectedBlockClientIds.includes( clientId );
-			const firstBlockClientId = isDeletingSelectedBlocks
-				? selectedBlockClientIds[ 0 ]
-				: clientId;
-			const firstBlockRootClientId =
-				getBlockRootClientId( firstBlockClientId );
-
-			const blocksToDelete = isDeletingSelectedBlocks
-				? selectedBlockClientIds
-				: [ clientId ];
+			const {
+				blocksToUpdate: blocksToDelete,
+				firstBlockClientId,
+				firstBlockRootClientId,
+				selectedBlockClientIds,
+			} = getBlocksToUpdate();
 
 			// Don't update the selection if the blocks cannot be deleted.
 			if ( ! canRemoveBlocks( blocksToDelete, firstBlockRootClientId ) ) {
@@ -131,6 +153,36 @@ function ListViewBlockSelectButton(
 			}
 
 			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 );
+				}
+			}
 		}
 	}
 
@@ -194,7 +246,7 @@ function ListViewBlockSelectButton(
 							{ images.map( ( image, index ) => (
 								<span
 									className="block-editor-list-view-block-select-button__image"
-									key={ `img-${ image.url }` }
+									key={ image.clientId }
 									style={ {
 										backgroundImage: `url(${ image.url })`,
 										zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.

package/src/components/list-view/drop-indicator.js

@@ -159,10 +159,8 @@ export default function ListViewDropIndicator( {
 			return undefined;
 		}
 
-		const ownerDocument = targetElement.ownerDocument;
-
 		return {
-			ownerDocument,
+			contextElement: targetElement,
 			getBoundingClientRect() {
 				const rect = targetElement.getBoundingClientRect();
 				const indent = getDropIndicatorIndent( rect );
@@ -189,9 +187,10 @@ export default function ListViewDropIndicator( {
 					'horizontal'
 				);
 
+				const doc = targetElement.ownerDocument;
 				const windowScroll =
-					scrollContainer === ownerDocument.body ||
-					scrollContainer === ownerDocument.documentElement;
+					scrollContainer === doc.body ||
+					scrollContainer === doc.documentElement;
 
 				// If the scroll container is not the window, offset the left position, if need be.
 				if ( scrollContainer && ! windowScroll ) {

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

@@ -159,19 +159,6 @@ function ListViewComponent(
 		isMounted.current = true;
 	}, [] );
 
-	// List View renders a fixed number of items and relies on each having a fixed item height of 36px.
-	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
-	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
-	const [ fixedListWindow ] = useFixedWindowList(
-		elementRef,
-		BLOCK_LIST_ITEM_HEIGHT,
-		visibleBlockCount,
-		{
-			useWindowing: true,
-			windowOverscan: 40,
-		}
-	);
-
 	const expand = useCallback(
 		( clientId ) => {
 			if ( ! clientId ) {
@@ -242,6 +229,25 @@ function ListViewComponent(
 		]
 	);
 
+	// List View renders a fixed number of items and relies on each having a fixed item height of 36px.
+	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
+	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
+	const [ fixedListWindow ] = useFixedWindowList(
+		elementRef,
+		BLOCK_LIST_ITEM_HEIGHT,
+		visibleBlockCount,
+		{
+			// Ensure that the windowing logic is recalculated when the expanded state changes.
+			// This is necessary because expanding a collapsed block in a short list view can
+			// switch the list view to a tall list view with a scrollbar, and vice versa.
+			// When this happens, the windowing logic needs to be recalculated to ensure that
+			// the correct number of blocks are rendered, by rechecking for a scroll container.
+			expandedState,
+			useWindowing: true,
+			windowOverscan: 40,
+		}
+	);
+
 	// If there are no blocks to show and we're not showing the appender, do not render the list view.
 	if ( ! clientIdsTree.length && ! showAppender ) {
 		return null;

package/src/components/list-view/use-list-view-images.js

@@ -12,13 +12,17 @@ import { store as blockEditorStore } from '../../store';
 // Maximum number of images to display in a list view row.
 const MAX_IMAGES = 3;
 
-function getImageUrl( block ) {
+function getImage( block ) {
 	if ( block.name !== 'core/image' ) {
 		return;
 	}
 
 	if ( block.attributes?.url ) {
-		return { url: block.attributes.url, alt: block.attributes.alt };
+		return {
+			url: block.attributes.url,
+			alt: block.attributes.alt,
+			clientId: block.clientId,
+		};
 	}
 }
 
@@ -30,7 +34,7 @@ function getImagesFromGallery( block ) {
 	const images = [];
 
 	for ( const innerBlock of block.innerBlocks ) {
-		const img = getImageUrl( innerBlock );
+		const img = getImage( innerBlock );
 		if ( img ) {
 			images.push( img );
 		}
@@ -43,7 +47,7 @@ function getImagesFromGallery( block ) {
 }
 
 function getImagesFromBlock( block, isExpanded ) {
-	const img = getImageUrl( block );
+	const img = getImage( block );
 	if ( img ) {
 		return [ img ];
 	}

package/src/components/observe-typing/README.md

@@ -1,6 +1,6 @@
 # Observe Typing
 
-`<ObserveTyping />` is a component used in managing the editor's internal typing flag. When used to wrap content — typically the top-level block list — it observes keyboard and mouse events to set and unset the typing flag. The typing flag is used in considering whether the block border and controls should be visible. While typing, these elements are hidden for a distraction-free experience.
+`<ObserveTyping />` is a component used in managing the editor's internal typing flag. When used to wrap content, it observes keyboard and mouse events to set and unset the typing flag. The typing flag is used in considering whether the block border and controls should be visible. While typing, these elements are hidden for a distraction-free experience.
 
 ## Usage
 
@@ -10,7 +10,7 @@ Wrap the component where blocks are to be rendered with `<ObserveTyping />`:
 function VisualEditor() {
 	return (
 		<ObserveTyping>
-			<BlockList />
+			<MyInput />
 		</ObserveTyping>
 	);
 }

package/src/components/preview-options/index.js

@@ -33,6 +33,7 @@ export default function PreviewOptions( {
 	const toggleProps = {
 		className: 'block-editor-post-preview__button-toggle',
 		disabled: ! isEnabled,
+		__experimentalIsFocusable: ! isEnabled,
 		children: viewLabel,
 	};
 	const menuProps = {
@@ -53,6 +54,7 @@ export default function PreviewOptions( {
 			menuProps={ menuProps }
 			icon={ deviceIcons[ deviceType.toLowerCase() ] }
 			label={ label || __( 'Preview' ) }
+			disableOpenOnArrowDown={ ! isEnabled }
 		>
 			{ ( renderProps ) => (
 				<>

package/src/components/provider/index.js

@@ -3,6 +3,7 @@
  */
 import { useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
+import { SlotFillProvider } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -12,6 +13,7 @@ import useBlockSync from './use-block-sync';
 import { store as blockEditorStore } from '../../store';
 import { BlockRefsProvider } from './block-refs-provider';
 import { unlock } from '../../lock-unlock';
+import KeyboardShortcuts from '../keyboard-shortcuts';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
@@ -42,7 +44,12 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		// Syncs the entity provider with changes in the block-editor store.
 		useBlockSync( props );
 
-		return <BlockRefsProvider>{ children }</BlockRefsProvider>;
+		return (
+			<SlotFillProvider>
+				<KeyboardShortcuts.Register />
+				<BlockRefsProvider>{ children }</BlockRefsProvider>
+			</SlotFillProvider>
+		);
 	}
 );
 

package/src/components/rich-text/use-remove-browser-shortcuts.js

@@ -23,7 +23,7 @@ export function useRemoveBrowserShortcuts() {
 		}
 		node.addEventListener( 'keydown', onKeydown );
 		return () => {
-			node.addEventListener( 'keydown', onKeydown );
+			node.removeEventListener( 'keydown', onKeydown );
 		};
 	}, [] );
 }

package/src/components/use-block-commands/index.js

@@ -126,28 +126,12 @@ const useActionsCommands = () => {
 		getBlocksByClientId,
 		canMoveBlocks,
 		canRemoveBlocks,
+		getBlockCount,
 	} = useSelect( blockEditorStore );
 	const { getDefaultBlockName, getGroupingBlockName } =
 		useSelect( blocksStore );
 
 	const blocks = getBlocksByClientId( clientIds );
-	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-
-	const canDuplicate = blocks.every( ( block ) => {
-		return (
-			!! block &&
-			hasBlockSupport( block.name, 'multiple', true ) &&
-			canInsertBlockType( block.name, rootClientId )
-		);
-	} );
-
-	const canInsertDefaultBlock = canInsertBlockType(
-		getDefaultBlockName(),
-		rootClientId
-	);
-
-	const canMove = canMoveBlocks( clientIds, rootClientId );
-	const canRemove = canRemoveBlocks( clientIds, rootClientId );
 
 	const {
 		removeBlocks,
@@ -160,42 +144,6 @@ const useActionsCommands = () => {
 		selectBlock,
 	} = useDispatch( blockEditorStore );
 
-	const onDuplicate = () => {
-		if ( ! canDuplicate ) {
-			return;
-		}
-		return duplicateBlocks( clientIds, true );
-	};
-	const onRemove = () => {
-		if ( ! canRemove ) {
-			return;
-		}
-		return removeBlocks( clientIds, true );
-	};
-	const onAddBefore = () => {
-		if ( ! canInsertDefaultBlock ) {
-			return;
-		}
-		const clientId = Array.isArray( clientIds ) ? clientIds[ 0 ] : clientId;
-		insertBeforeBlock( clientId );
-	};
-	const onAddAfter = () => {
-		if ( ! canInsertDefaultBlock ) {
-			return;
-		}
-		const clientId = Array.isArray( clientIds )
-			? clientIds[ clientIds.length - 1 ]
-			: clientId;
-		insertAfterBlock( clientId );
-	};
-	const onMoveTo = () => {
-		if ( ! canMove ) {
-			return;
-		}
-		setNavigationMode( true );
-		selectBlock( clientIds[ 0 ] );
-		setBlockMovingClientId( clientIds[ 0 ] );
-	};
 	const onGroup = () => {
 		if ( ! blocks.length ) {
 			return;
@@ -229,47 +177,103 @@ const useActionsCommands = () => {
 		return { isLoading: false, commands: [] };
 	}
 
-	const icons = {
-		ungroup,
-		group,
-		move,
-		add,
-		remove,
-		duplicate: copy,
-	};
+	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+	const canInsertDefaultBlock = canInsertBlockType(
+		getDefaultBlockName(),
+		rootClientId
+	);
+	const canDuplicate = blocks.every( ( block ) => {
+		return (
+			!! block &&
+			hasBlockSupport( block.name, 'multiple', true ) &&
+			canInsertBlockType( block.name, rootClientId )
+		);
+	} );
+	const canRemove = canRemoveBlocks( clientIds, rootClientId );
+	const canMove =
+		canMoveBlocks( clientIds, rootClientId ) &&
+		getBlockCount( rootClientId ) !== 1;
 
 	const commands = [
-		onUngroup,
-		onGroup,
-		onMoveTo,
-		onAddAfter,
-		onAddBefore,
-		onRemove,
-		onDuplicate,
-	].map( ( callback ) => {
-		const action = callback.name
-			.replace( 'on', '' )
-			.replace( /([a-z])([A-Z])/g, '$1 $2' );
+		{
+			name: 'ungroup',
+			label: __( 'Ungroup' ),
+			callback: onUngroup,
+			icon: ungroup,
+		},
+		{
+			name: 'Group',
+			label: __( 'Group' ),
+			callback: onGroup,
+			icon: group,
+		},
+	];
+	if ( canInsertDefaultBlock ) {
+		commands.push(
+			{
+				name: 'add-after',
+				label: __( 'Add after' ),
+				callback: () => {
+					const clientId = Array.isArray( clientIds )
+						? clientIds[ clientIds.length - 1 ]
+						: clientId;
+					insertAfterBlock( clientId );
+				},
+				icon: add,
+			},
+			{
+				name: 'add-before',
+				label: __( 'Add before' ),
+				callback: () => {
+					const clientId = Array.isArray( clientIds )
+						? clientIds[ 0 ]
+						: clientId;
+					insertBeforeBlock( clientId );
+				},
+				icon: add,
+			}
+		);
+	}
+	if ( canRemove ) {
+		commands.push( {
+			name: 'remove',
+			label: __( 'Remove' ),
+			callback: () => removeBlocks( clientIds, true ),
+			icon: remove,
+		} );
+	}
+	if ( canDuplicate ) {
+		commands.push( {
+			name: 'duplicate',
+			label: __( 'Duplicate' ),
+			callback: () => duplicateBlocks( clientIds, true ),
+			icon: copy,
+		} );
+	}
+	if ( canMove ) {
+		commands.push( {
+			name: 'move-to',
+			label: __( 'Move to' ),
+			callback: () => {
+				setNavigationMode( true );
+				selectBlock( clientIds[ 0 ] );
+				setBlockMovingClientId( clientIds[ 0 ] );
+			},
+			icon: move,
+		} );
+	}
 
-		return {
-			name: 'core/block-editor/action-' + callback.name,
-			// translators: %s: type of the command.
-			label: action,
-			icon: icons[
-				callback.name
-					.replace( 'on', '' )
-					.match( /[A-Z]{1}[a-z]*/ )
-					.toString()
-					.toLowerCase()
-			],
+	return {
+		isLoading: false,
+		commands: commands.map( ( command ) => ( {
+			...command,
+			name: 'core/block-editor/action-' + command.name,
 			callback: ( { close } ) => {
-				callback();
+				command.callback();
 				close();
 			},
-		};
-	} );
-
-	return { isLoading: false, commands };
+		} ) ),
+	};
 };
 
 export const useBlockCommands = () => {

package/src/components/warning/index.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { Children } from '@wordpress/element';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { moreHorizontal } from '@wordpress/icons';
+import { moreVertical } from '@wordpress/icons';
 
 function Warning( { className, actions, children, secondaryActions } ) {
 	return (
@@ -34,7 +34,7 @@ function Warning( { className, actions, children, secondaryActions } ) {
 							{ secondaryActions && (
 								<DropdownMenu
 									className="block-editor-warning__secondary"
-									icon={ moreHorizontal }
+									icon={ moreVertical }
 									label={ __( 'More options' ) }
 									popoverProps={ {
 										position: 'bottom left',