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: |
|
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 :-
- 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 (9)
#1
@
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
@
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:
↓ 4
@
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?
@
12 months ago
Fixes Twenty Twenty theme button block issue when alignment and width both are used.
#4
in reply to:
↑ 3
@
12 months ago
@costdev @riccardodicurti I've added a patch. And it's working perfectly.
Thank You.
#5
@
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
@
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-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
@
10 months ago
Duplicate issue: https://github.com/WordPress/gutenberg/issues/39937
This patch will resolved all the admin side issue when alignment is given.