• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

Block or limit the modification of WordPress block templates

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 blocks
  • template_lock = 'insert': only prevents additional blocks from being added.

Therefore, you will have to use:

To see this and another 847 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.

blocks-template-locked-CPT-WordPress
Block template lock

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 847 code snippets of this website, login or subscribe here.

This would be the result:

lock-all-blocks-even-nested-wordpress-template
Lock all blocks including nested ones

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 847 code snippets of this website, login or subscribe here.

This would be the result:

lock-all-blocks-except-one-wordpress-template

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 847 code snippets of this website, login or subscribe here.

This would be the result:

block-only-one-block-wordpress-template
Lock only one block of the template

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. ๐Ÿ˜‰

Block Editor PHP WordPress

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice ยท Privacy Policy ยท Cookie Policy ยท Terms and conditions
Copyright © 2023

Lost your password?