When WordPress 5.0 introduced a brand new Block Editor (nee Gutenberg) to the world, it brought some philosophical challenges along with it. Along with many other designers and developers, we were cautiously optimistic. The Block Editor adds some awesome functionality that our clients were really excited to get to use creatively!

But we were also nervous about some aspects of the Block Editor vision. For instance:

• The Block Editor gives clients so much potential control over the look of a page. So how do we keep them within a style guide? Or keep them from “going rogue”?
• What about the little bits of collected metadata that we want to display outside of the post content area, such as a photo in the sidebar, or a byline only in the archive view?
• If we use a robust page builder like Beaver Builder with clients, how does the Block Editor fit in?

After lots of conversation and real-world work, Jessica and I here at Blustery Day Design have landed on a hybrid both/and approach: utilizing both the Block Editor and a page builder to accomplish our goals. It makes sense to us, and we haven’t seen this sort of model talked about much. Maybe it can give you some ideas, too.

Introducing the Picture Mat

We find it useful to distinguish between what the Block Editor thinks it is versus what we want it to be. The Block Editor dreams of creating the full visual experience on the front end…but that just doesn’t make sense for a lot of our clients and use cases at this time.

Enter: the Picture Mat model.

We started to think of each site template as a document framed with a picture mat.

• The inside cutout of the picture mat is the client’s domain: their “document” space for copy, images, fancy quotes, and other Block Editor goodies.
• The picture mat itself is ours. We lay it out carefully in the template, style it intentionally, and make sure it complements the content inside.

At the moment we’ve settled on a nice system that works for us using the Beaver Builder page builder and its co-pilot add-on, Beaver Themer. If you’re not familiar with Beaver Themer, it’s a robust companion to Beaver Builder that allows you to build out specific templates or template parts and apply them conditionally throughout the site. We also use Advanced Custom Fields Pro (ACF) to build custom systems for collecting and displaying metadata.

(The specifics would be different with other tools, but the philosophy would remain the same.)

Example 1: Full-width page

Imagine a page (or post) with no sidebars, just full-width content all the way down.

We could build the whole thing in Beaver Builder, but we’d rather include a post content area. This way the client can more easily update the copy and use the Block Editor interface they’re used to.

But we also need some of the robust modules, nested layout bits, and conditional logic that Beaver Builder offers for the top section.

So we build a hybrid!

The top super-stylized title area goes in our Beaver Themer layout. It becomes part of the picture mat (blue overlay in the image above). Then, we can pull in and style our Advanced Custom Fields data, show certain parts conditionally based on the user’s logged-in status, and really maximize the potential of our page builder.

Then we add a custom-styled Post Content module to the template we’ve created for the page or post’s Block Editor content to live in. The resulting cutout area (olive overlay) is the client’s domain. They can use the Block Editor to do whatever they’d like! And we don’t worry as much, because we know that no matter what design choices the client makes, it will all still always be contained within our well-designed picture mat.

Example 2: Post with sidebar

This site has a header, footer, styled post title, and sidebar.

Here again, the picture mat encompasses everything around the block-editor-content-shaped cutout. Everything in the picture mat is created at a template level in Beaver Themer. First we use the Beaver Builder rows and columns to lay out our page. Then we add our modules. For example, we can have conditional promo boxes appear in the sidebar based on post category. Or we can pull content above the title based on an ACF field, for instance.

Then we place our custom-styled Post Content module where the block editor content will go. Again, the client controls the inside cutout using the Block Editor and can design their document however they like. No matter what they make, it is contained nicely within a beautiful template.

Notice in this example that the layout we build still allows for that nice, edge-to-edge block editor “feel” for the client’s content, even though there’s actually a sidebar there, too. Neat!

In conclusion: Everybody wins

In the most perfect imagined scenario, clients always follow style guides and make great design choices that don’t subvert the brand. The Block Editor would be easy for clients to use, and easy & quick for developer/designers to customize and tweak.

In the real world…websites don’t work that way.

No matter what we set up, we know that content gets worked on by a wide variety of people (and skill levels).

Our styles and suggestions won’t always be followed. And our clients come to us with complicated real-world needs that currently aren’t served by the Block Editor. But page builders like Beaver Builder handle these needs wonderfully.

We’ve seen lots of other solutions for these challenges, but they didn’t seem right for our clients:

• When sites avoid the Block Editor completely and revert to the Classic Editor, this denies clients the real benefits of the Block Editor.
• Sometimes developers are overoptimistic about the Block Editor’s capabilities. Clients may struggle in completing their real-world tasks with content that doesn’t always fit exact requirements.
• Some solutions involve significant JavaScript Block Editor customization from the backend code files. This limits who can edit these customizations and can add cost and time to a project.
• Other solutions view site templates and decisions as technical problems to be standardized. This approach can omit the very real and ever-changing content strategy needs the client has.

The picture mat helps everyone

By creating sites that combine these two tools, we can accommodate the challenges our clients face! We empower them to be creative (but not too creative!), and we can design sites that meet our high standards. This also sets the client up for success: they can continue to use and work within the site without wrecking the perfect launch-day visual look.

We set up the picture mat, and they still have the tools to create beautiful content to be displayed within. The client is excited to add new content, and we aren’t terrified that our beautiful design systems will be wrecked. Everybody wins!