Locking Blocks in WordPress 5.9

To facilitate creating better patterns and templates, WordPress 5.9 comes with a new blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. level locking mechanism that works alongside templateLock.

Instead of applying a lock to all inner blocks, you can apply it selectively to individual blocks via the lock attribute. The block level locking would supersede the inherited templateLock value. You can choose to lock moving or removing a block.

APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. definition

You can lock a block by default by adding locking to its definition, for example:

"attributes": {
    "lock": {
        "type": "object",
        "default": {
            "move": true,
            "remove": true
        }
    }
}

You can also lock a specific block in a pattern. In this example, the heading block is now locked and 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 ↗</a></p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:media-text -->

Working alongside templateLock

Block locking supersedes template locking, see block template documentation, this allows it to override or undo on the specified block:

For removing:

For moving:

Unlike templateLock, block locking is not inheritable. If a block is locked from being removed, its children can still be removed. If you want to apply locking on children as well, add templateLock to the inner block component, or templateLock attribute to supporting blocks.

Props to @nadir for writing this dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase., and @get_dave for reviewing.

#5-9, #dev-notes