Restrict the locking block option to be available only to WordPress administrators

Discover in this tutorial how to prevent an user without administrator role from modifying the blocks that you have locked in WordPress.

With the arrival of the block editor and Full Site Editing (FSE) to WordPress one of the concerns of designers and developers is that the end user has “too much” control over the design and can break down the work of the professional.

That’s why in WordPress 5.9 one of the features that arrived was the ability to lock blocks. Thanks to the lock attribute you can control this blocking, specifically with two options:

• remove: controls whether the block can be removed or not.
• move: controls whether the block can be moved or not.

When the option setting is true it applies the lock.

This would be the HTML markup of a paragraph block in which both the move and delete options are locked:

<!-- wp:paragraph {"lock":{"move":true,"remove":true}} -->
<p>Heading two</p>
<!-- /wp:paragraph -->

With WordPress 6.0 version came the user interface that allows you to make these changes visually. The option is in the block menu:

By default, all blocks are created with the lock options disabled:

And the user can enable or disable them by clicking on the options:

Blocks that are locked will show a lock icon:

Having an user interface to be able to lock blocks is great, but if all users can modify and unlock them, it stops fulfilling its main purpose, don’t you think?

That’s why a very interesting option is to lock this interface so that it is only accessible by user role. For example, that only administrators have access.

This way, you make sure that the client does not delete or move blocks that it should not.

Let’s see how you can achieve this.

Show the block locking interface to WordPress administrators only

Add the following code at the end of functions.php or in your functionality plugin:

In this code you use the block_editor_settings_all filter in conjunction with the current_user_can function so that the block lock interface is shown only to administrators.

Once applied, non-admin users will not see the block, move, or delete option:

Nor will they see the padlock on locked blocks, nor the option to move up or down the block:

Maybe you’re thinking, this is great for the 90% of my clients who only use the editor UI. But there is another 10% who would know how to go to the code editor and modify whatever they want.

If so, you have to evaluate if it’s better to let them have that option. But if you think they shouldn’t have it, you can hide the code editor from the block editor for non-admin users.

If you want to combine both strategies use this snippet instead of the previous one:

With this you get to hide both the block locking interface and the code editor. This is what non-admin users would see:

Conclusion

Now you know how to lock some blocks and prevent your clients from modifying or deleting them by mistake.

This allows you to give the client access to modify the content without losing the structure you have created.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉