How To Prepare Your Site For WordPress Gutenberg

Changing technologies and solutions can greatly impact any kind of business. This is especially true when it comes to websites.

A major update can completely change your workflow, or worse – break your site. That’s why in this article, I’m going to help you prepare your WordPress site for the new Gutenberg editor.

What is Gutenberg?

The new WordPress editor released sometime in December 2018 has a simple and minimalistic design. Aptly termed as the “Block Editor”, there was a mixed reaction from WordPress users as of the time of release and it was justifiable.

Although Gutenberg came with the promise of a better way of editing and publishing on WordPress, the downside is that you cannot tell what effect it will have on your website.

This is because the plugins and themes that come with the classic WordPress editor have to be replaced with new plugins and themes that are updated to work well with Gutenberg.

So you see why updating to this new editor is a nightmare for some website owners, especially those with several pages, custom themes, and plugins.

It is not surprising to see that some website owners are yet to update their WordPress site and take advantage of the new features, of which there are plenty.

If you are still contemplating on doing this, or you feel comfortable using the classic editor, then you are running out of time. WordPress will no longer support the Classic Editor after December 2021.

Why You Need To Update Your WordPress Site to Gutenberg Today

Apart from missing out on the latest features for your website, one of the major reasons why you should consider upgrading is due to a lack of support for the classic editor.

As WordPress developers prepare to phase out the old editor, they will concentrate more on developing the Block editor leaving users with the classic editor prone to attacks from hackers.

Secondly, most developers are already making the transition to update their apps, plugins, and themes to support the new Gutenberg editor.

So failing to update your website means that soon your site will have outdated plugins that may eventually pose a security threat.

How Can You Prepare Your Website for Gutenberg?

To make the transition from the Classic editor to Gutenberg as smooth as possible, I suggest following these steps:

• Create a Duplicate Website
• Install Gutenberg on your duplicate website
• Troubleshoot the website after installing Gutenberg
• Backup your original website
• Install Gutenberg on your original website

Let’s dive deep and break down each one.

1. Create a Duplicate Website

   Before installing the latest editor, it is advisable to first try it out on a duplicate of your live website.

   This is in case the new editor is incompatible with some features such as plugins and themes associated with the classic editor, you won’t have to worry about your website crashing.

   Staging your website can be done with Duplicator, a plugin that allows you to copy your website to a sub-domain or using a WordPress hosting provider like the Hostinger Company that allows you to easily create a subdomain for your WordPress site.

   

2. Install Gutenberg on Your Duplicate Website

   Next, install the Gutenberg editor on your duplicate website. To do this, simply click Update on your WordPress dashboard, as it will alert you of a new version, WordPress 5.0 which comes with Gutenberg as the default editor or install the Gutenberg plugin.

   If you have installed the Guttenberg Editor plugin, then head to Settings > Writing and select the option “Yes” to allow switching between the classic editor and the Gutenberg editor.

   Since you are working with the duplicate website, then there is no need to install the plugin separately. Simply update the website to WordPress 5.0 and you will have the new Gutenberg editor installed.

3. Troubleshooting

   After installing the new editor, there are bound to be some errors in your website. These errors are inevitable and mostly because some of the themes and plugins you used have not been updated to be compatible with Gutenberg.

   You will have to make a list of any errors you observe and then find a solution to them. Some of the common errors users often face are:

   • Text misalignment
   • Display error on pages
   • Invalid shortcodes
   • Admin panel malfunctioning.

   Since most of these errors are caused by plugins and themes, here are a few steps you should take to troubleshoot the website:

   • Update the plugins – try searching for an updated version of your plugins. Most developers have already updated their plugins to make them more compatible with Gutenberg. If after updating the plugins, you still having issues, then try deleting each one and installing it again, one after the other. This will make it easier to find out which plugin is causing the error.
   • Update your themes – after you’ve ensured that all your plugins are up to date, the next step you can take to troubleshoot is changing your themes. This is one of the major reasons for text misalignments and a host of other display errors. Incompatible themes could slow down or cause your website to crash.
   • Try out known shortcodes – another troubleshooting method is to write out all shortcodes you’ve been using with the classic editor and try them out after installing Gutenberg. The point of this is to see if the codes are working as intended.

     Common errors in this area are styling errors and seeing the word “shortcode” displayed on the screen.

     Styling errors can be solved by simply adjusting your style while you will need to play around with the shortcodes to see how and where they will function properly.

     

4. Back-Up Your Original WordPress Site

   You have to create a backup of your website before proceeding to install Gutenberg. This will allow you to recover your data should something go wrong during the update process. You can use a WordPress plugin like UpdraftPlus, which will greatly streamline the process.

5. Install Gutenberg

   After you’ve taken all the necessary precautions, then you can update your website to Gutenberg. The purpose of creating a duplicate of your site is that it allows you to find solutions to any error that will occur when you update your original site.

   This reduces downtime or risk of losing your website. Use the solutions you got in step three to tackle any error you will face.

Conclusion

Gutenberg is the future of WordPress and with it come better ways of managing your website. However, before updating your site, make sure you follow the steps outlined in this article to prepare your website for the new editor.

This is the best way to avoid loss of data and deal with any error that may occur during the process.

Remember you can always switch back to the classic editor. To do this you have to install the Classic Editor plugin, then go to Settings > Writing in the WordPress admin panel and select the classic editor you just installed. Good luck with updating your WordPress site!