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: #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.

[skorasaurus]

This should now be possible with the introduction of #44467 ; please reopen if you are still experiencing this issue.