Shopping cart

Get Your WordPress Theme Gutenberg-ready

As many of you may already know, there will soon be a new WordPress editor. Gutenberg is the project name for the development of this new editor. With the upcoming changes WordPress users will be able to see an accurate preview of their content as they are writing it, which will make the WordPress experience much more user-friendly.

To get our themes ready for Gutenberg, we’ve been following the development of the current Gutenberg plugin closely and have prepared our first Elmastudio theme Pukeko to support the new editor.

We had to prepare all standard Gutenberg blocks in our Pukeko theme styles so that users won’t see the default Gutenberg block styles, but instead the block design using the Pukeko theme styles. Since all WordPress theme authors are preparing for the upcoming changes right now, we plan to share our experiences in a little Gutenberg blog post series.

1. Include Gutenberg Options in Your Theme

The first step to support Gutenberg in your theme is to add some Gutenberg options via your themes functions.php.

The following code snippets will add support for full width and fullscreen content to a number of standard Gutenberg blocks (e.g. image, cover image, or gallery block).

Theme users have the option to show wider content blocks.

Additionally, you can customize the block color palettes to make your theme colors available as predefined color options. Of course users will still be able to choose their own custom colors.

For the full width and fullscreen content option you need to add the following code snippet to the functions.php file (all code snippets for theme support in Gutenberg are available in the Gutenberg handbook.):

add_theme_support( 'align-wide' );

Custom theme colors for the block color palettes can be defined using the following code:

2. Styling Gutenberg Blocks in Your Theme

In the next step you will need to add CSS styles to change the default CSS styling of the Gutenberg blocks to match your theme design. By default, all Gutenberg blocks come with a standard design that might not match your theme styles.

Since it’s a major advantage of the new editor to offer users a preview of their content as they create it, it’s important to match the frontend theme design.

A blog post in the Gutenberg editor matching the Pukeko theme design.

The approach is not very different than the the editor styles in the current editor, except that we need to overwrite a number of the default CSS styles that come with Gutenberg. How much work this involves strongly depends on the specific theme. We found it was not too complicated with the Pukeko theme.

It’s also important to keep in mind that a number of blocks will also need CSS styling in the Frontend. The cover image block is a good example of a content option most themes didn’t offer until now. You should check all standard blocks and prepare further CSS styles for your theme design, if needed. Keep in mind that some blocks offer options like the drop cap or text sizes options in the Paragraph block.

Inside the editor all blocks are wrapped in a container with the CSS class .editor-post-visual-editor. I will write a follow up post to further go into detail regarding the CSS classes you will need to use for the Gutenberg blocks. The blog post Styling Themes for Gutenberg on the Themeshaper blog is a further helpful resource.

2.1. Include the editor-style.css file in your theme

All CSS styles for the editor need to be places in an extra stylesheet. In Pukeko, we call the file editor-style.css and included it in the assets/css folder, just as we are doing it with the current editor styles.

Now you need to call this file in your functions.php. Don’t forget to also include the fonts you are using so they will be used in the Gutenberg editor. Your code should look similar to:

The CSS styles you need for your Gutenberg blocks in the frontend of your theme can either be placed directly in your style.css stylesheet or in a separate gutenberg.css file. In Pukeko we chose to include the styles directly in the main stylesheet for now.

3. What We Learned So Far

We used our Pukeko theme to test how much work it would take us to support the current Gutenberg plugin. I think as soon as we get more familiar with the CSS styles that are used in the standard Gutenberg blocks, it won’t be so much work to support the new editor in most themes. We will definitely be working on supporting our other themes as well over the upcoming weeks.

It will get more exciting as soon as themes will offer their own custom blocks or support blocks provided by WordPress plugins. I will write further blog posts documenting our experiences there.

The only aspect that we found a little bit difficult to solve where the “full width” and “fullscreen” block options, especially if your theme offers a sidebar. We needed to make sure that the option is visible if the sidebar is inactive on the particular post or page.

For Pukeko, we already had an extra body CSS class marking an active or inactive sidebar on each page. We could use this class to ensure full width and fullscreen block content won’t overlap with the themes sidebar.

4. Questions and Feedback

Did you already start to get familiar with the Gutenberg plugin or have you played around with Frontenberg (a website showing Gutenberg in a frontend version)? Or have you even already started to optimize your WordPress theme for Gutenberg? Do you have questions regarding the upcoming changes to WordPress or experiences that you can share? I would love to hear from you, leave a comment below!

2 comments on “Get Your WordPress Theme Gutenberg-ready”

I‘m already using your Pukeko theme, which is awesome by the way. I’m wondering, though:
1) For now, what are the advantages of the Gutenberg plugin over other third party pagebuilders?
2) If I want to give this that Gutenberg plugin a shot, do I have to deactivate the other page builder? Would I have to rebuild all my existing pages?
3) Will the pages designed with the plugin transfer seamlessly once Gutenberg becomes the standard editor?

I’m so sorry that I missed to reply to you earlier. I’m so happy that you like Pukeko, thanks so much for your feedback. Regarding your questions:

1.) At the moment the Gutenberg editor can not yet be called a page builder plugin alternative, but in the longer term it will from our perspective definitely replace a lot of functions that currently need a page builder plugin.

The advantage will be that users will not need to rely on a special plugin and it will become easier again to switch between themes. Now it’s super difficult or even impossible to switch from a theme that uses one page builder to another theme that supports a different page builder or no page builder.

Gutenberg is also a lot cleaner and faster and does not come with tons of options page builders come with today. It’s core WordPress functionality, for everyone available and easy to understand and it can be used for every theme out there.

2.) If your theme relies on a page builder today, I would not recommend to use Gutenberg yet. With Pukeko it’s different and you can already use Gutenberg for posts and pages that don’t need the Elementor functionalities. The Elementor pages can just be left as they are. We will continue to offer more support for Gutenberg and eventually only rely on Gutenberg for page building in Pukeko. We keep you all updated on the development here on the blog.

3. The Elementor pages will not be destroyed, they will instead be “freezed” once you switch to Gutenberg. But I will prepare a tutorial here on the blog to help users to switch to Gutenberg in Pukeko, so it will be an easy process for everyone.