Left- or right-aligning block-level elements leads to unexpected behaviour

[sarahmonster]

Describe the bug
Left- or right-aligning images leads to a whole host of issues:

1. Left- and right-aligned images show the block toolbar above a (seemingly duplicated?) block inserter placeholder, whilst centre-aligned images show the toolbar closely attached to the block itself.
2. When right-aligning, the toolbar floats to the right. This feels sort of intentional, but doesn't track with centre-aligned images (where it stays to the left) or with text alignments, which makes it feel a bit jarring.
3. If you switch back and forth enough, eventually parts of the toolbar (the block switcher) just disappear entirely.
4. Try clicking out of the image and then clicking back in—instead of selecting the image block, you end up selecting the block before/after it.

This seems to happen with all block-level elements that I've tested so far.

To Reproduce
Steps to reproduce the behavior:

1. Create a new post and add an image block.
2. Switch its alignment around and see what happens.

Desktop (please complete the following information):

• OS: Mac, Firefox Nightly

[kjellr]

Here's a related bug:

1. Add a cover image
2. Set it to align to the left or right.
3. Click outside of the image.
4. Your cover image block disappears!

[kjellr]

Some of these are raised in #7500 too.

[sarahmonster]

This issue is a bit more pronounced in the mobile view, where the entire toolbar actually switches position upon changing the alignment:

https://www.dropbox.com/s/yojv1al9l1j27wg/float-issue.mov?dl=0

[cbirdsong]

This happens with more than just images:

[ZebulanStanphill]

@cbirdsong Isn't that technically the correct behavior? It is kind of annoying in some cases, but that is kind of how floats work. Of course, it would be ideal if you could make a block clear floats above it, but there has not been any solution decided upon to make that happen: #4127.

[cbirdsong]

@ZebulanStanphill It is, but I am not sure passing the confusing way CSS floats work along to the user is helpful, especially since there isn't (and shouldn't be) a clearfix block. This is all compounded by how difficult it can be to track down the right set of floating toolbar icons that control alignment, as mentioned in #7500 and other places.

[ZebulanStanphill]

@cbirdsong It is stuff like this that makes me think that perhaps Gutenberg should go the direction of #4314 and use CSS Grid as the default layout method, relegating float alignment to only being available in containers set to display: block, which could be done with some kind of container block with layout settings to switch between grid, flex, and block CSS layout modes... perhaps the Container block proposed in #4900.

[youknowriad]

Is this issue still relevant? I feel like we've done all what we can do to improve the floats (which are not a great thing in general but we can't afford to remove). cc @jasmussen

[jasmussen]

I would agree that we have made enormous strides in improving the situation here. I believe all the GIFs in this thread are addressed. For that reason, I'm closing it. But it's also easy to reopen, or create new specific tickets, if necessary.