@wordpress/block-editor 7.0.1 → 8.0.0

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

@@ -12,8 +12,6 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useListViewContext } from './context';
-import ListViewBlockSlot from './block-slot';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
@@ -32,8 +30,6 @@ const ListViewBlockContents = forwardRef(
 		},
 		ref
 	) => {
-		const { __experimentalFeatures } = useListViewContext();
-
 		const { clientId } = block;
 
 		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
@@ -61,40 +57,23 @@ const ListViewBlockContents = forwardRef(
 
 		return (
 			<BlockDraggable clientIds={ [ block.clientId ] }>
-				{ ( { draggable, onDragStart, onDragEnd } ) =>
-					__experimentalFeatures ? (
-						<ListViewBlockSlot
-							ref={ ref }
-							className={ className }
-							block={ block }
-							onToggleExpanded={ onToggleExpanded }
-							isSelected={ isSelected }
-							position={ position }
-							siblingBlockCount={ siblingBlockCount }
-							level={ level }
-							draggable={ draggable && __experimentalFeatures }
-							onDragStart={ onDragStart }
-							onDragEnd={ onDragEnd }
-							{ ...props }
-						/>
-					) : (
-						<ListViewBlockSelectButton
-							ref={ ref }
-							className={ className }
-							block={ block }
-							onClick={ onClick }
-							onToggleExpanded={ onToggleExpanded }
-							isSelected={ isSelected }
-							position={ position }
-							siblingBlockCount={ siblingBlockCount }
-							level={ level }
-							draggable={ draggable }
-							onDragStart={ onDragStart }
-							onDragEnd={ onDragEnd }
-							{ ...props }
-						/>
-					)
-				}
+				{ ( { draggable, onDragStart, onDragEnd } ) => (
+					<ListViewBlockSelectButton
+						ref={ ref }
+						className={ className }
+						block={ block }
+						onClick={ onClick }
+						onToggleExpanded={ onToggleExpanded }
+						isSelected={ isSelected }
+						position={ position }
+						siblingBlockCount={ siblingBlockCount }
+						level={ level }
+						draggable={ draggable }
+						onDragStart={ onDragStart }
+						onDragEnd={ onDragEnd }
+						{ ...props }
+					/>
+				) }
 			</BlockDraggable>
 		);
 	}

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

@@ -9,13 +9,16 @@ import classnames from 'classnames';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
-	MenuGroup,
-	MenuItem,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
-import { useState, useRef, useEffect } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	useState,
+	useRef,
+	useEffect,
+	useCallback,
+	memo,
+} from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -30,13 +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,
+	isDragged,
 	isSelected,
 	isBranchSelected,
-	isLastOfSelectedBranch,
-	onClick,
-	onToggleExpanded,
+	selectBlock,
 	position,
 	level,
 	rowCount,
@@ -48,43 +50,28 @@ export default function ListViewBlock( {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const { clientId } = block;
-	const { isDragging, blockParents } = useSelect(
-		( select ) => {
-			const {
-				isBlockBeingDragged,
-				isAncestorBeingDragged,
-				getBlockParents,
-			} = select( blockEditorStore );
-
-			return {
-				isDragging:
-					isBlockBeingDragged( clientId ) ||
-					isAncestorBeingDragged( clientId ),
-				blockParents: getBlockParents( clientId ),
-			};
-		},
-		[ clientId ]
-	);
+
+	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const {
-		selectBlock: selectEditorBlock,
-		toggleBlockHighlight,
-	} = useDispatch( blockEditorStore );
+		__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 }
+		{ 'is-visible': isHovered || isSelected }
 	);
-	const {
-		__experimentalFeatures: withExperimentalFeatures,
-		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
-		isTreeGridMounted,
-	} = useListViewContext();
+
 	const listViewBlockSettingsClassName = classnames(
 		'block-editor-list-view-block__menu-cell',
-		{ 'is-visible': isHovered }
+		{ 'is-visible': isHovered || isSelected }
 	);
 
 	// If ListView has experimental features related to the Persistent List View,
@@ -100,35 +87,60 @@ export default function ListViewBlock( {
 		}
 	}, [] );
 
-	// If ListView has experimental features (such as drag and drop) enabled,
-	// leave the focus handling as it was before, to avoid accidental regressions.
-	useEffect( () => {
-		if ( withExperimentalFeatures && isSelected ) {
-			cellRef.current.focus();
-		}
-	}, [ withExperimentalFeatures, isSelected ] );
-
 	const highlightBlock = withExperimentalPersistentListViewFeatures
 		? 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': isDragging,
+		'is-dragging': isDragged,
+		'has-single-cell': hideBlockActions,
 	} );
 
 	return (
@@ -148,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 }
@@ -200,7 +212,7 @@ export default function ListViewBlock( {
 				</>
 			) }
 
-			{ withExperimentalFeatures && (
+			{ showBlockActions && (
 				<TreeGridCell className={ listViewBlockSettingsClassName }>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsDropdown
@@ -208,41 +220,18 @@ export default function ListViewBlock( {
 							icon={ moreVertical }
 							toggleProps={ {
 								ref,
+								className: 'block-editor-list-view-block__menu',
 								tabIndex,
 								onFocus,
 							} }
 							disableOpenOnArrowDown
-							__experimentalSelectBlock={ onClick }
-						>
-							{ ( { onClose } ) => (
-								<MenuGroup>
-									<MenuItem
-										onClick={ async () => {
-											if ( blockParents.length ) {
-												// If the block to select is inside a dropdown, we need to open the dropdown.
-												// Otherwise focus won't transfer to the block.
-												for ( const parent of blockParents ) {
-													await selectEditorBlock(
-														parent
-													);
-												}
-											} else {
-												// If clientId is already selected, it won't be focused (see block-wrapper.js)
-												// This removes the selection first to ensure the focus will always switch.
-												await selectEditorBlock( null );
-											}
-											await selectEditorBlock( clientId );
-											onClose();
-										} }
-									>
-										{ __( 'Go to block' ) }
-									</MenuItem>
-								</MenuGroup>
-							) }
-						</BlockSettingsDropdown>
+							__experimentalSelectBlock={ selectEditorBlock }
+						/>
 					) }
 				</TreeGridCell>
 			) }
 		</ListViewLeaf>
 	);
 }
+
+export default memo( ListViewBlock );

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

@@ -1,147 +1,174 @@
 /**
  * External dependencies
  */
-import { map, compact } from 'lodash';
+import { compact } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
+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';
 
-export default function ListViewBranch( props ) {
+/**
+ * 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;
+};
+
+function ListViewBranch( props ) {
 	const {
 		blocks,
 		selectBlock,
-		selectedBlockClientIds,
-		showAppender,
 		showBlockMovers,
 		showNestedBlocks,
-		parentBlockClientId,
+		selectedClientIds,
 		level = 1,
-		terminatedLevels = [],
-		path = [],
+		path = '',
 		isBranchSelected = false,
-		isLastOfBranch = false,
+		listPosition = 0,
+		fixedListWindow,
 	} = props;
 
-	const isTreeRoot = ! parentBlockClientId;
+	const {
+		expandedState,
+		draggedClientIds,
+		__experimentalPersistentListViewFeatures,
+	} = useListViewContext();
+
 	const filteredBlocks = compact( blocks );
-	const itemHasAppender = ( parentClientId ) =>
-		showAppender &&
-		! isTreeRoot &&
-		isClientIdSelected( parentClientId, selectedBlockClientIds );
-	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;
-
-	const { expandedState, expand, collapse } = useListViewContext();
+	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,
-					selectedBlockClientIds
-				);
-				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 isSelected = isClientIdSelected(
+					clientId,
+					selectedClientIds
+				);
+				const isSelectedBranch =
+					isBranchSelected || ( isSelected && hasNestedBlocks );
 				return (
-					<Fragment key={ clientId }>
-						<ListViewBlock
-							block={ block }
-							onClick={ selectBlockWithClientId }
-							onToggleExpanded={ toggleExpanded }
-							isSelected={ isSelected }
-							isBranchSelected={ isSelectedBranch }
-							isLastOfSelectedBranch={ isLastOfSelectedBranch }
-							level={ level }
-							position={ position }
-							rowCount={ rowCount }
-							siblingBlockCount={ blockCount }
-							showBlockMovers={ showBlockMovers }
-							terminatedLevels={ terminatedLevels }
-							path={ updatedPath }
-							isExpanded={ isExpanded }
-						/>
-						{ hasNestedBranch && isExpanded && (
+					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
+						{ 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 }
-								selectedBlockClientIds={
-									selectedBlockClientIds
-								}
 								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 }
 							/>
 						) }
-					</Fragment>
+					</AsyncModeProvider>
 				);
 			} ) }
-			{ hasAppender && (
-				<ListViewAppender
-					parentBlockClientId={ parentBlockClientId }
-					position={ rowCount }
-					rowCount={ appenderPosition }
-					level={ level }
-					terminatedLevels={ terminatedLevels }
-					path={ [ ...path, appenderPosition ] }
-				/>
-			) }
 		</>
 	);
 }
@@ -149,3 +176,5 @@ export default function ListViewBranch( props ) {
 ListViewBranch.defaultProps = {
 	selectBlock: () => {},
 };
+
+export default memo( ListViewBranch );