Editor: Fix regression and restore the back button focus ring by fushar · Pull Request #80029 · WordPress/gutenberg

fushar · 2026-07-09T03:35:50Z

What?

Fixes a "regression" introduced by #79837.

The sidebar back button in the Site Editor (.edit-site-sidebar-button) is overriding the default focus styles. It now conflicts with the linked PR because that added this rule:

&:is(a) {
      box-shadow: none;
}

The correct fix here is to just follow what WP DS provides for the focus ring styles, so this PR removes the overrides.

However, it means that the focus ring color for the sidebar menu items (like Navigation, Pages, Templates) will be different from the back button. In this PR, we "fix" it by overriding it locally. The proper fix is to update the <Item> component so that it uses WP DS styles, as done in #78646. I left a // TODO comment on that.

Testing Instructions

Go to Site Editor (Appearance -> Editor)
Use the tab key to try to focus to the < back button in < Design
Verify you can see the focus state again.
~~Verify the focus state for all sidebar items are consistent with the <.~~

Screenshots or screencast

Before	After

Use of AI Tools

Used Opus 4.8 to investigate the issue.

github-actions · 2026-07-09T03:40:07Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: fushar <fushar@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2026-07-09T03:45:01Z

Size Change: -79 B (0%)

Total Size: 7.68 MB

📦 View Changed

Filename	Size	Change
`build/styles/edit-site/style-rtl.css`	21.5 kB	-20 B (-0.09%)
`build/styles/edit-site/style-rtl.min.css`	17.6 kB	-20 B (-0.11%)
`build/styles/edit-site/style.css`	21.5 kB	-19 B (-0.09%)
`build/styles/edit-site/style.min.css`	17.6 kB	-20 B (-0.11%)

_{compressed-size-action}

github-actions · 2026-07-09T04:11:22Z

Flaky tests detected in bf58e9c.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29000155915
📝 Reported issues:

[Flaky Test] activate block theme when live previewing in edit mode #77712 in /test/e2e/specs/site-editor/activate-theme.spec.js
[Flaky Test] should update the HTML only for the latest navigation #78835 in /test/e2e/specs/interactivity/router-navigate.spec.ts

mirka

Given the stronger push for design system adherence now, it might be a good time to remove any ad hoc focus-visibles and see what happens, especially in places like this where it isn't that critical.

mirka · 2026-07-09T06:25:40Z

 	&:focus-visible {
 		transform: translateZ(0);
+		// TODO: remove once the <Item> component has migrated to the
+		// design-system focus ring (`outset-ring__focus`), as <Button> did in #78646.
+		//
+		// This override is necessary now so the focus ring matches with
+		// the editor back button.
+		box-shadow: none;
+		@include mixins.outset-ring__focus();


Possibly cleaner/safer in the short term?

Suggested change

&:focus-visible {

transform: translateZ(0);

// TODO: remove once the <Item> component has migrated to the

// design-system focus ring (`outset-ring__focus`), as <Button> did in #78646.

//

// This override is necessary now so the focus ring matches with

// the editor back button.

box-shadow: none;

@include mixins.outset-ring__focus();

&:focus-visible {

// TODO: remove once the <Item> component has migrated to the WPDS focus color token.

--wp-components-color-accent: var(--wpds-color-stroke-focus);

transform: translateZ(0);

mirka · 2026-07-09T06:36:31Z

-	// Focus (resets default button focus and use focus-visible).
-	&:focus:not(:disabled) {
-		box-shadow: none;
-		outline: none;
-	}
-	&:focus-visible:not(:disabled) {
-		box-shadow:
-			0 0 0 var(--wp-admin-border-width-focus)
-			var(--wp-admin-theme-color);
-		outline: 3px solid transparent;
-	}
-


I personally am fine with removing the override, but I'll note that the switch to focus-visible was done intentionally in #48472. (And in case anyone is curious why focus-visible isn't the global default, see #65088 where we reached an agreement that we shouldn't.)

Thanks for the context!

the switch to focus-visible was done intentionally in #48472

I checked and it looks like this PR does not re-introduce the "bug" that the PR was fixing. The behavior is similar to the editor in GB 23.5. So it seems it's fine to keep this removal. (And I agree with your point that we should push for the built-in DS stylings).

I checked and it looks like this PR does not re-introduce the "bug" that the PR was fixing. The behavior is similar to the editor in GB 23.5.

I'm really sorry, I misunderstood that PR! I agree with the PR that showing focus ring on back button during navigation is distracting. Fixing here: #80114

mirka · 2026-07-09T06:39:26Z

+		// TODO: remove once the <Item> component has migrated to the
+		// design-system focus ring (`outset-ring__focus`), as <Button> did in #78646.


Thanks for reporting this 🙏

t-hamano

Nice catch!

t-hamano · 2026-07-09T06:40:42Z

+		// TODO: remove once the <Item> component has migrated to the
+		// design-system focus ring (`outset-ring__focus`), as <Button> did in #78646.
+		//
+		// This override is necessary now so the focus ring matches with
+		// the editor back button.
+		box-shadow: none;
+		@include mixins.outset-ring__focus();


However, it means that the focus ring color for the sidebar menu items (like Navigation, Pages, Templates) will be different from the back button. In this PR, we "fix" it by overriding it locally.

I think this seems like an issue that should be addressed separately from this PR, as the color mismatch is already occurring in trunk.

Thanks, I think you're right. It seems it's better to "fix" this at the source instead of adding more chaos to the CSS 😅 reverted for now!

t-hamano

LGTM!

Co-authored-by: fushar <fushar@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>

Editor: Fix regression and restore the back button focus ring

9659cc3

github-actions Bot added the [Package] Edit Site /packages/edit-site label Jul 9, 2026

fushar added the [Type] Bug An existing feature does not function as intended label Jul 9, 2026

fushar requested review from a team and t-hamano July 9, 2026 03:39

fushar marked this pull request as ready for review July 9, 2026 03:40

mirka approved these changes Jul 9, 2026

View reviewed changes

t-hamano reviewed Jul 9, 2026

View reviewed changes

Revert workaround

bf58e9c

t-hamano approved these changes Jul 9, 2026

View reviewed changes

fushar merged commit 749d10a into trunk Jul 9, 2026
44 of 45 checks passed

fushar deleted the fix-back-button-focus branch July 9, 2026 08:17

github-actions Bot added this to the Gutenberg 23.6 milestone Jul 9, 2026

fushar mentioned this pull request Jul 10, 2026

Editor: use the DS focus color for all sidebar elements #80087

Merged

fushar mentioned this pull request Jul 10, 2026

Editor: restore the behavior of only showing back button focus ring on :focus-visible #80114

Merged

		// TODO: remove once the <Item> component has migrated to the
		// design-system focus ring (`outset-ring__focus`), as <Button> did in #78646.

Uh oh!

Conversation

fushar commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Testing Instructions

Screenshots or screencast

Use of AI Tools

Uh oh!

github-actions Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mirka left a comment

Choose a reason for hiding this comment

Uh oh!

mirka Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

mirka Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

fushar Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

fushar Jul 10, 2026

Choose a reason for hiding this comment

Uh oh!

mirka Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

fushar Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fushar commented Jul 9, 2026 •

edited

Loading

github-actions Bot commented Jul 9, 2026 •

edited

Loading

github-actions Bot commented Jul 9, 2026 •

edited

Loading

github-actions Bot commented Jul 9, 2026 •

edited

Loading