Post Editor Keyboard Shortcut Audit

[jeryj]

I tested all the keyboard shortcuts offered in the post editor. There's a lot here. The main things are:

• The commands mostly all work well in all browsers on a mac. 👏
• There's a lack of test coverage for the keyboard shortcuts
• There are a lot of inconsistencies in how ⌘ ↑, ⌘ →, ⌘ ←, and ⌘ ↓ behave: Discussion in Cmd [arrow] commands do not function as expected #5805
• Select All while in Select mode needs attention
• Escape to deselect text doesn't work. It switches to Select mode.

Keyboard Shortcut	Keys Pressed	Chrome	Firefox	Safari	Tests Exist
Display these keyboard shortcuts.	⌃⌥H	✅	✅	✅
Open the global command menu	⌘K	✅, if not in a paragraph	✅, if not in a paragraph	✅
Switch between visual editor and code editor.	⇧⌥⌘M	✅, Kind of. Need to move focus into the code editor for it to switch back. Can't press it twice in a row to open code editor and then switch back to visual	✅, Kind of. Need to move focus into the code editor for it to switch back. Can't press it twice in a row to open code editor and then switch back to visual	✅, 🔴 Focus loss
Toggle distraction free mode.	⇧⌘\	✅	✅	✅, but also it's a Safari shortcut for viewing all your tabs
Toggle fullscreen mode.	⇧⌥⌘F	✅	✅	✅
Open the block list view.	⌃⌥O	✅	✅	✅	✅
Show or hide the Settings sidebar.	⇧⌘,	✅	✅	✅
Navigate to the next part of the editor.	⌃`	✅	✅	✅
	⌃⌥N	✅	✅	✅
Navigate to the previous part of the editor.	⌃⇧`	✅	✅	✅
	⌃⌥P	✅	✅	✅
	⌃⇧~	✅	✅	✅
Navigate to the nearest toolbar.	⌥F10	✅	✅	✅
Save your changes.	⌘S	✅	✅	✅
Undo your last changes.	⌘Z	✅	✅	✅
Redo your last undo.	⇧⌘Z	✅	✅	✅
Select all text when typing. Press again to select all blocks.	⌘A	✅ From Paragraph or Heading or Image	✅	✅
Select all from Empty Paragraph		🔴	✅	✅
Select all from caption on image		🔴	✅	✅
Select all in Select mode		🔴 copies all text on page outside of editor, like the options menus, etc. Definitely not what someone would want. Should select all blocks IMO.	🔴 copies all text on page outside of editor, like the options menus, etc. Definitely not what someone would want. Should select all blocks IMO.	🔴 copies all text on page outside of editor, like the options menus, etc. Definitely not what someone would want. Should select all blocks IMO.
Clear selection.	escape	🔴 Switches to Select Mode	🔴 Switches to select mode	🔴 Switches to select mode
Duplicate the selected block(s).	⇧⌘D	✅	✅	✅	✅
Remove the selected block(s).	⌃⌥Z	✅	✅	✅	✅
Insert a new block before the selected block(s).	⌥⌘T	✅	✅	✅	🔸 One line within another unrelated test
Insert a new block after the selected block(s).	⌥⌘Y	✅	✅	✅
Delete selection.	del	✅	✅	✅
Move the selected block(s) up.	⇧⌥⌘T	✅	✅	✅
Move the selected block(s) down.	⇧⌥⌘Y	✅	✅	✅
Change the block type after adding a new paragraph.	/	✅	✅	✅
Make the selected text bold.	⌘B	✅	✅	✅
Make the selected text italic.	⌘I	✅	✅	✅
Convert the selected text into a link.	⌘K	✅	✅	✅	✅
Remove a link.	⇧⌘K	✅	✅	✅
Insert a link to a post or page.	[[	✅	✅	✅
Underline the selected text.	⌘U	✅	✅	✅
Strikethrough the selected text.	⌃⌥D	✅	✅	✅
Make the selected text inline code.	⌃⌥X	✅	✅	✅
Convert the current heading to a paragraph.	⌃⌥0	✅	✅	✅	✅
Convert the current paragraph or heading to a heading of level 1 to 6.	⌃⌥1-6	✅	✅	✅	🔸, to Heading level 2

Caret in middle of multi-line paragraph block	Keypress	Chrome	Firefox	Safari	Tests Exist
Caret to the beginning of block	⌘ ↑	✅	✅	✅
Caret to the end of block	⌘ ↓	✅	✅	✅
Move caret to the beginning of the current line.	⌘ ←	✅	✅	✅
Move caret to the end of the current line	⌘ →	✅	✅	✅

Caret at end of multi-line paragraph block	Keypress	Chrome	Firefox	Safari	Tests Exist
Caret to the beginning of block	⌘ ↑	✅	✅	✅
Caret to the end of document	⌘ ↓	🔴🔴 Caret to second line of next paragraph block	🔴 Caret to first line of next paragraph block	🔴 Caret to first line of next paragraph block
Caret to the beginning of the current line	⌘ ←	✅	✅	✅
No behavior	⌘ →	🔴 Caret to beginning of next block	🔴 Caret to beginning of next block	🔴 Caret to beginning of next block
Caret to the same position of next line	⌃ N	✅	✅	✅
Caret to the same position of previous block	⌃ P	🔴 Moves to beginning of current block	🔴 Moves to beginning of current block	🔴 Moves to beginning of current block

Caret at beginning of multi-line paragraph block	Keypress	Chrome	Firefox	Safari	Tests Exist
Caret to the beginning of content	⌘ ↑	🔴 Caret to last line of previous block. Inconsistent location, sometimes in middle of last line, sometimes at beginning depending on how you reach there. For example, if you're in the middle of the block, press ⌘ ↑, then press ⌘ ↑ again, it will put the caret at the x index when you started.	🔴 Same as Chrome	🔴 Caret to end of previous block
Caret to the end of block	⌘ ↓	✅	✅	✅
No behavior	⌘ ←	🔴 Caret to end of previous block	🔴 Caret to end of previous block	🔴 Caret to end of previous block
Caret to the end of the current line	⌘ →	✅	✅	✅
Caret to the same position of next line	⌃ N	✅	✅	✅
Caret to the same position of previous line	⌃ P	✅	✅	✅

Caret in middle of last line of multi-line paragraph block	Keypress	Chrome	Firefox	Safari	Tests Exist
Caret to the beginning of block	⌘ ↑	✅	✅	✅
Caret to the end of block	⌘ ↓	🔴 Caret to first line of next block	🔴 Caret to first line of next block	🔴 Caret to first line of next block
Caret to the beginning of the current line	⌘ ←	✅	✅	✅
Caret to the end of the current line	⌘ →	✅	✅	✅
Caret to the same position of next block	⌃ N	🔴 Moves to end of current block	🔴 Moves to end of current block	🔴 Moves to end of current block
Caret to the same position of previous line	⌃ P	✅	✅	✅

[t-hamano]

I have a similar tracking issue to solve some shortcuts that don't work in Windows: #43352

[porg]

UPDATE: Please read this comment in combination with my next one.

Pressing ⌘-⇧-D sometimes ignores Gutenberg's "Duplicate (selected block)" command and instead triggers Safari's command: Menu → Bookmarks → Add to Reading List

• macOS 11.7.7 Big Sur
• Safari 16.5
• Physical German keyboard on a MacBook Pro (Mid 2014) with a German keyboard layout but the OS language set to English
  • System Preferences → Keyboard → Input Sources → set to "Austrian"
  • System Preferences → Language and Region → Preferred Languages → English is set as the primary language
• I mention this because this is not the first time I experienced that web app's keyboard assignment work wrongly, as they work with key-codes (= lowest in the abstraction level) but ignore the OS level keyboard layout assignment.
  • E.g. the issue also existed in Figma, but they later solved that.

See for yourself:

WordPress.Gutenberg.-.Duplicate.shortcut.on.Mac.Safari.weaker.than.native.command.in.Menu.-.Bookmarks.-.Add.to.Reading.List.mp4

[porg]

In Safari 15.6 on macOS 11.7.7 Big Sur sometimes a situation arises where all Gutenberg commands fail as soon as there's a native Safari shortcut, which then always takes precedence.

• Despite the focus being clearly within the Block Editor (element selected, mouse cursor within Canvas area)
• Also when I change they keyboard layout to English (and press the key at the position where the English key position is on a physical English keyboard, e.g. QWERTZ vs QWERTY) this makes no difference then.

No exhaustive list, but just some examples which sometimes fail:

Shortcut	Supposed target command in Gutenberg	Instead triggers this Safari command -- Remark
⇧ ⌘ D	Duplicate (the selected block(s)	Menu → Bookmarks → Add to Reading List
⌥ ⌘ T	Add before	Menu → File → New tab at end
⌥ ⌘ Y	Add after	Menu → History → History -- Although the Safari shortcut for the command is just ⌘ Y

[joedolson]

This is all great research - I think our next steps need to be to target the major inconsistencies and see what we can do to resolve those.

I think that means creating or locating existing issues for each keyboard shortcut that doesn't work according to expectations and adding a tasklist to this issue for tracking.

In my opinion, the sensible thing is to create an issue for each shortcut task (what is this shortcut expected to do), with documentation of where and how it doesn't work as expected on both Windows & PC, referencing both this issue and @t-hamano's Windows list.

[t-hamano]

Thanks for the suggestion, @joedolson.

This issue is complex, but we would be happy to solve it in a variety of environments.

As far as I know, I think the following issues need to be considered:

• Does it work as expected in all browsers? (Chrome, Safari, Firefox, etc.) Are there any conflicts with browser shortcuts?
• Does it work on both Windows and Mac? Are there any conflicts with OS shortcuts?
• Are the current key combinations reasonable?
• Does it work correctly with non-QWERTY layouts?
• Does it work with all editor instances? (Post Editor / Site Editor / Wiget Editor / Customize Widget Editor)

Personally, I think it would be good to extract registerShortcut() from the code base and list again whether the shortcut is registered globally or in a specific editor instance.

[t-hamano]

These are all shortcuts. Shortcuts realized with writing-flow rather than registerShortcut, such as "Caret to the beginning of block", are not included in this list.

Block Editor / Global

name	category	description	keyCombination	aliases
core/block-editor/duplicate	block	Duplicate the selected block(s).	primaryShift + d
core/block-editor/remove	block	Remove the selected block(s).	access + z
core/block-editor/insert-before	block	Insert a new block before the selected block(s).	primaryAlt + t
core/block-editor/insert-after	block	Insert a new block after the selected block(s).	primaryAlt + y
core/block-editor/delete-multi-selection	block	Delete selection.	del	backspace
core/block-editor/select-all	selection	Select all text when typing. Press again to select all blocks.	primary + a
core/block-editor/unselect	selection	Clear selection.	escape
core/block-editor/focus-toolbar	global	Navigate to the nearest toolbar.	alt + F10
core/block-editor/move-up	block	Move the selected block(s) up.	secondary + t
core/block-editor/move-down	block	Move the selected block(s) down.	secondary + y
core/commands	global	Open the global command menu	primary + k

Post Editor

name	category	description	keyCombination	aliases
core/edit-post/toggle-mode	global	Switch between visual editor and code editor.	secondary + m
core/edit-post/toggle-distraction-free	global	Toggle distraction free mode.	primaryShift + \
core/edit-post/toggle-fullscreen	global	Toggle fullscreen mode.	secondary + f
core/edit-post/toggle-list-view	global	Open the block list view.	access + o
core/edit-post/toggle-sidebar	global	Show or hide the Settings sidebar.	primaryShift + ,
core/edit-post/next-region	global	Navigate to the next part of the editor.	ctrl + `	access + n
core/edit-post/previous-region	global	Navigate to the previous part of the editor.	ctrlShift + `	access + p / ctrlShift + ~
core/edit-post/keyboard-shortcuts	main	Display these keyboard shortcuts.	access + h
core/edit-post/transform-heading-to-paragraph	block-library	Transform heading to paragraph.	access + 0
core/edit-post/transform-paragraph-to-heading-{level}	block-library	Transform paragraph to heading.	access + {level}

Site Editor

name	category	description	keyCombination	aliases
core/edit-site/save	global	Save your changes.	primary + s
core/edit-site/undo	global	Undo your last changes.	primary + z
core/edit-site/redo	global	Redo your last undo.	primaryShift + z	primary + y (Apple OS only)
core/edit-site/toggle-list-view	global	Open the block list view.	access + o
core/edit-site/toggle-block-settings-sidebar	global	Show or hide the Settings sidebar.	primaryShift + ,
core/edit-site/keyboard-shortcuts	main	Display these keyboard shortcuts.	accesss + h
core/edit-site/next-region	global	Navigate to the next part of the editor.	ctrl + `	access + n
core/edit-site/previous-region	global	Navigate to the previous part of the editor.	ctrlShift + `	access + p / ctrlShift + ~
core/edit-site/toggle-mode	global	Switch between visual editor and code editor.	secondary + m
core/edit-site/transform-heading-to-paragraph	block-library	Transform heading to paragraph.	access + 0
core/edit-post/transform-paragraph-to-heading-{level}	block-library	Transform paragraph to heading.	access + {level}

Widget Editor

name	category	description	keyCombination	aliases
core/edit-widgets/undo	global	Undo your last changes.	primary + z
core/edit-widgets/redo	global	Redo your last undo.	primaryShift + z	primary + y (Apple OS only)
core/edit-widgets/save	global	Save your changes.	primary + s
core/edit-widgets/keyboard-shortcuts	main	Display these keyboard shortcuts.	access + h
core/edit-widgets/next-region	global	Navigate to the next part of the editor.	ctrl + `	access + n
core/edit-widgets/previous-region	global	Navigate to the previous part of the editor.	ctrlShift + `	access + p / ctrlShift + ~
core/edit-widgets//transform-heading-to-paragraph	block-library	Transform heading to paragraph.	access + 0
core/edit-widgets//transform-paragraph-to-heading-{level}	block-library	Transform paragraph to heading.	access + {level}

Customize Widgets

name	category	description	keyCombination	aliases
core/customize-widgets/keyboard-shortcuts	main	Display these keyboard shortcuts.	access + h
core/customize-widgets/undo	global	Undo your last changes.	primary + z
core/customize-widgets/redo	global	Redo your last undo.	primaryShift + z	primary + y (Apple OS only)
core/customize-widgets/save	global	Save your changes.	primary + s
core/customize-widgets/transform-heading-to-paragraph	block-library	Transform heading to paragraph.	access + 0
core/customize-widgets/transform-paragraph-to-heading-{level}	block-library	Transform paragraph to heading.	access + {level}

About Modifier

The following modifiers have different key assignments depending on the OS.

modifier	Mac OS	Windows OS
primary	command	ctrl
primaryShift	shift + command	ctrl + shift
primaryAlt	alt + command	ctrl + alt
secondary	shift + alt + command	ctrl + shift + alt
access	ctrl + alt	shift + alt