Revert store changes and instead use value returned from useBlockDrop…

…Zone hook
WordPress · Jun 10, 2020 · 64080a6 · 64080a6
1 parent 507bf4b
commit 64080a6
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 68 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -37,7 +37,6 @@ function BlockList(
 	function selector( select ) {
 		const {
 			getBlockOrder,
-			getBlockDropTarget,
 			getBlockListSettings,
 			isMultiSelecting,
 			getSelectedBlockClientId,
@@ -49,7 +48,6 @@ function BlockList(
 
 		return {
 			blockClientIds: getBlockOrder( rootClientId ),
-			blockDropTarget: getBlockDropTarget(),
 			isMultiSelecting: isMultiSelecting(),
 			selectedBlockClientId: getSelectedBlockClientId(),
 			multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
@@ -64,7 +62,6 @@ function BlockList(
 
 	const {
 		blockClientIds,
-		blockDropTarget,
 		isMultiSelecting,
 		selectedBlockClientId,
 		multiSelectedBlockClientIds,
@@ -74,14 +71,12 @@ function BlockList(
 	} = useSelect( selector, [ rootClientId ] );
 
 	const Container = rootClientId ? __experimentalTagName : RootContainer;
-	useBlockDropZone( {
+	const dropTargetIndex = useBlockDropZone( {
 		element: ref,
 		rootClientId,
 	} );
 
-	const isAppenderDropTarget =
-		blockDropTarget.rootClientId === rootClientId &&
-		blockDropTarget.blockIndex === blockClientIds.length;
+	const isAppenderDropTarget = dropTargetIndex === blockClientIds.length;
 
 	return (
 		<Container
@@ -98,9 +93,7 @@ function BlockList(
 					? multiSelectedBlockClientIds.includes( clientId )
 					: selectedBlockClientId === clientId;
 
-				const isDropTarget =
-					blockDropTarget.rootClientId === rootClientId &&
-					blockDropTarget.blockIndex === index;
+				const isDropTarget = dropTargetIndex === index;
 
 				return (
 					<AsyncModeProvider

diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js
@@ -8,7 +8,7 @@ import {
 	findTransform,
 } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect, useCallback } from '@wordpress/element';
+import { useEffect, useCallback, useState } from '@wordpress/element';
 
 function getNearestBlockIndex( elements, position, orientation ) {
 	const { x, y } = position;
@@ -115,18 +115,18 @@ export default function useBlockDropZone( {
 	element,
 	rootClientId: targetRootClientId,
 } ) {
+	const [ targetBlockIndex, setTargetBlockIndex ] = useState( null );
+
 	function selector( select ) {
 		const {
 			getBlockIndex,
-			getBlockDropTarget,
 			getBlockListSettings,
 			getClientIdsOfDescendants,
 			getSettings,
 			getTemplateLock,
 		} = select( 'core/block-editor' );
 		return {
 			getBlockIndex,
-			targetBlockIndex: getBlockDropTarget().blockIndex,
 			moverDirection: getBlockListSettings( targetRootClientId )
 				?.__experimentalMoverDirection,
 			getClientIdsOfDescendants,
@@ -137,7 +137,6 @@ export default function useBlockDropZone( {
 
 	const {
 		getBlockIndex,
-		targetBlockIndex,
 		getClientIdsOfDescendants,
 		hasUploadPermissions,
 		isLockedAll,
@@ -147,7 +146,6 @@ export default function useBlockDropZone( {
 		insertBlocks,
 		updateBlockAttributes,
 		moveBlockToPosition,
-		setBlockDropTarget,
 	} = useDispatch( 'core/block-editor' );
 
 	const onFilesDrop = useCallback(
@@ -274,7 +272,11 @@ export default function useBlockDropZone( {
 				return;
 			}
 
-			setBlockDropTarget( targetRootClientId, targetIndex );
+			setTargetBlockIndex( targetIndex );
 		}
 	}, [ position ] );
+
+	if ( position ) {
+		return targetBlockIndex;
+	}
 }
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
@@ -707,25 +707,6 @@ export function stopDraggingBlocks() {
 	};
 }
 
-/**
- * Returns an action object used in signalling that the user is dragging a
- * block over a particular position in a block list.
- *
- * @param {undefined|string} rootClientId The clientId representing the block
- *                                        list the block is being hovered over.
- * @param {number}           blockIndex   The index representing the position
- *                                        the block is being hovered over.
- *
- * @return {Object} Action object.
- */
-export function setBlockDropTarget( rootClientId, blockIndex ) {
-	return {
-		type: 'SET_BLOCK_DROP_TARGET',
-		rootClientId,
-		blockIndex,
-	};
-}
-
 /**
  * Returns an action object used in signalling that the caret has entered formatted text.
  *

diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
@@ -1146,26 +1146,6 @@ export function isDraggingBlocks( state = false, action ) {
 	return state;
 }
 
-/**
- *
- * @param {*} state
- * @param {*} action
- */
-export function blockDropTarget( state = {}, action ) {
-	switch ( action.type ) {
-		case 'SET_BLOCK_DROP_TARGET':
-			const { rootClientId, blockIndex } = action;
-			return {
-				rootClientId,
-				blockIndex,
-			};
-		case 'STOP_DRAGGING_BLOCKS':
-			return {};
-	}
-
-	return state;
-}
-
 /**
  * Reducer returning whether the caret is within formatted text.
  *
@@ -1645,7 +1625,6 @@ export default combineReducers( {
 	blocks,
 	isTyping,
 	isDraggingBlocks,
-	blockDropTarget,
 	isCaretWithinFormattedText,
 	selectionStart,
 	selectionEnd,

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -1011,18 +1011,6 @@ export function isDraggingBlocks( state ) {
 	return state.isDraggingBlocks;
 }
 
-/**
- * Returns an object with the root client id and index representing the
- * position a user is dragging a block over.
- *
- * @param {Object} state Global application state.
- *
- * @return {boolean} Whether user is dragging blocks.
- */
-export function getBlockDropTarget( state ) {
-	return state.blockDropTarget;
-}
-
 /**
  * Returns true if the caret is within formatted text, or false otherwise.
  *