The WordPress team announced that WordPress 5.0, which is expected to be released on 25 January, is coming with a new block level locking mechanism. It will work alongside templateLock and allow theme authors to create better patterns and templates. The API was already included in Gutenberg and it enables developers to lock the template, preventing users from manipulating the block.
Can be applied to selected blocks
Developers can apply it selectively to individual blocks with the lock attribute instead of applying it to all inner blocks. The new API can be applied on the block level and override template locking. Block locking is not inheritable, unlike templateLock. This means if a block is locked, its children can still be removed. To prevent that, templateLock can be added to the inner block component.
By adding locking to its definition, users can lock a block by default:
"attributes": {
"lock": {
"type": "object",
"default": {
"move": true,
"remove": true }
}
}It is also possible to lock a specific block in a pattern. For example, this is how users can lock the heading block and it can’t be removed:
<!-- wp:media-text {"align":"full","mediaType":"image","verticalAlignment":"center"} -- >
<div class="wp-block-media-text alignfull is-stacked-on-mobile is-vertically-aligned-center">
<figure class="wp-block-media-text__media"><img src="https://s.w.org/images/core/5.8/architecture-04.jpg" alt="Close-up, abstract view of architecture." /></figure>
<div class="wp-block-media-text__content">
<!-- wp:heading {"textAlign":"center","level":3,"style":{"color":{"text":"#000000"}},"lock":{"remove": true}} -- >
<h3 class="has-text-align-center has-text-color" id="open-spaces-1" style="color: #000000;"><strong>Open Spaces</strong></h3>
<!-- /wp:heading -- >
<!-- wp:paragraph {"align":"center","fontSize":"extra-small"} -- >
<p class="has-text-align-center has-extra-small-font-size"><a href="#">See case study <img draggable="false" role="img" class="emoji" alt="" src="https://s.w.org/images/core/emoji/13.1.0/svg/2197.svg"></a></p>
<!-- /wp:paragraph -- >
</div>
</div>
<!-- /wp:media-text -- >See more Development News
