So, you’re diving into Block Editor customization in Full Site Editing (FSE) themes, and terms like “block locking,” “block templates,” and “template locking” are popping up. Essentially, these features give you finely-tuned control over what content editors can and cannot change within your WordPress site.
Think of it like this:
- Block Locking is about securing individual blocks. You can stop someone from moving, deleting, or even editing a specific block’s content.
- Block Templates are pre-configured layouts for sections or even entire posts/pages. They guide content creators toward a desired structure.
- Template Locking takes that a step further, locking down a whole template so that specified blocks within it cannot be altered in certain ways, or even preventing blocks from being added or removed from the template entirely.
These tools are incredibly powerful for maintaining design consistency, ensuring branding guidelines are followed, and simplifying the content creation process for less technical users. Let’s break down how to put them to work in your FSE theme.
Before we delve into the “how,” it’s helpful to grasp why these features exist and when you’d reach for them. It’s not about being restrictive just for the sake of it; it’s about empowerment and efficiency.
Why Use Block Locking?
Imagine you have a critical disclaimer block that needs to appear exactly as written on every product page. Or a beautifully designed “call to action” that should always stay at the bottom of a specific post type.
- Preventing Accidental Deletion/Movement: Stop editors from unintentionally removing or relocating essential content.
- Maintaining Design Integrity: Ensure certain design elements remain untouched, preserving your site’s aesthetic.
- Protecting Legal or Essential Information: Guarantee that disclaimers, copyright notices, or legal text are always present and unedited.
- Simplifying the Editor Interface: Reduce cognitive load for content creators by making certain blocks uneditable, allowing them to focus on the content they can change.
Why Use Block Templates?
Consider a news site where every article needs a hero image, a headline, a byline, and then the main content. Or an e-commerce site where product pages follow a strict layout.
- Ensuring Consistent Structure: Provide a predefined layout for posts, pages, or even custom post types, ensuring all content adheres to a standard.
- Speeding Up Content Creation: Editors don’t have to build layouts from scratch; they simply fill in the blanks.
- Guiding Non-Technical Users: Offer a clear roadmap for where content should go, reducing the learning curve for new users.
- Applying Design System Principles: Reinforce your site’s design system by providing ready-made, consistent components.
Why Use Template Locking?
This is the big one for FSE themes, especially when you’re designing patterns or specific page layouts that should be largely immutable.
- Safeguarding Entire Layouts: When you design a specific page template or a reusable block pattern, template locking can prevent editors from messing up the core structure.
- Creating “Fill-in-the-Blanks” Content: Build a template where only specific content blocks are editable, turning the entire layout into a form to be filled out.
- Enforcing Strict Design Patterns: If a section of your site absolutely must look a particular way, template locking keeps it pristine.
- Simplifying Theme Development: As a theme developer, you can provide robust, resilient templates that resist unintended modifications.
For those looking to deepen their understanding of Full Site Editing (FSE) and the implementation of block locking, block templates, and template locking, a related article that provides valuable insights is available. You can explore more about these concepts and their practical applications by visiting this link: How to implement block locking, block templates, and template locking in FSE. This resource offers a comprehensive overview that can enhance your FSE development skills.
Implementing Block Locking: Keeping Blocks Secure
Block locking is generally applied to individual blocks. You can do this right inside the Block Editor or programmatically.
Locking Blocks Visually in the Editor
This method is great for one-off instances or when you’re tweaking a design in real-time.
- Select the Block: In the WordPress Block Editor, click on the block you want to lock.
- Access Block Options: In the block toolbar (usually appears above or next to the block), click the “Options” icon (three vertical dots).
- Choose “Lock”: Select the “Lock” option from the dropdown menu.
- Select Locking Settings: A small modal will appear. You’ll typically see options like:
- Disable movement: Prevents the block from being dragged or moved using the arrow controls.
- Prevent removal: Stops the block from being deleted.
- Prevent content editing: This is critical! It makes the actual content within the block uneditable.
- Apply: Select your desired locking options and click “Apply.”
You’ll notice a small lock icon on the block once it’s locked. To unlock it, simply repeat the process and uncheck the locking options.
Programmatic Block Locking (More Powerful for Themes)
For FSE themes, applying block locking programmatically is the way to go. This ensures that the locking is applied consistently across all instances where the block appears (e.g., in a pattern, a template, or a custom post type’s template definition).
You primarily use the lock attribute within the block’s HTML structure or its template definition.
“`html
This content is locked and cannot be moved, removed, or edited.
Locked Section Title
“`
You can define these lock attributes in various places:
- Block Patterns: When you define a block pattern in your FSE theme’s
patternsdirectory, apply locking to blocks within the pattern’s content. - Block Templates (for Post Types): In your
functions.phpor a dedicated plugin, set templates for custom post types using thetemplateargument inregister_post_type. - Theme Templates (HTML Files): Within
block.jsonfiles or directly in theme HTML files (e.g.,single.html,page.html), any block you include can have these attributes.
Granular Locking Options
The lock attribute accepts an object with up to three properties:
"move": true/false: Iftrue, the block cannot be moved."remove": true/false: Iftrue, the block cannot be removed."edit": true/false: Iftrue, the block’s content cannot be edited. This is particularly useful for static blocks (like a disclaimer).
Remember, you don’t need to specify all three. You can just prevent movement, for example: {"lock":{"move":true}}.
Building with Block Templates: Consistent Structures
Block templates define the initial structure and content for a post, page, or custom post type. In FSE, these are often defined within your theme’s block.json (for specific block types) or when registering post types.
Registering Block Templates for Post Types
This is a very common use case. When you register a custom post type (CPT), you can provide a default set of blocks that will automatically populate new instances of that CPT.
In your functions.php or a plugin file:
“`php
function my_theme_register_cpt_with_template() {
register_post_type( ‘product’,
array(
‘labels’ => array(
‘name’ => __( ‘Products’, ‘my-theme’ ),
‘singular_name’ => __( ‘Product’, ‘my-theme’ ),
),
‘public’ => true,
‘has_archive’ => true,
‘template’ => array( // Define your block template here
array( ‘core/group’, array(), array(
array( ‘core/image’, array( ‘sizeSlug’ => ‘large’, ‘align’ => ‘wide’ ) ),
array( ‘core/heading’, array( ‘level’ => 1, ‘placeholder’ => ‘Product Name’ ) ),
array( ‘core/paragraph’, array( ‘placeholder’ => ‘Write a short description…’ ) ),
array( ‘core/columns’, array(), array(
array( ‘core/column’, array(), array(
array( ‘core/heading’, array( ‘level’ => 3, ‘content’ => ‘Features’ ) ),
array( ‘core/list’, array( ‘placeholder’ => ‘Add feature 1, feature 2…’ ) ),
)),
array( ‘core/column’, array(), array(
array( ‘core/heading’, array( ‘level’ => 3, ‘content’ => ‘Price’ ) ),
array( ‘core/paragraph’, array( ‘content’ => ‘$XX.XX’ ) ),
)),
)),
array( ‘core/button’, array( ‘text’ => ‘Buy Now’, ‘url’ => ‘#’, ‘lock’ => array( ‘remove’ => true, ‘move’ => true ) ) ),
) ),
),
‘template_lock’ => ‘all’, // More on this in the next section!
‘show_in_rest’ => true, // Required for Gutenberg
‘supports’ => array( ‘title’, ‘editor’, ‘thumbnail’ ),
)
);
}
add_action( ‘init’, ‘my_theme_register_cpt_with_template’ );
“`
In this example, whenever you create a new “Product” post, it will automatically preload with a specific layout including an image placeholder, product name, description, features/price columns, and a “Buy Now” button that is locked against removal and movement.
Templates within block.json (for InnerBlocks)
If you’re creating a custom block that uses InnerBlocks, you can define a default template for those inner blocks. This is fantastic for container blocks, like a “Hero Section” or a “Testimonial Slider” where you want a specific internal structure.
In your custom block’s block.json:
“`json
{
“name”: “my-theme/hero-section”,
“title”: “Hero Section”,
“category”: “design”,
“supports”: {
“html”: false,
“inserter”: true,
“anchor”: true
},
“attributes”: {
“align”: {
“type”: “string”,
“default”: “full”
}
},
“editorScript”: “file:./index.js”,
“editorStyle”: “file:./index.css”,
“style”: “file:./style-index.css”,
“render”: “file:./render.php”,
“innerBlocks”: {
“template”: [
[ “core/image”, { “align”: “wide”, “sizeSlug”: “large” } ],
[ “core/group”, { “layout”: { “type”: “flex”, “flexWrap”: “nowrap”, “orientation”: “vertical”, “justifyContent”: “center” } }, [
[ “core/heading”, { “placeholder”: “Hero Title”, “textColor”: “primary”, “level”: 1 } ],
[ “core/paragraph”, { “placeholder”: “Hero Subtitle”, “textColor”: “tertiary” } ],
[ “core/button”, { “text”: “Learn More”, “url”: “#”, “lock”: { “remove”: true, “move”: true, “edit”: true } } ]
] ]
],
“templateLock”: “all” // Again, more on this below!
}
}
“`
Here, innerBlocks.template defines the default structure inside your my-theme/hero-section block. Notice the templateLock here, which will control how editable those inner blocks are.
Mastering Template Locking: Controlling the Big Picture
Template locking prevents users from adding, removing, or reordering blocks within a specific template or parent block. This is where you really enforce structural integrity.
Template Locking Options
Template locking primarily uses two values:
'all': This is the most restrictive. It prevents users from adding new blocks, removing existing blocks, or reordering blocks within the template. Essentially, the structure is frozen. Only content within existing blocks (if not also block-locked) can be edited.'insert': This is less restrictive. It prevents users from adding new blocks or removing existing blocks, but they can reorder the blocks within the template.
Implementing Template Locking
You’ll apply templateLock in a few key places:
1. For Custom Post Type Templates
When registering a Custom Post Type (CPT), you can pair template with template_lock.
“`php
function my_theme_register_cpt_with_locked_template() {
register_post_type( ‘testimonial’,
array(
‘labels’ => array(
‘name’ => __( ‘Testimonials’, ‘my-theme’ ),
‘singular_name’ => __( ‘Testimonial’, ‘my-theme’ ),
),
‘public’ => true,
‘template’ => array(
array( ‘core/group’, array( ‘align’ => ‘wide’ ), array(
array( ‘core/paragraph’, array( ‘placeholder’ => ‘Enter testimonial text…’, ‘lock’ => array( ‘move’ => true, ‘remove’ => true ) ) ),
array( ‘core/image’, array( ‘align’ => ‘left’, ‘sizeSlug’ => ‘thumbnail’, ‘lock’ => array( ‘move’ => true, ‘remove’ => true ) ) ),
array( ‘core/heading’, array( ‘level’ => 4, ‘placeholder’ => ‘Author Name’, ‘lock’ => array( ‘move’ => true, ‘remove’ => true ) ) ),
) ),
),
‘template_lock’ => ‘all’, // Apply ‘all’ template locking here
‘show_in_rest’ => true,
‘supports’ => array( ‘title’, ‘editor’ ),
)
);
}
add_action( ‘init’, ‘my_theme_register_cpt_with_locked_template’ );
“`
With template_lock set to 'all', for new “Testimonial” posts, editors cannot add more blocks, delete the existing paragraph, image, or heading, or move them around. They can only edit the content placeholders if those blocks themselves aren’t edit-locked.
2. Within InnerBlocks of a Custom Block
As seen in the block.json example for my-theme/hero-section, you can apply templateLock to a custom block’s innerBlocks definition.
“`json
{
“name”: “my-theme/hero-section”,
// … other properties
“innerBlocks”: {
“template”: [
// … your template structure
],
“templateLock”: “all” // Locks the inner structure of this custom block
}
}
“`
This means that once a my-theme/hero-section block is inserted into the editor, its internal structure (the image, group, heading, paragraph, and button in our example) cannot be altered (added, removed, or reordered) by the editor.
3. On Group or Columns Blocks (Direct HTML)
You can also apply templateLock directly to blocks that act as containers in your FSE HTML templates (like index.html, page.html, or within patterns). This is done via the templateLock attribute.
“`html
“`
In the first example, the entire group (containing columns, heading, paragraph, and image) is frozen. The editor cannot add new blocks inside this group, nor remove or reorder its children. In the second example, the editor can reorder the heading and the query block, but cannot add new blocks or remove them.
When to Choose Which Locking Type
It’s crucial to understand the hierarchy and interaction:
- Block Locking is for individual blocks. It’s about what you can do to that block (move, remove, edit content).
- Template Locking is for containers (post types,
InnerBlocks, Group blocks, etc.). It’s about what you can do with the children inside that container (add, remove, reorder).
They can be used together. For instance, you can have a templateLock: 'all' on a Group block to prevent adding/removing blocks, and then lock: {'edit': true} on a specific Paragraph block inside that group to prevent its content from being edited.
If you’re looking to enhance your understanding of block locking and templates in Full Site Editing (FSE), you might find it helpful to explore related topics that cover migration processes in web development. For instance, an insightful article on migrating from one server to another can provide valuable context on managing your site’s architecture effectively. You can read more about this in the article on migrating to another server, which discusses essential considerations that can complement your knowledge of implementing block locking and templates in FSE.
Practical Scenarios and Best Practices
Now that you know the mechanics, let’s look at how to apply these effectively.
Scenario 1: A Standardized “About Us” Page Template
You want every “About Us” page on your site to have a consistent structure: a hero section, a “Our History” section, and a team showcase.
Implementation:
- Create a
page-about-us.htmltheme file: Define the entire structure using core blocks and your custom blocks. - Apply
templateLockto major sections:
“`html
“`
- Use
lockon specific content: Notice how the team member’s email paragraph isedit-locked, ensuring it remains as an email and isn’t misused.
When an editor creates a new page and selects the “About Us” template, they’ll get this precise structure. They can edit text but cannot arbitrarily add sections or delete critical parts.
Scenario 2: Locked Disclaimer Block
You need a legal disclaimer at the bottom of blog posts that must never be altered or removed.
Implementation:
- Create a Block Pattern:
In your theme’s patterns directory, create a PHP file (e.g., disclaimer-pattern.php).
“`php
/**
- Title: Legal Disclaimer
- Slug: my-theme/legal-disclaimer
- Categories: text
- Block Types: core/post
- Viewport Width: 1200
*/
?>
This information is for general informational purposes only, and does not constitute legal, medical, or other professional advice. Please consult with a qualified professional for specific advice tailored to your needs.
“`
- Suggest Pattern in Post Type: You could programmatically insert this pattern into the
templatefor yourposttype, if you want it to appear by default. Alternatively, explain to editors that they must insert this pattern, and because it’s fully locked, they can’t mess it up.
Scenario 3: Custom “Call to Action” Block with Fixed Layout
You have a custom “Call to Action” block (my-theme/call-to-action) that always needs a heading, some text, and a button, and this structure should not be changed.
Implementation:
In your custom block’s block.json:
“`json
{
“name”: “my-theme/call-to-action”,
“title”: “Call to Action”,
“category”: “buttons”,
“supports”: { “html”: false },
“attributes”: {
“text”: { “type”: “string”, “default”: “Action Title” },
“description”: { “type”: “string”, “default”: “Convincing text goes here.” },
“buttonText”: { “type”: “string”, “default”: “Click Me” },
“buttonUrl”: { “type”: “string”, “default”: “#” }
},
“innerBlocks”: {
“template”: [
[ “core/heading”, { “placeholder”: “Action Title”, “level”: 2 } ],
[ “core/paragraph”, { “placeholder”: “Convincing text goes here.” } ],
[ “core/button”, { “text”: “Click Me”, “url”: “#” } ]
],
“templateLock”: “all” // Locks the inner blocks
},
“render”: “file:./render.php”
}
“`
And in my-theme/call-to-action/render.php (or your save function if it’s a dynamic block):
“`php
‘; // This is how InnerBlocks are rendered ?>
“`
Now, when an editor inserts my-theme/call-to-action, they will get a pre-defined heading, paragraph, and button. They can edit the content of these (unless you also apply individual block locks), but they cannot add more blocks inside, delete any of these three, or reorder them.
General Tips for Using Locking and Templates
- Start with less restriction, then add more: Don’t just lock everything from the get-go. See where editors struggle or where consistency breaks down, then apply locking strategically.
- Communicate with your users: Explain why certain blocks or templates are locked. This fosters understanding and reduces frustration.
- Test thoroughly: Always test your locked templates and blocks as an editor (
contributor,author, oreditorrole) to ensure they behave as expected. - Combine with
allowedBlocks: ForInnerBlocksortemplatedefinitions, you can also specify anallowedBlocksarray to restrict which block types can be added, even iftemplateLockis not'all'or'insert'. - Familiarize yourself with FSE structure: Understand how
block.json(for custom blocks), theme patterns, and FSE theme templates (.htmlfiles) interact. This knowledge is key to knowing where to place your locking attributes and template definitions.
By thoughtfully applying block locking, block templates, and template locking, you can create a more robust, consistent, and user-friendly editing experience within your Full Site Editing WordPress theme. It’s about finding the right balance between flexibility for content creators and maintaining the design and structural integrity of your site.