Opened 2 years ago
Closed 10 months ago
#57257 closed defect (bug) (worksforme)
Twenty Twenty theme button block is having issue when alignment and width both are used.
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | 6.1.1 |
Component: | Bundled Theme | Keywords: | has-testing-info has-screenshots has-patch |
Focuses: | css | Cc: |
Description
Steps to reproduce the issue :-
- Activate Twenty Twenty theme.
- Choose button block.
- 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)
Change History (11)
#1
@
2 years ago
- Focuses css added
- Keywords has-testing-info has-screenshots has-patch needs-testing added
- Milestone changed from Awaiting Review to 6.2
#2
@
2 years 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:
↓ 4
@
2 years 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?
#4
in reply to:
↑ 3
@
2 years ago
@costdev @riccardodicurti I've added a patch. And it's working perfectly.
Thank You.
#5
@
2 years 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
@
2 years 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-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>
#7
@
2 years ago
Duplicate issue: https://github.com/WordPress/gutenberg/issues/39937
#8
@
10 months ago
@poena unless I am mistaken this isn't an issue anymore to be solved here. Can you confirm?
#9
@
10 months ago
- Keywords needs-testing reporter-feedback removed
- Milestone Future Release deleted
- Resolution set to worksforme
- Status changed from new to closed
Those legacy alignment options were removed in https://github.com/WordPress/gutenberg/pull/45663
The justification options seem to work with Button blocks at various widths.
I'll close this and the similar ticket #56138, but feel free to reopen if you experience the problem again.
This patch will resolved all the admin side issue when alignment is given.