Fix : "Set featured image" button border flashes on focus (WordPress#…

…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 <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]>
karthick-murugan · Nov 13, 2024 · 2d81395 · 2d81395
1 parent 3e997de
commit 2d81395
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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 {