We have learned to use and group blocks to build our site.
But do you know there is a shortcut to create custom content layouts faster,
and that is using block patterns.
We are not all designers and it is time consuming to create layouts.
Block patterns provide a solution.
The learning objectives for this lesson are using and modifying available pre-made block patterns,
exploring the Block Pattern Directory, creating your own synced and non-synced patterns,
and lastly utilizing header and footer patterns.
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.
And in one click you will have access to beautiful and functional layouts from call to actions, headers, columns, galleries and more.
To add a pattern, click on the plus icon on the top left, also called the Inserter,
and open up the patterns tab on the right next to Blocks.
At the top you will see all patterns.
And below that all your synced and non-synced patterns you have created yourself.
Synced patterns are marked with a purple icon and non-synced patterns don't have one,
but more about synced and non-synced patterns in a moment.
Below My patterns you will see 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.
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 as well as other styling options.
But all the hard work and the layout has already been done for you.
The only thing you have to do is select the pattern and modify it to meet your requirements.
The patterns that come with your theme are limited.
If you want more patterns to choose from, you can explore the Block Pattern Directory.
To do that, let's make our way to the WordPress.org website.
Click on "Extend" and then select "Patterns".
Here you can search and find new patterns to use on your website.
You will notice there is an option to only view 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 click on the "Star" to add it to your favorites.
When you are ready to add the pattern to your site, open the pattern, click on "Copy Pattern", return to your website, and then paste.
And now you can start changing and modifying your pattern.
And this is what my pattern looks like after altering it to meet my design needs.
When you make your way to the Site Editor
and in the Side View you will see a Patterns tab.
And here you can manage, edit, and create all of your patterns, synced or not, along with your template parts.
When you click on "My Patterns", you will see all 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 custom patterns, we will see all the available categories as well as the patterns that are provided by your theme.
It is also worth noting, when you click on the three vertical dots of a pattern that comes with your theme, you can also duplicate and
add that pattern to your custom patterns area, and when you've saved it as a custom pattern you can modify it as you please.
And at the bottom, all your header, footer, and general template part 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.
After naming it, you can add it to the relevant category, in this case, "Call to Action" category, and then you can choose to sync it or not.
In this example, I will choose to sync the pattern, and at the bottom, it says, "Sync this pattern across multiple locations".
And now you can start creating your synced pattern, and when it is ready, we can click "Save".
To create a pattern in the block editor, merely select the design, then click on the three vertical dots of the block toolbar, and select "Create Pattern".
And then follow the same process as before, and I will once again select a synced pattern.
So, if you love a design, you can save it and reuse it as a synced or non-synced pattern.
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.
And when you open your page template, we can go ahead and select our current header, and then click on the three vertical dots.
And now we can select "Replace Header".
And when you do this, you can select one of your existing template parts or patterns that come with your theme.
And 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, name it appropriately, select "Header" and then click "Create".
And then you can start building your new header in template editing mode.
I trust that patterns will also become one of your favorite new tools.