WordPress.org

Make WordPress Core

Opened 4 weeks ago

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

Download all attachments as: .zip

Change History (18)

@poena
4 weeks ago

Vertical buttons, front

@poena
4 weeks ago

Vertical buttons, editor

#1 @poena
4 weeks ago

  • Version set to trunk

#2 @poena
4 weeks ago

  • Keywords needs-patch added

@poena
4 weeks ago

Remove display:block from the inner button block

@poena
4 weeks ago

With patch applied, editor

@poena
4 weeks ago

With patch applied, front

@poena
4 weeks ago

The correct front screenshot...

#3 @poena
4 weeks ago

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

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


4 weeks ago

#5 @paaljoachim
4 weeks 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 4 weeks ago by paaljoachim (previous) (diff)

@paaljoachim
4 weeks ago

Looking at buttons width in 2021

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


4 weeks ago

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


4 weeks ago

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


4 weeks ago

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