Try using coloured overlay instead of border for grid visualiser (Wor…

…dPress#61390) Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org> Co-authored-by: noisysocks <noisysocks@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
bph · May 20, 2024 · 0d137fb · 0d137fb
1 parent 819f3fd
commit 0d137fb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js b/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js
@@ -64,7 +64,13 @@ const GridVisualizerGrid = forwardRef( ( { blockElement }, ref ) => {
 			style={ gridInfo.style }
 		>
 			{ Array.from( { length: gridInfo.numItems }, ( _, i ) => (
-				<div key={ i } className="block-editor-grid-visualizer__item" />
+				<div
+					key={ i }
+					className="block-editor-grid-visualizer__item"
+					style={ {
+						boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ gridInfo.currentColor } 20%, #0000)`,
+					} }
+				/>
 			) ) }
 		</div>
 	);
@@ -84,6 +90,7 @@ function getGridInfo( blockElement ) {
 	const numItems = numColumns * numRows;
 	return {
 		numItems,
+		currentColor: getComputedCSS( blockElement, 'color' ),
 		style: {
 			gridTemplateColumns,
 			gridTemplateRows,

diff --git a/packages/block-editor/src/components/grid-visualizer/style.scss b/packages/block-editor/src/components/grid-visualizer/style.scss
@@ -13,7 +13,8 @@
 }
 
 .block-editor-grid-visualizer__item {
-	border: $border-width dashed $gray-300;
+	outline: 1px solid transparent;
+	border-radius: $radius-block-ui;
 }
 
 .block-editor-grid-item-resizer {