Twenty Twenty theme button block is having issue when alignment and width both are used.

[nidhidhandhukiya]

Steps to reproduce the issue :-

1. Activate Twenty Twenty theme.
2. Choose button block.
3. make the button align-right and give width 75%.

You can able to see the button is aligned right into admin side but width is not applied to button admin side.
Now, on the userside you can able to see that button width is 75% but the alignment is not right side.
I have attached video for better understanding :-
​https://share.cleanshot.com/JW8RJkfKfCGC2MGGbX9A

[nidhidhandhukiya]

This patch will resolved all the admin side issue when alignment is given.

[riccardodicurti]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/57257/57257.patch

Environment

• OS: macOS 12.3
• Web Server: nginx/1.23.2
• PHP: 7.4.33 (Supports 64bit values)
• WordPress: 6.2-alpha-54642-src
• Browser: Chrome 107.0.5304.110 (Official Build) (arm64)
• Theme: Twenty Twenty
• Active Plugins:
  • -

Actual Results

• ✅ Backend issue resolved
• ❌ Frontend issue not resolved

[costdev]

Hi @nidhidhandhukiya, I can't seem to reproduce this issue on trunk.

Can you try testing this again on trunk to see if the issue still exists?

[naeemhaque]

Fixes Twenty Twenty theme button block issue when alignment and width both are used.

[naeemhaque]

@costdev @riccardodicurti I've added a patch. And it's working perfectly.
Thank You.

[poena]

I am able to reproduce this if I use the "right align" option and not the "justify items right".

When I first add a button, the right align option is available.
But if I then select the justify option, the right align option is gone from the toolbar.
And I can't get the align option back without deleting and adding the block again.

I think this is a duplicate of ​https://github.com/WordPress/gutenberg/issues/39937
and that it needs to be resolved in the editor.

[poena]

I have tested this with WordPress 6.2 Beta 1, and it has been solved.
The alignment option is now a text alignment option.
More details about the change can be found in this pull request: ​https://github.com/WordPress/gutenberg/issues/44614

Reproduction Report

This report validates that the issue can not be reproduced.

Environment

• OS: macOS 13.1
• Web Server: Nginx
• PHP: 8.1.9
• WordPress: 6.2-beta1-55293
• Browser: Chrome
• Theme: Twenty Twenty, Twenty Twenty-Three
• Active Plugins:
  • WordPress Beta Tester 3.2.7

The button can use the width setting (25-100%), be aligned left right and center, and have a text align. It works in the editor and front.

For example it is now possible to have a full with parent buttons block, with a 50% wide button block inside, that is justified to the right, with centered text.

Note that the classname for the positioning is now is-content-justification-right and not alignright

Example of the new classes:

<div class="wp-block-buttons is-content-justification-right is-layout-flex wp-container-2">
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link wp-element-button">default button</a></div>
</div>

The centered text does not have a class, but if I align the text to the right, there is the has-text-align-rightclass.

<div class="wp-block-buttons is-content-justification-right is-layout-flex wp-container-2">
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link has-text-align-right wp-element-button">default button</a></div>
</div>

[poena]

Duplicate issue: ​https://github.com/WordPress/gutenberg/issues/39937