Button block has zero height in editor when using left or right alignment

[sabernhardt]

Description

The zero height intended for floated image blocks in "classic" themes also can apply to Button blocks and overlap content below it.

This was part of PR #30375:

gutenberg/packages/edit-post/src/classic.scss

Lines 44 to 45 in e3136a4

	// When images are floated, the block itself should collapse to zero height.
	height: 0;

Thanks to @NidhiDhandhukiya74 (nidhidhandhukiya) for reporting this on Trac 56300, as well as @KAJALwp (kajalgohel) on Trac 56144.

Step-by-step reproduction instructions

1. Activate Twenty Twenty-One or another classic theme.
2. Open the post editor and insert a Buttons block.
3. Add text to the Button link and assign a URL (or #).
4. Select the Button block and choose either "Align right" or "Align left" from Align option.
5. Add a Paragraph block below the Buttons, and type some text.
6. Notice that the Button block overlaps the paragraph text. If it is not obvious, you may want to set a background color to the button link.
7. Save and view the post. The overlapping probably will not occur on the front end.

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.0
• Gutenberg 13.8.0-rc.1
• Twenty Twenty-One (and all previously bundled themes)
• Firefox 103
• Windows 10

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

This is difficult because different themes uses different clears for alignments.

It is also difficult because if the intention is to place two different blocks horizontally you often need a row block (or a column or in case of data, a table), not an alignment. That complexity is not expected by users and the issue is valid.

[tellthemachines]

I'm going to go ahead and close this because Button no longer supports left/right alignment as of #45663.