WordPress.org

Make WordPress Core

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

Download all attachments as: .zip

Change History (18)

@poena
12 months ago

Vertical buttons, front

@poena
12 months ago

Vertical buttons, editor

#1 @poena
12 months ago

  • Version set to trunk

#2 @poena
12 months ago

  • Keywords needs-patch added

@poena
12 months ago

Remove display:block from the inner button block

@poena
12 months ago

With patch applied, editor

@poena
12 months ago

With patch applied, front

@poena
12 months ago

The correct front screenshot...

#3 @poena
12 months ago

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

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


12 months ago

#5 @paaljoachim
12 months ago

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

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

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

@paaljoachim
12 months ago

Looking at buttons width in 2021

#6 @jeroenrotty
12 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.


12 months ago

#8 @hellofromTonya
12 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.


12 months ago

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


12 months ago

#11 @peterwilsoncc
12 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.