Twenty Nineteen: overlap in Button block

[kajalgohel]

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

[sabernhardt]

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.

[devtanbir]

Added patch

[sabernhardt]

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.