Creating your own custom synced or non-synced patterns

You are now able to create custom patterns with the ability to decide whether you want each instance to stay in sync with all other instances or not. Introducing the ability to create your own patterns and set sync status means that Reusable blocks as a concept are now known as Synced Patterns. These options are available whether you’re using the Site Editor or not!

Learning outcomes

1. Differentiating between synced and non-synced patterns
2. Locating and creating synced and non-synced patterns.
3. Managing synced and non-synced patterns.
4. Adding a synced or non-synced pattern to a page or post.

Comprehension questions

1. What is the difference between synced and non-synced patterns?
2. Can you save patterns from the Pattern Directory as synced or non-synced patterns?

Transcript

Introduction

Hi, and welcome to Learn WordPress. In this session, we will differentiate between synced and non-synced patterns, locate and create our own custom synced and non-synced patterns, and discuss how you can add a synced or non-synced pattern to a page or post.

Differentiating between synced and non-synced patterns

When you have created a special design you want to keep and reuse, you can save it as a pattern and specify whether to sync it or not. A synced pattern was previously referred to as a Reusable block and changes to a synced pattern will apply to all parts of your site where the pattern has been added. Non-synced patterns are just regular patterns that can be edited independently. A non-synced pattern can be used and changed over and over without changing or affecting the original pattern.

Creating synced or non-synced pattern

Let’s say, for example, you created a design and want to save it as a pattern. Select the container block, click on the three vertical dots, and then select create pattern/reusable block. At the top, you will notice it says ‘Reusable blocks are now synced patterns’. A synced pattern will behave in exactly the same way as a Reusable block. After naming it appropriately, you will have the option to select between synced and non-synced. As mentioned, if we select synced, and start editing the pattern, it will update anywhere it is used. We can, of course, toggle this off to be non-synced, meaning it will be a regular pattern that can be edited independently.

I’m going to go ahead and select Synced, and then click Create. One thing you will notice is that the pattern appears more narrow on the back end but it will appear correctly on the front end. To view or insert your custom patterns, click on the Inserter top left and then go to Patterns next to blocks. Here you can view your custom non-sync patterns as well as all the patterns provided by your theme. If we click on My patterns we will be able to preview all our non-synced patterns and if you click on it, it will merely insert into your page or post.

Next we can click on the synced patterns icon next to Media to preview or insert our synced patterns. When you hover over the name, you’ll be able to see a preview on the right. When you click on Manage my patterns, you will be able to manage all your patterns from here. You will be able to edit, trash and even import and export your patterns as a JSON file.

Add, edit and manage your synced and non-synced patterns in the Site Editor

You can also add, edit and manage your custom synced and non-synced patterns in the Site Editor. Let’s make our way to Appearance and click on Editor. This will, of course, take us in to the Site Editor. If we go to Patterns, we can manage our custom patterns, the patterns provided by our theme, as well as header, footer and general template part patterns.

If we go to My patterns, we will see all our custom patterns that we have created. Synced patterns have a purple icon and if you hover over it, it says ‘Editing this pattern will also update anywhere it is used.’ Only the name for non-synced patterns will appear. To create a custom pattern, click on the plus icon next to patterns and then select Create pattern. After naming it, you also have the option to decide if you want it to be synced or non-synced. In this case, we are going to keep it non-synced and then select Create. Then you can create your pattern in editing mode without any distractions. When you are done, you can click on Save. When I return to my custom patterns area, we will notice that my new non-sync pattern has been added.

Adding a synced or non-synced pattern to a page in the Site Editor

To end off, let’s add our custom patterns to a page and we can actually do that in the Site Editor since WordPress 6.3 launched. So let’s make our way to Pages, select the relevant page, in this case, Block Patterns. Then I will open up my list view and ensure that I add my content to the Post Content block. To add a non-sync pattern, click on the Inserter top left. Go to Patterns. Click on My patterns and select the non-synced pattern of choice. To add a synced pattern, we can actually use the slash command. Type in forward slash, and in this case, I want to add my Contact Info synced pattern and then we can merely select. Now we can start editing.

Conclusion

All the best as you create your own custom patterns, and visit Learn WordPress for more tutorials and training material.