18. Creating Patterns

What is a pattern?

A pattern is a predefined arrangement of blocks that can be saved and reused across different pages and posts.

When would you use one?

For example, you may have a page layout that is commonly used in your website, such as a hero block followed by text, followed by a row of three cards. Rather than building that layout from scratch each time, you can create a pattern of that layout and add it to new pages for a pre-built, editable page.

Patterns can be big or small. Rather than a whole page, you can have a small piece of content, such as a standard call to action group that has a header, paragraph and button. This too can be a pattern.

Patterns are saved into the WordPress theme files so that you can use them over and over, inserting them into pages from the block inserter.

Standard patterns vs. synced patterns

WordPress has two types of patterns: standard and synced.

What is a standard pattern?

Standard (non-synced) patterns can be inserted and edited to create a unique instance of the pattern. When you put a standard pattern in a page and edit it, the original pattern does not change, and no other copies (instances) of that pattern that you have placed on any other page change.

Think of standard patterns as single, editable, disconnected templates for content.

What is a synced pattern?

A synced pattern is a pattern that you want to remain exactly the same every place that you use it. Synced pattern copies (instances) are connected. When you change one, you change them all, on every page where they are in use.

For example, you might like to have a form to enroll subscribers to your newsletter. The call to action has a title, introductory text, the form and a submit button. You would like to have this form at the bottom of your news page, your social media page and your homepage.

This is a good case for using a synced pattern, because no matter where you place the form, you want it to be exactly the same. And if you want to change it later, you can update it in one location and the changes will “sync” to the other locations through the synced pattern.

Think of synced patterns as one object, that can be displayed in many places.

Standard patterns

How to create a standard pattern

• In the List View, select all the blocks you want to be included in the pattern.

• Select Create pattern from the three dot menu

• Name the pattern according to its contents.

• Add to a category if appropriate.

• Ensure Synced is turned off.

• Click Add to save your pattern.

Synced patterns

Remember, synced patterns are single objects that can be placed in multiple locations.

When would you use one?

Synced patterns are useful for elements that should be updated globally, such as:

• A list of important dates displayed on multiple pages.
• A “Contact Us” block that appears in on various pages cross a site.
• A Call-to-Action (CTA) for an event, ensuring consistency across all pages.

How to create a synced pattern

Follow the same steps as creating a standard pattern, but enable the “Synced” option before saving.

Using synced patterns

Once you add a synced pattern to a page, any changes you make to it will be updated across any other copies of that synced pattern in use on the website.

How to edit a synced pattern

• To update a synced pattern, you have to select “Edit original” in the tool bar.

• Make your changes.

• Click Save. Remember, saving changes to the pattern will update everywhere this synced pattern is used.

• Look for the << symbol to go out of the Save screen, then < Back to go back to the page you were editing. Note: Here, only the pattern was updated, not the page.

• Continue editing the page.

How to detach a synced pattern?

If you would like to use a synced pattern but want to have a single, unconnected instance, you can add it to your page then detach it from the original.

• Add the synced pattern to your page.

• In list view, go to the three dot menu for that pattern.

• Choose “Detach”– this converts the pattern into standard blocks that won’t update globally.

More information

For more information refer the Patterns document.