diff --git a/packages/block-editor/src/components/list-view/test/use-list-view-drop-zone.js b/packages/block-editor/src/components/list-view/test/use-list-view-drop-zone.js index 1e14417291a7a1..c77feae4d291f1 100644 --- a/packages/block-editor/src/components/list-view/test/use-list-view-drop-zone.js +++ b/packages/block-editor/src/components/list-view/test/use-list-view-drop-zone.js @@ -261,4 +261,21 @@ describe( 'getListViewDropTarget', () => { expect( target ).toBeUndefined(); } ); + + it( 'should move below, and not nest when dragging lower than the bottom-most block', () => { + const singleBlock = [ { ...blocksData[ 0 ], innerBlockCount: 0 } ]; + + // This position is to the right of the block, but below the bottom of the block. + // This should result in the block being moved below the bottom-most block, and + // not being treated as a nesting gesture. + const position = { x: 160, y: 250 }; + const target = getListViewDropTarget( singleBlock, position ); + + expect( target ).toEqual( { + blockIndex: 1, + clientId: 'block-1', + dropPosition: 'bottom', + rootClientId: '', + } ); + } ); } ); diff --git a/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js b/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js index 5a8bacfeff8184..f129607fc68414 100644 --- a/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js +++ b/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js @@ -152,7 +152,8 @@ function getNextNonDraggedBlock( blocksData, index ) { * inner block. * * Determined based on nesting level indentation of the current block, plus - * the indentation of the next level of nesting. + * the indentation of the next level of nesting. The vertical position of the + * cursor must also be within the block. * * @param {WPPoint} point The point representing the cursor position when dragging. * @param {DOMRect} rect The rectangle. @@ -161,7 +162,10 @@ function getNextNonDraggedBlock( blocksData, index ) { function isNestingGesture( point, rect, nestingLevel = 1 ) { const blockIndentPosition = rect.left + nestingLevel * NESTING_LEVEL_INDENTATION; - return point.x > blockIndentPosition + NESTING_LEVEL_INDENTATION; + return ( + point.x > blockIndentPosition + NESTING_LEVEL_INDENTATION && + point.y < rect.bottom + ); } // Block navigation is always a vertical list, so only allow dropping