Image by Alexander Andrews via Unsplash

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:

Screenshot of the old WordPress editor, based on TinyMCE
The “old” WordPress editor has a text area and a formatting toolbar where you write content and multiple meta boxes around it with some extra options.

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:

Automatic Social Timeline
Automatically-generated social messages are based on (a) the content of your post and (b) social templates.

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.

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:

Screenshot of Gutenberg
Gutenberg Editor looks so familiar… and yet, nothing is quite the same.

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:

Writing content in Gutenberg
Writing content in Gutenberg feels very natural.

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?

Gutenberg Contextual Toolbar
Toolbars in Gutenberg are contextual and depend on the active blog. By default, they’re next to the block we’re editing at that moment.

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.

Gutenberg Customization
You can customize a few things about Gutenberg, including where the toolbar should be.

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:

Gutenberg Unified Toolbar
Gutenberg Unified Toolbar places the toolbar to its usual location; i.e. at the top of your editor.

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:

Gutenberg Blocks
Gutenberg organizes your content into blocks. Here you can see a few examples of the default blocks the editor includes.

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:

Image Block and Quotation Block in Gutenberg
More block examples from Gutenberg: an image and a quotation. Notice how the toolbar changes depending on the active block.

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:

Gutenberg Advanced Block Settings
Not only do blocks have their own toolbar, but also their own set of advanced options (if required). They’re in the right pane.

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…

Gutenberg Permalink
Changing a permalink in Gutenberg is as straightforward as it used to be… sort of. Just go to the title and the permalink setting will show up.

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:

Document Options in Gutenberg
You’ll find all the options you might be interested in in the editor’s right pane. They’re quite similar to what you’re used to, so no explanations are required.

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?

Yoast SEO metabox in Gutenberg
Gutenberg should be compatible with all your plugins. You’ll find your plugins‘ meta boxes in the usual locations: under the content or next to it.

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.

4 responses to “All You Need to Know About Gutenberg, the New WordPress Editor”

  1. Webtechgal Avatar
    Webtechgal

    Or you can bypass it with the Classic Editor plugin.
    The problem most of us have with it is why? Why do we need to learn this new system? What is the real benefit of it? After we have spent so much time and energy knowing how everything connects in the old system, and more importantly, how it will look when it is published.
    I remain unimpressed with the new interface and am not alone in that sentiment. It is also not cost effective for someone managing many sites to make that transition.
    When someone can promise me that one button will make a smooth transition for an already established site, I may consider it.
    For now, the classic editor is installed on all my sites.

    1. Antonio Villegas Avatar

      Sure thing. Installing the Classic Editor plugin is the conservative choice now. But in the near future we’ll need to update to the new editor in order to benefit from all new plugins/updates that will appear. As a plugin developer, I’m pretty sure the classic editor will be obsolete in a while regarding plugin compatibility and things like that.

      But hey, I totally understand and share your concerns.

  2. Lahcen Avatar
    Lahcen

    I do not like the old editor at all because of huge efforts to write and managing contents. I’m very excited with this new editor and I already convert some posts into blocks, but till now I have one issue: the style or classes coming with blocks are not applying in front-end – I can see the styling just in the editor side. Do you have any idea about this issue? I’m updated to WordPress 5.01, and almost help is about gutenberg plugin

    1. David Aguilera Avatar

      Hi! We’re also very excited with this new editor, as it looks promising and, in the long run, it should make WordPress easier to use and more user-friendly.

      Regarding your particular issue, I’m not sure (default) blocks have any particular CSS to be used in the front-end. The idea is that themes should define their own styles on how certain blocks should look in the front-end and they should also add a CSS style to modify how they look in Gutenberg, so that you get the same appearance in both sites. What you’re asking, however, is for blocks to overwrite the styles in the theme… and even though that’s entirely possible (if the developer who created a blog did so), that’s not the intended behavior.

      So, long story short, you can’t solve this issue without changing your active theme.

      Regards,
      David

Leave a Reply

Your email address will not be published. Required fields are marked *

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.