List View: Allow dragging to all levels of the block hierarchy (#49742)

* List View: Allow drag to all levels of the block hierarchy

* Allow drag to root

* Partially fix block index for root blocks

* Attempt to fix blockIndex value and accounting for the dragged blocks

* Rearrange things slightly, tidy up comments

* Remove no longer needed comment

* Update tests

* Add data-level to fix issue in Firefox

* Add missing comment

* Add comments to link hard-coded indentation level and CSS

* Switch to getting aria-level by attribute instead of adding an extra data attribute

packages/block-editor/src/components/list-view/style.scss

@@ -376,6 +376,9 @@ $block-navigation-max-indent: 8;
 	}
 }
 
+// When updating the margin for each indentation level, the corresponding
+// indentation in `use-list-view-drop-zone.js` must be updated as well
+// to ensure the drop zone is aligned with the indentation.
 @for $i from 0 to $block-navigation-max-indent {
 	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander {
 		@if $i - 1 >= 0 {

packages/block-editor/src/components/list-view/test/use-list-view-drop-zone.js

@@ -1,7 +1,10 @@
 /**
  * Internal dependencies
  */
-import { getListViewDropTarget } from '../use-list-view-drop-zone';
+import {
+	getListViewDropTarget,
+	NESTING_LEVEL_INDENTATION,
+} from '../use-list-view-drop-zone';
 
 describe( 'getListViewDropTarget', () => {
 	const blocksData = [
@@ -15,17 +18,18 @@ describe( 'getListViewDropTarget', () => {
 					top: 50,
 					bottom: 100,
 					left: 10,
-					right: 100,
+					right: 300,
 					x: 10,
 					y: 50,
-					width: 90,
+					width: 290,
 					height: 50,
 				} ),
 			},
 			innerBlockCount: 1,
 			isDraggedBlock: false,
 			isExpanded: true,
 			rootClientId: '',
+			nestingLevel: 1,
 		},
 		{
 			blockIndex: 0,
@@ -37,39 +41,64 @@ describe( 'getListViewDropTarget', () => {
 					top: 100,
 					bottom: 150,
 					left: 10,
-					right: 100,
+					right: 300,
 					x: 10,
 					y: 100,
-					width: 90,
+					width: 290,
 					height: 50,
 				} ),
 			},
-			innerBlockCount: 0,
+			innerBlockCount: 1,
 			isDraggedBlock: false,
-			isExpanded: false,
+			isExpanded: true,
 			rootClientId: 'block-1',
+			nestingLevel: 2,
 		},
 		{
-			blockIndex: 1,
+			blockIndex: 0,
 			canInsertDraggedBlocksAsChild: true,
 			canInsertDraggedBlocksAsSibling: true,
 			clientId: 'block-3',
 			element: {
 				getBoundingClientRect: () => ( {
 					top: 150,
-					bottom: 150,
+					bottom: 200,
 					left: 10,
-					right: 100,
+					right: 300,
 					x: 10,
 					y: 150,
-					width: 90,
+					width: 290,
+					height: 50,
+				} ),
+			},
+			innerBlockCount: 0,
+			isDraggedBlock: false,
+			isExpanded: true,
+			rootClientId: 'block-2',
+			nestingLevel: 3,
+		},
+		{
+			blockIndex: 1,
+			canInsertDraggedBlocksAsChild: true,
+			canInsertDraggedBlocksAsSibling: true,
+			clientId: 'block-4',
+			element: {
+				getBoundingClientRect: () => ( {
+					top: 200,
+					bottom: 250,
+					left: 10,
+					right: 300,
+					x: 10,
+					y: 200,
+					width: 290,
 					height: 50,
 				} ),
 			},
 			innerBlockCount: 0,
 			isDraggedBlock: false,
 			isExpanded: false,
 			rootClientId: '',
+			nestingLevel: 1,
 		},
 	];
 
@@ -96,8 +125,55 @@ describe( 'getListViewDropTarget', () => {
 		} );
 	} );
 
+	it( 'should nest when dragging a block over the right side of the bottom half of a block nested to three levels', () => {
+		const position = { x: 250, y: 180 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 0,
+			dropPosition: 'inside',
+			rootClientId: 'block-3',
+		} );
+	} );
+
+	it( 'should drag below when positioned at the bottom half of a block nested to three levels, and over the third level horizontally', () => {
+		const position = { x: 10 + NESTING_LEVEL_INDENTATION * 3, y: 180 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-3',
+			dropPosition: 'bottom',
+			rootClientId: 'block-2',
+		} );
+	} );
+
+	it( 'should drag one level up below when positioned at the bottom half of a block nested to three levels, and over the second level horizontally', () => {
+		const position = { x: 10 + NESTING_LEVEL_INDENTATION * 2, y: 180 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-3',
+			dropPosition: 'bottom',
+			rootClientId: 'block-1',
+		} );
+	} );
+
+	it( 'should drag two levels up below when positioned at the bottom half of a block nested to three levels, and over the first level horizontally', () => {
+		const position = { x: 10 + NESTING_LEVEL_INDENTATION, y: 180 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-3',
+			dropPosition: 'bottom',
+			rootClientId: '',
+		} );
+	} );
+
 	it( 'should nest when dragging a block over the right side and bottom half of a collapsed block with children', () => {
-		const position = { x: 70, y: 90 };
+		const position = { x: 160, y: 90 };
 
 		const collapsedBlockData = [ ...blocksData ];