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.
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.
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.
| Shortcut | Mac | Windows |
|---|---|---|
| Show/Hide Right Sidebar | CMD + Shift + , | CTRL + Shift + , |
| Change the block type after adding a new paragraph | / + (start typing block name) | / + (start typing block name) |
| Create Link from Selection | CMD + K | CTRL + K |
| Duplicate the Selected Block | CMD + Shift + D | CTRL + Shift + D |
| Undo | CMD + Z | CTRL + Z |
| Redo | CMD + Shift + Z | CTRL + 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.
great tips, thanks for sharing.