At WordCamp Europe 2018, Matt Mullenweg laid out a rough roadmap for Gutenberg over the next several months. In July, there’s going to be a big push to increase Gutenberg adoption, with a 5.0 beta in play for August (or beyond; actually, probably beyond). The impending integration may have you wondering how WordPress developers are planning to build for Gutenberg.
That is, what are the various ways in which developers are preparing their offerings for Gutenberg? And are people doing anything new and interesting for Gutenberg?
In this post, we’re going to give you some real, concrete examples of how plugin and theme developers can build for Gutenberg by showing you what’s already out there.
By looking at some real-life examples of how developers are using blocks and styles to create a more integrated editing experience, we hope that you:
- Understand how Gutenberg can benefit you as an end user.
- Get some ideas to build for Gutenberg for your own WordPress projects.
If you’re still not sure what the Gutenberg editor is, you might want to check out our full Gutenberg editor tutorial first.
Six examples of how existing plugins are addressing the switch to Gutenberg
The way that plugin authors build for Gutenberg depends primarily on the function of the plugin.
On one hand, you have plugins that are focused on adding front-end content. This is mainly the stuff that previously would’ve been done by adding a shortcode.
A good example is a form plugin. Pretty much every form plugin gives you a separate interface to build your forms and then a shortcode to actually embed those forms on the front end.
These types of plugins are typically going to address Gutenberg with a custom block to make it easier to insert content. You’ll see several examples in this section from:
- Ninja Forms
- Give
- WooCommerce
Then, you have other plugins that help you control behind-the-scenes details. Typically, these plugins use meta boxes.
The most well-known example would be something like Yoast SEO. You’re not adding content, but all that meta box information is essential.
Meta boxes now work with Gutenberg, but there’s still a chance for those plugins to change their functionality to take advantage of Gutenberg. I’ll show you some ways in which Yoast SEO might address the issue, as well as how we’ve chosen to do things with some of our own plugins.
1. Ninja Forms adds a new Gutenberg block
Ninja Forms is one of the most popular form plugins in the WordPress.org repo. So far, it’s addressing Gutenberg by adding a simple Ninja Forms block.
You insert the block like any other Gutenberg block:
Then, you can select your form from the drop-down:
And once you select a form, you’ll see a live preview right in the editor:
Right now, that’s all there is. But this is a solid baseline approach because:
- It eliminates the need to work directly with shortcodes
- You can see a live preview of your design while you’re still editing your page
The next two plugins will build on this with some deeper styling/control options.
2. Give adds two Gutenberg blocks with layout options
Give is a popular donation plugin with a development team that’s been very proactive about integrating Give with the Gutenberg editor (if you like the topic of this post, you’ll enjoy the #PlayingWithBlocks series at the Give blog, where the Give team details their plans to build for Gutenberg).
Give has one of the most streamlined Gutenberg experiences that I’ve tried. Not only can you bring in Give donation forms via Give’s two blocks, you can also style them using the Gutenberg interface.
Give’s two blocks let you embed:
- A single donation form
- A grid of donation forms
Like Ninja Forms, you get a live preview of your form. But you also get Block editing options that let you:
- Choose the format
- Enable/disable the donation goal
- Choose where to position content
And if you hover over your form, you’ll get a direct link to edit that form:
So there’s a look at how blocks can go a little deeper than Ninja Forms’ current implementation. But WooCommerce goes one step further…
3. WooCommerce adds a products block with column control
While WooCommerce will probably add more Gutenberg integrations as WordPress 5.0 moves nearer (some ideas for how to add products here), the team has already dipped their toes into Gutenberg with the official WooCommerce Gutenberg Products Block plugin.
Yes – right now this is a separate plugin. But once you install it, you’re able to insert existing WooCommerce products as a block in your Gutenberg content.
When you add the Products block, you can choose which products to display:
Then, you can use the block editing options to change up the layout:
This one gets me pretty excited because it’s a great example of how Gutenberg makes it more accessible to style/configure non-standard content.
4. Beaver Builder adds a “Convert to Beaver Builder” option
There’s been a lot of talk about how page builders will address Gutenberg. There isn’t much concrete yet, but Beaver Builder has added a feature in Beaver Builder 2.1 that lets you convert a Gutenberg layout to Beaver Builder:
Right now, the conversion process isn’t perfect. But the idea of being able to move between Gutenberg and a page builder is intriguing if the conversion were seamless.
5. Meta boxes should still work – Yoast SEO is a good example
I don’t think Yoast SEO has released any changes to address Gutenberg yet, so right now this is more an example of how existing meta boxes work with Gutenberg (if you haven’t been following Gutenberg closely – it has meta box support now, though it’s more for backwards compatibility than a long-term solution).
As you can see, the main Yoast SEO meta box comes through unscathed with Gutenberg:
But you’re missing the SEO and content analysis scores that used to go in the sidebar.
So how might Yoast build for Gutenberg to address that? Here are some mockups for possible ways that Yoast can integrate its analysis into the actual Gutenberg interface:
6. How we’re addressing meta boxes in WP Product Review
Our WP Product Review plugin is one of those plugins that uses a meta box to control output on the front-end (a review box in this case).
Here’s how we’re working on integrating WP Product Review into the Gutenberg editor:
When users indicate that the post is a review with a sidebar toggle, they’ll be able to configure everything about their review box from the options above:
Developers – here’s a great resource to get your plugin ready for Gutenberg
If you’re an actual plugin developer, you might be wondering how you should build for Gutenberg for your specific plugin. Well…I can’t tell you that. But I can point you to this awesome post by our own Hardeep Asrani. Hardeep lays out some actionable tips to prepare your plugin for Gutenberg.
Developers can build for Gutenberg with new plugins, too
Developers aren’t just focused on making existing plugins compatible with Gutenberg, they’re also planning to build for Gutenberg with new plugins.
New Gutenberg blocks galore
On one hand, you have a plethora of general plugins that just add new types of content blocks. These give Gutenberg more of a page builder feel. You can find blocks for:
- Pricing tables
- Testimonials
- Team members
- Etc.
For example, here’s a pricing table block from the Stackable – Ultimate Gutenberg Blocks plugin. Look at how detailed the block editing options are:
There are already a bunch of these plugins at WordPress.org. But beyond the aforementioned Stackable plugin, other popular offerings seem to be:
- Atomic Blocks – this one is from Array Themes.
- Advanced Gutenberg Blocks
There’s also an offering called CoBlocks which markets itself as “Gutenberg Blocks for Content Marketers”.
I think this niche approach is especially interesting. Maybe in the future we’ll see special Gutenberg block sets for:
The Book Review Block plugin is another mini example of how niche Gutenberg blocks might become a thing.
An example of how custom fields can work with Gutenberg
Gutenberg Custom Fields is another interesting plugin that seems to be getting some traction.
It makes it easy to set up custom fields or field groups that are associated with a particular custom post type:
Then, when you go to the Gutenberg editor, those custom fields are pre-filled as blocks:
A lot of people have been wondering how custom fields will work with Gutenberg – this is one promising example that’s already out in the wild. You can learn more about it here.
Three examples of how theme developers are addressing the transition to Gutenberg
You just saw some examples of how plugin developers can build for Gutenberg, but what about themes?
Theme developers seem to be following two main avenues to address the transition:
- Making themes Gutenberg-ready by adding styling for blocks and supporting Gutenberg layout options
- Using Gutenberg blocks to build theme content
Here are some examples to paint the picture…
1. Adding custom styles to the Gutenberg editor
One really neat thing we’re seeing developers do is adding theme styles to the actual back-end Gutenberg interface. This opens the doors to create a truly WYSIWYG experience, though Spencer from BigBox WooCommerce details some issues with styling third-party blocks.
For example, look at how ThemeShaper’s Ohana theme completely restyles all the Gutenberg content, including the post title:
If you want to see it in action, download the Ohana theme from GitHub. And ThemeShaper also explains how they achieved this effect in this blog post.
2. Adding new full-width alignment options
Another cool theme compatibility tweak you’ll see is the addition of Wide Alignment support. Essentially, this lets you make certain blocks full-width. The most common example would be inserting a full-width image.
Again, you can see this in effect with the Ohana theme:
In order for this alignment to work, theme authors need to explicitly declare support.
3. Building theme demo content with blocks – e.g. The Block Theme
Finally, this approach from Organic Themes is pretty cool:
The Block Theme’s demo content is built entirely with Gutenberg blocks.
This is something we’ll undoubtedly continue to see grow, as Matt explicitly said in the Gutenberg roadmap that July would include exploring “expanding Gutenberg beyond the post into site customization.”
Beyond The Block theme, Array Themes also has an Atomic Blocks Theme that’s specifically designed to integrate with the Atomic Blocks plugin mentioned above.
Developers – here’s how to get your theme ready for Gutenberg
If you’re a theme developer wondering how to make your existing theme compatible with Gutenberg, Bill Erickson has a great guide to the high points. And the Theme Support section of the Gutenberg handbook is another good resource.
There’s definitely going to be more cool stuff to come
From the sampling above, I hope you have a better understanding of how plugin and theme developers are planning to build for Gutenberg.
On a personal note, I know that writing this post has made me notably more excited about the possibilities with Gutenberg.
On the plugin front, using blocks to replace all the things that would’ve previously been done with shortcodes is a major improvement for usability, especially for casual users.
And the way that theme developers can bring in their own styles and incorporate blocks is also exciting – especially as Gutenberg expands more into site customization.
Now over to you – have you stumbled across any great examples of plugin or theme authors finding interesting ways to build for Gutenberg? Let us know in the comments!
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%:
