Zoom Out: Fix bouncy drop zones

packages/block-editor/src/components/inner-blocks/index.js

@@ -202,10 +202,17 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				getBlockSettings,
 				getSectionRootClientId,
 			} = unlock( select( blockEditorStore ) );
-			let _isDropZoneDisabled;
 
 			if ( ! clientId ) {
-				return { isDropZoneDisabled: _isDropZoneDisabled };
+				const sectionRootClientId = getSectionRootClientId();
+				// Disable the root drop zone when zoomed out and the section root client id
+				// is not the root block list (represented by an empty string).
+				// This avoids drag handling bugs caused by having two block lists acting as
+				// drop zones - the actual 'root' block list and the section root.
+				return {
+					isDropZoneDisabled:
+						isZoomOut() && sectionRootClientId !== '',
+				};
 			}
 
 			const { hasBlockSupport, getBlockType } = select( blocksStore );
@@ -214,14 +221,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 			const parentClientId = getBlockRootClientId( clientId );
 			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
 
-			_isDropZoneDisabled = blockEditingMode === 'disabled';
+			let _isDropZoneDisabled = blockEditingMode === 'disabled';
 
 			if ( isZoomOut() ) {
 				// In zoom out mode, we want to disable the drop zone for the sections.
 				// The inner blocks belonging to the section drop zone is
 				// already disabled by the blocks themselves being disabled.
 				const sectionRootClientId = getSectionRootClientId();
-
 				_isDropZoneDisabled = clientId !== sectionRootClientId;
 			}
 

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

@@ -287,7 +287,7 @@ function isInsertionPoint( targetToCheck, ownerDocument ) {
 	return !! (
 		defaultView &&
 		targetToCheck instanceof defaultView.HTMLElement &&
-		targetToCheck.dataset.isInsertionPoint
+		targetToCheck.closest( '[data-is-insertion-point]' )
 	);
 }