From 082f718649b1942ba29cd1a94b652c251e4631aa Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 12 Dec 2023 16:28:08 +1100
Subject: [PATCH] Make chip transparent when dragging over undroppable area.

---
 .../block-draggable/draggable-chip.js          |  5 ++++-
 .../src/components/block-draggable/index.js    | 18 ++++++++++++++++--
 .../src/components/block-draggable/style.scss  |  8 ++++++++
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-draggable/draggable-chip.js b/packages/block-editor/src/components/block-draggable/draggable-chip.js
index d7d053be179fa..3035346864552 100644
--- a/packages/block-editor/src/components/block-draggable/draggable-chip.js
+++ b/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"
diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js
index 8cef5917389f6..e564c793c2352 100644
--- a/packages/block-editor/src/components/block-draggable/index.js
+++ b/packages/block-editor/src/components/block-draggable/index.js
@@ -72,7 +72,7 @@ const BlockDraggable = ( {
 	}, [] );
 
 	const blockRef = useBlockRef( clientIds[ 0 ] );
-	const editorRoot = blockRef.current?.closest( '.is-root-container' );
+	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.
@@ -98,6 +98,18 @@ const BlockDraggable = ( {
 			) {
 				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 );
@@ -151,9 +163,11 @@ const BlockDraggable = ( {
 				<BlockDraggableChip
 					count={ clientIds.length }
 					icon={ icon }
-					isValid={ isDropTargetValid }
+					clientIds={ clientIds }
+					targetClientId={ targetClientId }
 				/>
 			}
+			isValid={ isDropTargetValid }
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {
 				return children( {
diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
index a27d4c4caf2f2..210e6c9dd9d67 100644
--- a/packages/block-editor/src/components/block-draggable/style.scss
+++ b/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;
+}