Make WordPress Core

#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:

Description

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: https://share.cleanshot.com/XuFtIRCURbgfcSSNxf41

Thanks

Attachments (1)

56144.patch (548 bytes) - added by devtanbir 20 months ago.
Added patch

Download all attachments as: .zip

Change History (3)

#1 @sabernhardt
20 months 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 20 months ago by sabernhardt (previous) (diff)

@devtanbir
20 months ago

Added patch

#2 @sabernhardt
19 months 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.