WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

18 WordPress Block Editor Tips in 2021 (Gutenberg Tutorial)

Last Updated on September 30th, 2021

Published on October 9th, 2018

Tags: ,

Share This Article

The Gutenberg WordPress block editor first appeared in WordPress 5.0, and if you are new to the platform, it will probably be the first thing you use to create pages and posts. And if you are a long-time WordPress user, you may still feel that migrating from the classic editor to Gutenberg will be difficult and not worth the effort.

This article shares some of the most valuable tips and tricks to help beginners get the most out of Gutenberg and perhaps encourage those who remain faithful to the classic editor to make the transition.

What is the WordPress Block Editor?

Gutenberg was introduced in December 2018 as the default page builder for all versions of WordPress from version 5.0 onwards. Its developers boldly claimed that it would “revolutionize the entire publishing experience as much as Gutenberg did the printed word.” Sadly, reactions were, and still are, mixed.

Problems arose because people had gotten used to using the old classic editor. That was very easy to use, being similar in many ways to a word processor, but that also meant it had limitations. Gutenberg aimed at simplifying things by using ‘blocks’ to build pages and posts, with each of those blocks designed to reduce the number of plugins needed to add functionality and features to those pages and posts.

Furthermore, in the early days, Gutenberg also suffered several technical issues, so it quickly earned itself a bad reputation which has stuck. That’s a pity, as the developer has now fixed most of the problems, and when you use Gutenberg, you’ll never look back as it can do much more than the classic editor without needing extra speed-sapping plugins.

Our Top Gutenberg Tips and Tricks

We’ll now dive straight into our favorite tips and tricks that will help you get the most out of the Gutenberg block editor for WordPress.

1. Learn Your Way Around the User Interface

The first thing you should learn when first using Gutenberg is where to find everything. Once you are familiar with the user interface, using Gutenberg becomes so much easier.

The user interface comprises three core elements:

  • The block inserter is for adding blocks into the editor just by clicking on them. Clicking the blue + (which changes to a black X when pressed) toggles the block inserter on and off.
  • The editor is the area where you create your content.
  • The sidebar is activated and deactivated by clicking the gear (settings) icon. Here, you can carry out many of the same post and page editing functions available in the classic editor, but it also allows you to edit the blocks you are using.
Learn Your Way Around WordPress block editor
WordPress block editor interface

2. Save Time by Learning the Gutenberg Editor Keyboard Shortcuts

If you use software such as Microsoft Word or Excel, you’re probably familiar with keyboard shortcuts for fast access to various functions and actions. Many of the shortcuts you already know will work in Gutenberg, such as Ctrl + B for bold. However, Gutenberg also has its own set of extra keyboard shortcuts, and you can call up a complete list of those using Shift + Alt + H.

Learn WordPress block editor Keyboard shortcuts

Learning these shortcuts, or at least the ones you use most often, will enrich your experience with Gutenberg and significantly speed up the time it takes to create or edit posts and pages.

Article Continues Below

3. Make Use of Markdown Syntax

Another form of shortcut is ‘markdown syntax.’ These are where certain keystrokes tell WordPress block editor to add specific formats. For example, simply typing # and hitting the space bar will tell Gutenberg that you want that line to be an H1 heading, while ## followed by the space bar will give an H2.

Here are some more examples of standard markdown syntax inputs that also work in Gutenberg (please note that each is activated by pressing the space bar, not by hitting ‘Enter’):

  • # to create an H1 heading up to ###### for an H6 heading
  • 1. or 1) to create an ordered (numbered) list
  • * or to create an unordered (bullet point) list
  • > to create a quote with a citation
Use Markdown Syntax on WordPress block editor

4. Quickly Insert Blocks Using “/”

The block inserter is the primary way of adding blocks. However, it can get quite cumbersome having to keep going into that and finding the one you want. Happily, there is a shortcut.

All you need to do is type / and then start typing the name of the block you want to add. As you type, Gutenberg will automatically suggest matching blocks. Then, select the one you want from the popup list and press “Enter” to insert it into your post or page.

Insert blocks in WordPress block editor

5. Inserting a ‘Read More’ Break Wherever You Need It

It was easy to insert a ‘Read More’ break into your text in the classic editor to keep your home page clutter-free. But, of course, it’s easy to do in Gutenberg also.

To add the break at the end of a complete paragraph, you simply insert the More block from the block inserter:

Insert Read More WordPress block editor

To add the break in the middle of a paragraph, you will need to switch to the Code Editor and insert the <!–more–> tag exactly where you need break inserting. Please note that switching between the Visual Editor and the Code Editor can be done using the Ctrl + Shift + Alt + M shortcut.

6. Make Full Use of the Ready-Made Content Blocks

Being a block editor, it stands to reason that the WordPress block editor comes with tons of ready-made blocks for you to use. These are fantastic, as you can use them to insert so many different types of content quickly and easily, with no extra plugins or knowledge of coding needed.

To access the blocks, activate the block inserter by pressing the blue + (which toggles to a black X when pressed) in the top left-hand corner. The block inserter contains dozens of ready-made blocks for you to add to your post or page. Hovering over each block will display a popup explaining what each one does:

Use Ready-Made Content Blocks on WordPress block editor

Once inserted, it is possible to edit the block. Simply click on the gear (settings) icon to toggle the sidebar on and off. Then, click on Block In the sidebar, and all editing options for the active block will appear:

Article Continues Below

7. Hide the Gutenberg Sidebar for a Less Cluttered Screen

Do you often get overwhelmed by the amount of information on your screen when creating posts and pages? All the menus, side, and status bars can often get in the way. You can reduce this screen clutter by hiding Gutenberg’s sidebar – simply click on the gear (settings) icon to toggle the sidebar on and off.

8. Drag and Drop Images Directly Into Posts

Adding images into your posts is super easy in Gutenberg. All you need to do is drag them from your desktop (or wherever they are stored) to the exact place in the editor where you want them. Just be sure you see the blue line as you drag in the images, or it will not work.

Drag and Drop Images Into Posts

It’s also possible to drag and drop several images at once, in which case, Gutenberg creates a fantastic image gallery in the post which you can rearrange as you wish.

Gutenberg automatically saves images added in this way to your Media Library.

9.  Seamless Copying and Pasting from External Sources

When content from external sources such as Microsoft Word or Google Docs is copied and pasted into the classic editor, the formats are often lost or corrupted. To avoid that means ‘purifying’ the original content by pasting it into Notepad first, then copying it into the WordPress classic editor, and finally re-adding the formats. A real pain in the butt.

On the other hand, Gutenberg does not seem to mind where the pasted content has come from, and you can pretty much be sure that whatever you paste will retain the format of the source document, including images.

10. Transform Blocks Into Different Blocks

There will undoubtedly be times where you want to switch a block you have added for a different one. For example, you may have created a heading block but later realize it should have been a paragraph or a list. No problem! Simply head over to the toolbar and click on the Paragraph icon. That will reveal a dropdown list of alternative blocks that can replace the current one:

Transform WordPress block editor into different blocks

Of course, you cannot transform the text into an image or vice versa, but you can make a regular image into a cover image.

11. Create Reusable Blocks

One handy, timesaving feature of the new WordPress Block Editor is the ability to make reusable blocks. These are custom blocks that get saved in the block inserter under the Reusable Blocks tab. Once created, you can insert them repeatedly wherever you want.

Creating a reusable block is very simple. All you need to do is go to the block you wish to add to your library of reusable blocks, click the three vertical dots in the floating menu bar, and select Add to Reusable Blocks in the dropdown menu. Next, you must give the block a title, and it’s good to go.

Article Continues Below

In the example above, we made a simple 4×6 table and saved it as a reusable block called “4×6 table.” This now appears in the block inserter and can be used just like any other block:

12. Count Words

Gutenberg has a neat feature to display the number of words, characters, blocks, titles, and headings in a post. This can be useful for SEO purposes or where you are paying your content writer by the word.

Calling up this information is simple. Just go to the floating toolbar and click on the Details button. The counts will appear in a popup below that.

13. Pin the Floating Toolbar to the Top of the Page

The floating toolbar that seemingly appears and disappears at random at the top of each block can be tiresome for some. Fortunately, there is a way of pinning it to the top of the page.

To do this, simply click on Options (the three vertical dots) at the far top right of the screen and select Top Toolbar. Now, the toolbar will stay in one place, although its options will still vary depending on the active block type.

Here is a screenshot showing the floating toolbar:

And this screenshot shows how to activate that:

 14. Use Spotlight Mode to Highlight the Active Block

We think enabling spotlight mode is essential to avoid accidentally making changes to the wrong block, particularly when the floating menu has been pinned to the top of the edit panel.

Spotlight mode grays out all blocks except the one which is currently active. To enable it, click on Options (the three vertical dots) to the far top right of the screen and then select Spotlight Mode.

15. Rearrange Blocks Using Drag and Drop

Undoubtedly there will be instances when you need to rearrange the blocks in your post. For example, perhaps you just want to reorganize the text a little or relocate a chart to a better location.

Either way, rearranging blocks in Gutenberg is easy. All you need to do is ensure that Top Toolbar mode is deactivated (see item 13 above), and then click and hold the Drag button (two vertical rows of three dots) in the toolbar. Then, while still pressing this button, you can drag the active block to wherever you want.

16. Create Columns Using the Columns Block

The Columns block in Gutenberg allows you to insert blocks or vertical columns into posts and pages, ideal if you are trying to create a newspaper-style layout or wish to group information in a certain way. What’s more, you can add other blocks within the columns, including more columns blocks.

To add a columns block, simply go to the point where you want to insert it, and then go to the block inserter. Next, locate the Columns block by scrolling through the list of blocks or using the search bar. You will then have a choice of options for the column layouts. Once you have chosen the one you want, the columns will appear automatically. Next, you can populate the columns with text images, charts, etc. by adding the appropriate block(s) into each column:

Create Columns Using WordPress block editor

Below is a screenshot showing a Column block of three equal columns (33/33/33) containing the following:

  • The left-hand column includes two blocks. The first is a Paragraph block containing text. Below that is another Column block with two equal columns, one of which has an image block and the other a paragraph block.
  • The middle column contains just a single Image block
  • The right-hand column has one Paragraph block followed by one Image block

17. Get More Blocks Using Third-Party Plugins

While the block inserter has Gutenberg blocks to cover most day-to-day page and post-building needs, there will probably be instances where you need more specific ones. Examples of these can include:

  • Countdown timers
  • Pricing tables
  • Testimonials
  • Accordions
  • Notifications
  • Different buttons
  • Social media
  • Maps
  • Sliders

The list is virtually endless. Head over to our article 24 Best Gutenberg Plugins For WordPress in 2021 for some ideas on what is available.

18. How to Disable Gutenberg

If you’re still not convinced that Gutenberg is the editor to use, you will be happy to know that reverting to the classic editor is relatively straightforward.

There are two main ways of doing the reversion. Firstly, you can use a plugin such as Disable Gutenberg or Classic Editor. The advantage of using plugins is they allow you to switch easily between the Gutenberg or classic editor – perfect where you have several backend users, each of whom has different preferences. Alternatively, you can do the reversion manually by following one of the several methods detailed in our article How to Disable Gutenberg in WordPress Editor (2021).

If you just need to use the classic editor temporarily, you can do so from within Gutenberg using the Classic block. That embeds the TinyMCE editor as a block, giving you the TinyMCE toolbar as well as any additional buttons added to that by installed plugins:

Disable WordPress block editor

Please note that where we have mentioned keystrokes for shortcuts, they relate to computers running Windows. Other operating systems may have different keystroke combinations for shortcuts.

Use These WordPress Block Editor Tips Today! 

Despite the bad press it suffered immediately following its launch in WordPress 5.0, the Gutenberg editor really is a versatile and simple way of creating beautiful, full-featured pages and posts for your WordPress site.

Sure, it is significantly different from the classic editor, and there will be a short learning curve associated with it. Still, the tips and tricks we have suggested will undoubtedly help ease the transition from the outdated and relatively inflexible classic editor to the versatility and flexibility offered by Gutenberg.

Which page builder are you using? Have you tried Gutenberg? We’d to hear what you think of it, along with any other tips you may have on getting the most out of it.

Stay informed on WordPress

Every Friday you’ll receive news, tutorials, reviews, and great deals from the WordPress space.

Invalid email address
A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.