Gutenberg: 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 https://github.com/WordPress/gutenberg/issues/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.