Hover drag

[mimo84]

@iseulde @intronic :
This PR builds on (contains) the #248
and should be reviewed after that one is merged.

This adds the hover outline and drag-and-drop of hovered blocks.

[intronic]

A working version is here https://mimo84.github.io/gutenberg/tinymce-single/

[jasmussen]

Nice! Looks good!

Can you make it so only the left border shows on hover, like the mockups?

Drag and drop looks good, looks like the mockups:

Nice work! 👏

[ellatrix]

Merged with some performance tweaks. There was also a regression where you could move the block without using the outline.

[ellatrix]

The only thing left here is to add the arrows (though for a UX review we can use https://wordpress.github.io/gutenberg/tinymce-per-block/).
Another interesting thing would be visual feedback for a drop area instead of a cursor.

[jasmussen]

Another interesting thing would be visual feedback for a drop area instead of a cursor.

I suspect we'll fine-tune the drag/drop area a lot as we enter the feature plugin phase. But in the following mockup, I imagine the drop area is the one that's highlighted with the light gray color:

https://github.com/WordPress/gutenberg/blob/master/mockups/Drag%20and%20drop.png

That is — in that mockup if you release where the cursor is right at that point, the gray area is where the block will land.

[ellatrix]

That works too. I was imagining a blue line or something similar between the blocks as you move around. A grey box works to, though I wonder if it wouldn't be too disorienting when all the blocks reflow when moving around.

[jasmussen]

I was imagining a blue line or something similar between the blocks as you move around

That works too! The benefit of that would be for the length of the page to not be flip-flopping around.

The purpose of these prototypes are to explore ideas and test them as a baseline, and then ditch what doesn't work and keep what works.

[jasmussen]

I'm going to close this for now, as the prototypes have been deemphasized for now.