theme.json: Give negative outline offset for Button's focus styles by yashjawale · Pull Request #187 · WordPress/ipsum

yashjawale · 2026-10-28T12:14:27Z

Description

Fixes #178

This PR updates outline offset for core/button styles so that focus outline appears inside the button similar to search widget's button.

Screenshots

Before

After

Testing Instructions

Activate the theme
Navigate to any page that uses button block
Tab to focus on button & notice the outline
Verify visibility in high contrast modes

Use of AI Tools

None used.

github-actions · 2026-10-28T12:16:41Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs.

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: yashjawale <yashjawale@git.wordpress.org>
Co-authored-by: juanfra <juanfra@git.wordpress.org>
Co-authored-by: rvpatel <ravipatel@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@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.

rvpatel · 2026-10-30T22:02:11Z

Thanks for this! Checked the generated global styles with this PR applied (Ipsum on 7.2-beta3-src):

Default (fill) Button: outline-offset: -4px ✅ now matches the Search button and the comment submit button.
Outline style Button (is-style-outline): still outline-offset: 4px, because styles.blocks.core/button.variations.outline.:focus.outline.offset in theme.json is unchanged.

Should the outline variation get -4px too, so the focus ring is consistent across button styles (and #178 is covered for outline buttons as well)?

yashjawale · 2026-11-02T06:10:26Z

Updated ✅
Thanks! It looks much consistent with the filled variant now. Also noticed that for outline variant its focused filled color doesn't match with its hover styles which makes it look like filled one when focused. Raised the same on the linked issue.

rvpatel · 2026-11-02T09:44:48Z

Test Report

Patch tested: acd294a (latest)

Environment

WordPress: 7.2-beta3-src (wordpress-develop Docker)
Theme: Ipsum (trunk vs. this PR)
Browsers: Chromium and Firefox (Playwright, real Tab key presses), 1200×800

Steps

Added a post with a Fill Button, an Outline Button, and a Search block; comments open.
Tabbed onto each button and checked the focus ring and computed styles.

Results

Button	Before	After
Fill (default)	`outline-offset: 4px`, ring barely visible	✅ `-4px`, clear dotted ring inside the button
Outline variation	`4px`, ring barely visible	✅ `-4px`, now consistent
Comment submit (Post Comment)	`4px`	✅ `-4px`
Search button	`-4px` (already)	✅ unchanged

Why it was hard to see before: the focus outline uses currentColor, which is near-white (rgb(252,252,252)) on the focused button. With a positive offset it sat outside the button against the light page background. With -4px it sits on the dark focused background. I estimate the ring at about 6.4:1, above the 3:1 needed for WCAG 1.4.11.

Same results in Chromium and Firefox.

Screenshots

Button	Before	After
Fill
Outline
Post Comment

✅ Works as expected; fixes #178 for all button types.

I agree the outline variation's focus background looking like the filled button is a separate issue, best followed up on #178.

Use of AI tools: tested with help from Claude Code (Playwright scripts and computed-style checks); results reviewed by me.

juanfra

Thanks for working on this! I tested, and it works well

Since elements.button already sets -4px, could we just remove these two outline.offset overrides? So that we avoid having it in two places

Can we also maybe try to include a fix for the new finding in this PR as well?

yashjawale · 2026-11-03T08:58:37Z

Updated ✅

Removed the redundant offset rule & corrected outline variant's focus style.

Screen.Recording.2026-11-03.at.2.26.55.PM.mov

juanfra

Thanks for the updates! The outline focus looks great now.

I left one last comment.

juanfra · 2026-11-03T12:14:38Z

 					},
 					"outline": {
-						"offset": "4px"
+						"offset": "-4px"


I think we should be safe to remove this as it's covered here.

Ah right... missed it.
Updated with it removed ✅
Also verified locally & doesn't make any changes.

juanfra

Thanks, LGTM!

The Button block's focus outline gets a negative offset, so it sits inside the button like the Search block's button does. Synced from WordPress/ipsum#187. See #66352. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

The Button block's focus outline gets a negative offset, so it sits inside the button like the Search block's button does. Synced from WordPress/ipsum#187. See #66631. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This updates Ipsum from `17a7ada71378a21c36670d67725b3ca632845a9f` to `bc2e5af700e28980f251d97f58cf80c72ee50a13` on its `trunk` branch. A full list of changes included in this commit can be found on GitHub: WordPress/ipsum@17a7ada...bc2e5af - theme.json: Give negative outline offset for Button's focus styles (WordPress/ipsum#187) - Fix view transitions ignoring prefers-reduced-motion (WordPress/ipsum#198) - Register the pattern utility classes as block styles (WordPress/ipsum#180) - Fix the PHPStan level 10 errors that core reports (WordPress/ipsum#171) - Provide style.min.css for production (WordPress/ipsum#61) - Use the border radius shorthand in the patterns (WordPress/ipsum#206) - Describe every pattern and offer the format patterns as starter patterns (WordPress/ipsum#181) - Move what theme.json can express out of the block css strings (WordPress/ipsum#185) - Clean up editor-only attributes and serialization in the patterns (WordPress/ipsum#204) - Add DESIGN.md with the theme's design model (WordPress/ipsum#186) - Inline the theme stylesheet (WordPress/ipsum#63) - Design guide: Return all theme patterns after the registry has read them (WordPress/ipsum#192) This commit also includes changes that only exist in core: - Ipsum is added to the `cssmin:themes` Grunt task, so the build makes the `style.min.css` that the theme now enqueues. The built file is ignored. - The theme's `node_modules` directory is ignored, and left out of core's build. - The theme gets its own stylesheet build process, with `build` and `watch` commands that minify `style.css` into `style.min.css`, set up through a new `package.json`, `package-lock.json` and `.nvmrc`. - A new `contributing.txt` documents the build process and the `test-and-zip-default-themes` workflow now tests and runs that build for Ipsum. - Regression tests for the design guide ability are added in core, with a child theme fixture, because Ipsum's repository has no PHPUnit setup. Follow-up to r60934, r64677, r64678, r64679, r65224. Props yashjawale, shailu25, onemaggie, westonruter, josephscott, juanfra, mehtadev, mikachan, ravipatel, wildworks, courane01, poena, gziolo. Fixes #66631. See #66352. git-svn-id: https://develop.svn.wordpress.org/trunk@65366 602fd350-edb4-49c9-b593-d223f7449a82

This updates Ipsum from `17a7ada71378a21c36670d67725b3ca632845a9f` to `bc2e5af700e28980f251d97f58cf80c72ee50a13` on its `trunk` branch. A full list of changes included in this commit can be found on GitHub: WordPress/ipsum@17a7ada...bc2e5af - theme.json: Give negative outline offset for Button's focus styles (WordPress/ipsum#187) - Fix view transitions ignoring prefers-reduced-motion (WordPress/ipsum#198) - Register the pattern utility classes as block styles (WordPress/ipsum#180) - Fix the PHPStan level 10 errors that core reports (WordPress/ipsum#171) - Provide style.min.css for production (WordPress/ipsum#61) - Use the border radius shorthand in the patterns (WordPress/ipsum#206) - Describe every pattern and offer the format patterns as starter patterns (WordPress/ipsum#181) - Move what theme.json can express out of the block css strings (WordPress/ipsum#185) - Clean up editor-only attributes and serialization in the patterns (WordPress/ipsum#204) - Add DESIGN.md with the theme's design model (WordPress/ipsum#186) - Inline the theme stylesheet (WordPress/ipsum#63) - Design guide: Return all theme patterns after the registry has read them (WordPress/ipsum#192) This commit also includes changes that only exist in core: - Ipsum is added to the `cssmin:themes` Grunt task, so the build makes the `style.min.css` that the theme now enqueues. The built file is ignored. - The theme's `node_modules` directory is ignored, and left out of core's build. - The theme gets its own stylesheet build process, with `build` and `watch` commands that minify `style.css` into `style.min.css`, set up through a new `package.json`, `package-lock.json` and `.nvmrc`. - A new `contributing.txt` documents the build process and the `test-and-zip-default-themes` workflow now tests and runs that build for Ipsum. - Regression tests for the design guide ability are added in core, with a child theme fixture, because Ipsum's repository has no PHPUnit setup. Follow-up to r60934, r64677, r64678, r64679, r65224. Props yashjawale, shailu25, onemaggie, westonruter, josephscott, juanfra, mehtadev, mikachan, ravipatel, wildworks, courane01, poena, gziolo. Fixes #66631. See #66352. Built from https://develop.svn.wordpress.org/trunk@65366 git-svn-id: http://core.svn.wordpress.org/trunk@64505 1a063a9b-81f0-0310-95a4-ce76da25c4cd

fix: give negative outline offset for button focus

b5d6be3

github-actions Bot added the [Area] Global Styles Issues or PRs that touch theme.json or the base stylesheet. label Oct 28, 2026

yashjawale marked this pull request as ready for review October 28, 2026 12:16

yashjawale mentioned this pull request Oct 28, 2026

Button focus style is barely visible #178

Closed

1 task done

yashjawale added 2 commits November 2, 2026 11:13

Merge branch 'trunk' into fix/button-focus-outline-178

b20cd64

fix: set negative offset for outline button variant

acd294a

juanfra reviewed Nov 2, 2026

View reviewed changes

yashjawale added 3 commits November 3, 2026 14:23

fix: outline button match with hover style

02a4158

fix: remove redundant negative offset for outline variant

1822d42

Merge branch 'trunk' into fix/button-focus-outline-178

e82105b

juanfra reviewed Nov 3, 2026

View reviewed changes

fix: remove extra outline overrides

c6e43bb

juanfra approved these changes Nov 3, 2026

View reviewed changes

juanfra merged commit c4f55b3 into WordPress:trunk Nov 3, 2026
7 of 8 checks passed

MaggieCabrera mentioned this pull request Nov 9, 2026

Bundled Themes: Update Ipsum for 7.2 Beta 5 WordPress/wordpress-develop#15845

Closed

Navigation Menu

Repository navigation

theme.json: Give negative outline offset for Button's focus styles - #187

theme.json: Give negative outline offset for Button's focus styles#187
juanfra merged 7 commits into
WordPress:trunkfrom
yashjawale:fix/button-focus-outline-178

yashjawale commented Oct 28, 2026

Uh oh!

github-actions Bot commented Oct 28, 2026 •

edited

Loading

Uh oh!

rvpatel commented Oct 30, 2026

Uh oh!

yashjawale commented Nov 2, 2026

Uh oh!

rvpatel commented Nov 2, 2026 •

edited

Loading

Uh oh!

juanfra left a comment

Uh oh!

yashjawale commented Nov 3, 2026

Uh oh!

juanfra left a comment

Uh oh!

juanfra Nov 3, 2026

Uh oh!

yashjawale Nov 3, 2026

Uh oh!

juanfra left a comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

yashjawale commented Oct 28, 2026

Before

After

Uh oh!

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

Uh oh!

Uh oh!

rvpatel commented Oct 30, 2026

Uh oh!

yashjawale commented Nov 2, 2026

Uh oh!

rvpatel commented Nov 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Report

Environment

Steps

Results

Screenshots

Uh oh!

juanfra left a comment

Choose a reason for hiding this comment

Uh oh!

yashjawale commented Nov 3, 2026

Uh oh!

juanfra left a comment

Choose a reason for hiding this comment

Uh oh!

juanfra Nov 3, 2026

Choose a reason for hiding this comment

Uh oh!

yashjawale Nov 3, 2026

Choose a reason for hiding this comment

Uh oh!

juanfra left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Oct 28, 2026 •

edited

Loading

rvpatel commented Nov 2, 2026 •

edited

Loading