@wordpress/block-editor 12.2.0 → 12.3.0

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

@@ -13,7 +13,9 @@ import {
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lockSmall as lock } from '@wordpress/icons';
-import { SPACE, ENTER } from '@wordpress/keycodes';
+import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -23,6 +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';
 
 function ListViewBlockSelectButton(
 	{
@@ -38,6 +41,7 @@ function ListViewBlockSelectButton(
 		isExpanded,
 		ariaLabel,
 		ariaDescribedBy,
+		updateFocusAndSelection,
 	},
 	ref
 ) {
@@ -47,6 +51,15 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
+	const {
+		getSelectedBlockClientIds,
+		getPreviousBlockClientId,
+		getBlockRootClientId,
+		getBlockOrder,
+		canRemoveBlocks,
+	} = useSelect( blockEditorStore );
+	const { removeBlocks } = useDispatch( blockEditorStore );
+	const isMatch = useShortcutEventMatch();
 
 	// 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.
@@ -57,9 +70,54 @@ function ListViewBlockSelectButton(
 		onDragStart?.( event );
 	};
 
+	/**
+	 * @param {KeyboardEvent} event
+	 */
 	function onKeyDownHandler( 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 selectedBlockClientIds = getSelectedBlockClientIds();
+			const isDeletingSelectedBlocks =
+				selectedBlockClientIds.includes( clientId );
+			const firstBlockClientId = isDeletingSelectedBlocks
+				? selectedBlockClientIds[ 0 ]
+				: clientId;
+			const firstBlockRootClientId =
+				getBlockRootClientId( firstBlockClientId );
+
+			const blocksToDelete = isDeletingSelectedBlocks
+				? selectedBlockClientIds
+				: [ clientId ];
+
+			// 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 );
 		}
 	}
 

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

@@ -22,6 +22,7 @@ import {
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
+import { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -39,6 +40,7 @@ import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 import { unlock } from '../../lock-unlock';
+import AriaReferencedText from './aria-referenced-text';
 
 function ListViewBlock( {
 	block: { clientId },
@@ -125,6 +127,7 @@ function ListViewBlock( {
 		listViewInstanceId,
 		expandedState,
 		setInsertedBlock,
+		treeGridElementRef,
 	} = useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
@@ -165,11 +168,38 @@ function ListViewBlock( {
 		[ clientId, selectBlock ]
 	);
 
-	const updateSelection = useCallback(
-		( newClientId ) => {
-			selectBlock( undefined, newClientId );
+	const updateFocusAndSelection = useCallback(
+		( focusClientId, shouldSelectBlock ) => {
+			if ( shouldSelectBlock ) {
+				selectBlock( undefined, focusClientId, null, null );
+			}
+
+			const getFocusElement = () => {
+				const row = treeGridElementRef.current?.querySelector(
+					`[role=row][data-block="${ focusClientId }"]`
+				);
+				if ( ! row ) return null;
+				// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
+				return focus.focusable.find( row )[ 0 ];
+			};
+
+			let focusElement = getFocusElement();
+			if ( focusElement ) {
+				focusElement.focus();
+			} else {
+				// The element hasn't been painted yet. Defer focusing on the next frame.
+				// This could happen when all blocks have been deleted and the default block
+				// hasn't been added to the editor yet.
+				window.requestAnimationFrame( () => {
+					focusElement = getFocusElement();
+					// Ignore if the element still doesn't exist.
+					if ( focusElement ) {
+						focusElement.focus();
+					}
+				} );
+			}
 		},
-		[ selectBlock ]
+		[ selectBlock, treeGridElementRef ]
 	);
 
 	const toggleExpanded = useCallback(
@@ -266,13 +296,11 @@ function ListViewBlock( {
 							selectedClientIds={ selectedClientIds }
 							ariaLabel={ blockAriaLabel }
 							ariaDescribedBy={ descriptionId }
+							updateFocusAndSelection={ updateFocusAndSelection }
 						/>
-						<div
-							className="block-editor-list-view-block-select-button__description"
-							id={ descriptionId }
-						>
+						<AriaReferencedText id={ descriptionId }>
 							{ blockPositionDescription }
-						</div>
+						</AriaReferencedText>
 					</div>
 				) }
 			</TreeGridCell>
@@ -326,10 +354,12 @@ function ListViewBlock( {
 								onFocus,
 							} }
 							disableOpenOnArrowDown
-							__experimentalSelectBlock={ updateSelection }
 							expand={ expand }
 							expandedState={ expandedState }
 							setInsertedBlock={ setInsertedBlock }
+							__experimentalSelectBlock={
+								updateFocusAndSelection
+							}
 						/>
 					) }
 				</TreeGridCell>

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

@@ -57,23 +57,25 @@ 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 {?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
+ * @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 {?HTMLElement}   props.dropZoneElement        Optional element to be used as the drop zone.
+ * @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 {?ComponentType} props.additionalBlockContent Component that renders additional block content UI.
+ * @param {Ref}            ref                          Forwarded ref
  */
 function ListViewComponent(
 	{
 		id,
 		blocks,
+		dropZoneElement,
 		showBlockMovers = false,
 		isExpanded = false,
 		showAppender = false,
@@ -81,7 +83,7 @@ function ListViewComponent(
 		rootClientId,
 		description,
 		onSelect,
-		renderAdditionalBlockUI,
+		additionalBlockContent: AdditionalBlockContent,
 	},
 	ref
 ) {
@@ -124,7 +126,9 @@ function ListViewComponent(
 
 	const [ expandedState, setExpandedState ] = useReducer( expanded, {} );
 
-	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();
+	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone( {
+		dropZoneElement,
+	} );
 	const elementRef = useRef();
 	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
 
@@ -137,8 +141,13 @@ function ListViewComponent(
 		setExpandedState,
 	} );
 	const selectEditorBlock = useCallback(
-		( event, blockClientId ) => {
-			updateBlockSelection( event, blockClientId );
+		/**
+		 * @param {MouseEvent | KeyboardEvent | undefined} event
+		 * @param {string}                                 blockClientId
+		 * @param {null | undefined | -1 | 1}              focusPosition
+		 */
+		( event, blockClientId, focusPosition ) => {
+			updateBlockSelection( event, blockClientId, null, focusPosition );
 			setSelectedTreeId( blockClientId );
 			if ( onSelect ) {
 				onSelect( getBlock( blockClientId ) );
@@ -215,9 +224,10 @@ function ListViewComponent(
 			collapse,
 			BlockSettingsMenu,
 			listViewInstanceId: instanceId,
-			renderAdditionalBlockUI,
+			AdditionalBlockContent,
 			insertedBlock,
 			setInsertedBlock,
+			treeGridElementRef: elementRef,
 		} ),
 		[
 			draggedClientIds,
@@ -226,7 +236,7 @@ function ListViewComponent(
 			collapse,
 			BlockSettingsMenu,
 			instanceId,
-			renderAdditionalBlockUI,
+			AdditionalBlockContent,
 			insertedBlock,
 			setInsertedBlock,
 		]
@@ -287,7 +297,7 @@ export default forwardRef( ( props, ref ) => {
 			showAppender={ false }
 			rootClientId={ null }
 			onSelect={ null }
-			renderAdditionalBlockUI={ null }
+			additionalBlockContent={ null }
 			blockSettingsMenu={ undefined }
 		/>
 	);

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

@@ -340,11 +340,6 @@
 	}
 }
 
-.block-editor-list-view-block-select-button__description,
-.block-editor-list-view-appender__description {
-	display: none;
-}
-
 .block-editor-list-view-block__contents-cell,
 .block-editor-list-view-appender__cell {
 	.block-editor-list-view-block__contents-container,

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

@@ -172,7 +172,7 @@ describe( 'getListViewDropTarget', () => {
 		} );
 	} );
 
-	it( 'should nest when dragging a block over the right side and bottom half of a collapsed block with children', () => {
+	it( 'should nest and append to end when dragging a block over the right side and bottom half of a collapsed block with children', () => {
 		const position = { x: 160, y: 90 };
 
 		const collapsedBlockData = [ ...blocksData ];
@@ -188,6 +188,26 @@ describe( 'getListViewDropTarget', () => {
 
 		const target = getListViewDropTarget( collapsedBlockData, position );
 
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			dropPosition: 'inside',
+			rootClientId: 'block-1',
+		} );
+	} );
+
+	it( 'should nest and prepend when dragging a block over the right side and bottom half of an expanded block with children', () => {
+		const position = { x: 160, y: 90 };
+
+		const collapsedBlockData = [ ...blocksData ];
+
+		// Set the first block to be collapsed.
+		collapsedBlockData[ 0 ] = {
+			...collapsedBlockData[ 0 ],
+			isExpanded: true,
+		};
+
+		const target = getListViewDropTarget( collapsedBlockData, position );
+
 		expect( target ).toEqual( {
 			blockIndex: 0,
 			dropPosition: 'inside',
@@ -261,4 +281,21 @@ describe( 'getListViewDropTarget', () => {
 
 		expect( target ).toBeUndefined();
 	} );
+
+	it( 'should move below, and not nest when dragging lower than the bottom-most block', () => {
+		const singleBlock = [ { ...blocksData[ 0 ], innerBlockCount: 0 } ];
+
+		// This position is to the right of the block, but below the bottom of the block.
+		// This should result in the block being moved below the bottom-most block, and
+		// not being treated as a nesting gesture.
+		const position = { x: 160, y: 250 };
+		const target = getListViewDropTarget( singleBlock, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-1',
+			dropPosition: 'bottom',
+			rootClientId: '',
+		} );
+	} );
 } );

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

@@ -29,9 +29,9 @@ export default function useBlockSelection() {
 	const { getBlockType } = useSelect( blocksStore );
 
 	const updateBlockSelection = useCallback(
-		async ( event, clientId, destinationClientId ) => {
+		async ( event, clientId, destinationClientId, focusPosition ) => {
 			if ( ! event?.shiftKey ) {
-				selectBlock( clientId );
+				selectBlock( clientId, focusPosition );
 				return;
 			}
 

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

@@ -152,7 +152,8 @@ function getNextNonDraggedBlock( blocksData, index ) {
  * inner block.
  *
  * Determined based on nesting level indentation of the current block, plus
- * the indentation of the next level of nesting.
+ * the indentation of the next level of nesting. The vertical position of the
+ * cursor must also be within the block.
  *
  * @param {WPPoint} point        The point representing the cursor position when dragging.
  * @param {DOMRect} rect         The rectangle.
@@ -161,7 +162,10 @@ function getNextNonDraggedBlock( blocksData, index ) {
 function isNestingGesture( point, rect, nestingLevel = 1 ) {
 	const blockIndentPosition =
 		rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
-	return point.x > blockIndentPosition + NESTING_LEVEL_INDENTATION;
+	return (
+		point.x > blockIndentPosition + NESTING_LEVEL_INDENTATION &&
+		point.y < rect.bottom
+	);
 }
 
 // Block navigation is always a vertical list, so only allow dropping
@@ -334,9 +338,15 @@ export function getListViewDropTarget( blocksData, position ) {
 				candidateBlockParents.length
 			) )
 	) {
+		// If the block is expanded, insert the block as the first child.
+		// Otherwise, for collapsed blocks, insert the block as the last child.
+		const newBlockIndex = candidateBlockData.isExpanded
+			? 0
+			: candidateBlockData.innerBlockCount || 0;
+
 		return {
 			rootClientId: candidateBlockData.clientId,
-			blockIndex: 0,
+			blockIndex: newBlockIndex,
 			dropPosition: 'inside',
 		};
 	}
@@ -359,9 +369,12 @@ export function getListViewDropTarget( blocksData, position ) {
 /**
  * A react hook for implementing a drop zone in list view.
  *
+ * @param {Object}       props                   Named parameters.
+ * @param {?HTMLElement} [props.dropZoneElement] Optional element to be used as the drop zone.
+ *
  * @return {WPListViewDropZoneTarget} The drop target.
  */
-export default function useListViewDropZone() {
+export default function useListViewDropZone( { dropZoneElement } ) {
 	const {
 		getBlockRootClientId,
 		getBlockIndex,
@@ -432,7 +445,12 @@ export default function useListViewDropZone() {
 	);
 
 	const ref = useDropZone( {
+		dropZoneElement,
 		onDrop: onBlockDrop,
+		onDragLeave() {
+			throttled.cancel();
+			setTarget( null );
+		},
 		onDragOver( event ) {
 			// `currentTarget` is only available while the event is being
 			// handled, so get it now and pass it to the thottled function.

package/src/components/media-replace-flow/test/index.js

@@ -137,7 +137,7 @@ describe( 'General media replace flow', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Apply',
+				name: 'Save',
 			} )
 		);
 

package/src/components/navigable-toolbar/index.js

@@ -120,16 +120,18 @@ function useToolbarFocus(
 	}, [ isAccessibleToolbar, initialFocusOnMount, focusToolbar ] );
 
 	useEffect( () => {
+		// Store ref so we have access on useEffect cleanup: https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
+		const navigableToolbarRef = ref.current;
 		// If initialIndex is passed, we focus on that toolbar item when the
 		// toolbar gets mounted and initial focus is not forced.
 		// We have to wait for the next browser paint because block controls aren't
 		// rendered right away when the toolbar gets mounted.
 		let raf = 0;
-		if ( initialIndex && ! initialFocusOnMount ) {
+		if ( ! initialFocusOnMount ) {
 			raf = window.requestAnimationFrame( () => {
-				const items = getAllToolbarItemsIn( ref.current );
+				const items = getAllToolbarItemsIn( navigableToolbarRef );
 				const index = initialIndex || 0;
-				if ( items[ index ] && hasFocusWithin( ref.current ) ) {
+				if ( items[ index ] && hasFocusWithin( navigableToolbarRef ) ) {
 					items[ index ].focus( {
 						// When focusing newly mounted toolbars,
 						// the position of the popover is often not right on the first render
@@ -141,10 +143,10 @@ function useToolbarFocus(
 		}
 		return () => {
 			window.cancelAnimationFrame( raf );
-			if ( ! onIndexChange || ! ref.current ) return;
+			if ( ! onIndexChange || ! navigableToolbarRef ) return;
 			// When the toolbar element is unmounted and onIndexChange is passed, we
 			// pass the focused toolbar item index so it can be hydrated later.
-			const items = getAllToolbarItemsIn( ref.current );
+			const items = getAllToolbarItemsIn( navigableToolbarRef );
 			const index = items.findIndex( ( item ) => item.tabIndex === 0 );
 			onIndexChange( index );
 		};

package/src/components/rich-text/index.js

@@ -402,7 +402,7 @@ function RichTextWrapper(
 						disableLineBreaks,
 						onSplitAtEnd,
 					} ),
-					useFirefoxCompat(),
+					useFirefoxCompat( { value, onChange } ),
 					anchorRef,
 				] ) }
 				contentEditable={ true }

package/src/components/rich-text/use-firefox-compat.js

@@ -1,15 +1,21 @@
 /**
  * WordPress dependencies
  */
+import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { SPACE } from '@wordpress/keycodes';
+import { insert } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 
-export function useFirefoxCompat() {
+export function useFirefoxCompat( props ) {
+	const propsRef = useRef( props );
+	propsRef.current = props;
+
 	const { isMultiSelecting } = useSelect( blockEditorStore );
 	return useRefEffect( ( element ) => {
 		function onFocus() {
@@ -31,9 +37,29 @@ export function useFirefoxCompat() {
 			}
 		}
 
+		// If a contenteditable element is inside a button/summary element,
+		// it is not possible to type a space in Firefox. Therefore, cancel
+		// the default event and insert a space explicitly.
+		// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1822860
+		function onKeyDown( event ) {
+			if ( event.keyCode !== SPACE ) {
+				return;
+			}
+
+			if ( element.closest( 'button, summary' ) === null ) {
+				return;
+			}
+
+			const { value, onChange } = propsRef.current;
+			onChange( insert( value, ' ' ) );
+			event.preventDefault();
+		}
+
 		element.addEventListener( 'focus', onFocus );
+		element.addEventListener( 'keydown', onKeyDown );
 		return () => {
 			element.removeEventListener( 'focus', onFocus );
+			element.removeEventListener( 'keydown', onKeyDown );
 		};
 	}, [] );
 }

package/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../../use-setting';
+
+export default function useSpacingSizes() {
+	const spacingSizes = [
+		{ name: 0, slug: '0', side: 0 },
+		...( useSetting( 'spacing.spacingSizes' ) || [] ),
+	];
+
+	if ( spacingSizes.length > 8 ) {
+		spacingSizes.unshift( {
+			name: __( 'Default' ),
+			slug: 'default',
+			size: undefined,
+		} );
+	}
+
+	return spacingSizes;
+}