After the release of WordPress 5.9, quite a few people aired their concern that too much freedom for users editing the site design, select colors or to modify blocks might be the opposite of what customers want. Especially more complex websites with many editors and departments who produce content need guard rails to enforce publishing standards and adherence to brand color schemas and design systems.
Below you’ll find list of documentation links and code examples for the myriad of ways to restrict access or choices for users. As WordPress 5.9 is only a beta version of the Full-Site editing experience, you also can participate in linked discussion on GitHub for development still in progress. It also includes information on the Block Locking UI coming in WordPress 6.0
Update: (2022-05-09)
Table of Contents
- Block Locking UI in WordPress 6.0
- Locking Block Templates and Block Patterns
- Demo on Locking Block Templates, Patterns and via theme.json by Ryan Welcher
- Permission System for FSE theme templates.
- Disable User design controls for blocks and block themes
- Colors
- Border Controls
- Typography
- Spacing
Block Locking UI in WordPress 6.0
With WordPress 6.0, users and developers will receive additional ways for locking blocks and reusable blocks.
The new block locking UI prevents moving or removal of blocks from reusable blocks, and the Block Toolbar as well as the List view will show a lock signaling the state of the block.
The users access the locked/unlocked feature via the block “options” dropdown by default.To disable this behavior, set `lock` attribute to “false” in the block.json supports settings.
In this dev note, George Mamadashvili discribes how developers can assign `canLockBlocks` capabilities to certain user roles, or only to a particular user or disable block locking entirely.
Locking Block Templates and Block Patterns
Developers can register block templates (a collection of blocks, with lock attributes) for instance for custom posts types. More about it in the Block Editor Handbook. This feature has been available for a few years now. It’s not directly related to FSE. The lock mechanism can also be applied to Block Patterns.
With WordPress 5.9 documentation you can find the DevNote: Locking Blocks in WordPress 5.9. It describes the settings for the block attributes “lock” and how you can control, adding, inserting as well as moving or removing blocks.
There are discussion held on GitHub repository, that could use your input, if you are developing sites that need guard rails.
- On Locking and TemplateLocking (a Tracking Issue)
- Learn more about the TemplateLock attribute to column and group
Demo on Locking Block Templates, Patterns and via theme.json by Ryan Welcher
In this YouTube video , Ryan Welcher demonstrated how Locking Blocks and block templates works. Looking at Block locking, create block, and script packages updates.
Welcher also share the link to his plugin, built of testing and educational purposes.
Permission System for FSE theme templates.
In discussions, contributors look at the relevant aspects on how to handle permission for various sections on themes, templates, and template parts.
Disable User design controls for blocks and block themes
The theme.json file is the place where you can configure the user controls for gradient, color choices, font settings or background colors.
Anne McCarthy posted a video Connecting The Dots: Using duotone in theme.json to customize your image blocks
Here are a few, this might not be comprehensive yet.
If you want to use theme.json in a classic theme, but you don’t want to allow access to the template editor, add remove_theme_support( 'block-templates' ) to your functions.php file. Hat tip to Ryan Welcher for this tweet.
Carolina Nymark wrote in her course on building theme for full-site Editing about Enabling and Disabling features in theme.json
Thanks to David Gwyer‘s block theme.json Generator, I could set all the settings to zero or false or to empty arrays to removing color, border, typography, and spacing controls.
I have not tested all settings below, so use at your own risk.
Colors
"color": { "background": false, "custom": false, "customDuotone": false, "customGradient": false, "defaultGradients": false, "defaultPalette": false, "duotone": [], "gradients": [], "link": false, "palette": [], "text": false}Code language: JavaScript (javascript)Border Controls
"border": { "color": false, "radius": false, "style": false, "width": false },Code language: JavaScript (javascript)Typography
"typography": { "customFontSize": false, "dropCap": false, "fontFamilies": [], "fontSizes": [], "fontStyle": false, "fontWeight": false, "letterSpacing": false, "lineHeight": false, "textDecoration": false, "textTransform": false }Code language: JavaScript (javascript)Spacing
"spacing": { "blockGap": null, "margin": false, "padding": false,}Code language: JavaScript (javascript)Have you found additional tweaks you apply to keep design choices safe? Please share them in the comments.
Featured Image: “Locks on Bridge, Paris.”byMatt Bentonis licensed underCC BY-NC-SA 2.0
