WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 6 months ago

#52432 closed defect (bug) (fixed)

Twenty Twenty-One: Vertical buttons block has the wrong width

Reported by: poena Owned by: peterwilsoncc
Milestone: 5.7 Priority: normal
Severity: normal Version: 5.7
Component: Bundled Theme Keywords: has-patch commit
Focuses: css Cc:

Description

Vertical layout for the buttons block was added in 5.7 (Gutenberg 9.6).

When the buttons block is transformed to vertical,
the width of the inner button block is incorrect,
it is full width instead of adapting to the text length.

Steps to reproduce:
In the block editor, add a buttons block with more than one button.
Select the "Transform to variation" option in the block settings sidebar.
Select vertical.
See that the buttons are presented vertically but that the width of the button changes.
Save and view the front to confirm the issue.

Go back to the editor and try other block settings, save and view the front to confirm.
When a justification is set, the width of the block is reduced again and adapts to the text length.
If a width is set on the individual buttons, the setting is applied correctly.

No issues were found with the vertical buttons block in the other default themes.

Attachments (7)

tt1-vertical-button-front.png (28.0 KB) - added by poena 6 months ago.
Vertical buttons, front
tt1-vertical-button-editor.png (60.5 KB) - added by poena 6 months ago.
Vertical buttons, editor
52432.patch (6.2 KB) - added by poena 6 months ago.
Remove display:block from the inner button block
tt1-vertical-button-editor-after.png (60.8 KB) - added by poena 6 months ago.
With patch applied, editor
tt1-vertical-button-editor-after.2.png (60.8 KB) - added by poena 6 months ago.
With patch applied, front
tt1-vertical-button-front-after.png (28.2 KB) - added by poena 6 months ago.
The correct front screenshot…
2021-button-width.gif (647.8 KB) - added by paaljoachim 6 months ago.
Looking at buttons width in 2021

Download all attachments as: .zip

Change History (18)

@poena
6 months ago

Vertical buttons, front

@poena
6 months ago

Vertical buttons, editor

#1 @poena
6 months ago

  • Version set to trunk

#2 @poena
6 months ago

  • Keywords needs-patch added

@poena
6 months ago

Remove display:block from the inner button block

@poena
6 months ago

With patch applied, editor

@poena
6 months ago

With patch applied, front

@poena
6 months ago

The correct front screenshot...

#3 @poena
6 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


6 months ago

#5 @paaljoachim
6 months ago

Testing a local dev site in Chrome.
Twenty Twenty One.
WP 5.6.1
Gutenberg plugin: 9.8.4

The result. I did not at first click any alignment, but I noticed no change clicking the various alignments. Here is a gif.

Version 0, edited 6 months ago by paaljoachim (next)

@paaljoachim
6 months ago

Looking at buttons width in 2021

#6 @jeroenrotty
6 months ago

Tested the patch with @rolfsiebers and it all seems to work correctly, the width of all buttons are correct - alignments are working too and setting a custom width on a specific button works as expected too.

This ticket was mentioned in Slack in #core by francina. View the logs.


6 months ago

#8 @hellofromTonya
6 months ago

  • Keywords commit added; needs-testing removed

Removing needs-testing. Thank you everyone for testing.

This ticket was mentioned in Slack in #core-themes by hellofromtonya. View the logs.


6 months ago

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


6 months ago

#11 @peterwilsoncc
6 months ago

  • Owner set to peterwilsoncc
  • Resolution set to fixed
  • Status changed from new to closed

In 50261:

Twenty Twenty-One: Adapt vertical buttons to text length.

Display vertically aligned buttons as inline elements.

Props poena, paaljoachim, hellofromTonya, jeroenrotty, rolfsiebers.
Fixes #52432.

Note: See TracTickets for help on using tickets.