@wordpress/block-editor 16.1.0 → 16.2.0

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

@@ -1,22 +1,19 @@
-/**
- * WordPress dependencies
- */
 import {
 	__experimentalTreeGridRow as TreeGridRow,
 	__experimentalTreeGridCell as TreeGridCell,
 } from '@wordpress/components';
-import { memo, useRef } from '@wordpress/element';
+import { memo } from '@wordpress/element';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { Appender } from './appender';
 import ListViewBlock from './block';
-import { useListViewContext } from './context';
-import { getDragDisplacementValues, isClientIdSelected } from './utils';
+import { useListViewTreeState } from './context';
+import {
+	BLOCK_LIST_ITEM_HEIGHT,
+	getDragDisplacementValues,
+	isClientIdSelected,
+} from './utils';
 import { store as blockEditorStore } from '../../store';
-import useBlockDisplayInformation from '../use-block-display-information';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Given a block, returns the total number of blocks in that subtree. This is used to help determine
@@ -26,14 +23,14 @@ import useBlockDisplayInformation from '../use-block-display-information';
  * implementation dragged blocks and their children are not counted.
  *
  * @param {Object}  block               block tree
- * @param {Object}  expandedState       state that notes which branches are collapsed
+ * @param {Object}  expansionState      state that notes which branches are collapsed
  * @param {Array}   draggedClientIds    a list of dragged client ids
  * @param {boolean} isExpandedByDefault flag to determine the default fallback expanded state.
  * @return {number} block count
  */
 function countBlocks(
 	block,
-	expandedState,
+	expansionState,
 	draggedClientIds,
 	isExpandedByDefault
 ) {
@@ -41,45 +38,22 @@ function countBlocks(
 	if ( isDragged ) {
 		return 0;
 	}
-	const isExpanded = expandedState[ block.clientId ] ?? isExpandedByDefault;
-
-	if ( isExpanded ) {
-		return (
-			1 +
-			block.innerBlocks.reduce(
-				countReducer(
-					expandedState,
-					draggedClientIds,
-					isExpandedByDefault
-				),
-				0
-			)
-		);
+	const isExpanded = expansionState[ block.clientId ] ?? isExpandedByDefault;
+	if ( ! isExpanded ) {
+		return 1;
 	}
-	return 1;
+	return block.innerBlocks.reduce(
+		( count, innerBlock ) =>
+			count +
+			countBlocks(
+				innerBlock,
+				expansionState,
+				draggedClientIds,
+				isExpandedByDefault
+			),
+		1
+	);
 }
-const countReducer =
-	( expandedState, draggedClientIds, isExpandedByDefault ) =>
-	( count, block ) => {
-		const isDragged = draggedClientIds?.includes( block.clientId );
-		if ( isDragged ) {
-			return count;
-		}
-		const isExpanded =
-			expandedState[ block.clientId ] ?? isExpandedByDefault;
-		if ( isExpanded && block.innerBlocks.length > 0 ) {
-			return (
-				count +
-				countBlocks(
-					block,
-					expandedState,
-					draggedClientIds,
-					isExpandedByDefault
-				)
-			);
-		}
-		return count + 1;
-	};
 
 const noop = () => {};
 
@@ -96,34 +70,36 @@ function ListViewBranch( props ) {
 		fixedListWindow,
 		isExpanded,
 		parentId,
-		shouldShowInnerBlocks = true,
 		isSyncedBranch = false,
 		showAppender: showAppenderProp = true,
 	} = props;
 
-	const parentBlockInformation = useBlockDisplayInformation( parentId );
-	const syncedBranch = isSyncedBranch || !! parentBlockInformation?.isSynced;
-
-	const canParentExpand = useSelect(
+	const { canParentExpand, isParentSynced } = useSelect(
 		( select ) => {
 			if ( ! parentId ) {
-				return true;
+				return { canParentExpand: true, isParentSynced: false };
 			}
-			return select( blockEditorStore ).canEditBlock( parentId );
+			const { canEditBlock, isSyncedBlock } = unlock(
+				select( blockEditorStore )
+			);
+			return {
+				canParentExpand: canEditBlock( parentId ),
+				isParentSynced: isSyncedBlock( parentId ),
+			};
 		},
 		[ parentId ]
 	);
 
+	const syncedBranch = isSyncedBranch || isParentSynced;
+
 	const {
 		blockDropPosition,
 		blockDropTargetIndex,
 		firstDraggedBlockIndex,
 		blockIndexes,
-		expandedState,
+		expansionState,
 		draggedClientIds,
-	} = useListViewContext();
-
-	const nextPositionRef = useRef();
+	} = useListViewTreeState();
 
 	if ( ! canParentExpand ) {
 		return null;
@@ -135,123 +111,157 @@ function ListViewBranch( props ) {
 	const blockCount = filteredBlocks.length;
 	// The appender means an extra row in List View, so add 1 to the row count.
 	const rowCount = showAppender ? blockCount + 1 : blockCount;
-	nextPositionRef.current = listPosition;
+	let nextPosition = listPosition;
 
-	return (
-		<>
-			{ filteredBlocks.map( ( block, index ) => {
-				const { clientId, innerBlocks } = block;
+	const rows = [];
 
-				if ( index > 0 ) {
-					nextPositionRef.current += countBlocks(
-						filteredBlocks[ index - 1 ],
-						expandedState,
-						draggedClientIds,
-						isExpanded
-					);
-				}
+	// A run of blocks outside of the render window becomes one spacer row that
+	// stands in for their height.
+	let placeholderRows = 0;
+	let placeholderKey;
 
-				const isDragged = !! draggedClientIds?.includes( clientId );
+	// Adds the pending placeholder row, if there is one. Call before
+	// adding a real row.
+	const pushPlaceholderRow = () => {
+		if ( ! placeholderRows ) {
+			return;
+		}
+		rows.push(
+			<tr key={ `placeholder-${ placeholderKey }` }>
+				<td
+					className="block-editor-list-view-placeholder"
+					style={ {
+						height: placeholderRows * BLOCK_LIST_ITEM_HEIGHT,
+					} }
+				/>
+			</tr>
+		);
+		placeholderRows = 0;
+		placeholderKey = undefined;
+	};
 
-				// Determine the displacement of the block while dragging. This
-				// works out whether the current block should be displaced up or
-				// down, relative to the dragged blocks and the drop target.
-				const { displacement, isAfterDraggedBlocks, isNesting } =
-					getDragDisplacementValues( {
-						blockIndexes,
-						blockDropTargetIndex,
-						blockDropPosition,
-						clientId,
-						firstDraggedBlockIndex,
-						isDragged,
-					} );
+	filteredBlocks.forEach( ( block, index ) => {
+		const { clientId, innerBlocks } = block;
 
-				const { itemInView } = fixedListWindow;
-				const blockInView = itemInView( nextPositionRef.current );
+		// The next sibling is offset by this block's subtree.
+		const blockListPosition = nextPosition;
+		nextPosition += countBlocks(
+			block,
+			expansionState,
+			draggedClientIds,
+			isExpanded
+		);
 
-				const position = index + 1;
-				const updatedPath =
-					path.length > 0
-						? `${ path }_${ position }`
-						: `${ position }`;
-				const hasNestedBlocks = !! innerBlocks?.length;
+		const isDragged = !! draggedClientIds?.includes( clientId );
 
-				const shouldExpand =
-					hasNestedBlocks && shouldShowInnerBlocks
-						? expandedState[ clientId ] ?? isExpanded
-						: undefined;
+		const { itemInView } = fixedListWindow;
+		const blockInView = itemInView( blockListPosition );
 
-				// Make updates to the selected or dragged blocks synchronous,
-				// but asynchronous for any other block.
-				const isSelected = isClientIdSelected(
-					clientId,
-					selectedClientIds
-				);
-				const isSelectedBranch =
-					isBranchSelected || ( isSelected && hasNestedBlocks );
+		const position = index + 1;
+		const updatedPath =
+			path.length > 0 ? `${ path }_${ position }` : `${ position }`;
+		const hasNestedBlocks = !! innerBlocks?.length;
 
-				// To avoid performance issues, we only render blocks that are in view,
-				// or blocks that are selected or dragged. If a block is selected,
-				// it is only counted if it is the first of the block selection.
-				// This prevents the entire tree from being rendered when a branch is
-				// selected, or a user selects all blocks, while still enabling scroll
-				// into view behavior when selecting a block or opening the list view.
-				// The first and last blocks of the list are always rendered, to ensure
-				// that Home and End keys work as expected.
-				const showBlock =
-					isDragged ||
-					blockInView ||
-					( isSelected && clientId === selectedClientIds[ 0 ] ) ||
-					index === 0 ||
-					index === blockCount - 1;
-				return (
-					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
-						{ showBlock && (
-							<ListViewBlock
-								block={ block }
-								selectBlock={ selectBlock }
-								isSelected={ isSelected }
-								isBranchSelected={ isSelectedBranch }
-								isDragged={ isDragged }
-								level={ level }
-								position={ position }
-								rowCount={ rowCount }
-								siblingBlockCount={ blockCount }
-								showBlockMovers={ showBlockMovers }
-								path={ updatedPath }
-								isExpanded={ isDragged ? false : shouldExpand }
-								listPosition={ nextPositionRef.current }
-								selectedClientIds={ selectedClientIds }
-								isSyncedBranch={ syncedBranch }
-								displacement={ displacement }
-								isAfterDraggedBlocks={ isAfterDraggedBlocks }
-								isNesting={ isNesting }
-							/>
-						) }
-						{ ! showBlock && (
-							<tr>
-								<td className="block-editor-list-view-placeholder" />
-							</tr>
-						) }
-						{ hasNestedBlocks && shouldExpand && ! isDragged && (
-							<ListViewBranch
-								parentId={ clientId }
-								blocks={ innerBlocks }
-								selectBlock={ selectBlock }
-								showBlockMovers={ showBlockMovers }
-								level={ level + 1 }
-								path={ updatedPath }
-								listPosition={ nextPositionRef.current + 1 }
-								fixedListWindow={ fixedListWindow }
-								isBranchSelected={ isSelectedBranch }
-								selectedClientIds={ selectedClientIds }
-								isExpanded={ isExpanded }
-								isSyncedBranch={ syncedBranch }
-							/>
-						) }
-					</AsyncModeProvider>
-				);
-			} ) }
+		const shouldExpand = hasNestedBlocks
+			? expansionState[ clientId ] ?? isExpanded
+			: undefined;
+
+		// Make updates to the selected or dragged blocks synchronous,
+		// but asynchronous for any other block.
+		const isSelected = isClientIdSelected( clientId, selectedClientIds );
+		const isSelectedBranch =
+			isBranchSelected || ( isSelected && hasNestedBlocks );
+
+		// To avoid performance issues, we only render blocks that are in view,
+		// or blocks that are selected or dragged. If a block is selected,
+		// it is only counted if it is the first of the block selection.
+		// This prevents the entire tree from being rendered when a branch is
+		// selected, or a user selects all blocks, while still enabling scroll
+		// into view behavior when selecting a block or opening the list view.
+		// The first and last blocks of the list are always rendered, to ensure
+		// that Home and End keys work as expected.
+		const showBlock =
+			isDragged ||
+			blockInView ||
+			( isSelected && clientId === selectedClientIds[ 0 ] ) ||
+			index === 0 ||
+			index === blockCount - 1;
+
+		const showNestedBlocks = hasNestedBlocks && shouldExpand && ! isDragged;
+
+		if ( ! showBlock ) {
+			placeholderRows += 1;
+			placeholderKey ??= clientId;
+
+			// Inner blocks of an off-window block may still be in view.
+			if ( ! showNestedBlocks ) {
+				return;
+			}
+		}
+
+		pushPlaceholderRow();
+
+		// Determine the displacement of the block while dragging. This
+		// works out whether the current block should be displaced up or
+		// down, relative to the dragged blocks and the drop target.
+		const { displacement, isAfterDraggedBlocks, isNesting } =
+			getDragDisplacementValues( {
+				blockIndexes,
+				blockDropTargetIndex,
+				blockDropPosition,
+				clientId,
+				firstDraggedBlockIndex,
+				isDragged,
+			} );
+
+		rows.push(
+			<AsyncModeProvider key={ clientId } value={ ! isSelected }>
+				{ showBlock && (
+					<ListViewBlock
+						clientId={ clientId }
+						selectBlock={ selectBlock }
+						isSelected={ isSelected }
+						isBranchSelected={ isSelectedBranch }
+						isDragged={ isDragged }
+						level={ level }
+						position={ position }
+						rowCount={ rowCount }
+						siblingBlockCount={ blockCount }
+						showBlockMovers={ showBlockMovers }
+						path={ updatedPath }
+						isExpanded={ isDragged ? false : shouldExpand }
+						selectedClientIds={ selectedClientIds }
+						isSyncedBranch={ syncedBranch }
+						displacement={ displacement }
+						isAfterDraggedBlocks={ isAfterDraggedBlocks }
+						isNesting={ isNesting }
+					/>
+				) }
+				{ showNestedBlocks && (
+					<ListViewBranch
+						parentId={ clientId }
+						blocks={ innerBlocks }
+						selectBlock={ selectBlock }
+						showBlockMovers={ showBlockMovers }
+						level={ level + 1 }
+						path={ updatedPath }
+						listPosition={ blockListPosition + 1 }
+						fixedListWindow={ fixedListWindow }
+						isBranchSelected={ isSelectedBranch }
+						selectedClientIds={ selectedClientIds }
+						isExpanded={ isExpanded }
+						isSyncedBranch={ syncedBranch }
+					/>
+				) }
+			</AsyncModeProvider>
+		);
+	} );
+
+	pushPlaceholderRow();
+
+	return (
+		<>
+			{ rows }
 			{ showAppender && (
 				<TreeGridRow
 					level={ level }

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

@@ -1,9 +1,30 @@
-/**
- * WordPress dependencies
- */
 import { createContext, useContext } from '@wordpress/element';
 
+/**
+ * Values that never change for the lifetime of a List View, such as the
+ * components passed in as props, the tree grid element ref, and the stable
+ * state updaters.
+ */
 export const ListViewContext = createContext( {} );
 ListViewContext.displayName = 'ListViewContext';
 
 export const useListViewContext = () => useContext( ListViewContext );
+
+/**
+ * Expansion and drag state. Only `ListViewBranch` reads it, so the frequent
+ * updates during a drag stop short of the individual rows.
+ */
+export const ListViewTreeStateContext = createContext( {} );
+ListViewTreeStateContext.displayName = 'ListViewTreeStateContext';
+
+export const useListViewTreeState = () =>
+	useContext( ListViewTreeStateContext );
+
+/**
+ * The client ID of the block that was just inserted, or `null`.
+ */
+export const ListViewInsertedBlockContext = createContext( null );
+ListViewInsertedBlockContext.displayName = 'ListViewInsertedBlockContext';
+
+export const useInsertedBlockClientId = () =>
+	useContext( ListViewInsertedBlockContext );

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

@@ -1,24 +1,12 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
-	__experimentalHStack as HStack,
-	__experimentalTruncate as Truncate,
 	Popover,
+	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
-
 import { getScrollContainer } from '@wordpress/dom';
 import { useCallback, useMemo } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
+import { Stack } from '@wordpress/ui';
 import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
@@ -327,18 +315,18 @@ export default function ListViewDropIndicatorPreview( {
 							showColors
 							context="list-view"
 						/>
-						<HStack
-							alignment="center"
+						<Stack
+							align="center"
 							className="block-editor-list-view-block-select-button__label-wrapper"
 							justify="flex-start"
-							spacing={ 1 }
+							gap="xs"
 						>
 							<span className="block-editor-list-view-block-select-button__title">
 								<Truncate ellipsizeMode="auto">
 									{ blockTitle }
 								</Truncate>
 							</span>
-						</HStack>
+						</Stack>
 					</div>
 					<div className="block-editor-list-view-block__menu-cell"></div>
 				</div>

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';
 import { isRTL } from '@wordpress/i18n';