@wordpress/block-editor 7.0.4 → 8.0.3

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

@@ -11,7 +11,13 @@ import {
 	__experimentalTreeGridItem as TreeGridItem,
 } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
-import { useState, useRef, useEffect } from '@wordpress/element';
+import {
+	useState,
+	useRef,
+	useEffect,
+	useCallback,
+	memo,
+} from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 
 /**
@@ -27,14 +33,12 @@ import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdow
 import { useListViewContext } from './context';
 import { store as blockEditorStore } from '../../store';
 
-export default function ListViewBlock( {
+function ListViewBlock( {
 	block,
-	isSelected,
 	isDragged,
+	isSelected,
 	isBranchSelected,
-	isLastOfSelectedBranch,
-	onClick,
-	onToggleExpanded,
+	selectBlock,
 	position,
 	level,
 	rowCount,
@@ -49,17 +53,22 @@ export default function ListViewBlock( {
 
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
+	const {
+		__experimentalFeatures: withExperimentalFeatures,
+		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
+		__experimentalHideContainerBlockActions: hideContainerBlockActions,
+		isTreeGridMounted,
+		expand,
+		collapse,
+	} = useListViewContext();
+
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(
 		'block-editor-list-view-block__mover-cell',
 		{ 'is-visible': isHovered || isSelected }
 	);
-	const {
-		__experimentalFeatures: withExperimentalFeatures,
-		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
-		isTreeGridMounted,
-	} = useListViewContext();
+
 	const listViewBlockSettingsClassName = classnames(
 		'block-editor-list-view-block__menu-cell',
 		{ 'is-visible': isHovered || isSelected }
@@ -82,23 +91,56 @@ export default function ListViewBlock( {
 		? toggleBlockHighlight
 		: () => {};
 
-	const onMouseEnter = () => {
+	const onMouseEnter = useCallback( () => {
 		setIsHovered( true );
 		highlightBlock( clientId, true );
-	};
-	const onMouseLeave = () => {
+	}, [ clientId, setIsHovered, highlightBlock ] );
+	const onMouseLeave = useCallback( () => {
 		setIsHovered( false );
 		highlightBlock( clientId, false );
-	};
+	}, [ clientId, setIsHovered, highlightBlock ] );
+
+	const selectEditorBlock = useCallback(
+		( event ) => {
+			event.stopPropagation();
+			selectBlock( clientId );
+		},
+		[ clientId, selectBlock ]
+	);
+
+	const toggleExpanded = useCallback(
+		( event ) => {
+			event.stopPropagation();
+			if ( isExpanded === true ) {
+				collapse( clientId );
+			} else if ( isExpanded === false ) {
+				expand( clientId );
+			}
+		},
+		[ clientId, expand, collapse, isExpanded ]
+	);
+
+	const showBlockActions =
+		withExperimentalFeatures &&
+		//hide actions for blocks like core/widget-areas
+		( ! hideContainerBlockActions ||
+			( hideContainerBlockActions && level > 1 ) );
+
+	const hideBlockActions = withExperimentalFeatures && ! showBlockActions;
+
+	let colSpan;
+	if ( hasRenderedMovers ) {
+		colSpan = 2;
+	} else if ( hideBlockActions ) {
+		colSpan = 3;
+	}
 
 	const classes = classnames( {
 		'is-selected': isSelected,
 		'is-branch-selected':
 			withExperimentalPersistentListViewFeatures && isBranchSelected,
-		'is-last-of-selected-branch':
-			withExperimentalPersistentListViewFeatures &&
-			isLastOfSelectedBranch,
 		'is-dragging': isDragged,
+		'has-single-cell': hideBlockActions,
 	} );
 
 	return (
@@ -118,15 +160,15 @@ export default function ListViewBlock( {
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
-				colSpan={ hasRenderedMovers ? undefined : 2 }
+				colSpan={ colSpan }
 				ref={ cellRef }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
 						<ListViewBlockContents
 							block={ block }
-							onClick={ onClick }
-							onToggleExpanded={ onToggleExpanded }
+							onClick={ selectEditorBlock }
+							onToggleExpanded={ toggleExpanded }
 							isSelected={ isSelected }
 							position={ position }
 							siblingBlockCount={ siblingBlockCount }
@@ -170,7 +212,7 @@ export default function ListViewBlock( {
 				</>
 			) }
 
-			{ withExperimentalFeatures && (
+			{ showBlockActions && (
 				<TreeGridCell className={ listViewBlockSettingsClassName }>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsDropdown
@@ -183,7 +225,7 @@ export default function ListViewBlock( {
 								onFocus,
 							} }
 							disableOpenOnArrowDown
-							__experimentalSelectBlock={ onClick }
+							__experimentalSelectBlock={ selectEditorBlock }
 						/>
 					) }
 				</TreeGridCell>
@@ -191,3 +233,5 @@ export default function ListViewBlock( {
 		</ListViewLeaf>
 	);
 }
+
+export default memo( ListViewBlock );

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

@@ -1,154 +1,174 @@
 /**
  * External dependencies
  */
-import { map, compact } from 'lodash';
+import { compact } from 'lodash';
 
 /**
  * WordPress dependencies
  */
+import { memo } from '@wordpress/element';
 import { AsyncModeProvider } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import ListViewBlock from './block';
-import ListViewAppender from './appender';
-import { isClientIdSelected } from './utils';
 import { useListViewContext } from './context';
+import { isClientIdSelected } from './utils';
+
+/**
+ * Given a block, returns the total number of blocks in that subtree. This is used to help determine
+ * the list position of a block.
+ *
+ * When a block is collapsed, we do not count their children as part of that total. In the current drag
+ * 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 {Array}  draggedClientIds a list of dragged client ids
+ * @return {number} block count
+ */
+function countBlocks( block, expandedState, draggedClientIds ) {
+	const isDragged = draggedClientIds?.includes( block.clientId );
+	if ( isDragged ) {
+		return 0;
+	}
+	const isExpanded = expandedState[ block.clientId ] ?? true;
+	if ( isExpanded ) {
+		return (
+			1 +
+			block.innerBlocks.reduce(
+				countReducer( expandedState, draggedClientIds ),
+				0
+			)
+		);
+	}
+	return 1;
+}
+const countReducer = ( expandedState, draggedClientIds ) => (
+	count,
+	block
+) => {
+	const isDragged = draggedClientIds?.includes( block.clientId );
+	if ( isDragged ) {
+		return count;
+	}
+	const isExpanded = expandedState[ block.clientId ] ?? true;
+	if ( isExpanded && block.innerBlocks.length > 0 ) {
+		return count + countBlocks( block, expandedState, draggedClientIds );
+	}
+	return count + 1;
+};
 
-export default function ListViewBranch( props ) {
+function ListViewBranch( props ) {
 	const {
 		blocks,
 		selectBlock,
-		showAppender,
 		showBlockMovers,
 		showNestedBlocks,
-		parentBlockClientId,
+		selectedClientIds,
 		level = 1,
-		terminatedLevels = [],
-		path = [],
+		path = '',
 		isBranchSelected = false,
-		isLastOfBranch = false,
+		listPosition = 0,
+		fixedListWindow,
 	} = props;
 
 	const {
 		expandedState,
-		expand,
-		collapse,
 		draggedClientIds,
-		selectedClientIds,
+		__experimentalPersistentListViewFeatures,
 	} = useListViewContext();
 
-	const isTreeRoot = ! parentBlockClientId;
 	const filteredBlocks = compact( blocks );
-	const itemHasAppender = ( parentClientId ) =>
-		showAppender &&
-		! isTreeRoot &&
-		isClientIdSelected( parentClientId, selectedClientIds );
-	const hasAppender = itemHasAppender( parentBlockClientId );
-	// Add +1 to the rowCount to take the block appender into account.
 	const blockCount = filteredBlocks.length;
-	const rowCount = hasAppender ? blockCount + 1 : blockCount;
-	const appenderPosition = rowCount;
+	let nextPosition = listPosition;
 
 	return (
 		<>
-			{ map( filteredBlocks, ( block, index ) => {
+			{ filteredBlocks.map( ( block, index ) => {
 				const { clientId, innerBlocks } = block;
+
+				if ( index > 0 ) {
+					nextPosition += countBlocks(
+						filteredBlocks[ index - 1 ],
+						expandedState,
+						draggedClientIds
+					);
+				}
+
+				const usesWindowing = __experimentalPersistentListViewFeatures;
+
+				const { itemInView } = fixedListWindow;
+
+				const blockInView =
+					! usesWindowing || itemInView( nextPosition );
+
 				const position = index + 1;
-				const isLastRowAtLevel = rowCount === position;
-				const updatedTerminatedLevels = isLastRowAtLevel
-					? [ ...terminatedLevels, level ]
-					: terminatedLevels;
-				const updatedPath = [ ...path, position ];
+				const updatedPath =
+					path.length > 0
+						? `${ path }_${ position }`
+						: `${ position }`;
 				const hasNestedBlocks =
 					showNestedBlocks && !! innerBlocks && !! innerBlocks.length;
-				const hasNestedAppender = itemHasAppender( clientId );
-				const hasNestedBranch = hasNestedBlocks || hasNestedAppender;
-
-				const isSelected = isClientIdSelected(
-					clientId,
-					selectedClientIds
-				);
-				const isSelectedBranch =
-					isBranchSelected || ( isSelected && hasNestedBranch );
 
-				// Logic needed to target the last item of a selected branch which might be deeply nested.
-				// This is currently only needed for styling purposes. See: `.is-last-of-selected-branch`.
-				const isLastBlock = index === blockCount - 1;
-				const isLast = isSelected || ( isLastOfBranch && isLastBlock );
-				const isLastOfSelectedBranch =
-					isLastOfBranch && ! hasNestedBranch && isLastBlock;
-
-				const isExpanded = hasNestedBranch
+				const isExpanded = hasNestedBlocks
 					? expandedState[ clientId ] ?? true
 					: undefined;
 
-				const selectBlockWithClientId = ( event ) => {
-					event.stopPropagation();
-					selectBlock( clientId );
-				};
+				const isDragged = !! draggedClientIds?.includes( clientId );
 
-				const toggleExpanded = ( event ) => {
-					event.stopPropagation();
-					if ( isExpanded === true ) {
-						collapse( clientId );
-					} else if ( isExpanded === false ) {
-						expand( clientId );
-					}
-				};
+				const showBlock = isDragged || blockInView;
 
 				// Make updates to the selected or dragged blocks synchronous,
 				// but asynchronous for any other block.
-				const isDragged = !! draggedClientIds?.includes( clientId );
-
+				const isSelected = isClientIdSelected(
+					clientId,
+					selectedClientIds
+				);
+				const isSelectedBranch =
+					isBranchSelected || ( isSelected && hasNestedBlocks );
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
-						<ListViewBlock
-							block={ block }
-							onClick={ selectBlockWithClientId }
-							onToggleExpanded={ toggleExpanded }
-							isDragged={ isDragged }
-							isSelected={ isSelected }
-							isBranchSelected={ isSelectedBranch }
-							isLastOfSelectedBranch={ isLastOfSelectedBranch }
-							level={ level }
-							position={ position }
-							rowCount={ rowCount }
-							siblingBlockCount={ blockCount }
-							showBlockMovers={ showBlockMovers }
-							terminatedLevels={ terminatedLevels }
-							path={ updatedPath }
-							isExpanded={ isExpanded }
-						/>
-						{ hasNestedBranch && isExpanded && ! isDragged && (
+						{ showBlock && (
+							<ListViewBlock
+								block={ block }
+								selectBlock={ selectBlock }
+								isSelected={ isSelected }
+								isBranchSelected={ isSelectedBranch }
+								isDragged={ isDragged }
+								level={ level }
+								position={ position }
+								rowCount={ blockCount }
+								siblingBlockCount={ blockCount }
+								showBlockMovers={ showBlockMovers }
+								path={ updatedPath }
+								isExpanded={ isExpanded }
+								listPosition={ nextPosition }
+							/>
+						) }
+						{ ! showBlock && (
+							<tr>
+								<td className="block-editor-list-view-placeholder" />
+							</tr>
+						) }
+						{ hasNestedBlocks && isExpanded && ! isDragged && (
 							<ListViewBranch
 								blocks={ innerBlocks }
 								selectBlock={ selectBlock }
-								isBranchSelected={ isSelectedBranch }
-								isLastOfBranch={ isLast }
-								showAppender={ showAppender }
 								showBlockMovers={ showBlockMovers }
 								showNestedBlocks={ showNestedBlocks }
-								parentBlockClientId={ clientId }
 								level={ level + 1 }
-								terminatedLevels={ updatedTerminatedLevels }
 								path={ updatedPath }
+								listPosition={ nextPosition + 1 }
+								fixedListWindow={ fixedListWindow }
+								isBranchSelected={ isSelectedBranch }
+								selectedClientIds={ selectedClientIds }
 							/>
 						) }
 					</AsyncModeProvider>
 				);
 			} ) }
-			{ hasAppender && (
-				<ListViewAppender
-					parentBlockClientId={ parentBlockClientId }
-					position={ rowCount }
-					rowCount={ appenderPosition }
-					level={ level }
-					terminatedLevels={ terminatedLevels }
-					path={ [ ...path, appenderPosition ] }
-				/>
-			) }
 		</>
 	);
 }
@@ -156,3 +176,5 @@ export default function ListViewBranch( props ) {
 ListViewBranch.defaultProps = {
 	selectBlock: () => {},
 };
+
+export default memo( ListViewBranch );

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

@@ -1,10 +1,12 @@
 /**
  * WordPress dependencies
  */
-
-import { useMergeRefs } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	__experimentalUseFixedWindowList as useFixedWindowList,
+} from '@wordpress/compose';
 import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
-import { AsyncModeProvider, useDispatch } from '@wordpress/data';
+import { AsyncModeProvider, useDispatch, useSelect } from '@wordpress/data';
 import {
 	useCallback,
 	useEffect,
@@ -46,32 +48,46 @@ const expanded = ( state, action ) => {
  * @param {Array}    props.blocks                                   Custom subset of block client IDs to be used instead of the default hierarchy.
  * @param {Function} props.onSelect                                 Block selection callback.
  * @param {boolean}  props.showNestedBlocks                         Flag to enable displaying nested blocks.
- * @param {boolean}  props.showOnlyCurrentHierarchy                 Flag to limit the list to the current hierarchy of blocks.
+ * @param {boolean}  props.showBlockMovers                          Flag to enable block movers
  * @param {boolean}  props.__experimentalFeatures                   Flag to enable experimental features.
  * @param {boolean}  props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
+ * @param {boolean}  props.__experimentalHideContainerBlockActions  Flag to hide actions of top level blocks (like core/widget-area)
  * @param {Object}   ref                                            Forwarded ref
  */
 function ListView(
 	{
 		blocks,
-		showOnlyCurrentHierarchy,
 		onSelect = noop,
 		__experimentalFeatures,
 		__experimentalPersistentListViewFeatures,
+		__experimentalHideContainerBlockActions,
+		showNestedBlocks,
+		showBlockMovers,
 		...props
 	},
 	ref
 ) {
 	const {
 		clientIdsTree,
-		selectedClientIds,
 		draggedClientIds,
-	} = useListViewClientIds(
-		blocks,
-		showOnlyCurrentHierarchy,
-		__experimentalPersistentListViewFeatures
-	);
+		selectedClientIds,
+	} = useListViewClientIds( blocks );
 	const { selectBlock } = useDispatch( blockEditorStore );
+	const { visibleBlockCount } = useSelect(
+		( select ) => {
+			const { getGlobalBlockCount, getClientIdsOfDescendants } = select(
+				blockEditorStore
+			);
+			const draggedBlockCount =
+				draggedClientIds?.length > 0
+					? getClientIdsOfDescendants( draggedClientIds ).length + 1
+					: 0;
+			return {
+				visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
+			};
+		},
+		[ draggedClientIds ]
+	);
 	const selectEditorBlock = useCallback(
 		( clientId ) => {
 			selectBlock( clientId );
@@ -90,6 +106,19 @@ function ListView(
 		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,
+		36,
+		visibleBlockCount,
+		{
+			useWindowing: __experimentalPersistentListViewFeatures,
+			windowOverscan: 40,
+		}
+	);
+
 	const expand = useCallback(
 		( clientId ) => {
 			if ( ! clientId ) {
@@ -108,20 +137,26 @@ function ListView(
 		},
 		[ setExpandedState ]
 	);
-	const expandRow = ( row ) => {
-		expand( row?.dataset?.block );
-	};
-	const collapseRow = ( row ) => {
-		collapse( row?.dataset?.block );
-	};
+	const expandRow = useCallback(
+		( row ) => {
+			expand( row?.dataset?.block );
+		},
+		[ expand ]
+	);
+	const collapseRow = useCallback(
+		( row ) => {
+			collapse( row?.dataset?.block );
+		},
+		[ collapse ]
+	);
 
 	const contextValue = useMemo(
 		() => ( {
 			__experimentalFeatures,
 			__experimentalPersistentListViewFeatures,
+			__experimentalHideContainerBlockActions,
 			isTreeGridMounted: isMounted.current,
 			draggedClientIds,
-			selectedClientIds,
 			expandedState,
 			expand,
 			collapse,
@@ -129,9 +164,9 @@ function ListView(
 		[
 			__experimentalFeatures,
 			__experimentalPersistentListViewFeatures,
+			__experimentalHideContainerBlockActions,
 			isMounted.current,
 			draggedClientIds,
-			selectedClientIds,
 			expandedState,
 			expand,
 			collapse,
@@ -155,6 +190,10 @@ function ListView(
 					<ListViewBranch
 						blocks={ clientIdsTree }
 						selectBlock={ selectEditorBlock }
+						showNestedBlocks={ showNestedBlocks }
+						showBlockMovers={ showBlockMovers }
+						fixedListWindow={ fixedListWindow }
+						selectedClientIds={ selectedClientIds }
 						{ ...props }
 					/>
 				</ListViewContext.Provider>

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

@@ -30,7 +30,7 @@ export default function ListViewLeaf( {
 		isSelected,
 		adjustScrolling: false,
 		enableAnimation: true,
-		triggerAnimationOnChange: path.join( '_' ),
+		triggerAnimationOnChange: path,
 	} );
 
 	return (

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

@@ -57,14 +57,14 @@
 	&.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents {
 		border-radius: 0;
 	}
-	&.is-branch-selected.is-last-of-selected-branch .block-editor-list-view-block-contents {
-		border-radius: 0 0 2px 2px;
-	}
 
 	&.is-dragging {
 		display: none;
 	}
 
+	// List View renders a fixed number of items and relies on each item having a fixed 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.
 	.block-editor-list-view-block-contents {
 		display: flex;
 		align-items: center;
@@ -115,6 +115,11 @@
 			}
 		}
 	}
+	// Fix focus styling width when one row has fewer cells.
+	&.has-single-cell .block-editor-list-view-block-contents:focus::after {
+		right: 0;
+	}
+
 	.block-editor-list-view-block__menu:focus {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		z-index: 1;
@@ -355,3 +360,9 @@ $block-navigation-max-indent: 8;
 	box-shadow: none;
 }
 
+.block-editor-list-view-placeholder {
+	padding: 0;
+	margin: 0;
+	height: 36px;
+}
+