Skip to content

Button: Remove the unused outline styles - #85471

Merged
t-hamano merged 5 commits into
WordPress:trunkfrom
himanshupathak95:fix/80138-button-block-focus-ring
Oct 24, 2026
Merged

Button: Remove the unused outline styles #85471
t-hamano merged 5 commits into
WordPress:trunkfrom
himanshupathak95:fix/80138-button-block-focus-ring

Conversation

@himanshupathak95

@himanshupathak95 himanshupathak95 commented Oct 23, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

What?

Remove the Button block wrapper's overridden focus styles and unused Sass import. See #80138.

Why?

The wrapper's focus rule doesn't draw the ring shown in the editor. Block-list styles override its outline with outline: none and draw the visible selection ring on ::after. The parent Buttons block also clears the wrapper's focus shadow. Replacing the suppressed outline with the shared focus mixin adds no visible benefit.

How?

Remove the redundant .wp-block-button:focus rule and its unused import.

Testing Instructions

  1. Open a post and insert a Buttons block. Add text such as “Learn more”.
  2. Click and edit the button text. Compare against trunk; its appearance should stay the same.
  3. In DevTools, select the Editor canvas console context and run document.querySelector('[data-type="core/button"]').focus(). Check that the existing block-selection ring remains visible. Inspect ::after to see where that ring comes from.
  4. Repeat with solid and outline styles, square corners, a dark background, full width, a custom shadow and empty text. Check RTL and forced-colors mode too.
  5. Check the front end. This only changes editor styles.

Testing Instructions for Keyboard

  1. Focus the button text, press Tab to leave the canvas and Shift+Tab to return. Check that focus and appearance match trunk.
  2. Press Escape, then Enter to return to editing. Type and remove a character.
  3. Open the link popup with Cmd/Ctrl+K and dismiss it with Escape. Focus should return to the text.

Screenshots or screencast

No visual change is expected.

Screenshot 2026-10-23 at 19 51 47

Use of AI Tools

Implemented with assistance of Codex (Astra 6)

@coderabbitai review

@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Oct 23, 2026
@github-actions

github-actions Bot commented Oct 23, 2026 •
edited
Loading

Copy link
Copy Markdown

🤖 PR meta 🤖

Preview in WordPress Playground

🎉 Props

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: himanshupathak95 <abcd95@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.

Props Bot commands

You can trigger Props Bot actions by commenting on this PR:

  • @propsbot add <username> to give props to a GitHub user. Requires write access.
  • @propsbot remove <username> to leave a user out of the props. Requires write access.
  • @propsbot refresh to refresh this list. Adding the props-bot label works too.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

@himanshupathak95 himanshupathak95 changed the title Button: Use the shared outline for wrapper focus styling Button: Remove the unused outline styles Oct 23, 2026
@himanshupathak95

himanshupathak95 commented Oct 23, 2026

Copy link
Copy Markdown
Contributor Author

While working on this, I tried something and added a focus ring around the button while you edit its text. When you click into a button and type something like "Learn more", the text field gets focused. The trunk only shows a blinking caret when editing the text on a button. With this change, the shared focus ring shows around the whole button, so it's clear which button you're working on. It's a big help in high contrast mode too, as you'll see -

Trunk:

Screen.Recording.2026-10-23.at.20.39.04.mov

With this experiment:

Screen.Recording.2026-10-23.at.18.43.47.mov

The rule I added:

.wp-block-button__link:focus {
	@include outset-ring__focus();
}

Does this feel like an improvement to you?

cc: @ciampo @t-hamano

@himanshupathak95
himanshupathak95 marked this pull request as ready for review October 23, 2026 15:11
@coderabbitai

coderabbitai Bot commented Oct 23, 2026 •
edited
Loading

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review.

ℹ️ Recent review info
⚙️ Run configuration
📥 Commits

Reviewing files that changed from the base of the PR and between 50868bf and 3afd668.

📒 Files selected for processing: 1
  • packages/block-library/src/button/editor.scss
💤 Files with no reviewable changes: 1
  • packages/block-library/src/button/editor.scss

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

📝 Summary

Summary by CodeRabbit

  • Style
    • Button blocks no longer display the previously applied box shadow and outline in their focus state. This changes the visual appearance of focused buttons. Placeholder opacity styling remains unchanged, and no other visual updates are noted in this change.

The Button editor stylesheet removes its base-style colors import and the focus rule that applied a box shadow and transparent outline. The placeholder opacity rule remains.

Changes: Button editor styles

Layer / File(s) Summary
Remove the editor focus rule
packages/block-library/src/button/editor.scss		 The stylesheet no longer imports base-style colors or applies the .wp-block-button focus box shadow and transparent outline. The placeholder opacity rule remains.

Priority: Low

Estimated code review effort: 1 (Trivial) | ~3 minutes

Change: Refactor

Possibly related issues

Merge Risk: Minimal · up to 3afd6

The normal Button editor focus indication remains in place. No actionable merge-blocking risk was established.

Pre-merge checks: Passed 5
Check name Status Explanation
Title check Passed The title clearly identifies the main change: removing unused Button block outline styles.
Description check Passed The description explains the removed focus styles and Sass import, the reason for the change, and the planned validation steps.
Docstring Coverage Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files.

✨ Finishing Touches: 💡 1
🛠️ Fix failing CI checks: 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@himanshupathak95
himanshupathak95 force-pushed the fix/80138-button-block-focus-ring branch from 3afd668 to 5e6d188 Compare October 23, 2026 15:35
t-hamano
t-hamano approved these changes Oct 24, 2026
View reviewed changes

@t-hamano t-hamano left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch! It looks like this outline style was introduced in #15058. It may have been necessary at the time, but I don't think it's needed in the current UI anymore.

While working on this, I tried something and added a focus ring around the button while you edit its text. When you click into a button and type something like "Learn more", the text field gets focused. The trunk only shows a blinking caret when editing the text on a button. With this change, the shared focus ring shows around the whole button, so it's clear which button you're working on. It's a big help in high contrast mode too, as you'll see -

I think this applies not only to the Button block but to every block that uses the RichText component. Adding special handling only to the Button block doesn't seem ideal to me. Also, I believe this focus ring is meant for the UI that makes up WordPress, not for blocks.

@t-hamano t-hamano added [Type] Code Quality Issues or PRs that relate to code quality [Block] Buttons Affects the Buttons Block labels Oct 24, 2026
@t-hamano @claude
Empty commit to fix CI error
355ad2e 
Co-Authored-By: Claude <noreply@anthropic.com>
@t-hamano
t-hamano merged commit 7ac1a61 into WordPress:trunk Oct 24, 2026
76 checks passed
@github-actions github-actions Bot added this to the Gutenberg 24.4 milestone Oct 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@t-hamano t-hamano t-hamano approved these changes
@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

Assignees

No one assigned

Labels

[Block] Buttons Affects the Buttons Block [Package] Block library /packages/block-library [Type] Code Quality Issues or PRs that relate to code quality

Projects

None yet

Milestone

Gutenberg 24.4

Development

Successfully merging this pull request may close these issues.

2 participants

@himanshupathak95 @t-hamano