Skip to content

Button: Migrate to width block support#12046

Closed
aaronrobertshaw wants to merge 4 commits into
WordPress:trunkfrom
aaronrobertshaw:add/width-support-to-button
Closed

Button: Migrate to width block support#12046
aaronrobertshaw wants to merge 4 commits into
WordPress:trunkfrom
aaronrobertshaw:add/width-support-to-button

Conversation

@aaronrobertshaw

Copy link
Copy Markdown

Backport of Gutenberg PR WordPress/gutenberg#74242

Trac ticket: https://core.trac.wordpress.org/ticket/65388

This migrates the Button block to the dimensions.width block support.

This PR backports:

  • the global-styles calc() conversion for percentage button widths in WP_Theme_JSON,
  • the core/button dimension-size presets in theme.json,
  • and the accompanying WP_Theme_JSON tests.

Dependency: Requires #10869 (Theme JSON: Define preset CSS vars for blocks based on feature selectors) to be committed first.

@github-actions

github-actions Bot commented Jun 2, 2026

Copy link
Copy Markdown

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

  • All changes will be lost when closing a tab with a Playground instance.
  • All changes will be lost when refreshing the page.
  • A fresh instance is created each time the link below is clicked.
  • Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
    it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

@ramonjd

ramonjd commented Jun 2, 2026

Copy link
Copy Markdown
Member

I know it's a draft, but I checked update_button_width_declarations and get_styles_for_block against the changes in WordPress/gutenberg#74242 👍🏻

What is the bot doing deleting the theme.json changes? f6e2ddd 🤔

@aaronrobertshaw

Copy link
Copy Markdown
Author

What is the bot doing deleting the theme.json changes? f6e2ddd 🤔

No idea, to be honest. I'll have to look into it.

@adrianduffell

Copy link
Copy Markdown

@aaronrobertshaw is this ready for review?

@tellthemachines

Copy link
Copy Markdown
Contributor

Looks like there's a couple more places using update_button_width_declarations in the corresponding gutenberg class:

  • within foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) loop in get_styles_for_block
  • in the process_pseudo_selectors function.

would be worth adding those in here too. Other than that, LGTM!

@aaronrobertshaw

Copy link
Copy Markdown
Author

Thanks for the nudge, I've been caught up on other things and left this on the backburner too long 😬

would be worth adding those in here too. Other than that, LGTM

Yep, part of things moving on with states and responsive styles after this was spun up. I'll cross check everything, update this accordingly, and flag of review.

@ramonjd

ramonjd commented Jul 14, 2026

Copy link
Copy Markdown
Member

@aaronrobertshaw this one is still a draft. what's missing? are you able to take care of it?

@aaronrobertshaw aaronrobertshaw force-pushed the add/width-support-to-button branch from f6e2ddd to cfe5de6 Compare July 14, 2026 22:06
@aaronrobertshaw

aaronrobertshaw commented Jul 14, 2026

Copy link
Copy Markdown
Author

I've crossed checked Gutenberg's call sites for updating the button block's width declarations after the recent state and responsive styling updates.

The count and locations match between Gutenberg and Core now and this faithfully brings across the changes from the original PR. So, I think this is good for a review, approval, and merge now.

@aaronrobertshaw aaronrobertshaw marked this pull request as ready for review July 14, 2026 22:15
@github-actions

github-actions Bot commented Jul 14, 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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @1178653+wordpress-develop-pr-bot[bot]@users.noreply.github.com.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

Core Committers: Use this line as a base for the props when committing in SVN:

Props aaronrobertshaw, isabel_brison, ramonopoly, adrianduffell.

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

@ramonjd

ramonjd commented Jul 14, 2026

Copy link
Copy Markdown
Member

Thanks for taking care of that. I'll give it a run today. Cheers!

@tellthemachines tellthemachines 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.

Changes LGTM!

aaronrobertshaw and others added 3 commits July 14, 2026 17:07
Backport of Gutenberg PR WordPress/gutenberg#74242.

Adds the global styles calc() conversion for percentage button widths in
WP_Theme_JSON, the core/button dimension size presets in theme.json, and the
accompanying WP_Theme_JSON tests.

Props aaronrobertshaw, SirLouen, andrewserong, ramonjd, dmsnell, ciampo.

See #65388.
Call update_button_width_declarations() in process_pseudo_selectors()
and the responsive breakpoint loop so percentage button widths receive
the block-gap calc() formula in state-based and responsive styles.
@aaronrobertshaw aaronrobertshaw force-pushed the add/width-support-to-button branch from 3553242 to a071f04 Compare July 15, 2026 00:08
These presets are provided by the Gutenberg sync (v22.9.0) and must not
be removed by the backport. A rebase artifact had dropped them.
@aaronrobertshaw aaronrobertshaw force-pushed the add/width-support-to-button branch from a071f04 to 1acfaee Compare July 15, 2026 00:52
@github-actions

Copy link
Copy Markdown

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 62746
GitHub commit: 25d2739

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.

@github-actions github-actions Bot closed this Jul 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants