Gutenberg at another level: Keyboard shortcuts

keyboard shortcuts are key combinations that execute an action that has been predefined, whose purpose is to save time. You will be able to use these shortcuts in a multitude of programs, including your operating system, your browser or your notepad.

This time we will focus on the Gutenberg keyboard shortcuts, thus being able to improve our typing fluency with this new editor.

In this entry you will not find all the keyboard shortcuts, but rather a personal selection of those that I consider most useful and that you will use the most. For the complete list, go to the top right corner of the editor, click on the 3 dots and look for the “Keyboard Shortcuts” option. A window will open with all the available ones. If you prefer, and while we are on the subject, you can see them if you click Shift + Alt + H when you're typing 🙂

Common keyboard shortcuts

In this category you will find keyboard shortcuts that you can use in almost any application that you use on a daily basis. These would be:

• Save Changes: To save the changes to your document/post/page, simply tap Ctrl + S
• Undo: Have you done something you didn't want to? press Ctrl + Z and take a step back.
• Redo: On the contrary, if you want to take a step forward, Ctrl + Shift + Z will redo the step you undid.

Shortcuts to control the editor

Once the basic shortcuts are mastered, making changes to how the editor looks in a couple of clicks won't be a big problem for you. The two I use the most are:

• Hide the sidebar: If you want to write with fewer distractions, hiding the Gutenberg sidebar can help. To hide it or show it once you have hidden it, you only have to press Ctrl + Shift + ,.
• Switch between visual editor or HTML editor: It may be the case that you want to edit the HTML of the text you are writing, so if you want to switch between one and the other in the most agile way possible, press Ctrl + Shift + Alt + M.

Keyboard shortcuts when writing with Gutenberg

If you already found the previous shortcuts interesting, these are wonderful. I have divided them into 3 subsections for better classification.

Block Creation Shortcuts

Gutenberg's actual name (or the one that is recommended to be used) is “editor blocks”, and knowing how to manage them in the editor with a couple of keystrokes will greatly enrich your writing experience. My favorites are:

• Create a new block below the one you are using: Do you want to add a block below the one you are writing? You can do it simply by clicking Intro.
• Create a block on top of the one you are using: If you forgot to comment on something, don't worry. press Ctrl + Alt + T and a block will appear between the one you are using and the previous one.
• Choose the type of block: If you have pressed the enter key as indicated in the previous shortcut, you will have noticed that a paragraph block will be created automatically. It's not what you wanted? then write / and the name of the block you want to add. For example, if you want to add an image block, just write /imagen and press Intro.
• Duplicate block: To create a block exactly like the one you are using, press Ctrl + Shift + D. The content will also be duplicated.
• Delete block: Shift + Alt + Z will remove the block you are using, be careful! Although you can always use the shortcut Redo which we talked about in the first section 🙂

Keyboard shortcuts typing text

We come to the last type of shortcuts, the writing ones! These are simple, and although they are also common among other programs, we have preferred to dedicate their own section to them. The main ones, which will save you many clicks, are the following:

• Bold: Select the piece of text you want and press Ctrl + B to make your text bold.
• Italics (or italics): If you want to add italicized text, select the text you want and press Ctrl + I.
• underlined letter: To underline a word, just press Ctrl + I, having previously selected the words you want to underline.
• Letter crossed out: Select the word or phrase you want to cross out and press Ctrl + D to cross it out

NOTE: If you want to save yourself selecting the text in these 4 shortcuts above, press this key combination, type the desired text and press again to return to writing with a normal font style.

• Add links: press Ctrl + K to convert a previously selected text into a link. If you haven't selected anything, the URL of the linked site will be displayed.
• Remove links: If you want to remove a link, tap Ctrl + Shift + K.
• Create separator: Write --- and press Intro to create a separator.
• Write header (h2, h3, h4…): I mentioned earlier that by writing /header in a new block you could add a header block, but that way you can't choose which one. To do it quickly, type ## and press Barra espaciadora to add an h2 header block. If you need an h3 header, write ###, if you need an h4, write ####...and so on until h6.

And that would be all. I want to give special thanks to the keyboard shortcut Shift + Alt + X, which has helped me wrap each of the keys I'm talking about in this article in a label <code>. Without her, it would have taken much longer.

I hope this article has served you! See you in the next one ;D