List View: Append when dragging into collapsed blocks (#50936)

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

@@ -172,7 +172,7 @@ describe( 'getListViewDropTarget', () => {
 		} );
 	} );
 
-	it( 'should nest when dragging a block over the right side and bottom half of a collapsed block with children', () => {
+	it( 'should nest and append to end when dragging a block over the right side and bottom half of a collapsed block with children', () => {
 		const position = { x: 160, y: 90 };
 
 		const collapsedBlockData = [ ...blocksData ];
@@ -188,6 +188,26 @@ describe( 'getListViewDropTarget', () => {
 
 		const target = getListViewDropTarget( collapsedBlockData, position );
 
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			dropPosition: 'inside',
+			rootClientId: 'block-1',
+		} );
+	} );
+
+	it( 'should nest and prepend when dragging a block over the right side and bottom half of an expanded block with children', () => {
+		const position = { x: 160, y: 90 };
+
+		const collapsedBlockData = [ ...blocksData ];
+
+		// Set the first block to be collapsed.
+		collapsedBlockData[ 0 ] = {
+			...collapsedBlockData[ 0 ],
+			isExpanded: true,
+		};
+
+		const target = getListViewDropTarget( collapsedBlockData, position );
+
 		expect( target ).toEqual( {
 			blockIndex: 0,
 			dropPosition: 'inside',

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

@@ -338,9 +338,15 @@ export function getListViewDropTarget( blocksData, position ) {
 				candidateBlockParents.length
 			) )
 	) {
+		// If the block is expanded, insert the block as the first child.
+		// Otherwise, for collapsed blocks, insert the block as the last child.
+		const newBlockIndex = candidateBlockData.isExpanded
+			? 0
+			: candidateBlockData.innerBlockCount || 0;
+
 		return {
 			rootClientId: candidateBlockData.clientId,
-			blockIndex: 0,
+			blockIndex: newBlockIndex,
 			dropPosition: 'inside',
 		};
 	}