From 6f71c4f3ce36f1fd08b62001f17b1ef0228961e4 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Mon, 21 Oct 2024 18:02:51 +0200 Subject: [PATCH 1/5] Also consider child elements of insertion point in `isInsertionPoint` function --- .../block-editor/src/components/use-block-drop-zone/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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]' ) ); } From a3786f09585c487489fc9dcc883e6096b74dd943 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 24 Oct 2024 10:52:24 +0200 Subject: [PATCH 2/5] Also disable the root block list when in zoom out mode --- packages/block-editor/src/components/inner-blocks/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 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..889ebd7cc992e8 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -202,10 +202,10 @@ export function useInnerBlocksProps( props = {}, options = {} ) { getBlockSettings, getSectionRootClientId, } = unlock( select( blockEditorStore ) ); - let _isDropZoneDisabled; if ( ! clientId ) { - return { isDropZoneDisabled: _isDropZoneDisabled }; + // Disable the root drop zone when zoomed out. + return { isDropZoneDisabled: isZoomOut() }; } const { hasBlockSupport, getBlockType } = select( blocksStore ); @@ -214,7 +214,7 @@ 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. From 0fe9ad32c2af19b985d992eeb410dca71f4639ef Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 24 Oct 2024 10:58:39 +0200 Subject: [PATCH 3/5] Consider situations where the sectionRoot is also the root --- .../block-editor/src/components/inner-blocks/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 889ebd7cc992e8..b7d095df151d46 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -204,8 +204,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) { } = unlock( select( blockEditorStore ) ); if ( ! clientId ) { - // Disable the root drop zone when zoomed out. - return { isDropZoneDisabled: isZoomOut() }; + 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). + return { + isDropZoneDisabled: + isZoomOut() && sectionRootClientId !== '', + }; } const { hasBlockSupport, getBlockType } = select( blocksStore ); @@ -221,7 +226,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) { // The inner blocks belonging to the section drop zone is // already disabled by the blocks themselves being disabled. const sectionRootClientId = getSectionRootClientId(); - _isDropZoneDisabled = clientId !== sectionRootClientId; } From 3ba379c0a9c77748b3d8373074621e28cb8079ba Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 24 Oct 2024 21:52:42 +0800 Subject: [PATCH 4/5] Update comment Co-authored-by: Dave Smith --- packages/block-editor/src/components/inner-blocks/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index b7d095df151d46..8d22fc7ae56f2f 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -207,6 +207,8 @@ export function useInnerBlocksProps( props = {}, options = {} ) { 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 !== '', From c48ebdb8d4c135b515300664e4234bd32a93e850 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 24 Oct 2024 15:59:18 +0200 Subject: [PATCH 5/5] Fix lint --- packages/block-editor/src/components/inner-blocks/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 8d22fc7ae56f2f..ae587720278200 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -207,7 +207,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) { 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 + // 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: