Making your Genesis theme Gutenberg 'compatible' pt 1

Videos in the series

If you are using the Genesis Framework on your website and have installed the new WordPress Gutenberg editor, you may have noticed you do not have access to the wide and full feature that comes with Gutenberg. If you do have those features, you may have also noticed that the content using full and wide widths do not display that way to your visitors.

In the following series of articles I will be showing how to add the Gutenberg wide and full align support to a Genesis child theme, and adjust the design of the theme so it is compatible with the new WordPress Gutenberg editor.

Through the videos I will be setting up a Genesis child theme to not only add the Gutenberg full and wide support, but also be adjusting the design of the theme so that when we are creating posts and pages with the Gutenberg editor, the resulting content looks as good on the front end of our website as it does when we are creating the content in the editor.

Watch the video below for an introduction to the series and what is going to be covered.

Video Instructions – click play

What is Gutenberg?

To give you a brief introduction, Gutenberg is the new content editor coming to WordPress 5.0 and will eventually replace the classic WYSIWYG editor that we currently use to create content. At the moment Gutenberg is installed via a plugin, but as of WordPress 5.0, Gutenberg will be the default editor.

The main difference between Gutenberg and Classic editors is that rather than create a blurb of content that you style as you go (by highlighting text and clicking an icon in the WYSIWYG toolbar), the Gutenberg editor breaks each type of content into ‘blocks’ and treats each block as separate entities.

How does Gutenberg affect Genesis?

Gutenberg is simply the editing experience in WordPress. The editor works out-of-the-box with the Genesis Framework and your child theme, and it will display your content as it did before Gutenberg was introduced to WordPress.

You may come across some compatibility issues when you activate the Gutenberg editor, and I recommend you have a test environment set up to make sure that isn’t the case, but compatibility issues will likely relate to a plugin you have installed rather than be an issue with the Genesis Framework or the child theme you are using.

Whilst the Gutenberg editor will work with Genesis, the new features that come with Gutenberg, such as adding full and wide align blocks to your content, will not work with Genesis out-of-the-box. Those features haven’t been added to the Genesis Framework or your child theme and need to be added manually.

In order for you to use those features, you will need to edit your child theme to add the appropriate theme support, and then apply styling changes to the front end of your website.

What will you learn in these videos?

The videos in this series will take you through each step to make a Genesis child theme Gutenberg ‘compatible’.

The entire process is not able to be explained in a single five minute video, so I have broken down the process down into smaller, easy-to-manage, steps. That way you can take your time, understand what you are doing, and prevent being overwhelmed or lost in the technical aspects.

As well as a video showing you each step involved, I will also provide the code you need to add, explain where the code goes and what the code does. I don’t want you to mindlessly copy and paste all over the place and not understanding why you are doing it!

I have taken on the assumption you still want to use the Classic editor. You probably have existing content created with the Classic editor, and I do not want the changes applied in the videos to affect that content at all. For that reason, the changes in the videos will specifically target full-width content (pages and posts) that have been created using the Gutenberg editor.

The start to end process in making a Genesis child theme Gutenberg compatible will cover the below.

Adding wide and full align support to your Genesis child theme.
Add a custom body class to your Genesis child theme so any styling added is specific to Gutenberg created content only.
Adding CSS code to the style.css file of your Genesis child theme so posts and pages match on the front end what is showing in the Gutenberg editor.

Requirements

To complete these videos, you will need the Genesis Framework and a Genesis child theme installed on your website – and preferably use a test website so you are not affecting your live environment.

You will also need a code editor to adjust the code in your theme. I do not recommend using the ‘Editor’ area in your WordPress admin. If you make any mistakes, or leave out a vital piece of code, you could lose access to your website and see the ‘white screen of death’. You will not be able to hit the back button in the WordPress Admin and undo your mistakes! Using a code editor will allow you to undo any changes quickly and pain-free!

For the purposes of showing the basic theory and steps behind making a Genesis child theme Gutenberg compatible, I will be using the free Genesis Sample theme.

If you are using a different child theme, you will be able to implement the majority of the process, but please note that not all Genesis themes are designed the same way or use the same CSS code. Your child theme is probably styled differently to the Genesis Sample theme, so the CSS code I provide may not work for your child theme.

In the videos I explain how I worked out what CSS code to apply, so please take the theory of what I am doing and apply it to your own theme.

If the CSS code in the videos does not apply to the more popular Genesis themes, I will create some supplementary videos at a later time.