From 43e32463a6bb9c2ea9d9a1b873b66d54a9bad451 Mon Sep 17 00:00:00 2001 From: Rishabh Gupta Date: Mon, 14 Sep 2026 15:19:45 +0530 Subject: [PATCH 1/5] CustomGradientPicker: Show the control point's focus ring with the design system's outline --- packages/components/src/custom-gradient-picker/style.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss index 6df13454e16a55..31666e15dddbc9 100644 --- a/packages/components/src/custom-gradient-picker/style.scss +++ b/packages/components/src/custom-gradient-picker/style.scss @@ -72,9 +72,10 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1 &:focus, &.is-active { box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) $white, 0 0 $border-width-focus-fallback 0 rgba($black, 0.25); + } - // Windows High Contrast mode will show this outline, but not the box-shadow. - outline: $border-width-tab solid transparent; + &:focus { + @include outset-ring__focus(); } } } From 89efb5c4ee69abd4414faa37b162ac084022bdc1 Mon Sep 17 00:00:00 2001 From: Rishabh Gupta Date: Mon, 14 Sep 2026 15:47:54 +0530 Subject: [PATCH 2/5] CustomGradientPicker: Add changelog entry --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 0eaea0982d1775..19be55277f1bf5 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,6 +14,7 @@ - `Snackbar`: Show the action's focus ring with the design system's outline instead of a legacy dotted outline, and let `Button`/`ExternalLink` own the ring ([#82640](https://github.com/WordPress/gutenberg/pull/82640)). - `CircularOptionPicker`: Updated to show outline via design system's mixin for focus ring instead of previous border implementation ([#82521](https://github.com/WordPress/gutenberg/pull/82521)). - `Autocomplete`: Show focus ring with the design system's outline instead of previous box-shadow implementation ([#82766](https://github.com/WordPress/gutenberg/pull/82766)). +- `CustomGradientPicker`: Show the control point's focus ring with the design system's outline instead of a legacy transparent outline that canceled it ([#82834](https://github.com/WordPress/gutenberg/pull/82834)). ### Bug Fixes From 695e032454c79de594c770342acf3dc0f237830f Mon Sep 17 00:00:00 2001 From: Rishabh Gupta Date: Tue, 15 Sep 2026 17:13:12 +0530 Subject: [PATCH 3/5] CustomGradientPicker: Remove redundant focus ring include --- packages/components/src/custom-gradient-picker/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss index 31666e15dddbc9..fcb644d33650f3 100644 --- a/packages/components/src/custom-gradient-picker/style.scss +++ b/packages/components/src/custom-gradient-picker/style.scss @@ -73,10 +73,6 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1 &.is-active { box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) $white, 0 0 $border-width-focus-fallback 0 rgba($black, 0.25); } - - &:focus { - @include outset-ring__focus(); - } } } From 5d2e71b0da72232370d5006baf20fb4bdeca71a9 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 15 Sep 2026 14:51:25 +0200 Subject: [PATCH 4/5] CustomGradientPicker: Add contrasting focus ring backing --- packages/components/CHANGELOG.md | 2 +- .../src/custom-gradient-picker/style.scss | 31 +++++++++++++++---- 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 19be55277f1bf5..c04115feb2169a 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,7 +14,7 @@ - `Snackbar`: Show the action's focus ring with the design system's outline instead of a legacy dotted outline, and let `Button`/`ExternalLink` own the ring ([#82640](https://github.com/WordPress/gutenberg/pull/82640)). - `CircularOptionPicker`: Updated to show outline via design system's mixin for focus ring instead of previous border implementation ([#82521](https://github.com/WordPress/gutenberg/pull/82521)). - `Autocomplete`: Show focus ring with the design system's outline instead of previous box-shadow implementation ([#82766](https://github.com/WordPress/gutenberg/pull/82766)). -- `CustomGradientPicker`: Show the control point's focus ring with the design system's outline instead of a legacy transparent outline that canceled it ([#82834](https://github.com/WordPress/gutenberg/pull/82834)). +- `CustomGradientPicker`: Show the control point's focus ring with the design system's outline and a contrasting backing to separate it from the gradient ([#82834](https://github.com/WordPress/gutenberg/pull/82834)). ### Bug Fixes diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss index fcb644d33650f3..3a74c410a51c56 100644 --- a/packages/components/src/custom-gradient-picker/style.scss +++ b/packages/components/src/custom-gradient-picker/style.scss @@ -64,14 +64,33 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1 padding: 0; // Shadow and stroke. - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white, 0 0 $border-width-focus-fallback 0 rgba($black, 0.25); + box-shadow: + inset 0 0 0 var(--wp-admin-border-width-focus) $white, + 0 0 $border-width-focus-fallback 0 rgba($black, 0.25); - // Windows High Contrast mode will show this outline, but not the box-shadow. - outline: 2px solid transparent; - - &:focus, &.is-active { - box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) $white, 0 0 $border-width-focus-fallback 0 rgba($black, 0.25); + box-shadow: + inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) $white, + 0 0 $border-width-focus-fallback 0 rgba($black, 0.25); + } + + &:focus:not(:disabled):not(:active) { + // Back Button's focus outline with 1px of solid color on both sides. + outline-offset: 1px; + box-shadow: + inset 0 0 0 var(--wp-admin-border-width-focus) $white, + 0 0 $border-width-focus-fallback 0 rgba($black, 0.25), + 0 0 0 calc(var(--wpds-border-width-focus) + 2px) + var(--wpds-color-background-surface-neutral-strong); + + &.is-active { + box-shadow: + inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) + $white, + 0 0 $border-width-focus-fallback 0 rgba($black, 0.25), + 0 0 0 calc(var(--wpds-border-width-focus) + 2px) + var(--wpds-color-background-surface-neutral-strong); + } } } } From bb24b3ae0a6faa8447b3586ef458e97517943d34 Mon Sep 17 00:00:00 2001 From: Rishabh Gupta Date: Tue, 15 Sep 2026 21:36:10 +0530 Subject: [PATCH 5/5] CustomGradientPicker: Remove disabled state check --- packages/components/src/custom-gradient-picker/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss index 3a74c410a51c56..521c8a5e83cd46 100644 --- a/packages/components/src/custom-gradient-picker/style.scss +++ b/packages/components/src/custom-gradient-picker/style.scss @@ -74,7 +74,7 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1 0 0 $border-width-focus-fallback 0 rgba($black, 0.25); } - &:focus:not(:disabled):not(:active) { + &:focus:not(:active) { // Back Button's focus outline with 1px of solid color on both sides. outline-offset: 1px; box-shadow: