Button Block: Custom width support

[jayclydeTags]

What problem does this address?

The Button block currently offers only four preset width options (25%, 50%, 75%, 100%) accessible through the Settings sidebar. This limitation creates several UX and design challenges:

Specific pain points:

1. Inflexible layout distribution - When designing button groups that require equal distribution across a row (e.g., 5 buttons = 20% each, 3 buttons = 33.33% each), the current presets don't accommodate these common use cases
2. No custom unit support - Users cannot specify width values using other CSS units (px, rem, em, vw) that may be more appropriate for responsive design patterns
3. Limited design control - Designers following specific brand guidelines or design systems that require precise button widths (e.g., 150px, 12rem) must resort to custom CSS workarounds
4. Inconsistent with other blocks - Many Gutenberg blocks (Column, Spacer) allow custom dimension inputs, creating an inconsistent editing experience

What is your proposed solution?

Add a custom width input field in the Button block's Settings panel that accepts both numeric values and unit specifications.

Proposed UI changes:

1. Replace or supplement the preset buttons with a unit control input (similar to the one used in Spacer, Column)

   • Input field accepting numeric values
   • Dropdown for unit selection (%, px, rem, em, vw, auto)
   • Presets could remain as quick-select options above the custom input

2. Input field specifications:

   • Allow direct numeric input (e.g., "20", "150", "33.33")
   • Unit selector dropdown with common CSS units
   • Default unit: % (maintaining current behavior)
   • Support for "auto" to return to default/content-based width
   • Real-time preview in the editor

3. Validation and boundaries:

   • For percentage: 0-100% range with optional warning for values >100%
   • For px/rem/em: Reasonable min/max values or no restriction with user responsibility

Spacer Settings

Column block settings

Example use case from screenshot:

In the provided example, 5 buttons need equal distribution. With custom width input, users could set each button to "20%" width, achieving perfect equal spacing that's currently impossible with the 25%/50%/75%/100% presets.

Benefits:

• Eliminates need for custom CSS workarounds for common layout patterns
• Provides consistency with other Gutenberg blocks' dimension controls
• Improves accessibility to advanced layouts for non-technical users
• Supports responsive design workflows with multiple unit options

[Mamaduka]

There are a couple of overlapping issues here. @ryanwelcher is already working on foundation - #71905, and there's a similar issue - #42644.

It's probably better to consolidate the Button block with issues into a single one.

cc @aaronrobertshaw

[aaronrobertshaw]

Thanks for the ping @Mamaduka 👍

The MVP for the width support was merged, there are a few follow-ups for it that need to be ironed out but it's getting close to being ready to adopt through core blocks.

In particular, there is some work underway that adds support for presets under dimensions and updates this width support to use a newly refactored preset input control.

• Dimensions Support: Add dimension presets and adopt for width and min height block supports #73811

I believe this should provide the requested enhancements to the button block.

As for consolidating issues, I am aware of #62247 relating to Button block width. I'd vote for closing #62247 in favour of this issue given it's a little more detailed.