Hide drop indicator where block isn't allowed to drop.

packages/block-editor/src/components/block-draggable/draggable-chip.js

@@ -13,7 +13,10 @@ import BlockIcon from '../block-icon';
 export default function BlockDraggableChip( { count, icon, isPattern } ) {
 	const patternLabel = isPattern && __( 'Pattern' );
 	return (
-		<div className="block-editor-block-draggable-chip-wrapper">
+		<div
+			className="block-editor-block-draggable-chip-wrapper"
+			style={ { opacity: 'var(--wp--block-draggable-valid-opacity)' } }
+		>
 			<div
 				className="block-editor-block-draggable-chip"
 				data-testid="block-draggable-chip"

packages/block-editor/src/components/block-draggable/index.js

@@ -4,14 +4,16 @@
 import { store as blocksStore } from '@wordpress/blocks';
 import { Draggable } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockDraggableChip from './draggable-chip';
 import useScrollWhenDragging from './use-scroll-when-dragging';
 import { store as blockEditorStore } from '../../store';
+import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
+import { useIsDropTargetValid } from '../use-block-drop-zone';
 
 const BlockDraggable = ( {
 	children,
@@ -20,31 +22,39 @@ const BlockDraggable = ( {
 	onDragStart,
 	onDragEnd,
 } ) => {
-	const { srcRootClientId, isDraggable, icon } = useSelect(
-		( select ) => {
-			const {
-				canMoveBlocks,
-				getBlockRootClientId,
-				getBlockName,
-				getBlockAttributes,
-			} = select( blockEditorStore );
-			const { getBlockType, getActiveBlockVariation } =
-				select( blocksStore );
-			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-			const blockName = getBlockName( clientIds[ 0 ] );
-			const variation = getActiveBlockVariation(
-				blockName,
-				getBlockAttributes( clientIds[ 0 ] )
-			);
-
-			return {
-				srcRootClientId: rootClientId,
-				isDraggable: canMoveBlocks( clientIds, rootClientId ),
-				icon: variation?.icon || getBlockType( blockName )?.icon,
-			};
-		},
-		[ clientIds ]
-	);
+	const { srcRootClientId, isDraggable, icon, getBlockListSettings } =
+		useSelect(
+			( select ) => {
+				const {
+					canMoveBlocks,
+					getBlockRootClientId,
+					getBlockName,
+					getBlockAttributes,
+					getBlockListSettings: _getBlockListSettings,
+				} = select( blockEditorStore );
+				const { getBlockType, getActiveBlockVariation } =
+					select( blocksStore );
+				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+				const blockName = getBlockName( clientIds[ 0 ] );
+				const variation = getActiveBlockVariation(
+					blockName,
+					getBlockAttributes( clientIds[ 0 ] )
+				);
+
+				return {
+					srcRootClientId: rootClientId,
+					isDraggable: canMoveBlocks( clientIds, rootClientId ),
+					icon: variation?.icon || getBlockType( blockName )?.icon,
+					getBlockListSettings: _getBlockListSettings,
+				};
+			},
+			[ clientIds ]
+		);
+
+	const [ targetClientId, setTargetClientId ] = useState( null );
+
+	const isDropTargetValid = useIsDropTargetValid( clientIds, targetClientId );
+
 	const isDragging = useRef( false );
 	const [ startScrolling, scrollOnDragOver, stopScrolling ] =
 		useScrollWhenDragging();
@@ -61,6 +71,55 @@ const BlockDraggable = ( {
 		};
 	}, [] );
 
+	// Find the root of the editor iframe.
+	const blockRef = useBlockRef( clientIds[ 0 ] );
+	const editorRoot = blockRef.current?.closest( 'body' );
+
+	// Add a dragover event listener to the editor root to track the blocks being dragged over.
+	// The listener has to be inside the editor iframe otherwise the target isn't accessible.
+	// Check if the dragged blocks are allowed inside the target. If not, grey out the draggable.
+	useEffect( () => {
+		if ( ! editorRoot ) {
+			return;
+		}
+
+		const onDragOver = ( event ) => {
+			if ( ! event.target.closest( '[data-block]' ) ) {
+				return;
+			}
+
+			const newTargetClientId = event.target
+				.closest( '[data-block]' )
+				.getAttribute( 'data-block' );
+			//Only update targetClientId if it has changed
+			// and if it's a container block
+			if (
+				targetClientId !== newTargetClientId &&
+				getBlockListSettings( newTargetClientId )
+			) {
+				setTargetClientId( newTargetClientId );
+			}
+			// Update the body class to reflect if drop target is valid.
+			// This has to be done on the document body because the draggable
+			// chip is rendered outside of the editor iframe.
+			if ( isDropTargetValid ) {
+				window?.document?.body?.classList?.remove(
+					'block-draggable-invalid-drag-token'
+				);
+			} else {
+				window?.document?.body?.classList?.add(
+					'block-draggable-invalid-drag-token'
+				);
+			}
+		};
+
+		editorRoot.addEventListener( 'dragover', onDragOver );
+
+		return () => {
+			editorRoot.removeEventListener( 'dragover', onDragOver );
+		};
+	} );
+
 	if ( ! isDraggable ) {
 		return children( { draggable: false } );
 	}
@@ -102,7 +161,12 @@ const BlockDraggable = ( {
 				}
 			} }
 			__experimentalDragComponent={
-				<BlockDraggableChip count={ clientIds.length } icon={ icon } />
+				<BlockDraggableChip
+					count={ clientIds.length }
+					icon={ icon }
+					clientIds={ clientIds }
+					targetClientId={ targetClientId }
+				/>
 			}
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {

packages/block-editor/src/components/block-draggable/style.scss

@@ -45,3 +45,11 @@
 		font-size: $default-font-size;
 	}
 }
+
+:root {
+	--wp--block-draggable-valid-opacity: 1;
+}
+
+.block-draggable-invalid-drag-token {
+	--wp--block-draggable-valid-opacity: 0.6;
+}

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

@@ -8,7 +8,10 @@ import {
 	__experimentalUseDropZone as useDropZone,
 } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
-import { isUnmodifiedDefaultBlock as getIsUnmodifiedDefaultBlock } from '@wordpress/blocks';
+import {
+	isUnmodifiedDefaultBlock as getIsUnmodifiedDefaultBlock,
+	store as blocksStore,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -191,6 +194,65 @@ export function getDropTargetPosition(
 	];
 }
 
+/**
+ * A Rect hook that takes an array of dragged block client ids and a target client id
+ * and determines if the dragged blocks can be dropped on the target.
+ *
+ * @param {string[]} draggedBlockClientIds The client ids of the dragged blocks.
+ * @param {string}   targetClientId        The client id of the target.
+ * @return {boolean} Whether the dragged blocks can be dropped on the target.
+ */
+export function useIsDropTargetValid( draggedBlockClientIds, targetClientId ) {
+	const { getBlockType, allowedBlocks, draggedBlockNames, targetBlockName } =
+		useSelect(
+			( select ) => {
+				const { getBlockType: _getBlockType } = select( blocksStore );
+				const { getBlockNamesByClientId, getAllowedBlocks } =
+					select( blockEditorStore );
+
+				return {
+					getBlockType: _getBlockType,
+					allowedBlocks: getAllowedBlocks( targetClientId ),
+					draggedBlockNames: getBlockNamesByClientId(
+						draggedBlockClientIds
+					),
+					targetBlockName: getBlockNamesByClientId( [
+						targetClientId,
+					] )[ 0 ],
+				};
+			},
+			[ draggedBlockClientIds, targetClientId ]
+		);
+
+	// At root level allowedBlocks is undefined and all blocks are allowed.
+	// Otherwise, check if all dragged blocks are allowed.
+	let areBlocksAllowed = true;
+	if ( allowedBlocks ) {
+		const allowedBlockNames = allowedBlocks?.map( ( { name } ) => name );
+
+		areBlocksAllowed = draggedBlockNames.every( ( name ) =>
+			allowedBlockNames?.includes( name )
+		);
+	}
+
+	// Work out if dragged blocks have an allowed parent and if so
+	// check target block matches the allowed parent.
+	const draggedBlockTypes = draggedBlockNames.map( ( name ) =>
+		getBlockType( name )
+	);
+	const targetMatchesDraggedBlockParents = draggedBlockTypes.every(
+		( block ) => {
+			const [ allowedParentName ] = block?.parent || [];
+			if ( ! allowedParentName ) {
+				return true;
+			}
+
+			return allowedParentName === targetBlockName;
+		}
+	);
+	return areBlocksAllowed && targetMatchesDraggedBlockParents;
+}
+
 /**
  * @typedef  {Object} WPBlockDropZoneConfig
  * @property {?HTMLElement} dropZoneElement Optional element to be used as the drop zone.
@@ -216,15 +278,22 @@ export default function useBlockDropZone( {
 		operation: 'insert',
 	} );
 
-	const { isDisabled, parentBlockClientId, rootBlockIndex } = useSelect(
+	const {
+		parentBlockClientId,
+		rootBlockIndex,
+		isDisabled,
+		draggedBlockClientIds,
+	} = useSelect(
 		( select ) => {
 			const {
 				__unstableIsWithinBlockOverlay,
 				__unstableHasActiveBlockOverlayActive,
 				getBlockIndex,
 				getBlockParents,
 				getBlockEditingMode,
+				getDraggedBlockClientIds,
 			} = select( blockEditorStore );
+
 			const blockEditingMode = getBlockEditingMode( targetRootClientId );
 			return {
 				parentBlockClientId:
@@ -236,11 +305,17 @@ export default function useBlockDropZone( {
 						targetRootClientId
 					) ||
 					__unstableIsWithinBlockOverlay( targetRootClientId ),
+				draggedBlockClientIds: getDraggedBlockClientIds(),
 			};
 		},
 		[ targetRootClientId ]
 	);
 
+	const isBlockDroppingAllowed = useIsDropTargetValid(
+		draggedBlockClientIds,
+		targetRootClientId
+	);
+
 	const { getBlockListSettings, getBlocks, getBlockIndex } =
 		useSelect( blockEditorStore );
 	const { showInsertionPoint, hideInsertionPoint } =
@@ -338,7 +413,7 @@ export default function useBlockDropZone( {
 
 	return useDropZone( {
 		dropZoneElement,
-		isDisabled,
+		isDisabled: isDisabled || ! isBlockDroppingAllowed,
 		onDrop: onBlockDrop,
 		onDragOver( event ) {
 			// `currentTarget` is only available while the event is being