Make WordPress Core

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: nidhidhandhukiya's profile nidhidhandhukiya 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 :-

  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 2 years ago.
This patch will resolved all the admin side issue when alignment is given.
57257.diff (3.0 KB) - added by naeemhaque 2 years ago.
Fixes Twenty Twenty theme button block issue when alignment and width both are used.

Download all attachments as: .zip

Change History (11)

@nidhidhandhukiya
2 years ago

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

#1 @costdev
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 @riccardodicurti
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: @costdev
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?

@naeemhaque
2 years ago

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

#4 in reply to: ↑ 3 @naeemhaque
2 years ago

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

Last edited 2 years ago by naeemhaque (previous) (diff)

#5 @poena
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 @poena
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-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>

#8 @karmatosed
10 months ago

@poena unless I am mistaken this isn't an issue anymore to be solved here. Can you confirm?

#9 @sabernhardt
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.

Note: See TracTickets for help on using tickets.