Gutenberg: Add a "Move To" action to blocks

[mtias]

Right now it's possible to drag blocks to relocate them and move them in and outside of nested block areas. However, that interaction is only possible with drag and drop and there should be a way to do it through other means.

I think a simple one to start would be a "move to..." action in the ellipsis menu of the block (next to Duplicate) that would lift the block and turn the cursor into the "drop area" (the blue line) so you can move / pick where you want to drop a block:

Also related: #21960.

[mtias]

Probably should have a shortcut as well.

[strarsis]

And an action for moving the block in and out of parent blocks (similar to list indentation).

[tellthemachines]

a "move to..." action in the ellipsis menu of the block (next to Duplicate) that would lift the block and turn the cursor into the "drop area" (the blue line) so you can move / pick where you want to drop a block

What might the keyboard interaction with this look like? I'm thinking we don't yet have a good pattern for keyboard-navigating nested blocks. This seems a related problem to #20732 and it would be good to have a consistent overall solution.

Stepping through a possible way of solving this:

• I click on "Move to";
• the block I'm currently on gets a "drop area" highlight;
• I can now use tab or arrows to navigate blocks, similarly to select mode;
• Tab, Up arrow and Down arrow can move between same-level blocks; Right arrow can move down into the next nesting level, and Left arrow can move up out of the current nesting level;
• once I've navigated to the place I want to drop the block in, pressing Enter concludes the operation;
• if I decide not to move the block at all, pressing Escape takes me back to wherever I was before.

Does that make sense?

Potential problems:

• Escape and Enter have a different meaning in edit/select mode
• Left/Right arrow pattern might not make sense in a RTL context

[tellthemachines]

I just created a draft PR #22453 based on the solution outlined in my comment above.

[mtias]

@tellthemachines should we close this one?

[tellthemachines]

Yup, it's been implemented. Closing!

[mtias]

Thanks!

[RyanBrackett]

I like the "Move to" functionality. Makes a lot of sense.
I do, however, miss the simplicity of dragging blocks where I need them to be.
I find that I can be more creative when prototyping a page when I can drag photos and text around.

Could there be both options -- to drag a block -and- to "Move to"?

Thanks,
RB

[ZebulanStanphill]

@RyanBrackett Drag-and-drop was never removed, though I don't blame you for thinking that, since the drag handle is invisible in WP 5.5. (The up/down buttons double as a drag handle, though this is not obvious.) This design problem has been addressed in #24852, and the change should make it into the next major WP release (5.6), or maybe even sooner if it ends up getting backported into a minor release.

[RyanBrackett]

@ZebulanStanphill Oh good! I didn't know you could drag blocks via the arrows. I'll have to try that. Thank you!

I LOVED the UI of the previous version of Gutenberg. It was very soft on the eyes. The new UI feels super crisp and a bit sterile... maybe a little dry or washed out. I miss the lower contrast UI. Really wish I could pick a theme for Gutenberg. :)