Try making the list view popover a modal drop zone

Author: talldan

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

@@ -283,6 +283,7 @@ export default function useBlockNavigationDropZone( ref ) {
 	const { position, type: dragEventType } = useDropZone( {
 		element: ref,
 		withPosition: true,
+		__experimentalIsModal: true,
 		...dropEventHandlers,
 	} );
 

packages/components/src/drop-zone/index.js

@@ -22,6 +22,7 @@ export function useDropZone( {
 	onDrop,
 	isDisabled,
 	withPosition,
+	__experimentalIsModal = false,
 	__unstableIsRelative = false,
 } ) {
 	const { addDropZone, removeDropZone } = useContext( Context );
@@ -40,6 +41,7 @@ export function useDropZone( {
 				onHTMLDrop,
 				setState,
 				withPosition,
+				__experimentalIsModal,
 				isRelative: __unstableIsRelative,
 			};
 			addDropZone( dropZone );
@@ -70,6 +72,7 @@ function DropZoneComponent( {
 	onFilesDrop,
 	onHTMLDrop,
 	onDrop,
+	__experimentalIsModal = false,
 } ) {
 	const element = useRef();
 	const { isDraggingOverDocument, isDraggingOverElement, type } = useDropZone(
@@ -78,6 +81,7 @@ function DropZoneComponent( {
 			onFilesDrop,
 			onHTMLDrop,
 			onDrop,
+			__experimentalIsModal,
 			__unstableIsRelative: true,
 		}
 	);

packages/components/src/drop-zone/provider.js

@@ -149,12 +149,23 @@ class DropZoneProvider extends Component {
 				)
 		);
 
+		const hasActiveModalDropZone = some( hoveredDropZones, ( zone ) => {
+			return (
+				zone.__experimentalIsModal &&
+				zone.element.current.contains( event.target )
+			);
+		} );
+
 		// Find the leaf dropzone not containing another dropzone
 		const hoveredDropZone = find( hoveredDropZones, ( zone ) => {
 			const container = zone.isRelative
 				? zone.element.current.parentElement
 				: zone.element.current;
 
+			if ( hasActiveModalDropZone && ! zone.__experimentalIsModal ) {
+				return false;
+			}
+
 			return ! some(
 				hoveredDropZones,
 				( subZone ) =>
@@ -193,6 +204,9 @@ class DropZoneProvider extends Component {
 
 		// Notifying the dropzones
 		toUpdate.forEach( ( dropZone ) => {
+			if ( ! dropZone ) {
+				return;
+			}
 			const index = this.dropZones.indexOf( dropZone );
 			const isDraggingOverDropZone = index === hoveredDropZoneIndex;
 			dropZone.setState( {