Hide separators for currently dragged section

packages/block-editor/src/components/block-list/zoom-out-separator.js

@@ -33,13 +33,15 @@ export function ZoomOutSeparator( {
 		insertionPoint,
 		blockInsertionPointVisible,
 		blockInsertionPoint,
+		blocksBeingDragged,
 	} = useSelect( ( select ) => {
 		const {
 			getInsertionPoint,
 			getBlockOrder,
 			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,28 @@ 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;
+
+	if (
+		isCurrentBlockBeingDragged ||
+		isCurrentBlockPreviousSiblingOfBlockBeingDragged
+	) {
+		isVisible = false;
+	}
+
 	return (
 		<AnimatePresence>
 			{ isVisible && (