Understand what Block Patterns are and build a page using a variety of patterns.

Learning outcomes

1. Describe what a Block Pattern is
2. Use the inserter and search for patterns
3. Build a page with a variety of patterns
4. 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 type of Block Patterns are available?

Transcript

Hi, and welcome to Learn WordPress, I am Wes Theron. Let’s have a closer look at using Block Patterns. Block Patterns might just become one of your favourite new tools within WordPress. You will have access to adding premade designs directly into your site. Block Patterns are basically layouts of grouped blocks ready for the picking. 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 testimonials, headers, galleries, and more.

The wonderful thing is you can use Block Patterns along with individual blocks when writing a post or page for your site. After this workshop, you will be able to describe what a block pattern is, use the Inserter and search for patterns, build a page with a variety of patterns, and modify block patterns for use on your site. Let’s talk about adding and customising Block Patterns for a moment. Block Patterns can be inserted wherever the Block Editor is used. By default, this means Block Patterns are available for posts and pages.

To add a Block Pattern, click on the plus icon, also called the Inserter and open the patterns tab on the right, next to blocks. If you are using the Inserter within your page, you will need to ‘browse all’ to gain access to pattern options. Let’s go ahead and choose a Block Pattern from the library. When you choose a block, you will be able to modify the block in the sidebar settings on the right and with your toolbar. When you click on the featured or explore tabs, you will be able to see all the available Block Patterns. They are organised into buttons, columns, gallery headers, text and query. Buttons are there to add predefined design buttons to a post or page. Columns: to add predefined columns to a post or page. Gallery: to add a gallery of images. Headers: for cover or header image styles. Text/; for pre-formatted text options, and the query pattern: to display posts in a pattern of your choosing.

Now, let’s see Block Patterns in action. I’m going to build a page using only patterns. I’ve created a page and called the heading ‘Environment Friendly.’ I will click on the top left Inserter and then choose to view the Block Patterns and all the available column patterns. I’m going to choose ‘Three columns with images and text.’ Firstly, I will remove the spacer block at the top as I feel there is too much open space. So click on the three dots of the toolbar. Go down and ‘remove spacer.’ Thereafter you can change the colour that suits your design needs. I will be going for black and white design today. So I’m going to use the sidebar settings on the right and change the background colour to white. When a Block Pattern is inserted, it includes some default text and images as this one. This is designed to be changed and customised. You can edit or replace text and images just like in any other block. I’m going to replace the last image with my own picture. So click on ‘Replace’, open your Media Library or uploaded directly from your computer, and choose the new image.

And now of course you can change all the images and text as you please. Remember to also add an ‘alt text’, a short description of the image for people who may be using a screen-reader and for accessibility. Secondly, I’m going to make my way to patterns. And this time, I’m going to choose a text pattern. I’m going to scroll down and select ‘Image and quote on a background.’ As you will see it looks much different than my black and white theme, but we will soon change that. I’ll go ahead and select both blocks and change the background colour to white again and then replace the pictures by selecting new images from my Media Library. And as you will see these pictures reflect my black and white theme as well. And now I would like to change the text of one of the quotes to something Richard Branson said. He said something really profound and that is: “There is no planet B.’

The third pattern I want to add to my page is a gallery pattern called ‘Offset images with description.’ When I add the pattern to my page, I see that it is too narrow for my liking. I will therefore change the alignment to ‘full Width.’ To ensure I select the entire pattern block, I’m going to go to ‘List View’ and scroll down to the one I’ve just added. And now you can use the toolbar to change the alignment and I will change it to ‘Full Width.’ And of course you can choose to replace the images to meet your requirements as well.

Lastly, I want to add two button patterns, one for products that I’m selling, and the other for social media. I’ll therefore go ahead and add a pricing table pattern and a social links pattern. Now it is time to edit, I’m going to highlight the three blocks and change the background colour to white. I may then decide to change the product info. So let’s look at the first block and say we are going to sell soap that is biodegradable. So I’ll change my heading, and my subheading. And then you can also add new product information. I also want to change my button by changing the price and the border. So let’s change the price to $5 per item. And then also tweak the appearance of the border in the sidebar settings to appear more rounded. Now please note you can also add any blocks to your patterns. So let’s add an image of the scope that we are displaying in the pricing table. I’ll click on the Inserter and select a new image block, upload an image from our Media Library and then click Select. So you can modify these blocks to display your products. And you can add more pricing tables if you have more products.

Let’s move on to our final pattern: social links. One of the first things to remember is to add the URL to your social link. And you can just use the inserter to link one of your other social media platforms. But don’t forget to add the URL. So let’s go ahead and make some more changes to our pattern. I’m going to use the ‘List View’ again, to ensure that I select the entire pattern. And then I’ll use the toolbar to change the alignment of the pattern to the right. You could have also done that under layout in your sidebar settings. You also have the choice to change the orientation to vertical view for example. The next thing that I want to do is change the background colour of my social links to black. I think that suits my theme nicely. Finally, I’m also going to use the toolbar to change the size of my social links. So let’s click on size, and in this case, I’m going to select large.

And now we can preview the page that was all built by using patterns. You should now be familiar with what Block Patterns are, how to use them, and how to customise them for your posts and pages. As you develop new content for your site. Check the Block Patterns list to see if there are new options available. Visit Learn WordPress for more workshops and training material, and have fun using and modifying patterns.