Creating engaging web content in 2019 means building multi-media-rich pages — and that requires a more powerful and versatile content editor.

In December 2018, WordPress launched a new editor (called Gutenberg after the German inventor of the block printing press) that relies on blocks instead of custom code and plugins to develop media-rich pages. Blocks give you more control over the style and arrangement of your WordPress blog posts and pages, letting you build more customized content without a ton of advanced technical knowledge. Basically, the new editor makes creating beautiful content a lot easier and accessible to teams without the budget for a professional web designer.

So, if you're not on the new editor yet, I have one question: why not?

I get it — change is hard. And if you and your team were deeply invested in the classic WordPress editor, moving over to Gutenberg can seem daunting.

But consider this: If you don’t update your WordPress site to the new editor, you're missing out on providing an improved experience for your visitors (and a better web editing experience for yourself). This post will walk you through how to make your WordPress site more block-friendly.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

But how does the Gutenberg editor differ from the classic WordPress editor?

The classic editor used something called TinyMCE, an online rich-text editing tool that looks and functions a lot like a Microsoft Word document. If you wanted to add elements beyond text and simple visuals, you'd need to incorporate custom code or plugins to get the job done. If you didn't have coding experience or resources to hire help, you were pretty limited in what you could accomplish with the old editor.

blog post template in the classic wordpress edior

The Gutenberg editor uses blocks instead of TinyMCE to create posts and pages. Blocks are drag-and-drop elements you can insert to build pages, and WordPress offers a wide variety of different blocks you can customize and arrange to your liking, e.g., text blocks, image blocks, gallery blocks, layout elements, etc.

blog post template in the Gutenberg block editor

While the new block editor hasn't been pushed to all websites yet — the core developers are leaving room for people to get used to it, try it, and gradually adopt the change — it is coming. Once Gutenberg is officially rolled out, you won't be able to switch back. However, there is a plugin for the Classic Editor that you'll be able to download to continue to work in TinyMCE.

Why Switch to Gutenberg?

Block editing is the future of WordPress. All the modern tools and plugins will revolve around Gutenberg in a few years. Right now, developers are pivoting toward this new functionality by implementing compatibility with blocks into their products, including plugins, themes, frameworks, tools, templates, etc.

If you sneak a peek at the WordPress market, you'll notice that Gutenberg is all over the place. The most popular themes and plugins have already been modified to fit the new requirements. Meanwhile, a majority of the newly built themes and plugins use custom blocks and modules specifically developed with Gutenberg in mind.

The Gutenberg editor will replace the classic WordPress editor. It will soon be the main method of customizing your entire site (pages, widgets, menus, headers, footers, and other website areas), so adapting now will give you time to get used to the change.

How to Adapt Your WordPress Site to Gutenberg's Block Editor

As you switch to Gutenberg, you'll want to ensure that your content and data are safe and protected through the transition. Here's a checklist with everything you need for a smooth transition to the new block editor.

1. Back-Up Your WordPress Site

Before switching to the latest version of WordPress, don’t forget to back up your WordPress site and check if your theme and plugins support the latest version. These steps are very important in the process.

In the event that any info is lost during the transition, you can use your backup to revert back to an earlier version of your site. Free backup plugins, like UpdraftPlus or BackWPup, make it easy to retrieve any lost data in one click.

To check if your themes and plugins support the latest WordPress version, you can go to either the official site or to WordPress.org and verify the latest updates, tests, and what version of WordPress they support. Check the “Tested up to” line on the plugin's or theme’s page.

lastest update information for themes

2. Update WordPress

This might sound like the obvious thing to do, but many people still use old versions of WordPress on their sites. Installing Gutenberg on a WordPress version older than 5.0 won’t work.

Once you update to a recent WordPress version (which has to be at least 5.0), the editor will change by default. To update the WordPress version, go to Dashboard > Updates and follow the instructions.

3. Choose a Theme That’s Compatible with the Block Editor

Even though most of the popular themes come with a Gutenberg integration, there are still themes out there that are not updated regularly. Make sure your theme is ready for the change. If you update to WordPress 5.0 and the theme does not support it or has not been tested on it, you'll run into several errors.

Some of these errors include various site elements that won’t display properly on the front-end, certain blocks not working, and templates that can't be customized. In short, you'll have a lot of trouble working with an outdated theme.

To check if your theme is compatible with the block editor, go to the official homepage of the theme and check the changelog. The changelog provides the date of the latest update and the new features. You can also search for Gutenberg compatibility in the theme's features list.

The theme description may not specifically state that it's compatible with Gutenberg but that it has been updated recently and tested with WordPress 5.0 — that means that it will work with the block editor. But if you choose a theme that was built for Gutenberg, it will come with extra benefits that will empower your site toward blocks.

If a theme you've chosen is not compatible, no worries, there are several great Gutenberg-ready themes that offer a set of top-notch features adapted to the block editor.

Gutenberg-Friendly WordPress Themes

Neve is a good example of a free theme that’s fully adapted to the new WordPress editor. Apart from being built with Gutenberg and page builders in mind, it is also oriented to site performance. It’s a fast theme that loads in less than one second, is optimized for Accelerated Mobile Pages (AMP), and comes with a huge collection of niche templates for your business. Everything about Neve is custom, so you can easily rework it to fit your brand's style.

Neve Gutenberg friendly Wordpress theme

Source

Zakra is another strong WordPress theme, known for its fast page loading times and the flexibility that it offers when it comes to customization. It also comes with a bunch of free and premium starter sites for all sorts of businesses, and it’s friendly with page builders. With Zakra, you can build almost anything you have in mind, and most of its features are free.

Zakra Gutenberg friendly Wordpress theme

Source

OceanWP is a good choice for both developers and casual users who want to build great sites with WordPress. It’s made for the block editor and drag-and-drop functionality. It comes with both free and premium niche features that you can import in one click. Moreover, OceanWP is optimized for speed, mobile, and e-commerce. If you want to enrich your site, you can add extensions to increase conversions and improve the user experience.

OceanWP Gutenberg friendly Wordpress theme

Source

4. Update Your Plugins and Check for Gutenberg Compatibility

Small details can make the difference between a successful website transition and a troublesome one. Any active plugin on your site that’s not compatible with Gutenberg can negatively affect both your back-end and your design.

For instance, if you’re using plugin shortcodes, they might not show up properly after switching to Gutenberg.

The first step is to update all your existing plugins (go to Dashboard > Updates). There’s a good chance that many of your plugins are block-compatible since most developers are invested in making their tools Gutenberg-friendly.

Next, pay attention to the new plugins that you intend to install and check their compatibility with the block editor. If they’re not compatible, you might not be able to use them properly.

5. Check Your Site Health Status

Site Health is a feature that was introduced recently in WordPress to show you critical information and general details about your site. So, if any tool requires an urgent update or if there are errors, you will see them in the Site Health tab on your WordPress dashboard. Any feature that is not working properly on your site will be reported on that page, along with suggestions on how to improve or fix them.

Site Health Status report in WordPress dashboard

In Site Health, you will mainly get info on performance and security issues.

Consult Site Health before and after switching to Gutenberg to be able to spot the incoming errors.

6. Convert the Old Posts to Blocks

So, you've migrated to Gutenberg safely, your tools are working in perfect harmony, and your site is functioning according to plan. You can now create posts and pages using blocks. But what about the old posts that you created with the classic editor? Will they be affected by this change?

The answer is no, your old content won’t be affected by the change. Of course, double-checking your posts to see if everything looks as before won’t hurt. But normally, as long as there were no conflicts during the transition, the content should look the same.

However, you will still need to convert the classic editor posts to blocks since the swap doesn't happen automatically once you switch to Gutenberg.

What will happen is that all the content that was created via the classic editor will become a single block in the Gutenberg editor.

So how to convert these posts to Gutenberg blocks?

Click Edit on a post you want to convert. Click on More Options in the left corner of the block (the three dots), then click “Convert to Blocks” in the drop-down menu.

image showing how to convert classic editor posts to block posts in wordpress

WordPress will scan the entire post and will split it into corresponding blocks. For instance, each paragraph with text will be put in a Paragraph block, an image will be put in an Image block, a photo gallery in a Gallery block, and so on.

block editor blog post in wordpress

Now, your post is composed of many blocks, each type of content being assigned to its own separate block. Repeat these steps for each of your existing posts that you want to convert.

If you do not want to convert all the posts, you don’t have to. This step is not mandatory. You can keep your old posts as they were with no adverse consequences.

7. Boost Gutenberg With More Blocks

The block editor comes with a diverse set of blocks from various categories, but you don’t have to stick with the default options. If you want to grow your blocks library, you can always add new ones via free plugins that come up with extended block editor functionality.

Here are a few free block editor plugins to try.

Otter Blocks is a lightweight plugin that brings you a nice package of 12 new blocks and templates to make your Gutenberg army more powerful.

otter blocks wordpress plugin content blocks

The blocks and templates can be easily personalized and turned into fully functional sections.

otter blocks wordpress plugin example

 

Gutenberg Blocks is an alternative to Otter Blocks and comes with 20 useful blocks for posts and pages.

gutenberg blocks wordpress plugin block addons


CoBlocks has 30 blocks for many purposes and a separate category for galleries that lets you create beautiful layouts for your photo galleries.

coblocks plugin wordpress block editor blocks

 

Stackable has an interesting set of blocks, which provide great layout solutions for a more appealing, visual presentation.

stackable blocks content blocks for wordpress

 

Wrapping Up

Adapting your website to the block editor is not optional, it’s a must. Two years from now, the classic editor will cease to exist and WordPress will be all about Gutenberg. Start dabbling in the interface, learn its tricks, and become a Gutenberg pro by the time the switch roles around.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Dec 9, 2019 9:00:00 AM, updated December 09 2019

Topics:

WordPress Website