Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#56144 closed defect (bug) (reported-upstream)

Twenty Nineteen: overlap in Button block

Reported by: kajalgohel's profile kajalgohel Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.9
Component: Bundled Theme Keywords:
Focuses: ui, css Cc:


In Twenty Nineteen Theme, when we add Button block in editor side and change alignment as "Align left" or "Align right". After that we add paragraph block or any other block then we can see that the Button block is overlapping with the newly added block.

Steps to replicate:
1: Activate the Twenty Nineteen Theme
2: Add Button block
3: Choose "Align right" or "Align left" from Align option
4: Add paragraph Block
5: View the page/post at editor side

For better understanding I provide video attachment link.

Video link:


Attachments (1)

56144.patch (548 bytes) - added by devtanbir 2 years ago.
Added patch

Download all attachments as: .zip

Change History (3)

#1 @sabernhardt
2 years ago

  • Version changed from 6.0 to 5.9

The overlap in the editor can be fixed by overriding height: 0 on those blocks with something like this:

.wp-block-buttons [data-align="left"],
.wp-block-buttons [data-align="right"] {
  height: auto;

On the other hand, those alignment settings added in 5.9 are not (very) valuable. The float property for left and right alignment has no effect on the front end when the Buttons group is set to flex. To align these, choosing one of the Justify options on the Buttons container block would be better.

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

2 years ago

Added patch

#2 @sabernhardt
2 years ago

  • Keywords needs-patch removed
  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

Thanks for the report and the patch!

As noted on #56300, this should be fixed in the editor instead of the themes. This can happen with probably any "classic" theme.

If you would like to add to the discussion and/or submit a pull request, please follow Gutenberg issue 42790.

Note: See TracTickets for help on using tickets.