Gutenberg WordPress Editor Tips and Tricks

Last Updated on June 27, 2022

Wondering how to shortcut your way to faster page building using the new WordPress block editor? Here are 10 hidden tricks to increase your efficiency and speed.

Wondering how to shortcut your way to faster page building using the new WordPress block editor? Here are 10 hidden tricks to increase your efficiency and speed. We use these tips on a day to day basis, hopefully there’s something in our list that can save you some time.

1. Duplicating Your Page or Content

Go to Code Editor mode by clicking on the button with the 3 dots on the upper right side of the editor and selecting “Code Editor”

The whole editor will show you the HTML contents of your post. Copy all the contents and paste it into a new page to duplicate your content.

Be careful when editing this since editing raw block contents might invalidate your blocks.

Don’t forget to go back to the visual editor when you’re finished.

2. Quickly Create Different Text Blocks

There are character combinations that you can type at the start of your Paragraph block that will convert your normal block into another one:

• ## (2 hash signs than a space) – will convert your block to an H2 heading block. Type in more pound signs to create smaller headings, for example ###### (6 hash signs) to create an H6 heading block.
• * (asterisk then a space) – bullet list
• 1. (number one, a period then a space) – number list
• > (greater than sign, then a space) – blockquote
• --- (3 dashes, then enter) – horizontal rule
• `word`(backtick, some characters, then another backtick) – inline code
• ``` (3 backticks, then enter) – preformatted text

3. Quickly Add Preferred Blocks

Type / (slash) at the start of a Paragraph block and your recently-used blocks will appear. Press up and down to navigate through the list. Hit enter to insert your block of choice.

Another option is type / (slash), type in the name of the block you want to add, then hit enter to insert the chosen block. For example, type in /cta then hit enter to add a Call to Action block.

This is way faster than clicking on the Plus icon to add blocks. You don’t even have to type in the whole block name, the first block that appears in the list when you hit enter will be inserted.

4. Same Page Links

Add an HTML Anchor to a heading, then use a # (hash) followed by the HTML anchor for any link or button.

For example, use the HTML Anchor name my-title then use #my-title in your links.

5. Easily Navigate Through Column Block Contents

It can be confusing manipulating and navigating blocks inside Column Blocks. To see the visual hierarchy of the blocks inside your Column Blocks, highlight your column block, then click on the Block Navigation button on the top left of the editor. Clicking that will show you every block that’s inside the columns.

(This also applies to non-column blocks.)

6. View Word Count & Outline

Click on the Content Structure button on the upper left corner of the editor to view the statistics of your content. It will show you the number of words, headings, paragraphs and blocks used in the article, along with a helpful outline based on the heading blocks used.

7. Quickly Create New Paragraph Blocks

When adding a new paragraph block, it can be quite hard to shuffle your mouse through the spaces between the blocks just to click on the plus button.

A quicker way would be clicking a block to select it, then hit enter to immediately create a Paragraph block.

Extra tip: click near the edge of the block, your typing cursor should not appear

8. Quickly Delete Blocks

There are a few tricks to quickly delete blocks:

1. Click on a block to select it, then hit the backspace or delete key to quickly delete a whole block. This is way faster than clicking on the More Options button on the block’s toolbar then clicking on Remove Block.
2. While typing text inside a text block, press CTRL + A (or CMD + A for Macs) to highlight all the block’s text, then press backspace or delete twice.
3. To delete multiple blocks, hold your Shift Key then click on another block to select them all. Then press backspace or delete to remove all of them.

9. Clearing the Whole Page

Press CTRL + A (or CMD + A for Mac users) while no blocks are selected to highlight all the blocks in the editor, then delete them. If you’re currently editing a block, press the keys twice to highlight all the blocks.

10. Same Blocks For Multiple Pages

If you select a single or multiple blocks, you can save them as Reusable Blocks by clicking on the More Options button in the toolbar (the button with the 3-dots). Once saved, your new reusable block will become persistent across your whole site. This means that your block will always have the same contents even across different pages. When you edit a reusable block, all the pages that have it will become updated as well.

This can be used to create Call to Action blocks in the middle or end of your blog posts that you can easily change into sale notifications during holidays.

Bonus tip: You can even use Reusable Blocks inside other Reusable Blocks