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 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.
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.
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.
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.
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.
Another great example is the image block. You can change the image style, add alt text, and select the image size.
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.
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.
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.
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:
- Gutenberg Blocks – Ultimate Addons for Gutenberg — this plugin comes with extra blocks like social sharing icons, Google Maps, price list, table of contents, and more.
- Atomic Blocks – Gutenberg Blocks Collection — this plugin includes blocks like accordions, call to action, author block, and more.
- Page Builder Gutenberg Blocks – CoBlocks — this plugin adds page builder abilities to Gutenberg with row and column support as well as blocks such as click to tweet, carousels, food and drinks, gif blocks, logo and icon blocks, and more.
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.
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.
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!