From 176abd9dea2b5a89c59ff45b318ebbb876a5d10d Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Mon, 14 Oct 2024 16:08:00 +0400 Subject: [PATCH 1/4] Enable smooth transition of box-shadow for feat. img. --- .../editor/src/components/post-featured-image/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss index a14c2ea73a63c1..575aabb806bdeb 100644 --- a/packages/editor/src/components/post-featured-image/style.scss +++ b/packages/editor/src/components/post-featured-image/style.scss @@ -66,6 +66,11 @@ .editor-post-featured-image__toggle { box-shadow: inset 0 0 0 $border-width $gray-400; + + &:focus:not(:disabled) { + // Allow smooth transition between focused and unfocused box-shadow states. + box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9); + } } .editor-post-featured-image__actions { From fabbeafa29a6d93cf5bb1890e5ad5b61552d2a47 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Tue, 15 Oct 2024 11:29:01 +0400 Subject: [PATCH 2/4] Remove fallback style and remove transition Transition is removed to prevent a black border in between transitioning --- packages/editor/src/components/post-featured-image/style.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss index 575aabb806bdeb..b2f1967fd79929 100644 --- a/packages/editor/src/components/post-featured-image/style.scss +++ b/packages/editor/src/components/post-featured-image/style.scss @@ -41,7 +41,6 @@ .editor-post-featured-image__preview { width: 100%; padding: 0; - transition: all 0.1s ease-out; @include reduce-motion("transition"); box-shadow: 0 0 0 0 var(--wp-admin-theme-color); overflow: hidden; // Ensure the focus style properly encapsulates the image. @@ -69,7 +68,7 @@ &:focus:not(:disabled) { // Allow smooth transition between focused and unfocused box-shadow states. - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9); + box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); } } From 335ae06898422fadfcd81f27c0c8b8158a7cce5a Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Tue, 15 Oct 2024 11:29:36 +0400 Subject: [PATCH 3/4] Update changelog --- packages/editor/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index dbd2884ab88560..4c1f7661bad9d5 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug Fixes + +- `Post Featured Image`: Fix `Set featured image` button's `box-shadow` transition to prevent border from flashing when focused. + ## 14.9.0 (2024-10-03) ## 14.8.0 (2024-09-19) From 78e6813ada4d48ec355967f500659601119bbe43 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Wed, 16 Oct 2024 11:12:35 +0400 Subject: [PATCH 4/4] Remove redundant style --- packages/editor/src/components/post-featured-image/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss index b2f1967fd79929..30d5cb43403cdf 100644 --- a/packages/editor/src/components/post-featured-image/style.scss +++ b/packages/editor/src/components/post-featured-image/style.scss @@ -41,7 +41,6 @@ .editor-post-featured-image__preview { width: 100%; padding: 0; - @include reduce-motion("transition"); box-shadow: 0 0 0 0 var(--wp-admin-theme-color); overflow: hidden; // Ensure the focus style properly encapsulates the image. outline-offset: -#{$border-width};