Using Block Patterns

Use a pattern to add a beautifully designed, ready-to-go layout to any WordPress site. In this Tutorial, we will explore how you can utilize patterns to save time and enhance design and creativity. We will also take a closer look at creating custom patterns, using built-in patterns from certain blocks, and managing template part patterns.

Learning outcomes

1. Describe what a Block Pattern is.
2. Use the Inserter and search for patterns.
3. Explore using the Patterns Directory.
4. Use patterns that are built into the Query Loop block.
5. Create custom patterns
6. Add header and footer template part patterns to a template.
7. Modify a block pattern for use on a site.

Comprehension questions

1. How will Block Patterns be able to assist you in your design process?
2. What is the difference between synced and unsyced patterns?

Transcript

Introduction

Hi, and welcome to Learn WordPress. In this session, we will learn all about patterns: Using and modifying available pre-made block patterns, creating your own synced and unsynced patterns, using patterns that are built into the settings of certain blocks, as well as utilizing header and footer patterns.

Definition

But what are patterns? Block patterns are pre-made designs or layouts of grouped blocks that are available to modify and change to meet your needs. It will essentially save you time but also enhance creativity and design. Instead of nesting and grouping blocks together, patterns have already done that for you. In one click, you will have access to beautiful and functional layouts from calls to actions, headers, columns, galleries, and more.

Adding a pattern

To add a pattern, click on the plus icon on the top left, also called the Inserter, and open the patterns tab on the right next to blocks. At the top, you will see the option to add unsynced patterns you have created yourself. To add a pattern that is synced, previously known as Reusable blocks, click on the synced pattern icon next to media. Changes made to these patterns will be made across your entire site, but more about this a little later. If we return to Patterns, below unsynced patterns, you will see all the patterns that come with your theme. They are organized into various categories to help you find what you need. Once you click on the category, you will see a preview of all the available patterns when you scroll down. You can also select “Explore all patterns at the bottom” to get a bird’s eye view of the patterns that come with your theme. You can also go through them, category by category.

Modifying a pattern

Let’s look at a quick example. When you select a pattern, in this case, one from my featured category, you will be able to modify the pattern to meet your design requirements. It can easily be edited in the same way as any other block. You can change the alignment of the container block. You can edit the heading, update the content, replace the images, and, for example, change the background color of your pattern and other styling options.

Blocks with built-in patterns

Some blocks, such as the Query Loop block, have patterns built into the block’s settings, so when you add your Query Loop block, it says you can choose a pattern for the Query Loop or start blank. If you click on Choose, you will be able to scroll through all the available patterns. When you find the pattern you’re looking for, you can merely click on it and it will insert into your page. Now, you can go ahead and modify it according to your needs.

Finding more patterns

The patterns that come with your theme are limited. If you want more patterns to choose from, you can explore the Pattern Directory. To do that, let’s make our way to the WordPress.org website. Hover over download and extend, and click on Patterns. You can search and find new patterns to use on your website. You will notice there is an option to view only curated patterns or hundreds of patterns that have been added by the WordPress community. You can type in the search block, search by category, or browse through all the available options until you find what you’re looking for. Once you find the pattern you are after, you can add it to your favorites by clicking on the heart. Once you identify a pattern you want to add to your site, you can merely click on Copy, return to your website, and then paste. Now, you can start changing and modifying your pattern. This is what my pattern looks like after altering it to meet my design needs.

Site Editor

When you make your way to the Site Editor, and in the Side View you will see a patterns tab. Here, you can manage, edit, and create all of your patterns, synced or not, along with your template parts. At the top, you will see your custom patterns. The synced patterns have a purple icon and the unsynced patterns don’t. If you hover over the purple icon, it clearly says, “Editing this pattern will also update anywhere it is used.” Below your custom patterns, you will see all the patterns that come with your theme. At the bottom, you will see all your header, footer, and general template part patterns.

Custom patterns

Let’s start with your own patterns. If you click on the plus icon next to patterns, you can create your own custom synced or unsynced patterns. If you want it to be unsynced, you can leave it as is. If you want your pattern to be synced, you can select “Keep all pattern instances in sync.” That means that Reusable blocks as a concept are now known as synced patterns. So let’s go ahead and create a synced pattern and click on “Create”. Now, you can start creating your synced pattern. When it is ready, we can click Save. You can create synced or unsynced patterns in the Site Editor or the post editor. To create one in the post editor, merely select your design, click on the three vertical dots, and then select Create Pattern/Reusable block. Now, you can save your design as a synced or unsynced pattern.

Template part patterns

Lastly, let’s talk about template parts. To manage your header and footer, you have template part patterns at your disposal. Templates create a design for a webpage and this is usually done by adding a header and footer template part. Let’s look at an example and open up our page template. When you open your page template, we can go ahead and select our current header and then click on the three vertical dots. Now, we can select Replace header. When you do this, you can select one of your existing template parts or patterns that come with your theme. It works exactly the same way with your footer. Below Patterns, you can manage and edit your existing template parts. To add a new template part, click on the plus icon next to patterns and select Create template part. Here, you will be able to select between creating a General, Footer or Header template part. To create a new header template part, select Header, name it appropriately, and then you can start creating in template editing mode.

Conclusion

We trust patterns will also become one of your favorite new tools, and visit Learn WordPress for more tutorials and training material.