Try storing blocks data in a ref

WordPress · May 1, 2023 · ca85f26 · ca85f26
1 parent e46718c
commit ca85f26
Showing 1 changed file with 49 additions and 29 deletions.
diff --git a/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js b/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback, useRef } from '@wordpress/element';
 import {
 	useThrottle,
 	__experimentalUseDropZone as useDropZone,
@@ -186,6 +186,7 @@ export function getListViewDropTarget( blocksData, position ) {
  * @return {WPListViewDropZoneTarget} The drop target.
  */
 export default function useListViewDropZone() {
+	const blocksData = useRef( null );
 	const {
 		getBlockRootClientId,
 		getBlockIndex,
@@ -199,51 +200,69 @@ export default function useListViewDropZone() {
 
 	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
 
-	const draggedBlockClientIds = getDraggedBlockClientIds();
 	const throttled = useThrottle(
 		useCallback(
 			( event, currentTarget ) => {
 				const position = { x: event.clientX, y: event.clientY };
+				const draggedBlockClientIds = getDraggedBlockClientIds();
 				const isBlockDrag = !! draggedBlockClientIds?.length;
 
 				const blockElements = Array.from(
 					currentTarget.querySelectorAll( '[data-block]' )
 				);
 
-				const blocksData = blockElements.map( ( blockElement ) => {
-					const clientId = blockElement.dataset.block;
-					const isExpanded = blockElement.dataset.expanded === 'true';
-					const rootClientId = getBlockRootClientId( clientId );
+				if ( ! blocksData.current ) {
+					blocksData.current = blockElements.map(
+						( blockElement ) => {
+							const clientId = blockElement.dataset.block;
+							const isExpanded =
+								blockElement.dataset.expanded === 'true';
+							const rootClientId =
+								getBlockRootClientId( clientId );
 
-					return {
-						clientId,
-						isExpanded,
-						rootClientId,
-						blockIndex: getBlockIndex( clientId ),
-						element: blockElement,
-						isDraggedBlock: isBlockDrag
-							? draggedBlockClientIds.includes( clientId )
-							: false,
-						innerBlockCount: getBlockCount( clientId ),
-						canInsertDraggedBlocksAsSibling: isBlockDrag
-							? canInsertBlocks(
-									draggedBlockClientIds,
-									rootClientId
-							  )
-							: true,
-						canInsertDraggedBlocksAsChild: isBlockDrag
-							? canInsertBlocks( draggedBlockClientIds, clientId )
-							: true,
-					};
-				} );
+							return {
+								clientId,
+								isExpanded,
+								rootClientId,
+								blockIndex: getBlockIndex( clientId ),
+								element: blockElement,
+								isDraggedBlock: isBlockDrag
+									? draggedBlockClientIds.includes( clientId )
+									: false,
+								innerBlockCount: getBlockCount( clientId ),
+								canInsertDraggedBlocksAsSibling: isBlockDrag
+									? canInsertBlocks(
+											draggedBlockClientIds,
+											rootClientId
+									  )
+									: true,
+								canInsertDraggedBlocksAsChild: isBlockDrag
+									? canInsertBlocks(
+											draggedBlockClientIds,
+											clientId
+									  )
+									: true,
+							};
+						}
+					);
+				}
 
-				const newTarget = getListViewDropTarget( blocksData, position );
+				const newTarget = getListViewDropTarget(
+					blocksData.current,
+					position
+				);
 
 				if ( newTarget ) {
 					setTarget( newTarget );
 				}
 			},
-			[ draggedBlockClientIds ]
+			[
+				canInsertBlocks,
+				getBlockCount,
+				getBlockIndex,
+				getBlockRootClientId,
+				getDraggedBlockClientIds,
+			]
 		),
 		200
 	);
@@ -259,6 +278,7 @@ export default function useListViewDropZone() {
 		onDragEnd() {
 			throttled.cancel();
 			setTarget( null );
+			blocksData.current = null;
 		},
 	} );