From 6ce7ec669f370ac0a1f8c8171c706c543d504208 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 11 Dec 2024 15:36:55 +0000
Subject: [PATCH] Hide separators for currently dragged section in Zoom Out
 (#67638)

* Hide separators for currently dragged section

* Add comment by way of explanation

Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
---
 .../block-list/zoom-out-separator.js          | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js
index f2e6d050141fb..86191c1e4ce32 100644
--- a/packages/block-editor/src/components/block-list/zoom-out-separator.js
+++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js
@@ -33,6 +33,7 @@ export function ZoomOutSeparator( {
 		insertionPoint,
 		blockInsertionPointVisible,
 		blockInsertionPoint,
+		blocksBeingDragged,
 	} = useSelect( ( select ) => {
 		const {
 			getInsertionPoint,
@@ -40,6 +41,7 @@ export function ZoomOutSeparator( {
 			getSectionRootClientId,
 			isBlockInsertionPointVisible,
 			getBlockInsertionPoint,
+			getDraggedBlockClientIds,
 		} = unlock( select( blockEditorStore ) );
 
 		const root = getSectionRootClientId();
@@ -51,6 +53,7 @@ export function ZoomOutSeparator( {
 			insertionPoint: getInsertionPoint(),
 			blockInsertionPoint: getBlockInsertionPoint(),
 			blockInsertionPointVisible: isBlockInsertionPointVisible(),
+			blocksBeingDragged: getDraggedBlockClientIds(),
 		};
 	}, [] );
 
@@ -78,6 +81,7 @@ export function ZoomOutSeparator( {
 		insertionPoint &&
 		insertionPoint.hasOwnProperty( 'index' ) &&
 		clientId === sectionClientIds[ insertionPoint.index - 1 ];
+
 	// We want to show the zoom out separator in either of these conditions:
 	// 1. If the inserter has an insertion index set
 	// 2. We are dragging a pattern over an insertion point
@@ -97,6 +101,32 @@ export function ZoomOutSeparator( {
 					sectionClientIds[ blockInsertionPoint.index - 1 ] );
 	}
 
+	const blockBeingDraggedClientId = blocksBeingDragged[ 0 ];
+
+	const isCurrentBlockBeingDragged = blocksBeingDragged.includes( clientId );
+
+	const blockBeingDraggedIndex = sectionClientIds.indexOf(
+		blockBeingDraggedClientId
+	);
+	const blockBeingDraggedPreviousSiblingClientId =
+		blockBeingDraggedIndex > 0
+			? sectionClientIds[ blockBeingDraggedIndex - 1 ]
+			: null;
+
+	const isCurrentBlockPreviousSiblingOfBlockBeingDragged =
+		blockBeingDraggedPreviousSiblingClientId === clientId;
+
+	// The separators are visually top/bottom of the block, but in actual fact
+	// the "top" separator is the "bottom" separator of the previous block.
+	// Therefore, this logic hides the separator if the current block is being dragged
+	// or if the current block is the previous sibling of the block being dragged.
+	if (
+		isCurrentBlockBeingDragged ||
+		isCurrentBlockPreviousSiblingOfBlockBeingDragged
+	) {
+		isVisible = false;
+	}
+
 	return (
 		<AnimatePresence>
 			{ isVisible && (