For a long time, the WordPress content editor stayed the same. And although it wasn’t packed with the latest features, you could still do the necessary editing and formatting tasks with it.
But then things changed.
Since the release of version 5.0 - on December 6th, 2018 - WordPress now comes equipped with a new editor called Gutenberg.
Many WordPress users were confused about how to use it and were wondering why the change occurred in the first place.
“Inspired” from this confusion, I wanted to explore the Gutenberg editor for WordPress, tell you what it’s all about and how to use it.
So What is Gutenberg Editor for WordPress?
But why change the old editor which people were already comfortable with using?
Well, the editor had stayed the same for a long time, and it already had competitors that could do much more than the classic editor was capable of.
As you can see in the following screenshots, the change was pretty dramatic. Before the Gutenberg-edition of WordPress, the editor looked like this:
And once WordPress 5.0 was released, the editor looked completely different:
Compared to the original TinyMCE-based WordPress editor where you added the content through a big text area, the new editor not only looked different but also worked differently.
Gutenberg Editor 101
With Gutenberg, you now build pages or posts with blocks. To illustrate how they work, let’s create a simple page with the new editor.
So first, log into your WordPress and click Posts > Add New. You should see the following view in your browser:
So what is going on here? Let’s see …
1. Add a new block.
2. Undo change.
3. Redo change.
4. Content Structure. This option becomes active when you add content to your page or post. The functionality shows the various metrics regarding your page; for instance, the word count of the post or page.
5. Block Navigation. This option also becomes active when you add content to your page. The functionality helps you to jump from one block to another.
6. Change the post’s permalink structure.
7. Title of your post.
8. Add a new block.
9. Content of your post.
10. Add image.
11. Add heading.
12. Add gallery.
When you enter new content in the content area, some additional formatting options pop up:
And by clicking on the arrow before the content area, you can change the location of the block.
How to Create a New Page or Post with Gutenberg
Creating a new post or page with Gutenberg is simple.
Once you have selected Add New command under Posts, or under Pages, enter the name of the page/post in the Add Title box. Then, start adding paragraphs to the “start writing or type / to choose a block” section.
The most interesting part of Gutenberg is the blocks section. When you click the plus sign at the top-left of the user interface or in front of the text “start writing or type / to choose a block,” you get a list of available blocks:
There is a lot to cover in that menu, so I suggest that you take a look at what blocks are available.
After you have created your content, make sure that other important settings are also in place:
Once everything is ready, it’s then just a matter of hitting the Publish button on the top-right, and your Gutenberg-made page or post is now live on your website!
How to Expand Gutenberg with Plugins
What’s nice about Gutenberg is that you are not limited to just the blocks that come with WordPress.
Just go to Plugins > Add New in WordPress, and search for new block plugins that you can use with your content:
I’m going to cover some of these plugins in a future post. But be aware that you can expand your Gutenberg blocks list if you want to.
The launch of the new block editor divided people into two camps: those who loved it and those who hated it.
It’s natural that at first, the new editor may cause some confusion. But after you get the hang of it, it becomes easier to use.
But still, if you don’t seem to make good buddies with Gutenberg, no matter how hard you try, here are a couple of alternatives you could check out.
1. Classic Editor for WordPress
It’s funny that one of the competitors of the Gutenberg editor is the former editor of WordPress. In other words, you can turn your new editor into the old one with a plugin called the Classic Editor:
When you look at the figures, it shows that this editor has significant demand. At the time of writing, it had close to 700 5-star reviews. People wanted the old experience back, and they got it back.
2. Thrive Architect
This tool is the one I’m currently using on this website. It’s a visual page builder for WordPress, and you create your content with elements.
Currently, Thrive Architect provides over 40 elements to choose from. In addition to building regular pages or blog posts with it, you can also create landing pages with this tool.
Read more about the plugin in my Thrive Architect review.
3. Elementor (Free or Pro)
Like Thrive Architect, you can also create pages and posts visually with Elementor. The product comes with two flavors, the free and the paid.
Gutenberg Editor for WordPress: The Conclusion
As you can see, Gutenberg Editor for WordPress brought a dramatic change to how you create and edit content in WordPress.
If you have used WordPress for years, this change takes time to get used to. But if you have just started using WordPress, you’ll get used to the new editor much faster.
And hey: There are always alternatives to replace the whole editor with a new experience. Just keep in mind that these alternatives may require some investment on your part.