With the latest release of WordPress 5.4 (a week ago), I wanted to share six expert tips and tricks you probably didn’t know that may improve your workflow and productivity within the editor.
1. Focus Mode (Fullscreen + Top Toolbar + Spotlight + Hide Block Settings)
The latest release has the default mode for Gutenberg set to Fullscreen, which will give you Distraction Free Mode. However, by turning both Top Toolbar and Spotlight mode on and hiding Block Settings of your current block, your focus is 100% on the text/block you are currently working with (this is especially useful when you are writing the first draft of your content)
Check both Top Toolbar and Spotlight Mode from the contextual menu, then use ⌘ + Shift + toggle current block settings.
2. Quickly Insert New Blocks with /
Once you have a new paragraph, enter the backslash (/), this will open a contextual menu with 10 Most Used blocks. However, if you want to access other block sections, just type the first word of the block section. For example, /common will switch from Most Used to Common Blocks.
Here are shortcuts to all built-in block sections /common, /format, /layout, /widgets and /embed.
3. Memorize And Use Shortcuts with Ease
Knowing all the shortcuts by heart can improve your writing and formatting process. However, in most cases, to remember so many shortcuts, you need to live and breathe Gutenberg and use them regularly. Talking about shortcuts can be one whole other post.
Here are a few tips about how to use associations and quickly and easily memorize shortcuts:
- break them by number of keys;
- group them by key combinations;
- associate letters with words;
Before we move ahead, here are a couple of letter associations with words.
- Z – Undo / Remove
- Y – Redo
- V – Paste
- X – Cut
⌘ + Letter
Let us start with the easier and probably the one you will use the most – the two key combination shortcuts. Also, it is nice all these are related to text formatting.
The ⌘ + Letter association for these keywords will be Text + Letter.
- ⌘ + A – Text [A]ll
- ⌘ + B – Text [B]old
- ⌘ + I – Text [I]talic
- ⌘ + U – Text [U]nderline
- ⌘ + K – Text Lin[K] / Shift + ⌘ + K – Un-Text lin[K]
- ⌘ + S – Text [S]ave
- ⌘ + Z – Text [Z]Undo
- ⌘ + Y – Text [Y]Redo
- ⌘ + C, ⌘ + V and ⌘ + X are the universal once (copy, paste and cut) text. e.g. Text [C]opy, Text [V]Paste, and Text [X]Cut.
Option + Ctrl + Letter
Next is the combination Option + Ctrl + Letter.
The association you can make is Go + To + Letter and the word Block since all these are Block related.
For example, the association for Option + Ctrl + O will be Go + To + Open (Block).
- Option + Ctrl + Z – Go to [Z]Remove Block
- Option + Ctrl + H – Go to Short-pat[H] (Keyboard Shortcuts)
- Option + Ctrl + O – Go to [O]pen Block (Navigation)
- Option + Ctrl + N – Go to [N]ext Block (within the Editor)
- Option + Ctrl + P – Go to [P]revious Block (within the Editor)
The next two shortcut combinations are again Block related.
⌘ + Option + Letter
⌘ + Option + Letter would be associated with Block + New + Letter.
- ⌘ + Option + T – Block New InFron[T] (Insert new block BEFORE the one on focus)
- ⌘ + Option + Y – Block New Be[Y]ond (Insert new block AFTER the one on focus)
- ⌘ + Option + Backspace – Block New Remove
⌘ + Shift + Letter
And ⌘ + Shift + Letter will become Block + Existing + Letter.
- ⌘ + Shift + Z – Block Existing [Z]Remove
- ⌘ + Shift + D – Block Existing [D]uplicate
- ⌘ + Shift + , – Block Existing [T]oggle Settings
⌘ + Arrow & ⌘ + Shift + Arrow
Bonus: navigation between elements can be done with ⌘ + Arrow and selection with ⌘ + Shift + Arrow.
- ⌘ + 2x Up/Down (or just up/down) arrow – will move the cursor between blocks.
- ⌘ + Left/Right arrow – will move the cursor at beginning/end of the current line
- ⌘ + Shift + Left/Right arrow – selects everything from the cursor until the beginning or end of the current line.
- ⌘ + Shift + Up/Down arrow – selects everything from the cursor until the beginning or end of the block.
Also, combination ⌘ + Shift + Left + Right or ⌘ + Shift + Up + Down arrows will select either the whole line or the whole block (if you continue hitting up/down, it will select multiple blocks as well).
That’s all I have for now about shortcuts, and I am sure you get the basic idea of approaching this issue.
Note: The examples above are for Mac users, but you can easily apply the same memorization technique if you are a Windows user.
4. Using Markdown Style Within Gutenberg
If you are familiar with Markdown, you can create new blocks. You wonder how does it work? Type the Markdown symbol, hold Shift and then press Space.
For example:
- Shift + ## + Space will turn paragraph in H2 (this will work for H2, H3, and H4)
- Shift + * + Space will turn paragraph in unordered bullet list
- 1. + Shift + Space will turn paragraph in ordered bullet list
- > + Shift + Space will turn paragraph in a blockquote
Bonus: Not really Markdown style specific, but if you hold Ctrl + ⌘ + Space, you can add emoji icons to your post/page content supported by default in WordPress. 🎉
5. Use @ Symbol to Add Link to a Registered User
By typing @ symbol, you will get a list with all the registered users, so if you want to reference a user, just select the name, which will add the @username (e.g., @krasenslavov). Then add a link using ⌘ + K and add/author/username as URL.
Here is the sequence type @ > select @username > ⌘ + K > enter /author/username
6. Reusable Blocks
Another great feature of the Gutenberg editor is reusable blocks. You can create blocks with elements and reuse them not only within your current WordPress install but export & import them in any WordPress site.
The idea is to create 10 – 15 general blocks that could be cover 90% of your post/page needs and style theme within each site where you import them.
Here is a sample list with blocks that you might want to have:
- Container Block
- Posts Block
- Feature Grid Block
- Accordion Block
- Image Box Block
- Feature Block
- Icon List Block
- Call to Action Block
- Card Block
- Header Block
- Count Up Block
- Video Popup Block
- Pricing Box Block
- Testimonial Block
- Team Members Block
- Notification Block
- Number Box Block
- Expand/Show More Block
- Button Block
- Blockquote Block
- Divider Block
- Spacer Block
Go to https://example.com/edit.php?post_type=wp_block, where you can manage, import, and export all your reusable blocks.
And finally, once you have a list with Reusable Blocks generated, you can easily access them inside the editor, the same way I showed you in tip #2, just type /reusable within a new paragraph, and you will get a list with up to 10 custom blocks.
I hope this information will help you improve your Guttenberg experience a little bit.
‘Til the next time.