6 Expert Gutenberg Tips and Tricks You Should Know

6 expert tips and tricks you probably didn’t know that may improve your workflow and productivity within Gutenberg.

With the latest release of WordPress 5.4 (a week ago), I wanted to share with you 6 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 is having 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 you current block your focus is 100% on the text/block you are currently working with (this is especially useful when you writing the first draft of your content)

Check both Top Toolbar and Spotlight Mode from the contextual menu then use⌘ +Shift +,to 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.

Subscribe to our Newsletter* if you find our content useful and would like to receive regular updates with the latest posts.

3. Memorize And Use Shortcuts with Ease

Knowing all the shortcuts by heart can and will 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 once and probably the once you will use the most – the 2 key combination shortcuts. Also, it is nice all these are related to text formatting.

The ⌘ + Letter association for these keywords will be Text + Letter.

  • ⌘ + AText [A]ll
  • ⌘ + BText [B]old
  • ⌘ + IText [I]talic
  • ⌘ + UText [U]nderline
  • ⌘ + KText Lin[K] / Shift + + KUn-Text lin[K]
  • ⌘ + SText [S]ave
  • ⌘ + ZText [Z]Undo
  • ⌘ + YText [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 + ZGo to [Z]Remove Block
  • Option + Ctrl + HGo to Short-pat[H] (Keyboard Shortcuts)
  • Option + Ctrl + OGo to [O]pen Block (Navigation)
  • Option + Ctrl + NGo to [N]ext Block (within the Editor)
  • Option + Ctrl + PGo to [P]revious Block (within the Editor)

Next two shortcut combinations are again Block related.

⌘ + Option + Letter

⌘ + Option + Letter would be associated with Block + New + Letter.

  • ⌘ + Option + TBlock New InFron[T] (Insert new block BEFORE the one on focus)
  • ⌘ + Option + YBlock New Be[Y]ond (Insert new block AFTER the one on focus)
  • ⌘ + Option + BackspaceBlock New Remove

⌘ + Shift + Letter

And ⌘ + Shift + Letter will become Block + Existing + Letter.

  • ⌘ + Shift + ZBlock Existing [Z]Remove
  • ⌘ + Shift + DBlock 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 how to approach this issue.

Note: The examples above are for Mac users, but if you are a Windows user you can easily apply the same memorization technique.

4. Using Markdown Style Within Gutenberg

If you are familiar with Markdown you can use it to 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 which are 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 and that will add the @username (e.g. @krasenslavov). Then add a link by using ⌘ + K and adding /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.

Hope all of this information will help you and improve a little bit you Guttenberg experience.

‘Til the next time.

* We have a NO SPAM policy so you won't reaceive any meaningless emails from us!

Related Content

Add a Monitor to CSS Files Generated from SASS in Sublime Text 3 + SFTP

How to add a monitor to dynamically updated file with Sublime Text 3 and SFTP package.


5 Popular Web Page Components Done with Pure CSS

Open/close a modal window, create mobile navigation, build tab navigation, image gallery slider, and switch & button groups. All with pure CSS, no JS required.


2 Methods to Quickly Add Any SVG to Gutenberg Editor

Learn how to add SVG icons to the Gutenberg editor.


Leave a Reply

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

5 SASS Mixins for Your Next Project
Hiding Advanced Custom Fields

Thank you for reading our content. Use the buttons below to spread the love and share 2 Methods to Quickly Add Any SVG to Gutenberg Editor with your followers.