Build for Gutenberg: How Plugin and Theme Authors Are Addressing the Transition to Gutenberg

Build for Gutenberg: How Plugin and Theme Authors Are Addressing the Transition

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:

how ninja forms devs build for Gutenberg

Then, you can select your form from the drop-down:

ninja forms block

And once you select a form, you’ll see a live preview right in the editor:

live preview of form

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

givewp gutenberg blocks

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

block layout options

And if you hover over your form, you’ll get a direct link to edit that form:

block editing

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:

gutenberg woocommerce block

Then, you can use the block editing options to change up the layout:

changing woocommerce layout in gutenberg

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:

beaver builder gutenberg

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:

gutenberg yoast seo meta box

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:

Mockup A
yoast seo gutenberg readability analysis
Mockup B
yoast seo warning
Mockup C
yoast seo in-content analysis

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:

wp product review gutenberg

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:

wp review pro gutenberg toggle

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:

new gutenberg blocks

There are already a bunch of these plugins at WordPress.org. But beyond the aforementioned Stackable plugin, other popular offerings seem to be:

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:

gutenberg editor custom fields

Then, when you go to the Gutenberg editor, those custom fields are pre-filled as blocks:

gutenberg custom field example

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:

gutenberg in-dashboard styles

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:

gutenberg wide layout

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%: