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