From 27b1d9d3a94ace5fe0a3fe4184feb490c788e899 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 24 Oct 2024 22:36:49 +0800 Subject: [PATCH] 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 * Fix lint --------- Co-authored-by: talldan Co-authored-by: getdave Co-authored-by: annezazu Co-authored-by: ndiego Co-authored-by: richtabor Co-authored-by: colorful-tones Co-authored-by: stokesman --- .../src/components/inner-blocks/index.js | 14 ++++++++++---- .../src/components/use-block-drop-zone/index.js | 2 +- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index e79c188018cb50..ae587720278200 100644 --- 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 index 64424178461bcf..2a3e4948d40b3b 100644 --- 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]' ) ); }