Block editor: use proper insertion point for indicator

WordPress · Mar 26, 2021 · 8e2fa3b · 8e2fa3b
1 parent 53d1ebb
commit 8e2fa3b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 53 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -93,7 +93,6 @@ function Items( {
 	function selector( select ) {
 		const {
 			getBlockOrder,
-			getBlockListSettings,
 			getSelectedBlockClientId,
 			getMultiSelectedBlockClientIds,
 			hasMultiSelection,
@@ -102,7 +101,6 @@ function Items( {
 			blockClientIds: getBlockOrder( rootClientId ),
 			selectedBlockClientId: getSelectedBlockClientId(),
 			multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
-			orientation: getBlockListSettings( rootClientId )?.orientation,
 			hasMultiSelection: hasMultiSelection(),
 		};
 	}
@@ -111,26 +109,21 @@ function Items( {
 		blockClientIds,
 		selectedBlockClientId,
 		multiSelectedBlockClientIds,
-		orientation,
 		hasMultiSelection,
 	} = useSelect( selector, [ rootClientId ] );
 
-	const dropTargetIndex = useBlockDropZone( {
+	useBlockDropZone( {
 		element: wrapperRef,
 		rootClientId,
 	} );
 
-	const isAppenderDropTarget = dropTargetIndex === blockClientIds.length;
-
 	return (
 		<LayoutProvider value={ layout }>
 			{ blockClientIds.map( ( clientId, index ) => {
 				const isBlockInSelection = hasMultiSelection
 					? multiSelectedBlockClientIds.includes( clientId )
 					: selectedBlockClientId === clientId;
 
-				const isDropTarget = dropTargetIndex === index;
-
 				return (
 					<AsyncModeProvider
 						key={ clientId }
@@ -143,12 +136,6 @@ function Items( {
 							// to avoid being impacted by the async mode
 							// otherwise there might be a small delay to trigger the animation.
 							index={ index }
-							className={ classnames( {
-								'is-drop-target': isDropTarget,
-								'is-dropping-horizontally':
-									isDropTarget &&
-									orientation === 'horizontal',
-							} ) }
 						/>
 					</AsyncModeProvider>
 				);
@@ -158,11 +145,6 @@ function Items( {
 				tagName={ __experimentalAppenderTagName }
 				rootClientId={ rootClientId }
 				renderAppender={ renderAppender }
-				className={ classnames( {
-					'is-drop-target': isAppenderDropTarget,
-					'is-dropping-horizontally':
-						isAppenderDropTarget && orientation === 'horizontal',
-				} ) }
 			/>
 		</LayoutProvider>
 	);

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -8,33 +8,6 @@
  * Notices & Block Selected/Hover Styles.
  */
 
-.block-editor-block-list__layout .block-editor-block-list__block,
-.block-editor-block-list__layout .block-list-appender {
-	position: relative;
-
-	// Between-blocks dropzone line indicator.
-	&.is-drop-target::before {
-		content: "";
-		position: absolute;
-		z-index: 0;
-		pointer-events: none;
-		transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
-		top: -$default-block-margin / 2;
-		right: 0;
-		left: 0;
-		border-top: 4px solid var(--wp-admin-theme-color);
-	}
-
-	&.is-drop-target.is-dropping-horizontally::before {
-		top: 0;
-		bottom: 0;
-		// Drop target border-width plus a couple of pixels so that the border looks between blocks.
-		left: -6px;
-		border-top: none;
-		border-left: 4px solid var(--wp-admin-theme-color);
-	}
-}
-
 /**
  * Cross-Block Selection
  */

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
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __unstableUseDropZone as useDropZone } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
 /**
@@ -86,8 +86,6 @@ export function getNearestBlockIndex( elements, position, orientation ) {
  * A React hook that can be used to make a block list handle drag and drop.
  *
  * @param {WPBlockDropZoneConfig} dropZoneConfig configuration data for the drop zone.
- *
- * @return {number|undefined} The block index that's closest to the drag position.
  */
 export default function useBlockDropZone( {
 	element,
@@ -113,12 +111,16 @@ export default function useBlockDropZone( {
 		[ targetRootClientId ]
 	);
 
+	const { showInsertionPoint, hideInsertionPoint } = useDispatch(
+		'core/block-editor'
+	);
+
 	const dropEventHandlers = useOnBlockDrop(
 		targetRootClientId,
 		targetBlockIndex
 	);
 
-	const { position } = useDropZone( {
+	const { position, isDraggingOverDocument } = useDropZone( {
 		element,
 		isDisabled: isLockedAll,
 		withPosition: true,
@@ -136,10 +138,16 @@ export default function useBlockDropZone( {
 			);
 
 			setTargetBlockIndex( targetIndex === undefined ? 0 : targetIndex );
+		} else {
+			setTargetBlockIndex( null );
 		}
 	}, [ position ] );
 
-	if ( position ) {
-		return targetBlockIndex;
-	}
+	useEffect( () => {
+		if ( ! isDraggingOverDocument ) {
+			hideInsertionPoint();
+		} else if ( targetBlockIndex !== null ) {
+			showInsertionPoint( targetRootClientId, targetBlockIndex );
+		}
+	}, [ targetBlockIndex, isDraggingOverDocument ] );
 }