10 Free Ways to Improve Your Gutenberg Block Experience


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?

Some block libraries–like Kadence or Stackable–allow you to set default global colors or add your custom colors to the color swatches inside the block settings panel.

(Screenshot here)

If your block library plugin of choice doesn’t let you set custom colors, try one of these plugins: Block Editor Colors or Custom Color Palette.

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:

  1. Click the 3 dot icon in the top right corner when editing a post or page.
  2. Click “Block Manager” under “Tools.
  3. De-select any blocks (or group of blocks) you don’t need.
Remove blocks you don’t use 1 – Click to Enlarge
Remove blocks you don’t use 2 – Click to Enlarge

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:

  1. Select the paragraph block.
  2. Click the 3 dot icon on the right side of the paragraph block editor bar.
  3. Click “Insert After”
Insert Before or Insert After – Click to Enlarge

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:

Move a block up or down easily – Click to Enlarge

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:

How to use the Outline – Click to Enlarge

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.

How to Duplicate a Block – Click to Enlarge

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:

Reusable Blocks 1 – Click to enlarge
Reusable Blocks 2 – Click to enlarge
Reusable Blocks 3 – Click to enlarge
Reusable Blocks 4 – Click to enlarge