Discover in this tutorial how to lock some blocks to prevent the user from modifying the structure of a block template 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 “disrupt” the professional’s work.
That’s why in WordPress 5.9 one of the features that arrived was the ability to lock blocks.
The good thing is that it can also be applied to block templates.
This can make life much easier for your client because, once the structure is created, he will only have to enter the data.
But what if you want to prevent him from moving the blocks around or entering new ones?
Well, that’s OK because you can lock these templates in several ways
I’ll explain them all below. ๐
Options to lock blocks of a template
To better illustrate the example, let’s take the tutorial on how to create a block template for a CPT
In it we created a structure like the following for the entries of a CPT:
- Introduction paragraph
- Image | Header
Listing - Paragraph with content
With this result in the block editor:
The code in this tutorial did not contemplate any blocking. That is, the user could move, delete and/or add any block.
Now let’s see what two strategies we can use to prevent certain modifications.
A – General template locking
First let’s see how you can use general block template locking.
These are the two levels of “locking” at your disposal:
template_lock = 'all'
: prevent moving, deleting or inserting new blockstemplate_lock = 'insert'
: only prevents additional blocks from being added.
Therefore, you will have to use:
To see this and another 1097 code snippets of this website, login or subscribe here.
Applying the above code you will see that a padlock is displayed next to the blocks, indicating that they are locked.
This method has a limitation and that is that as you can see that the first level blocks are locked, but the nested ones are not.
If you want to increase the level of control you will have to use the next strategy.
B – Block level blocking
The second method is to use block-specific blocking.
As in the previous case there are two options:
remove
: controls whether the block can be removed or not.move
: controls whether the block can be moved or not.
That is, to each block you can add the lock
attribute. It would look something like this:
To see this and another 1097 code snippets of this website, login or subscribe here.
This would be the result:
Another option is to use the general template lock and exclude some specific block.
For example, if you want the last paragraph not to be blocked you would use this snippet:
To see this and another 1097 code snippets of this website, login or subscribe here.
This would be the result:
Another option is to lock only a specific block.
For example, if you want the list in the example to be blocked you should use this snippet:
To see this and another 1097 code snippets of this website, login or subscribe here.
This would be the result:
I think with all these examples you get an idea of the granularity that combining both strategies offers.
Now you just have to adjust it to your needs. ๐
Conclusion
Now you not only know how to create a block template to make it easy for your clients, but you also know how to lock it to prevent them from modifying its structure.
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. ๐