From b8b76b7193298d30c6feda5eb49c77a32ea4419f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 5 Dec 2024 14:51:05 +0000 Subject: [PATCH] Hide separators for currently dragged section --- .../block-list/zoom-out-separator.js | 26 +++++++++++++++++++ 1 file changed, 26 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 f2e6d050141fb5..187bcd92d95e2e 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,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 ( { isVisible && (