The latest version of WordPress (4.9.8) shows on your Dashboard a prompt alerting you to the “new, modern publishing experience coming soon”. Over last two months, I have been following the development of the Try Gutenberg Call-out for the WordPress dashboard. The new editor is codenamed Gutenberg, and you might ask yourself: To try or not to try?
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.
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.
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.
- Demo shows you a Gutenberg post with its various blocks.
- Support link guides you to the WordPress Support Forum for the Gutenberg plugin.
- Feedback leads to a survey to collect your first impression and other thoughts you might have about the new editor.
- Documentation links to the Gutenberg Handbook. It’s mostly a reference guide for developers & designers who are working maing their plugins and themes Gutenberg-ready.
Changed “Edit” Link Behavior
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.
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
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.
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.”
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:
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”.
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.
If you have hard-coded columns in your current post content they might get converted to single column blocks using Gutenberg editor.
This should get you started on your first discovery session with Gutenberg.
On the Gutenberg Times, I published a 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 like what you see but don’t have time to do a thorough test, our team is happy to assess your site for Gutenberg-Readiness. Leave us your information in below form and we will be glad to schedule a phone call with you.