From 2e1e3ef26b053c4e27b071a4b228c3d9d9f0d1e5 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 6 May 2024 16:29:13 +1000 Subject: [PATCH 1/4] Try using coloured overlay instead of border for grid visualiser --- .../block-editor/src/components/grid-visualizer/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/grid-visualizer/style.scss b/packages/block-editor/src/components/grid-visualizer/style.scss index 45140e59c7af94..eb9291450598cc 100644 --- a/packages/block-editor/src/components/grid-visualizer/style.scss +++ b/packages/block-editor/src/components/grid-visualizer/style.scss @@ -13,7 +13,9 @@ } .block-editor-grid-visualizer__item { - border: $border-width dashed $gray-300; + background-color: color-mix(in srgb, currentColor 10%, transparent); + outline: 1px solid color-mix(in srgb, currentColor 20%, transparent); + border-radius: 2px; } .block-editor-grid-item-resizer { From 68541c9084abf3579f62b57b94a466477623e2da Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 7 May 2024 17:10:32 +1000 Subject: [PATCH 2/4] Use scss variables --- .../block-editor/src/components/grid-visualizer/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/grid-visualizer/style.scss b/packages/block-editor/src/components/grid-visualizer/style.scss index eb9291450598cc..b3bef9a5a14e76 100644 --- a/packages/block-editor/src/components/grid-visualizer/style.scss +++ b/packages/block-editor/src/components/grid-visualizer/style.scss @@ -14,8 +14,8 @@ .block-editor-grid-visualizer__item { background-color: color-mix(in srgb, currentColor 10%, transparent); - outline: 1px solid color-mix(in srgb, currentColor 20%, transparent); - border-radius: 2px; + outline: $border-width solid color-mix(in srgb, currentColor 20%, transparent); + border-radius: $radius-block-ui; } .block-editor-grid-item-resizer { From 6d2a0bbedaa2493f4396ed000e3c87dcf0897729 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 8 May 2024 10:02:59 +1000 Subject: [PATCH 3/4] Use box-shadow --- .../block-editor/src/components/grid-visualizer/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/grid-visualizer/style.scss b/packages/block-editor/src/components/grid-visualizer/style.scss index b3bef9a5a14e76..889cf11b62965c 100644 --- a/packages/block-editor/src/components/grid-visualizer/style.scss +++ b/packages/block-editor/src/components/grid-visualizer/style.scss @@ -14,7 +14,8 @@ .block-editor-grid-visualizer__item { background-color: color-mix(in srgb, currentColor 10%, transparent); - outline: $border-width solid color-mix(in srgb, currentColor 20%, 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; } From 3db91724d1bf59d554949c95bd86d55aae13b436 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Thu, 16 May 2024 11:05:30 -0700 Subject: [PATCH 4/4] 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 ) => ( -
+
) ) }
); @@ -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; }