As the development of Gutenberg continues, our team at StudioPress is following along closely. While there is a roadmap for its release, we are still somewhat watching from the sidelines.
Until it is merged into Core and WordPress 5.0 is released, we are approaching everything around Gutenberg as experimental. There are simply too many ongoing changes and iterations still happening.
However, there is a lot to like about the direction of Gutenberg, and there are plenty of things that I have seen which get me excited.
Content Boxes
One of those things is the ability to create content boxes. Previously, this could be accomplished with HTML and CSS—by adding a class to a paragraph, or wrapping text inside a div.
The problem with this, however, is that many folks use the visual editor and have no idea what HTML or CSS is.
With the Gutenberg editor for WordPress, this process has become much easier, and can literally be accomplished in seconds—without any code.
Developers can now add a custom theme color palette to publishing experience, and with those, create content boxes like these below.
Content Box Examples
This is a sample paragraph text with a colored background. You can use this to feature content, highlight something important, or provide a call-to-action.
This is a sample paragraph text with a colored background. You can use this to feature content, highlight something important, or provide a call-to-action.
This is a sample paragraph text with a colored background. You can use this to feature content, highlight something important, or provide a call-to-action.
Creating Content Boxes
To create a content box using the Gutenberg editor for WordPress is quite simple. All you need to do is write a paragraph and assign a background and text color to it.
Here’s a screenshot to show what that looks like:
Genesis and Block Options
We have exciting news! The newly expanded Genesis engineering team is currently working on the integration of Gutenberg functions directly into Genesis.
The idea is for Genesis to do the heavy lifting of code, while supplying a config system in the child themes to handle the data. While the instructions in this post are a manual way of adding color pallets to Gutenberg blocks, we’ll be releasing features in Genesis that make this much easier.
This would allow us to ship themes with pre-configured options that are easy to customize and extend further, while allowing you to control block options in your own custom child themes!
Additional Resources
Below is a list of resources that will help you understand building and styling themes with better integration for the Gutenberg editor:
- Styling Themes for Gutenberg — ThemeShaper
- Gutenberg Theme Support — WordPress.org
- Gutenberg, or the Ship of Theseus — Matias Ventura
- Getting your theme ready for Gutenberg — Bill Erickson
- How to add WordPress Theme Styles to Gutenberg — Rich Tabor
Note: We invite you to download the Genesis Sample theme as we have added some basic Gutenberg compatibility. Feel free to report any bugs you might find in the GitHub repository.