post-content-181295

Synced pattern overrides

The first implementation of the Block Bindings API was for connecting block attributes and custom fields. With WordPress 6.6, a second iteration unlocks an enhancement of synced patterns named Synced Pattern Overrides.

There are two types of block patterns:

• Synced block patterns
• Standard (not synced) block patterns

The difference between the two types is that all changes made to a synced pattern apply to every occurrence of a pattern on your entire website. In contrast, changes to a standard block pattern only affect a specific pattern instance.

Synced pattern overrides are somewhere in the middle between the two extremes. Thanks to the Block Bindings API, you can now build block patterns that keep the same structure everywhere on your website and change in sync with the customizations made to the pattern structure and style in the site editor. However, you can change the content of the pattern on an individual instance without affecting other instances of the same pattern on the site.

Let’s find out how Pattern overrides work.

First, you need a synced pattern. You can build it from scratch in the post editor or find existing synced patterns in the site editor’s Patterns section.

Step 1: Go to Patterns and duplicate one of the existing patterns, such as the Hero pattern of the Twenty Twenty-Four default theme. Add a name and set the copy as Synced pattern.

Step 2: Navigate to the My patterns section and find your new synced pattern. Open it in the site editor and select all the blocks you need to override individually.

Go to the block settings sidebar and scroll down to the Advanced section. Here, you’ll find a button, Enable Overrides.

When you click the button, you are prompted to add a name and set the type of pattern.

Step 3: Repeat the same process for each block you want to override. When done, create a new post or page and include your custom pattern.

Step 4: Change the content of the blocks to override and save the post. Finally, check the result on the front end.

And you are done. You can add any number of these patterns anywhere on your website, and each new instance shows the same original content but is ready for your customization.

Now, let’s check the code of these patterns. Navigate back to the Patterns section of the Site Editor. Select My Patterns and add your pattern. Then, open the Options menu and select Code Editor to view the code of the pattern.

In our example, the code should look something like the following:

<div class="wp-block-group">
<!-- wp:heading {
"textAlign":"center",
"level":1,
"metadata":{
"bindings":{
"__default":{
"source":"core/pattern-overrides"
}
},
"name":"Hero title"
},"fontSize":"x-large"} -->
<h1 class="wp-block-heading has-text-align-center has-x-large-font-size">A commitment to innovation and sustainability</h1>
<!-- /wp:heading -->
...
</div>

In the block delimiter, you will notice the metadata.bindings property. This makes the Heading block editable. The __default binding instructs WordPress to connect all supported attributes to a specific source, which is "core/pattern-overrides".

The same property applies to all blocks you need to make editable. See, for example, the Button block:

<div class="wp-block-buttons">
<!-- wp:button {
"metadata":{
"bindings":{
"__default":{
"source":"core/pattern-overrides"
}
},
"name":"Hero button"
}
} -->
<!-- /wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link wp-element-button">About us</a>
</div>
...
</div>

Now, let’s return to the post editor and switch to Code editor. The code should be similar to the following:

<!-- wp:block {
"ref":261,
"content":{
"Hero title":{
"content":"Managed WordPress Hosting"
},
"Hero body":{
"content":"Kinsta is an extension of your business. Fast, secure, feature-rich hosting that makes your work so much easier. Built for WordPress websites and agencies worldwide."
},
"Hero button":{
"text":"Learn more",
"url":"https://kinsta.com/wordpress-hosting/",
"linkTarget":"",
"rel":""
},
"Second button":{
"text":"View pricing",
"url":"https://kinsta.com/wordpress-hosting/pricing/",
"linkTarget":"_blank",
"rel":"noreferrer noopener"
},
"Hero image":{
"id":268,
"alt":"",
"url":"http://wordpress.kinsta.cloud/wp-content/uploads/2024/06/homepage-featured-image.jpg"
}
}
} /-->

Here, you won’t see any blocks but only a reference to the block pattern and a set of properties for each block that are set as editable.

Again, you can add any number of block patterns anywhere on your website, and these patterns will match the same structure and design you built in the Site Editor.

Then, you can change the content of the editable blocks individually, keeping the structure the same.

As pattern overrides are an implementation of the Block Bindings API, we can override only supported blocks: Heading, Paragraph, Image, and Buttons.

You can dive deeper into pattern overrides in this WordPress TV video and this blog post by Nick Diego.

Pattern overrides are subject to future improvements and additions. The discussion continues on GitHub here and here.