 All right, great. Well, as I said, welcome. Today's topic is patterns, reusable blocks, and block locking. These features are differently very helpful for those of us who want to save time. And I thought, let me just go through a few slides as an introduction, and then we can go to my TIS website and look at some examples. And I'll demo a few things. So let's start with reusable blocks. So reusable blocks allow you to save a block or a group of blocks to use later in any post or page on your site. So if you are continuously adding the same content to the same block or group of blocks, the reusable block option will help you to save a ton of time. Reusable blocks are managed globally. What does that mean? You created once, and if you ever need to change it, you can update it from one place. So everywhere where the reusable block was used will automatically update to the new content across your entire website. So let's say, for example, you have added the reusable block on four different pages or posts. You only have to change it in one place, and it will update on all those pages or posts. So there are three things to consider when we are talking about reusable block. Number one, you can turn any individual block or group of blocks into a reusable block. You can even turn a pattern that you get from the pattern directory and turn that into a reusable block if you wanted to. Number two, if you want to use a reusable block as a starting point and make changes for only that page or post, you can revert the reusable block to regular blocks. And then it will only change for that page or post. It will not update globally. And we will, of course, look at that a bit later. The third thing, you can export a reusable block to a different site as a JSON file if you go to the Manage Reusable Block section. So when to use reusable blocks? Well, you can use it for social icon buttons, for an orthobiography, a sponsor message, a call to action tables or pricing table, or frequently used blocks of text. OK, so that's reusable blocks. Let's move on to block patterns. Well, block patterns are a collection of pre-designed blocks that you can insert into pages and posts and then basically customize it with your own content. And using a block pattern is an easy way to create beautiful layouts that combine different blocks altogether. So of course, it does all the work for you, basically. So patterns that come with your theme can be inserted from within your post or page when you click on the Inserter. Or you can browse through the pattern directory to search for any type of pattern and then merely copy and paste it into your site. So here's an example from the pattern directory. Here's a pattern that you can just copy if you click on Copy and then go to your post or page and then paste it there. So of course, most of the patterns are not available when you click on the Inserter because it's not part of your theme. You can also make a minor tweak to your Theme.js on file to add a pattern from the pattern directory to your theme. And I will show you how to do that in just a little bit. So yeah, you can actually grab any pattern from the pattern directory and make it part of your theme. And it will be under the list of patterns when you click on the Inserter. OK, so that is block patterns. Let's move on to the third topic, which is block locking. So block locking allows you to restrict the movement and the removal of blocks or patterns. So it's restricting the movement and the removal of blocks or patterns. So the block locking feature can block blocks so that editors and authors cannot manipulate the layout of blocks in unexpected ways. So essentially, it helps you to preserve a design or protect a design. So you might have worked very hard on creating a complex layer of blocks and want to ensure that a user or client can't change or accidentally compromise the design you have created. So in other words, it puts some rail guards in place for content creators. But the reality is this feature, this block locking feature, even protects your designs from yourself and to stop you or protect yourself from accidentally changing something or messing something up. You can edit the content and the style of blocks that have been locked. And I think that's something to remember. But as mentioned, it will restrict the movement and the removal of blocks. But you can change the style and the content. Right, so that is a mouthful. And that was my introduction. And I thought from year on, we can look at some examples. Right, so I thought let's start by looking at reusable blocks. All right, I'm going to jump out of my PowerPoint and I'm going to make my way to my test website. And I'm going to show you how to turn a block or a group of blocks into a reusable block. All right, so let's first go to my page, which I've named reusable blocks. OK, and I've added some content here already. OK, so I thought let's add, I'm going to just open my list here. I'm going to add below the buttons block here, I want to add some social icons. So I'm going to click on the three vertical dots and click on insert after. Right, let me just make sure this is big enough. Maybe I should just enlarge this a little bit. There we go. All right, so I'm going to say forward slash social icons. All right, and now I can add WordPress. Let's add another one, Facebook. Remember to always make sure you select the parent block to insert those social icons as part of the parent block. And let's say Instagram. And then of course, at the moment, you will see the colors a bit faded. But as soon as you add your URL to your social media platform, it changes to the correct color. So for now, I'm just adding a fake URL, adding an X there, and then for Instagram. All right, so I'm also going to select my social icons as I wanted to make it a bit larger. So in my blog toolbar, I'll click on size and let's say large. All right, so now I'm happy with that. I'm going to click on update. Now, there are actually two things that I want to turn into a reusable block now. And the first one is my social icons block. All right, so you can click on the three vertical dots in your list view. Or you can click on the three vertical dots in your your blog toolbar. So let's click on the one in our list view and you will notice there's an option that says create reusable block. All right, so let's say create reusable block. And now it's going to ask you to name it appropriately. Now, one thing I figured out was you can't name it social icons because if you look up for your reusable blocks or other blocks, there's already a block called social icons. So if you call it social icons, there will be two social icons or two blocks called social icons when you when you search it up. So you want to give it a unique name. All right, so let's say get in touch. And now I'm going to click save. All right, so now we have you will actually see those two little two little squares shows you that it's a reusable block now. All right, I also wanted to turn this sponsorship group block. And I want to turn that into a reusable block as well. So again, let's click on the three vertical dots, say create reusable block. And this time I'm just going to say sponsorship. All right, and then we can hit save. Again, now you can see the little logo there. We've got two reusable blocks now. Let's update that. Yeah, so we've used our reusable blocks on this page. So let's make our way to one of our other pages. I'm going to go to my sample page. And we've got some content here already. And now below this, I can add my reusable block. So I'm going to say forward slash. Now if you start typing in reusable, the cool thing is it will show you the two reusable blocks that you have created, right? So that's right there for you to use. Or, of course, you can click on your insert to top lift. And then you will see there's blocks, there's patterns, and then there's reusable. And here you have your sponsorship reusable block and the getting touch. So for now, let's click on getting touch. Let's add that there. And then below that, let's say forward slash reusable. And we add our sponsorship. And we can update. OK, so now our reusable blocks have been used on two different or in two different places. OK, now I spoke about this earlier on that if you make a change to your reusable block, it updates globally. So let's say, for example, I wanted to add, let's just make sure I've selected the parent block. Sorry, the parent block, the social icons block. I actually want to add another social icon, because I've got WordPress here, Facebook, Instagram. But let's say I wanted to add Twitter. So now I'm going to say, I'm going to click on Twitter. I'll add my URL. And now we can update and click Save. Again, if we go back to our reusable page now, or reusable blocks page, we will see that it changed there as well, because it changed globally. All right, so the other thing that I wanted to talk about was managing your reusable blocks. So if you select one of them, let's say Sponsorship. And for example, you click on the Insert top left, and you go to Reusable. There's an option that says Manage Reusable Blocks. Or as I said, if you select your reusable block and you click on the three vertical dots, you've got an option to manage your reusable blocks as well. So let's manage reusable blocks. And here you can edit your reusable block, you can trash it, or you can export it as a JSON file. So if you click on Export as JSON, you will see it creates a file. You can save that to your computer. When you get to your new website, you can just go to Manage Reusable Blocks and then go to Import from JSON. So of course, you can move it from one website to the other. All right, I've got another example and then I'll ask if there are any questions. So let me just go to my next example talking about reusable blocks. I've got a different test website here. And I'm going to go to Pages and I will go to my Home page. I thought this is a good example because it shows you that I've put some effort into my design. So here I've created two sections using a cover block. So if I open my list view and I click on my cover block, you will notice I've added a cover block. I've added a heading branch and a paragraph and a buttons block. And if you look at my cover block, you will see that I've put the overlay opacity at 17. All right, so I've created two of these and I thought, well, I don't want to recreate this at a different stage. Maybe I want to use something similar on a different page, but I don't want to recreate it. So I'm going to save it as a reusable block. OK, so and of course, you'll notice those two are within. Yeah, it's a columns block first. So it's a columns block and then on the left column and the right column you've got cover blocks. So let's click on the three vertical dots and create reusable block. And let's call this specials and events and click save. Now, this is interesting. You will see this happens quite a lot, but especially for like a container block, you will notice it appears quite narrow. That is normal. That happens when something like this has been turned into reusable block. And let's click update. I'll just show you when you click on preview and you look at it from the front end of the website, you will see it still appears as normal. So that's not something you have to worry about. All right, so I've saved this as a reusable block, but now I actually want to use this as a starting point on a different website. I mean, on a different page, I mean, okay, so let's go to my about page, and then at the bottom of my about page, I'm going to say forward slash reusable block and here's my specials and events. Now remember, if I change anything here, it will update globally, but I don't want to update my reusable block. I want to use it as a starting point. So I'm going to click on the three vertical dots and I'm going to convert it to regular blocks. And now you will see it looks like it looked at the beginning. And now we can make changes and it will not affect your reusable block. So let's go ahead and update this now. Let's change this and say, okay, we want this is going to be carnivores and let's say Monday, Monday steak specials in year, we can say brows specials. Let's make that bold again, right? And on the right side, well, as you can see, the steak is kind of behind my buttons block. So I'm going to use my focal point picker and I'm just going to change the position of the image a bit and let's say we want it there. There we go. All right, so on the right side, I'm going to do the same I'm going to replace. Now we are off to sell it. So let's call this herbivores and let's say create your own salad. So I wanted to make this capital letters as well. So brows specials, I forgot to do that. And yeah, we can say see our amazing ingredients and let's make sure that's also bold. All right, so I use this as a starting point and I created this and it took me a short time because I've already done all the design. So let's update this, right? And let's see if it affected my reusable block. So we can go back to my homepage and we will see our reusable block is still intact but we just used it as a starting point for our about page. So there you go. I just used it as a starting point. So all right, any questions about reusable blocks before I move on to patterns, you're welcome to pop a question into the chat or unmute. I'm not home for a minute. Was there a question? All right, well, that's a good sign. All right, so let's move on to patterns. So we've covered reusable blocks. Let's move on to patterns. Now as we said, patterns are pre-designed design layouts. That will save you a lot of time and will help you to create cool designs without having to think of it yourself. All right, so let's go to... Yeah, thanks for the feedback there, Mark Andrew. Okay, let's go to my one page which I called art exhibition. Now I've already added some images here and of course I'm advertising my art exhibition and I thought, well, I don't want to grade any design art. Let's see what's available in the pattern section in my theme. So of course, if I move on, if you click on the insertor you will see there's an option for patterns and these are patterns that come with your theme and if you click on the dropdown button you can scroll through all the different types of patterns, footers which you can actually use in templates, query, something you can use for your query loop block, buttons, et cetera. If you click on explore, you can just view it all at once which is another way to view all your patterns that come with your theme. But of course these are limited, right? But if you go to the WordPress.org website, sorry, wrong one, if you go to the WordPress.org website you go to download and extend and you click on patterns you will see hundreds of patterns that are available for the picking. You merely just have to, like if you click, hover over this, you merely have to copy and then paste it into your site and I'll show you how to do that now. Okay, so I was after a pattern for my art exhibition. So let's again click on patterns. I'm gonna search for it below, feature it. And I think it's right at the bottom. Here we go. It says event details and it kind of blends in with my black and white art exhibition. All right, and here's a pattern, a design done for you. Now you can just start changing it. So let's say 60 Main Street, Brooklyn and it's actually January 24, 2023. And you can say buy tickets and of course you can update this. You can even replace the image if you wanted to. All right, let's update that. Let's go to one of my other pages, which I called patterns and show you how I created this pattern. So this pattern was not part of my theme. This is where I actually use the pattern directory. And let me show you how I created this. Okay, so let's first just add a paragraph here below. We can add it here at the bottom. So number one, let's go to the WordPress.org website. Go to patterns and I'm going to go to buttons and you'll notice there's 673 buttons, patterns. So now you can scroll through them all. I think mine was on the second page. All right, here we go. I like that one. So I click on copy. I go back to my website, go back to my page and now I literally say, come on V, I pasted in. So this one is learn baking cookies, pastries, cakes. But of course I wanted a different heading. So I'm just for time's sake, I'm just going to copy that. And of course you can change your heading and I can change the image. Now remember, if you modify a pattern, it only changes on your site. It doesn't change the pattern anywhere else. This is yours. You can change it, you can modify it as you please. You can add sections, you can take sections away or remove blocks or add blocks and change the color, change the style, et cetera. Again, this can be used as a starting point or it can be used as a base to work from. Okay, so that's using patterns from the pattern directory. But let's say for example, you find a pattern that you really like and you don't want to go to the pattern directory every time to copy and paste. Well, I'm going to show you how you can do that. So let's just update this. I'm going to show you how you can add a pattern from the pattern directory to your theme by making a small tweak to your theme.json file. So you will need access to a code editor. So I'm just going to change my screens quickly because I want to show you how to do this. So before I do that, let's just go back to our patterns directory, our pattern directory. Okay, the one that I'm after, the one that I actually want to be part of my theme, I called it what we do. All right, so there's the one. I like that. So I'm going to open it up. So at the moment, if I go here and I click on the insertor, I go to patterns, you will not find that pattern here, right? Because it's not part of your theme. Okay, but if you want to add it to your theme, we are going to add the slug of this pattern to our code editor, to our theme.json file. So you will notice it's called services about what we do section design with title and single item. But in my URL, I'm just going to copy the slug. That's all I need. Okay, so I'm going to say command C, I'm copying that. All right, so now I'm going to change my screens and I'm going to take you to my code editor. Okay, so now I'm in my theme.json file and I'm just going to make a small tweak. So below the version two here, I'm just going to say enter. And the first thing that you are going to do is say quotation marks and we're going to say patterns. Right, and then you are going to say colon and then you are going to say brackets and then press enter. So we've got a clean line here. Now we're going to say quotation marks again and in the quotation mark, you are going to paste the slug of the pattern that you want to add to your theme. So command V, I've added that there. And the last step is just to add a comma at the end of your bracket. All right, so again, it was quotation marks, patterns, colon. Sorry, quotation marks, patterns, colon, and then your brackets. And then here you added another quotation mark and you added the slug between your quotation marks. Now I'm going to hit command S, command save. Now that is saved to my theme. I also wanted to show you the route that I followed. When I went into my site, yeah, you can actually follow the route to my theme.json file. So I went to local because that's the host that I'm using. And the site is called demo. And then I clicked on app. You go to public, you go to WordPress content. Then you look for themes. Then you choose the theme that you're working on and I was working on the 2022 theme and then you open the theme.json in your code editor. So I just wanted to explain that. It shows you the pathway which I followed to get to my theme.json file for the site. Okay, so let's see what has happened. I've added this to my theme.json file, this little tweak. So just going back to my website. All right, so now I'm going to refresh. Now let's see what happens. If I click on my insert and now and go to patterns and that was a, I think of buttons, a buttons pattern. Now you will notice it is part of my theme. And now you can just add it by merely clicking on it. And I will always be there. If you wanted to add multiple patterns, you can just separate them by comma. All right, so there's a question. Will the change to theme.json be overwritten when the theme is updated? Yes, thank you so much, James, for reminding me. So yes, this should be done on a child theme so that when updates happen, it won't be lost. So yeah, thank you, James, for highlighting that. Okay, so as I mentioned, you can add multiple ones by just putting them one below the other by separated by commas in your theme.json file. Okay, so that is how you can add a pattern to your theme from the pattern directory. Any more questions about patterns before we move on to block locking? And now of course, I can make any changes to this and it won't affect the pattern that is here, right? Now, of course, we can even make changes to this and you can create a reusable block from it. Okay, please shut if you have any other question. All right, then I am happy to move on to block locking. All right, so my last test website for the day. So as mentioned, block locking allows you to restrict the movement and the removal of blocks or patterns. So let me open up one of my pages and let's open the one that I named block locking. Okay, now this is actually another good example of a theme that I, of a pattern that I found from the pattern directory and then I added it here. Thanks, Sean. All right, so here is a pattern that I really liked. Now, let's say it wasn't a pattern, this was something I created, this is my design and now I want to protect it. So I'll open my list view. I'll select the group, click on the three vertical dots and there you will see an option to lock. So let's click on lock. Now it says choose specific attributes to restrict or lock all available options. So if you say lock all, it will disable the movement and prevent removal. Or of course, you can just choose disable movement or just choose prevent removal. When you select both, there's an option to apply to all blocks inside because as you can see, we've selected a group block and within the group block, there are many, many other blocks. So now we can select apply to all blocks inside and all the blocks inside will be locked. Okay. Before I move on, James, thank you for the reminder as well. If you are unsure how to create a child scene, I will share a recording of that in the meetup group on this meetup group for you to find. Or maybe I'll try and find something at the end of the session to see if I can share that. Or James, if you find something on the Learn website, that will also be great if you can share that. All right, so we have locked this group block and we've locked all the blocks inside the group block. So let's open up and now we will see, we will see this lock next to all the inner blocks, right? So the parent block and all the inner blocks, it is locked. You cannot remove blocks, you cannot remove it or move it. So if you click on the group block or on this block, for example, one thing you'll see is there's no more arrows or movers for you to reposition a block. It's gone because you can't, I almost said can't. I've been listening to a lot of American accent. So you can't, yes, you can't move it. So there's no movers. And if you click on the three vertical dots, you will notice here at the bottom, there's no option to delete anything. And also usually you are able to drag and drop blocks in your list view. But now let's say for example, I'm trying to drag and move this to a new position, nothing happens. So it's all locked. But as mentioned, you can change the content or edit the content and you can edit the style, but you can't move anything or remove anything. All right, so let's say for example, I wanted to change some content. You can do that. So let's say I wanna add this picture. Let's change this to 40 years of experience. We can change the color. Et cetera. All right, so we can do that, although we can't remove it or move any blocks. So it protects our design. It preserves our design. And as I mentioned, there is one cool thing that I wanna show you that when something is a reusable block and you lock it, you can actually lock it down completely. So let me show you this. This is quite cool. So I'm gonna go to block locking one. All right, so here I have another design and I am going to lock this design. I'm going to lock all. I will apply the lock to all inner blocks and then apply. Okay, so now I've locked this. And now let's say you wanted to actually create this as a reusable block. So it's locked. Now you can say create reusable block. Okay, so let's call this marketing grid and click save. Oh no, sorry, I did this the other way around. Sorry, my bad. Okay, so can we just backtrack here for a moment? Let me just update here. Sorry. So there's a marketing grid. Let's go to manage. Okay, so it was actually changing a reusable block and blocking the reusable block. So I've done that. Sorry, let's go to pages. It was block locking one. Okay, so let's create reusable block first. Okay, we call that our marketing grid. Okay, as you will know, as you will see it's a bit more narrow, but again, it shows or displays correctly on the front end. Okay, so now I've got a reusable block and now I want to lock my reusable block. So let's say lock. Now you will see the UI looks a bit different. You can restrict editing. You can disable movement and you can actually prevent removal. So let's say apply and now you will see I can't do anything, which is a great feature. If you are locking a reusable block. The one thing that I do want to mention is that anybody who's able to edit blocks can unlock a group of blocks or block. So anybody can go and unlock it now. It's a bit more advanced, but I will share the link with you. There is an option where you can actually prevent somebody from unlocking a block and then you only allow the administrator to do that. I'll just show you that quickly and I'll share the link. I've created a video tutorial about the key to locking blocks and there is an option here. It says restrict locking and unlocking. So by placing the following code example in the functions.php file of anything, only administrators will have access to the locking UI. So then only administrators can lock or unlock blocks. So let me just share this if you were interested to learn more, but as I mentioned, we don't really have time for that today and I think it goes a bit deeper into what we are looking at at present. Okay, so let me just share that. All right. So if you're keen to learn more about this, this is kind of at the end of the tutorial if you wanted to learn more about that, but otherwise there's also a resource that I shared here, unlock the power of the block locking API. But as I mentioned, it's a bit further advanced. Okay, so that is block locking. All right, any other comments or questions or something that I missed. While those questions are coming up, maybe if I go to learning and James, there you beat me to it. Thank you. That's awesome. All right, so there is a link to creating a child scene if you were interested to learn more about that. Yeah, thank you so much, James. I appreciate that. So yes, reusable blocks, block patterns and block locking are great features to make your life so much easier, save you a lot of time. And I think the great thing about patterns is that it also kind of inspires you or it gets your creative juices flowing. So when I look at, if I go to the pattern directory, for example, there's so many designs that it helps to unblock you if you get stuck on something or it gives you an idea to run with. All right. Oh, Dave mentioned there's also the create block themes plugin. Yes, thank you for sharing that. Oh, thank you, Dave. I appreciate that. Well, yes, if we don't have any other questions, we can call it a day. I actually went a bit faster or a bit quicker than I expected, but we got everything covered. And yeah, if there's anything that you want me to show again, speak now or whatever your piece. All right, yes, thanks again, James, for sharing that. Thank you everyone for joining us today and we will see each other next time. Have a good one. And yeah, I will break the record. Yeah, thank you so much. I will, yes, go ahead, James. I just wanna say thanks, it was great. Awesome, thank you very much. Thank you everyone. See you next time. Have a good one.