From df4b75f137d5e8c2834f106030bc2a1f5d69ff69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Thu, 20 May 2021 20:16:25 +0300
Subject: [PATCH] Fix drop indicator around dragged block

---
 .../components/block-tools/insertion-point.js | 41 ++++++++++---------
 .../components/use-block-drop-zone/index.js   | 11 +----
 2 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js
index a7c8fd87026bae..b836beba7d3ae0 100644
--- a/packages/block-editor/src/components/block-tools/insertion-point.js
+++ b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -45,32 +45,35 @@ function InsertionPointPopover( {
 			getBlockOrder,
 			getBlockListSettings,
 			getBlockInsertionPoint,
+			isBlockBeingDragged,
+			getPreviousBlockClientId,
+			getNextBlockClientId,
 		} = select( blockEditorStore );
 		const insertionPoint = getBlockInsertionPoint();
 		const order = getBlockOrder( insertionPoint.rootClientId );
-		const targetClientId = order[ insertionPoint.index - 1 ];
-		const targetRootClientId = insertionPoint.rootClientId;
-		const blockOrder = getBlockOrder( targetRootClientId );
-		if ( ! blockOrder.length ) {
+
+		if ( ! order.length ) {
 			return {};
 		}
-		const previous = targetClientId
-			? targetClientId
-			: blockOrder[ blockOrder.length - 1 ];
-		const isLast = previous === blockOrder[ blockOrder.length - 1 ];
-		const next = isLast
-			? null
-			: blockOrder[ blockOrder.indexOf( previous ) + 1 ];
-		const blockOrientation =
-			getBlockListSettings( targetRootClientId )?.orientation ||
-			'vertical';
+
+		let _previousClientId = order[ insertionPoint.index - 1 ];
+		let _nextClientId = order[ insertionPoint.index ];
+
+		while ( isBlockBeingDragged( _previousClientId ) ) {
+			_previousClientId = getPreviousBlockClientId( _previousClientId );
+		}
+
+		while ( isBlockBeingDragged( _nextClientId ) ) {
+			_nextClientId = getNextBlockClientId( _nextClientId );
+		}
 
 		return {
-			previousClientId: previous,
-			nextClientId: next,
-			orientation: blockOrientation,
-			clientId: targetClientId,
-			rootClientId: targetRootClientId,
+			previousClientId: _previousClientId,
+			nextClientId: _nextClientId,
+			orientation:
+				getBlockListSettings( insertionPoint.rootClientId )
+					?.orientation || 'vertical',
+			rootClientId: insertionPoint.rootClientId,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
 		};
 	}, [] );
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
index 92ac5cf7fce7a0..019f80af6d59da 100644
--- a/packages/block-editor/src/components/use-block-drop-zone/index.js
+++ b/packages/block-editor/src/components/use-block-drop-zone/index.js
@@ -59,16 +59,7 @@ export function getNearestBlockIndex( elements, position, orientation ) {
 			// If the user is dropping to the trailing edge of the block
 			// add 1 to the index to represent dragging after.
 			const isTrailingEdge = edge === 'bottom' || edge === 'right';
-			let offset = isTrailingEdge ? 1 : 0;
-
-			// If the target is the dragged block itself and another 1 to
-			// index as the dragged block is set to `display: none` and
-			// should be skipped in the calculation.
-			const isTargetDraggedBlock =
-				isTrailingEdge &&
-				elements[ index + 1 ] &&
-				elements[ index + 1 ].classList.contains( 'is-dragging' );
-			offset += isTargetDraggedBlock ? 1 : 0;
+			const offset = isTrailingEdge ? 1 : 0;
 
 			// Update the currently known best candidate.
 			candidateDistance = distance;