Keyboard shortcuts support

[jasmussen]

For accessibility and power-users both, we should always think about keyboard support. This was first brought up in #61, but deserves being fleshed out more.

The editor already has keyboard support for most formatting controls, including the "Paragraph" type switcher, which we are pondering moving to the side. Though since this will likely expand a fair bit beyond paragraphs, headings and preformatted, maybe that needs love too.

Many of these are existing keyboard shortcuts that should probably stay intact for back compat.

Inline formatting:

• Bold ⌘B
• Italic ⌘I
• Link/edit link ⌘K (or paste around selected text) Being handled in Add remaining editable shortcuts #4411.
• Unlink ^⌥S Being handled in Add remaining editable shortcuts #4411.
• Strikethrough ^⌥D Being handled in Add remaining editable shortcuts #4411.
• Change heading size ^⌥↑ for increase, ^⌥↓ for decrease See Keyboard shortcuts support #71 (comment).

Hidden (?) controls:

• Undo ⌘Z
• Redo ⌘Y
• Cut ⌘X
• Copy ⌘C
• Paste ⌘V
• Select All ⌘A See Expand selection on consecutive ⌘A commands #4369 now.
• Keyboard shortcuts cheat sheet — currently ^⌥H, should it instead/also be Shift ?
• Underline ⌘U
• Code ^⌥X Being handled in Add remaining editable shortcuts #4411.
• Align center ^⌥C
• Align left ^⌥L
• Align right ^⌥R
• Justify ^⌥J
• Bullets ^⌥U
• Ordered list ^⌥O
• Remove link ^⌥S Being handled in Add remaining editable shortcuts #4411.
• ⌘+ENTER (Ctrl+Enter for Windows) to create a separator

Markdown-esque shortcuts/syntactic sugar:

• Code: wrap text in backticks, `
• Bullets: * or - on newline
• Ordered list: 1. or 1) on newline
• Blockquote: > on newline
• H2-H6: ## - ###### on newline
• Horizontal line: --- on newline

Insertion/block level controls:

• Insert block: ^⌥M (for fallback) and / on newline (see / on a newline should open the insertion dialog #24)
• Move block up ^⌥↑
• Move block down ^⌥↓
• Open block type switcher ⌘~ then ↑/↓ and Enter for select
• Toggle between block types ~

Inserter:

• Invoked where the cursor is, by typing / on newline or pressing ^⌥M, then ↑/↓ and Enter for select

[jasmussen]

These two:

• Open block type switcher ⌘~ then ↑/↓ and Enter for select
• Toggle between block types ~

probably need the most discussion, as getting these right can potentially make for a killer feeling while writing.

Imagine this: type type type, churn out a blogpost, / on a newline, arrow down to image, enter, pick image with arrowkeys, enter to insert, write another line, press ~ twice to instantly switch it through heading and then to blockquote. Done.

In this situation, simply pressing ~ while inside a block switches it to the next compatible blocktype, so a paragraph would cycle over heading then to quote, whereas a gallery might cycle between gallery types. ⌘~ would actually open the switcher list so you could see the compatible blocktypes and pick one using arrowkeys.

Quip has this shortcut, worth trying out. But they use backtick `, which we are using in a markdown-esque way for code.

Important also to think of international keyboards. On US keyboards, the ~ character is in the top left, which makes it a sweet deal, easily accessible, whereas euro keyboards put the tilde under ⌥^, which is a fair bit more cumbersome. Any other ideas?

[jasmussen]

This one also deserves lots of thought:

• Change heading size ^⌥↑ for increase, ^⌥↓ for decrease

For context, these shortcuts assume that a "Heading" is a single block type, and the heading size is a block-level property of that style. Mockup:

👆 Note, that mockup has a different style of block level controls than the UI prototype currently has.

So the flow would be:

• write text
• press ~ to switch to next compatible block type, i.e. Heading — this would convert the paragraph to a h1 (or h2?)
• press ^⌥↓ to convert the h1 to a h2

[afercia]

Worth reminding some of these keys are not available on all the keyboard layout, for example ~.

[ellatrix]

I can look into part of this together with the other text shortcuts, and where it touches Editable.

[paaljoachim]

I think it would be nice to include keyboard shortcuts for the most used blocks. As it would be a quicker way to add the blocks one use over and over again. Perhaps even have a mention of the shortcut beside the most used blocks similar to various program list shortcuts.

[jwold]

I've been thinking about the benefits of being able to write an article completely from the keyboard, without using a mouse. This has serious benefits for accessibility as well as for staying in the flow (kind of like when using Markdown and you can just keep writing while adding in quick formatting)

The ideal flow here could go like:

• Start typing a few paragraphs
• Type shortcut to open picker
• Start typing “qu…” and have the quote block pop into view on the inserter and be highlighted as the number one result (Typing when the inserter menu has focus should start searching the blocks #1064)
• Press return/enter on the keyboard and have the block insert into the editor
• Write your quote
• Press tab
• Write your citation
• Press enter twice
• Continue typing

[jasmussen]

Love those thoughts, @jwold, so much so that it was planned for a long time to use /, like Slack and IRC, to invoke a searchable block selector dialog. See #323 (comment) for full mockups.

This is a feature I'd like to resurface, but we've punted for now as it isn't critical to V1.

[jwold]

Awesome! Would love to have this revisited in the future. Agreed that it isn't needed for a V1 launch though.

[markjaquith]

Related: #5805

[afercia]

@jasmussen looking at this during today's a11y bug-scrub: do you want to keep it open as a tracker for all the other related, specific, issues or close it?

[jasmussen]

Definitely close, as I believe we have most in, thanks. If things are missing let's open specific issues for sure. Thanks for the ping! 🍷

[afercia]

Ok thanks!

[abrightclearweb]

Here is a list of the Classic Editor keyboard shortcuts for Mac with a note of which ones work in Gutenberg

Default shortcuts, Cmd + letter:

Letter	Action	Works?	Letter	Action	Works?
u	Underline	yes	b	Bold	yes
i	Italic	yes	x	Cut	yes
c	Copy	yes	v	Paste	yes
a	Select all	yes*	z	Undo	yes
y	Redo	yes

* Press once to select a block. Press twice to select all blocks.

Additional shortcuts, Ctrl + Alt + letter:

Letter	Action	Works?	Letter	Action	Works?
1	Heading 1	no	2	Heading 2	no
3	Heading 3	no	4	Heading 4	no
5	Heading 5	no	6	Heading 6	no
7	Paragraph	no	q	Blockquote	no
d	Strikethrough	yes	x	Code	yes
c	Align center	no	r	Align right	no
l	Align left	no	j	Justify	no
u	Bulleted list	no	o	Numbered list	no
m	Insert/edit image	no	s	Remove link	yes
z	Toolbar Toggle	no	t	Insert Read More tag	no
p	Insert Page Break tag	no	w	Distraction-free writing mode	no
h	Keyboard Shortcuts	no

When starting a new paragraph with one of these formatting shortcuts followed by a space, the formatting will be applied automatically. Press Backspace or Escape to undo.

		Works?			Works?
*	Bulleted list	yes	1.	Numbered list	yes
-	Bulleted list	yes	1)	Numbered list	yes

The following formatting shortcuts are replaced when pressing Enter. Press Escape or the Undo button to undo.

		Works?
>	Blockquote	yes *
##	Heading 2	yes *
###	Heading 3	yes *
####	Heading 4	yes *
#####	Heading 5	yes *
######	Heading 6	yes *
---	Horizontal line	yes

* Must add a space after the characters

Focus shortcuts:

		Works?
Alt + F8	Inline toolbar (when an image, link or preview is selected)	no
Alt + F9	Editor menu (when enabled)	no
Alt + F10	Editor toolbar	Brings up Sound dialog
Alt + F11	Elements path	Brings up Sound dialog

To move focus to other buttons use Tab or the arrow keys. To return focus to the editor press Escape or use one of the buttons.

[abrightclearweb]

Here is a list of the Classic Editor keyboard shortcuts for Windows with a note of which ones work in Gutenberg

Default shortcuts, Ctrl + letter:

Letter	Action	Works?	Letter	Action	Works?
u	Underline	yes	b	Bold	yes
i	Italic	yes	x	Cut	yes
c	Copy	yes	v	Paste	yes
a	Select all	yes	z	Undo	yes
y	Redo	yes

Additional shortcuts, Shift + Alt + letter:

Letter	Action	Works?	Letter	Action	Works?
1	Heading 1	no	2	Heading 2	no
3	Heading 3	no	4	Heading 4	no
5	Heading 5	no	6	Heading 6	no
7	Paragraph	no	q	Blockquote	no
d	Strikethrough	yes	x	Code	yes
c	Align center	no	r	Align right	no
l	Align left	no	j	Justify	no
u	Bulleted list	no	o	Numbered list	no
m	Insert/edit image	no	s	Remove link	yes
z	Toolbar Toggle	no	t	Insert Read More tag	no
p	Insert Page Break tag	no	w	Distraction-free writing mode	no
h	Keyboard Shortcuts	no

When starting a new paragraph with one of these formatting shortcuts followed by a space, the formatting will be applied automatically. Press Backspace or Escape to undo.

		Works?			Works?
*	Bulleted list	yes	1.	Numbered list	yes
-	Bulleted list	yes	1)	Numbered list	yes

The following formatting shortcuts are replaced when pressing Enter. Press Escape or the Undo button to undo.

		Works?
>	Blockquote	yes *
##	Heading 2	yes *
###	Heading 3	yes *
####	Heading 4	yes *
#####	Heading 5	yes *
######	Heading 6	yes *
---	Horizontal line	yes

* Must add a space after the characters

Focus shortcuts:

		Works?
Alt + F8	Inline toolbar (when an image, link or preview is selected)	no
Alt + F9	Editor menu (when enabled)	no
Alt + F10	Editor toolbar	Triggers change block type
Alt + F11	Elements path	no

To move focus to other buttons use Tab or the arrow keys. To return focus to the editor press Escape or use one of the buttons.

[abrightclearweb]

Just a note that the Additional shortcuts listed above

• Ctrl + Alt + letter (Mac) or
• Shift + Alt + letter (Windows)

will still work in the Classic block.

[bph]

Great work @abrightclearweb on listing all the things that work and don't work. I counted and there are still 23 shortcuts not working with Gutenberg. For power users that's a big hick-up in their work flows.

@karmatosed @jasmussen Is there ambition to be have feature parity between classic editor and Gutenberg or is that part of the user testing, and you are waiting for feedback to decide which ones make it into Gutenberg?

[jasmussen]

For the features that exist in Gutenberg that have counterparts in the classic editor, we absolutely want to make sure the shortcut keys are added. I imagine we'll ultimately end up with more keyboard shortcuts than the old editor, as there are a lot of new features. See also #8316 and #8279.

I imagine there are also features or flows in the classic editor that are different in Gutenberg and therefore might not make sense to port over. Not that I can think of an example right now.

[CalumChilds]

Can't you just keep the same shortcuts where possible?

[fr-laurentn]

Hello,

I noticed that the CTRL+Y shortcut used to redo an action seems to be broken (only Ctrl+Shift+Z is working). Should I open a new ticket for that?

Or is it OK to address that issue here? (I'm quite new here)

Thanks,

[talldan]

@fr-laurentn I noticed in the codebase this seems to have been done on purpose, some details in the comment above it.

gutenberg/packages/editor/src/components/rich-text/index.js

Line 170 in 0a21147

this.editor.shortcuts.remove( 'meta+y', '', 'Redo' );

[afercia]

this.editor.shortcuts.remove( 'meta+y', '', 'Redo' );

Seeing this now, I'm not fully convinced;

• users are used to meta+y in addition to meta+shift+z
• on Windows, Ctrl+y is standard, while Ctrl+Shift+z doesn't make much sense
• in the classic block in Gutenberg (and in the classic editor) meta+y still works and there should be consistency across all the blocks

[fr-laurentn]

@talldan Thanks for your digging. It seems that this is not a bug.

I agree with @afercia CTRL+Y is standard to Windows users.

Should I open a new ticket?

[talldan]

@fr-laurentn a new issue would be good. Not sure that we'd want to reintroduce meta+y for Mac or Linux, but that can be open for debate on the new issue.

[fr-laurentn]

@talldan FYI here's the new issue I created: #8921

[iamkingsleyf]

still does not work