From 7218df6de0163b0498442d9efcdf1f070b785208 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 7 Aug 2020 13:50:49 +0800 Subject: [PATCH] Fix issue where incorrect drop position selected when blocks overlap --- .../use-block-navigation-drop-zone.js | 42 +++++++++++++------ 1 file changed, 30 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/use-block-navigation-drop-zone.js b/packages/block-editor/src/components/block-navigation/use-block-navigation-drop-zone.js index a8bb56f3c75fe8..4c48a891303857 100644 --- a/packages/block-editor/src/components/block-navigation/use-block-navigation-drop-zone.js +++ b/packages/block-editor/src/components/block-navigation/use-block-navigation-drop-zone.js @@ -18,6 +18,7 @@ function getDropTargetBlocksData( dragEventType, getRootClientId, getBlockIndex, + getBlockCount, getDraggedBlockClientIds, canInsertBlocks ) { @@ -45,6 +46,7 @@ function getDropTargetBlocksData( blockIndex: getBlockIndex( clientId, rootClientId ), element: blockElement, orientation: 'vertical', + innerBlockCount: getBlockCount( clientId ), canInsertDraggedBlocksAsSibling: isBlockDrag ? canInsertBlocks( draggedBlockClientIds, rootClientId ) : true, @@ -64,7 +66,10 @@ function isPointContainedByRect( point, rect ) { ); } -function isDroppingToInnerBlocks( point, rect ) { +function isDroppingToInnerBlocks( point, rect, innerBlockCount ) { + if ( innerBlockCount > 0 ) { + return true; + } const blockCenterX = rect.left + rect.width / 2; return point.x > blockCenterX; } @@ -87,21 +92,26 @@ function getBlockNavigationDropTarget( blocksData, position ) { ALLOWED_DROP_EDGES ); - if ( candidateDistance === undefined || distance < candidateDistance ) { + const isCursorWithinBlock = isPointContainedByRect( position, rect ); + if ( + candidateDistance === undefined || + distance < candidateDistance || + isCursorWithinBlock + ) { candidateDistance = distance; candidateBlockData = blockData; candidateEdge = edge; candidateRect = rect; - } - // If the mouse position is within the block, break early - // as the user would intend to drop either before or after - // this block. - // - // This solves an issue where some rows in the block navigation - // tree overlap slightly due to sub-pixel rendering. - if ( isPointContainedByRect( position, rect ) ) { - break; + // If the mouse position is within the block, break early + // as the user would intend to drop either before or after + // this block. + // + // This solves an issue where some rows in the block navigation + // tree overlap slightly due to sub-pixel rendering. + if ( isCursorWithinBlock ) { + break; + } } } @@ -116,7 +126,11 @@ function getBlockNavigationDropTarget( blocksData, position ) { if ( isDraggingBelow && candidateBlockData.canInsertDraggedBlocksAsChild && - isDroppingToInnerBlocks( position, candidateRect ) + isDroppingToInnerBlocks( + position, + candidateRect, + candidateBlockData.innerBlockCount + ) ) { return { rootClientId: candidateBlockData.clientId, @@ -136,18 +150,21 @@ export default function useBlockNavigationDropZone( ref ) { canInsertBlocks, getBlockRootClientId, getBlockIndex, + getBlockCount, getDraggedBlockClientIds, } = useSelect( ( select ) => { const { canInsertBlocks: _canInsertBlocks, getBlockRootClientId: _getBlockRootClientId, getBlockIndex: _getBlockIndex, + getBlockCount: _getBlockCount, getDraggedBlockClientIds: _getDraggedBlockClientIds, } = select( 'core/block-editor' ); return { canInsertBlocks: _canInsertBlocks, getBlockRootClientId: _getBlockRootClientId, getBlockIndex: _getBlockIndex, + getBlockCount: _getBlockCount, getDraggedBlockClientIds: _getDraggedBlockClientIds, }; }, [] ); @@ -181,6 +198,7 @@ export default function useBlockNavigationDropZone( ref ) { dragEventType, getBlockRootClientId, getBlockIndex, + getBlockCount, getDraggedBlockClientIds, canInsertBlocks );