[wp-trac] [WordPress Trac] #57257: Twenty Twenty theme button block is having issue when alignment and width both are used.

[WordPress Trac]

#57257: Twenty Twenty theme button block is having issue when alignment and width
both are used.
-------------------------------------------------+-------------------------
 Reporter:  nidhidhandhukiya                     |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  Future
                                                 |  Release
Component:  Bundled Theme                        |     Version:  6.1.1
 Severity:  normal                               |  Resolution:
 Keywords:  has-testing-info has-screenshots     |     Focuses:  css
  has-patch needs-testing reporter-feedback      |
-------------------------------------------------+-------------------------

Comment (by 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-right`class.


 {{{
 <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>
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/57257#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform