From 6fc539d8f94387f71ed847d2b6bba74c5e1c2ad8 Mon Sep 17 00:00:00 2001 From: Vrishabh Jasani <71686151+Vrishabhsk@users.noreply.github.com> Date: Thu, 17 Oct 2024 12:42:56 +0400 Subject: [PATCH] Fix : "Set featured image" button border flashes on focus (#66092) * Enable smooth transition of box-shadow for feat. img. * Remove fallback style and remove transition Transition is removed to prevent a black border in between transitioning * Update changelog * Remove redundant style Co-authored-by: Vrishabhsk Co-authored-by: t-hamano Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- packages/editor/CHANGELOG.md | 4 ++++ .../editor/src/components/post-featured-image/style.scss | 7 +++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index 2d72126f377d9..2716d965d1434 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.10.0 (2024-10-16) ## 14.9.0 (2024-10-03) diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss index a14c2ea73a63c..30d5cb43403cd 100644 --- a/packages/editor/src/components/post-featured-image/style.scss +++ b/packages/editor/src/components/post-featured-image/style.scss @@ -41,8 +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. outline-offset: -#{$border-width}; @@ -66,6 +64,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); + } } .editor-post-featured-image__actions {