Make chip transparent when dragging over undroppable area.

WordPress · Dec 12, 2023 · 082f718 · 082f718
1 parent d4887ec
commit 082f718
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 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
@@ -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
@@ -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
@@ -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;
+}