Zoom Out: Fix bouncy drop zones (#66399)

* Also consider child elements of insertion point in `isInsertionPoint` function * Also disable the root block list when in zoom out mode * Consider situations where the sectionRoot is also the root * Update comment Co-authored-by: Dave Smith <[email protected]> * Fix lint --------- Co-authored-by: talldan <[email protected]> Co-authored-by: getdave <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: ndiego <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: colorful-tones <[email protected]> Co-authored-by: stokesman <[email protected]>
WordPress · Oct 24, 2024 · 27b1d9d · 27b1d9d
1 parent ae9db95
commit 27b1d9d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/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;
 			}
 

diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/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]' )
 	);
 }