Gutenberg Tips to Improve Your Productivity in the Editor

This is not yet another top [number] Gutenberg tips and tricks article, but a summary of the most popular methods to speed up your content editing experience in the block editor.

Are you new with Gutenberg? WordPress Docs have a well written new block editor introduction for you. And If you have familiarized yourself with the block editor so far, I believe you will find these Gutenberg tips very useful.

Most of these tips already exist on the web. However, from my experience, the following are written in the right order to achieve the best Gutenberg editing workflow.

1. Turn on Top Toolbar & Fullscreen Mode

Gutenberg’s contextual toolbar is very easily accessible, being right on top of your block.

However, when you have nested blocks inside other blocks, that toolbar really might become annoying, getting in the way of your block selection or adding blocks in between other blocks.

For that, with each fresh WordPress setup of mine, I turn on Top Toolbar from the “More Tools & Options” on the editor’s top bar.

Turn on Top Toolbar and Fullscreen Mode
Turn on Top Toolbar and Fullscreen Mode

Next is Fullscreen Mode. It is beneficial especially when you’re building pages in the editor. You get enough room to see everything, a closer look and feel to the front end view.

WP Admin Collapse Menu link
WP Admin Collapse Menu link

The downside of that is you no longer have instant access to other menus of your WP-Admin. For that reason, I also sometimes use the Collapse Menu link in the WP Admin sidebar(the last link) in favor of Top Toolbar. This way I get larger screen real estate, while also still having access to everything in WordPress.

2. Editor Shortcuts

I’m not going to write down the full list of the shortcuts here, but list the ones I most frequently use in a real-life scenario. Some of them have too many keys to combine, so I only use the shortcuts I can instantly apply.

ShortcutMacWindows
Show/Hide Right SidebarCMD + Shift + ,CTRL + Shift + ,
Change the block type after adding a new paragraph/ + (start typing block name)/ + (start typing block name)
Create Link from SelectionCMD + KCTRL + K
Duplicate the Selected BlockCMD + Shift + DCTRL + Shift + D
UndoCMD + ZCTRL + Z
RedoCMD + Shift + ZCTRL + Shift + Z

The most frequent shortcuts I personally use among those is the Duplicate Block and the / shortcut for adding new blocks.

The Duplicate block is especially great when you want to have multiple similar styled blocks but without the hassle of adding the same settings for each one.

3. Block Type Shortcuts

The following shortcuts are really handy for quick creating headings, lists and quotes.

## + Space

Add headings to the text (## for H2, ### for H3, etc…):

> + Space

Add a Quote

1. + Space or 1) + Space

Start ordered (numeric) list

– + Space

Start the unordered (bulleted) list

There may be times you accidentally create those blocks with their shortcuts. If that happens, simply hit undo shortcut(cmd+z/ctrl+z) and your block type will be reverted to the way it was.

And that’s a wrap! I hope these tips help you the way they helped me.

1 Comment

Leave a Reply

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