Prevent drag and drop within the disabled containers

WordPress · May 27, 2022 · 1c2420a · 1c2420a
1 parent 22c8786
commit 1c2420a
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 49 deletions.
diff --git a/packages/block-editor/src/components/block-content-overlay/index.js b/packages/block-editor/src/components/block-content-overlay/index.js
@@ -11,43 +11,11 @@ import { store as blockEditorStore } from '../../store';
 export default function useBlockOverlayActive( clientId ) {
 	return useSelect(
 		( select ) => {
-			const {
-				isBlockSelected,
-				hasSelectedInnerBlock,
-				canEditBlock,
-				areInnerBlocksControlled,
-				__unstableGetEditorMode,
-				getBlockRootClientId,
-			} = select( blockEditorStore );
-
-			// If the block editing is locked, the block overlay is always active.
-			if ( ! canEditBlock( clientId ) ) {
-				return true;
-			}
-
-			const editorMode = __unstableGetEditorMode();
-
-			// In zoom-out mode, the block overlay is always active for top level blocks.
-			if (
-				editorMode === 'zoom-out' &&
-				! getBlockRootClientId( clientId )
-			) {
-				return true;
-			}
-
-			// In navigation mode, the block overly is active when
-			// the block is not selected (or one of its children selected)
-			// The same behavior is also enabled in all modes for blocks
-			// that have controlled children (reusable block, template part, navigation)
-			const shouldEnableIfUnselected =
-				editorMode === 'navigation' ||
-				areInnerBlocksControlled( clientId );
-
-			return (
-				shouldEnableIfUnselected &&
-				! isBlockSelected( clientId ) &&
-				! hasSelectedInnerBlock( clientId, true )
+			const { __unstableHasActiveBlockOverlayActive } = select(
+				blockEditorStore
 			);
+
+			return __unstableHasActiveBlockOverlayActive( clientId );
 		},
 		[ clientId ]
 	);

diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js
@@ -28,6 +28,7 @@ export function useInBetweenInserter() {
 		isMultiSelecting,
 		getSelectedBlockClientIds,
 		getTemplateLock,
+		__unstableIsWithinBlockOverlay,
 	} = useSelect( blockEditorStore );
 	const { showInsertionPoint, hideInsertionPoint } = useDispatch(
 		blockEditorStore
@@ -111,16 +112,11 @@ export function useInBetweenInserter() {
 
 				// Don't show the insertion point if a parent block has an "overlay"
 				// See https://github.com/WordPress/gutenberg/pull/34012#pullrequestreview-727762337
-				const parentOverlay = element.parentElement?.closest(
-					'.block-editor-block-list__block.has-block-overlay'
-				);
-				if ( parentOverlay ) {
-					return;
-				}
-
 				const clientId = element.id.slice( 'block-'.length );
-
-				if ( ! clientId ) {
+				if (
+					! clientId ||
+					__unstableIsWithinBlockOverlay( clientId )
+				) {
 					return;
 				}
 

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
@@ -92,10 +92,18 @@ export default function useBlockDropZone( {
 } = {} ) {
 	const [ targetBlockIndex, setTargetBlockIndex ] = useState( null );
 
-	const isLockedAll = useSelect(
+	const isDisabled = useSelect(
 		( select ) => {
-			const { getTemplateLock } = select( blockEditorStore );
-			return getTemplateLock( targetRootClientId ) === 'all';
+			const {
+				getTemplateLock,
+				__unstableIsWithinBlockOverlay,
+				__unstableHasActiveBlockOverlayActive,
+			} = select( blockEditorStore );
+			return (
+				getTemplateLock( targetRootClientId ) === 'all' ||
+				__unstableHasActiveBlockOverlayActive( targetRootClientId ) ||
+				__unstableIsWithinBlockOverlay( targetRootClientId )
+			);
 		},
 		[ targetRootClientId ]
 	);
@@ -128,7 +136,7 @@ export default function useBlockDropZone( {
 	);
 
 	return useDropZone( {
-		isDisabled: isLockedAll,
+		isDisabled,
 		onDrop: onBlockDrop,
 		onDragOver( event ) {
 			// `currentTarget` is only available while the event is being

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -2690,3 +2690,45 @@ export const __unstableGetVisibleBlocks = createSelector(
 	},
 	( state ) => [ state.blocks.visibility ]
 );
+
+export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
+	// If the block editing is locked, the block overlay is always active.
+	if ( ! canEditBlock( state, clientId ) ) {
+		return true;
+	}
+
+	const editorMode = __unstableGetEditorMode( state );
+
+	// In zoom-out mode, the block overlay is always active for top level blocks.
+	if (
+		editorMode === 'zoom-out' &&
+		! getBlockRootClientId( state, clientId )
+	) {
+		return true;
+	}
+
+	// In navigation mode, the block overly is active when
+	// the block is not selected (or one of its children selected)
+	// The same behavior is also enabled in all modes for blocks
+	// that have controlled children (reusable block, template part, navigation)
+	const shouldEnableIfUnselected =
+		editorMode === 'navigation' ||
+		areInnerBlocksControlled( state, clientId );
+
+	return (
+		shouldEnableIfUnselected &&
+		! isBlockSelected( state, clientId ) &&
+		! hasSelectedInnerBlock( state, clientId, true )
+	);
+}
+
+export function __unstableIsWithinBlockOverlay( state, clientId ) {
+	let parent = state.blocks.parents[ clientId ];
+	while ( !! parent ) {
+		if ( __unstableHasActiveBlockOverlayActive( state, parent ) ) {
+			return true;
+		}
+		parent = state.blocks.parents[ parent ];
+	}
+	return false;
+}