Try disabling async mode provider around selected block in ListView (#…

…34519) * Try disabling async mode provider around selected block in ListView * Remove AsyncModeProvider from root of ListView * Use useCallback to stop provider from constantly updating * Wrap inner part of ListView with AsyncModeProvider * Try also making dragged block synchronous * Avoid rendering entire branch when parent is dragged
WordPress · Sep 16, 2021 · 93b9c2b · 93b9c2b
1 parent 7bb5e4b
commit 93b9c2b
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 77 deletions.
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -33,6 +33,7 @@ import { store as blockEditorStore } from '../../store';
 export default function ListViewBlock( {
 	block,
 	isSelected,
+	isDragged,
 	isBranchSelected,
 	isLastOfSelectedBranch,
 	onClick,
@@ -48,20 +49,9 @@ export default function ListViewBlock( {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const { clientId } = block;
-	const { isDragging, blockParents } = useSelect(
+	const blockParents = useSelect(
 		( select ) => {
-			const {
-				isBlockBeingDragged,
-				isAncestorBeingDragged,
-				getBlockParents,
-			} = select( blockEditorStore );
-
-			return {
-				isDragging:
-					isBlockBeingDragged( clientId ) ||
-					isAncestorBeingDragged( clientId ),
-				blockParents: getBlockParents( clientId ),
-			};
+			return select( blockEditorStore ).getBlockParents( clientId );
 		},
 		[ clientId ]
 	);
@@ -128,7 +118,7 @@ export default function ListViewBlock( {
 		'is-last-of-selected-branch':
 			withExperimentalPersistentListViewFeatures &&
 			isLastOfSelectedBranch,
-		'is-dragging': isDragging,
+		'is-dragging': isDragged,
 	} );
 
 	return (

diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
@@ -6,7 +6,7 @@ import { map, compact } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
+import { AsyncModeProvider } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -20,7 +20,6 @@ export default function ListViewBranch( props ) {
 	const {
 		blocks,
 		selectBlock,
-		selectedBlockClientIds,
 		showAppender,
 		showBlockMovers,
 		showNestedBlocks,
@@ -32,20 +31,26 @@ export default function ListViewBranch( props ) {
 		isLastOfBranch = false,
 	} = props;
 
+	const {
+		expandedState,
+		expand,
+		collapse,
+		draggedClientIds,
+		selectedClientIds,
+	} = useListViewContext();
+
 	const isTreeRoot = ! parentBlockClientId;
 	const filteredBlocks = compact( blocks );
 	const itemHasAppender = ( parentClientId ) =>
 		showAppender &&
 		! isTreeRoot &&
-		isClientIdSelected( parentClientId, selectedBlockClientIds );
+		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;
 
-	const { expandedState, expand, collapse } = useListViewContext();
-
 	return (
 		<>
 			{ map( filteredBlocks, ( block, index ) => {
@@ -63,7 +68,7 @@ export default function ListViewBranch( props ) {
 
 				const isSelected = isClientIdSelected(
 					clientId,
-					selectedBlockClientIds
+					selectedClientIds
 				);
 				const isSelectedBranch =
 					isBranchSelected || ( isSelected && hasNestedBranch );
@@ -93,12 +98,17 @@ export default function ListViewBranch( props ) {
 					}
 				};
 
+				// Make updates to the selected or dragged blocks synchronous,
+				// but asynchronous for any other block.
+				const isDragged = !! draggedClientIds?.includes( clientId );
+
 				return (
-					<Fragment key={ clientId }>
+					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						<ListViewBlock
 							block={ block }
 							onClick={ selectBlockWithClientId }
 							onToggleExpanded={ toggleExpanded }
+							isDragged={ isDragged }
 							isSelected={ isSelected }
 							isBranchSelected={ isSelectedBranch }
 							isLastOfSelectedBranch={ isLastOfSelectedBranch }
@@ -111,12 +121,9 @@ export default function ListViewBranch( props ) {
 							path={ updatedPath }
 							isExpanded={ isExpanded }
 						/>
-						{ hasNestedBranch && isExpanded && (
+						{ hasNestedBranch && isExpanded && ! isDragged && (
 							<ListViewBranch
 								blocks={ innerBlocks }
-								selectedBlockClientIds={
-									selectedBlockClientIds
-								}
 								selectBlock={ selectBlock }
 								isBranchSelected={ isSelectedBranch }
 								isLastOfBranch={ isLast }
@@ -129,7 +136,7 @@ export default function ListViewBranch( props ) {
 								path={ updatedPath }
 							/>
 						) }
-					</Fragment>
+					</AsyncModeProvider>
 				);
 			} ) }
 			{ hasAppender && (

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -4,7 +4,7 @@
 
 import { useMergeRefs } from '@wordpress/compose';
 import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { AsyncModeProvider, useDispatch } from '@wordpress/data';
 import {
 	useCallback,
 	useEffect,
@@ -62,7 +62,11 @@ function ListView(
 	},
 	ref
 ) {
-	const { clientIdsTree, selectedClientIds } = useListViewClientIds(
+	const {
+		clientIdsTree,
+		selectedClientIds,
+		draggedClientIds,
+	} = useListViewClientIds(
 		blocks,
 		showOnlyCurrentHierarchy,
 		__experimentalPersistentListViewFeatures
@@ -86,18 +90,24 @@ function ListView(
 		isMounted.current = true;
 	}, [] );
 
-	const expand = ( clientId ) => {
-		if ( ! clientId ) {
-			return;
-		}
-		setExpandedState( { type: 'expand', clientId } );
-	};
-	const collapse = ( clientId ) => {
-		if ( ! clientId ) {
-			return;
-		}
-		setExpandedState( { type: 'collapse', clientId } );
-	};
+	const expand = useCallback(
+		( clientId ) => {
+			if ( ! clientId ) {
+				return;
+			}
+			setExpandedState( { type: 'expand', clientId } );
+		},
+		[ setExpandedState ]
+	);
+	const collapse = useCallback(
+		( clientId ) => {
+			if ( ! clientId ) {
+				return;
+			}
+			setExpandedState( { type: 'collapse', clientId } );
+		},
+		[ setExpandedState ]
+	);
 	const expandRow = ( row ) => {
 		expand( row?.dataset?.block );
 	};
@@ -110,6 +120,8 @@ function ListView(
 			__experimentalFeatures,
 			__experimentalPersistentListViewFeatures,
 			isTreeGridMounted: isMounted.current,
+			draggedClientIds,
+			selectedClientIds,
 			expandedState,
 			expand,
 			collapse,
@@ -118,14 +130,16 @@ function ListView(
 			__experimentalFeatures,
 			__experimentalPersistentListViewFeatures,
 			isMounted.current,
+			draggedClientIds,
+			selectedClientIds,
 			expandedState,
 			expand,
 			collapse,
 		]
 	);
 
 	return (
-		<>
+		<AsyncModeProvider value={ true }>
 			<ListViewDropIndicator
 				listViewRef={ elementRef }
 				blockDropTarget={ blockDropTarget }
@@ -141,12 +155,11 @@ function ListView(
 					<ListViewBranch
 						blocks={ clientIdsTree }
 						selectBlock={ selectEditorBlock }
-						selectedBlockClientIds={ selectedClientIds }
 						{ ...props }
 					/>
 				</ListViewContext.Provider>
 			</TreeGrid>
-		</>
+		</AsyncModeProvider>
 	);
 }
 export default forwardRef( ListView );
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
@@ -10,25 +10,6 @@ import { useSelect } from '@wordpress/data';
 import { isClientIdSelected } from './utils';
 import { store as blockEditorStore } from '../../store';
 
-const useListViewSelectedClientIds = (
-	__experimentalPersistentListViewFeatures
-) =>
-	useSelect(
-		( select ) => {
-			const {
-				getSelectedBlockClientId,
-				getSelectedBlockClientIds,
-			} = select( blockEditorStore );
-
-			if ( __experimentalPersistentListViewFeatures ) {
-				return getSelectedBlockClientIds();
-			}
-
-			return getSelectedBlockClientId();
-		},
-		[ __experimentalPersistentListViewFeatures ]
-	);
-
 const useListViewClientIdsTree = (
 	blocks,
 	selectedClientIds,
@@ -76,13 +57,32 @@ export default function useListViewClientIds(
 	showOnlyCurrentHierarchy,
 	__experimentalPersistentListViewFeatures
 ) {
-	const selectedClientIds = useListViewSelectedClientIds(
-		__experimentalPersistentListViewFeatures
+	const { selectedClientIds, draggedClientIds } = useSelect(
+		( select ) => {
+			const {
+				getSelectedBlockClientId,
+				getSelectedBlockClientIds,
+				getDraggedBlockClientIds,
+			} = select( blockEditorStore );
+
+			if ( __experimentalPersistentListViewFeatures ) {
+				return {
+					selectedClientIds: getSelectedBlockClientIds(),
+					draggedClientIds: getDraggedBlockClientIds(),
+				};
+			}
+
+			return {
+				selectedClientIds: getSelectedBlockClientId(),
+				draggedClientIds: getDraggedBlockClientIds(),
+			};
+		},
+		[ __experimentalPersistentListViewFeatures ]
 	);
 	const clientIdsTree = useListViewClientIdsTree(
 		blocks,
 		selectedClientIds,
 		showOnlyCurrentHierarchy
 	);
-	return { clientIdsTree, selectedClientIds };
+	return { clientIdsTree, selectedClientIds, draggedClientIds };
 }
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -15,7 +15,7 @@ import {
 	EditorSnackbars,
 	store as editorStore,
 } from '@wordpress/editor';
-import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { BlockBreadcrumb } from '@wordpress/block-editor';
 import { Button, ScrollLock, Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
@@ -173,11 +173,7 @@ function Layout( { styles } ) {
 			return <InserterSidebar />;
 		}
 		if ( mode === 'visual' && isListViewOpened ) {
-			return (
-				<AsyncModeProvider value="true">
-					<ListViewSidebar />
-				</AsyncModeProvider>
-			);
+			return <ListViewSidebar />;
 		}
 		return null;
 	};

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
-import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	SlotFillProvider,
 	Popover,
@@ -169,11 +169,7 @@ function Editor( { initialSettings, onError } ) {
 			return <InserterSidebar />;
 		}
 		if ( isListViewOpen ) {
-			return (
-				<AsyncModeProvider value="true">
-					<ListViewSidebar />
-				</AsyncModeProvider>
-			);
+			return <ListViewSidebar />;
 		}
 		return null;
 	};