@wordpress/block-editor 16.1.0 → 17.0.0

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

@@ -1,16 +1,11 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	useInstanceId,
 	useMergeRefs,
+	useRefEffect,
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
+import { isShallowEqual } from '@wordpress/is-shallow-equal';
 import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
 import { VisuallyHidden } from '@wordpress/ui';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
@@ -24,12 +19,12 @@ import {
 	useState,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import ListViewBranch from './branch';
-import { ListViewContext } from './context';
+import {
+	ListViewContext,
+	ListViewInsertedBlockContext,
+	ListViewTreeStateContext,
+} from './context';
 import ListViewDropIndicatorPreview from './drop-indicator';
 import useBlockSelection from './use-block-selection';
 import useListViewBlockIndexes from './use-list-view-block-indexes';
@@ -39,29 +34,39 @@ import useListViewDropZone from './use-list-view-drop-zone';
 import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
 import { store as blockEditorStore } from '../../store';
 import { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown';
-import { focusListItem } from './utils';
+import { BLOCK_LIST_ITEM_HEIGHT, focusListItem } from './utils';
 import useClipboardHandler from './use-clipboard-handler';
 
-const expanded = ( state, action ) => {
-	if ( action.type === 'clear' ) {
-		return {};
+const expansion = ( state, action ) => {
+	const { type, clientIds } = action;
+
+	// Overwrite the state: only the listed blocks stay expanded, every other
+	// block falls back to the list view's default.
+	if ( type === 'replace' ) {
+		const next = Object.fromEntries(
+			clientIds.map( ( id ) => [ id, true ] )
+		);
+		return isShallowEqual( state, next ) ? state : next;
 	}
-	if ( Array.isArray( action.clientIds ) ) {
-		return {
-			...state,
-			...action.clientIds.reduce(
-				( newState, id ) => ( {
-					...newState,
-					[ id ]: action.type === 'expand',
-				} ),
-				{}
-			),
-		};
+
+	if ( type !== 'expand' && type !== 'collapse' ) {
+		return state;
 	}
-	return state;
-};
 
-export const BLOCK_LIST_ITEM_HEIGHT = 32;
+	const isExpand = type === 'expand';
+	// An unrecorded block is not the same as an explicitly collapsed one,
+	// because the fallback depends on the `isExpanded` prop.
+	const changed = clientIds.filter( ( id ) => state[ id ] !== isExpand );
+
+	if ( ! changed.length ) {
+		return state;
+	}
+
+	return {
+		...state,
+		...Object.fromEntries( changed.map( ( id ) => [ id, isExpand ] ) ),
+	};
+};
 
 /** @typedef {React.ComponentType} ComponentType */
 /** @typedef {React.Ref<HTMLElement>} Ref */
@@ -76,6 +81,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 32;
  * @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 {?boolean}       props.focusOnMount           Flag to move focus into the list when it mounts. 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.
@@ -91,6 +97,7 @@ function ListViewComponent(
 		showBlockMovers = false,
 		isExpanded = false,
 		showAppender = false,
+		focusOnMount = false,
 		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
 		rootClientId,
 		description,
@@ -134,13 +141,14 @@ function ListViewComponent(
 
 	const { updateBlockSelection } = useBlockSelection();
 
-	const [ expandedState, setExpandedState ] = useReducer( expanded, {} );
+	const [ expansionState, updateExpansion ] = useReducer( expansion, {} );
 
-	const [ insertedBlock, setInsertedBlock ] = useState( null );
+	const [ insertedBlockClientId, setInsertedBlockClientId ] =
+		useState( null );
 
 	const { setSelectedTreeId } = useListViewExpandSelectedItem( {
 		firstSelectedBlockClientId: selectedClientIds[ 0 ],
-		setExpandedState,
+		updateExpansion,
 	} );
 	const selectEditorBlock = useCallback(
 		/**
@@ -160,8 +168,7 @@ function ListViewComponent(
 
 	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone( {
 		dropZoneElement,
-		expandedState,
-		setExpandedState,
+		updateExpansion,
 	} );
 	const elementRef = useRef();
 
@@ -170,62 +177,78 @@ function ListViewComponent(
 		selectBlock: selectEditorBlock,
 	} );
 
-	const focusSelectedBlock = useCallback(
+	const focusOnMountRef = useRefEffect(
 		( node ) => {
+			// A list that mounts as a side effect of selecting a block, the
+			// block inspector's for one, would pull focus out of whatever the
+			// user is editing, so taking focus is opt-in.
+			if ( ! focusOnMount ) {
+				return;
+			}
+
+			const controller = new window.AbortController();
+			const focusRow = ( clientId ) =>
+				focusListItem( clientId, node, controller.signal ).then( () =>
+					controller.abort()
+				);
+
+			// Anything that takes focus first has a better claim to it. The row
+			// is not always there yet either, because a nested block waits on
+			// its ancestors expanding.
+			node.ownerDocument.addEventListener(
+				'focusin',
+				() => controller.abort(),
+				{ once: true, signal: controller.signal }
+			);
+
 			const [ firstSelectedClientId ] = getSelectedBlockClientIds();
-			// If a blocks are already selected when the list view is initially
-			// mounted, shift focus to the first selected block.
-			if ( firstSelectedClientId && node ) {
-				focusListItem( firstSelectedClientId, node );
+
+			if ( firstSelectedClientId ) {
+				focusRow( firstSelectedClientId );
+				return () => controller.abort();
 			}
+
+			// With nothing selected the top of the list gets focus, but only
+			// once the click that opened the list is over. Focusing a row costs
+			// a style and layout pass, and inside that commit it lands on a
+			// document that is still dirty.
+			const timerId = setTimeout( () => {
+				const firstClientId = node.querySelector(
+					'[role=row][data-block]'
+				)?.dataset.block;
+				if ( firstClientId ) {
+					focusRow( firstClientId );
+				}
+			}, 0 );
+
+			return () => {
+				clearTimeout( timerId );
+				controller.abort();
+			};
 		},
-		[ getSelectedBlockClientIds ]
+		[ focusOnMount, getSelectedBlockClientIds ]
 	);
 
 	const treeGridRef = useMergeRefs( [
 		clipBoardRef,
-		focusSelectedBlock,
+		focusOnMountRef,
 		elementRef,
 		dropZoneRef,
 		ref,
 	] );
 
-	const expand = useCallback(
-		( clientId ) => {
-			if ( ! clientId ) {
-				return;
-			}
-			const clientIds = Array.isArray( clientId )
-				? clientId
-				: [ clientId ];
-			setExpandedState( { type: 'expand', clientIds } );
-		},
-		[ setExpandedState ]
-	);
-	const collapse = useCallback(
-		( clientId ) => {
-			if ( ! clientId ) {
-				return;
-			}
-			setExpandedState( { type: 'collapse', clientIds: [ clientId ] } );
-		},
-		[ setExpandedState ]
-	);
-	const collapseAll = useCallback( () => {
-		setExpandedState( { type: 'clear' } );
-	}, [ setExpandedState ] );
-	const expandRow = useCallback(
-		( row ) => {
-			expand( row?.dataset?.block );
-		},
-		[ expand ]
-	);
-	const collapseRow = useCallback(
-		( row ) => {
-			collapse( row?.dataset?.block );
-		},
-		[ collapse ]
-	);
+	const expandRow = useCallback( ( row ) => {
+		const clientId = row?.dataset?.block;
+		if ( clientId ) {
+			updateExpansion( { type: 'expand', clientIds: [ clientId ] } );
+		}
+	}, [] );
+	const collapseRow = useCallback( ( row ) => {
+		const clientId = row?.dataset?.block;
+		if ( clientId ) {
+			updateExpansion( { type: 'collapse', clientIds: [ clientId ] } );
+		}
+	}, [] );
 	const focusRow = useCallback(
 		( event, startRow, endRow ) => {
 			if ( event.shiftKey ) {
@@ -239,10 +262,7 @@ function ListViewComponent(
 		[ updateBlockSelection ]
 	);
 
-	useListViewCollapseItems( {
-		collapseAll,
-		expand,
-	} );
+	useListViewCollapseItems( { updateExpansion } );
 
 	const firstDraggedBlockClientId = draggedClientIds?.[ 0 ];
 
@@ -284,47 +304,47 @@ function ListViewComponent(
 			};
 		}, [ blockDropTarget, blockIndexes, firstDraggedBlockClientId ] );
 
+	// Values that stay stable for the lifetime of the List View.
 	const contextValue = useMemo(
+		() => ( {
+			AdditionalBlockContent,
+			BlockSettingsMenu,
+			listViewInstanceId: instanceId,
+			rootClientId,
+			setInsertedBlockClientId,
+			treeGridElementRef: elementRef,
+			updateExpansion,
+		} ),
+		[
+			AdditionalBlockContent,
+			BlockSettingsMenu,
+			instanceId,
+			rootClientId,
+			setInsertedBlockClientId,
+			updateExpansion,
+		]
+	);
+
+	// Values that change while expanding, collapsing, or dragging.
+	const treeStateContextValue = useMemo(
 		() => ( {
 			blockDropPosition,
 			blockDropTargetIndex,
 			blockIndexes,
 			draggedClientIds,
-			expandedState,
-			expand,
+			expansionState,
 			firstDraggedBlockIndex,
-			collapse,
-			collapseAll,
-			BlockSettingsMenu,
-			listViewInstanceId: instanceId,
-			AdditionalBlockContent,
-			insertedBlock,
-			setInsertedBlock,
-			treeGridElementRef: elementRef,
-			rootClientId,
 		} ),
 		[
 			blockDropPosition,
 			blockDropTargetIndex,
 			blockIndexes,
 			draggedClientIds,
-			expandedState,
-			expand,
+			expansionState,
 			firstDraggedBlockIndex,
-			collapse,
-			collapseAll,
-			BlockSettingsMenu,
-			instanceId,
-			AdditionalBlockContent,
-			insertedBlock,
-			setInsertedBlock,
-			rootClientId,
 		]
 	);
 
-	// 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,
@@ -335,7 +355,7 @@ function ListViewComponent(
 			// 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,
+			expandedState: expansionState,
 			useWindowing: true,
 			windowOverscan: 40,
 		}
@@ -386,16 +406,24 @@ function ListViewComponent(
 				} }
 			>
 				<ListViewContext.Provider value={ contextValue }>
-					<ListViewBranch
-						blocks={ clientIdsTree }
-						parentId={ rootClientId }
-						selectBlock={ selectEditorBlock }
-						showBlockMovers={ showBlockMovers }
-						fixedListWindow={ fixedListWindow }
-						selectedClientIds={ selectedClientIds }
-						isExpanded={ isExpanded }
-						showAppender={ showAppender }
-					/>
+					<ListViewInsertedBlockContext.Provider
+						value={ insertedBlockClientId }
+					>
+						<ListViewTreeStateContext.Provider
+							value={ treeStateContextValue }
+						>
+							<ListViewBranch
+								blocks={ clientIdsTree }
+								parentId={ rootClientId }
+								selectBlock={ selectEditorBlock }
+								showBlockMovers={ showBlockMovers }
+								fixedListWindow={ fixedListWindow }
+								selectedClientIds={ selectedClientIds }
+								isExpanded={ isExpanded }
+								showAppender={ showAppender }
+							/>
+						</ListViewTreeStateContext.Provider>
+					</ListViewInsertedBlockContext.Provider>
 				</ListViewContext.Provider>
 			</TreeGrid>
 		</AsyncModeProvider>

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

@@ -1,19 +1,8 @@
-/**
- * External dependencies
- */
 import { animated } from '@react-spring/web';
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __experimentalTreeGridRow as TreeGridRow } from '@wordpress/components';
 import { useMergeRefs } from '@wordpress/compose';
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import useMovingAnimation from '../use-moving-animation';
 
 const AnimatedTreeGridRow = animated( TreeGridRow );

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

@@ -382,10 +382,18 @@
 		}
 	}
 
-	// Style lock and position icons in line with image previews.
-	.block-editor-list-view-block-select-button__label-wrapper svg {
-		left: $grid-unit-05 * 0.5; // 2px.
-		position: relative;
+	.block-editor-list-view-block-select-button__label-wrapper {
+		width: 100%;
+
+		> * {
+			min-width: 0;
+		}
+
+		// Style lock and position icons in line with image previews.
+		svg {
+			left: $grid-unit-05 * 0.5; // 2px.
+			position: relative;
+		}
 	}
 
 	.block-editor-list-view-block-select-button__title {
@@ -409,6 +417,17 @@
 		position: absolute;
 		right: 0;
 		transform: translateY(-50%);
+		box-sizing: border-box;
+		max-width: 100%;
+		padding: 2px $grid-unit-10;
+		border-radius: $radius-small;
+		background: $gray-100;
+		color: $gray-800;
+		font-size: $font-size-small;
+		line-height: $font-line-height-small;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
 	&.is-selected .block-editor-list-view-block-select-button__anchor {
@@ -568,6 +587,7 @@ svg {
 .block-editor-list-view-placeholder {
 	padding: 0;
 	margin: 0;
+	// One row. Spacers standing in for several rows set their height inline.
 	height: 32px;
 }
 

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

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	getListViewDropTarget,
 	NESTING_LEVEL_INDENTATION,

package/src/components/list-view/test/utils.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getCommonDepthClientIds, getDragDisplacementValues } from '../utils';
 
 describe( 'getCommonDepthClientIds', () => {

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

@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
 import { speak } from '@wordpress/a11y';
 import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { UP, DOWN, HOME, END, ESCAPE } from '@wordpress/keycodes';
 import { store as blocksStore } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { getCommonDepthClientIds } from './utils';
 

package/src/components/list-view/use-clipboard-handler.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { useNotifyCopy } from '../../utils/use-notify-copy';
 import { focusListItem } from './utils';

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useMemo } from '@wordpress/element';
 
 export default function useListViewBlockIndexes( blocks ) {

package/src/components/list-view/use-list-view-client-ids.js

@@ -1,12 +1,4 @@
-/**
- * WordPress dependencies
- */
-
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 

package/src/components/list-view/use-list-view-collapse-items.js

@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
 import { useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-export default function useListViewCollapseItems( { collapseAll, expand } ) {
+export default function useListViewCollapseItems( { updateExpansion } ) {
 	const { expandedBlock, getBlockParents } = useSelect( ( select ) => {
 		const { getBlockParents: _getBlockParents, getExpandedBlock } = unlock(
 			select( blockEditorStore )
@@ -26,8 +19,7 @@ export default function useListViewCollapseItems( { collapseAll, expand } ) {
 		if ( expandedBlock ) {
 			const blockParents = getBlockParents( expandedBlock, false );
 			// Collapse all blocks and expand the block's parents.
-			collapseAll();
-			expand( blockParents );
+			updateExpansion( { type: 'replace', clientIds: blockParents } );
 		}
-	}, [ collapseAll, expand, expandedBlock, getBlockParents ] );
+	}, [ updateExpansion, expandedBlock, getBlockParents ] );
 }

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { useState, useCallback, useEffect } from '@wordpress/element';
 import {
@@ -9,10 +6,6 @@ import {
 	usePrevious,
 } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import {
 	getDistanceToNearestEdge,
 	isPointContainedByRect,
@@ -410,17 +403,15 @@ const EXPAND_THROTTLE_OPTIONS = {
 /**
  * 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.
- * @param {Object}       [props.expandedState]    The expanded state of the blocks in the list view.
- * @param {Function}     [props.setExpandedState] Function to set the expanded state of a list of block clientIds.
+ * @param {Object}       props                   Named parameters.
+ * @param {?HTMLElement} [props.dropZoneElement] Optional element to be used as the drop zone.
+ * @param {Function}     [props.updateExpansion] Dispatch to update the expansion state of a list of block clientIds.
  *
  * @return {WPListViewDropZoneTarget} The drop target.
  */
 export default function useListViewDropZone( {
 	dropZoneElement,
-	expandedState,
-	setExpandedState,
+	updateExpansion,
 } ) {
 	const {
 		getBlockRootClientId,
@@ -440,25 +431,22 @@ export default function useListViewDropZone( {
 	const previousRootClientId = usePrevious( targetRootClientId );
 
 	const maybeExpandBlock = useCallback(
-		( _expandedState, _target ) => {
+		( _target ) => {
 			// If the user is attempting to drop a block inside a collapsed block,
 			// that is, using a nesting gesture flagged by 'inside' dropPosition,
-			// expand the block within the list view, if it isn't already.
+			// expand the block within the list view.
 			const { rootClientId } = _target || {};
 			if ( ! rootClientId ) {
 				return;
 			}
-			if (
-				_target?.dropPosition === 'inside' &&
-				! _expandedState[ rootClientId ]
-			) {
-				setExpandedState( {
+			if ( _target?.dropPosition === 'inside' ) {
+				updateExpansion( {
 					type: 'expand',
 					clientIds: [ rootClientId ],
 				} );
 			}
 		},
-		[ setExpandedState ]
+		[ updateExpansion ]
 	);
 
 	// Throttle the maybeExpandBlock function to avoid expanding the block
@@ -478,13 +466,8 @@ export default function useListViewDropZone( {
 			throttledMaybeExpandBlock.cancel();
 			return;
 		}
-		throttledMaybeExpandBlock( expandedState, target );
-	}, [
-		expandedState,
-		previousRootClientId,
-		target,
-		throttledMaybeExpandBlock,
-	] );
+		throttledMaybeExpandBlock( target );
+	}, [ previousRootClientId, target, throttledMaybeExpandBlock ] );
 
 	const draggedBlockClientIds = getDraggedBlockClientIds();
 	const throttled = useThrottle(

package/src/components/list-view/use-list-view-expand-selected-item.js

@@ -1,17 +1,10 @@
-/**
- * WordPress dependencies
- */
 import { useEffect, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 
 export default function useListViewExpandSelectedItem( {
 	firstSelectedBlockClientId,
-	setExpandedState,
+	updateExpansion,
 } ) {
 	const [ selectedTreeId, setSelectedTreeId ] = useState( null );
 	const { selectedBlockParentClientIds } = useSelect(
@@ -39,7 +32,7 @@ export default function useListViewExpandSelectedItem( {
 		if ( selectedBlockParentClientIds?.length ) {
 			// If the selected block has parents,
 			// expand the tree branch.
-			setExpandedState( {
+			updateExpansion( {
 				type: 'expand',
 				clientIds: selectedBlockParentClientIds,
 			} );
@@ -48,7 +41,7 @@ export default function useListViewExpandSelectedItem( {
 		firstSelectedBlockClientId,
 		selectedBlockParentClientIds,
 		selectedTreeId,
-		setExpandedState,
+		updateExpansion,
 	] );
 
 	return {