WordPress 5.0 is the new version of WordPress and comes loaded with new features. On the one hand, it comes with a new content editor called Gutenberg. On the other hand, it comes with a new default theme, Twenty Nineteen. How do these changes affect you? Well, more than you think… especially from the editor’s side. But don’t panic.
In Nelio we are aware that Gutenberg is a controversial topic that is generating many doubts among users. Love it or hate it, it looks like Gutenberg will be around us whether we like it or not, so you better understand how it works and how to use it ASAP.
If you haven’t already done so, install Gutenberg in your WordPress and let us walk you through the steps with it. Today you will learn everything you need to know about the basic workings of Gutenberg and be ready for his triumphal arrival in WordPress 5.0.
The “Old” WordPress Editor
If you’ve been using WordPress for quite some time, chances are you’re 100% familiar with its content editing interface. As you know, until version 5.0, WordPress by default used the TinyMCE editor, as well as several “boxes” around it to edit additional aspects of your content:
The different plugins we installed in our site could extend this editing interface by adding, as I say, additional boxes with new functions. For example, our plugin Nelio Content adds several additional boxes, among which we found one to schedule all the social messages to promote the blog on social media:
The editor itself is exactly what you expect: a text area where you craft your content and a formatting bar to format text, add headlines, lists, and so on. Nothing fancy at all.
Gutenberg
Now let’s take a look at Gutenberg. What is it? Why should we talk about it? Is it so different from what we are used to? Let’s try to answer all these questions and teach you everything you need to know to make the transition as smooth as possible.
Nelio Popups
Fantastic plugin! It’s really easy to create popups as you’re already used to the editor, and all the options it has are really well crafted.
Juan Hernando
First Steps with Gutenberg
Let’s start by getting familiar with the new editor. The first thing we see when we create a new post on our blog using the Gutenberg editor is the following user interface:
As you can see from the previous screenshot, Gutenberg’s user interface is very familiar, but it’s different, strange at the same time. As an editor, its skeleton is the same we had before: a text area surrounded by some additional options. Sure, it looks fresher and less bloated, but the essence is there.
Now let’s move to the interesting part… let’s write some content! As you can see, Gutenberg welcomes us with a couple of messages inviting us to write some content: “Add title” followed by a “Add text or type / to add content“. Let’s follow its lead:
That was quite easy, wasn’t it? So far, so good! So let’s keep diving… what if you want to insert a link, a list, or format the text? How do you do that?
Where Are My Tools?
In our lifelong editor we were used to having a toolbar at the top. There we found everything we needed: bold, italics, links, alignments, lists, enumerations, headings… But in Gutenberg there’s nothing like that, there’s no toolbar. Or is there?
If you pay attention, when you’re editing a paragraph in your post (as we’ve captured in the previous screenshot), you’ll see the toolbar floating above it. And that’s precisely where you have the tools you were missing: alignment, bold, italics, etc. This is one of the first differences we found in Gutenberg by default: toolbars are contextual and appear in the block we’re editing.
What? You don’t like this behavior? No problem! Gutenberg developers already thought of that and added the possibility to change the behavior of the new toolbar and return to the old style.
Just go to the editor settings (the ellipsis icon at the top right corner of the screen) and activate the option Unified Toolbar to get the following result:
That’s good! This is becoming more like our usual editor, don’t you think? ?
Now take a closer look at your toolbar. What do you not see? Exactly! Gutenberg’s toolbar looks much less powerful than the one we had in the previous editor, because a lot of things are missing…
Gutenberg Blocks
Don’t worry, don’t despair. The important paradigm shift that Gutenberg brings is the notion of blocks. In Gutenberg, every fragment you add to your content is a block. And, as you can imagine, there are a lot of different blocks:
In the previous screenshot you can see a list with some of the most common blocks:
- Paragraphs are the basic building block of any post and therefore they are the default block Gutenberg suggests when writing content.
- Images and Galleries are also pretty common. As their name suggest, they’re basically used to insert images in your copy.
- Headings helps us organize our content.
- Lists format enumerations and a set of unordered items.
- Quotes let us quote someone.
Pretty obvious, right? The important thing here is the fact that, in Gutenberg, each and every part of our content is a block of a certain type. As a result of this fact, the actions we might use at any time depend on the block we’re working with:
For example, in the previous screenshot we see two new blocks: an image and a quotation. As you can see, the user is working with the image block and, therefore, they have an image toolbar accessible. That is, the user has access to actions like the image alignment or a button to edit its title and alternative text, but nothing related to text formatting (because it doesn’t make sense in this particular context and moment). If the user shifts their focus to a new block, the available actions will change to fit the new context and block.
On the other hand, you should know that in the sidebar of Gutenberg there is a tab called Block, where you’ll find even more options and toggles about the active block:
As you can see, Gutenberg presents a cleaner interface focused on the current task. So, instead of having toolbars with thousands of options, we let the editor show us what’s relevant and useful at every moment.
What About Everything Else?
At this point, it should be obvious that creating and managing content with Gutenberg is actually very simple. Despite all the changes it includes and his “new way” of doing things, the end result is very natural and intuitive.
But what about everything else? Categories, tags, featured images, authors… in the previous editor there were a lot of things “around” the text editor itself. Where are they? Let’s start with an example that belongs to one of the frequently asked questions: how can I change the permalink in my post?
In the previous version of WordPress, the permalink was generated from the title of your post and, in fact, the option to change it was just below it. We have already said that Gutenberg only shows the options that are relevant at any given time, and it seems that the permalink is related to the title of the post, so…
if we were to edit the title of our post, we might be able to change its permalink too. And indeed we are! Sure, it’s not as obvious as it was before, because now the setting isn’t visible at all times, but WordPress still uses the same logic as before. As I mentioned above: it’s a familiar interface but not quite the same.
All the other options, as it could not be otherwise, are available in the sidebar of the editor. There we found a tab called Document with the equivalent of the boxes we had in the previous editor:
Categories, tags, scheduling, excerpts… everything we had before is available here, waiting for us. It’s no big deal, is it?
Gutenberg and My Plugins
Finally, let’s briefly talk about Gutenberg’s compatibility with our plugins. As you know, in the previous editor plugins could add their own “customizations”. For example, a plugin like Yoast SEO added a new box to manage the SEO parameters of our post. But, of course, now there are no boxes… So how does this work?
The different boxes we used to have around in our previous editor are now placed around Gutenberg too, either after the content (as is the case of Yoast SEO) or in the sidebar sections.
In principle, you can assume that your plugins will continue to work with Gutenberg, as the new editor is, from the plugin‘s perspective, a simple upgrade in the UI. Unfortunately, though, there are plugins that might no be 100% compatible with Gutenberg and will require some extra work from their developers… don’t despair and support them, as I’m sure they’ll be interested in guaranteeing a smooth transition to the new editor.
In Summary
Gutenberg has come to stay. Although it’s an important paradigm shift and the blocks may seem strange at first, getting used to the new interface doesn’t take more than a few minutes.
I am fully aware that there are many scenarios in which Gutenberg is far from ideal, but I am afraid we will have to be patient and see how he evolves now that he is part of our reality.
What do you think? Let us know in the comments section below.
Featured Image by Alexander Andrews via Unsplash.
Leave a Reply