WordPress 5.0 and Gutenberg are coming: what does this mean for you?

Robert-Jan Budding, November 28, 2018

The release of WordPress 5.0 is near! We wouldn’t normally write a blog post about a new WordPress release, but this WordPress release is special. With WordPress 5.0, Gutenberg is also being released.

In this blog post, we will explain what Gutenberg is, and what you can do to test if your WordPress site is Gutenberg-compatible.

What is Gutenberg?

If you follow the WordPress news, or visit the occasional WordPress Meetup, you have undoubtedly heard of Gutenberg.

From WordPress 5.0 on, Gutenberg will become the new standard editor in WordPress. This new editor looks quite different from the current (or old) WordPress editor. The current editor is very similar to Microsoft Word or other text editors, whereas the new editor works with blocks. That means that each element in your pages and posts will be a block. This includes paragraphs, headers, and images.

Gutenberg has been available as a WordPress plugin for a while now. The first Gutenberg beta version became available in June, 2017. Installing this plugin on a live website was not recommended because it was still being developed. Many users have tested the plugin on a test or staging environment. Unfortunately, Gutenberg doesn’t yet work, or work well, on many WordPress sites. This is because many plugins and themes are not yet Gutenberg-compatible.

How does Gutenberg work?

When you open Gutenberg for the first time, you will see the screen below.

Gutenberg screenshot

As you can see, there is still a title at the top of your page or post. This is the only “block” of your page that you can’t delete or move. All other blocks, such as the image under the title, can be removed or moved.

What kinds of blocks are there?

But what types of blocks does Gutenberg have? We will describe the most important blocks.

Text

Every paragraph is a block in Gutenberg. Fortunately, that doesn’t mean that you have to keep adding new blocks while you’re writing. Gutenberg will automatically do this when you press “Enter”.

That means that entering text in Gutenberg is still very simple, just like you are used to in the old editor. Composing your pages and posts in Gutenberg might take a little getting used to.

Images

For inserting images, you will no longer click on “Add Media”. Gutenberg also has a block for images and other types of media files.

Image block Gutenberg

From this block you can upload or select a file from your media library. After you have uploaded an image you can align it, resize it, and add a caption:

All other settings, such as the alt text for your images, and a link you might want to add, can now be found in the bar on the right-hand side of the editor. To edit these settings, first select the block in the editor. The settings for that block can then be found in the bar to the right of the editor:

image block settings

Headings

The insertion of subheadings is also done with a special block in Gutenberg. You can choose from H2, H3 and H4 while editing the block.

 header Gutenberg

In practice you will mostly use headings 2, 3, and 4. Do you want to add headings 1, 5, or 6? In the bar on the right-hand side you can choose all headings: from H1 up to H6.

Header settings Gutenberg

Lists

Do you want to add a bulleted list to your text, for example for a summation? This is also a block in Gutenberg. In this block you can also indicate whether you want a numbered list or an unordered list:

List Gutenberg

Embeds

In the old editor it was possible to paste a YouTube URL. The editor automatically converted the link to an embed. In Gutenberg, each embed has its own block:

Embeds Gutenberg

This way you can embed content from YouTube, Twitter, Instagram, and many other websites. It is also still possible to paste a URL for YouTube or any other service directly into your editor. Gutenberg will automatically turn it into a block:

Tables and columns

Gutenberg also has blocks for creating tables and columns. Previously you often needed a plugin for this, or shortcodes for your WordPress theme. This will be a standard function in the new editor.

Tables-columns

Widgets

Gutenberg also allows you to use WordPress widgets in your pages and posts. That way you can easily show your latest posts and comments, just like in your sidebar.

Widgets-Gutenberg

More blocks

Above we have described the most important Gutenberg blocks. Plugin and theme developers can also add blocks to Gutenberg. The Gutenberg Block API gives developers the opportunity to develop blocks for Gutenberg themselves.

Are you a developer, and would you like to learn to create Gutenberg blocks? Then read this article in Smashing Magazine.

Shared blocks

Do you want to use a Gutenberg block in multiple pages or posts? Then you can easily convert a block in Gutenberg to a “Shared Block”.

This can be extremely useful for elements that you often use on your website. For example, a block for downloading a whitepaper or another call to action.

Shared blocks

Open the settings of a block in Gutenberg and click on “Add to shared blocks”. The block is now added to the “shared blocks”:

Reusable block Gutenberg

Before you add the block, you will immediately see an example of the shared block. By clicking on “Manage all shared blocks”, you will see a list of all the shared blocks that you have created. You can use this option to quickly edit or delete shared blocks.

Over time these shared blocks will largely take over the role of shortcodes.

Testing Gutenberg on your website

Gutenberg is almost finished, and many plugins (such as Yoast SEO) and themes already work in Gutenberg. However, not all WordPress themes and plugins are ready for the new editor. That is why it is useful to test whether Gutenberg works properly on your website before the release of WordPress 5.0.

Create a staging or test environment

We recommend that you do not do this on a live website. Is your site hosted at Savvii? Then you can easily create a staging environment. You can do this in the Savvii Control Panel under the “Staging” tab. Click on “Create Staging Environment”.

Create staging environment

A copy of your entire website will be made, and this will automatically be made available on a staging URL. You will find a detailed explanation about setting up a staging environment here.

Log in to WordPress within your staging environment, and install the Gutenberg plugin. After you have activated the plugin, you can start testing whether the new editor works properly on your website.

Trying out the new editor

For some WordPress users Gutenberg doesn’t yet work, or doesn’t work well. As we wrote before, this is not always a Gutenberg issue. It is often an issue of plugins and themes not being ready for Gutenberg.

To check if Gutenberg works well for you, in WordPress go to Posts > New post. Do you see the new editor and does everything seem to work? And how does your content look on the “front” of your website?

It is also important to check if you can also edit your existing pages and posts properly. Gutenberg is built so that content that you have created in the “old” editor is automatically converted into Gutenberg blocks. However, some users will see a white screen when they try to edit existing content with Gutenberg, or run into other problems when editing existing content.

If Gutenberg doesn’t work (properly)

If Gutenberg doesn’t work on your website, (in your staging environment) switch to the standard WordPress theme. That is now Twenty Seventeen. Does Gutenberg work using the standard theme? That tells you that your theme is probably not (yet) compatible with Gutenberg.

Of course this doesn’t mean that you need to choose a new theme before WordPress 5.0. Because backward compatibility is very important to WordPress, Automattic has developed a special plugin for users who don’t want to, or can’t use Gutenberg yet: the Classic Editor plugin. If you install this plugin, the current editor (the “classic editor”) will remain active on your website, even after you update your website to WordPress 5.0.

Gutenberg Ramp

Using the Gutenberg Ramp plugin is also an option. This plugin by Automattic adds a settings page that allows you to decide for which post types Gutenberg should, and shouldn’t be activated. For example, you can choose to activate Gutenberg for pages and posts, but not for Portfolio items.

Gutenberg Ramp settings

This is useful if Gutenberg works for posts and pages on your website, but not for other types of posts that are added by your theme or certain plugins. Or if you want to use Gutenberg for posts, but not for WooCommerce products.

If Gutenberg works

Have you tested Gutenberg, for example on your staging environment at Savvii, and is everything working well? Then you will probably be able to update to WordPress 5.0 without any issues. It is still advisable (as with all updates), to backup your website before you install the update. If your website is hosted at Savvii, you can do this in the Savvii Control Panel under the “Backups” tab.

backups-savvii

Click on “Create backup” and wait until your backup is completed. You can now install all updates. If something does go wrong while updating, or if your website doesn’t work after the update, then you can easily restore your backup from this screen. That way you can be sure you won’t lose anything.

Update to WordPress 5.0

Some WordPress users don’t want to update their website to WordPress 5.0 (yet), because Gutenberg doesn’t work on their website. However, for most WordPress users it is not necessary to skip the update entirely. We recommend that these users install the Classic Editor plugin.

You will then keep the current editor, even if you update to WordPress 5.0. This kind of update often contains – in addition to new features – important updates regarding safety and stability. And of course you don’t want to miss out on those updates.

Twenty Nineteen

With WordPress 5.0, a new standard WordPress theme will be launched: Twenty Nineteen. This theme replaces Twenty Seventeen, the standard WordPress theme that was introduced in 2017. Of course, Twenty Nineteen is fully compatible with the new Gutenberg editor.

Twenty-Nineteen

It is noteworthy that Twenty Nineteen does not have a sidebar. You can add widgets to the Twenty Nineteen footer.

The future of Gutenberg

Gutenberg is not a standalone project. Gutenberg is the first step towards the “future of WordPress”. Gutenberg lays a foundation for many other new WordPress developments. The goal is to ensure that WordPress remains the number one CMS for years to come.

Gutenberg will also be replacing the Widgets and Menus in WordPress. Widgets will soon become blocks, and menus will become a “navigation block”. More information about this can be found in this post by Matt Mullenweg, in which he announces “Gutenberg Phase 2”.

When is WordPress 5.0 coming out?

In the past year the question “When is WordPress 5.0 coming out?” was often answered with: “when Gutenberg is ready”. There was little clarity about the release date of WordPress 5.0, and thus Gutenberg. Eventually there was an official release date: November 19th, 2018. This date was then moved to Tuesday, November 27th. Although this date is still mentioned as the official release date, chances are that this deadline will also be moved to give developers a little more time to fix bugs in the new editor. For official announcements about WordPress 5.0 you can keep an eye on this page.

Conclusion

WordPress 5.0 brings one of the biggest changes in WordPress ever: Gutenberg. Gutenberg is the future of WordPress, and will eventually also replace widgets and menus. WordPress will slowly transform into a complete “website customizer”.

Working with the new editor takes some getting used to. But once you have created a few posts or pages with Gutenberg, you will certainly come to appreciate Gutenberg. Many actions are much easier and faster in Gutenberg than in the current (classic) editor.

It is important to test whether Gutenberg works on your website before WordPress 5.0 is released. The official release date for WordPress 5.0 was scheduled for Tuesday, November 27th, 2018, but the release has been postponed.

Want to know why hosting your WordPress 5.0 website at Savvii is a great idea?

Download Fifty Shades

Leave a reply