Locking Block Patterns & Content-Only Editing
One of the biggest fears when handing over a Full Site Editing theme to a client is that they will accidentally delete a critical container or mess up a complex layout.
WordPress provides two levels of protection: Standard Locking (prevent move/delete) and Content-Only Editing (hide the layout entirely).
1. Standard Block Locking
You can lock specific blocks to prevent them from being moved or removed. This is useful for "Required" elements like a copyright notice in a footer.
The "How": The lock Attribute
In your block markup (or pattern PHP file), add the lock attribute to the block comment.
<!-- wp:group {"lock":{"move":true,"remove":true}} -->
<div class="wp-block-group">
<!-- wp:paragraph -->
<p>This group cannot be deleted or moved.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->move: true: Hides the up/down arrows and drag handle.remove: true: Hides the "Delete" option in the toolbar.
2. InnerBlock Locking (templateLock)
Sometimes you want the Parent to remain editable, but you want to freeze the Children inside it.
Example: A "Team Member" card. You don't want the user to delete the photo or the name, but they can edit the text inside them.
<!-- wp:group {"templateLock":"all"} -->
<div class="wp-block-group">
<!-- wp:image -->
<figure class="wp-block-image"><img src="..."/></figure>
<!-- /wp:image -->
<!-- wp:heading -->
<h2>John Doe</h2>
<!-- /wp:heading -->
</div>
<!-- /wp:group -->templateLock: "all": Users cannot add, remove, or reorder any blocks inside this group. They can only edit the text/content of existing blocks.templateLock: "insert": Users cannot add new blocks, but they can move or remove existing ones.
3. The Holy Grail: Content-Only Editing
Introduced in WordPress 6.1, Content-Only Editing is the best feature for client-safe patterns.
When you apply templateLock: "contentOnly" to a container (Group/Cover/Column), the List View hides all the nested blocks. The user sees a clean UI where they can only click text to type or click images to replace them. They cannot see or touch the layout structure (padding, margins, flex alignment).
The Code
<!-- wp:group {"templateLock":"contentOnly","layout":{"type":"flex"}} -->
<div class="wp-block-group">
<!-- User sees this Image Input -->
<!-- wp:image -->
<figure class="wp-block-image"><img src="icon.png" alt=""/></figure>
<!-- /wp:image -->
<!-- User sees this Text Input -->
<!-- wp:heading -->
<h2>Feature Title</h2>
<!-- /wp:heading -->
<!-- User sees this Text Input -->
<!-- wp:paragraph -->
<p>Description goes here.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->Why use this? It transforms the Block Editor into a "Form-like" experience. The sidebar settings for the Group (background color, padding) disappear, and the user is focused purely on content entry. If they need to change the layout, they can click "Modify" in the toolbar to temporarily unlock the structure.