 Alright. Okay, welcome everybody. My name is Nick Diego and I'm joined here with Laura, who's going to be my co-host and welcome to another online workshop. We run these through part of the training team for WordPress.org and today we're going to be talking about block styles and block variations. So as we kind of settle in, if you wouldn't mind in the chat, let's start off with who here has created their own block style or block variation? Because that will help us gauge where we're all at. Perfect. And if you haven't, please tell us. I mean, that's no shame in having not implemented this stuff yet. That's why you're here. We just want to try to understand where everybody is. We'll be covering both concepts quite broadly. So even if you have created them before, hopefully you'll get something out of this conversation today. Okay. Good. We have some... Oh, Lisa, you've implemented a block variation, but not a block style. That's funny because block styles in my mind are actually simpler than block variations. It's very cool. Okay. You try, but not happy with the result. Okay. Cool. We have a good spectrum of folks here. So I'm going to start by sharing my screen and then we will kind of walk through what is a block style? What is a block variation? When should you use a style? When should you use a variation and how to implement them? Now, throughout the conversation, I'm going to kind of stop at various points. And so if you have questions, please put them in the chat and Laura will kind of consolidate all those. And then when I stop for a moment, we'll go through some questions and then we'll proceed forward. All right. So you should all see my screen. And if you've been in one of these before, I apologize for me repeating this over and over again, but what I like to do is just go over my setup. So if you're following along at home and want to replicate what we're working with, I have a local installation WordPress. I am running the beta, beta three. So if you're not aware, WordPress 6.2 is releasing at the end of March and we're currently in the beta phase. Tomorrow will be beta four. And right now, the current released version is beta three. So I am using a plugin called WordPress beta tester. It allows you to test the various betas. And I am currently running 6.2 beta three. Let me zoom in a little bit. So if you want to test out the beta and the new things that are coming to WordPress, I encourage you to check that out. I'm also running the Gutenberg plugin. Most of almost everything you see here today, everything, let me rephrase that, everything you see here today. Session transcripts doesn't seem to be working. Let me check on the transcript. It looks like they're working now, Robin. Laura, can you see if transcripts, sorry about that, we're just double checking to make sure our transcripts are running. Don't know where to look for that. Live transcript on, it says. Okay. So it does look like they're on. Hopefully they are. If not, well, we'll mainly go back and create them. So I was just saying that I am using Gutenberg. The reason for that is because everything you see today will be in WordPress 6.2. A few little things are going to be in beta four, which is coming out tomorrow. They're still, they're in Gutenberg, but they will be in beta four. Long story short, we're using Gutenberg just to make sure that we're getting the full picture of what you will get when 6.2 comes out at the end of March. So what we're going to do is we're going to also, I'm using the 2023 theme and that is going to be important in a second. So we are using the 2023 theme. This is the default theme you get when you install WordPress. So let's start by talking about a block style. So what we're going to do is we're going to go over to pages and we're going to start over to block styles and variations, just a sample page that I have here. The big thing to get out of this is that a block variation is not a block style. If you get one thing out of this whole conversation, that's how I want you to get, because it is very confusing. You'll see the term used interchangeably a lot in the WordPress space, but they are really two very different things and they have very different functionality. So I want to hammer that home. But let's take a look at the button block. So a button we see here. Now in WordPress 6.2, you're going to see this split panel, one for styles and one for settings. So that's what you're seeing here. Now under the styles panel, you'll see, sorry, yeah, under the styles panel, you'll see this, sorry, under the styles tabs, you'll see the styles panel. And for buttons we have default and outline. Outline is a block style. So what happens when I click on outline, if you've used the button block before that removes the background and puts just a border around it. Now there isn't actually anything very tricky going on here. It's just a class and we can actually see that because if we come down here to go over to the settings, we go to advanced, we can see that there's an additional class now is style outline. If I come back over here and go back to default, you can see that it says is style fill. So all that's changing here is some CSS classes that are getting switched in and out. And that's all that a style is. So if you want to learn more about the official documentation for a style, we can kind of stop here. I'm just kidding. We can kind of stop here. A block style and this is the official handbook directory. I think that's in the notes, Laura, if you don't mind dropping that link. This is the how you create a style and we'll talk about this in a second. But at the end of the day, a style is just adding a CSS class to a block. Then what you do in a style sheet is you define what that style is supposed to look like. And then in the user interface, when you change between default and outline, it changes the CSS class. And then whatever styles you have registered will get applied to block. So when I said, I was joking earlier that styles are easier than variations. It's just because if you're familiar with CSS, registering a style just gives you this nice little user interface that allows users to switch between the different styles that are registered for the block. It adds a specific CSS class, then you register those styles. We'll talk about, well, I'll show you how to create one in a second, but you register those styles and then those styles are then applied to the block. So it's just plain CSS with a little bit of user interface put on top of it. Now, that is very different from a variation. A variation, and I'm going to talk about this separately, but a variation can do all sorts of things. So instead of just changing styles, it can set different block attributes. I don't want to get too much far into it right now, but let's stick with styles, but variations can do a lot more than styles can do. So let's look at the 2023 theme and walk through how you would add your own block style to 2023. There's something important to note about 2023. 2023 is a block theme, and when it was built, it was built in a way to minimize the number of files that are in the theme. With that, one file that you often see in themes is a functions.php file. This is where you can go in and add custom code or usually there's some standard code in there for a theme. 2023 is unique in that it doesn't actually need a functions.php file, so it doesn't have one. However, as soon as you want to start doing customizations like adding your own block styles, adding your own block variations, you need those types of files. So let's hop on over to my, this is my text editor and this is 2023, but I've started to make some modifications. So I've added a functions.php file and under the assets folder, I've also added some additional things. Some of this is pulled from previous sessions that I've done, workshops that I've done, so I apologize if there's some extra code in here that isn't made, doesn't necessarily pertain to the session, but know that if you just take a look at the file structure for your 2023 theme that you download directly, it's not going to have a functions.php folder, it's also not going to have some of these files inside of the assets folder. These are the things that you'll need to add. So if you're following along at home, you open up 2023, you want to create your own block style, first thing you want to do is create that functions.php file and then you can start, then you can start working. So one question that I always get is that what happens with 2023 updates? Well, my changers get blown away. They will. So just note that what you can always do is you can rename the theme to your own theme. You can create a child theme. There's a lot of ways to get around that, but just be aware that if you're editing 2023 directly, there's an update provided by WordPress and you do update, it will override your changes that you're making here. But for the sake of demonstration purposes, this is the easiest way for us to get forward and move forward without explaining what a child theme is in content and to all that. But here we'll be done with created a functions.php file. And in the handbook for styles, there are two ways you can actually register a style or create a style. One is in JavaScript and the other one is in PHP. I'm going to start with PHP because it's the simplest, at least for me. And hopefully for many of you who may have edited themes for added functionality to themes, generally PHP is a little bit easier. The reason, but when we get to variations, we will be using JavaScript. So I want to put that out there. But on the styles handbook page, the first thing you're going to be presented with is JavaScript. So you wanted to scroll down to the bottom here. And you can see here that there's now the PHP function for registered block style. And this will show you how to register your own style. Now, I'm not going to create an example out of thin air here. What I want to do is I actually want to share with you a really good article by Justin Tadlock over on the brand new WordPress developers blog. So the WordPress developers blog, and we pull this over here. So the WordPress developers blog is a brand new blog. You can see that it's still in beta. As we progress throughout the year, it will become finalized and no longer in beta. But this is going to become a really good resource for tutorial-based articles and how to do things like block styles and variations and whatnot. We have the documentation, but sometimes the documentation can be just really straight to the point of, this is how you do it without a lot of explanation. The developers blog is a kind of flush set app, provide some of the explanation in addition to online workshops like this one. So Justin put together this good article on how to create a block style, why you'd want to create a block style. So I highly encourage you to read it. What we're going to do here is we're going to use his examples so you can see it kind of on live. And then you can go back to the article later and catch anything you missed or pick up on some of his commentary. So in his article, Justin starts adding a block style to the image block. So let's come back over to our page here. We can get rid of our banner warning us that styles are not variations. And let's add an image. Pick a picture of the galaxy here. And if we go over to the styles panel, you can see that there's default and rounded. So click on rounded. And now again, we've applied a block style. This is a built-in block style for WordPress. And now we kind of have this rounded image. Update that. So now in Justin's article, he wants to build a block style that has kind of this effect that you could never do in just straight WordPress. Of course in straight WordPress, you could add borders and radii to your image. But you couldn't do something like this. There's no settings or configuration in WordPress that give you this kind of, I guess, he's calling it like a hand-drawn border. And this is when you'd want to start employing block styles. Block styles are there for when you want to do a plot, allow users to add a style to a block that really cannot be handled with the controls that are in WordPress. So in many ways, this rounded border block style, it's there because it existed before we had border controls. And it was a way for users to have rounded images. But now you don't really need it because you can just come down here and do a rounded border using just border radius. So this is a good example of this block style has been in WordPress forever and for backward compatibility issues, that's why it's not been removed. But you can do the functionality that it's providing with block controls. And this is actually probably the preferred method. So I encourage you to only employ block styles when you really need them. When you're trying to do things that WordPress can't do automatically. Or if you're in a caveat, if you're in a very curated environment where you're building something for clients and you want to disable the border control, you don't even want to give them access to that, but you want to allow them to apply some very specific styles. That's another good use case for block styles. But if it's just for yourself, try to use the controls that are there. And then when you need something that's beyond what WordPress can do, that's a good place for a block style. So in order to apply this, what we're going to do is we're going to use the register block style function. And what I'm going to do is I'm literally going to copy his code. Again, we're not going to try and reinvent the wheel here. So if you want to go back and go to this article, copy the code, put it into 2023 theme and see exactly what we're doing here. But I'm going to walk through what this function is doing. So again, I'm going to come over to 2023 in my newly created functions .php file. And I'm going to drop in the code that's in the article. So let's take a look at what this is doing. If you have any, if you guys are completely foreign to you, then stick with me. But hopefully if you've at least seen the functions .php file and other themes, hopefully this makes some sense to you. So we have an action that we're calling and that we're calling this function. This is a made up function name. It can be whatever you want. Inside of there, we have the register block style. So what we're doing here is we're saying we want to register a block style. The first piece here is the name of the block. And in this case, it's core dash image. Now, I'm not going to go through all of this because we'd be here for an hour. But again, you can always refer to that handbook article on styles and we'll give you all the properties that you can pass. But what we're doing here is we're applying a style specifically to a specific block. We've given it a name. Let me zoom in a little bit. We've given it a name. We've given it a label. And what Justin's done here is he's taken the styles that he wants applied this block whenever the block styles apply. He's added it as an inline style. Let's apply this and take a look what the block style looks like. And I'll come back to this and talk about how to register styles, whether you want to do it inline, whether you want to put it in another style sheet. Talk about that in a second, but let's just save this. Come back over to our document here. Over refresh. And now you can see that right here we have this hand drawn block style. Again, hand drawn. This is coming from the label. And when we click hand drawn, we now get this fun border. Now, in the very beginning, I showed you the block styles just as a class name. And you can see that here if we come down to advanced. Now it says is style hand drawn. So key point here. The name that we're applying to our block style hand drawn gets added as a class name. It's prefixed with is style dash. And then whatever our name is hand drawn in this case, and it gets added as the CSS class. If I remove this CSS class, it goes back to what it was before. And the reason it's rounded is because I applied a border radius. So block styles. Easy to implement because you can just do it right in your functions.php file. It's just a custom class with your own custom styles. Again, come back over here, click hand drawn. We have our custom class. And before I get into how to add your styles, whether you want them to be inline or another style sheet, I'm going to check on the chat and see if you have any direct questions. Let's see here. Looks like a lot of linking going on. Last question. There is box shadow coming. Okay, yes. So one of the very common things that people would do with block styles, because box shadow didn't exist in WordPress, is you use block styles to add box shadow. In 6.2, box shadow is or shadow is coming to just buttons. Now you may say, well, I'm on box shadow and lots of things. Why just buttons? Well, it's a way to implement the functionality iteratively. And so if we come over here to button, I think we should have, oh, you know, it's even more restricted. Okay. So box shadow, I don't want to get too often in tangent, but box shadow is a fairly complicated style to implement, especially from a UI perspective. So box shadow has not been implemented inside of the post and page editor. But if we were to come over here into the site editor, in the site editor, which again is pretty limited because you have to be an admin to access this, we underneath blocks. And if you go to blocks and you go to button, you'll now see shadow. So you can control shadow on buttons in global styles. You currently cannot do it on anything else. And you can't do it inside of the post and page editor. This will all change by 6.3, but this is a chance to get the initial functionality into a core release, make sure millions of people are testing it and making sure it's, you know, it'll allow for changes, improvements as we move before rolling it out into the entire block suite. But you come over here to shadow, and then you can choose the different prebuilt shadow options. You can also define the different shadow presets and theme.json. Again, conversation for another presentation, but to address that question, yes, shadow is coming in 6.2, but just to buttons in just in global styles. There was a question at the beginning of your presentation from Lisa. It might be out of the scope of the session, she says, but if something is included in the list of attributes shown in block.json file, is it always usable to create a variation? I have not yet been successful to create a variation of file block to have display preview colon false. Got you. Okay, we'll talk about variations in a second, but that's a great question. So I will address that in about eight minutes. So we'll talk about that in a second. But does anybody have any additional questions on styles? At the end of the day, they're pretty simple. I do want to talk about how to register styles before we move on to variations, but does anybody have any questions about styles? Okay, we have one here. Did the block style overwrite the border radius? Good question. All right, let's double check this. So let's go back over here and we'll do rounded. And then we'll come to border radius and do 20. Okay, so it looks like the border radius is overriding the block style. Let's just double check. That was my previous don't update very well. Okay, yeah. So the manual controls will override radius. However, okay, it depends on how you write the CSS. So you can see here that I have a border radius of 20, but my hand drawn block style is overriding it. So because it's just CSS, you can be very specific in your block and your styling when you're applying your block style. You can, you know, heaven forbid you also use important in your block style to make sure it's fully overriding whatever's in the interface that, you know, the user can control because it's just CSS. There's a lot of flexibility there. So you can see how one does one doesn't. And it's really just how the styles are written for, for the block style. All right, so let me just, I want to go over how the styles themselves for a block style is added to WordPress. So in this example, there's a property called inline style. And what Justin's done here is he's just taken the style that he wants to apply to the block and he's put it directly in the registration function. Actually, funny enough, you can see this important here. So he is actually manually forcing his border radius for his block style. I think if we were to remove this, then the controls inside the interface that border radius control would actually override the block style, but he's actually forcing it here in his example. Now this is the kind of the most condensed way to include your block styles with your block style. Include the actual CSS with your block style is using this inline CSS option. Now another way to do this is if you're familiar with registering CSS in other ways, you can do that as well. So we can get rid of this actually, I'm just going to comment this out. So for example, in our style.css file, I can do this. Of course, it did not like that copy and paste. So this is just the style sheet for our theme. And what I've done is I've just copied over the styles that Justin had put together for this for this block style. And we'll save. Now there's, you know, we need to make sure that this style sheet is actually rendered and cued, but I've already done that here and made sure that that's already in cued. But let's come back over here and fingers crossed this all still works, and it does. So what I've done here is just basically put the specific styles for our hand drawn block style just in the style sheet for the theme, the default style sheet. Now 2023 doesn't have anything in style sheets. Kind of it's claims to fame, I guess, but you can put that here. There's also another method called per block style sheets. I'm not going to get into that because that's basically a conversation unto itself. But Justin, I believe talks about that at the end here. So you can load style separately and then at the bottom of the bottom, yeah, down here, he talks about loading it per block style sheets. So many different ways to actually add your styles. The cleanest, simplest way is just with the inline style property. This might be a little bit hard to manage, though, because it's just a comment. So if you want more flexibility, you can include your styles in any other way you want. Another example being just in the theme style sheet. All right, Ian's asking inline style looks like a normal CSS rule to these styles get added into a style tag in the head. Let's take a look. So let's turn this off back over here, turn this back on. So one of the things that you will realize with the block editor is that there's a lot of styles being in mind. So if we come here and inspect this over here. All right. So in the head, now this is, see if I can zoom in here. Okay. So in the head, as you scroll down here, you'll start to see these blocks of styles that say inline. So for example, we have button inline, all sorts of inline styles. I'm trying to find the exact place that see here. Oh, it's image. Image is what we were talking about. Okay. Image, let's see at the bottom. Okay, here we go. So here you can see that that hand drawn image, because we inlined it, it took the already the styles that come with WordPress that are already in line. It appends the styles for our block style at the end. So you can see that here. It's not minified, unfortunately, but it is, it is here. So that's where that's getting added. So if you ever look at the head of on the front end of what theme built with block editor, you'll see a lot of this inline styling. That's where this one. Okay. Sean had a question that we're kind of debating back answering. He'd love to have an easy way to put a border around a contact us form. And Lisa was saying, could you do a group block around the contact form and set that as the border? Yeah, I mean, that's a great, that's a great way to do it. I mean, some, maybe this, I'm not, I'm not a designer, right? And so I am also not somebody who has perhaps who doesn't hold very tightly to maybe optimal building techniques. And what I mean by that is I put a lot of things in groups. So all of my designs are groups and groups and I move things around and they're in groups. So I use the group block very liberally. So in the case of that contact form, I would put it in a group and do exactly what was suggested and put a border around it. You could also add some padding to make a look a little nicer. I would use the group block as a way to kind of handle the contact form. You could do it another way. If the contact form is a block in and of itself, and there's some contact form blocks out there, then you could do a block style for that. You just need to find the name for it and do exactly what we did here. You would change, let's say you pretend that there was a block registered a contact form, you could do whatever example contact form or whatever the name of the block is. And then that block would then get this block style and you could click order and then that would be that. Now if you wanted to always have a border, you could just register styles specifically for that block and just always give it a border. If, for example, that block doesn't have border support, which was a lot of custom blocks done. Hopefully that gives you maybe too many ways of accomplishing the same thing. Well, he was saying that he was putting a column into a container and I think we're getting away from containers with block and site editing and the container is now a group. Correct. Yes. So the default container is going to be a group. I'm trying to envision a contact form and I would imagine you would put that in a group. Maybe you want to do something where you have your contact form over here and some text over here. You could also use a columns block for that. But if you're placing things in a single column, default to a group, don't use a single column block, use a group. But if you need multiple columns, then a columns block is there for you. All right. So again, quick recap, block styles just a CSS class with some UI that allows you to apply it. Multiple ways to apply the styles, easiest ways that inline style prop. Otherwise, you can register your styles however else you want. Let's see what else we got here. Okay. So now I want to talk about block variations and this is something that, sorry, we're not going to talk about block variations. I want to show you guys something really cool with block styles. And we're going to talk about this at the end, but because we're already here and I don't want to start, I don't want us to go down the path of block variations and leave this hanging. In 6.2, there is now functionality where you can actually modify a block style in global styles. So if we take our example of this hand-drawn custom block style, and I come over here to the site editor, come over here, go to styles. We'll go over to blocks and we'll find our image block. Oh, okay. So there may be some finessing that needs to be done here. And I think you have to register block styles in JavaScript for this to work. I'm adding a follow up for myself, but you can now manage or customize your style variations inside of global styles. So for example, image blocks come with a rounded style variation. You can click on rounded and you can modify, for example, if we wanted to give it a green border, something like this, typography doesn't really apply. We'll save this now. If we come back over to our editor and we change this to rounded, you'll now see that it, and we got to get rid of this. You'll now see that it has this border. So this is a brand new feature. Clearly still needs some work to pull in that hand-drawn block style that we created ourselves, but know now that in the future, more controls over being able to edit block styles with block styles within global styles, lots of styles, you'll be able to do that now in the future. So very cool to see still some work to be done on it, but more ways for you to actually edit the block styles that are created. It'd be really cool if you could create block styles from the interface, but we're not there yet. Okay, so let's talk about block variations. And I think that this is the more technical part of this conversation, but I really want to do a bit of a deep dive into variations because they're unbelievably powerful. And there's something that I don't think many people use as much or have explored as much because of perhaps a technical barrier for that. And they're also a little bit challenging to understand. Block variations you cannot see in the interface here. They're there and there's many of block variations in the block editor, but they're not as apparent as something like block styles. A block variation is a true variation of an existing block. And let me give you an example. We were just talking about groups, right? So move this. So a group block. Standard group block. Now you'll notice here that I can select between a standard group, a row, or a stack. I can also insert a row, a row block, and also insert a stack block. These all appear to be their own unique block. They're not. They're all variations of the group block. And we can see that as if we go to code editor, we can see that they're all groups. Of course, my grammar is yelling at me here. Let's turn this off. Okay. So you can see that they're all groups. They appear as different blocks, but they're all variations of the group block. Now just one more example. Take a look at our embeds. All these different embeds for Vimeo, Spotify, YouTube, they are all variations of the embed block. So you can see how powerful this can be is, and even in rows and groups and rows and stacks, they have very different functionality, but they're similar in the sense. And they are presented in a way for the user that they just look like a normal block. Let's go back to our group example. Groups, rows, and stacks. What is different about them? What is actually different about them is the attributes that they have. So if we come back over here to code editor, you can see here they're all groups, but this one has layout type constrained. This one has layout types constrained flex, no wrap. This one is layout type flex, orientation vertical. So what's different about them is the attributes that they have. An attribute is the kind of the under the hood specification for functionality that you set either behind the scenes or in the user interface in the sidebar. So for example, if I was to go to our group here and we do padding, give it some padding, you'll see now that it has spacing, padding. It has a whole bunch of attributes applied to it. Now these attributes apply style to it, but from the perspective of the block, you're applying attributes to it, which then get turned into styles on the front and in the editor. But the specification is an attribute form. So when you define a block variation, you are creating basically in many ways a new block with reset attributes. You can also do blocks, inner blocks. Hold on for a second. We'll stick to attributes right now. You can add more functionality to block variations, but attributes is kind of the first thing to tackle. So let's just dive into creating one and then we will kind of answer some questions and kind of back out functionality. So I believe Laura already shared it, but I put together a gist of some examples of block variations. We don't have a handy article that you can just go and pull like Justin's article, hopefully in the future from the developer blog, we will. But I put together a gist of some examples that you can pull from. Yeah, in query, Robin, you're 100% right. The query block is another example of one with tons of different variations and you can build really complicated block variations for the query block. It's a bit beyond the scope of this conversation. We're going to kind of just touch on the basics of block variations, but they can be incredibly powerful. A good example would be there's a search block, right? Well, you can write a variation so that search block will only search certain post types. So if you had a custom post type on your website for books or something, normally that search bar will search everything on your website. Well, you can write a block variation that says book search, whatever. And then that search bar will only search books. So just a teaser on how powerful this functionality is going to be. We're going to build simple variations today, but tip of the iceberg. So let me just share. Actually, Laura, do you mind resharing the gist in that example? Perfect. Okay. So mainly for me, so I can easily correct. All right. So I put together this gist of a few examples. Now, again, you're going to need to write these variations in JavaScript. And there's also, actually, do you mind dropping the variations? So this is the handbook article for variations. It's very good, but very medium technical. Hopefully we'll abstract away from some of the technical parts of it. The beginning part of this article talks about how to define block variations when you're building a custom block. For this conversation, we're not building custom blocks. So kind of ignore the first part of this. And as you get down to the bottom, the very end, it shows you how to register a block variation. So we need some more tutorials on this, but there's good content in this article you just kind of got to get to the parts that are relevant. So the important part here is how to register a block variation for a block that already exists. And we're going to do that with this JavaScript function here. But you may be wondering, well, do I put that in functions.php? No. You got to create a new file and queue the JavaScript and go through some rigmarole if you're not familiar with it. But in the gist that I provided, you can just do some fancy copying and pasting. So the first thing that we're going to do in our functions.php file is we're going to copy this function and this action to enqueue a specific JavaScript file. So we're going to come back over here. I'm going to delete this for now. I've already pasted it in. So it's just a simple function. It's enqueuing our script. And this script, this JavaScript file called variations, I just put in a special spot in my assets folder for 2023, I created a folder called JS for JavaScript, created a file for variations.js. So again, we're doing some copying and pasting here. And then what I did is I just then you just copy and paste the rest of the example into that new file, the variations.js file. So you want to follow along at home, just go to this JS, do some copying and pasting and everything should work. But let's walk through the first example. So in my first example here, I have created a variation. You'll notice that there's some similarity in how block styles and block variations are set up. You got a name, you got a title. So here I'm creating a variation for the group block. And what I want to do is I want to have a block that's available that a user can insert, very simple. It's a group block, but it has a border and it has some border radius and it has some padding. So you can imagine a scenario where, I don't know, you're building a site for clients and they have a certain maybe a call to action container that they use all the time. And instead of having them, you can create a pattern for that, of course, so we don't talk about block patterns, but you could definitely create a pattern for that. But maybe you want to make this a little bit more, you want it to make it look like a block. Here you can define a special container or group block and reset all those attributes for border and radius and padding so that the user doesn't have to recreate it every time. So what I've done here is I've put a title in description is default, false, we'll talk about this in a second, but what you could do is override the default group block. So if you wanted every group block to look like this, you could set it true and then every group block when you inserted it would have these attributes. What I've done here is I've defined my attributes for the block. So when you insert it, it's going to have these attributes. Well, let me let's insert it and then we'll I'll talk more about the attributes in a second. So come back over here. So now when I go to group, let's type in group. As I start typing in group, you can see now that there's the group block, the default one, and now there's a new block called group dash rounded border. That's what I have here. This is my new block variation that I've registered. And when I insert this, you can see that it's a group block. It has a simple border and it has some padding. Now the key part about this is that you could have a block style that does something very similar. You have custom CSS that gives it a border and makes the radius rounded. The key part here is that the style is being driven by the attributes of the block, which then allow the user to change it. So you can see that padding is preset, borders preset, radius is preset. But if I wanted to change this to, I don't know, two pixels, I can do that. But when I go to create a new group block, this group rounded will stay the same. So let me stop there and see if there's any questions. All right. If you go back a little bit, Robin asked, is the query block another example of multiple variations? Yeah. So you can do multiple variations of the query loop block. The query loop block has a ton of attributes. So you can get really complicated with some of these variations. But yeah, that's another good example. And then I don't know if you answered this one, Meg asked. So these attributes are in JSON, which gets translated to CSS. Correct. So just like, here, let me just, this is our group block that doesn't have, it's not our custom one, it's just a standard group. So let's say give it a background. So when you apply these styles, we can do spacing, I don't know, blue border. These are stored as attributes. Let me just, let me remove this so it's easier to see. These are stored as attributes on the group. And it's a little hard to see here. We can see, for example, it's got a background color of primary. It's got border color vivid, cayenne blue. WordPress then takes those attributes and turns them into CSS itself to actually create the visual aesthetic of the style. But you're defining the style in a language that WordPress understands these attributes. And the benefit of that is that, I mean, you could do the same thing in just CSS. Do whatever you wanted in CSS. The benefit of the approach of variations is that it actually, because you're speaking a language that WordPress understands by defining things in attributes, they're defined in the UI when a user goes to edit the stuff, edit the settings for the block. So you're actually seeing that the background is green, padding, spacing, so on and so forth. If I was to do a great example of it, the difference is if I go back to my image, we'll do, so when I did the rounded image, there's nothing in the UI other than this that's telling me what's actually applied to the image. It's just telling me that it's rounded. I'm not seeing any border radius applied. But if I had a, actually, let's just do this really quick to hammer this home. So let's come back over here. This isn't one of my examples, we can do it. So if I wanted to create core image, and we're going to do image rounded borders fine. Okay. Well, false, false, false. Let's do that. We can get rid of spacing, get rid of border color. So now I have a new variation for images. And all I've done is I've applied the border radius to mallets. 100,000 isn't necessary. This is 2000. And now we come back over here and move fresh. I go to an image now. I can see that I have my normal image. And I also have my image rounded border. The benefit of this is when I apply this, you can see that you actually see the radius is set to 1000. So this does the same thing. Ignore the green because we set that in that global styles. But this does the same thing, but you can't actually see what's being applied. The benefit of variation is actually applying those styles as attributes to a block. Yeah, at least I think an assumption on advanced variations is a great topic for the future. You can get really complicated with them and sophisticated. So we'll definitely jot that down and we will plan on doing that in the future. So let's get a little bit more advanced for a second, though, because not only can you apply attributes to blocks using variations, you can also do some really cool stuff with inner blocks. So we were talking about groups and containers before. Well, inner blocks are blocks inside of other blocks. So imagine a group block or a media and text block. Let's just take a look at our media and text block here. So let's just take a look at a media and text block. When I insert a media and text block, you know, it's telling me to add our media. It's telling me to add some content. But maybe you want like a more refined editing experience for your users. Again, you can create a pattern for this, but maybe you want to not have a pattern. Maybe you want to override the default media and text block. So whenever they add media and text, instead of getting this experience, they get something a little bit different. Let's see how to do that. So we can go back to our variations here. And we'll come down to this big one here, customize, oops, that's wrong, but we'll customize media and text. Okay, let's take a quick look at this. We're applying it to media and text. We're giving it a custom name. Now, but what I've done here is I've done default true. So this is going to override the media and text block that's in WordPress. Now, I mean, you may not want to do that, but imagine you're building a site for a client and you want to provide a really curated editing experience. You want to really customize the core blocks that come with WordPress so that it satisfies or meets the needs of your client, and you're really restricting that experience. Well, we can do that. The first thing that we're going to do is maybe they always like to have the image on the right. You can see that when I insert the media and text blocks by default on the left, maybe I don't really want to do that. I want it to be on the right. While we've set media position right, maybe we want the background color to always be a specific color. In this case, secondary. Actually, I'm going to change this to primary just for the sake of 2023. Now, the second section here, which we haven't talked about yet, is called, is the inner blocks that I was alluding to before. So this is saying you can pre-populate the content, because media and text is a container. It supports inner blocks. You can pre-populate this block variation with other blocks. And in this case, what we've done is we're pre-populating it with a heading block, an H3 actually, level three, and giving it the placeholder text of heading. Then we're going to also add a paragraph block, another placeholder, and says, starts with your story. So now when a user goes and inserts that media and text block, they're presented with this more refined block variation. So let's take a look what this looks like. Save. So remember, this is what it looks like by default, or before we add our variation, this is what it looks like. Now when we go to media and text, you can see that the image is on the right. And we have our heading block already added. You'll notice in the one before, there is no heading block. So now we have a heading block. And now we have a paragraph block that says, start writing your story. We can look at the list of you here. So this is the one before we did our variation. This is the one after we did our variation. So hopefully this gives you a flavor of how powerful variations can be. Not only can you create additional blocks, like additional variations of an existing block, you can override blocks that are in WordPress to really customize them to meet your own needs, to meet the needs of your client, so on and so forth. So yes, you could create a pattern just like this, but imagine a situation where you should just even need to add a pattern whenever they add a media and text. This is what a media and text is for them. Of course, they can come in here and change things around and modify the background and whatnot. But this is the starting editing experience as opposed to the one above, which just comes from WordPress. Exactly. It's kind of like preloading a pattern. Exactly. And again, I'm adding a lot of concepts here, but you can even go further and you could lock this. So for example, if you wanted to lock down, if those of you who are familiar with block blocking that prevent people from moving and messing with things, you could lock down the media. You could even preload the media and text, lock down so it would prevent people from moving the heading and that sort of thing. So actually, I need to lock these, but why can I not lock this? I'm going to need to look into that, but technically you should be able to lock this. Oh, I wasn't scrolling. Okay, I bet. So you could preload this all where everything was locked so that a user couldn't change things around. So anyway, I don't want to go too far into block blocking, but there's a lot of potential here, not only for additional types of blocks that you want to provide variations for, but you can also do things like this where you're preloading specific content. All right, so we have five minutes left. I feel like I could talk for another hour, but let's go through some questions here. Yeah, we kind of have to go back a little bit. Did you talk about what style attributes are supported with this? I did not. So what we're going to do here is we come over to the block editor handbook. There is, see here, there's the theme.json reference, and I believe we want to do the v2 living reference. So here you can see, I'll drop the link. This is a great resource. So this will give you, this will give you all the style attributes that are available. Some blocks have custom attributes as well. So for example, you can see that media and text, for example, media position is an attribute of the media and text block. It's a custom attribute. It's not going to be represented in theme.json. So not everything that's in theme.json is represented in every block, and there are some attributes in blocks that are not in theme.json. So if you're trying to build a variation for a block, what I like to do is literally just come in here into the block, start messing around, building what I want, come over to the code editor, and see what's being applied, and then you can apply that in attribute form. I know that's not the most, maybe not the best approach, but it's an approach that I find quite successful. When it comes to theme.json, this living reference is really handy because it tells you, okay, border, I got color, radius, style, width, shadow, once it comes, you'll have these options, color, all these different options as well. So a good resource as well for that. Are there benefits to block variations over block patterns? Yes. So block patterns are fantastic, and you can do a ton of block patterns. Block variations, you can set them up so that a user doesn't really know that they're using variations. Variations are a much more technical tool, and they're really good when you're building things for clients or building things for users where you really want to kind of curate that editing. They don't even have to go and add a pattern. It's already kind of done for them. I'm going to share another fantastic article, which I am a big fan of. If you build sites for clients and you haven't checked this out, I encourage you to do so. It's an article called curating the editor experience. It's different ways that you could modify the block editing experience to better suit your needs, and variations are a great use case for that. Back to my example of, let's say you have a custom post site for books, that search bar, the search bar in WordPress, we come over here, I'm going to search for search. It just says search, but you could register a custom block type that says, book search. So your user, they're adding something to the page, and they say, oh, I need to search for books. They come over here to blocks and they type in books, it's right there. They don't need to know that that's a variation of the search bar, the normal search block. It's the search block that they want because it searches for books. So it's a way to kind of modify the experience without the user really knowing it, in a bit more of an intuitive way rather than adding a pattern. Variations are much more technical. I would go patterns and block styles are very similar. Block variations are a bit more of a technical layer. All right, Patrick. Yes. I'm not prepared to answer that question, but yes. So for example, if you're in, Patrick's question is, when you create variations for a block, is there a way to show those variations as options when inserting the block, like the row block? There is, again, I'm sorry, I don't know offhand, but for example, you can see here, for the row block, you can also switch between the different variations right in this little top panel. Also, if you do a group block, you get the little placeholder that allows you to choose between the two. If you check out the variations, my apologies for clicking all over the place. If you're creating your own custom blocks and you want to create variations for that, where are we? Oh, there we go. There's a lot of, I think that that will be covered here. Yeah, I don't want to scramble looking for it right now, but there are ways to do that, so you can showcase a lot of change between the different variations. You have the link from WP Engine. Do you want that one? No, we can leave that one off. It's basically the rehash of what we've already talked about. Actually, throw it in there. It's another article just on how to implement block variations. I think it actually covers the example of the custom post type and searching and the search block. Can't hurt to have more examples. Yes. And so these are asking, so custom block attributes are usable for variations. 100%. I know we're over time, but I do want to hammer that in because, all right, I'm going to end it here, but at least if you want to stick around, I'll show you an example using my own plugin. I don't want to hawk my own plugin on our recorded session, but I will go through that in a second. But we're at time here, so hopefully you all got something out of this rambling conversation around blocks, thousand block variations. Two very powerful tools for creating unique interfaces within WordPress. So thank you so much for attending another Builder Basics. Thank you, Laura, for co-hosting. I will see you on future sessions. I hope you all have a wonderful day.