Title: Intro to Block Patterns Author: Courtney Robertson Published: 17 August 2020 Last modified: 1 November 2022 --- # Intro to Block Patterns Now that you’re familiar with the block editor, we’ll dive into block patterns next. In this workshop, we’ll learn about block patterns and how to use them on your site. This workshop is part of the [Intro to Publishing with the Block Editor](https://learn.wordpress.org/workshop/intro-to-publishing-with-the-block-editor/) series. ## Learning outcomes 1. Understand what block patterns are. 2. Learn how to access block patterns. 3. Learn how to add block patterns to posts and pages. 4. Understand how to customize block patterns for your content. ## Comprehension questions 1. What is a block pattern? 2. Where can you access block patterns? 3. Are block patterns meant to be customized? ## Transcript 0:00 Hi, and welcome back to the next lesson in our introduction to publishing with the Block Editor. My name is Erica. I’m a Community Wrangler sponsored by Automattic, and a blogger. If you’ve just stumbled across this video, I’d like to share that it’s part of a series of workshops and lessons about how to publish with the Block Editor. So if you’re new to using the Block Editor, I’d recommend starting with our intro workshop, which covers what the editor is, and more specifically what the Block Editor is, what blocks are, and how to use them to create a poster page. If you haven’t seen it, no worries, we’ll have a link in the description down below. If you’re already familiar with the Block Editor, or have already seen the previous video, today, we’re going to take a look at Block Patterns, what they are, and of course, how to use them. Let’s get started. Before we jump in, if you’ve seen our first video in this series, you might notice that something looks different. As mentioned in that video, the WordPress software is continuously evolving and being iterated upon. WordPress, like all software goes through different versions. In our last video, the most recent version of WordPress was version 5.4. In this new video, we’re looking we’re using WordPress 5.5, which, as you can see includes some changes to the user experience in the Block Editor. But don’t worry. While the visuals might look different, all of the concepts are the same blocks are still blocks, we can still combine them to create seamless holistic posts and pages. And we still use the inserter to add new blocks to our posts and pages. And if you’d like to learn more about the development cycle, how it works, and why we encourage folks to iterate quickly, I recommend checking out the introduction to contributing to WordPress talk, we’ll link that one down below too. 1:51 So what is a Block Patterns? Block Patterns are predefined block layouts ready to insert into your posts and pages that you can later tweak and customize for your own needs. So in other words, Block Patterns are predefined groups of blocks created by designers and developers that you can insert into your posts and pages. Once inserted, you’ll see a similar set of settings and options so that you can further customize and modify these layouts depending on your site’s needs and style. If we consider each block in the Block Editor like a brick, individually, adding blocks to your posts and pages one by one is like the work of a mason building a house Block Patterns ours if you’ve decided to add a prefabricated room to your home where some other equally skilled Mason has put together say a living room for you to tack on to your house ready made. When using patterns, you can use them in conjunction with individual blogs as you build your post or page. So how do you find patterns, we’re going to open up a new post screen. And here you’ll see that we have two options right now for opening up the inserter. And you’re already familiar with this inserter here as we’ve covered in the previous video. So we can click on this to add a block. And more patterns don’t show in this inserter itself, it does link to browse all which will open the inserter that the inserter that you need to use in order to be able to see Block Patterns. As an alternative, you can also click on this inserter button or the Add block button in the upper left corner of your site’s toolbar when you’re on an add new post or an add new page page, or if you’re editing a post or a page. 3:46 So we’ll click this inserter here. And as you can see, there are now three tabs at the top of the inserter. The one that we’re going to take a look at today is the patterns tab. And as you can see, this opens up a bunch of patterns for us. I do just want to show you really quick, what happens if you have to go to the patterns to the Block Patterns tab from this inserter as well. So if you click on Add block, as you can see, the patterns don’t show up here. But you can click on browse all and it brings you to the same spot. So it really just depends on what you prefer to do and how your workflow is either way, you’re still going to get to the same place. So from here you can see that the patterns are grouped into a couple different categories. Much like we saw last time with the way different blocks themselves are grouped into different categories. For example, we have a button pattern or button patterns, columns related patterns where you can add columns, predefined columns to your post or page. We have a gallery option, different headers text And that covers it. So we’re going to go through these one by one just so you can get a sense of what each one does and how it works. So unlike last time, we’re not going to make a whole post. But just explore a one example of each of these different types of blocks so that you can see how to insert them how to use them, and just a little idea of how to customize them too. So starting with the buttons block. Now, of course, with regular blocks, you can insert an individual button. In this case, this pattern is two buttons, and they’re designed where one has a background filled in, and the other one is the outline. So that’s the pattern that we’re starting from. And then once you insert it, you can further customize it. So I’m going to go ahead and insert that into my post, I’m going to remove this empty block. And just like last time, as you see when you click on the block, over on the right side of the screen, there’s a few different options that are added. Now if you want to edit the individual buttons, and this also is a good example of how patterns work. Each of these is basically its own individual button block, but they’ve been put together into a pattern, so that whenever you insert this one, both of them are displayed this way, side by side. So if I click on this first button here, you can see that brings up that same toolbar that we saw on our last video, that gives us some more options for customizing how this looks. Likewise, if you go over to the right side of the page, you can see it’s telling us that it is a button block, there are different options for how it can look. So if we wanted both of them to be outlines, for example, you can click on that to change the background. And I think in this case, actually, because this one is the outline, this one, we have to change a little bit more manually to do that. You can change the default style for buttons. Here. Probably most importantly, though, you can see that there are color settings. So in this case, if I like this setup with two buttons side by side, that’s exactly what I wanted. That’s why I picked this pattern, I have the option of adding a gradient, for example. So if I click on one of the gradients, you can see that it changes the background over here. If we go down, we’ll also see that we can change the border radius, if I wanted it to be more rounded on the edges, I can choose the link settings to open in a different tab. And some more advanced options as well. Now in this case, I’m just going to make this button look similar. So I’m going to leave the outline just like that. But I’m also going to change the border radius. I know that text color is a little bit different, I don’t know which color is off the top of my head, so I’m just going to change it slightly. So it looks a little bit more thought out and matching. And if I want to add a link, I can just click on the link button here, which is what you would do with a button and just insert a bear. And so now this is linked. So if someone visits my site, they’ll see this button and they’ll click on it. And I could do the same over here just for completeness. 8:33 Great, and that’s our first Block Patterns that we’ve seen. Now of course, you can always continue to customize it further. In this case, because we’re just going to look through some of the different examples. I’m going to go ahead open up the inserter. Click on patterns. And I’m going to insert columns. And just like before, as you can see, in this case, you have a pattern that includes a heading tab at the top and then a paragraph graph block included into different columns. Just like with any block as you click into the portion that you’d like to change, I can go here to change the title change any of the text either directly in the block, or over on the right side. So again, you can change the text color if I wanted to add. For example, if I have kind of a newsie site, I want to drop cap that can make it look pretty cool. I can add some additional and it went away I can add some additional options as well like changing this to be bold, italicized, and so on. So it’s really similar to what we talked about before with just editing blocks. Browse again. And I clicked the wrong one, well browse again and and to be honest, I’m only clicking on this inserter button right here, because it’s habit more so that I usually use this one as opposed to using the one on the left the left side of the toolbar, again, either one will get you to the same place. A gallery pattern will put two images side by side. And of course, we can edit this to add our own image from the Media Library. So I’m just going to use one of the ones that we uploaded before. Use that hello world. And I’ll do the same here just for consistency with this picture. 10:50 Now, as you can see, these are designed to be the same size, so it kind of it automatically matched the height on both of these, even though technically the picture on the right is taller. And as you can see on the right, it tells us what kind of block it is, how many columns are in it, whether or not to crop the images, and a few additional options. 11:12 Moving on. 11:18 I’ll show you one of the headers. Again, we can go in and edit this. Though in this case, I’ll leave it as is just for the example. This right here is the text overlay. So you can edit the text, add a link formatting and things like that. And same with the background. As you can see this is from a cover block. So you can change the image you can change other media settings over in the right sidebar. And also, there’s always the additional options in this toolbar here. 11:58 And finally, we’ll just go with one of the text patterns that we see here. And in this case, it is a quote, or it’s designed as an option for how you like to display quote. Once again, you can see that it is a series of different blocks that are grouped together and designed out for you already. So we have an image, a quote, and a separator. As always, clicking on the block will allow you to edit it and customize it whether it’s changing that text in here. And as I say that as a note, as you can see all of these Block Patterns do include text and images as you insert them. That’s meant as a placeholder. So the idea is that you will always go ahead and go in, click on this, replace it with your own image, replace it with your own quote, your person who said the quote, and anything else like that. So do keep that in mind. These are very much meant to be customized. Everything that you see here is just there as a placeholder so that you know what it will look like until you add your own spin on it and anything else that you’d like to include. And with that, even though this is a little bit of a nonsensical posts, I will publish it just so you can see all of our examples, and how it looks on the front end. So like I said, with these buttons, now you can click on them, we’ve added the links, you can see how the columns are displayed on the front end of the site. We have our gallery block here, a heading block here, and our quote down here. So as always, it’s holistic on the on the front end of your site, we really use the blocks and the Block Patterns, which are blocks that are grouped together meant to be customized. We use them to form the building blocks, literally, of your post or page and customize them for your needs so that when people visit your site, they see these beautiful, different designs and patterns that are available on your site as they read through. And there you have it, we’ve just covered how to use Block Patterns and your posts and pages. They’re a handy tool if you’re looking to add more design elements to your posts and pages that can really take your site’s appearance to another level. Over time, you may see new Block Patterns added to this tab as well. 14:20 Just remember, even if they look different, the concept is the same and they will function similar to similarly to what we’ve just gone over today. As always, though, I highly recommend playing around and experimenting with patterns to see what you like and to incorporate some cool new elements into your site’s content. 14:37 Have fun! [Practice on a private demo site](https://playground.wordpress.net/?networking=yes) | Length | 14 minutes | | Language | English | | Subtitles | Nederlands, English | ## Suggestions Found a typo, grammar error or outdated screenshot? [Contact us](https://learn.wordpress.org/report-content-feedback/). ## License [CC BY-SA 4.0 ](http://creativecommons.org/licenses/by-sa/4.0/)