Hugely Useful WordPress Keyboard Shortcuts for Gutenberg

With the introduction of Gutenberg, creating and formatting content on WordPress has become much easier. The WordPress Gutenberg editor will help both developers and users without experience in coding to create world-class websites.  Unlike the formal editor, it doesn’t require the addition of two or more plugins to format a page or create a post. It also has keyboard shortcuts that let you keep your hands on your keyboard instead of moving them away from the keyboard to mouse, click/drag/ drop, etc. This will save a lot of time for blog authors, editors, etc who spend a lot of time with WordPress Gutenberg editors to write and update or edit the blogs.

So, in this post we will discuss some really useful Gutenberg keyboard shortcuts that can help you speed up your workflow and be more productive by utilizing the saved time. 

How to Access Gutenberg Keyboard Shortcuts in the Editor?

As we mentioned earlier, Keyboard shortcuts speed up your workflow with handy key combinations. The keyboard shortcuts are for managing & formatting text, controlling headings, managing Gutenberg blocks, interesting quotes, images, links, and more. If you are familiar with the Gutenberg environment, you know much about the top toolbar on the Gutenberg editor. This is where you can access Gutenberg keyboard shortcuts. Click on the three dots on your left and you will see the keyboard shortcut in a popup window. Alternatively, there’s also a shortcut to show the shortcut: Shift + Alt + H.

keyboard shortcut

The Gutenberg shortcuts are something you should have in mind and use whenever necessary to save time and improve your website building workflow. This is why despite these Gutenberg shortcuts are accessible in the Gutenberg editor, we have decided to list them here. So, go through the shortcuts, have them in your mind, and keep building websites on Gutenberg like a pro.

First, let’s take a look at some simple ways that can speed up content creation in the Gutenberg editor.

1. Add a block Shortcut

Shortcut: /[block-name]

Use this shortcut to easily add blocks in your post. Enter a ‘/’ then begin typing the name of the block. Blocks matching the text after the ‘/’ will appear in a drop-down. Example: /columns,  /image. 

2. Switch Between Code Editor and Block Editor Shortcut

Shortcut: CTRL + Shift + ALT + M (Windows), ⌘ + Shift + ALT + M (Mac)

Use this shortcut to switch back and forth between the code editor and the regular block editor. Be sure to have the body of the post selected when entering the command.

3. Quickly Create New Paragraph Blocks

Shortcut: Enter

Use this shortcut to quickly add a new block below the currently selected block. Be sure your cursor is clicked within the body of the post. Then, to add a paragraph hit Enter. A paragraph block will be added by default, though you can use the plus button in the new block to select something else.

Now let’s take a close look at all the Gutenberg keyboard shortcuts available. We’ll list them out for both MAC and Windows users.

Gutenberg Global Shortcuts

    Shortcut Action             Mac          Windows
To display shortcut Window      Ctrl+Opt+H       Alt+Shift+H
To save changes          Cmd+S            Ctrl+S
To undo changes          Cmd+Z            Ctrl+Z
To redo the last undo      Cmd+Shift+Z       Ctrl+Shift+Z
To Show/hide settings sidebar        Cmd+Shift+,        Ctrl+Shift+,
Navigate to the next part of editor      Option+Ctrl+N       Alt+Shift+N
Navigate to the previous part of the editor      Option+Ctrl+P       Alt+Shift+P
Switch between Visual Editor and Code Editor  Cmd+Opt+Shift+M      Ctrl+Alt+Shift+M
To insert a new block before the selected block(s)      Cmd+Option+t        Ctrl+Alt+t
To insert a new block after the selected block(s)      Cmd+Option+y       Ctrl+Alt+y
Clear selection                Esc             Esc
Open the block navigation menu        Opt+Ctrl+o      Alt+Shift+o
To navigate the next part of the editor        Opt+Ctrl+n      Alt+Shift+n
To navigate the previous part of the editor        Opt+Ctrl+p     Alt+Shift+p
To navigate the nearest toolbar        fn+Opt+F10       Alt+F10

Gutenberg Block Shortcuts

      Shortcut Action              Mac        Windows
To duplicate the selected block(s)        Cmd+Shift+D          Ctrl+Shift+D
To remove the selected block(s)  Cmd+Opt+Backspace    Ctrl+Alt+Backspace
To insert a new block before the selected block(s)          Cmd+Opt+T          Ctrl+Alt+T
To insert a new block after the selected block(s)            Cmd+Opt+Y            Ctrl+Alt+Y
To change the block type after adding a new paragraph                /                  /

The keyboard shortcuts we have shown here are from the Gutenberg editor itself. If you start using keyboard shortcuts, they will speed up every aspect of website building for you. Gutenberg keyboard shortcuts are compatible with all WordPress themes. You can also create your own workflow-specific keyboard shortcuts using a program like AutoHotkey. AutoHotkey makes it easy to set up scripts and macros to boost your productivity. And, it’s a wrap! If you know any other helpful Gutenberg keyboard shortcut then let us know in the comments!

The WP Week Newsletter

A weekly newsletter covering updates from the WordPress ecosystem that are relevant and helpful for WordPress agencies, developers, and enthusiasts

Leave your comment

Your email address will not be published. Required fields are marked *