Grid Visualizer - improve styles

packages/base-styles/_z-index.scss

@@ -111,7 +111,7 @@ $z-layers: (
 	".block-editor-block-popover": 31,
 
 	// Below the block toolbar.
-	".block-editor-grid-visualizer": 30,
+	".block-editor-grid-visualizer-popover": 30,
 
 	// Show snackbars above everything (similar to popovers)
 	".components-snackbar-list": 100000,

packages/block-editor/src/components/grid/grid-visualizer.js

@@ -36,7 +36,7 @@ export function GridVisualizer( { clientId, contentRef, parentLayout } ) {
 		parentLayout?.isManualPlacement &&
 		window.__experimentalEnableGridInteractivity;
 	return (
-		<GridVisualizerGrid
+		<GridVisualizerUI
 			gridClientId={ clientId }
 			gridElement={ gridElement }
 			isManualGrid={ isManualGrid }
@@ -45,12 +45,11 @@ export function GridVisualizer( { clientId, contentRef, parentLayout } ) {
 	);
 }
 
-const GridVisualizerGrid = forwardRef(
+const GridVisualizerUI = forwardRef(
 	( { gridClientId, gridElement, isManualGrid }, ref ) => {
 		const [ gridInfo, setGridInfo ] = useState( () =>
 			getGridInfo( gridElement )
 		);
-		const [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );
 
 		useEffect( () => {
 			const observers = [];
@@ -68,6 +67,38 @@ const GridVisualizerGrid = forwardRef(
 			};
 		}, [ gridElement ] );
 
+		return (
+			<>
+				<GridPopunder
+					gridClientId={ gridClientId }
+					gridInfo={ gridInfo }
+					isManualGrid={ isManualGrid }
+				/>
+				<GridPopover
+					ref={ ref }
+					gridClientId={ gridClientId }
+					gridInfo={ gridInfo }
+					isManualGrid={ isManualGrid }
+				/>
+			</>
+		);
+	}
+);
+
+/**
+ * A popover component that renders in a slot over the grid block.
+ *
+ * This provides interactive elements of the grid visualization —
+ * block inserters and drop zones.
+ *
+ * @param {Object} props
+ * @param {string} props.gridClientId
+ * @param {Object} props.gridInfo
+ */
+const GridPopover = forwardRef(
+	( { gridClientId, gridInfo, isManualGrid }, ref ) => {
+		const [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );
+
 		useEffect( () => {
 			function onGlobalDrag() {
 				setIsDroppingAllowed( true );
@@ -85,43 +116,32 @@ const GridVisualizerGrid = forwardRef(
 
 		return (
 			<BlockPopoverCover
-				className={ clsx( 'block-editor-grid-visualizer', {
+				__unstablePopoverSlot="__unstable-block-tools-after"
+				className={ clsx( 'block-editor-grid-visualizer-popover', {
 					'is-dropping-allowed': isDroppingAllowed,
 				} ) }
 				clientId={ gridClientId }
-				__unstablePopoverSlot="__unstable-block-tools-after"
 			>
-				<div
-					ref={ ref }
-					className="block-editor-grid-visualizer__grid"
-					style={ gridInfo.style }
-				>
-					{ isManualGrid ? (
-						<ManualGridVisualizer
+				<div ref={ ref } style={ gridInfo.style }>
+					{ isManualGrid && (
+						<ManualGridPopoverItems
 							gridClientId={ gridClientId }
 							gridInfo={ gridInfo }
 						/>
-					) : (
-						Array.from( { length: gridInfo.numItems }, ( _, i ) => (
-							<GridVisualizerCell
-								key={ i }
-								color={ gridInfo.currentColor }
-							/>
-						) )
 					) }
 				</div>
 			</BlockPopoverCover>
 		);
 	}
 );
 
-function ManualGridVisualizer( { gridClientId, gridInfo } ) {
+function ManualGridPopoverItems( { gridClientId, gridInfo } ) {
 	const [ highlightedRect, setHighlightedRect ] = useState( null );
-
 	const gridItems = useSelect(
 		( select ) => select( blockEditorStore ).getBlocks( gridClientId ),
 		[ gridClientId ]
 	);
+
 	const occupiedRects = useMemo( () => {
 		const rects = [];
 		for ( const block of gridItems ) {
@@ -153,11 +173,16 @@ function ManualGridVisualizer( { gridClientId, gridInfo } ) {
 			);
 			const isHighlighted =
 				highlightedRect?.contains( column, row ) ?? false;
+
 			return (
-				<GridVisualizerCell
+				<div
 					key={ `${ row }-${ column }` }
-					color={ gridInfo.currentColor }
-					className={ isHighlighted && 'is-highlighted' }
+					className={ clsx(
+						'block-editor-grid-visualizer-popover__cell',
+						{
+							'is-highlighted': isHighlighted,
+						}
+					) }
 				>
 					{ isCellOccupied ? (
 						<GridVisualizerDropZone
@@ -176,26 +201,54 @@ function ManualGridVisualizer( { gridClientId, gridInfo } ) {
 							setHighlightedRect={ setHighlightedRect }
 						/>
 					) }
-				</GridVisualizerCell>
+				</div>
 			);
 		} )
 	);
 }
 
-function GridVisualizerCell( { color, children, className } ) {
-	return (
-		<div
-			className={ clsx(
-				'block-editor-grid-visualizer__cell',
-				className
-			) }
-			style={ {
-				boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ color } 20%, #0000)`,
+/**
+ * A popover component that renders inline under the grid block.
+ *
+ * This provides non-interactive elements of the grid visualization and
+ * renders under the block so that the background colors are not atop
+ * the block content.
+ *
+ * @param {Object}  props
+ * @param {string}  props.gridClientId
+ * @param {Object}  props.gridInfo
+ * @param {boolean} props.isManualGrid
+ */
+function GridPopunder( { gridClientId, gridInfo, isManualGrid } ) {
+	const color = gridInfo.currentColor;
+	const cellStyle = isManualGrid
+		? {
+				backgroundColor: `rgba(var(--wp-admin-theme-color--rgb), 0.2)`,
+				border: `1px dashed rgb(var(--wp-admin-theme-color--rgb))`,
+				borderRadius: '2px',
 				color,
-			} }
+				opacity: 0.2,
+		  }
+		: {
+				border: `1px dashed ${ color }`,
+				borderRadius: '2px',
+				color,
+				opacity: 0.2,
+		  };
+
+	return (
+		<BlockPopoverCover
+			inline
+			clientId={ gridClientId }
+			// Override layout margin and popover's zIndex.
+			style={ { margin: 0, zIndex: 0 } }
 		>
-			{ children }
-		</div>
+			<div style={ gridInfo.style }>
+				{ Array.from( { length: gridInfo.numItems }, ( _, i ) => (
+					<div key={ i } style={ cellStyle } />
+				) ) }
+			</div>
+		</BlockPopoverCover>
 	);
 }
 

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

@@ -1,7 +1,7 @@
-.block-editor-grid-visualizer {
+.block-editor-grid-visualizer-popover {
 	// Specificity to override the z-index and pointer-events set by .components-popover.
-	&.block-editor-grid-visualizer.block-editor-grid-visualizer {
-		z-index: z-index(".block-editor-grid-visualizer");
+	&.block-editor-grid-visualizer-popover.block-editor-grid-visualizer-popover {
+		z-index: z-index(".block-editor-grid-visualizer-popover");
 
 		.components-popover__content * {
 			pointer-events: none;
@@ -18,11 +18,7 @@
 	}
 }
 
-.block-editor-grid-visualizer__grid {
-	display: grid;
-}
-
-.block-editor-grid-visualizer__cell {
+.block-editor-grid-visualizer-popover__cell {
 	display: grid;
 	position: relative;
 
@@ -37,7 +33,7 @@
 		overflow: hidden;
 
 		.block-editor-grid-visualizer__appender {
-			box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor  20%, #0000);
+			box-shadow: none;
 			color: inherit;
 			overflow: hidden;
 			height: 100%;
@@ -48,17 +44,26 @@
 
 	}
 
+	.block-editor-grid-visualizer__drop-zone {
+		opacity: 0;
+	}
+
 	&.is-highlighted {
 		.block-editor-inserter,
 		.block-editor-grid-visualizer__drop-zone {
-			background: var(--wp-admin-theme-color);
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.25);
+			border: $border-width solid var(--wp-admin-theme-color);
 		}
 	}
 
 	&:hover .block-editor-grid-visualizer__appender,
 	.block-editor-grid-visualizer__appender:focus {
 		opacity: 1;
-		background-color: color-mix(in srgb, currentColor  20%, #0000);
+		box-shadow: none;
+		background-color: rgba(var(--wp-admin-theme-color--rgb), 0.05);
+		border: $border-width dashed;
+		border-radius: $radius-small;
+		color: var(--wp-admin-theme-color);
 	}
 }
 
@@ -77,7 +82,7 @@
 .block-editor-grid-item-resizer {
 	// Specificity to override the z-index and pointer-events set by .components-popover.
 	&.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
-		z-index: z-index(".block-editor-grid-visualizer");
+		z-index: z-index(".block-editor-grid-visualizer-popover");
 
 		.components-popover__content * {
 			pointer-events: none;
@@ -117,7 +122,7 @@
 			content: "";
 			position: absolute;
 			display: block;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			height: $grid-unit-40;
 
 			// Position the focus rectangle.

packages/block-editor/src/components/grid/utils.js

@@ -172,6 +172,7 @@ export function getGridInfo( gridElement ) {
 			gridTemplateColumns,
 			gridTemplateRows,
 			gap: getComputedCSS( gridElement, 'gap' ),
+			display: 'grid',
 			padding: getComputedCSS( gridElement, 'padding' ),
 		},
 	};

packages/block-editor/src/hooks/grid-visualizer.js

@@ -4,35 +4,48 @@
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
+import { createContext, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { GridVisualizer, useGridLayoutSync } from '../components/grid';
 import { store as blockEditorStore } from '../store';
 
+export const GridResizerBoundsContext = createContext();
+
 function GridLayoutSync( props ) {
 	useGridLayoutSync( props );
 }
 
-function GridTools( { clientId, layout } ) {
-	const { isSelected, isDragging } = useSelect( ( select ) => {
-		const { isBlockSelected, isDraggingBlocks } =
+function GridTools( { clientId, layout, children } ) {
+	const { hasSelection, isDragging } = useSelect( ( select ) => {
+		const { isBlockSelected, hasSelectedInnerBlock, isDraggingBlocks } =
 			select( blockEditorStore );
 
 		return {
-			isSelected: isBlockSelected( clientId ),
+			hasSelection:
+				isBlockSelected( clientId ) ||
+				hasSelectedInnerBlock( clientId ),
 			isDragging: isDraggingBlocks(),
 		};
 	} );
 
+	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
+	const [ resizerBounds, setResizerBounds ] = useState();
+
 	return (
-		<>
+		<GridResizerBoundsContext.Provider value={ resizerBounds }>
 			<GridLayoutSync clientId={ clientId } />
-			{ ( isSelected || isDragging ) && (
-				<GridVisualizer clientId={ clientId } parentLayout={ layout } />
+			{ ( hasSelection || isDragging ) && (
+				<GridVisualizer
+					clientId={ clientId }
+					parentLayout={ layout }
+					contentRef={ setResizerBounds }
+				/>
 			) }
-		</>
+			{ children }
+		</GridResizerBoundsContext.Provider>
 	);
 }
 
@@ -43,13 +56,12 @@ const addGridVisualizerToBlockEdit = createHigherOrderComponent(
 		}
 
 		return (
-			<>
-				<GridTools
-					clientId={ props.clientId }
-					layout={ props.attributes.layout }
-				/>
+			<GridTools
+				clientId={ props.clientId }
+				layout={ props.attributes.layout }
+			>
 				<BlockEdit key="edit" { ...props } />
-			</>
+			</GridTools>
 		);
 	},
 	'addGridVisualizerToBlockEdit'