From 3db91724d1bf59d554949c95bd86d55aae13b436 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 16 May 2024 11:05:30 -0700
Subject: [PATCH] Remove background, use block's currentColor

---
 .../src/components/grid-visualizer/grid-visualizer.js    | 9 ++++++++-
 .../src/components/grid-visualizer/style.scss            | 2 --
 2 files changed, 8 insertions(+), 3 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
index 3d952c4b723d82..cff5efc5218e10 100644
--- 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
index 889cf11b62965c..2adaf18f52470a 100644
--- a/packages/block-editor/src/components/grid-visualizer/style.scss
+++ b/packages/block-editor/src/components/grid-visualizer/style.scss
@@ -13,8 +13,6 @@
 }
 
 .block-editor-grid-visualizer__item {
-	background-color: color-mix(in srgb, currentColor 10%, transparent);
-	box-shadow: inset 0 0 0 $border-width color-mix(in srgb, currentColor 20%, #0000);
 	outline: 1px solid transparent;
 	border-radius: $radius-block-ui;
 }