Any time you build a website for a client, you might struggle with just how much access they should have on their own site. In theory, they should be trusted as an administrator. But what if you don’t want them rearranging content on the site, or modifying other design elements? This is where locking down the settings can really help. In this tutorial, we’ll show you how to lock blocks in WordPress.
Why would you want to lock a block?
You’ve just designed an amazing website and turned it over to a client. Each element is thoughtfully placed, and every goal for the site has corresponding layout elements. The client takes over writing and revising content. Then they accidentally press a button. We’ve all been there. Even with a good website care plan, we still might wish to create some pause before major changes impacting the site are done with a simple click of the button. This is where WordPress block locking will save the day.
Think of locking a block in WordPress to be very similar to locking layers in Photoshop. If you have access to that file, you can still unlock that item. Any WordPress administrator can still access the Site Editor to modify if blocks are locked. However, it will ask the administrator if they are really sure they want to unlock this to make changes.
How to lock blocks
Locking blocks is a new feature in WordPress 6.0. You’ll need a theme compatible with Full Site Editing, such as Twenty Twenty Two if you want to use locks on areas such as the header or navigation menu. However, locking blocks will also work in Posts and Pages as well.
- Go to Site Editor.
- Expand the List View.
- Select the block that you would like to lock. In our image, we’ve selected a row block nested several layers within our header.
- Select the kebab menu at right to view additional options.
- Choose Lock from the drop-down menu
The Lock modal will pop up for the block you want to lock. You can lock all, or limit it to just disabling movement or preventing others from deleting the block.
Note: locking blocks will only apply to that layer. If a user expands a nested block, blocks within that layer are not locked. You can manually lock each layer.
How to unlock a block
Now that you have locked blocks, you may be wondering how to unlock a block. Similar to locking a block, repeat the same steps but select Unlock. Notice you will also see a lock icon in the List View if the block is locked.
How to configure your theme for block locks
Theme developers can also configure block locking within the Theme.json file. See GoDaddy-sponsored Gutenberg contributor, George Mamadashvili‘s tutorial for more code examples.
For more information, check out this post from the Make WordPress Core team:
Core Editor Improvement: Curated experiences with locking APIs & theme.json
If you want to limit what others can easily change in their site, get started with locking blocks in WordPress 6.0. While it will not lock all nested blocks or prevent other administrator users from accessing areas, it will prompt users to confirm that they want to unlock the block.