Button block: add text alignment options

[ZebulanStanphill]

The Button block currently has the ability to be floated to the left or right, as well as the ability to be center-aligned. However, there are situations where you want to have a button shown on the right, but you do not want the wrapping behavior of floats. Therefore, I think the Button block should have text alignment options.

Notably, I am not asking that the float alignment controls be removed. I am asking that text alignment controls be provided in addition to the float alignment controls.

[designsimply]

Screenshot for reference:

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=14188&action=edit running WordPress 4.9.8 and Gutenberg 3.4.0 using Firefox 61.0.1 on macOS 10.13.6.}

[webtrainingwheels]

Just to connect the dots.... . A couple of related issues about float/alignment behaviour
#10299
#4127

[designsimply]

there are situations where you want to have a button shown on the right, but you do not want the wrapping behavior of floats

I am not sure this is likely to be a common enough request to warrant changing the toolbar and I think it might lead to confusion since the expectation for text alignment could be that it operates on the text of the button itself and not on the alignment of the button. I think it would be reasonable, for cases such as you've suggested, to use the "Additional CSS Class" field and some custom CSS to make the desired change. If you feel strongly that is not the case and you feel strongly that adding text alignment options to the button block for layout controls such as showing a button on the right without floating it, please reply back and let me know and I will re-open the issue for you. Thank you!

[ZebulanStanphill]

I think the main issue here is that there is no way to align a block to the left or right without also floating it. You can get away with not having a left align option in most cases because most sites default to displaying something on the left, but this is not the cause for RTL sites (or sites that support both LTR and RTL modes). I'm mainly thinking in terms of page building, e.g. the following:

The middle section includes a button (technically a link... but so is the core Button block) right-aligned along with the rest of the content in that section to provide some visual contrast against the sections above and below.

Technically I could have right-floated that button and it would work, but not if there was anything below it in that section... unless the thing following it was using the clear css property. But there's no easy way to set a block to clear the previous one in Gutenberg without resorting to a CSS class, and it's far from an intuitive experience, since floats are not intended for situations like this.

This issue isn't really specific to buttons, as it affects any block that you want to align to the left or right edge of its container. Because of that, I expect this issue will end up having to be tackled anyway as things like the core Container block (and any other layout-related blocks) are developed and Gutenberg moves into full page building territory.

So I'm fine with this issue being closed. Adding text alignment options to solve this issue specifically for the Button block feels like a bit of a hack in hindsight, and a proper solution will probably appear in the near (or maybe not-so-near) future anyway.

[designsimply]

Agree about exploring it on a larger scale and also about container block as a possible place to tackle it. Thanks for the follow-up!

[buhlahkay]

This comes up all the time for me. I frequently need to right align a button, but I've never needed to float it to the right. I think text alignment makes more sense than it's current treatment.

[ghost]

not this option was gone from Gutenberg to align button in the centre

[davidperezgar]

Please, add again this feature