Unifying drag n drop, "move to" and clipboard (copy/cut/paste)

[ellatrix]

These are all actions that we currently have for the same thing, even though they "feel" a bit different.

• Drag and drop: The block disappears and it now sort of sticks to your cursor. Beware! Don't lift your your finger or it will be dropped wherever you are now. You better don't cramp when you need to move it far.
• "Move to" button: I only recently discovered this, and it's pretty cool, but also a bit fragile and limited. Your block will stay where it is, and an indicator will appear. You can only move the indicator with the arrow keys. Enter moves the block to the indicator position. The problem is that it's hard to keep track of what you're moving and that you can only interact with the keyboard.
• Clipboard (copy/cut/paste): With cut, the block will disappear and be moved to the invisible clipboard. You can duplicate with copy. The transfer data is universal, so you can move the data out of Gutenberg!

How could we combine all these experience into one?

• A clipboard is a great concept. It creates a sort of transition area for blocks to be stored until moved elsewhere. It would be better if the clipboard had a visual interface.
• Universal (clipboard) transfer data is great. It allows you to move data out of Gutenberg. What if we use this as a base to move data around in Gutenberg as well?
• Keyboard navigation is a must.
• We need a robust visual experience to easily move block(s) around through point and click.

Here's what I could imagine:

1. You drag blocks(s) with the drag handle and drop them into the desired place. This action remains available.
2. You click the drag handle, or navigate to it and press Enter or Space, or simply press Cmd+X or Cmd+C.¹ The blocks(s) move to a visual dismissible clipboard (and to the internal clipboard). Now you can either:
   • Move the pointer around like you would to insert a block, but this time you'll have the option to insert the blocks in your clipboard.
   • Focus will have moved to the in-between inserter where the block was. The arrow keys will navigate you around the block list and you'll have able to insert the blocks with keyboard only just like above.
   • You can move away from Gutenberg completely and use the blocks somewhere else. You can dismiss the clipboard when you return to Gutenberg or still use it within Gutenberg.

This idea would replace the "move to" button and enhance both the drag and drop and clipboard (copy/cut/paste) experiences.

Cc @jasmussen @mtias @mcsf as you all feel very passionate about this.

---

¹ I usually copy and then delete instead of using the cut shortcut...

[kevin940726]

Yes, I do think these actions behave similarly and should have the same underlying API 👍 . One thing I want to add is that currently we're only adding the custom wp-blocks type to the dataTransfer in drag-and-drop. We can instead also add text/html to allow dragging the blocks to other apps as well. Note that it's also recommended to add text/plain as a fallback for most blocks. Another thing is that we should consider splitting moveBlocksToPosition into two steps (removeBlocks then insertBlocks) to allow dragging blocks from other windows too (#42722 (comment)).