The Key to Locking Blocks

In this session, we will look at how to restrict the movement and the removal of blocks or patterns. We will also briefly discuss how to restrict users from unlocking a block.

Learning outcomes

1. Using the locking and unlocking feature.
2. Restricting the movement and removal of parent blocks as well as inner blocks.
3. Editing a group of blocks or block pattern that have been locked.
4. Adding code to your functions.php file to restrict the locking user interface to Administrators.

Comprehension questions

1. Can you lock a container block and its inner blocks simultaneously?
2. How can locking blocks be used to curate the editing experience within WordPress?

Restrict locking and unlocking

By placing the following code example in the functions.php file of any theme, only Administrators will have access to the locking UI.

/**
 * Restrict access to the locking UI to Administrators.
 * 
 * @param array $settings Default editor settings.
 * @param WP_Block_Editor_Context $context The current block editor context.
 */
function example_theme_restrict_locking_ui( $settings, $context ) {
    $settings[ 'canLockBlocks' ] = current_user_can( 'activate_plugins' );

	return $settings;
}
add_filter( 'block_editor_settings_all', 'example_theme_restrict_locking_ui', 10, 2 );

Resources

• Unlock the Power of the Block Locking API

• Curating the Editor Experience

Transcript

Hi and welcome to Learn WordPress. Sometimes it is important to keep blocks from being deleted or moved around from where they are placed. Block locking, therefore, allows you to restrict the movement and the removal of blocks or patterns.

The block locking feature can lock blocks or block patterns so that editors and authors cannot manipulate the layout of blocks in unexpected ways. Essentially, it helps you to preserve a design. You might have worked very hard on creating a complex layer of blocks and want to ensure that a user or client can’t change or accidentally compromise the design you have created. In other words, it puts some guardrails in place for content creators. By allowing blocks to be locked, you can now deliver predesigned patterns and templates that can be edited but not easily modified.

It is worth pointing out that if you are a regular WordPress user, for example, not part of an agency or a freelancer, and you’re working on your own site, block locking can also be seen as a safety mechanism, which will prevent you from accidentally moving or deleting designs you have created.

If you would like to use the block locking feature, select the parent block or individual block, and then click on the three vertical dots and scroll down to lock. If you want to prevent authors from moving blocks individually, then select the Disable movement option. And if you want to prevent the removal of blocks, select Prevent removal. The final locking strategy is to restrict both the moving and removal of the target blocks. There is also a great new feature that allows you to lock all the inner blocks of a container block or parent block. And when you have selected all of these, go ahead and click on Apply.

Now you will notice that the lock icon is visible next to the parent block as well as the inner blocks. And when you click on the three vertical dots, the option to remove the block has disappeared. And when you select an individual block, you will notice the lock icon in the block toolbar and the fact that the move handles or the little arrows are not there to move content to a different spot. And usually, you are able to drag and drop blocks to a new location in the list view. But now you will notice that option is also not available anymore. If you drag or drop, nothing happens.

Remember, even if a group of blocks or pattern is locked down, it doesn’t hamper the ability to edit the pattern and make it your own. You can, of course, still edit the content and the style as you please.

Something important to take note of. Any user who can edit blocks has the ability to both lock and unlock blocks. This means that users can still unlock a pattern or group of blocks. You could restrict the locking user interface or UI to only administrators or specific users if you wanted to. You can change this setting using the filter block_editor_settings_all and then add some code in the functions.php file of your theme. If I now log into my website as a different user, as an author, in this case, we will notice that the locking user interface has changed, and we no longer have the option to unlock a block or group of blocks. Only the administrator has this power. This is a bit more advanced, but I will add the code as well as a resource below if you are interested to learn more.

So as you have seen, block locking allows you to curate the editing experience within WordPress and don’t forget to visit Learn WordPress for more tutorials and training material.