Try: Keyboard shortcuts to move blocks on post/page

[iamthomasbishop]

Context

At the moment, the only way to move blocks on the canvas is to tap the mover buttons (typically shown as up/down arrows) on the Inline Toolbar. This is convenient while using a touchscreen, but not as much if you would like to mostly use the keyboard.

So when I’m editing a post or page while using an external keyboard (mostly on tablet, which I do often with the apps 😀), I often find it would be useful to have a set of keyboard shortcuts to move blocks around on the canvas.

Behavior

If you were to perform one of the shortcuts — “move up”, for example — the block would move upward one place on the canvas, and so on if repeated.

We could also allow the user to move the block to the start/end of the post/page (if it’s not a child in a nested group) or its parent.

(Note: These keyboard shortcuts would only be available when you have a block selected, just as the movers are.)

Options

Considering most of the modifiers (cmd, ctrl, opt, etc) with arrows are commonly used, we should probably avoid single-modifier shortcuts. I’m open to any suggestions provided they don’t conflict with other common keyboard shortcuts. Here are some initial options:

Moving by 1 position

• Cmd + Option + ↕️/↔️
• Ctrl + Option + ↕️/↔️
• Ctrl + Cmd + ↕️/↔️

Personally, the first option would feel most intuitive to me because the option modifier + arrow shortcut is typically used in text-editing applications to move the cursor to the start/end of a paragraph.

Moving to top/bottom of document (or innerBlocks group)

Alternatively, the user could move the block to the start or end of the post (or if it’s a nested block, to the beginning of that innerBlocks list) with a similar shortcut. For example, if we were to use Cmd + Option + arrows for single-block moving, we could use Ctrl + Option + arrows for moving to start/end of the group that it’s in.

// cc @maxme @hypest

[maxme]

Personally, the first option would feel most intuitive to me because the option modifier + arrow shortcut is typically used in text-editing applications to move the cursor to the start/end of a paragraph.

There are some Cmd + Option + ↕️/↔️ seems the most natural considering there are existing shortcuts to create new block before/after the selected one and they use Cmd + Option as modifiers.

I think we should discuss this on wordpress/gutenberg first.