Skip to content

Background image control: Remove duplicated focus ring#80671

Merged
t-hamano merged 1 commit into
trunkfrom
fix/background-image-double-focus-ring
Jul 24, 2026
Merged

Background image control: Remove duplicated focus ring#80671
t-hamano merged 1 commit into
trunkfrom
fix/background-image-double-focus-ring

Conversation

@t-hamano

@t-hamano t-hamano commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

What?

Part of #80138

Removes the custom box-shadow focus outline from the Image button in the Background panel.

Why?

The Button component now renders its focus ring with outline, so the component's own focus ring and this custom box-shadow are both drawn, resulting in a double focus ring.

Testing Instructions

  1. Insert a Group block.
  2. Open the Block Inspector > Background panel.
  3. Focus the Image button and confirm only a single focus ring is rendered.

Screenshots or screencast

Note that to compare the focus outline with other buttons, I am applying a focus state to the relevant buttons using the browser developer tools.

Before After
before after

Use of AI Tools

Claude Code was used to create the commit and draft this pull request description. The code change itself was authored and verified manually.

The image tools panel button already receives a focus style from the
Button component, so the custom inset box-shadow rendered a second,
overlapping focus ring.

Co-Authored-By: Claude <noreply@anthropic.com>
@t-hamano t-hamano self-assigned this Jul 24, 2026
@t-hamano t-hamano added Backport to WP 7.1 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta [Type] Bug An existing feature does not function as intended [Package] Block editor /packages/block-editor CSS Styling Related to editor and front end styles, CSS-specific issues. labels Jul 24, 2026
@t-hamano
t-hamano requested a review from a team July 24, 2026 08:15
@t-hamano
t-hamano marked this pull request as ready for review July 24, 2026 08:15
@t-hamano
t-hamano requested a review from ellatrix as a code owner July 24, 2026 08:15
@github-actions

github-actions Bot commented Jul 24, 2026

Copy link
Copy Markdown

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: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

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

@tyxla tyxla left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM, thanks @t-hamano 🙌

@github-actions

Copy link
Copy Markdown

Size Change: -13 B (0%)

Total Size: 7.75 MB

📦 View Changed
Filename Size Change
build/styles/block-editor/style-rtl.css 20 kB -4 B (-0.02%)
build/styles/block-editor/style-rtl.min.css 17 kB -3 B (-0.02%)
build/styles/block-editor/style.css 20 kB -4 B (-0.02%)
build/styles/block-editor/style.min.css 17 kB -2 B (-0.01%)

compressed-size-action

@noruzzamans

Copy link
Copy Markdown
Contributor

Tested! Confirms the fix works as expected. Focusing the Image button in the Background panel now shows only a single focus ring, no duplication.

Screen.Recording.2026-07-24.at.2.51.55.PM.mov

@github-actions

Copy link
Copy Markdown

Flaky tests detected in 8d0ddc9.
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/30078050398
📝 Reported issues:

@t-hamano
t-hamano merged commit f78ad5e into trunk Jul 24, 2026
63 checks passed
@t-hamano
t-hamano deleted the fix/background-image-double-focus-ring branch July 24, 2026 08:59
@github-actions github-actions Bot added this to the Gutenberg 23.7 milestone Jul 24, 2026
@github-actions github-actions Bot removed the Backport to WP 7.1 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 24, 2026
gutenbergplugin pushed a commit that referenced this pull request Jul 24, 2026
The image tools panel button already receives a focus style from the
Button component, so the custom inset box-shadow rendered a second,
overlapping focus ring.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
@github-actions github-actions Bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Jul 24, 2026
@github-actions

Copy link
Copy Markdown

I just cherry-picked this PR to the wp/7.1 branch to get it included in the next release: 7a561a8

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Backported to WP Core Pull request that has been successfully merged into WP Core CSS Styling Related to editor and front end styles, CSS-specific issues. [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants