List View: since list view blocks are memoized pass isSelected prop t…

…o avoid multiple items being styled as selected when they are not
WordPress · Nov 2, 2021 · 39eb49e · 39eb49e
1 parent 96a183f
commit 39eb49e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 34 deletions.
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -18,7 +18,7 @@ import {
 	useCallback,
 	memo,
 } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -32,11 +32,12 @@ import ListViewBlockContents from './block-contents';
 import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
 import { useListViewContext } from './context';
 import { store as blockEditorStore } from '../../store';
-import { isClientIdSelected } from './utils';
 
 function ListViewBlock( {
 	block,
 	isDragged,
+	isSelected,
+	isBranchSelected,
 	selectBlock,
 	position,
 	level,
@@ -61,34 +62,6 @@ function ListViewBlock( {
 		collapse,
 	} = useListViewContext();
 
-	const { isBranchSelected, isSelected } = useSelect(
-		( select ) => {
-			const {
-				getSelectedBlockClientId,
-				getSelectedBlockClientIds,
-				getBlockParents,
-			} = select( blockEditorStore );
-
-			const selectedClientIds = withExperimentalPersistentListViewFeatures
-				? getSelectedBlockClientIds()
-				: [ getSelectedBlockClientId() ];
-			const blockParents = getBlockParents( clientId );
-			const _isSelected = isClientIdSelected(
-				clientId,
-				selectedClientIds
-			);
-			return {
-				isSelected: _isSelected,
-				isBranchSelected:
-					_isSelected ||
-					blockParents.some( ( id ) => {
-						return isClientIdSelected( id, selectedClientIds );
-					} ),
-			};
-		},
-		[ withExperimentalPersistentListViewFeatures, clientId ]
-	);
-
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(

diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
@@ -6,13 +6,15 @@ import { compact } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Fragment, memo } from '@wordpress/element';
+import { memo } from '@wordpress/element';
+import { AsyncModeProvider } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import ListViewBlock from './block';
 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
@@ -64,8 +66,10 @@ function ListViewBranch( props ) {
 		selectBlock,
 		showBlockMovers,
 		showNestedBlocks,
+		selectedClientIds,
 		level = 1,
 		path = '',
+		isBranchSelected = false,
 		listPosition = 0,
 		fixedListWindow,
 	} = props;
@@ -115,12 +119,23 @@ function ListViewBranch( props ) {
 				const isDragged = !! draggedClientIds?.includes( 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 }>
+					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (
 							<ListViewBlock
 								block={ block }
 								selectBlock={ selectBlock }
+								isSelected={ isSelected }
+								isBranchSelected={ isSelectedBranch }
 								isDragged={ isDragged }
 								level={ level }
 								position={ position }
@@ -147,9 +162,11 @@ function ListViewBranch( props ) {
 								path={ updatedPath }
 								listPosition={ nextPosition + 1 }
 								fixedListWindow={ fixedListWindow }
+								isBranchSelected={ isSelectedBranch }
+								selectedClientIds={ selectedClientIds }
 							/>
 						) }
-					</Fragment>
+					</AsyncModeProvider>
 				);
 			} ) }
 		</>

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -67,7 +67,11 @@ function ListView(
 	},
 	ref
 ) {
-	const { clientIdsTree, draggedClientIds } = useListViewClientIds( blocks );
+	const {
+		clientIdsTree,
+		draggedClientIds,
+		selectedClientIds,
+	} = useListViewClientIds( blocks );
 	const { selectBlock } = useDispatch( blockEditorStore );
 	const { visibleBlockCount } = useSelect(
 		( select ) => {
@@ -189,6 +193,7 @@ function ListView(
 						showNestedBlocks={ showNestedBlocks }
 						showBlockMovers={ showBlockMovers }
 						fixedListWindow={ fixedListWindow }
+						selectedClientIds={ selectedClientIds }
 						{ ...props }
 					/>
 				</ListViewContext.Provider>

diff --git a/packages/block-editor/src/components/list-view/use-list-view-client-ids.js b/packages/block-editor/src/components/list-view/use-list-view-client-ids.js
@@ -14,10 +14,12 @@ export default function useListViewClientIds( blocks ) {
 		( select ) => {
 			const {
 				getDraggedBlockClientIds,
+				getSelectedBlockClientIds,
 				__unstableGetClientIdsTree,
 			} = select( blockEditorStore );
 
 			return {
+				selectedClientIds: getSelectedBlockClientIds(),
 				draggedClientIds: getDraggedBlockClientIds(),
 				clientIdsTree: blocks ? blocks : __unstableGetClientIdsTree(),
 			};