WordPress 5.0 and Gutenberg Are Here: 5 Steps to Take Now

WordPress Gutenberg

Big news in WordPress: on December 6, 2018 (last Thursday as I’m writing), WordPress 5.0 shipped. Among a few smaller updates was one massive one: the long-awaited Gutenberg editor has replaced the TinyMCE editor as WordPress’s official content editor.

This guide to navigating WordPress 5.0 is written for people who may have dozens of WordPress sites, possibly operated by nontechnical site owners.

Fortunately, there’s no need to panic: Gutenberg is, overall, a Good Thing, and you can navigate its rollout in WordPress 5.0 without tears or late nights.

This guide is written for people, like me, who have up to dozens or hundreds of sites running WordPress, many of them operated by nontechnical site owners, all potentially updating to WordPress 5.0 at random times. And it answers a question so simple it’s not even grammatical: Gutenberg here, what do?

Here’s the answer, in five steps.

1. Breathe

Gutenberg is the largest change to WordPress’s core functioning in recent memory, and reactions to it throughout its development cycle have varied from excitement to optimism to horror to (this being the internet) a good deal of blind, quenchless rage.

None of those emotions have dimmed with the launch of WordPress 5.0 itself, which was rushed and erratic and has opened new questions about WordPress’s governance model as an ambiguous surprise-dictatorship.

Still, the truth is that most of the high emotion around Gutenberg and WordPress 5.0 is misplaced. This is true whether:

  • You haaate Gutenberg and always have and now there’s no escaping it
  • You’ve been excited about Gutenberg, you updated to WordPress 5.0, and now something’s not working right
  • You’ve been trying to ignore the whole thing, until you got calls from five anxious clients whose sites all broke in different ways when they updated WordPress.

In any of these cases (and any others!), don’t stress. Gutenberg is a good thing for WordPress long-term, and it’s not broken software, despite what is bound not to be a there-were-absolutely-zero-issues rollout across millions of live sites.

What’s more, you don’t have to use it yet if it is causing problems. So we have time.

Educate yourself on what Gutenberg is and what it’s for (step #3 below), and how not to use it on sites that don’t play well with it (#2 below), and you shouldn’t need to spend any more time rage-downvoting the Gutenberg plugin, flaming the release announcement in the WP Tavern comments, or any of the other less helpful impulses that sometimes grip otherwise nice people.

2. Know Your Outs

One of the most important things to know about Gutenberg: You don’t have to use it yet.

This is one of the most important things to know about Gutenberg: You don’t have to use it yet.

If Gutenberg is bugging your site out, all you need to do is install the “Classic Editor” plugin, and your site will now continue to run the Classic Editor plugin rather than Gutenberg. The plugin has 900,000 installs and a >4.9 rating in the plugin repository, which I’m guessing is a bit bittersweet for the Gutenberg team, but at least you know it works. 🙂

You can also install the Classic Editor plugin right when you update to WordPress 5.0, so you don’t have to hold back on updating WordPress itself to 5.0. Just follow (or tell your clients to follow) the links below, which appear on the “Welcome” screen post-update:

gutenberg opt-out wordpress 5.0

Clicking the link above takes you to the bottom of the page:

gutenberg opt-out classic editor install wordpress 5.0

Matt has promised to support the Classic Editor “through 2021,” which is a lot of time to let Gutenberg get the bugs out, and to update the parts of your site that are breaking Gutenberg itself.

Rolling Back to the Classic Editor with Existing Gutenberg Posts

You can still install the “Classic Editor” plugin even if you’ve started to author posts in Gutenberg.

One extra layer I’ll add is that you can still install the “Classic Editor” plugin, even if you’ve started to author posts in Gutenberg. Probably the most weird/genius thing about Gutenberg is that its actual markup all lives in HTML comments, meaning that it falls back to clean HTML.

So you can roll back to Classic Editor even after creating a fair amount of content with Gutenberg, and you won’t lose that content (like you might if you tried deactivating certain commercial page builders)—you’ll just lose whatever Gutenberg-only options you used within it.

3. Understand What Gutenberg Is, and What It’s For

Once again, Gutenberg isn’t WordPress’s doom, or its salvation. (Repeat step #1, “Breathe,” if needed.) It’s simply a better content editor than TinyMCE. You should understand the argument for Gutenberg, and the general outlines of what it does and doesn’t do.

Why Gutenberg Exists

For a good explanation and defense of Gutenberg’s existence, I’d recommend Matt’s WordCamp US talk from last Sunday announcing its launch:

If you’re short on time, the answer is this: the TinyMCE editor sucks, and WordPress’s competitors (like Squarespace) are slowly winning because of it. So are dozens of incompatible WordPress page builder plugins, many of them really low-quality. Gutenberg is WordPress’s official attempt to fix that, modernize and standardize the content editing experience, and ensure WordPress stays on top.

What Effects Gutenberg will Have on WordPress

I’ve written very extensively on what Gutenberg is for and why it’s, overall, a good thing, in an article from almost this exact time last year:

This Changes Everything: Gutenberg is Good Now

Most of the analysis on Gutenberg’s effects on the community is as true now as it was a year ago. Recommended reading. 🙂

If you want to understand more in-depth what Gutenberg is, what it isn’t, and what it is doing and will do to the WordPress ecosystem, there’s a good amount of further analysis in our premium course Up and Running.

Learning to Use and Develop with Gutenberg

In terms of learning the Gutenberg UI and software system, here are a few resources I’d recommend:

4. Watch for (and Report) Bugs

As of right now, Gutenberg is surprisingly buggy. At some level, this isn’t anyone’s fault: it’s an enormous change, like upgrading a ship’s engine from steam to nuclear mid-ocean.

But undertandable or not, this bugginess is absolutely something to be aware of: WordPress 5.0 shows lots of signs of not being a clean install across almost all sites, the way most other WordPress major releases are.

For sites you manage yourself, my advice is to enable Gutenberg and experiment with it to see how it behaves.

For sites you manage yourself, where you can afford to do a bit of fiddling, my advice is to enable Gutenberg and experiment with it to see how it behaves. Gutenberg isn’t broken, and on newer installs running newer themes and plugins it’s likely to work seamlessly. But I would recommend that you stay alert on the sites where you enable it.

Bugs and Issues I’ve Noticed in WordPress 5.0

Here are the bugs and warning signs I’ve noticed so far when I’ve tried to implement Gutenberg on my own sites. This isn’t “a list of Gutenberg’s bugs,” it’s a list of the issues I’ve run into in only a few hours of working with Gutenberg live:

Breaks in combination with some old plugin versions.

Upgrading to WordPress 5.0 caused the post and page editors on one of my sites to break completely. I realized that this was because the site was running a 1.x version of Beaver Builder Standard. Updating that plugin fixed the problem.

The broader point is that sites with lots of old plugin versions running around are at a high risk of Gutenberg misbehaving. 

Scary behavior with WooCommerce.

As of right now, WooCommerce’s homepage is displaying the following message:

gutenberg woocommerce warning

The “Tell me more” link doesn’t give any helpful detail on why this is important. This is especially unnerving as WooCommerce, of all the important software projects in WordPress, tends to make breaking changes, making updating WooCommerce relatively scary on its own.

Breaks inline <script> tags.

Inline <script> tags are bad, but I have a client who uses them all over the place because of the influence of a previous developer.

Gutenberg breaks these inline scripts by adding <p> and <br> tags to them. Below is the client’s “Cart” page, which is a shortcode plus a (now broken) Google Analytics embed script:

gutenberg breaks inline scripts

You can fix this by manually cleaning the added HTML markup and moving the inline script to an HTML block. But I just rolled that client back to the Classic Editor, at least until we can clean up his inline scripts.

Buggy permalink previewing.

At present, Gutenberg doesn’t properly strip special characters from its suggested permalinks for post drafts:

wordpress gutenberg permalink preview bug

All those special characters in the “Permalink” section are really bad: URLs shouldn’t have those. Whereas the old editor does this correctly:

wordpress tinymce permalink preview

This is only for post drafts—when you publish the article it’ll have the correct permalink—but it’s still unnerving.

Changes the TinyMCE Editor in some ways.

The Classic Editor plugin is designed to exactly recreate the old TinyMCE editor, but the editor in WordPress 5.0 with Classic Editor installed actually behaves differently from the TinyMCE editor pre-WordPress 5.0, in several ways that I’ve observed while writing content on WPShout itself. I’ll list what I’ve noticed from most to least important:

  1. Now contains <p> tags. The text view of the Classic Editor has always auto-generated <p> tags, which are hidden even in its view. This is no longer the case, at least on WPShout, as the following filled-with-<p>-tags Classic Editor view of this article shows:

    wordpress classic editor with paragraph tags

    Click to enlarge

    If you delete these <p> tags, the post actually loses them on the front end, even if the usual spaces are in place. This is a first for the Text Editor. Given how much confusion hiding <p> tags causes, I’m not sure if it’s a bug or a feature, but it certainly is a change.

  2. Occasional scrolling mishaps in the Text Editor. The Text Editor sometimes seems to try to scroll me all the way to the bottom of the page, which is definitely not great. It may be interacting with another plugin we have running, but it certainly didn’t behave this way prior to 5.0.
  3. JavaScript scrolling is different. The Classic Editor plugin appears to inherit Gutenberg’s “swooshy” JavaScript scroll behavior. This is okay in general, but it’s a lot more noticeable than the instant jumps in the classic TinyMCE editor, especially in the Text Editor and especially if you’re doing something like a ctrl+f (or cmd+f) search of the page content for a specific word.

None of these changes breaks everything, but they’re worth knowing about; and in general, it is fair to say that the plugin-based Classic Editor plus WordPress 5.0 is not identical to the TinyMCE editor as it behaved in WordPress 4.9 and before.

What to Do About Bugs

Report Them

WordPress is always looking for this kind of feedback—and especially now with Gutenberg just released—so if you’re good at writing bug reports, you can create a new ticket at https://core.trac.wordpress.org/. I’ve reported the one about permalinks (here’s the ticket), and it’s a good feeling, although I have no idea if or when it’ll be addressed.

Rollback to the Classic Editor for Now

In terms of your clients themselves, it’s my opinion that rolling back to the Classic Editor is often a better option than spending paid time addressing newly broken things.

After the rollback, put yourself and your clients on a journey toward modernizing their sites. For example, schedule a time to bite the bullet and finally upgrade from WooCommerce 2.x. Then reintroduce Gutenberg when everything’s up-to-date and being done properly.

5. Get a Good Page Builder

As a layout builder, Gutenberg is much better than the TinyMCE editor, but it’s also way behind good page builders.

As a layout builder, Gutenberg is vastly superior to the old TinyMCE editor. As I was glad Matt noted in this year’s State of the Word talk, it’s absolutely insane that WordPress made it impossible to put two images next to each other without special code training or additional software. It’s 2018. We have actual flying cars. It’s long past time for WordPress to ship with the extreme basics of layout, and that’s what Gutenberg does.

But Gutenberg is also way behind good page builders. It’s more difficult to use, it doesn’t do any of the actually hard layout stuff (like margins and padding and custom mobile behavior), and—most crucially—it’s not on the front end.

I’ve recorded an entire webinar exploring this, called “Why Gutenberg Doesn’t Kill Page Builders (Yet).” I highly recommend watching it. And whether you watch it or not, please take my advice and get a good page builder, rather than trying to piece together client homepages, landing pages, etc., with Gutenberg.

So which page builder to get? I’ve written an extremely thorough review of WordPress’s major page builders, and Beaver Builder comes out on top:

Best WordPress Page Builder

Beaver Builder

Reliability is everything in a page builder, and Beaver Builder is the most technically solid of the major options.

Elementor is decent too. All the other ones are (and I hope this doesn’t sound harsh) really bad.

Welcome to the Gutenfuture

So, Gutenberg is here. It wasn’t easy, it wasn’t pretty, and it still needs work, but it is a better direction forward for WordPress. If you follow the steps above, you can also navigate WordPress 5.0 and the launch of Gutenberg, even if you support dozens of sites for nontechnical clients.

How has WordPress 5.0 been for you? Re-re-read step #1 (remember: the name of the step is Breathe), and then we’d love to hear from you in the comments below, or in the WPShout Group on Facebook. Cheers!


    4 Responses

    Comments

    Add a Comment

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