Developing with Gutenberg: How Agencies Can Adapt to WordPress’s New Editor

For the past year, the developers of WordPress have been working on a brand new publishing workflow codenamed Gutenberg—after another invention that revolutionized publishing.

Scheduled to debut in the next major release, Gutenberg radically updates the way post and page content will be added to WordPress sites. Instead of the basic WYSIWYG editor, we’ll be getting a block-based page builder aimed at competing with paid services like Squarespace and Wix.

example of gutenberg dashboard

For agencies and freelancers, the nerves have set in. While an individual blogger might appreciate a fancier way to craft content, agencies often need to create more bespoke experiences for their clients. Instead of a wide-open page builder, with a lot of options and a lot of ways for clients to get lost, we prefer carefully-labeled custom fields.

But like it or not, Gutenberg is coming. So how can we adapt?

What Gutenberg Is, and What It’s Not

Gutenberg is a “block-based” editor. That means each distinct item in a post—an image, a paragraph, a video embed—is now a “block”. Blocks can be moved around, duplicated and deleted, and each block has its own options. For example, paragraph blocks can be given a drop-cap effect, or a different background color for emphasis.

example of paragraph blocks in gutenberg

While developers will need to account for the extra time it will take testing the various styling options, this is mitigated by the ability to control certain options. For example, for those paragraph background colors, theme developers can set a specific color palette.

For all the new toys, Gutenberg still only encompasses post content, and it still saves that content as pure HTML. That means that theme developers will still have full control over where to output the content, and where to show other elements, such as featured images or custom fields. Which is great news, because…

Custom Fields Aren’t Going Anywhere

After some initial confusion, WordPress has confirmed that meta boxes and custom fields will be supported. Since the editing screen is changing so radically, they haven’t guaranteed that all plugins will work out of the gate. But Advanced Custom Fields, the most popular fields plugin, has committed to compatibility.

Meta boxes will display beneath the main Gutenberg section:

example of custom fields in gutenberg

When Page Building Doesn’t Make Sense

Gutenberg can also be turned off at the post type level. All it takes is one line of code:

<?php remove_post_type_support( $post_type, ‘editor’ ); ?>

This essentially empties the page:

example of gutenberg turned off

This is a vital feature, and an acknowledgment that for some post types, Gutenberg doesn’t yet make sense. For example, for a recent law firm website, we build an “Attorneys” post type. Each attorney page displayed a header image overlaid with the attorney’s name, a sidebar with contact information and a short bio.

Gutenberg isn’t yet powerful enough to create that whole layout, but we wouldn’t want users to have to recreate a layout like that for every attorney anyway. Nor would we want to use Gutenberg for just the bio section, which we determined should be text only. For these situations, the old-school way of offering a clean list of custom fields seems like the best option.

Still, Gutenberg is a viable option for more post types than you might think, thanks to a concept called block templates.

Block Templates

When registering a new post type, developers can add a “template” parameter, specifying a set of blocks to display by default. We can also prevent users from adding or rearranging blocks with a “template_lock” parameter.

'template' => array(

array( 'core/image' ),

array( 'core/paragraph', array(

'placeholder' => 'Add product description...',

) ),

array( 'core/heading', array(

'content' => 'Features',

) ),

array( 'core/list', array(

'values' => array( 'List product features...' ),

) ),


‘template_lock’ => ‘all’

With just that code, the post type turns into this:

example of gutenberg and post type

What was previously a free-for-all starts to look like the smart, custom-built user experience we’re expected to deliver.

Still, there are questions. How can we add labels or headings that we don’t want to be editable? Where is the block to handle basic single-line text? And if all this gets saved as HTML content, what about data that we need to use programmatically? For example, if we store an event date within Gutenberg, how can we sort events by that date?

For now, the answer lies within custom blocks. Gutenberg comes with a full developer API for creating different block types, and includes the ability to save block content as metadata (the same storage used for custom fields). Expect to see a lot of custom block plugins pop up after Gutenberg is released.

Opportunities with Gutenberg

Ultimately, Gutenberg is an opportunity. Even after its initial release, WordPress will continue to add new features as it matures. Picture a contact form block, or a Google Maps block. Or even a “user listing” block which allows you to create a member directory right inside Gutenberg.

While there may be growing pains for agencies and freelancers in the beginning—and for some of our maintenance sites, it might make sense to keep the classic editor in place—we have the potential to drive the evolution of Gutenberg as we identify opportunities for growth and develop new best practices. Let’s not just get used to it, let’s get excited for what’s possible.

Gutenberg got you nervous or excited? Share your thoughts with us on Twitter and subscribe to CHIEF’s newsletter for the latest insights.

Get alerted to new job postings, events, and insights by registering for our monthly newsletter.