Learn in this tutorial how to control that only the content in a block pattern can be modified.
In a previous tutorial you learned how to create a block pattern and register it in a plugin or a classic theme, or in a block theme.
In this case I’m going to explain you how to make it so that when the end users enter the pattern, they can modify only the content.
This is very practical because this way you make sure that your clients do not delete or move a block unintentionally.
Steps to create a block pattern in which only the content can be modified
1. Create the block pattern in the editor and escape the HTML
The first part is exactly the same as the first two steps of the tutorial where I explained how to create a pattern.
In short, in step 1 you did the design part from the block editor itself, and in step 2 you copied that HTML and escaped it.
This was the design we created in the tutorial:
And the escaped HTML was something like this:
<!-- wp:cover {\"url\":\"https://osomcode/wp-content/uploads/2022/02/header1.jpeg\",\"id\":591,\"dimRatio\":50,\"minHeight\":600,\"isDark\":false} -->\n<div class=\"wp-block-cover is-light\" style=\"min-height:600px\"><span aria-hidden=\"true\" class=\"wp-block-cover__gradient-background has-background-dim\"></span><img class=\"wp-block-cover__image-background wp-image-591\" alt=\"\" src=\"https://osomcode/wp-content/uploads/2022/02/header1.jpeg\" data-object-fit=\"cover\"/><div class=\"wp-block-cover__inner-container\"><!-- wp:heading {\"textAlign\":\"center\",\"level\":1,\"textColor\":\"white\"} -->\n<h1 class=\"has-text-align-center has-white-color has-text-color\">THIS IS AN OSOM TITLE</h1>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"textColor\":\"white\"} -->\n<p class=\"has-text-align-center has-white-color has-text-color\">These are your awesome reasons why everybody should keep browsing your website</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons {\"layout\":{\"type\":\"flex\",\"justifyContent\":\"center\"}} -->\n<div class=\"wp-block-buttons\"><!-- wp:button -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">CONTACT ME</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div></div>\n<!-- /wp:cover -->If you leave it like this, when the user enters the block pattern they will see the following:
As you can see, the user has access to all the blocks and settings. But you may want to simplify the interface and the available options to make his life easier. Let’s see how.
2. Lock the block so that only the content can be changed
To indicate that only the content of the block can be changed you have to use the attribute "templateLock": "contentOnly". In this case the block pattern (once the HTML is escaped) would look like this:
<?php
/**
* Title: Osom Hero
* Slug: osom-theme/osom-hero
* Categories: header
* Keywords: Call to action, Hero
*/
?>
<!-- wp:cover {\"url\":\"http://osomcode.local/wp-content/uploads/2020/06/sample-blog-post-2.jpg\",\"id\":3756,\"minHeight\":600,\"minHeightUnit\":\"px\",\"align\":\"full\",\"templateLock\": \"contentOnly\"\n, \"className\":\"osom-hero\"} -->\n<div class=\"wp-block-cover alignfull has-background-dim osom-hero\" style=\"background-image:url(http://osomcode.local/wp-content/uploads/2020/06/sample-blog-post-2.jpg);min-height:600px\"><div class=\"wp-block-cover__inner-container\"><!-- wp:heading {\"align\":\"center\",\"style\":{\"typography\":{\"fontSize\":82}}} -->\n<h2 class=\"has-text-align-center\" style=\"font-size:82px\">This an osom title</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"typography\":{\"fontSize\":32}}} -->\n<p class=\"has-text-align-center\" style=\"font-size:32px\">Here you can add reasons why everybody should keep browsing your website</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Contact me</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div></div>\n<!-- /wp:cover -->
This would be the interface that the user would find:
You can see that it is much simpler.
In fact, the only thing you can do is to select the blocks and change the content (text, images, links…).
I am sure you can think of more than one case where to apply this tutorial, don’t you?
Conclusions
Block patterns are a very powerful tool. Thanks to them you can offer predefined designs to the user/customer.
Now you know how easy it is to customize them so that only the content can be modified and avoid the customers to break those hardwork designs that you left them.
If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.
Benefits of being a subscriber. 🙂
