Buttons – Equal width

[Johanwalter]

Hi

Gutenberg “Buttons” block does not make buttons equal width when we place several buttons. I have compared with Getwid Buttons group block.

Below screenshot

Gutenberg Desktop : https://ibb.co/N2LKBhP Getwid Desktop : https://ibb.co/nQRbgMP => Buttons with Gutenberg are not equal width

Gutenberg Smartphone : https://ibb.co/z8cCD3F Getwid Smartphone : https://ibb.co/LJ0vDk8 => Buttons with Gutenberg do not stack over each other, which is quite ok, but it looks better if there over each other on Smartphone

Gutenberg vertical : https://ibb.co/4RcDPYD => When buttons are show in a column as “Vertical” there is nos pace between buttons + Equal width would look way much nicer

1 – Is there a way to make buttons equal width with custom css ?

2 – Is it possible to consider to have buttons equal width in future update ? Note : if I set width setting , for example 25% for each button, that make them equal width but create problem of display on smartphone

3 – Is it possible to consider to have buttons stack on each other on smarthpone in future update ?

4 – Is it possible to consider to have space on vertical between buttons in future update ?

5 – Is it possible to consider to have an option to adjust space between buttons ?

6 - Default color set in the theme is not applied on the buttons neither on the back as preview or in the front. Is it possible to consider to have default color applied to button ?

[paaljoachim]

Hi @Johanwalter

I will add the images directly to this issue: Below screenshots.

Gutenberg Desktop :

Getwid Desktop :

=> Buttons with Gutenberg are not equal width

Gutenberg Smartphone :

Getwid Smartphone :

=> Buttons with Gutenberg do not stack over each other, which is quite ok, but it looks better if there over each other on Smartphone

Gutenberg vertical :

=> When buttons are show in a column as “Vertical” there is nos pace between buttons + Equal width would look way much nicer

In my next comment I will test.

[paaljoachim]

Using WordPress 5.8 RC4. Theme: Twenty Twenty One Gutenberg plugin: 11.0.0

Adding buttons with the same text that you did.

Desktop

A button width is affected by how many characters/letters are written inside a button.

---> We need a way to define the width for all buttons so that these are the same width independent of amount of characters inside a button. Perhaps that could be a (parent) Buttons block setting.

I am skipping smartphone as I assume the same issue is there.

Vertical

I will ping a few people who I know have earlier worked on aspects of the Buttons block. @mkaz @aaronrobertshaw @andrewserong

[aaronrobertshaw]

Thanks for the ping @paaljoachim.

At present, I believe the only means we have of making all the buttons within a buttons block the same width is to select each individual button and then use its inspector controls to set a preset percentage width e.g. 25%, 50%, 75% etc.

Ideally, we’d be able to set explicit widths as well. There is work currently under way to add width block support that could then be leveraged to provide greater control over individual button widths.

There are also efforts being made to allow the application of styles to inner elements. This likely will provide an option that covers applying a width at the buttons block level and the inner buttons all utilising it to maintain consistency. This would also be required to set margins at the buttons level that could be used at different breakpoints to maintain the spacing between buttons.

There are open issues raising responsive styling options for theme.json and global styles. These would cover block supports as well.

[aaronrobertshaw]

An existing issue is already open for managing the vertical spacing between stacked buttons: https://github.com/WordPress/gutenberg/issues/29098

[Johanwalter]

At present, I believe the only means we have of making all the buttons within a buttons block the same width is to select each individual button and then use its inspector controls to set a preset percentage width e.g. 25%, 50%, 75% etc.

Yes that solves width on desktop but does not display properly on smartphone because buttons are not stack on each other. If buttons were vertical on smartphone that would be a solution

[aaronrobertshaw]

Yes that solves width on desktop but does not display properly on smartphone because buttons are not stack on each other. If buttons were vertical on smartphone that would be a solution

That's correct, by itself it will not allow stacking on smaller viewports alone. However, with the addition of being able to apply styles responsively, the buttons could be given 100% widths and bottom margins for mobile.

There are open issues raising responsive styling options for theme.json and global styles. These would cover block supports as well.

This is where the responsive styling options for theme.json, global styles and block supports come in. Those responsive styling options combined with the proposed width block support and existing margin block support would enable achieving the stacked mobile view in an elegant manner. Something that could benefit all blocks not just buttons.

Unfortunately, achieving responsive styling options that work across block supports, global styles and theme.json is not a trivial task so it might take a some time before it is available.

There is also the possibility that the mechanism developed to support application of styles to inner elements, or different states such as :hover, will also help enable responsive styling.

[jasmussen]

I believe if we brought the width controls outlined in #44467 to the Buttons block, it would solve this issue.

[aaronrobertshaw]

@skorasaurus could you perhaps add a comment as to why this was first closed, then reopened?

---

Regarding the original issue description:

1. Is there a way to make buttons equal width with custom CSS?

One option would be to leverage block type styles within theme.json, including whatever CSS is needed to control the width within there.

2. Is it possible to consider to have buttons equal width in a future update?

I think it's been mentioned that it could be earlier on this issue.

In the meantime, there are some workarounds that might achieve what we're chasing. That is, if you don't mind a touch of extra markup.

Try the following:

1. Add a Grid block
2. Add a Buttons block for each button you want
3. Within each Buttons block, select the Button and make it 100%

https://github.com/user-attachments/assets/33076c03-b756-4763-bbf0-84a77b35b5c8

3. Is it possible to consider to have buttons stack on each other on smarthpone in future update ?

The workaround above also shows some of the out-of-the-box responsiveness of the Grid block. Take it for a spin and the desired stacking should mostly be achievable.

4. Is it possible to consider to have space on vertical between buttons in a future update?

There's already block gap and margin support on the block used in the demo above. You could adjust the Block Spacing control or failing that add some vertical margins on the blocks so that they are spaced the way you need.

If there is a gap (excuse the pun) in the spacing controls here, a dedicated issue for that unrelated to the Button/s blocks would enable it to be addressed in a holistic fashion.

5. Is it possible to consider to have an option to adjust spaces between buttons?

As noted above, this is already supported.

6. Default color set in the theme is not applied on the buttons neither on the back as preview or in the front. Is it possible to consider to have default color applied to button ?

Global Styles (and theme.json) provide the ability to not only style the Button block but all button elements whether or not they are a Gutenberg block. If you're noticing a specific issue here that might need to be a separate issue as well.

---

For the most part, the items listed in the issue description are addressed. I'd vote to re-close this issue and create a dedicated one for perhaps supporting the Flex (Row) or Grid layouts for the parent Buttons block.

What do you all think?

[skorasaurus]

@skorasaurus could you perhaps add a comment as to why this was first closed, then reopened?

Regarding the original issue description:

1. Is there a way to make buttons equal width with custom CSS?

One option would be to leverage block type styles within theme.json, including whatever CSS is needed to control the width within there.

2. Is it possible to consider to have buttons equal width in a future update?

I think it's been mentioned that it could be earlier on this issue.

In the meantime, there are some workarounds that might achieve what we're chasing. That is, if you don't mind a touch of extra markup.

Try the following:

1. Add a Grid block

2. Add a Buttons block for each button you want

3. Within each Buttons block, select the Button and make it 100%

Screen.Recording.2024-10-28.at.2.11.47.pm.mp4

3. Is it possible to consider to have buttons stack on each other on smarthpone in future update ?

The workaround above also shows some of the out-of-the-box responsiveness of the Grid block. Take it for a spin and the desired stacking should mostly be achievable.

4. Is it possible to consider to have space on vertical between buttons in a future update?

There's already block gap and margin support on the block used in the demo above. You could adjust the Block Spacing control or failing that add some vertical margins on the blocks so that they are spaced the way you need.

If there is a gap (excuse the pun) in the spacing controls here, a dedicated issue for that unrelated to the Button/s blocks would enable it to be addressed in a holistic fashion.

5. Is it possible to consider to have an option to adjust spaces between buttons?

As noted above, this is already supported.

6. Default color set in the theme is not applied on the buttons neither on the back as preview or in the front. Is it possible to consider to have default color applied to button ?

Global Styles (and theme.json) provide the ability to not only style the Button block but all button elements whether or not they are a Gutenberg block. If you're noticing a specific issue here that might need to be a separate issue as well.

For the most part, the items listed in the issue description are addressed. I'd vote to re-close this issue and create a dedicated one for perhaps supporting the Flex (Row) or Grid layouts for the parent Buttons block.

What do you all think?

I apologize for not including the context, I should have done that. I was prompted to reopen this because someone had asked me how to do this 3 days ago and I found this issue and realized it was not possible using gutenberg alone (without any additional CSS). I shouldn't have closed this in the first place (when I was triaging in June), I guess that I saw jasmussen's last comment, saw that issue was closed and assumed it was possible.

At this point, I am ambivalent and defer to make a judgement to keep open or not.

[aaronrobertshaw]

I was prompted to reopen this because someone had asked me how to do this 3 days ago and I found this issue and realized it was not possible using gutenberg alone (without any additional CSS)

What exactly isn't possible? Some further details would help me grok what's missing.

If I understand the issue correctly, the workarounds above show it is possible to achieve with Gutenberg alone.

I'd suggest closing this issue again as its scope is broad and the title a bit misleading. Then create something focused, dedicated, and complete with full details on use case, replication steps, and desired outcome. That might help get traction and an actual resolution 🤞