Improve drop zone detection

packages/block-editor/src/components/block-navigation/block-contents.js

@@ -39,7 +39,7 @@ const BlockNavigationBlockContents = forwardRef(
 			( select ) =>
 				select( 'core/block-editor' ).getBlockRootClientId(
 					block.clientId
-				),
+				) || '',
 			[ block.rootClientId ]
 		);
 
@@ -48,15 +48,27 @@ const BlockNavigationBlockContents = forwardRef(
 			blockIndex: dropTargetBlockIndex,
 		} = blockDropTarget;
 
-		const isDropTarget =
-			( dropTargetRootClientId === rootClientId ||
-				( dropTargetRootClientId === '' &&
-					rootClientId === undefined ) ) &&
-			position === dropTargetBlockIndex + 1;
+		const blockIndex = position - 1;
+
+		const isDroppingBefore =
+			dropTargetRootClientId === rootClientId &&
+			blockIndex === dropTargetBlockIndex;
+		const isDroppingAfter =
+			dropTargetRootClientId === rootClientId &&
+			position === siblingBlockCount &&
+			dropTargetBlockIndex === siblingBlockCount;
+		const isDroppingToInnerBlocks =
+			block.clientId === dropTargetRootClientId &&
+			! block.innerBlocks?.length &&
+			dropTargetBlockIndex === 0;
 
 		const className = classnames(
 			'block-editor-block-navigation-block-contents',
-			{ 'is-drop-target': isDropTarget }
+			{
+				'is-dropping-before': isDroppingBefore,
+				'is-dropping-after': isDroppingAfter,
+				'is-dropping-to-inner-blocks': isDroppingToInnerBlocks,
+			}
 		);
 
 		return (

packages/block-editor/src/components/block-navigation/style.scss

@@ -40,10 +40,18 @@ $tree-item-height: 36px;
 		color: $dark-gray-600;
 		border-radius: 2px;
 
-		&.is-drop-target {
+		&.is-dropping-before {
 			border-top: 2px solid blue;
 		}
 
+		&.is-dropping-after {
+			border-bottom: 2px solid green;
+		}
+
+		&.is-dropping-to-inner-blocks {
+			border-bottom: 2px solid red;
+		}
+
 		.components-modal__content & {
 			padding-left: 0;
 			padding-right: 0;

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

@@ -64,6 +64,11 @@ function isPointContainedByRect( point, rect ) {
 	);
 }
 
+function isDroppingToInnerBlocks( point, rect ) {
+	const blockCenterX = rect.left + rect.width / 2;
+	return point.x > blockCenterX;
+}
+
 // Block navigation is always a vertical list, so only allow dropping
 // to the above or below a block.
 const ALLOWED_DROP_EDGES = [ 'top', 'bottom' ];
@@ -72,6 +77,7 @@ function getBlockNavigationDropTarget( blocksData, position ) {
 	let candidateEdge;
 	let candidateBlockData;
 	let candidateDistance;
+	let candidateRect;
 
 	for ( const blockData of blocksData ) {
 		const rect = blockData.element.getBoundingClientRect();
@@ -85,6 +91,7 @@ function getBlockNavigationDropTarget( blocksData, position ) {
 			candidateDistance = distance;
 			candidateBlockData = blockData;
 			candidateEdge = edge;
+			candidateRect = rect;
 		}
 
 		// If the mouse position is within the block, break early
@@ -104,17 +111,20 @@ function getBlockNavigationDropTarget( blocksData, position ) {
 
 	const isDraggingBelow = candidateEdge === 'bottom';
 
-	// If the user is dragging towards the bottom of the block interpret that
-	// they're trying to next the dragged block.
-	if ( isDraggingBelow && candidateBlockData.canInsertDraggedBlocksAsChild ) {
+	// If the user is dragging towards the bottom of the block check whether
+	// they might be inserting as a child.
+	if (
+		isDraggingBelow &&
+		candidateBlockData.canInsertDraggedBlocksAsChild &&
+		isDroppingToInnerBlocks( position, candidateRect )
+	) {
 		return {
 			rootClientId: candidateBlockData.clientId,
 			blockIndex: 0,
 		};
 	}
 
 	const offset = isDraggingBelow ? 1 : 0;
-
 	return {
 		rootClientId: candidateBlockData.rootClientId,
 		blockIndex: candidateBlockData.blockIndex + offset,