09 July 2018

WordPress 5.0: Gutenberg is Coming!

As you may or may not know, WordPress 5.0, nicknamed Gutenberg, is on the horizon. It is expected to launch mid- to late-2018 and will bring an entirely new editing interface to WordPress for those working with content.

There is still a fair amount of uncertainty regarding the exact release date. While there are several contributing factors to the delay, one of the primary reasons is that WordPress now powers 30% of the top websites worldwide and many site owners and writers are still unaware that such a sea change is coming to the WordPress editor.

This AmDee post will be a brief introduction to Gutenberg and provide some tips on how to get your team ready for it.

What Is Gutenberg?

The Gutenberg editor will handle page elements as “blocks.” Each paragraph, image, heading, etc. will be its own block. You will be able to move these blocks up and down the page, somewhat like a drag-and-drop editor. It will not be a page-builder in the traditional sense, but it will be a little closer to that type of WYSIWYG interface than before. Part of the rationale for introducing Gutenberg is to keep WordPress competitive with many of the drag-and-drop website builders such as WIX and SquareSpace that are gaining in prominence.

The new editor will allow you to build dynamic, rich page layouts without needing widgets, plugins, shortcodes or HTML. You will still be able to use those elements on your site and you will also have the option of not using the Gutenberg editor on your pages or posts if you do not want to. (More about that below.) The new editor is going to be a big step forward and the WordPress community is encouraging everyone to try it out first before reflexively opting out and deciding to keep using the old editor interface.

“The current editor got us through the last 14 years. We want Gutenberg to get us through the next 14.”
-Matt Mullenweg

There are two general ways to access Gutenberg or take a peek:

  1. A sandbox site that already has it installed, such as frontenberg1and frontenberg2, the two test sites built by Tom Nowell of WordPress VIP. These allow you to interact and play with Gutenberg without installing it on your own site or having to login to anything. You can click into any of the content blocks, see the available editing options for each type of content, change the order of the blocks on the page and more. It’s a quick and easy way to dive right into what the new editor experience will be like, and I’d recommend going over for a visit; even if just for two to three minutes.
  2. Download the Gutenberg plugin. Get the latest version from the WordPress plugin page or, if you’re a developer, you can keep up with its progress over on GitHub. When first testing Gutenberg, do not install or activate the plugin on your real live site. Set up a testing or staging site to test it on. If you need help setting that up, give your web developer a call and ask them to assist you. Activate the plugin once it is installed. You can import dummy content, actual content from your main site or you can build your content as you go. It’s handy to have a few larger sized images and some text at the ready to start with.

A Brief Test Drive With Gutenberg

Before addressing what kinds of things we all need to do to prep for its release, let’s just take Gutenberg for a quick test drive and see what the editor looks like and what it is capable of.

I downloaded the Gutenberg plugin into a test site. Numerous themes work with Gutenberg but many have not necessarily updated their descriptions to include that information. I chose the Relativity theme for this example. It’s best to test Gutenberg with a theme that is full-width so that you can utilize all of Gutenberg’s capabilities. This in no way implies that you will have to switch themes when WordPress 5.0 is released. Hundreds of theme and plugin authors are already testing their code for Gutenberg compatibility.

For example purposes, I want to make an About page for XYZ-dot-org, a bicyclists’ rights nonprofit. I want to start the page with a subheading, some intro text and a bicycle image.

When I go to make a new post from the dashboard, the screenshot below is what the interface looks like. I want to add my first content block below the title field. When I click on the (encircled) “+” sign next to “Write your story,” a dropdown menu appears with the various blocks I can choose from.

I quickly add my three blocks: an H2 subheader “Our Mission & Goals,” a paragraph block with some dummy text and an image block, where I decide to select the new full-width option available for image blocks.

When I click into one of my page’s content blocks, I can select to see the block editor for that type of content. It displays down the right-hand column. I choose to edit my intro paragraph, and the editable parameters for the paragraph block appear.

Within seconds, I have bumped up my paragraph’s font size, added a drop cap to start the paragraph, and have changed both the background color and the text color of my paragraph:

What’s just as impressive as being able to do all of that so quickly is that a yellow caution box appears underneath my hastily assembled color combo. It reads: “This color combination may be hard for people to read. Try using a brighter background color and/or a darker color text.” Apparently, Gutenberg has a built-in contrast evaluator that automatically checks your background and text color combination (at least in the paragraph block editing section).

I leave the page as it is since it’s just a quick demo, hit Publish and take a look at what it looks like on the web:

Not bad for a few minutes of work in a brand new environment. I go back into my list of pages and hover over my new About page.

I notice that there is an option to use the Classic Editor to edit my page, even though it was created with the Gutenberg editor. I click on it and get to see my About page as it would appear in the old editor. The content is no longer separated out into blocks and my intro paragraph doesn’t show the stylings I gave it in the Gutenberg editor (drop cap, color changes, full-width image).

When I make a change to my paragraph while using the Classic Editor and hit the Update button, my revised paragraph still renders on the front end with the Gutenberg elements (drop cap, larger font, color changes) safely intact. I also note that among the many content blocks available, there is a Classic Editor block I can insert and use as well, even in the middle of a post or page constructed with the Gutenberg Editor.

What this means is that you will still be able to use the Classic Editor for your posts and pages when the time comes to update to WordPress 5.0.

That wraps up our first glance into the Gutenberg editor. It would take numerous posts to cover all of the options available, from the 27 content block types and their styles to the various toolbars, embeds and dropdown options, the ease with which you can move blocks up and down the page, the ability to create reusable shared blocks and more.

Visit one of the sandbox sites linked above or better yet, install the plugin on a test site and try it out yourself.

How do site administrators need to prepare?

Let’s now turn our attention to what kinds of things we can be doing to get ready for WordPress 5.0, followed by some resources that can help us along the way.

While the editor interface is the most drastic change and will predominantly affect your writers and editors, WordPress website administrators have a responsibility to manage the process of preparing their team and website for Gutenberg’s release.

Web administrators should:

    1. Dive into Gutenberg themselves. Even if you don’t write or publish on WordPress, you should read up on Gutenberg WordPress 5.0. Gain a least a passing familiarity with it, assemble a resource list for your team and visit a sandbox testing site like frontenberg to see what your writers and publishers will be dealing with.
    2. Meet with, or notify, all of your site’s editors, authors and contributors who interact with the pages’ and posts’ editing interface. Explain the coming change, visit one of the sandbox sites together and provide helpful links (several are provided below) to articles or videos on Gutenberg. Explain to them that they will still be able to use the classic editor and show them how to find that. Provide a testing environment where they can experiment making posts the new way with blocks.
    3. Contact your web developer. Make sure he or she is aware of the impending change. Have them download the plugin and set up a testing site for the writers on staff to play with. If your site is using a custom theme, ask your developer if they’ve figured out how to make your custom theme compatible with WordPress 5.0. Provide them with the links listed below as well as where to find the project on GitHub.
    4. Take a look at your theme’s and plugins’ homepages to see if they have mentions of their compatibility with Gutenberg. Check back in with your web developer to see how the theme and plugins are performing on your test site.
    5. Encourage your team to offer feedback, if they have any, to the WordPress core developers as well as to your theme and plugin authors. Everyone is using different combinations of themes and plugins or using WordPress in different settings. Your team’s feedback is valuable. It may be unique and there is no way some of the smaller web shops can simulate all of the possible scenarios that users and devs will run across using Gutenberg.

What are some resources that will help us prepare for Gutenberg?

As Gutenberg continues to develop, the following resources should prove useful for the overall general WordPress audience; from users, writers and site administrators to designers and developers:

For developers interested in learning more:

CSS Tricks series: Chris Coyier and 2 guest authors tackle a multi-part series for developers


Concluding thoughts

WordPress 5.0 will be bringing a host of interesting changes to the world of WordPress publishing and web development. Block-based page construction capable of rich page layout is just the starting point from where the editor experience, and WordPress core, will be able to go. Gutenberg will continue to evolve. It will get refined as we near its release, and there will be a lot more talk about its current (and possible future) capabilities.

This exciting change means that your organization would do well to try and stay ahead of the curve in preparing for its release. Visit the sandbox site, set up a test site using the plugin, make sure your writers know what’s coming. Peruse the latest articles on Gutenberg’s progress and keep an ear out for a tentative release date in the next few months.

With a proactive approach, you won’t be caught flat-footed when it comes out and your preparation will minimize potential headaches. WordPress will be taking a big step forward with Gutenberg. With it will come some exciting and fresh possibilities for how your nonprofit or small business WordPress website will be able to present your content and interact with your site’s visitors.

If there is anything that AmDee can help you with in preparing for, or in transitioning to, Gutenberg, please feel free to get in touch.

Jeff C.

Headshot of Jeff Creamer

Jeff Creamer is a DC-based WordPress website administrator, tutor and consultant. He has been helping small businesses and nonprofits launch and manage their WordPress sites since 2013.