Improving drag and drop blocks

[thanasakleas]

Hello people!

When I try to re-arrange a block in Gutenberg by dragging it, there’s a very thin blue line that shows me where I can release it.

I think that we'd have a better user experience with less mistakes, if we could increase the height of the dropping area.

Here’s what I’m talking about

And here’s a good example

Any thoughts?

[chrisvanpatten]

@thanasakleas I agree this can be finicky, however it has been improved recently in the plugin version of Gutenberg (which will be merged in with WordPress 5.4).

I'd recommend checking it out on the Gutenberg test site here: https://wordpress.org/gutenberg/

I think the experience is a lot better, and if you have other specific ideas from there perhaps you can share here too? Otherwise, if the behavior seems better to you we can close this ticket.

Thanks!

[thanasakleas]

Hi @chrisvanpatten and thanks for replying back to me!

Regarding the drag and drop betwen blocks, I see the same thing, a very thin blue line between drops.

Am I missing something?

[karmatosed]

Thanks for exploring this idea and creating an issue @thanasakleas. I am going to loop in @jasmussen because I know movers has been explored a lot recently and there might be some great alingment here.

[thanasakleas]

Hi @chrisvanpatten & @karmatosed

I can see that the interactions are very improved on the new version, it's way smoother!
I think it would be even better if there was a small animation on the blue line indicator (when you drop a block) and its height got increased by 5 or 10 pixels.

[jasmussen]

Hi @thanasakleas! Thanks so much for your input here. I very much agree the drag and drop could be improved, this is in part the reason for the improvements you've seen in the plugin. Additional improvements are due to land in #19344 where the line gets a slight rounding and becomes 4px instead of 3. You can try that PR here: http://gutenberg.run/19344

I can see that the interactions are very improved on the new version, it's way smoother!
I think it would be even better if there was a small animation on the blue line indicator (when you drop a block) and its height got increased by 5 or 10 pixels.

This is an interesting idea! I'm wondering about the precise behavior, though — when you drop a block the blue line is immediately removed. And when the blue line shows up, that means if you release the mouse, that's where the block will land. Is there a particular spot in the interaction where it is helpful that the line grows thicker?

[thanasakleas]

Hi @jasmussen! It's indeed better with that slight rounding and the 4px height.

What I'm proposing is for the moment you grab and dragging your block above the places you want to drop it. In that moment, before you drop it, this blue line could have an increase in its height of another, say, 3-4px. That small animation improves the visibility of the dropping area.

(BTW, on that link that you've posted, I see that the drag handle is missing)

[jasmussen]

In that moment, before you drop it, this blue line could have an increase in its height of another, say, 3-4px

Ah yes, that could be cool! It would need the just right implementation and animation but could look nice. We'd probably want to make sure the thickness of the line does not cover content. I'd put this in the "nice to have" fit and finish things, which anyone should feel free to create a PR for!

(BTW, on that link that you've posted, I see that the drag handle is missing)

This is intentional in that it combines the mover control with the drag handle — click and drag the mover control to move a block around. The idea is that drag and drop is additive to explicit click handles, and the reduced UI benefits from the combination of the three icons into two.

Added to that is also an idea being discussed that if you choose the selection tool in the toolbar, you can drag any block using the entire hit area of the block, just like you would in Figma or Illustrator.

However both are ideas and works in progress, and you should feel free to join the conversation in the ticket, #18667 and share your perspective!

[chrisvanpatten]

In that moment, before you drop it, this blue line could have an increase in its height of another, say, 3-4px

Ah yes, that could be cool! It would need the just right implementation and animation but could look nice. We'd probably want to make sure the thickness of the line does not cover content. I'd put this in the "nice to have" fit and finish things, which anyone should feel free to create a PR for!

I agree this could be nice, as it would make the 'vertical drop' area a bit taller, so you would know you don't have to be so precise.

[jasmussen]

I believe the drop target size will be the same, effectively, because as soon as the blue line shows up, it means you can release the mouse and it'll land in the spot of the blue line.

[thanasakleas]

I believe the drop target size will be the same, effectively, because as soon as the blue line shows up, it means you can release the mouse and it'll land in the spot of the blue line.

Agreed, it’s not going to practically change the drop area, but I think it might help with the overall understanding of the feature.

[jasmussen]

Since this ticket was opened, a number of things have happened:

• A toolbar redesign that unifies the mover control
• Blocks being moved collapse into a chip for easier overview
• Scrolling the viewport while dragging
• Drag and drop from the block inserter

GIF:

While there are still aspects of drag and drop that could be improved, I believe the primary issues outlined in this ticket have been addressed, so closing it as such! Thanks!