Make WordPress Core

Opened 12 months ago

Last modified 10 months ago

#57257 new defect (bug)

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

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 6.1.1
Component: Bundled Theme Keywords: has-testing-info has-screenshots has-patch needs-testing reporter-feedback
Focuses: css Cc:

Description

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

Attachments (2)

57257.patch (2.0 KB) - added by nidhidhandhukiya 12 months ago.
This patch will resolved all the admin side issue when alignment is given.
57257.diff (3.0 KB) - added by naeemhaque 12 months ago.
Fixes Twenty Twenty theme button block issue when alignment and width both are used.

Download all attachments as: .zip

Change History (9)

@nidhidhandhukiya
12 months ago

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

#1 @costdev
12 months ago

  • Focuses css added
  • Keywords has-testing-info has-screenshots has-patch needs-testing added
  • Milestone changed from Awaiting Review to 6.2

#2 @riccardodicurti
12 months ago

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

#3 follow-up: @costdev
12 months ago

  • Keywords reporter-feedback added

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
12 months ago

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

#4 in reply to: ↑ 3 @naeemhaque
12 months ago

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

Last edited 12 months ago by naeemhaque (previous) (diff)

#5 @poena
10 months ago

  • Milestone changed from 6.2 to Future Release

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.

#6 @poena
10 months ago

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>
Note: See TracTickets for help on using tickets.