Creating Great Content with Gutenberg

by May 4, 2020Content Strategy

Since version 5.0, WordPress has had a new content editor. Known as the Gutenberg editor during the development stage, Gutenberg has caused a lot of uproar in the WordPress community. 

Some loved it, while others were less than thrilled. But whether you like it or not, Gutenberg is here to stay and it brings a whole new approach to the way we create content with WordPress. 

In this article, we’ll take a better look at Gutenberg and show you how you can use it to create great content with the, now default, WordPress Gutenberg block editor.

What Exactly Is Gutenberg?

Gutenberg is the development name for the new block editor that was introduced with WordPress 5.0. It replaces the TinyMCE editor and lets you use content blocks to add text, images, and more to your posts and pages. 

Nowadays, Gutenberg is simply referred to as the WordPress block editor or more commonly, the block editor.

Is WordPress Gutenberg Editor Free?

Considering Gutenberg is part of the WordPress core, yes, Gutenberg is free just like WordPress itself.

Gutenberg Editor vs The TinyMCE Editor

As mentioned earlier, Gutenberg editor is a completely new way of adding content to your WordPress posts and pages. Take a look at the screenshot below to see the visual difference between the two:

The new WordPress content editor, “Gutenberg”.
The previous WordPress content editor, “TinyMCE”. Photo via Kinsta.com

The TinyMCE editor that was previously used in WordPress is now referred to as the Classic editor.  

What Are Gutenberg Blocks?

Gutenberg blocks are simply the blocks of content that you use to add content to your post. You’ll find image blocks, paragraph blocks, button blocks, list blocks, and more. Some WordPress plugins now include their own blocks so you can easily embed their features into your posts and pages. 

How Do I Use Gutenberg In WordPress

Now that we’ve covered what Gutenberg is and what content blocks are, it’s time to show you how to use Gutenberg in WordPress and create great content with the blocks. Let’s dive in!

Getting to Know Gutenberg Editor

Before we dive into blocks and how to use them, let’s take a moment to familiarize yourself with the Gutenberg editor. As you can see from the screenshot below, the editor looks rather empty. 

A fresh post inside Gutenberg.

However, if you press the + sign, you can start adding blocks to it. We’ll get to the blocks in a moment, but for now, we’ll continue our Gutenberg overview.

At the top of the screen on the left side, you’ll see a bar that has a + sign, undo and redo arrows, the information panel that shows you the word and character count, the block navigation, and the tools icon which allows you to switch between block selection and block editing mode. 

The right-hand side of the screen looks a bit different, too. First off, it’s split into two sections — one for the document where you can control the post or page settings and one for the blocks where you can control specific block settings. 

Finally, the top right-hand side has controls for saving your post as a draft, scheduling it, and publishing it right away. It also has buttons for switching to full-screen mode, toggling between the visual editor and the code editor, and additional tools for working with blocks. 

Working With Blocks in the New Editor

To add a block, click the + sign either in the top toolbar or in the post editor, itself. Alternatively, you can start typing and the first block that will be added to your post will be a paragraph. 

Gutenberg’s block selector.

If you click the + sign, there’s a number of blocks to choose from. By default, the first few blocks you see will be the commonly used blocks like paragraphs, image, list, quote, cover, page break, audio, and gallery. 

The various default block types within Gutenberg.

Click the upward arrow and you’ll see there are more categories of blocks to choose from, including:

  • formatting blocks like code and tables.
  • layout elements such as columns and buttons. 
  • widget blocks like social media icons.
  • plugin blocks if you have a plugin that has its own blocks.
  • embed blocks for adding content from websites like Youtube, Twitter, Spotify, DailyMotion, and more.

Let’s add a paragraph block to the post editor. As you can see in the screenshot below, each block has its own toolbar with its own options. For example, the paragraph block can switch between types of text blocks (various headers, paragraphs, etc.). You can also control the alignment, add links, bold the text, and more, much like your typical text editor.

Format options for a selected block within Gutenberg.

Clicking the button with three dots will reveal additional options such as the ability to duplicate blocks, add blocks above or below the currently selected block, group blocks, and more.

To add another block below an existing block, simply press enter. Then, add a new block by pressing the + icon and selecting the block you want. By pressing enter and continuing to type, you will default to a new paragraph block.

Moving Blocks in Gutenberg

One of the coolest things about blocks is that you can move them around. When you select a block, you’ll notice arrows on the left-hand side of the block. Pressing the up arrow will move the block above and pressing the down arrow will move it below. 

You can also move the blocks around by clicking and holding the dots in between the arrows, dragging and dropping the block above or below another block. This is similar to how page builder plugins work, although it may not feel as freeform.

Document and Block Settings in Gutenberg

We mentioned earlier that you can access document settings and block settings separately in Gutenberg. The document settings should be pretty familiar as they now control everything related to the post or page you’re working with. 

Use the document settings to add categories to your post, control post visibility, add tags, assign a featured image, adjust comment settings, create a customized excerpt – pretty much anything you can imagine in adjusting a post’s or page’s universal settings. 

The block settings, on the other hand, allow you to style individual blocks. For example, when it comes to paragraph blocks, you can turn the first letter into a drop cap, change the color of the text, add a colored background, and change the text size. 

The Paragraph block settings toolbar above a selected block.

Another great example is the image block. You can change the image style, add alt text, and select the image size. 

Working with an Image block within Gutenberg.

Some blocks have more settings than others but this gives you even more customization options on the block level to create a truly unique and effective blog post or page. 

Saving and Reusing Blocks in Gutenberg

Another cool thing about blocks is that you can save them as reusable blocks. For example, let’s say you want to encourage your readers to share your content on social media or leave a comment at the end of each article. 

You can add a paragraph block and make the text size larger so it stands out from the rest of the post. You can also add a background color to make it more noticeable. Once you have styled the block exactly the way you want it, you can save and reuse it in each and every post you create from then on.

In the example below, you can see how we styled a paragraph to signal a call to action to share the post on social media. To save our creation as a reusable block, click the three dots in the block toolbar, then click “Add to reusable blocks”. Enter a name for it and click Save. 

Saving a customized block to be reusable.

To add it to your post, simply click the + sign, scroll down to find your reusable blocks, and select the saved block you want to add.

Selecting a saved, reusable block.

Grouping Blocks in Gutenberg

You can group two or more blocks together. This is especially useful when you pair it with the ability to save and reuse blocks. For example, you can pair the Social CTA block with social icon blocks. 

Alternatively, you can add a paragraph paired with a newsletter signup form to create a custom email subscribe block that stands out from the rest of the post and helps you build your email list.

Another example would be adding a Calendly block (found in Jetpack) paired with an image or a paragraph to encourage people to book a free consultation call with a consultant or agent that works at your company.

You can easily group blocks by selecting two or more blocks and then choosing the Group option from the block toolbar. You can then add them to your collection of reusable blocks as explained earlier. The possibilities are endless, so be sure to explore this feature to make the best use out of it. 

THe “Group” option selected with a Paragraph and Image block selected.

Bonus Gutenberg Tips and Tricks

By now, you should have a pretty good idea of how to work with Gutenberg blocks and how to use this new block editor to create great content. Here are a few extra tips that will help you improve your Gutenberg experience even more:

  • You can easily add blocks by typing, then you’ll see a list of available blocks you can instantly insert into your post or page. 
  • You can move the block toolbar to the top of your screen when you click the three dots in the top right-hand corner of the editor.
  • Use the Cover block to add beautiful cover images to your posts and pages. Cover images are usually very wide. This works great to create post sections and engaging layouts.
  • You can give your posts and pages an editorial look by using a column table.
  • Gutenberg now comes with a table block so you don’t have to install a separate plugin just for tables.

Adding More Blocks to Gutenberg Block Editor

While Gutenberg offers plenty of blocks to get you started, there are several plugins out there that allow you to add even more Gutenberg blocks. Here are a few options:

Are All Themes Compatible With Gutenberg?

Considering how many themes are available both in the official repository and on third-party websites and marketplaces, it’s almost impossible to claim that all of them are compatible with Gutenberg. 

However, the vast majority of popular themes like Divi, StudioPress Genesis, Astra, GeneratePress, OceanWP, and others have full support for Gutenberg. You can easily find out if a theme supports Gutenberg or is compatible as most theme developers will state this on the theme’s official website.

How Do I Disable the Gutenberg Editor

What if you know all about Gutenberg, but don’t like working with blocks anyway? Fear not, as you can install the Classic Editor plugin from the official repository and get the old TinyMCE editor back.

The “Classic Editor” plugin used to revert back to the TinyMCE editor within WordPress.

At the time of article’s writing, the Classic Editor will be supported until 2022, or as long as necessary, so you have time to get used to the Gutenberg block editor and learn how to use it more comfortably.

Final Thoughts

The Gutenberg editor is now a part of core WordPress and the development team behind the platform has big plans for its future. Eventually, Gutenberg is expected to create navigation menus and have better integration with themes and the Live Customizer.

Indeed, the future of Gutenberg looks bright, so now is the perfect time to learn how to use this new block editor and get settled into WordPress’ creative vision.

Use the information laid out in this article to guide you in creating great content with the WordPress Gutenberg block editor. And of course, if you liked this article, you might want to check out our checklist for launching a new website.

Despite its power, Gutenberg is simply one tool in your arsenal when creating content for a lead generating website. If you would like to dive deeper into the tools offered by WordPress, there are plenty of services out there to learn!

Download our Inbound Marketing Playbook

Take a PDF copy of our Inbound Marketing Playbook with you to read on the go.

Let's Work Together

We are the leading  WordPress development and HubSpot Consulting agency in the D.C. area, working with brands to attract and retain clients by leveraging web technologies and inbound marketing methodologies.

Don't be shy, drop us a line. Whether you are aiming to launch a new website yourself or want to hire a team of experts to build a custom site, we'd love to hear from you.