Gutenberg is coming soon to WordPress. Your Website is he ready? Although we still don't know exactly what form it will take, this new content system will be added to WordPress in the future. Let's take a look at the potential impacts this could have on your site, and ways to identify and fix problem areas ahead of time.

gutenberg wordpress

Gutenberg is a WordPress project that aims to give users more flexibility in designing their content. Essentially, the project aims to replace the current editor, which functions primarily as a word processor, with a more visual and structured interface. Currently, Gutenberg is a plugin, and it gives users the ability to edit their content the same way as Visual Composer or other drag and drop editors (Drag & Drop), but in a simplified and very intuitive way.

To learn more about Gutenberg, click here.

Gutenberg is a massive company and will likely hit a lot of endpoints in your Website. These are the three areas we will explore for potential issues:

  • Your theme: Gutenberg comes with its own set of styles for the content. Is your theme compatible? What will Gutenberg look like when active?
  • Your plugins: It is possible that Gutenberg may interact with your other plugins in unexpected ways. We will see what it could be and what needs to be done to fix any issues that arise.
  • Your content: Gutenberg will affect the way your content is displayed. We'll take a look at how this might change the look of your pages, and go over some potential solutions if you're having issues.

Before you start, it's a good idea to set up a test area where you can experiment with Gutenberg without putting your main site at risk. Ideally, you should create your own test area or create a local copy of your site. For more information about how to perform any of these tasks, see the following tutorial: How to install WordPress locally.

If this is not possible, you can perform the tests directly on your site. Note that this can be risky, as we will be activating and deactivating a number of parts of your site. If you are performing live testing, be sure to create a backup of your site before you begin.

Once you know where you're going to test, go to the plugins directory and find Gutenberg. Once it's installed and activated, read on.

Now that you've got Gutenberg installed, let's take a look at the first section of your site that might be affected: your theme. If there are already major issues at this point, such as database errors or issues with the WordPress dashboard, proceed to section What to do when there are too many problems.

Since Gutenberg primarily interacts with content on the site, it's enough to test a few things - luckily for us.

The first is that Gutenberg comes with its own stylesheet and a set of styles. Check each of the different types of pages and templates used on your site to make sure they still appear correctly. The main goal here is to focus on elements in the main content area of ​​your pages, especially the content and image blocks. If you see any issues, it's likely that Gutenberg's styles take precedence over those on your site.

To correct this, you will need to identify where the problem is coming from. Usually this will be a CSS selector focused on an HTML element or priority of Gutenberg styles over your own classes. Either way, try to identify where the error is occurring. Next, figure out why Gutenberg's styles are replacing yours, and fix your code to allow it to take precedence.

Try to make corrections in your own theme (or better yet, in a child theme or area specified for CSS in your theme), rather than modifying Gutenberg. If you directly edit any of the files in Gutenberg, it is likely to be overwritten when the plugin is updated.

Likewise, you'll want to run the same tests on your dashboard once and for all. Theme options and other custom sections generated by your theme seem to be the biggest culprits so far. Once you've identified styling issues in these areas, you can usually fix them by changing or creating a child theme and tweaking the CSS there.

After testing your theme, the plugins for your site are as follows. Specifically, keep an eye out for plugins that provide shortcodes that you use in your content (eg Gravity Forms), plugins that affect the appearance of your content (eg accessibility plugins that affect text size) and plugins that directly insert elements into your page (such as Advanced Custom Fields).

To audit this area, start by gathering a list of all the shortcodes you are using, as well as the pages on which they exist. With your list in hand, visit each of these pages to see if they work as expected. If you are having styling issues, chances are you are experiencing the same issue as before and need to readjust your styles.

However, if the shortcode displays and not the expected content (i.e. your page displays the [shortcode]instead of doing the right thing) there is another solution. In this case, you can look at the block where the shortcode is located and confirm that it is not considered text (find and remove unwanted labels around the shortcode). If the problem persists, moving the shortcode to a more suitable block type should restart everything.

This problem stems from the same problem we already covered: style substitutions. Identify the affected elements and correct the CSS.

The final area we'll look at for conflicting issues is about item creation. Any plugin that inserts HTML elements into a page without using shortcodes is suspect here, for example, when PHP extracts custom fields from the Advanced Custom Fields plugin.

The most common slippage with creating elements revolves around incompatible blocks. Since Gutenberg provides its own styles, it is possible that if your items are created inside an unintentional block, they may not display correctly. The fix for this is to make sure your code adds items to the block where you want them to be.

It's not as urgent as the other issues we've discussed, but there could be some complications in how your content is displayed. Most of these issues will come from minor styling changes or theOrganisation blocks. To fix this you will have to play around with the block system until you get your page the way you want it.

What to do when there are too many problems

Did you run into an issue that you couldn't resolve with the suggestions in this tutorial? Do not panic ! There is still some time before Gutenberg is integrated into the core of WordPress.

First, write down what the error is and what steps led to the error. The more information you can collect, the better. Pass all this information on to the Gutenberg team. With luck, they will be able to determine the problem and fix it in a future release.

If you were working on a staging site, at this point that's all you can do for now. Keep checking the release notes to see if your issue is resolved, or possibly work on fixing it yourself.

If you were working on your live site, disabling Gutenberg should put everything back to normal. If not, then it's time to go back to that backup you made at the start of the tutorial!

Gutenberg aims to be a massive change in the WordPress environment, which seeks to change content for the better. Before it hits the main branch, be sure to verify that your site will work with the new changes. If you have any issues other than those listed here, better solutions, or fixes for something in this tutorial, please leave a comment below.