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).

Bilder in Gutenberg
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.

Custom theme colors in Gutenberg

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:

add_theme_support( 'editor-color-palette',
        array(
            'name' => 'dark blue',
            'color' => '#1767ef',
        ),
        array(
            'name' => 'light gray',
            'color' => '#eee',
        ),
        array(
            'name' => 'dark gray',
            'color' => '#444',
        )
    );

The complete Gutenberg code in your em>functions.php will then look like this:

/**
* Add support for Gutenberg.
*
* @link https://wordpress.org/gutenberg/handbook/reference/theme-support/
*/
function mytheme_setup_theme_supported_features() {
		
		// Theme supports wide images, galleries and videos.
		add_theme_support( 'align-wide' );
		
		// Make specific theme colors available in the editor.
    add_theme_support( 'editor-color-palette',
        array(
            'name' => 'dark blue',
            'color' => '#1767ef',
        ),
        array(
            'name' => 'light gray',
            'color' => '#eee',
        ),
        array(
            'name' => 'dark gray',
            'color' => '#444',
        )
    );
}

add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

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.

Gutenberg Editor Preview
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:

/**
 * Enqueue editor styles for Gutenberg
 */
function pukeko_editor_styles() {
	wp_enqueue_style( 'pukeko-editor-style', get_template_directory_uri() . '/assets/css/editor-style.css' );
	wp_enqueue_style( 'pukeko-fonts', pukeko_fonts_url(), array(), null );

}
add_action( 'enqueue_block_editor_assets', 'pukeko_editor_styles' );

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!

1 comment on “Get Your WordPress Theme Gutenberg-ready

  1. 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?

Leave a Reply

Your email address will not be published. Required fields are marked *