Blocks: Movers on left floated content overlapping next elements controls

[gziolo]

Issue Overview

Movers on left floated content overlapping next elements controls.

Steps to Reproduce (for bugs)

1. Add an image.
2. Set align left property on the image.
3. Add any other block with text.
4. Try to move the 2nd block up.
5. It's not possible because movers from the image take precedence.

Browser: Chrome.
System: macOS.

Expected Behavior

It's possible to move the block added after the floated image.

Current Behavior

It's not possible to move the block added after the floated image because movers from the image take precedence.

Screenshots / Video

/cc @jasmussen

[mikeyarce]

Came to report the same thing:

I would add that I did not expect blocks to be able to be overlapping. Its nice because I would actually like to have an image and text beside it, but the controls aren't easily usable.

If you align the image to the right, the menu is then hidden from one of the blocks:

[jasmussen]

Really really good bug report.

The big issue here is that side controls appear on hover. When those controls stack, you can't decide which layer of controls you want to deal with.

One hacky fix could be making sure that whenever a block is floated, the hover controls can only appear if the block has first been selected. But I'm not sure this would fix it — the non-floated quote block would then stack below. Hmmm. Any ideas here, @youknowriad? Can we make it so the floated image block prevents any other block than itself to be "hovered"? I.e. you can't hover the text block "through" the image block?

Another option is to rethink how the controls work generally on floated (or future nested blocks, for that matter). I just posted some mockups in #428 (comment). The idea, applied to this issue, would be that any floated block would get the inline, "mobile UI". That way you could still use the controls on the image because they wouldn't stack.

A plan B would be to simply only allow those side controls to appear if you've first selected a block.

[youknowriad]

Any ideas here, @youknowriad? Can we make it so the floated image block prevents any other block than itself to be "hovered"? I.e. you can't hover the text block "through" the image block?

I tried playing with pointer-events and such but couldn't make it work properly :(. The plan B/C should be tried I think. But I think no matter what we do we'll always have a similar issue. The mobile controls of a floated/non-floated block can still overlap

[jasmussen]

The mobile controls of a floated/non-floated block can still overlap

Not if we go with the mobile controls that appear onselect and below the block surely?

[youknowriad]

below the block surely

This is not sufficient on its own but yes if they appear only on select then yes the can't overlap

[jasmussen]

This issue appears to have been fixed with the recent floats refactor:

The issue with the right-aligned toolbar will be fixed when #5212 is merged.

Noting that the side-UI for floated items still isn't ideal, the movers for floated blocks should perhaps be optimized, the buttons nonetheless work now as expected.

[gziolo]

Thanks for fixing 🌟