Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#52432 closed defect (bug) (fixed)

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

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

Download all attachments as: .zip

Change History (18)

@poena
3 years ago

Vertical buttons, front

@poena
3 years ago

Vertical buttons, editor

#1 @poena
3 years ago

  • Version set to trunk

#2 @poena
3 years ago

  • Keywords needs-patch added

@poena
3 years ago

Remove display:block from the inner button block

@poena
3 years ago

With patch applied, editor

@poena
3 years ago

With patch applied, front

@poena
3 years ago

The correct front screenshot...

#3 @poena
3 years ago

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

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


3 years ago

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

@paaljoachim
3 years ago

Looking at buttons width in 2021

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


3 years ago

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


3 years ago

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


3 years ago

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