Gutenberg: Try lighter UI for the hover style

[jasmussen]

Blocks should be draggable & rearrangable without having to click into it. But the UI has been noted to feel heavy. Let's try a lighter UI in a separate version of the UI prototype:

In this UI, mousing over the block shows the left border, as well as rearrangement controls.

The border on the left also indicates a draggable area, that invisibly extends a fair bit to the left of the border. This is only surfaced when you mouse over, as it's a desktop enhancement. So the invisible area should have a grabby hand cursor:

    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;

[jasmussen]

See also #38

[jasmussen]

Here's a quick animatic showing how the hover-only block style looks, and what happens when you click:

[jasmussen]

Incidentally, here's an _idea_ for adding a draggable area:

Basically we're using the empty area below the selector to show a draggable area, but only when the cursor reaches that left rail. It's accepting that it's a desktop-only interaction, and thus being hidden until the mouse is in that area. Thoughts welcome.

[karmatosed]

Thanks for the animation, it really helps seeing.

One thing that makes me wonder is the icon you're using for the 'grab' area. It doesn't strike me as one people may expect - I could be wrong. I did a quick search of icons for drag and drop and here are some suggestions:

It makes me wonder if rather than having the mouse cursor change - could we include a human icon (hand) from the start?

[jasmussen]

One thing that makes me wonder is the icon you're using for the 'grab' area. It doesn't strike me as one people may expect - I could be wrong. I did a quick search of icons for drag and drop and here are some suggestions

Definitely something to test.

The grab cursor feels to me like the one that's been used in desktop apps (e.g. sort layers in Photoshop), and the move cursor feels like it's been used simply because drag wasn't supported until recently. This shouldn't necessarily dictate we use one over the other, but it's the reason why I defaulted to the grabby hand.

[melchoyce]

What's the reasoning behind adding an explicit icon for drag, versus making the edges and a bit beyond the block all draggable?

[jasmussen]

What's the reasoning behind adding an explicit icon for drag, versus making the edges and a bit beyond the block all draggable?

Gut feeling at this point. Definitely not married to it. Would love to feel in the prototype if it works without the icon.

[karmatosed]

Feels like something we could fairly easily test :)

[ellatrix]

Blocks should be draggable & rearrangable without having to click into it.

Why should it be even more prominent? Will it really be used _that_ much?

[jasmussen]

Why should it be even more prominent? Will it really be used that much?

It might not be necessary with an overt "drag item" affordance. Perhaps the cursor is sufficent, like @melchoyce suggested:

[jasmussen]

Closing this for now, as prototypes seem to have implemented the lighter UI generally. Drag and drop is still being discussed in #38