Should You Try the New Editor on Your WordPress Site?

The next version of WordPress (4.9.8) will show on your Dashboard a prompt alerting you to the “new, modern publishing experience coming soon”. The new version will be released July 31, 2018. Over last two months, I have been following the development of the Try Gutenberg Call-out for the WordPress dashboard. Now that it will actually come to pass, I share a few pieces of information that might help you with the decision. Should you try or shouldn’t you?  

What is Gutenberg?

It’s the code name of the new visual editor for WordPress. Gutenberg will be merged into the WordPress Core software in version 5.0, due out later this year. During its development it has been available in various stages as a Featured Plugin for people to test and become familiar with it. Once the new editor is rolled into WordPress Core, it likely will be called the “Editor.”

Let Morten Rand-Hendrikson take you on a tour of the new editor in 4 minutes.

Purpose of the Call-out

This trial period is part of the phased rollout for Gutenberg which will be incorporated into WordPress Core later this year. Its purpose is to get as many users & websites as possible to use Gutenberg. The goal is 100,000 sites and those sites should publish a combined 250,000 posts. Currently, the Gutenberg plugin is actively installed on approximately 14,000 sites. By the time the goal of 100,000 sites is reached, there is a good chance–via an increased feedback loop–that many bugs and incompatibilities can be fixed prior to the new editor getting into Core.

Who shouldn’t use Gutenberg?

In short, if you depend on your ecommerce site or your online learning site to bring in revenue, don’t use it on your live site…yet.

If you have a ton of plugins already installed, and if you do a lot of fancy massaging of your post and page content, you might not opt for installing the Gutenberg plugin just yet. We suggest you copy your current site to set up a staging site, then take your time testing Gutenberg within your staged site before you install it on your live site. Here are some easy to follow instructions on how to copy your website for testing.

If you simply want to get a feel for the new editor without involving your own website, the team of WordPress VIPs has created a nice sandbox to play with Gutenberg.

Content Creators Using Page Builders

Page Builders such as Elementary, Beaver Builder, SiteOrigin and Visual Composer are in various stages of making their plugins compatible with the new Gutenberg editor. For now, just wait until a later release of both the editor and WordPress Core. That’s also my recommendation if a Grid Page plugin is used, in essence a mini-page builder.

Go the route of the “Not Ready Yet” and click on “Classic Editor.”

Only for Post and Pages

If you do use the new editor, once the Gutenberg plugin is activated the editor only appears for post and page edits. If you have plugins that use custom post types such as Team Members, Events, Portfolio, etc. they still open with the Classic Editor.

Most plugins will be compatible with Gutenberg; other plugins don’t touch the editor at all. Daniel Bachhuber, WordPress Core developer, started the Plugin Compatibility Project. He found that of the top 5,000 most installed plugins, nearly 75% don’t touch the editor screen at all and should be compatible right out of the box.

Graphic: Plugin Compatibility Projects

90.46 % of all tested plugins are deemed compatible with Gutenberg. (of 894 plugins tested)

With all the fanciness of the new editor environment, once you hit the save/publish button the content is saved in the database as “the_content.” A lot of Plugins and Themes tap into that part and not the editing part.

Put on your reading list also Mika Epstein’s blog post: “You’ll Probably be Fine with Gutenberg“. Mika is part of the plugin review team and also works at Dreamhost.

Sites using Custom Post Types plugins (i.e., Events or Products or Recipes) will have both editors in use: Gutenberg for posts and pages, and Classic Editor for everything else until WordPress 5.0 will be released.

Most meta boxes for custom fields also work very well for Gutenberg as will shortcodes made available by various plugins and themes.

If you find inconsistencies or “hiccups,” deactivate Gutenberg and see if they go away. If you want to research it a bit, it would be helpful if you would let Gutenberg development team know what you find so they can work on a fix, or perhaps connect with the plugin authors to help coordinate updates.

Now that we got all the preliminaries out of the way, and you decide to make the jump, let’s talk through what will happen.

For those of you, who are in a rush, a video that takes you from Dashboard screen above to a first blog post with the new editor.

What will change in your WordPress Admin?

New Menu: Gutenberg

Installing the Plugin gives you a new menu item in your WordPress Admin called “Gutenberg.” It has four menu items: Demo, Feedback, Support and Documentation.

All “Edit” links will bring you to the new Gutenberg Editor

  • On the front end (if your themes supports it)
  • Admin header “Edit Post”
  • Admin header “New > Post or Page”
  • “All Posts” page. There you also see an additional link “Classic Editor,” which allows you to edit your post in the classic editor. That’s particularly helpful if you want to edit older content.
Classic Editor link in All Posts view

What Happens With My Existing Content?

The short answer: nothing. It display as it did before.

If you need to edit it, you have two choices:

  • You can click on any Edit link just as you did before, except now it will open it in Gutenberg, and it will display in the ‘Classic Editor Block’ and you can edit as you want within the restrictions it shows.
  • Or, you can use the ‘Classic Editor’ link from the posts list and edit it in the Classic Editor.

And just this moment I realize how confusing this sounds. These two things which have similar names are actually two different things. These two screenshots will help.

Admin Screen Classic Editor:

Admin Screen Gutenberg with a Classic Editor Block

Content in Gutenberg / Classic Editor Block

Now, you can edit your old content in a fairly familiar interface.

In the above screenshot of the Classic Editor Block, you also get a “3-dot-menu.” When you click on it you find items that are available to most other blocks as well, and the one relevant here: “Convert to Blocks.”

Convert Existing Content to Blocks

Before you think about doing this, make sure you have revisions enabled to have previous version to revert back to should a conversion fail for some reason.

There isn’t a whole lot of reasoning to convert all your content to blocks.

One reason could be that you want to use some of the new blocks that weren’t available to you before to spruce up your current pages to create a better experience for your readers, or perhaps you want to mix in a few more interactive components of multimedia content.

If we do this in above example, the result doesn’t look much different from before.

Content Converted to Block

New Features in Paragraph Blocks

Now you can apply some of the additional features available to paragraph blocks:

Add a Drop-Cap, change the background and the text size. Those tools are available in the sidebar of the editor, in the tab “Block.”

New Featured for Paragraphs

Will my Theme Work with Gutenberg?

As a general rule, Gutenberg is compatible with any standard WordPress theme. What you might see is that the editor view is not exactly what you will see on the front end. But it comes very, very close.

But there might be little tweaks necessary. Let see how our example worked:

Frontend view of paragraph

So that wasn’t so bad. Apart from the different styling of the Drop-Cap letter the rest looks quite close to the view in the new Editor.

How to Test Gutenberg Blocks with your Theme

If you want to get a good look at how the rest of the blocks work with your existing theme, I used a prepared text file with all the blocks in different variations and added them in a post via the Code Editor. You can grab the text file here, and watch this video on how to use it in a post. I also published a full set of instructions if you need additional assistance on how to explore this journey.

Or you can install Rich Tabor’s Block Unit Test plugin. This plugin adds a new page automatically to your site with a set of blocks and you can review it on the front end.

Known Issues with Content Conversions to blocks

Content created by Page Builders

Page Builder actively change how the editor in WordPress behaves. Some of the authors have already added Gutenberg-readiness, in one way or another; but in general, assume that the produced content doesn’t convert well to blocks. (See above.)

Switching Back and Forth Between Gutenberg and Classic Editor

Once you convert content to blocks, editing the same post will cause few quirks. You will be able to edit a Gutenberg post in the Classic Editor, but the other way around will probably fail to some extent.

Andrew Ozz, WordPress lead developer, explained on Slack (login required) : “When editing a post in Gutenberg and classic and switching back and forth, the blocks become “invalid” (because of the changes). This is pretty much the same as editing the block’s content in Gutenberg, either on block by block basis or the whole html. After that Gutenberg offers to convert the block to an “HTML Block”.

Another reason to try things on a test site is the uncertainty around going back to Classic editor for new and converted content, when you decide to disable Gutenberg. Or install the Classic Editor plugin.

Converting Tables

If you have a table hard-coded in old posts, it will likely lose its design properties when you attempt to convert the content into blocks. The table block is not as sophisticated yet. This is not true for tabular views created with TablePress and added with a shortcode to the page or post. TablePress shortcodes work well.

Converting Columns

If you have hard-coded columns in your current post content they might get converted to single column blocks using Gutenberg editor.

More quirks

  • Content with javascript code that was added through the Text-Tab doesn’t convert well.
  • Gutenberg doesn’t have Post Locking so now you are in danger of overwriting each others edits if two people edit the same post.
  • Multi-line short codes – get added <p> tags.
  • It’s unclear how you would editing Shared Blocks in Classic Editor

These are a very loose list of quirks you might run into.  One or the other issue will trip you up sooner or later, especially if you want to keep the door open to go back to the Classic Editor. The best way out of that quagmire is moving forward and take the good with the bad for a few months, until these specific issues are fix by the very hard working Gutenberg developer team. Patience is the a virtue:-) 

This should get you started on your first discovery session with Gutenberg.

Resources to learn more about Gutenberg

Known Issues List 
Look at our post with more in-depth information about Known issues and conflicts with Gutenberg.

GoGutenberg – Take a Tour and Explore Blocks
On the GoGutenberg site, the team of WPSmackdown created a whole site dedicated to blocks and Gutenberg. It’s likely the most comprehensive tutorial available so far.

If you are not ready yet to do anything, but still want to check out Gutenberg, the team of WordPressVIP provide a sandbox install of Gutenberg for your to play in.

This post was previously published on the Above the Noise – Blog at Pauli Systems and on Medium 

Featured Photo by Evan Krause on Unsplash