Drop zone: rewrite with hooks (useDropZone)

packages/block-editor/src/components/block-drop-zone/index.js

@@ -8,6 +8,7 @@ import {
 	findTransform,
 } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
 
 const parseDropEvent = ( event ) => {
 	let result = {
@@ -30,7 +31,10 @@ const parseDropEvent = ( event ) => {
 	return result;
 };
 
-export default function useBlockDropZone( { element, clientId, rootClientId } ) {
+export default function useBlockDropZone( { element, rootClientId } ) {
+	// const [ inserterElement, setInserterElement ] = useState( null );
+	const [ clientId, setInserterClientId ] = useState( null );
+
 	function selector( select ) {
 		const {
 			getBlockIndex,
@@ -40,6 +44,7 @@ export default function useBlockDropZone( { element, clientId, rootClientId } )
 		} = select( 'core/block-editor' );
 		return {
 			getBlockIndex,
+			blockIndex: getBlockIndex( clientId, rootClientId ),
 			getClientIdsOfDescendants,
 			hasUploadPermissions: !! getSettings().mediaUpload,
 			isLockedAll: getTemplateLock( rootClientId ) === 'all',
@@ -48,24 +53,18 @@ export default function useBlockDropZone( { element, clientId, rootClientId } )
 
 	const {
 		getBlockIndex,
+		blockIndex,
 		getClientIdsOfDescendants,
 		hasUploadPermissions,
 		isLockedAll,
-	} = useSelect( selector, [ rootClientId ] );
+	} = useSelect( selector, [ rootClientId, clientId ] );
 	const {
 		insertBlocks,
 		updateBlockAttributes,
 		moveBlockToPosition,
 	} = useDispatch( 'core/block-editor' );
 
-	function getInsertIndex( position ) {
-		if ( clientId !== undefined ) {
-			const index = getBlockIndex( clientId, rootClientId );
-			return ( position && position.y === 'top' ) ? index : index + 1;
-		}
-	}
-
-	function onFilesDrop( files, position ) {
+	function onFilesDrop( files ) {
 		if ( ! hasUploadPermissions ) {
 			return;
 		}
@@ -76,21 +75,20 @@ export default function useBlockDropZone( { element, clientId, rootClientId } )
 		);
 
 		if ( transformation ) {
-			const insertIndex = getInsertIndex( position );
 			const blocks = transformation.transform( files, updateBlockAttributes );
-			insertBlocks( blocks, insertIndex, rootClientId );
+			insertBlocks( blocks, blockIndex, rootClientId );
 		}
 	}
 
-	function onHTMLDrop( HTML, position ) {
+	function onHTMLDrop( HTML ) {
 		const blocks = pasteHandler( { HTML, mode: 'BLOCKS' } );
 
 		if ( blocks.length ) {
-			insertBlocks( blocks, getInsertIndex( position ), rootClientId );
+			insertBlocks( blocks, blockIndex, rootClientId );
 		}
 	}
 
-	function onDrop( event, position ) {
+	function onDrop( event ) {
 		const { srcRootClientId, srcClientId, srcIndex, type } = parseDropEvent( event );
 
 		const isBlockDropType = ( dropType ) => dropType === 'block';
@@ -109,18 +107,48 @@ export default function useBlockDropZone( { element, clientId, rootClientId } )
 		}
 
 		const dstIndex = clientId ? getBlockIndex( clientId, rootClientId ) : undefined;
-		const positionIndex = getInsertIndex( position );
+		const positionIndex = blockIndex;
 		// If the block is kept at the same level and moved downwards,
 		// subtract to account for blocks shifting upward to occupy its old position.
 		const insertIndex = dstIndex && srcIndex < dstIndex && isSameLevel( srcRootClientId, rootClientId ) ? positionIndex - 1 : positionIndex;
 		moveBlockToPosition( srcClientId, srcRootClientId, rootClientId, insertIndex );
 	}
 
-	return useDropZone( {
+	const { position } = useDropZone( {
 		element,
 		onFilesDrop,
 		onHTMLDrop,
 		onDrop,
 		isDisabled: isLockedAll,
+		withExactPosition: true,
+	} );
+
+	useEffect( () => {
+		if ( position ) {
+			const { y } = position;
+			const rect = element.current.getBoundingClientRect();
+
+			const offset = y - rect.top;
+			const target = Array.from( element.current.children ).find( ( blockEl ) => {
+				return blockEl.offsetTop + ( blockEl.offsetHeight / 2 ) > offset;
+			} );
+
+			if ( ! target ) {
+				return;
+			}
+
+			const targetClientId = target.id.slice( 'block-'.length );
+
+			if ( ! targetClientId ) {
+				return;
+			}
+
+			// setInserterElement( target );
+			setInserterClientId( targetClientId );
+		}
 	} );
+
+	if ( position ) {
+		return clientId;
+	}
 }

packages/block-editor/src/components/block-list-appender/index.js

@@ -2,21 +2,18 @@
  * External dependencies
  */
 import { last } from 'lodash';
-import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { withSelect } from '@wordpress/data';
 import { getDefaultBlockName } from '@wordpress/blocks';
-import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import DefaultBlockAppender from '../default-block-appender';
 import ButtonBlockAppender from '../button-block-appender';
-import useBlockDropZone from '../block-drop-zone';
 
 function stopPropagation( event ) {
 	event.stopPropagation();
@@ -29,12 +26,6 @@ function BlockListAppender( {
 	isLocked,
 	renderAppender: CustomAppender,
 } ) {
-	const ref = useRef();
-	const { isDraggingOverElement } = useBlockDropZone( {
-		element: ref,
-		rootClientId,
-	} );
-
 	if ( isLocked || CustomAppender === false ) {
 		return null;
 	}
@@ -77,10 +68,7 @@ function BlockListAppender( {
 			// Prevent the block from being selected when the appender is
 			// clicked.
 			onFocus={ stopPropagation }
-			ref={ ref }
-			className={ classnames( 'block-list-appender', {
-				'is-dragging-over': isDraggingOverElement,
-			} ) }
+			className="block-list-appender"
 		>
 			{ appender }
 		</div>

packages/block-editor/src/components/block-list/block.js

@@ -37,7 +37,6 @@ import { useShortcut } from '@wordpress/keyboard-shortcuts';
  * Internal dependencies
  */
 import BlockEdit from '../block-edit';
-import useBlockDropZone from '../block-drop-zone';
 import BlockInvalidWarning from './block-invalid-warning';
 import BlockCrashWarning from './block-crash-warning';
 import BlockCrashBoundary from './block-crash-boundary';
@@ -286,12 +285,6 @@ function BlockListBlock( {
 
 	const isDragging = isDraggingBlocks && ( isSelected || isPartOfMultiSelection );
 
-	const { position } = useBlockDropZone( {
-		element: wrapper,
-		clientId,
-		rootClientId,
-	} );
-
 	// The wp-block className is important for editor styles.
 	// Generate the wrapper class names handling the different states of the block.
 	const wrapperClassName = classnames(
@@ -309,8 +302,6 @@ function BlockListBlock( {
 			'is-focus-mode': isFocusMode,
 			'has-child-selected': isAncestorOfSelectedBlock,
 			'has-toolbar-captured': hasAncestorCapturingToolbars,
-			'is-dragging-close-to-top': position && position.y === 'top',
-			'is-dragging-close-to-bottom': position && position.y === 'bottom',
 		},
 		className
 	);

packages/block-editor/src/components/block-list/index.js

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,6 +16,7 @@ import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
 import __experimentalBlockListFooter from '../block-list-footer';
 import RootContainer from './root-container';
+import useBlockDropZone from '../block-drop-zone';
 
 /**
  * If the block count exceeds the threshold, we disable the reordering animation
@@ -79,8 +81,16 @@ function BlockList( {
 
 	const Container = rootClientId ? 'div' : RootContainer;
 
+	const ref = useRef();
+
+	const targetClientId = useBlockDropZone( {
+		element: ref,
+		rootClientId,
+	} );
+
 	return (
 		<Container
+			ref={ ref }
 			className={ classnames(
 				'block-editor-block-list__layout',
 				className
@@ -106,6 +116,7 @@ function BlockList( {
 							enableAnimation={ enableAnimation }
 							hasSelectedUI={ uiParts.hasSelectedUI }
 							hasMovers={ uiParts.hasMovers }
+							className={ clientId === targetClientId ? 'is-drop-target' : undefined }
 						/>
 					</AsyncModeProvider>
 				);

packages/block-editor/src/components/block-list/root-container.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef, createContext } from '@wordpress/element';
+import { createContext, forwardRef } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -44,8 +44,7 @@ function onDragStart( event ) {
 	}
 }
 
-export default function RootContainer( { children, className } ) {
-	const ref = useRef();
+function RootContainer( { children, className }, ref ) {
 	const {
 		selectedBlockClientId,
 		hasMultiSelection,
@@ -92,3 +91,5 @@ export default function RootContainer( { children, className } ) {
 		</InsertionPoint>
 	);
 }
+
+export default forwardRef( RootContainer );

packages/block-editor/src/components/block-list/style.scss

@@ -153,13 +153,9 @@
 		}
 	}
 
-	&.is-dragging-close-to-top::before {
+	&.is-drop-target::before {
 		border-top: 3px solid theme(primary);
 	}
-
-	&.is-dragging-close-to-bottom::before {
-		border-bottom: 3px solid theme(primary);
-	}
 }
 
 

packages/components/src/drop-zone/index.js

@@ -15,7 +15,14 @@ import { useContext, useEffect, useState, useRef } from '@wordpress/element';
 import Dashicon from '../dashicon';
 import { DropZoneConsumer, Context } from './provider';
 
-export function useDropZone( { element, onFilesDrop, onHTMLDrop, onDrop, isDisabled } ) {
+export function useDropZone( {
+	element,
+	onFilesDrop,
+	onHTMLDrop,
+	onDrop,
+	isDisabled,
+	withExactPosition,
+} ) {
 	const { addDropZone, removeDropZone } = useContext( Context );
 	const [ state, setState ] = useState( {
 		isDraggingOverDocument: false,
@@ -32,13 +39,14 @@ export function useDropZone( { element, onFilesDrop, onHTMLDrop, onDrop, isDisab
 				onFilesDrop,
 				onHTMLDrop,
 				setState,
+				withExactPosition,
 			};
 			addDropZone( dropZone );
 			return () => {
 				removeDropZone( dropZone );
 			};
 		}
-	}, [ isDisabled ] );
+	}, [ isDisabled, onDrop, onFilesDrop, onHTMLDrop, withExactPosition ] );
 
 	return state;
 }

packages/components/src/drop-zone/provider.js

@@ -143,10 +143,15 @@ class DropZoneProvider extends Component {
 		if ( hoveredDropZone ) {
 			const rect = hoveredDropZone.element.current.getBoundingClientRect();
 
-			position = {
-				x: detail.clientX - rect.left < rect.right - detail.clientX ? 'left' : 'right',
-				y: detail.clientY - rect.top < rect.bottom - detail.clientY ? 'top' : 'bottom',
-			};
+			let x = detail.clientX;
+			let y = detail.clientY;
+
+			if ( ! hoveredDropZone.withExactPosition ) {
+				x = detail.clientX - rect.left < rect.right - detail.clientX ? 'left' : 'right';
+				y = detail.clientY - rect.top < rect.bottom - detail.clientY ? 'top' : 'bottom';
+			}
+
+			position = { x, y };
 		}
 
 		// Optimisation: Only update the changed dropzones