wip avoid returning a new array each time for clientIdsTree

WordPress · Aug 19, 2021 · 685c224 · 685c224
1 parent bdf4a7d
commit 685c224
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 46 deletions.
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -54,15 +54,35 @@ export default function ListViewBlock( {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const { clientId } = block;
-	const { blockParents } = useSelect(
-		( select ) => {
-			const { getBlockParents } = select( blockEditorStore );
+	const {
+		__experimentalFeatures: withExperimentalFeatures,
+		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
+		isTreeGridMounted,
+		animate,
+		draggingId,
+		setDraggingId,
+		collapse,
+		expand,
+	} = useListViewContext();
 
+	const { blockParents, dropContainer, dropSibling } = useSelect(
+		( select ) => {
+			const { getBlockParents, canInsertBlocks } = select(
+				blockEditorStore
+			);
 			return {
 				blockParents: getBlockParents( clientId ),
+				dropContainer:
+					draggingId &&
+					draggingId !== clientId &&
+					canInsertBlocks( [ draggingId ], clientId ),
+				dropSibling:
+					draggingId &&
+					draggingId !== clientId &&
+					canInsertBlocks( [ draggingId ], parentId ),
 			};
 		},
-		[ clientId ]
+		[ clientId, draggingId ]
 	);
 
 	const {
@@ -76,28 +96,20 @@ export default function ListViewBlock( {
 		'block-editor-list-view-block__mover-cell',
 		{ 'is-visible': isHovered }
 	);
-	const {
-		__experimentalFeatures: withExperimentalFeatures,
-		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
-		isTreeGridMounted,
-		animate,
-		draggingId,
-		setDraggingId,
-		collapse,
-		expand,
-	} = useListViewContext();
 
-	//TODO: handle block delete
 	useEffect( () => {
 		setPosition( listPosition, {
 			...{
 				clientId,
-				dropContainer: block?.dropContainer ?? false,
-				dropSibling: block?.dropSibling ?? false,
+				dropContainer,
+				dropSibling,
 				parentId,
 			},
 		} );
-	}, [ listPosition, draggingId ] );
+		return () => {
+			setPosition( listPosition, undefined );
+		};
+	}, [ listPosition, draggingId, dropContainer, dropSibling ] );
 
 	const listViewBlockSettingsClassName = classnames(
 		'block-editor-list-view-block__menu-cell',

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -188,8 +188,7 @@ export default function ListView( {
 	const { clientIdsTree, selectedClientIds } = useListViewClientIds(
 		blocks,
 		showOnlyCurrentHierarchy,
-		__experimentalPersistentListViewFeatures,
-		draggingId
+		__experimentalPersistentListViewFeatures
 	);
 	const [ tree, setTree ] = useState( clientIdsTree );
 	const { selectBlock, moveBlocksToPosition } = useDispatch(

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
@@ -32,8 +32,7 @@ const useListViewSelectedClientIds = (
 const useListViewClientIdsTree = (
 	blocks,
 	selectedClientIds,
-	showOnlyCurrentHierarchy,
-	draggingId
+	showOnlyCurrentHierarchy
 ) =>
 	useSelect(
 		( select ) => {
@@ -50,14 +49,14 @@ const useListViewClientIdsTree = (
 			const isSingleBlockSelected =
 				selectedClientIds && ! Array.isArray( selectedClientIds );
 			if ( ! showOnlyCurrentHierarchy || ! isSingleBlockSelected ) {
-				return __unstableGetClientIdsTree( '', draggingId );
+				return __unstableGetClientIdsTree();
 			}
 
 			const rootBlock = __unstableGetClientIdWithClientIdsTree(
 				getBlockHierarchyRootClientId( selectedClientIds )
 			);
 			if ( ! rootBlock ) {
-				return __unstableGetClientIdsTree( '', draggingId );
+				return __unstableGetClientIdsTree();
 			}
 
 			const hasHierarchy =
@@ -67,25 +66,23 @@ const useListViewClientIdsTree = (
 				return [ rootBlock ];
 			}
 
-			return __unstableGetClientIdsTree( '', draggingId );
+			return __unstableGetClientIdsTree();
 		},
-		[ blocks, selectedClientIds, showOnlyCurrentHierarchy, draggingId ]
+		[ blocks, selectedClientIds, showOnlyCurrentHierarchy ]
 	);
 
 export default function useListViewClientIds(
 	blocks,
 	showOnlyCurrentHierarchy,
-	__experimentalPersistentListViewFeatures,
-	draggingId
+	__experimentalPersistentListViewFeatures
 ) {
 	const selectedClientIds = useListViewSelectedClientIds(
 		__experimentalPersistentListViewFeatures
 	);
 	const clientIdsTree = useListViewClientIdsTree(
 		blocks,
 		selectedClientIds,
-		showOnlyCurrentHierarchy,
-		draggingId
+		showOnlyCurrentHierarchy
 	);
 	return { clientIdsTree, selectedClientIds };
 }
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -266,15 +266,11 @@ export const __unstableGetBlockTree = createSelector(
  * @return {Object} Client IDs of the post blocks.
  */
 export const __unstableGetClientIdWithClientIdsTree = createSelector(
-	( state, clientId, draggingId = false, dropSibling = false ) => ( {
+	( state, clientId ) => ( {
 		clientId,
-		...( draggingId && {
-			dropContainer: canInsertBlocks( state, [ draggingId ], clientId ),
-			dropSibling,
-		} ),
-		innerBlocks: __unstableGetClientIdsTree( state, clientId, draggingId ),
+		innerBlocks: __unstableGetClientIdsTree( state, clientId ),
 	} ),
-	( state, draggingId ) => [ state.blocks.order, draggingId ]
+	( state ) => [ state.blocks.order ]
 );
 
 /**
@@ -288,17 +284,11 @@ export const __unstableGetClientIdWithClientIdsTree = createSelector(
  * @return {Object[]} Client IDs of the post blocks.
  */
 export const __unstableGetClientIdsTree = createSelector(
-	( state, rootClientId = '', draggingId = false ) =>
+	( state, rootClientId = '' ) =>
 		map( getBlockOrder( state, rootClientId ), ( clientId ) =>
-			__unstableGetClientIdWithClientIdsTree(
-				state,
-				clientId,
-				draggingId,
-				draggingId &&
-					canInsertBlocks( state, [ draggingId ], rootClientId )
-			)
+			__unstableGetClientIdWithClientIdsTree( state, clientId )
 		),
-	( state, draggingId ) => [ state.blocks.order, draggingId ]
+	( state ) => [ state.blocks.order ]
 );
 
 /**