-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Buttons – Equal width #33526
Comments
Hi @Johanwalter I will add the images directly to this issue: 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. |
Using WordPress 5.8 RC4. 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. |
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. |
An existing issue is already open for managing the vertical spacing between stacked buttons: #29098 |
Yes that solves width on desktop but does not display properly on smartphone because buttons are not stack on each other. |
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.
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 |
I believe if we brought the width controls outlined in #44467 to the Buttons block, it would solve this issue. |
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 ?
The text was updated successfully, but these errors were encountered: