The Gutenberg Editor: Here’s everything you need to know about WordPress 5.0

The Gutenberg Editor: Here’s everything you need to know about WordPress 5.0

Morgan Smith's Layout avatar

As a WordPress user, you’ve likely heard talk of the Gutenberg editor and WordPress 5.0 for the better part of this year. This exciting feature comes in the form of the latest WordPress update, “Bebo,” available starting November 6th, 2018.

This isn’t just any old update, however. The Gutenberg editor introduces a brand new WordPress publishing experience that’s pretty different than what you’re probably used to. It’s exciting, but there’s also a lot to think about as you get ready to update your site. To help make it all a little easier to understand, I’ve put together this guide to help you get started with Gutenberg!

A preview of the editor.

Here’s everything you could possibly need to know about WordPress 5.0 (AKA Gutenberg!):

What is the Gutenberg editor?

This all started with a little something called “Project Gutenberg” in June, 2017. While WordPress updates frequently, there hadn’t been any major updates to the WYSIWYG (What You See Is What You Get) editor in quite some time. And while the editor worked, it wasn’t always as flexible and customizable as users needed it to be.

In any given post, a publisher might include shortcodes and custom fields and meta boxes and custom code and on and on…all in an effort to make the built-in editor do more.

A view of the old editor.

Beyond these techniques, there’s also been a rise over the last few years of drag-and-drop tools in the WordPress community, giving users more visual control over the design of their pages and posts. These resources also made it easier for beginners or less-technical users to start publishing great content, without having to learn how to build a shortcode right off the bat.

Enter: Project Gutenberg.

It’s an effort to redefine the entire WordPress publishing experience, all starting with the post editor and introduction of blocks in WordPress 5.0.

Beyond the general look of the editor, there’s one major difference: the introduction of blocks. Now, creators will be able to add blocks of content to their post, whether that content comes in the form of words, visuals, buttons, videos, you name it.

You’ll still be able to add everything you used to in the editor – you’ll just be able to visualize it better.

Let’s take a look at some of the pros and cons of the Gutenberg editor.

Pros of the Gutenberg editor:

Customizing visual content is much, much easier.

As the publisher of a WordPress blog and frequent user of the post editor, Gutenberg is incredibly exciting. It provides so many options to create interesting layouts and custom content configurations, without needing to dive into the code every time.

Plus, with rich content being easier to create, I think we’ll start to see more variety between WordPress sites. While there’s nothing wrong with sharing the same layout, it’ll be creatively refreshing to see some differences.

More white space  = a better writing experience.

For fans of blogging on Medium (or even just typing in Google Docs), Gutenberg offers a cleaner writing experience in WordPress. It’s a breath of fresh air.

This may look like a mobile view, but there’s actually that much empty space!

New alignment options allow for interesting visual layouts and flexibility.

Gutenberg is introducing two new alignment options: Wide and Full Width. For creators looking to maximize the impact of the content on large screens, this is pretty exciting stuff. For more details on using the new image alignments, I recommend this guide from Rich Tabor.

Gutenberg starts to standardize how plugins and themes interact with posts and post meta.

Traditionally, themes and plugins might try to accomodate for the limitations of the old editor, in order to help users get the desired post effect. With Gutenberg, however, themes and plugins can focus on just being themes and plugins, instead of trying to make up for the differences.

You can create custom blocks.

This one is exciting for a couple of reasons. First, because site owners will be able to develop their own, on-brand blocks for maximum creativity and consistency across posts. But second, this opens up a whole new market for developers to create custom blocks to share with the WordPress community. Personally, I’m really excited to see what creators dream up in this space!

Cons of the Gutenberg editor:

Accessibility isn’t fully built-in yet.

One of the largest drawbacks to Gutenberg today is that it isn’t accessible yet. While it would be nice for it to launch as a fully-accessible version, at least it’s in one place for the community to work on.

It’s new, so there’s definitely a learning curve.

Like any update to functionality, there will be a slight learning curve for anyone using the Gutenberg editor for the first time. But remember: We’re part of the WordPress community, one of the most helpful places on the internet! If you get stuck, someone will help.

It also takes advantage of some great new technology, including bleeding-edge JavaScript using React. If you aren’t familiar with developing in these languages, however, learning how to work with them to rebuild custom site elements for Gutenberg is going to take some effort.

You need to install a plugin to “opt out” of Gutenberg.

If you’re someone who builds sites for clients, and want to opt-out of the update for the time being, you’re going to need to install the Classic Editor plugin on every single site. It’s a fair bit of work to NOT update something, but crucial if you want more time to test before updating to Gutenberg.

No markdown support.

For publishers who’ve enjoyed typing in markdown in the past, you may be surprised when the new editor automatically converts it into blocks. This could take some adjusting to.

It might not be fully compatible with your themes, plugins, or existing published content.

Because Gutenberg is so different than the past editor, there’s a chance it conflicts with your site’s set up or published content. This means there’s a lot of testing that needs to happen to ensure everything works together.

If you’re a developer, Ahmad Awais has developed a great toolkit for building Gutenberg-compatible plugins. If you’re concerned about your own site, I recommend updating to WordPress 5.0 in a test environment first, so you have time to test your site’s configuration. (Keep scrolling for more information on testing!)

If you’re worried about the cons, one thing to note: Once WordPress 5.0 is launched, that’s not the end of development on Gutenberg. Matt Mullenweg, Founder and CEO of Automattic, mentioned at WordCamp Portland 2018 that updates will continue to roll out every couple weeks, to continue making improvements.

Now that you know a little more about Gutenberg, let’s dive into how you set it up on your site!

How do I get the Gutenberg editor?

When you’re ready to use the Gutenberg editor, all you have to do is update your site to WordPress 5.0. Then just head over to edit a post, and you’ll see Gutenberg waiting for you!

If you’re using a managed WordPress host, you’ll want to check how they’re planning to update sites on their platform. Flywheel will be waiting until late January, due to the scale of this update and the time of the year.

Before you update to Gutenberg, I highly recommend experimenting with it in a test environment. This will give you the opportunity to see how your existing content reacts to it, and to make sure your plugins and theme are compatible.

How to test the Gutenberg editor

In order to safely test the Gutenberg editor before installing in on your live site, you can use either a staging site or a local environment. Local is a free local development environment that’s perfect for this.

A screenshot of Local by Flywheel

While a copy of your site is in the staging or local environment, go ahead and update to WordPress 5.0. Then, look around!

Here’s a checklist of things you should look for while auditing your site’s reaction to Gutenberg:

  • Are published posts displaying content correctly?
  • Do published pages look right?
  • Can you customize your theme as expected?
  • Do your plugins work like they’re supposed to?
  • When editing a post, does Gutenberg override any setting you’re used to?

Depending on the size of your site, the amount of content you’ve produced, and how you like to work, this audit may take some time. In the meantime, if you would like to update to WordPress 5.0 without using the Gutenberg editor, you can install the Classic Editor Plugin. This plugin will be officially supported by the WordPress core team until December 31st, 2021, so you have plenty of time to experiment between the editors and make changes as needed.

What’s next for Gutenberg?

As I mentioned, this is only the beginning for the future of the Gutenberg editor and the WordPress publishing experience as a whole!

As far as the editor stands today, you can expect more updates and support for Gutenberg as developers continue to test and iterate on it. Beyond the post editor, updates will likely come to page templates and even full-site customization.

Within the WordPress community, I’m excited to see how plugins, themes, and custom blocks start to play together to create incredible publishing experiences and published content. There are already some great resources for anyone ready to dive into Gutenberg blocks, like:

How are you feeling about Gutenberg? Are you excited to experiment with blocks? Are you nervous about the transition? Share any additional resources in the comments, so we can help each other learn!

Comments ( 5 )

  1. Rich Rawlins

    February 5, 2019

    1. The learning curve is substantial with the G update.

    2. G is still buggy.

    3. It will take a while for plugins to catch up.

    4. Things are going to be messy for a while.

    The end.

  2. Renee

    December 22, 2018

    The main issue I have with Gutenberg is that it is deleting content (intellectual property) when converting Classic to Blocks without any warning or ability to save the data.

    I am referring to the image block. The accessibility team decided people should be limited to what html tags can be used for an image. If a tag is not in the whitelist, it is deleted in the conversion. Two of them I know for sure is title="" and data-pin-description="".

    Additionally, the image block will not allow for those tags to be added. If you try it will give a message of invalid content and force you to remove them to resolve. The only way around it is to convert to html and then you can't view the image on the editor and have to preview the post to see it. That is not intuitive or user-friendly at all.

    All those folks using the title tag for SEO purposes are screwed. Likewise for pin descriptions.

    It was a sad day when folks behind WordPress decided it was okay to intentionally delete content. A very sad day indeed.

  3. Gloria Barr

    December 21, 2018

    Well, the old editor is good through at least 2022 I understand, so no rush to use gutenberg. In that time maybe they will come to their senses.

  4. Joey

    December 16, 2018

    I'll chime in with the other guys here. Repeat after me:

    User Interfaces are not art projects.
    User Interfaces are not art projects.
    User Interfaces are not art projects.
    User Interfaces are not art projects.

    Repeat until UI designers stop wasting my screen space. Clutter is bad, sure...but so is waste. A good UI balances the two, and when over half of my editor's screen space is not being used for data entry, it is not a better writing experience.

    Now, if there are, in fact, people who wish to use less of their screen to hold text, then by all means, I have no issue with that. Add a way to use "improved typing space" or whatever, so that those who wish to edit in this way can do so. If it is better for them, by all means, make it an option.

    ...but don't drastically reduce information density and call it 'better' without proof that it is so.

  5. Ken Sheldon

    December 14, 2018

    I count myself among those who can see that long term Gutenberg may have a future, but as it stands at the moment it's a car crash. The Gutenberg populates the editor with acres of wasted white space while cramming important options into a narrow strip down the side of the screen, ala the Customiser, which is also poorly designed in my view. You state that "more white space = a better writing experience"; how you can arrive at such a bizarre conclusion is way beyond me I'm afraid.
    I also number myself among those who writes all post and page content in Markdown because it's quicker and more efficient than any other option.
    Whoever designed the UI couldn't have made it more unintuitive if he'd set out with that sole intention. It leaves the overwhelming impression that the designer had never written a post in his life.
    I'm clearly not alone in that view since the number of one-star ratings given to Gutenberg in the few days since 5.0 launched has absolutely rocketed.
    Given that it's been so poorly received one would expect to see some embarrassment or humility on the part of the driving forces behind this, Matt Mullenweg and the development team, but no – apparently we're all wrong and they're right.
    This whole process has angered many thousands of long-term WP supporters, developers and users worldwide and it's hard to see how the rift can ultimately be healed. And it's all so unnecessary; Gutenberg could have been phased in gradually, users could have been enticed into using it, rather than being forced into it, as so many level-headed observers advocated.
    It's yet another instance where the big issues of the day – Donald Trump and Brexit are other examples – are increasingly polarising society.

    • aleksandar

      December 14, 2018

      I totally agree with Ken, white space doesn't mean better writing [or reading??} experience automatically. Let designers decide what they need, if you want my opinion built in the gutenberg option to control white space [and make sure that it is specified in several ways: pixels, % of the screen, relative to the font size etc.]

Join the discussion