Buttons Block: Add text align to block toolbar, and replace align

[jasmussen]

The Buttons block supports setting the width of buttons, but does not offer a way to change text alignment. In the following screenshots, the blocks have set their individual alignments to center, left, and right:

However the "alignment" dropdown doesn't work in this case, because it simply applies align[left|right|center] classes. These are the legacy float based classes that were relevant when the Button block stood alone (see also #39937). Those classes need to still exist for legacy content that uses the Button in this way, but the controls are not useful anymore. In that light, we could replace those alignments with a text alignment dropdown, so we can do this:

[carolinan]

It is not clear to me what is in the first pictures, where the alignments are not visible.
When I test the button alignments, left and centered buttons work, but right aligned buttons do not:

Twenty Twenty-Three, block editor, the last button is right aligned. These buttons are in the same button block, and there is no custom block spacing or margins between them:

[carolinan]

I think there may be valid cases for both button alignment and button text alignment?

[jasmussen]

It is not clear to me what is in the first pictures, where the alignments are not visible.

Each row of buttons is a single buttons block, with two button blocks inside, each set to 50% width.

Here's a code example

<!-- wp:paragraph -->
<p>Centered buttons:</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":50} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link wp-element-button">50% wide button</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":50,"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50 is-style-outline"><a class="wp-block-button__link wp-element-button">50% wide button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph -->
<p>Left aligned buttons:</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":50,"align":"left"} -->
<div class="wp-block-button alignleft has-custom-width wp-block-button__width-50"><a class="wp-block-button__link wp-element-button">50% wide button</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":50,"align":"left","className":"is-style-outline"} -->
<div class="wp-block-button alignleft has-custom-width wp-block-button__width-50 is-style-outline"><a class="wp-block-button__link wp-element-button">50% wide button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph -->
<p>Right aligned buttons:</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":50,"align":"right"} -->
<div class="wp-block-button alignright has-custom-width wp-block-button__width-50"><a class="wp-block-button__link wp-element-button">50% wide button</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":50,"align":"left","className":"is-style-outline"} -->
<div class="wp-block-button alignleft has-custom-width wp-block-button__width-50 is-style-outline"><a class="wp-block-button__link wp-element-button">50% wide button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

When I test the button alignments, left and centered buttons work, but right aligned buttons do not

Good catch, centered works for me. However I'm not convinced left aligned does, I think we'd have to test in RTL language. It simply applies the alignleft class, which is mainly for back compat with the button as best I can tell.

I think there may be valid cases for both button alignment and button text alignment?

If it was possible to insert a Button (singular) outside of the containing Buttons block, I could see a use case, since it would apply a float and you could have text wrapping around it.

However since the container is there, alignments on the button blocks inside make less sense, since they'll only ever float inside the container. You could still right-float the Buttons parent container itself, to have text float around it, but if I want a center or right-aligned button, I can use the container justification dropdown. Or is there a use case I'm missing?

Thank you for looking! 🙏