Transcript
Introduction
We have learned to use and group blocks to build our site. But do you know there is a shortcut to creating custom content layouts faster, and that is using block patterns? We are not all designers, and creating layouts is time-consuming. 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.
What are block 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. In one click, you will have access to beautiful and functional layouts from calls to actions, headers, columns, galleries, and more.
Adding a theme pattern
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. Below are all the 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 can 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 have already been done for you. The only thing you have to do is select the pattern and modify it to meet your requirements.
Using the Pattern Directory
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 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 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. Then, you can start changing and modifying your pattern. This is what my pattern looks like after altering it to meet my design needs.
Managing patterns
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. 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 that 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. At the bottom, you will find 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. After naming it, you can add it to the relevant category, in this case, the “Call to Action” category, and then you can choose to sync it. 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, click on the three vertical dots of the block toolbar, and select “Create Pattern.” 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.
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. Next, 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. 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 the plus icon next to “Patterns” and select “Create Template Part.” Here, you can 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”.
Conclusion
Then, you can start building your new header in template editing mode. We trust patterns will also become one of your favorite new tools.