 Welcome, welcome, welcome to everybody. As you join, please, if you haven't already, please go ahead and install and activate the create block theme plugin on your local environment. You don't actually have to have it for today. You can just have any block theme, but create block theme will help us create one. And those of you who know me know that I like the plugin. It's one of my favorite plugins for block development. And then let us know where you are joining us from in the world. I'm from Cape Town in South Africa and I'm always interested to see where folks are coming in from. Okay, so while we do that, somebody pointed out to me the other day that I keep forgetting to do an introduction slide. I just kind of assume that folks don't care who I am, so I never do one. So if you've never seen me before, my name is Jonathan. I'm from Cape Town in South Africa, as I mentioned earlier. I am an ex-developer to encode instructor, which means I do these kinds of things. And I'm a sponsor contributor to Automatic to the training team. So I work with the training team and we create tutorials and lesson plans and online workshops like this all around how to build with and work with and develop with WordPress. So good morning from California. We've got folks from Belgium. Jean's back, hey, Jean, Pacific Northwest. Awesome. Cool. I'm just going to kind of get into it today because there's quite a bit of theory and talking that I'm going to do. So while folks coming in, please do feel free to keep letting us know where you're joining us from. Today we're going to be talking about not custom templates and template parts. That's funny. Today we're going to be talking about block patterns. This is live editing of slides in a workshop. And what block patterns are, they're one type of reusable elements that you can work with in a block theme or in WordPress block editor. They are quite useful because they enable PHP functionality within a block theme, which is quite cool if you want to do custom functionality outside of what's available in blocks. So today we're going to dive into how to create them. We're going to create a couple of live ones and I'll show you how it all works. Before we get started, first of all, welcome again to everybody and welcome to Catherine and thank you to Catherine for co-hosting with us today. Catherine is the face you should see at the top of the video there. Catherine is from Canada, if I'm correct. Yes, Montreal, Canada. Montreal, Canada. So one day we're going to conference Catherine to do a French speaking online workshop. As always, we are presenting in focus mode. So that means you all can see Catherine and I and we can see all of your videos but you can't see to others' videos. And the main reason for this is just to prevent any Zoom bombing. We have had some Zoom bombing situations in the past. It doesn't seem to happen so much anymore but we still continue presenting in focus mode. And as always, you are welcome to ask questions. If you want to ask a question, you're welcome to just post it in the chat or you're welcome to unmute and ask the question verbally if you prefer. All that I do ask is if you do have a question that is not specifically related to something I'm doing at that time, there are sections that I leave breaks for questions unrelated to what's going on. We'll use those for those. But if the question is around telling me to slow down or pausing on screen because there's something that you want to catch up on or type or code or whatever, then perfect to let me know immediately and just say, hey, slow down. I need to see what you're doing. As I mentioned earlier, if you want to code along with me today, we're going to be using the functionality of the create block theme plugin just to create a new block theme. That's the only reason we're going to use it. So if you'd like to do that along with me, please do go ahead and install it. If I'm going too fast, please do let me know. We will be posting the session to WordPress TV afterwards and for more WordPress focus content, please do visit learn.wordpress.org. That is the platform where the training team and all the contributors who work on the training team publish all of this content. So online workshops are linked through there. The tutorials are there. The courses are there. So please do go and check that out. Yeah, Catherine, Sergio's already... Sorry, Sergio. Catherine's already answered your question. It is an easy way to create a block theme. It also has some other functionality, which I love, but it's just a quick and easy way to get a block theme going, which I'll show you in a second. So for today, what are our learning outcomes? We're going to learn what are block patterns and we're going to compare patterns to template parts. So if you've joined the previous session and we showed you what template parts look like or you've read about template parts and you want to understand why you would use a pattern versus template part, we're going to dive into that briefly. We're then going to look at the block pattern directory and how that fits into things. And then we're going to dive into creating patterns. We're going to create a block pattern just using PHP code. Kind of just using PHP code. And then we're going to create a pattern by creating a PHP file in the patterns directory. And I'm going to show you pros and cons of both approaches. And then I'm going to show you how you can use patterns to enable PHP functionality. So what I mean by that is something that needs to be dynamic or something that needs to pull from a specific location and how patterns are used to enable that in block themes. The resources slide is just all the links which Catherine will be feeding through to you all as we go through, but they're in the slides if you want to have a look at them later. I did post a link to the slides in the meetup event but I need to post an updated version because the slides have changed slightly but I will do that after the session. And then our objective for today is we're going to create a very simple button pattern. It's going to be very simple and straightforward and we're going to use that to register the pattern in PHP code. Then we're going to create a custom footer pattern and we're going to do that while we create the pattern file. And I'm going to use those two examples to show the pros and cons. Then I'm going to show you how to register a pattern category which is very handy if you are working with a custom theme for a client and I'll show you why that's handy to use. And if there's time we might dive into how to disable the pattern categories towards the end. And then we're going to create a cover pattern and we're going to link that to an image that is part of the theme. So in other words, once you've packaged the theme you want the cover pattern to read that image file from the file structure, not from the media library. And I'm going to show you how to manage that. And that should cover the basics of how patterns get used and then if there are any questions we'll see if we need to dive into those. Okay, let's get going. If you have a WordPress install up and ready or you want to fire up your IDE now if you want to follow along now's the time to do it. I have as always a very basic WordPress install set up on my local environment. It has just the default themes that come with WordPress and the only plugins that I have active currently is the create block theme plugin. You'll actually notice I don't even have the Gutenberg plugin active because all of this functionality has been around since I think WordPress 5.8. So I don't even need Gutenberg for this to work. I also have the FakerPress plugin installed. It's not active currently, but I use that to generate some random posts for a previous workshop. I think it was last week for those of you who were there. It's not necessary for today. I just mentioned it before we continue. Okay, so if you haven't already, now's the last time I'm going to ask you if you want to follow along to install and activate create block theme. Once that plugin is installed and active you should see in your appearance menu just below the editor menu option, a create block theme menu option. It also adds something about fonts, which if you want to learn how about how to embed fonts and local fonts, we're going to be doing one of those soon. Probably the next week, I know one of the other contributors did one that I'm going to be doing one soon as well. But for today, we're just going to be working on creating a new block theme. So if I click on create block theme, it gives me a bunch of options. I can export, I can create a child theme, but for the purposes of the day I'm just going to go with create a blank theme. Now you can call your theme anything you want to. I'm going to be very boring and I'm going to call it John's blank theme. And you don't need to worry about descriptions and your eyes and all that. If you don't need to worry about it today, we can always add those in later if we need to, but that's the basic required data that I need. And I'm going to hit the generate button and it's then going to create a whole bunch of theme files for me. So if I go back into my themes, I will see that I now have my blank theme there it doesn't have a screenshot, but if I switch over to my code editor, which I don't yet have open, so let me open that quickly. I'm using a visual code studio for the session. There's John blank theme and it has a theme.json file with a whole bunch of styles and settings. It has the style.css with the theme header. So the theme will show up in the dashboard. It has an empty read me and then it has one template, the index template, which is the base required template or WordPress themes need. And it has two template parts, a header parts and a photo part. Now, if this is the first time you're seeing a block theme, I'm not going to dive too much into what all these things do, but the index template is basically a template that WordPress can use to render content. And because there's an index template, any content that I render on my site will use that template, which is fine. Index template itself, if we have a look at the code right at the top here, it includes the header template part and it includes right at the bottom, sorry, I scroll down too quickly, the photo template box. So this is very similar to a classic theme calling get header function at the top and the get footer function at the bottom and then it includes those templates in PHP as it would in the classic theme. The header template will show you in the site it's what it looks like, but it just contains a logo and a tagline and those kind of things. And the footer just contains the priority powered by WordPress banner, which we've all seen before on a WordPress theme. So that's the code that this great block theme plugin generates for us so we can start using it. If I switch back over to my browser and I activate that theme and I go into the editor, it loads the index file or the index templates in the editor for me and there I can see what it looks like. So there's my header section, my content section currently is just a query loop and then the footer right at the bottom here, got a whole bunch of posts I'm gonna scroll down very quickly, it's got the priority powered by WordPress. I can check that by clicking on the list view and I can see there's the header template part which contains the header content. There's the query loop which is just sitting in the index of HTML template and there's the footer. So that's a basic blank block theme. Right, now we've covered the basics. Now we can get onto the reason we're here today which is template patterns. But before we do that I just wanna make sure there are no questions before we carry on. So if you have a question about any of this we've covered so far, you're not sure I've now is a great time to ask it while I grab my sip of coffee before I go. Yeah, doesn't have a great question. So that's good. Okay, so today we're talking about block patterns. So block patterns are predefined layouts. Now there are three different types of predefined layouts in a WordPress block editor environment. I'm gonna copy the support article about comparing patterns, template parts and reusable blocks. We've already seen template parts. So when we looked at this theme we saw there was a header template parts and a footer template part. The other one is reusable blocks and the other one is patterns. Today we're focusing on patterns. But very quickly, if you haven't seen a reusable block before a reusable block basically allows you to save a block or group of blocks which you can use later in any post or page. One good example of a reusable block is the query loop block that we just saw here. The query loop block if you add it to a page comes with this post template block which comes with a group which comes with post title, post feature, blah, blah, blah. And I can prove that to you by removing this one and then just inserting after inserting a query loop block if I can spell today. There we go. And so that block contains let's just choose the layout. Yeah, that's fine. That block contains by default all these other blocks. So that's a good example of a reusable block. So I could just plunk it down anywhere and I can go down. There's a difference between that core block and an actual reusable block. So the query loop isn't an actual reusable block but it's an example of how it works. It's a reusable block, you save it and then everywhere you use it across your templates or across your post pages if you edit the original reusable block and you change structure or content it'll change it across your site. So it's the perfect example to use something for maybe a form that you wanna have across your site or a series of subscribe buttons that are gonna be the same everywhere you use that block. Save it to a reusable block and then you can put it down anywhere you want and then if you need to make a change you don't make a change where it's used across your site you make a change in the reusable block and it'll then propagate through the site. Patterns are different to reusable blocks in that the changes that you make to the pattern doesn't change across the site. It's not something that's stored somewhere and when you insert it, it then works across the site. A pattern is just a collection of blocks and when you insert a pattern into a poster page or a template it doesn't insert anything else but that group of blocks. So let me show you what I mean by that by we're gonna create a very simple pattern to start off with. So if you've got the index page open what I'd like you to do is remove the query loop. So if you're not sure how to remove the query loop there's a few ways you can do it. You can either just click on Hello World or whatever the first post is and if you click on the little icon there on the far left it'll kind of go up one and there's the query loop icon. It's a little almost infinity logo and you can click on that and that selects the whole query loop and then you can click on the three little options there and you can just say remove query loop that's one way you can do it. The other way you can do it is by enabling the list view, finding the query loop in the list this is my preferred way and removing it there but either way you should end up with just your header in your photo. Is anybody stuck there? Can I just get one person to say ready can continue and then we'll move on. Or is there nobody following along either way? Okay, so we've got a couple of readies that's great. Now what I'd like you to do is using, I prefer the list view but using whichever way you prefer, add in a block. And all I want you to do to start off with is add a group block. So you'll know from previous sessions that I've run the group blocks are a great way to group functionality hence the term group block. Once you add the group block there should be a little plus symbol and you can then click on that button to say you want to add something else to this group. And I want you to add the buttons block. So you should end up with something looking like this. You've got a button block inside of your buttons block and it's got a space where you can add some text. Then I want you to add some text. Doesn't matter what you do I'm going to say something like join me on social media. Okay, because that's generally why we have buttons because we want people to do things. Whatever text you want to put in that's fine. And then what I'd like you to do is I'd like you to click on the button and this little toolbar should pop up. And I want you to select the alignment option. Sorry, not the alignment option the not the first alignment option the second one next to the link and make sure that everything is aligned center. So your button block is center aligned inside the group. And then the last thing we're going to do is we're going to change the text color in the background color. So if you don't have the settings open if you click on the block and you click on the options you can say, let me just do it for you there. It'll say show more settings and then under the color option over here on the right. So you've got button styles with settings color make sure that block is selected change the text color to white and change the background color to any color you want. I'm going to go with this blue over here vivid cyan blue. So you end up with something like that. So if you are following along please in the chat somebody just give me a ready when you're good to go and then we'll turn this into a pattern. All right, awesome. Everybody's got a button at least. Hopefully some of you have done some interesting things instead of just going to join you on social media whenever I am building things like this my examples are always way less boring than that but I can't use that when I'm doing a workshop. Okay, so I want to now register this as a pattern and this is where I need to start writing some code. So if you've got these block patterns handbook document open which Catherine shared earlier on. So it's the second one that she shared in the group of lists if I can ask Catherine just to share that year on again. You'll see the second paragraph talks about there being two ways to register a pattern. You can either register patterns in the patterns folder which we're going to do in a minute or you can use the register block pattern function and that you can do in PHP. Now this is perfect for if you're registering a pattern in a plugin and you want to distribute that in a plugin. The downsides of registering patterns is that you have to register the pattern or at least you have to copy the pattern code the block code as a string and that makes it a bit wonky inside of a string but I want to show you how that works first and then when we want to doing it in files. So I'm going to scroll down here and we're going to jump past the patterns directory option and we're going to go right down to PHP registration. And just below that you'll see there's an example it's calling the register block pattern function and then there's a theme, slag, myosin pattern and all of that. I want you to copy that code out and have it in your clipboard. Now I mentioned earlier that this is perfect for doing in plugins but we're not going to do it in plugins today we're going to do it in our theme just so that everything is in the same space. So keep that document open switch over to your code editor whichever editor you're using or just go to a folder directory and right click and open with text editor and in your theme, so in the root of your theme I want you to create a functions.php file just like you would in a classic theme. So in Visual Code Studio I select the theme name I right click and I say new file and I go functions.php and there is my empty functions.php file and then the only other thing you need to do in there is you need to open up the php opening tag so it's a smaller than sign, a question mark and php. Okay, I'm going to take a break there and ask somebody just to give me a ready when they've got all of that up and running and then we'll move on. I just wanted to mention that I noticed my colleague Sarah joining earlier because she put a camera on, so hi Sarah and yes, I stole this waiting for people to say a ready thing from you. Okay, so you've got your functions.php file going now we're going to paste that code from the doc so this is my favorite way of writing code taking a sample from somewhere, sticking it in my file and then editing it as I need to do. There's a lot of jokes around, you know using Stack Overflow to write code I'm sure we've all seen the memes but this is how developers work we find code examples, we put them in files and then we change them as we need to. So I'm going to copy that out and I'm going to pop back over to my php file and I'm going to paste that code down over here. Okay, so let's walk through what this is doing. It's not cheating if it works, right? Absolutely. So register block pattern is the function that registers the pattern and then it requires some information. The first string that it requires is the name of the pattern and the name is in the format of the theme slug which is usually just the lowercase file name of the directory slash in the name of the pattern and so what that does is that allows the pattern to be registered specifically to the theme. It's not something that actually matters in the background it's just easier to manage. So let's say Catherine for example had Catherine's theme and I have my theme and Catherine registers a pattern called My Awesome Pattern and I register a pattern called My Awesome Pattern at least this way Catherine's slug and my slug will be different so it creates some uniqueness. So I'm going to update my slug and I'm going to just pop it through John blank theme exactly the same as the folder name. I keep pointing at my screen like everybody's here with me. It's exactly the same as my folder name and then for my pattern name I'm just going to call it social-button so it's all one word in a string. Okay, then there's an array of data and the only important pieces of information here are the title, the description and the content. I'm going to ask you all to ignore categories for now don't remove it we're gonna update it just now but don't worry about it for now because we're gonna deal with how categories work in a second but the title is literally just the title of the pattern as it appears in the editor. So I'm just gonna call this social-buttons. You'll notice that the code is using WordPress translation functions if you've never seen them before don't stress it's just a way of making your theme code translatable. You can if you want to, if you're not worried about translations you could just have a plain string in whatever language you're in. So I'm gonna leave it like that for now. Then there's a description. I'm gonna do the same thing here. I'm just gonna remove all of this. I'm gonna keep it very simple for the purposes of this workshop. I'll leave that up over there and I'm just gonna call it, copy that over and I'm gonna say a social button keeping it very simple today. Then for categories, all I want you to do is make the categories buttons for now because it's gonna add it to the buttons category and I'll show you how those categories work in a second but for now just add it to buttons and then I want you to delete everything in the content string. So you should end up with something like that. You'll have register your block pattern function, your theme slug slash your button name and then the array with the title, description, categories and content that should look like that. Each one should have quotes around it because they are strings and they should be a comma at the end because it's an array. I'm gonna take a pause there to let anybody who needs to catch up and then somebody give me a ready when you're good to go and I'm gonna scan and see if there are any questions I need to deal with. So Carl is ready, everybody seems good to go so that's great. Now, this is where my personal dislike for registering patterns in PHP file comes in because what I now have to do and you saw it earlier from the code is I now have to put the block markup code inside this is a string, okay? So to do that, I need to go into the editor. I need to switch to the code editor view which I have to do anyway. Copy the block markup code out and paste it in here and I'm gonna do that now and I'm gonna show you what it looks like and you'll see why it's not my favorite thing to do. So I'm gonna switch over to my site. For those of you, if there's anybody still catching up, I will slow down if you need to catch up. And I'm going to on the far right of the editor, there's a little options, three dots. It's next to the view, save, setting styles buttons. There's one that says options and I can enable the code editor or you can use this, the shift option command M keyboard combination if you're on a Mac. I don't know what it is on Windows to open it up and open up the code. And then the group that I'm taking is the second group over here. So I'm ignoring the header and the footer but I'm grabbing all of this code out over here and I copy that and then I'm going to close the editor and then I'm gonna switch back to my code editor view, my actual code editor, not the site editor code editor and I'm gonna hit paste. And that's what I end up with. Now, as somebody who works with coding styles and somebody who likes indenting their code, their CSS code, their HTML code, their PHP code and has done so for the last 15 odd years, I look at that at a little bit of me dies inside and this is the downside to registering a pattern this way because there is a way to put the pattern somewhere else in a plugin and include it but it's not really simple to do. We're not gonna do it today. Maybe in a future session, I can show you how that works but this simple way of doing things is a little bit untidy in my opinion. So what I generally do now is I sit because this is in a string, and I can't use those of you who know, code editors will have auto formatting options. So it'll detect what language you're writing in and then you can use a keyboard combination that will do the indentation for you but you can't do that inside of a string. So one thing you can do is you can copy this out into like a separate HTML file, indent it there and then put it back in here or you can do the kind of thing that I tend to do you can sit and indent it yourself. So I'm gonna just use the tab on my keyboard and I'm just gonna basically make this a little bit tidier. This is something that I am super dantic about on a personal level because I find it just makes it so much easier to read when I do this. It's a little bit difficult to see because of the size of my screen normally my screen is a little bit smaller but if I do that there and then I can pop the button, opening button there and the div there and I can put the closing div there and that's buttons there and then the closing div goes with that and I'm the kind of person that actually sits in dozens. I'm a little bit weird that way but that just gives me a little bit of a better layout structure can see what's going on that div belongs to that that can be indented a bit this one can come back a bit and there we go and that to me is just a little bit more readable. Now obviously the rest of the code is kind of going off-screen so it's kind of hard to see but I just find that personally a little bit more readable. If you're still busy doing that let me know if you need me to pause while you're catching up on all of that you're happy just to paste it as it was when you saw it earlier it'll still all work as long as you have your closing quote mark there and your closing brackets and I'm gonna check if there are any questions that I need to deal with. Tristan says you could do a file reader variable yes there are ways to do it you could use PHPs include as well there are other options Jeremy says do you sometimes register patterns as plain files within metadata in comments? That's yeah so that's what we're gonna talk about in a second and I'll show you I'll show you all how that works in a sec. Sarah says I managed to copy and paste the wrong thing but I think I brought up now that's excellent. If you just copy and pasted the example from the document that would also work. So if you feel like your code is not working feel free to just grab where is it now? This is where Zoom fails me because the video is over my toolbar so I can't see what I'm doing. You can just also grab this code as is and then just change the slide in the my awesome pattern part and leave the rest as is and that'll give you a similar example. You won't be using the pattern the block code from your editor which will be using some other block code. So I says copy paste is done and like it he's ready. Tristan says do you indent for input or output? I'm not even indenting for either I'm just indenting for my own sanity. That's the thing on the output side often the indentation all of this white space because it's in a string will actually go away and whenever I view the source in a browser there's tools that you can use to indent that anyway. So yeah, I'm just this is just literally a personal bag of mine. I'll share the story. A colleague of mine who's preparing a workshop on user roles and in one of their slides they had a PHP function to set up a new role and some new capabilities and instantly I could see that the indentation was out. So I just had to let them notice what's gonna fix your indentation. It's one of those little personal things. Okay, so I think everybody's caught up. We've had a couple of I'm ready and ready to go. So now let's see this in play. So if everything works and I switch back to my editor and I refresh it I should now be able to add that pattern. So the way you add patterns I'm just going to remove the query string again. I'm sorry, not the query string, the query loop. There we go. And I'm going to say videos in my way again. Go away video. I'm going to say insert after and then if I click on the add the toggle block insert a button I have options to add blocks or patterns. So if you've never seen patterns before this is what patterns look like. All of these patterns that are loading here are pulled from either WordPress core or the pattern directory which I'll show you where that is and how that works in a sec. But if you click on the dropdown and if you remember the category we added it to was buttons and you click on buttons you should now see in the list there you should see your social button. Is anybody not seeing their button in the list of buttons in the pattern list? Okay, Sarah says it works. Catherine says yay. Adrienne says no. Okay, let's see if anybody else is stuck. Okay, so folks aren't seeing it. Have you refreshed the editor so that it's reread all your theme code? Step one, there you have refreshed. Okay, so let's go back to the code. Those of you who aren't seeing your, I had not changed my theme to the right one. Okay, so if you hadn't activated the new theme that we're working in make sure that's active. If anybody else has done those steps and they're still not seeing it maybe you can paste your registered block pattern code in your functions.php and we can see if there's any problems with it. But yeah, make sure that the theme you created is active and that's the theme you're working in where you created the functions.php. I have a feeling I may have skipped that step so I apologize. We'll take a pause there. If anybody wants to share their code they're more than welcome to they can just paste it into the chat and we'll see. Okay, the refresh that work. Yes. So whenever you write in code in your theme you need to refresh your browser. Sarah said, I forgot to save my text editor. Yes, that's another one. I have my text editor set to automatically save any changes I make. Another little lazy hack. If you're using Visual Code Studio or PHP Storm you can set them to do that. So again, category buttons. Yes, the category was buttons. That's awesome. Okay. If you want to share code you can pop into Payspin might be easier. Okay, Sarah forgot to write PHP at the very top. Excellent. So that's another thing that might have been missed. So is there anybody else that's still not seeing their pattern? If you are, please let us know. Otherwise we will move on. I'm not seeing anybody mentioned that they are stuck so it seems that we've resolved all the problems. So just to recap. Yes, make sure your PHP file, your functions.php is inside of the active theme that you're working on. Make sure that you have the opening PHP tag that is required. Things like your categories, make sure it's buttons, not button. And then make sure you have refreshed your editor using the browser refresh tool or whatever the case may be. And then it should show up. Make sure there are no blank lines before PHP. That's another good one. Yes. It must always be the first thing in that file. So no spaces before it, no blank lines, anything like that. Okay. I don't see anybody saying they're stuck. So I'm going to assume that everybody's good to go. If you are still stuck, perfectly let us know in the chat. Otherwise we will move on. So what I wanna do now is I wanna show you what happens when I add this pattern. So over here where I'm going to add a block, if I just click on the socials button pattern, it just adds the pattern as to be expected. But you'll notice that when I switch to the list view, it's added the pattern as it existed in the code. So it hasn't added like a special pattern block like we do with template parts, has a special header template part block and then it contains the template part content. It just takes that code and just inserts it. So if I make a change to these blocks in this template, it doesn't affect anywhere else this pattern is used. If I make a change in the code, it doesn't affect this usage of the pattern and that's where it's different to reusable blocks. So patterns are more something that you would enable for folks to be able to insert something that they want in their site and then maybe customize to their needs. So for example, this is a good example, somebody might want to be insert the social media pattern and then change it to Twitter or Facebook or whatever they want for whatever they want to the page. So it's more just giving users kind of predefined designs, predefined elements that they can use wherever they want to their site. Okay. So that is registering a pattern in PHP. You can, yes, or making a posting template. You can do this in plugins, you can do this in themes. We did it in the functions of PHP today, which is fine but we could register them in the plugin. So earlier on I mentioned that when we click on insert, when we click on insert, sorry, let me just go back here and here and we enable the patterns list. All of these patterns are being loaded from somewhere. So there is something called the block pattern directory. And this is something that exists on the WordPress.org website. So it's similar to how you would install plugins and how you would install themes. And this is one of the things that I love about patterns because this is folks who are creating patterns, contributing free patterns that you can install, that your clients can install. So you can have, for example, this person has created a link in bio pattern that you can just insert into your site. There are different portfolio patterns. So it's almost like a great way of the sort of global repository of templates, if you will, or reusable content that you could just use to build or create or whatever the case may be. Now, the pattern directory can be disabled. You can disable it if you want to for a site. We're gonna dive into that in a second. But it's useful if you're learning to build block themes and you're looking for how to achieve certain things and you've never done it before. So I'm gonna just insert a pattern from the pattern directory. So let's go with, let's go with a column. So what's in the column? So let's find a column of things. There's a pricing table. So let's just install pricing table. And as you see, as we mentioned earlier, what this does is just takes the pattern content and just inserts it. Now I can use this and I can change the headings and I can change the pricing and I can change the colors in the background. And this for me is perfect because I'm not a designer. I'm not a person who can think about different colors and layouts and things like that. I'm a code guy. So this is great because now I can use these patterns that have been contributed, just like I would use plugins or I'd use themes and I can build, I can use this in templates. I can use it in posts or pages or wherever the case may be. Okay. So that's the pattern directory. So I'm gonna just check my notes quickly because I've forgotten what my next objective was. Oh, yes. So we wanna create and use a custom footer pattern. Cool, let's do that. Kimmy says, what on the screen right now is a pattern? Which one was that? This one. Oh, wait, hang on. I think you meant this one. The pricing, did you mean the pricing, Kimmy? Yes, yes, so that was a pattern. So let me show you what I did there. I'm gonna remove this. So I went and I said, right, I want to insert something after these buttons. I click on the insertter and then I just searched for in the columns category and I went and there was the pricing table pattern. So that's sitting in the block pattern directory somewhere. Some other awesome person has created it for me and I just literally click on it and boom, it comes in. So I didn't have to go design that. I didn't have to go think about it and I can now just change the content as I need to. Also, the button is twisted it. The button was, so the button was my social button that I created, my social pattern and I just changed it to be Twitter. I could make it Facebook, I could make it whatever I want. I just use it as an example. I hope that answers your question. Okey dokey. So I'm going to go back over here. So there was, I'm trying to, I'm actually not going to do the custom fit a pattern today and I'll tell you why, because it meant to be a header pattern. I forgot what I was doing. So I'm going to create a header pattern. So I apologize. So I'm going to talk you through why I might create a custom header pattern and why I'm doing it for the purposes of today. But let's say for my, let's remove the pricing table here and let's move the video up a way. So let's say for my site design, let's say I want to have in my theme, I'm busy developing a theme for a client or for distribution or whatever the case may be. And I want my header to look a lot different than what it does now. And one of the things that I might want to do is I want to add a image. So I'm going to add an image block. Actually, I'm sorry, not an image block, a cover block. Now, if you've never seen a cover block before, I'm going to show you what it looks like now. So let's just go and find, I've got a picture of water here somewhere. There we go. I'll step through this in a second with you. But a cover block is basically a cool block that has a background image and then a title across the front. So if you're following along with you, I'm going to remove all of this and we can start all over again. So let's remove the cover. So we've got the group that we added, the social button or the whatever button. And then I'm going to insert inside of the header. So I'm using the list view to open up the header template part. And I'm going to insert either before or after. It doesn't matter because we're going to remove everything else. And I'm going to add a cover block. Now there's multiple ways you can do it. You can either click on the plus button and search for cover block that way, or you can use the forward slash short cut and type in cover and it'll then bring up the cover block. Once you've done that, you can either upload an image or use an image from your media library. I think I've already uploaded it. So I'm going to just check, it should be in my media library. Yes, there it is. So let's use that one for example. So it's upload or select an image if you have one. If you don't have one, there are many places you can find them. You can go to pixels for example, or you can go to openverse, which is something that is a WordPress project for uploading of images. You can go grab one there. And then we're just going to give it a type and I'm just going to say my header. And because I can't really see it on my image, I'm going to take that and I'm going to change the text color to white. So there's my header and I'm going to move that above the site title in the site layer. So if you're still in the process of finding an image and those kinds of things, please take your time now and then if somebody can let me know once they've got their cover block, with some text above the header that exists in the header template part, then we will move on from there. Adrian's got it, that's great. I'll wait a few more moments for anybody else who wants to let me know. No problem, take your time Sarah. While we're doing that, for those of you who are there already, start thinking about how you would get this code. So you would open up the code editor view and you would find the header template part and you would copy that code. Maybe get that part ready, think about where you would put it. And then I'll go through the steps in a second. This is always where I was thinking about it, it would be nice to have like elevator music in the background. What's that girl of Ipanema song? That's the famous one. All right, so whatever, however you've done it, whatever image you've added, whatever text you've added, that doesn't matter today. Well, hopefully you've got the cover block there. Hopefully you've got an image. It looks like the cover image comes with the black capacity. That does seem to be the case. You can, I believe, change that. We're not going to worry about that today. All we're doing is adding, the important part today is really adding the image because that's required for the next step. So if you're still searching for an image, that's also fine. We'll take another break later if you need to catch up. It's all good. If I switch to my code editor view now, there's my template part and I can't see the cover block that I've added because I've added it to the template part. WordPress is clever enough to save but hang on. You're editing the header template part. You want that code to be in the header template part. So what I'm going to do now is I'm going to hit save. And it'll say, do you want to save the index? And do you want to save the header? Yes, I want to save both piece. So I'm going to save that. And then I'm going to go and I'm going to toggle my navigation. I'm going to go to my template parts. I'm going to find header and I'm going to open up the header template part. And if the code editor is still enabled, I'm going to exit it because I want to see there my cover templates. Now, what's interesting about this process is you could have done it in the template editor inside the header template part or you could have gone to the actual template part itself and added it there. It doesn't matter. WordPress is clever enough to figure that out. So there's multiple ways to achieve the same goal. Now what's cool about this is when I view the code view here I just see the code for the header template which is perfect. Okay. So what I want to do now is I just want to grab the cover block that we've added. So it's this code right at the top of the header template. So it starts with the WP cover comment and ends with WP cover comments. And then you'll see below that is the header group that was there before and all that kind of stuff. So we're just going to grab that kind. Now, if you remember from the documentation we looked at earlier there are two ways to register patterns. The one way is in PHP. The other way is just to create a file in a patterns folder in your theme. And that's what we're going to do now. And to me, this is a lot cleaner and a lot neater. It's only available to the theme. And so that's why I would argue that patterns should belong to a theme unless you're loading them up into the pattern directory or you're creating it for a specific plugin. But generally if you're thinking about building patterns and you're building a theme a good place for them to live is with the theme because they generally belong to the layout and the structure of the theme. And the cool thing about this is all we have to do is inside of the theme directory in code I go right click and I say a new folder and I say patterns and then I create my pattern file. Now the difference between block templates and block template parts is pattern files are also PHP files just like functions PHP was. So I create a new file and I give my pattern file a name and I'm just going to literally call it cover-block.php and then because it's a PHP file as we learned earlier we need to open it up with opening PHP tag. So it's that PHP and here is where we can do I can't remember who asked about it earlier but somebody was asking earlier about having some kind of header comment. This is where you can do that. So for now I want you to close that PHP tag. So just like I've done they open it like that as less than question mark PHP. And then on the very next line, question mark sorry less than greater than. So it closes the PHP tag and then you can paste your cover block markup directly below that. And what's cool about this is if I'm using a text editor that has built-in indentation I can't hang on, what have I just done here? I can actually implement that that's working enough for a second because I'm probably using the wrong keyboard combination I can't remember what it is but I can do the automatic indentation it looks so much needs are in time. Now, the other thing that you need for a pattern to work and let's go back to the documentation is if you look at this example it has and this is very similar to what we've seen in plugins what we've seen in themes in the style that CSS file there is a pattern header that you need to implement. So in the documentation where it talks about using the patterns directory to register patterns there is an example I want you to grab that code header comment area and put that at the top of your pattern inside of those PHP tags. And once your pattern file looks something like this you've got your header PHP open header comments close tag and then your block code somebody hit me up with a ready to go and then we'll move on from there while I figure out what the shortcut is to indent this code this is what happens when you use a tool that you don't use every day give me the header code is from the documentation on block patterns in the theme developer handbook I will copy that link up now for you and it's under the section using the patterns that are actually to register patterns and this is why I started assigning an hour and a half to these sessions because they start requiring a little bit more time. Okay, Adrian is ready, that's great, Carl is ready, that's great. Leave it on for a little bit longer before we carry on. Sarah says ready in theory we'll see what the theory and the practices in a second. Okay, I think I'm gonna stick with three radies before I move on so we've got three so that's good. So just as we did earlier when we registered it in PHP we had to set the title, the description the categories and the content. The contents taken care of done we don't have to worry about that content string because it's just the block markup content in the file. The title, the categories we need to set. The slug we also need to set. Now you'll see the slight difference here is that the slug is set as the first variable it's not set in the array under slug when we register it in PHP but in the header part in a file we have to register the slug that way. So that's the slight difference in the two but otherwise the rest is pretty much the same. So as we did before let's give it a title. So in this case I'll just say, have a block. We'll do the same theme slug. So in my case John blank theme and we'll give it the same name as the file. So in my case you'll see over here it's cover hyphen block. So I'm gonna just say cover hyphen block. Now in terms of categories we can't say buttons this time cause it's not a button but if we pop over to the editor and we have a look at what patterns are what categories are available. There's featured buttons, columns, gallery headers which is probably a good one, text or query. Okay now I did check before I I saw that question Sergio and I will get to it. I did check before the session. Unfortunately the categories are not listed anywhere but there is a way you can find out is if you open up WordPress code I'm gonna show this to you now I'm not gonna suggest you do this yourselves and I think it's in the we'll do it later but there is a way you can check I'll show you how to check later what the different categories are but for the purpose that I just want you to add it to the header category. Now this is an area where I almost want to sometimes open source is great and sometimes open source isn't great. So a little tip here. The buttons category, the category name that's stored in the database is buttons. So you would think that the headers category would be stored as headers and you should say headers, wouldn't you? And that's wrong, it's header but it's covered this the hard way. So make your categories header, not headers block types you don't need. So we're gonna remove that. That's just descriptive and viewport width you also don't need so we're gonna remove that but the three that you do need is the title, the slug and the category or categories that it belongs to. If you want to do it in multiple categories you just comma separate them so you could say header comma buttons for example we're not gonna add it to buttons for now we leave it as header and that is basically the patterns directory the file way of registering a pattern. Now what I prefer, what I like about this is I find this imminently more readable as to what the title is and what the slug is and what the categories are and I find this imminently more readable if I can just indent it which I can't now to automatically indent it and move forward. So make sure you save this file it should be in the patterns directory it should be a PHP file. The cool thing is WordPress will just read the patterns directory and pick up any patterns that are there and if they contain valid markup they should work. So if you switch back to the editor now and you refresh your browser so the editor refreshes and let's go back into the index template and actually what would be a good thing to do now would be to remove the one that we've saved and there's an easy way to do that so go back into your template parts open up your header templates and if you click on the little drop down button next to the header in the top there you can say clear all customization so that will remove this code that was stored in the database so your header should go back to normal so your header should end up looking something like this. I'm gonna pause there and make sure everybody has caught up to this and if somebody can just give me a couple of redis. And Adrian's ready and I get two more, Sergio is ready, excellent and Sarah is with me so far. I like the positivity Sarah. Okay, so now if I switch the list view on and I'm going to insert it before my group so I'm gonna say insert before and I'm gonna click on the insert block and I'm gonna enable patterns and if I go to the drop down and go to reset it with headers I should see my pattern here somewhere and there's cover block. Now it looks like I copied the coding correctly so I'm seeing my buttons but some of you should be seeing your cover button. Catherine says it looks like the button code may have been saved into the new button so the cover, yes it looks like it but some of you instead of looks like I made a mess up and I saved the button code so yes, that's exactly what happened but some of you should be seeing your cover blocks now so let me know if you got your cover or Carl has his cover I'm gonna just carry on and put my failed cover block in there just for the sake of fun but some of you should see it and see mine awesome it also wants me to attempt block recovery so attempt block recovery means there's a bug in your code somewhere so you might need to have a look at what's gone wrong if you want we can troubleshoot it later but if you see attempt block recovery in your pattern in the pattern list there's a bug somewhere in that code it seems it does not need to be added to the header even if it's a header type yes, it doesn't matter the pattern can be added to you so while folks are getting their patterns going I'm very quickly going to remove this and recreate my cover block because I need it for my next part of this so give me one second so remove I'm going to insert a cover I'm gonna just redo the whole thing and what's kind of cool about this is you can actually see me now doing it from the header part so it doesn't matter where I am let's just change the text and what's also cool about this is I can now at this point and I've saved nothing I can switch to the code editor grab the cover code switch back to my file paste the block markup save the file don't save anything here refresh this so that it's all back to the way it was and now I should be able to see why did it save it okay, let's go to remove there we go and then let's add the pattern so we say insert before and we add a pattern oh, I'm searching for pattern inside blocks silly boy and let's go down to headers and there's my cover block so now I'm adding my cover block excellent, so that's what works okay, great so everybody seems to be caught up which is excellent now Sergio asked earlier can we register our own categories and the answer is yes and I would definitely recommend doing that so if we switch back to that article we were looking at earlier there is a section on categories and how to register them and if you have a look at this sort of table of contents down the right hand side here there is a section on registering a custom pattern category so if you click on that it'll take you to this part in the code registering a custom pattern category and what's cool about that is you can now register a category specific to your theme so that's what I'm going to do I'm going to register John's block category for my patterns and then I'm going to apply my patterns to my category so it makes it much easier for my user to insert those patterns for me so if we grab this code out over here and we switch back to code and we put it in our functions let's switch over to our functions.php file where we registered the buttons earlier and then it doesn't matter where you do it I'm going to just do it at the top of my file you can do it at the bottom as well if you want I'm going to just pop that code in and let's work through what it's doing so first of all it's checking does the function exist and if it does exist then use it to register a category and that's handy for if you're putting in a plug in somewhere and you're hooked into something in the wrong place it's a good way to do that so it's calling the register pattern category function I need to pass it a slug so that's what it stores in the database I call this johns or john blank theme patterns you can call it whatever you want as long as it's one word so if you want to have separation use a hyphen ideally or lowercase this can be done in plugins as well correct you can do this in plugins as well and then for the label I'm just going to call it take out all the translation stuff I'm just going to call it john blank theme patterns so that's the English whatever your language is version or you can make a translatable that's up to you pro tip try and make your strings translatable as much as you can I'm keeping it super simple for today now I want to make sure that all of my patterns that I've registered belong to that category so I'm going to take that category out the slug and wherever I've registered my patterns so this one I'm going to change this category to the new category that I've registered and I'm going to go back to my cover block pattern file and I'm going to change the category here as well okay so first of all you register your pattern sorry you register your pattern category give it a slug and a label and then change your current patterns so the one that you did in PHP it was buttons changing to your new pattern and then go to your cover block and change the categories there from header to your new pattern and then if I can get a couple of readies we will see how this works Don maybe you can confirm what I the question I just answered so Sergio was asking if this part the new function you just added if this could be done in a plugin as well yes yes absolutely so everything that I've done so here's a little interesting piece of knowledge but everything you do in a functions.php file is effectively working the same as a plugin so anything that you can do in functions.php you can separate into a plugin so I could take all of this code let's say I wanted to bundle my social plugin so I'm building a plugin a social buttons plugin that I want to sell and I want to have blocks and patterns and various things I could do all of this in a plugin package it up and off I go absolutely the other thing you'll notice as well while folks are letting me know that they're ready you'll notice that those of you who understand what it works I'm not having to worry about hooking into any action or action hooks or filter hooks because the functions themselves the block pattern category function and the block pattern function will register the things in the right place so I don't need to hook into the net or anything else by calling those functions it will hook into the right place and I don't have to worry about anything else okay so I've got a couple of readies let's see how all this works so I'm going to switch back to switch back to my editor I'm going to refresh the site editor again and I'm going to go somewhere doesn't matter where I'm just going to switch over to my templates because I find templates slightly easier to edit and I'm going to just clear any customizations so that's all good and you'll notice that actually let's go to the template template pod header as well and just clear customizations there and if we go now into the index template for example and enable the list view if I now go and insert something and I go to the patterns and I click on the drop down there's my category so now all of my custom patterns are available in that one category Sarah is getting excited because it works that's great so now I can just tell my user my customer my whatever if you want my custom patterns that I've developed especially for you that you click on that option there they are you insert them and off you go okay is there anybody who's not seeing their custom category with their custom patterns added to their custom category please let me know otherwise we will move on that's excellent Sergio Sergio is along he says I assume categories can be hidden yes we're going to cover that towards the end because I want to make sure we do the next thing first and if we run out of time I'll just talk you through the code but we won't actually do it because it's actually fairly simple ish or fairly straightforward should I say but what we're going to do first is a little bit more complicated so yes we'll get to hiding categories in a second awesome so Sarah is up and running Sergio is good Adrian is good everybody's happy awesome great I like that that makes me happy for those of you who don't know when I first started doing these I used to stress about not being able to have that interactivity with folks and knowing that folks are along for the ride so it's nice to hear that everything's working perfectly okay so why did I create this cover block with this image well let's think about this currently the image that I've added to this block is sitting where it's sitting in the media library okay so let's have a look at the code and see what that means let's switch back over to the cover block file and let's just I'm going to please forgive me but I'm going to just zoom out for a second so that we can all see I can't zoom now oh wait it's minus yeah so I apologize to the text it's a bit small but I need to be able to do this so we can see what's going on here I'm just going to move the image over and I'm going to move the div over just so it's a little bit tidier so you'll see that the cover block code contains a URL and the URL is currently pointing to my site and this is a typical WordPress functionality this is how WordPress links to funds the full path that's not ideal because if I wanted to bundle this as a theme and allow my user or my clients or whoever to install it on their sites learnpress.test needs to be accessible to their sites otherwise they don't have the image installed what would be better is if there was a way that I could reference a file inside of my theme and so that wherever this cover block is being used that image gets inserted by default and then if the user decides to change an image to one that they want to use from their media library that's fine but when it first gets loaded I need to make sure it's available and visible thanks for coming call that's the way to do that and that's where the fact that cover blocks are PHP files and or PHP code comes in handy because now I can use WordPress call functionality to call the URL to my theme and just add or append or concatenate the image path to it so I'm going to slowly walk you through this process if you want to follow along with me that's cool or we can do it later and while I can wait but here's what I'm going to do first step is I need to put the image in the theme there is no requirement for where you put it but common best practice is to create a folder in your theme called assets and this is not really a WordPress but this is generally what web developers do they create an assets directory and then any assets like CSS or JavaScript or images or audio files or whatever generally sit in that directory and then what I like to do and what a lot of other folks like to do is inside of assets I like to create an images so you've got assets slash images and then all images that you need for your theme go in there the next step is to copy the actual image over so we're going to do that next so I keep my images in a folder called pictures samples if I can find samples there's some breakfast stuff I wonder what's in there so I just have sample images sitting in my samples directory and I'm going to grab I'm going to grab a different water one now so you can see it working you can use the same image if you want or any other image and then you're going to go into the site that you're working on so in this case mine is learnpress you're going to go inside of your theme directory and there's the blank theme we're working with there's the assets there's the images and I'm going to pop it in okay so we've got the image installed in the theme directory when we export it or copy it or zip it or whatever it's going to be there now we need to reference that image and the documentation is quite useful in that it actually gives you some code on how that works so you'll see right down the bottom here sorry did somebody have a question? okay cool one of these actually shows you there we go linking assets so if you scroll a little bit higher up there's an option on linking assets for example images using get theme file uri so you can see whoever wrote this documentation knew that we want to do this okay I'm going to pause for a second because Tristan has a question so go ahead Tristan just quickly when you're saying this of using the WordPress other functions is that where you could add custom fields or other fields or other bits of information is that what you're saying? effectively yes you could do anything so you could let's say for example you're using ACF advanced custom fields and you're using the ACF get field to call a field from somewhere and I'm going to show you now with the example of the image but any PHP code that you're used to you could do inside of the pattern or just the really simple thing like put the latest date for your copyright at the bottom of your page or something like that perfect example yes absolutely no problem and I'm glad you mentioned that because that was actually my original idea when I was going to do the footer pattern I was going to do the copyright date in there with the date function call because I'm sure all of us have experienced that so I'm going to update my copyright and you can't have used that date function in block patterns block themes but you can with patterns but I realized that doing that and the image would just make the workshop way too long but that's exactly why I was going to do the footer originally so I'm glad you mentioned it okay so the code the linking images assets code it uses the get theme file URI call so if we have a look here there it is over here so it's get theme file URI and you'll notice it passes in the path to the assets images image file so WordPress does something that I do it uses assets images so we can exactly just grab that so what I'd like you to do if you're here is I'm going to do it this way I'm going to grab the entire section of code and we'll just take out what we need so I'm going to copy that entire block there I'm going to switch back over to my my pattern file and I'm going to pop this I'm going to put some space in there just pop it in the bottom here I'm going to grab you see here where the image tag is there and then there's the SRC or the source attributes and then the PHP tag starts there so starting from there all the way through to where it ends over there is what I want you to copy and once you've copied that then we can replace so if we find the image block in our in our code and we go past all of this stuff over here and we find the same SRC attribute and there's the double quotes and there's the start of HTTPS learn personal with that we're going to replace all of that just remembering what the image file is called in my case it's water-pattern.jpg so we'll pop that down there I'm just going to format a little bit better and that's good and I'm going to while you're formatting I have a question for you I noticed that the image class of 66 got popped in there we're getting there we're getting there I'm glad you asked because this caught me the other day okay so we're going to paste that in over there so it's get theme file your eyes so it's assets, images and in my case it was I kind of remember now water image I think it was water-image and it was a jpeg and we can check that by going back over here water-2 that's the actual water image was the one from the media library but I want water 2 from my assets images so that's the first change you're going to make now Catherine asked what about this image class over here okay so if you've never seen this before the image class is what's added to a block image based on the ID of the image in the database in this in this case it's ID 66 this is replicated at the top here in the cover block ID 66 you have to have to have to have to remove the image blocks because if you don't it's going to cause a bug in your code and you're going to see what Sarah saw earlier of the attempt block recovery and I do a live stream every Tuesday where I prepare for these workshops and on Tuesday if you want to go watch that live stream and laugh at me I got stuck for about 10-15 minutes because I couldn't figure out why my pattern wasn't working I forgot to remove that class so the next thing to remove is remove the class that has the ID attached to it which is that one over there and then the last thing you're going to update is the URL and the ID up here you don't need these so you're going to remove that and that so you're just going to keep the settings the dim ratio which is that opacity which folks were talking about earlier and there is dark setting okay Catherine was having some fun and games with my name with my file name and yes Sarah you're welcome to go and watch me troubleshoot this it was literally me staring at the screen for 5 minutes going why is that not working okay and that's all you have to change now what's cool about this is you can make the link to anything in your theme so you could have multiple patterns you could call any PHP functionality you're used to as Tristan mentioned earlier you can call meta fields from elsewhere you can call fields from the rest of your cycle whatever the case may be and it will work so let's take out this code that we added here so it's back to being cover block we've added the URL which looks good we've removed the class and we've removed the URL and things up here let's see what this does I'm going to pause there for a second and just make sure that anybody who needs to catch up can catch up if you are coding along with me and if you are coding along give me a couple of readies and then we'll test and see if this works I think I think there is one one little discrepancy there's got JPG in your code but then the file is JPEG good spot can you come and sit and watch me code as well please be happy to I'll tell you what I learned that I would say the hardware but I learned how having somebody watching what you're doing can actually help you find bugs at a previous position I used to do live streams I worked on a plugin called series of simple podcasting and so because it was open source the CEO said sure you can live stream whenever you're working on the plugin when you're fixing bugs or whatever and a couple of times when I was stuck on something and I couldn't see what the obvious thing was somebody else who was on the live stream said hey have you tried this or what about that so yeah I love these these kind of things cool okay so Adrian is ready Sergio is ready Tristan says this is great some code I made in the plugin because I need PHP exactly you can do as a pattern absolutely cool so let's see if this does what we expected to do so we'll switch back over here and I'm going to refresh all of this and now I should see a different image in that pattern it should be loading the image from from the theme so let's insert a block doesn't matter where we insert it and it was my blank theme patterns and look at that recovery era era era something's gone wrong okay so I've done something wrong I'm trying to think what that is image doesn't work so high from two. That looks right. That is the water image. I wonder if it was just out of thought. I think it might be the URL. I'm not sure about that. I know the ID doesn't need to be there, but maybe the URL does. So let's update that. And if it is that, then we'll update our code. So I think I need to do this. I was hoping I wouldn't have to do live debugging today, but apparently I do. So let's pop that in there. And then let's remove this again. And now let's see what happens. Refresh, let's add the pattern. And interesting, now I'm getting the block, but I'm not getting the image. Jeremy had the idea to put a slash before. Oh, there, it's the JPEG again. I copied over the JPEG. Okay, so let's save that. So here we go, live debugging folks, specifically prepared so this wouldn't happen and then it happened anyway, but that's fine. So there we go. So there are patterns working. So I was slightly wrong. You do need to add the URL element in the cover block. So it does need the URL for some reason. I thought it didn't. I can't remember why, but you need to update those two places. So in the SRC attributes of the image class and the URL attributes of the block code. And make sure that your URL is in quotes. There's a colon and then open, close quotes. And then you can just literally use exactly the same code. You can reuse there. If you want to be clever, I was like, clever, bad choice of words. But if you want to be a little bit sort of, a lot of developers talk about do not repeat yourself. What you could also do is you could do something like this, you could create an image variable. And you could say the image variable is equal to this. So escape the URL, get the theme file, get the path. And then you could, this is just off the flight and plan this. Then you could just pop the image variable in there and the image variable in there. And what's nice about that is if you change the path to the image or the image file, you don't have to change it in one place. And that still works. So the PHP still works the way it should. So let's test it. If you're following a long time, I'm going to show you how to do that. So let's test it. If you're following along, don't do this at home, but let's test if this works. So we go there, patterns, and there's my theme pattern. So that's another way that you could do it. Okay. Awesome. Awesome, awesome, awesome. Is everybody else who is following along seeing their custom image? If you are putting your custom image and are you seeing it in your patterns, in your patterns list. So it goes, yep, so that's great. I'm going to insert this pattern now. They have popped it in the bottom here. Let's move it up a little bit. We'll just put it above here. I'm going to move this one. So while folks are catching up, I'm just going to do some cleanups. So now I'm using my new pattern, which is great. And then I want to put that pattern inside of my, I've replaced the group. I don't want that. So let me clear these customizations. I'm going to go back into my template parts. Going to go into the header. Going to clear those customizations. And then I'm going to add my pattern into my header. So it looks a little bit better. And there's blank theme patterns. And there's my pattern. And there it is in my header. So I can save that now. Excellent. Okay. I went very quickly there because that's just me being pedantic about how things are laid out. So you're all welcome to do that. But the idea was that you can see your custom pattern with your image from the theme. So now when the theme gets installed on the client site, I will, I will, in a second Adrian, when the theme gets installed on the client site, the image in that pattern will go along with it, wherever it gets used. And the client can then once they've installed the pattern, if they don't like the image, they could replace it with their own image or do whatever they want. Tristan, I do see your handle. I'll get you in a second. Adrian says, can you show the cover block code again? I must have an error to show. Let me do that. I'll leave that on screen while I chat to Tristan. Tristan, what's up? It was only just a quick clarification. And before when you were showing us patterns, they did, if you change the pattern, it didn't change on page because every time you put it into a page, it's like a copy of that pattern. But I think a little bit, when you were changing this pattern, it was changing live or did I misunderstand it? When you put it in the page, can you go and change the file later? So if you, yeah, if you put it in the page and then you change the file, it's as far as I know, it's not going to update. It shouldn't update the actual page. Yeah, it shouldn't update the page because whatever gets inserted into the page, that's what's on that page. That's where, so if you want that functionality, that's more of a reusable block versus using a pattern. You can actually, there's a, sure, no problem. If you have a look, Adrian, I'm just going to quickly switch off this and I'm going to come back to this. But if you have a look at this, go back to there. If you read through this support article, comparing patterns, template parts and reusable blocks, there's actually a lovely little table on there and they show you the differences and one of the fields is syncing. And syncing is if you use it in one place, you make a change there, it changes everywhere else and reusable blocks is the only one that does that. Okay. Adrian, how are you going? Did you get things working? Okay, if you got that error, did you include the URL in the top in the cover block here? And did you remove the WP image hyphen with the ID? And did you remove the ID from the cover block? Did the top URL? Did that? Would you, would you like to grab your, your cover block code and just paste it into the chat? Okay, then we can have a look. I'm going to just do this quickly. It's ID. Okay, there we go. So the three things you have to, you have to change. You have to change the URL's attributes in the cover block code, in the block markup here. You have to remove the ID. And you have, which is, which is now not there. And you have to remove the class in the, in the image block. And those, those two IDs are what often cause, because what, what those IDs do is it tells workers go and look for that image in the media library. And then it can't find it and it throws an error. So you have to remove those things. There's a, there's a block theme course that I'm working on. We actually talk about this. And one of the things that they always says, you need to make sure that anything related to IDs in the database, aren't they? That might not be a bad idea for a feature that we should request on the Gutenberg repo where there's some way that you can copy the code without the IDs or something. I don't know. But there we go. Okay. So Adrian's got his working, which is excellent. So this is a very quick little insert into this workshop. I forgot to do something when I recorded this workshop. So I'm just very quickly recording it now to answer the video. So I can go on WordPress TV. It's actually possible to add patterns into your templates and template files via your code editor. So in other words, you can programmatically add them. And this will include it in the template or template part by default when it's, when it's part of the theme. So what I mean by that is, for example, we were looking at how to, let me pop over here to the editor and we spoke about the fact that you can in your template part. So we'll pop into the header template part because I'm going to add that cover block. You can click add and you can search for it in the patterns list. But you can also include it in the header template part by default in the code. And if you look at the advanced topics, block patterns document we were looking at, there's a section on including block patterns in block theme templates. And you use this WP colon pattern block marker. So I'm going to copy out this top one over here and I'm going to pop over to my code editor and I'm going to go into my theme that I was working on and I'm going to go into my header template part and then above the group block that contains everything. I'm going to include the pattern and I just need to pass in the slug which as we know is the theme slug in the cover. So if I go to the cover block, for example, it's going to be John block theme cover block and I'm going to stick that in there. And now if I switch back to the editor and I refresh my editor, you should see the cover block. There it is. The cover block is now part of the template part. So this is a very cool way to include custom PHP financial functionality in your block templates by default, by using patterns. So your pattern contains your PHP code which can do whatever PHP things you need to do, looking up data, querying things, getting images, getting video, getting whatever that's part of the theme and then you can include it in your template or in your template part using this pattern block markup. So that's very handy for folks who want to be able to have the best of both using the block editor to create their templates, saving them as template files, but they also need to have custom PHP functionality. You can do that in block patterns, either in the PHP registration which we covered, doing it that way or using the file option and then you can include those patterns in your template parts or in your templates and it all just works, which is very, very cool. Great, we are running out of time, so I want to just talk through quickly how you can disable the categories. So there's a couple of ways you can do it. If you have a look at the block patterns handbook doc that I shared with you earlier and you scroll right down to the bottom here, just below the registering a custom category section, there is a section on unregistering a block pattern category. You can specifically unregister the categories that you want and you remember I said to you earlier, I'm going to show you where the list of registered categories is in the code. So I worked this out the other day. If you want to see this in the live stream, you can go check it out. But I just did a search for any way where they're using registered block pattern category in the WordPress core code and I think it's in WP includes. I'm just going to find this for you quickly. There it is. So it's in a file called block patterns. The file is in includes block hyphen patterns on PHP and here's the section of code. And if anybody out there is a documentation contributor and they'd like to add this list of galleries somewhere, this category somewhere, please do let me know because I can't stand not finding things in the documentation. But the categories are buttons, columns, featured footers, gallery headers, text and query. And then here are the slugs that you can use from that list. I'm going to copy this out and paste it in the chat so that folks have it in case they're needing it. Please feel free to play around with your patterns that you've created now and add them to multiple categories and see how they show up. But just as the categories have been registered, you can also unregister specific categories using, let's go down, using the unregistered block pattern category function. You need it to no problem, Tristan. You need to hook your function into an a net hook if you want to do that. So here is the code. You hook it into the net. You create a custom callback function and then you register your category. You'll see me doing this live in the live stream if you want to check that out. You can also remove theme support for the core block patterns. So that removes all core patterns. And you can also use this should load remote patterns filter to disable all of the patterns from the pattern directory. So I'm going to show you all that quickly. So if I just copy this code as is, I don't expect you to do this with me. But if I put this in my functions of PHP, save that and refresh my editor. When I go to add a pattern, all of the other ones that were coming from the pattern are actually no longer exist. All I'm left with are buttons and query. And then if I wanted to disable support for the core blocks, sorry, the core patterns, I could use this unregister. No, not that one. Remove theme support for core block patterns. There is a slight caveat. I haven't been able to successfully do this yet and I think it might be a back. So there's actually, if you want to follow along, I'm going to follow up on this probably tomorrow. I logged this yesterday in Gutenberg. Let me find it quickly. Deactivate it. The activated core patterns does not seem to work. So I'm going to do this. I'm going to do this. I'm going to set all the things that I did. And then somebody suggested that maybe I need to set the priority differently. So let's try that quickly. I'm going to grab this code here. Because I actually do want to get back to this person and answer the question. So I'm trying it with a priority of one. Let's see if that does the trick. So you're now going to help me live debug, live test what I think might be a bug. So let's see if it disables those patterns. There we go. So if you want to disable the core block patterns, you use this code over here. So add your custom action to the init hook. I should probably call this something like John blank theme, deactivate core patterns, create a custom function called the same name as that. And then just use the remove theme support one. And that'll disable all core patterns. And then if you use the, where is it? I think I deleted it. So you'll notice that was interesting. Sorry. I just want to go back a step. Let's just do that. So let's do that there. So notice that if I just, I'm going to comment this out quickly because I want to show you folks what I just discovered live while we were doing a workshop. If I just disable the remote block patterns, then the core patterns still work. So if I go to add a pattern, I've still got the buttons in the query, which are the core patterns. But if I disable the core patterns, it also disables the remote patterns. Cause earlier I disabled the core patterns, but I didn't have that should load remote block patterns, return false in, and it actually disabled everything. So you have the options to disable everything in one shot, or you can go and disable specific categories. So let's say you wanted to keep the featured category. You could do that that way or whatever the case may be. Okay. So play around with that. If you'd like to, we're not going to have time to do it properly and tested today, but there are ways that you can do that. I am going to now find somebody that I can get to update this piece of documentation to specify that you need to call it with a priority of one, because I was doing it with the default priority of 10. That's why it wasn't working. Awesome. That's my bit for today. We've got three minutes left. Does anybody else have any other questions about patterns, registering them, using them, debugging them or anything along those lines? I've ran out of coffee. No questions. Awesome. If you do have questions that you don't have time to ask now, you're welcome to hit me up on Twitter. I am John underscore Boston John Twitter. I'm not very good at Twitter. So don't send me DMs, but ask me questions there. I'm also in the make WordPress Slack. So if you are there or if you want to join that, you're welcome to ask me questions there. Otherwise, thank you all for joining me today. It was lovely to share how to use patterns. Sarah is happy about PHP. I like that. Twitter handle again. I'll type it in here. So it's John underscore Bussinger. I'm pretty good at ignoring Twitter when I'm working and I generally only scroll it in the evenings. But if you do have questions, you're welcome to ask me there. But thank you all for joining me. Thank you again, Catherine for hosting. And thank you, Sarah, for cheering me on in the background. Awesome. Thanks everybody.