How to switch from the classic WordPress editor to Gutenberg?

If you’re using WordPress 5.0 and above, you’ve no doubt heard of the Gutenberg update that merged with WordPress in December 2018, unless you’ve been living under a rock.

So if you are using the latest version of WP you are already using Gutenberg or have you continued to use the classic editor through the WordPress Classic Editor Plugin

Why Gutenberg?

Many WP users are not ready to jump on the Gutenberg wagonbut some do, including this website.

Some of the reasons you might want to use Gutenberg are because it:

  • Is the future for WP developers.
  • Provides a better user experience.
  • Is more flexible than WP’s original editor (TinyMCE).
  • Provides a new market for developers.

What are the differences between WordPress and Gutenberg?

WP’s Classic Editor is a text editor and is very similar to Microsoft Word. It has a single edit field as seen in the screenshot below.

Gutenberg is a block-based editor that looks like this:

There are multiple blocks for different types of content that have their own formatting options. Blocks such as:

  • Knob
  • Image
  • Table
  • Included
  • List
  • Gallery
  • audio
  • Quotes
  • column
  • Code
  • Fresh
  • Custom HTML

Themes and plugins also provide more blocks and widgets to use in your WP posts and pages.

How are existing pages or posts affected?

After upgrading and using Gutenberg, your existing pages and posts should continue to display correctly.

However, you should check your shortcodes and make sure that the plugins you may be using are working.

When you edit an existing page or post, it automatically opens in a single new classic Gutenberg editor block.

Are you ready to make the switch?

Using a staging site

The last thing you want to do is destroy your existing site. The way to avoid this is to enable Gutenberg a staging site† This is an exact replica of your website where you can test things without damaging your live site.

Test sites contain your theme, plugins, options, and content. Your hosting company may offer staging sites. If not, you can use the WordPress Staging Plugin

After your staging site is up and running, install and activate the Gutenberg Plugin and start testing. Or install a brand new copy of WordPress on your computer and test there.

Check your plugins

WordPress users are familiar with what happens when plugins don’t mix well. Sometimes it is due to functionality or conflicting code. This is an excellent time to see if you are using all the plugins you have installed. If you aren’t, delete them.

You also want to see which plugins are used when you edit content in WordPress. Specific plugins such as Akismet, Contact Form 7, Google Sitemap Generator, and WP Super Cache have nothing to do with the editor and are not affected by the use of Gutenberg.

On the other hand, any plugin that adds functionality or the way the classic WP editor looks may not be compatible with Gutenberg. In particular, plugins that generate shortcodes, add custom styles or have not been updated recently usually conflict and cause problems.

Gutenberg used to have an active plugin compatibility database. However, it has been shut down as it is no longer actively maintained.

You can view the final data and download the database as a CSV file. Without access to an active plugin compatibility database, you will have to manually test every plugin you use.

Try creating a new post on your test site. You will see that you are in the Gutenberg editor and it will look different for you. When you start typing, you automatically create a paragraph block. You don’t need to add a new block when you add a new paragraph. Just press enter or the return key.

Since you’re trying to see if your current plugins will work, try recreating how you used them all and see if it still works.

If not, then look for the same functionality in the standard Gutenberg block, add that block and add your content.

Make sure to keep a list of the plugins that aren’t working properly so you can remove them when you go live with Gutenberg.

What if there is no standard block for the functionality you need?

Check all blocks to see if the functionality you need is in another block. If you can’t find something that works, you can contact the plugin authors and ask them if they plan to update it to make it compatible with Gutenberg.

If all else fails, try a Gutenberg Plugin that does what you need. Remove the plugins that are not working from your test site.

Go live

Before doing ANYTHING with your live site, make a full backup of your entire site in case you missed something when checking for compatibility or any other error occurs.

It is possible to make all necessary changes to your test site and push it to your live site. However, this requires some technical knowledge. So, unless you are a developer or have one that works for you, it is better to make the changes manually.

Start by removing the plugins that didn’t work and add the new ones you found to replace them. If old plugins handle data for existing posts and pages and new ones don’t break, you can leave them installed.

Want to convert your old posts and pages to Gutenberg blocks?

Open any page and post from the classic block menu. Click on the three dots to view options† Choose from the drop-down menu Convert to Blocks

After WP converts your content to the Gutenberg block system, you need to review each block. Use Block Navigation (of icons) to see all parts of your post or page.

As you can see in the screenshot above, each paragraph, image, list, and heading is now in its own block. Converting existing pages and posts to the new Gutenberg system is quick and easy.

It may take several hours to test your plugins and find new ones, but you only need to do this once. Make sure to follow the steps suggested above to make your move to Gutenberg painless and error-free.

Leave a Reply

Your email address will not be published.