From 2ad2018ccb1216f6ae7e931870a001161521479f Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 3 Jun 2024 12:27:21 +0200 Subject: [PATCH 1/7] Top toolbar: fix half a pixel artifacting of the bottom border. --- packages/editor/src/components/header/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index 427297161ed8b9..1f0b637b5b1cfc 100644 --- a/packages/editor/src/components/header/style.scss +++ b/packages/editor/src/components/header/style.scss @@ -25,6 +25,8 @@ // Leave enough room for the focus ring to show. padding: 2px 0; align-items: center; + // Fix visual artifacting at the bottom. + max-height: $header-height - $border-width; // Allow focus ring to be fully visible on furthest right button. @include break-medium() { padding-right: var(--wp-admin-border-width-focus); From 0ab0f84079410bdf4aa402fb7c569fe7a647c8fc Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 3 Jun 2024 13:14:01 +0200 Subject: [PATCH 2/7] Address feedback. --- .../editor/src/components/collapsible-block-toolbar/style.scss | 2 +- packages/editor/src/components/header/style.scss | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/editor/src/components/collapsible-block-toolbar/style.scss b/packages/editor/src/components/collapsible-block-toolbar/style.scss index 80d25da1a3e28e..af0581b5d9672b 100644 --- a/packages/editor/src/components/collapsible-block-toolbar/style.scss +++ b/packages/editor/src/components/collapsible-block-toolbar/style.scss @@ -2,7 +2,7 @@ overflow: hidden; display: flex; align-items: center; - height: $header-height; + height: $header-height - $border-width; // Fix visual artifacting at the bottom. .block-editor-block-contextual-toolbar { border-bottom: 0; diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index 1f0b637b5b1cfc..427297161ed8b9 100644 --- a/packages/editor/src/components/header/style.scss +++ b/packages/editor/src/components/header/style.scss @@ -25,8 +25,6 @@ // Leave enough room for the focus ring to show. padding: 2px 0; align-items: center; - // Fix visual artifacting at the bottom. - max-height: $header-height - $border-width; // Allow focus ring to be fully visible on furthest right button. @include break-medium() { padding-right: var(--wp-admin-border-width-focus); From 617c217295d65496039240b5ec6fecc76e723068 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 3 Jun 2024 13:23:25 +0200 Subject: [PATCH 3/7] Restore previous fix after all. --- .../editor/src/components/collapsible-block-toolbar/style.scss | 2 +- packages/editor/src/components/header/style.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/collapsible-block-toolbar/style.scss b/packages/editor/src/components/collapsible-block-toolbar/style.scss index af0581b5d9672b..80d25da1a3e28e 100644 --- a/packages/editor/src/components/collapsible-block-toolbar/style.scss +++ b/packages/editor/src/components/collapsible-block-toolbar/style.scss @@ -2,7 +2,7 @@ overflow: hidden; display: flex; align-items: center; - height: $header-height - $border-width; // Fix visual artifacting at the bottom. + height: $header-height; .block-editor-block-contextual-toolbar { border-bottom: 0; diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index 427297161ed8b9..1f0b637b5b1cfc 100644 --- a/packages/editor/src/components/header/style.scss +++ b/packages/editor/src/components/header/style.scss @@ -25,6 +25,8 @@ // Leave enough room for the focus ring to show. padding: 2px 0; align-items: center; + // Fix visual artifacting at the bottom. + max-height: $header-height - $border-width; // Allow focus ring to be fully visible on furthest right button. @include break-medium() { padding-right: var(--wp-admin-border-width-focus); From 5cb9c5c6b5619202e51bde8cd2a289a32f3128df Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 4 Jun 2024 09:01:31 +0200 Subject: [PATCH 4/7] Use transparent background color. --- packages/components/src/toolbar/toolbar/style.scss | 1 + packages/editor/src/components/header/style.scss | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/src/toolbar/toolbar/style.scss b/packages/components/src/toolbar/toolbar/style.scss index 6edfe172629a90..fab946638e4829 100644 --- a/packages/components/src/toolbar/toolbar/style.scss +++ b/packages/components/src/toolbar/toolbar/style.scss @@ -10,6 +10,7 @@ &.is-unstyled { border: none; + background: transparent; & > .components-toolbar-group { border-right: none; diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index 1f0b637b5b1cfc..427297161ed8b9 100644 --- a/packages/editor/src/components/header/style.scss +++ b/packages/editor/src/components/header/style.scss @@ -25,8 +25,6 @@ // Leave enough room for the focus ring to show. padding: 2px 0; align-items: center; - // Fix visual artifacting at the bottom. - max-height: $header-height - $border-width; // Allow focus ring to be fully visible on furthest right button. @include break-medium() { padding-right: var(--wp-admin-border-width-focus); From 8f9526d77493198bcdcda2ae62797da7b47bd236 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 4 Jun 2024 10:24:25 +0200 Subject: [PATCH 5/7] Update changelog. --- packages/components/CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index e8d65cfd9ce837..d8e60d7e86e3cb 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,11 @@ - Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233)) +### Bug Fixes + +- `Toolbar`: Fix visual glitch in top toolbar mode ([#62225](https://github.com/WordPress/gutenberg/pull/62225)). + + ## 28.0.0 (2024-05-31) ### Breaking Changes From fb1e2266ef9ccd5774b1e568276b107031b80eb6 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 4 Jun 2024 12:50:25 +0200 Subject: [PATCH 6/7] Move the rule to the right place. --- packages/components/src/toolbar/toolbar/style.scss | 1 - .../editor/src/components/collapsible-block-toolbar/style.scss | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/toolbar/toolbar/style.scss b/packages/components/src/toolbar/toolbar/style.scss index fab946638e4829..6edfe172629a90 100644 --- a/packages/components/src/toolbar/toolbar/style.scss +++ b/packages/components/src/toolbar/toolbar/style.scss @@ -10,7 +10,6 @@ &.is-unstyled { border: none; - background: transparent; & > .components-toolbar-group { border-right: none; diff --git a/packages/editor/src/components/collapsible-block-toolbar/style.scss b/packages/editor/src/components/collapsible-block-toolbar/style.scss index 80d25da1a3e28e..18fdc556681449 100644 --- a/packages/editor/src/components/collapsible-block-toolbar/style.scss +++ b/packages/editor/src/components/collapsible-block-toolbar/style.scss @@ -7,6 +7,7 @@ .block-editor-block-contextual-toolbar { border-bottom: 0; height: 100%; + background: transparent; } // These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar. From 26bb3be1ffda7832e99b7065bd88583f2c1901c8 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 4 Jun 2024 14:09:03 +0200 Subject: [PATCH 7/7] Remove entry from changelog. --- packages/components/CHANGELOG.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d8e60d7e86e3cb..e8d65cfd9ce837 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,11 +6,6 @@ - Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233)) -### Bug Fixes - -- `Toolbar`: Fix visual glitch in top toolbar mode ([#62225](https://github.com/WordPress/gutenberg/pull/62225)). - - ## 28.0.0 (2024-05-31) ### Breaking Changes