10 Free Ways to Improve Your Gutenberg Block Experience
The Gutenberg Block Editor has improved considerably since its introduction in 2018. Even so, it’s still quirky and at times frustratingly clunky.
Here are a few ways you can make better use of the block editor. And they’re all 100% free.
1) Set Global Colors
How much time would you save if didn’t have to paste in a custom hex code every time you wanted to color an element in your design?
2) Remove Blocks You Don’t Use
Declutter your editing experience by disabling any Gutenberg blocks that you don’t need.
For example, I tend to favor add-on blocks like Kadence over many of the default Gutenberg blocks, so by disabling them, I don’t have to sort through them anymore.
Here’s how to manage your blocks:
- Click the 3 dot icon in the top right corner when editing a post or page.
- Click “Block Manager” under “Tools.
- De-select any blocks (or group of blocks) you don’t need.
3) Use “Insert Before” and “Insert After”
One of the clunkier aspects of Gutenberg is getting blocks where you want them. This gets especially frustrating if you have multiple containers and columns on the page.
To get a new block where I want it, and to avoid the quirky drag and drop process, I like to use the “Insert Before” or “Insert After” options.
Say you have a paragraph block inside a container, and you want to add an image below the paragraph, try this:
- Select the paragraph block.
- Click the 3 dot icon on the right side of the paragraph block editor bar.
- Click “Insert After”
This helps ensure that the block goes where you want it.
Insert Before Keyboard Shortcut
Mac: option + cmd + T
Insert After Keyboard Shortcut
Mac: option + cmd + Y
Note: You can use “Insert Before” or “Insert After” for any block type.
4) Use “Move Up” and “Move Down”
Similar to the previous tip. The “Move Up” and “Move Down” arrows allow you to change the position of a block without drag and drop. Here’s where to find it:
5) Use the “Outline”
The outline is useful if you can’t seem to select the right block, or if you forget how blocks are nested in complex layouts. It’s located in the top bar, here:
6) Use / to Quickly Add a Block
Instead of using the + sign to add a new block, try using forward slash /.
A list of your most used blocks will show up, and you can select one using your arrow keys and return (enter) key. No mouse necessary.
7) Remember You Can “Transform” a Block
8) Drag and Drop Images
Save a few mouse clicks by dragging an image directly from your desktop into the editor. No need to add an image block beforehand.
9) Duplicate Your Blocks
Once you have a given block formatted the way you want it, duplicate it to avoid having to recreate it.
This is great solution if there is some element on the page that you’re repeating. You’ll still need to change the content within the duplicated block.
Note that this only works within a single page or post, not between pages or posts. For moving styled blocks onto other pages, see the next tip.
10) Make Use of Reusable Blocks
Reusable blocks allow you to save and move a customized block to any page or post of your site with just a few clicks. You can then edit your reusable block, and see the changes wherever that block exists on your site.
Let’s take the hero section at the top of this post. To convert it to a reusable block, do this: