While moving a block: Show border and block name of hovered blocks

[mariohamann]

Problem

While moving a block, it is quite difficult to insert the block at the right position. In fact, sometimes it is impossible to know whether e. g. you are going to insert the block into a group or above/below the group.

Solution

It would help a lot to see all borders of the hovered block and its inner blocks, highlighting and naming the block where the moved block will be inserted.

Here is just a quick ugly draft. I think it would be nicer to use dashed lines for the non selected block.

[talldan]

cc @paaljoachim who made #20955 along the same lines.

I actually throw some code together that does this, but the issue I found is that our 'drop zones' actually sit outside of our block borders when dragging to the first or last position. The implementation was also a lot more complex than I'd anticipated. I just recorded this demo of the branch:

So I think a good first step would be refining how the drop zones and borders are shown.

[mariohamann]

Great to see that there is already some progress! In fact, your description of the positions of the drop zones sounds "interesting", it explains the feeling I sometimes had and it seems to be important to be faced soon. :)

I would just like to highlight, that naming of block/drop zones - as described above - would be very helpful, too. But one step after another... :)

[ZebulanStanphill]

This is a great idea. I've seen some page builder plugins do this, and I feel silly for not suggesting something like this earlier.

[paaljoachim]

I just did a new test and it is still difficult to see when dragging a block in and out of for example the Group block.

I will ping @mapk and @jasmussen so we get some additional feedback on the path forward.

[jasmussen]

I know that @jameskoster has explored some additional boundaries lately, and they can help, certainly in situations like these. One way to test this is to implement it first for the site editor, and get a feel for it.

I would, however, exclude the text overlay/block name. It doesn't really add a ton of value, but comes with the same problems that made us revert the breadcrumb interface we tried in the first place, way back — overlap and covering potentially important UI.

[jameskoster]

Thanks for the ping @jasmussen. I agree that the use case here feels very similar to what I explored in #27780. There does seem to be a few situations in which highlighting the boundaries of a container block would be beneficial.

One way to test this is to implement it first for the site editor

I'd welcome any updates to the PR above, to explore using the same visual treatment for the use case presented in this issue.