How Gutenberg Guardrails Empower Creators: Theme.json and Block Locking APIs in WordPress
WordPress’s block editor makes content creation fun, powerful, and accessible. Also, advancements in full-site editing (FSE) and specifically the block editor give content creators more control over the look and feel of their website.
With the latest versions of WordPress, you can thoughtfully set guardrails in the WordPress backend, empowering content creators by streamlining content creation while helping content developers and leadership rest easy knowing things won’t go off the rails.
Let’s dive into how forward-thinking teams can shape the editorial experience by customizing the block editor.
Why restrict options for content creators?
When you have a team of content creators working on your site, giving them endless freedom and possibilities, while liberating, can also be a bit daunting, even scary. The last thing you want is someone (even inadvertently) compromising your brand. For example, publishing a post with the wrong heading typeface or a block pattern design is not a good look.
Setting guardrails has become essential. It enables content creators to spin up content with more agility, confidence, and autonomy. It also gives businesses peace of mind that content will adhere to those brand guidelines.
With WordPress 5.9, the new block locking mechanism, paired with existing template locking and theme.json customization, can help set your publishing standards.
Guide the content creation experience with theme.json
Do you have a strict typography scheme and limited brand colors? Setting granular options in theme.json allows you to predefine a set of choices for content creators. Want to disable a feature altogether? Simply set an option to “false” to hide it from temptation and streamline content creation even further.
Here’s an example theme.json file that demonstrates these customizations, graciously provided by WordPress core contributor Anne McCarthy.
Allow content creators to build their stories while protecting important block patterns
Certain block elements or contextual styling you don’t want changeable. This is where block-level locking and customizing the blocks’ available design options with theme.json come into play, as we explored above.
The following example demonstrates a “call-to-action” block pattern an editor can insert anywhere within the block editor. Note that even though the experience is locked down in a few ways, it doesn’t hamper the ability to match the story.
Header and button blocks locked inside a pattern. Styling options are also limited to prevent design elements from deviating from brand. Here’s a copy of the pattern and theme.json used to create the above video.
Have you already started utilizing full-site editing and block templates? You can apply these same principles when building block templates (a collection of blocks with lock attributes). Learn more in the Block Editor Handbook.
How can I use theme.json and locking APIs in my classic theme?
Not quite ready to introduce full-site editing to your team? You can still take advantage of block editor customization with theme.json and limit what blocks are removed or moved with the new block locking mechanism.
When you add theme.json to your existing theme, some controls for color and typography are enabled by default. Start with this theme.json setup, which disables most features, allowing you to opt-in the ones your theme uses.
Where can I follow and contribute to ongoing core editor improvements?
Early work on the editor is conceptualized, designed, and developed in the Gutenberg plugin repository before features deploy to the WordPress core. Contribute and try out new experimental features there.
Expect more to come regarding locking, specifically surfacing lock state in the UI, planned to be shipped with the upcoming WordPress 6.0 release. Limiting block editing depending on a user’s role is also under consideration. This would, for example, let editors publish new stories while the marketing team edits template blocks with the latest campaign content.
Where can I get help?
We’d love your thoughts, challenges, and initiatives related to how your organization empowers content creators. Our team is happy to collaborate with you or recommend partnerships with world-class agencies.
By the way, we implemented full-site editing on wpvip.com. The lessons we learned can help inspire your own efforts. Start with our on-demand webinar Gutenberg Full-Site Editing: Unlocking Agility for Enterprise WordPress.
Author
Sean Langlands, Support Engineer, WordPress VIP