How to disable theme features, Locking Blocks and Templates for Full-Site Editing in WordPress

In this post 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

Love Locks Bridge in Paris by Matthew-Benton

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

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.

Core Editor Improvement: Curated experiences with locking APIs & theme.json

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.” by Matt Benton is licensed under CC BY-NC-SA 2.0

Related Posts