 Okay, so we're recording, we are live. Welcome again, everybody. As mentioned earlier, this might be a slightly shorter session than usual. It might be a slightly quieter session than usual. I had to move the time of the session unfortunately last minute. So I apologize for anybody who would usually be here who has to miss out today. But as always, while you're joining and if you would like to code along with me today, please do feel free to get the plugin installed. I will copy the plugin URL into the chat while I introduce myself. I'm seeing three names that I know have been to these workshops before. So this is all information you do already know about me. So I apologize if this is boring. But my name is Jonathan. I'm from Cape Town, South Africa. I'm an ex developer to encode instructor. And I now work at Automatic and I run workshops and create tutorials and listen plans and all kinds of other things. Welcome, Michelle. Michelle's from Maryland. Whereabouts is Maryland in the States, Michelle? I don't know the US that well. It's right outside of Washington DC, about 15 miles where I live in Rome. I'm from Frankfurt. Okay. So today we're gonna continue our series of coding blocks without using React or at least without using JSX and the bold steps. We are using React under the hood, but we're not using it in our code specifically. A couple of announcements as always before we get started. First of all, again, welcome to everybody here. We are presenting in focus mode. Please do consider enabling your video if you would like to in Zoom. You are welcome to ask questions and you are welcome to post them in the chat or unmute to ask questions. The only requirement or the only thing that I ask is that if your question is not specifically related to what we're doing on screen at the time, if you could just keep it for the breaks that we have. Then as always, if you haven't already, please do consider taking the Learn WordPress Learner Survey. If you're going to be coding along with me today, please make sure to install the plugin. This is version four of the plugin that we've been working on. So it contains all of the code that we had worked with in the last few sessions. If I'm going too fast, please let me know. And for those who want to watch this afterwards, we will be posting this to WordPress TV probably during the course of the day tomorrow. It sounds to me like my voice is a bit croaky. I'm not sure. So if you can't hear me, please let me know. I will try and make sure to hydrate and make sure that you're able to hear me. Our learning outcomes today. So first, we just want to review the current blocker and just go over everything we've done so far. Then I'd like to introduce you to something called the block schema. Schema is something that you can use in JSON objects to also complete some of the settings in the JSON file. And it's something that is spoken of it quite about when it comes to block themes and using the block theme schema to set up your settings and your styles. But it's not something that's really written about much in block development, but it can be very useful. So I want to just introduce you to that and show you how that works. Then we're going to have a look at block supports and what that means and how that works. And then we're going to add some block supports to the current block, specifically via the block.json file. So we're not going to be writing any JavaScript code today besides adding big fields to a JSON object. Specifically our objectives, we're going to add the schema key and learn how to use it. We're going to add support for block colors. So specifically the background color and the text color. Then we're going to be adding support for block padding. And essentially what we're going to be doing there is replacing the custom CSS that we currently have in place and making it possible for the user to edit the padding, the background color and the text color. And then I'm going to show you how to set defaults block support settings. And specifically we're going to set a default block background color. So this is a way that you can create your block in a certain way using block supports, using the block supports defaults, but then allow your users to make changes if they would like to. You'll also be able to set defaults and not allow users to make changes and we'll dive into that as well. That idea just popped into my head. So hopefully it works the way I expected to. I haven't actually tested it yet. So we'll see how that goes. Okay, so hopefully everybody is ready. And if you go into code along with me, you've got everything set up. And we can get cracking. So what I would like to do is just go back to the tutorial that we've been following. So all of the code that we've been following to this point in time I'm just gonna scroll up to the top here has been in the block editor handbook which you can access directly from the WordPress developer resources which is at developer.wordpress.org. If you scroll down halfway down the page there's a whole bunch of options there and the third option is both blocks that takes you right through to the block editor handbook. Then the how to guides we've been following the blocks how to guide specifically. So if we have a look at all the headings there we started with the basic block then we added the style sheets then we did the attributes and the editable fields. Then we looked at block controls last week and this week we're gonna be looking at blocks ports. This is probably going to be the last workshop in this current series around building blocks without using React. Just because next week is my last week at work and next week I would like to do a review session where we recover, we just go over everything and we basically build the block from scratch again. So I'll be going a little bit faster we'll be reviewing everything just reminding ourselves everything works. I think it'll be a nice way to kind of end off my workshops for the year just to kind of rebuild it all from scratch and just kind of review everything. And then in the new year I'll probably be looking at the creating of dynamic blocks options block supports and dynamic blocks. We'll skip over WPCLI because that's not specific to what we're doing possibly looking at nested blocks and a few other things that I would like to cover. So that'll be in the new year and once we understand and we might also look at extending blocks specifically in a non-JSX environment because it would be good to understand how to do that. So I'll probably do another session of workshops around that but we're gonna end off this year with block supports today and then a review session next week, Thursday. Okay, so let's start by just reviewing the code that we have so far. So in my WordPress install which I've got somewhere here I have already installed the plugin. No, that's the wrong URL. So I have already installed the JavaScript placing block plugin it's version 004 at the moment. And if we have a look at what that does let's just load it up over here. I'm going to delete some of these posts that we've been playing with so we can start with the brand new one. I can't spell today. And if we add the block there it is over there, load JavaScript block. Okay, much better. So it has the green background from the style sheet which we will look at in a second. It has the white text, it has the padding in place. So that's the block where we ended up at the end of last week. We also ended up in the situation where we were able to set the alignment of the rich text area. So we could set it center or we could set it to a line right or a line left and that's what we worked on last week. And if we preview this in the front end it has a red background and then the alignment settings carry through. So if we change the alignment here and we preview it in the front end the alignment saves and previews it correctly there. So that's what the functionality is at this point. Let's have a look at the code at this point. So the block to JSON file this stores the things like the title, the name any attributes we've set up so we've set up a content attribute. We created an alignment attributes for storing the alignment. For the content attribute we specified that it should read the source of the paragraph tag inside the block and the default value should be hello JavaScript block. The alignment we just set as a string type and we gave it a default of none. It doesn't need a source or a selector because it's not being stored in the block it's got to do with the alignment setting. And then we set the editor script for the actual block code. We set the style sheet for the editor and the style sheet for the front end and that's where the green and the red colors in the padding comes from. Let's have a look at the block codes and the block code. We are using the blocks element and block editor components or packages if you will from the WordPress global, the WP global and we're passing that into our function which is a function that triggers automatically. We then set up an instance of the create element function which will create all our block elements. We're using the rich text components and we're using the use block props hook. Then we also create an instance of block controls and the alignment control which we're using in our plugin in our block, sorry. Then we registered the block type. We passed in the name which was the same name as defined in the block.json. We then have the edit function which contains all the functionality for the editor. We destructed the attributes at the set attributes function because we're using them in our code. We created the block props object because we need that for our root element and then we have these two functions for changing the content of the block and the alignment of the block. So those get called inside of the elements. Then here we have the big return and the return basically outputs all the block codes to the editor. We're wrapping everything in a root div element and we're passing the block props object as the object of that root element. So that sets up the class name and the aria, labels and all those kind of things. And then the children of that root element we've created a few children in the first child is the block controls. So we created a new element of type block controls. We gave it a key. And then inside of that element we've got a nested child of alignment control which is what organizes the alignment. So it basically sets up, let me switch back to brave sets up this alignment control that makes it work. And for that we needed to specify a value which is coming from the alignment attributes in the block to JSON. And we need to specify an on change event handler which calls that on change alignment which receives a new alignment value and updates the alignment attribute with whatever the user selects. That's how that all works. And then finally we have the main element inside of the block which is the rich text element. So it's a paragraph which is a content editable paragraph. It has some styling applied and the styling is specifically using the alignment styling. So it can actually move things around when we make those changes. Its value is the value of content which by default is hello JavaScript block. And then it also has an on change event handler. So when the user changes the content of the content editable paragraph tag it passes that new content back to the function. The function receives that value and updates the content attribute with the new value. All of that gets passed to the save through the saves props and we use that to save the code. So here again, we have the element and the parent div passing in the block props and then the rich text component inside of that. The paragraph tag, the style and the value so that all that gets set. We don't need the block controls in alignment control there because that's only going to be front end rendered on the front end. So we don't need to worry about those things. So that's where we're at. So div element, if you visualize your page you've got a parent div and then the rich text inside of that and you can make changes to it and you can update things. Okay, then if we look at the editor.css and the style.css this is basically just applying some styling to, I don't know why visual code opens it in the same time, there we go, that's better. So the styling basically uses the CSS class that is applied to the block and applies some styling. We specified a background color, text color and padding. And then I didn't do this last week but I also applied a margin of zero to the paragraph itself because the default paragraph inside of a block has some default padding. So I just cleared it out by assigning it a margin of zero. And then in the editor, we did the green background again, color white padding 20. And then again, I'm zeroing out the margin. The only difference here is you'll see that I'm actually applying it to a specific class and that's because that class is applied in the editor. So I need to be very specific about which paragraph I'm putting that zero margin in. I wanted to show you what the block looks like without that zero margin because it wasn't super clear when I was working on this in the last session. So it wasn't really necessary. But if I go back to my browser and I remove block, give it a quick refresh and add it again. If we inspect this, I'm gonna bring my dev tools over. Okay, it's still loading the editor. Oh, that's because it's, why is it still loading that? Probably because I made a mistake in the way I commented it out. So let's do this. So I should take the whole thing out. It's style. I do find sometimes that it doesn't refresh 100% the first time around. So much needs to do it again. So let's remove and let's save the draft and let's do a refresh. And then if we add it, there we go. So I think that the reason I didn't, yeah, here it is. So here you'll see the paragraph is being assigned a margin of one EM but that's actually being overwritten somewhere else. And I think that's why I didn't pick it up last week. So some way there was an update to maybe the plugin or WordPress or whatever between the two sessions. And I actually didn't end up needing those styles. So it was just, it was something that I was planning on showing you but we didn't need it. So I didn't end up doing it anyway. Moving along. Okay. So for today, what I would like to do is I would like to actually make it possible so that the user can change the background color and can change the text color. I would like to ideally set a default color for those things but then allow the user to change them. And the great thing about working with blocks is that we have this thing called block supports. So block supports is basically a way of just enabling or disabling specific functionality on your blocks. And if you think about an existing block, so let's take for example, the, let me make this a little bit smaller here. Let's take the header block for example, this one we've known as a heading. So let's make a header block. So let's say header and let's apply the header block to it, so it's a heading block. Let me, there we go, so that's a heading block. So by default, a core heading block has certain functionality enabled. It has the functionality to be able to align things, left, right, center, whatever the case may be. You can change a heading level from H1, H2, H3, H4, et cetera. You can change the actual alignment of the heading itself versus the root block. You can also do things like change colors. So you can change the text color to green if you wanted to not make it green, let me make it white and make the background it's a dark color so that we can see it. And you can change topography and appearance and all kinds of things. Now it makes sense that those settings, things like color, things like topography, things like dimensions, should be something that you could set to any blocks across the system. And block supports effectively is that way of setting it to any block across the system. So anything that you can apply to existing core blocks, you can also apply to your own custom blocks and you do this via the block support system. Now the thing to notice, so talk to you about to avoid duplicating the same logic over and over in your blocks and to align the behavior of the blocks with the core blocks, you can make use of the different supports properties. And they give you some example code which I don't wanna really dive too much into right now but I wanna have a look at this one over here. So the way that you add block supports to your block is simply to add a new item in your block.json file or if you're passing them in the register block type which is another way to do it and you basically just create the supports key. And then you can add any of the available supports that are available to the block system. So here you'll see, for example, they're adding the color supports specifically the text color and the background color and that'll just enable it for the block. So what we then would like to do and I'm just gonna paste these links into the chat if you would like to open them up yourself. So that's the one. The main thing to read is the block supports documentation. So the block supports documentation is basically just talking about how it works and how you can add supports. And then right at the bottom here, there's a list of all the different things that you can add supports for. So you can add supports for anchors, you can add supports for alignment, you can add supports for a line-wide ARIA label and the list goes on and on and on. So it's a very good idea when you're building blocks to make sure that you read through this block support stock so that you understand, well, what can I just switch on and off and what do I have to code myself? Okay, so what I'd like to show you to start off with is I wanna show you what happens if we add alignment support to our block. Now you might be thinking, okay, we've already got alignment support, we did that last week, we added alignment support to the RichTechs area. But what we actually are going to do today is we're going to add alignment to the parent block and I'm gonna show you how to do that and why it's done in a certain way and what it means for different things. Before we do that, I'm gonna take a quick pause if there are any questions at this point in time about anything that we've gone through while I refresh my throat with a sip of water and then we'll dive into things. Okay, so before we get to supports, I first wanna show you how schema works. Now there's a reason that I'm doing this first. There's a reason I explained what supports is and then I'm jumping back and forth. I want to show you all something very quickly. I'm going to open up a theme. I'm going to open up a block-based theme specifically and I'm going to open up the theme.json for the block theme and then I'm going to open up the block theme or at least the theme developer handbook and I'm going to go and look for the section on block themes and theme.json. And so in the discussion around theme.json and how it works and in the reference and everything else, I don't think it's here. I think it's in the reference. I don't know how to in the theme reference. It talks about, let me just see if it's here. No, it doesn't seem to be there. So let's try the reference. Yeah, we go. Very, and the reason I mentioned this because very early on when I started diving into block theme development, I remember reading about the schema and I remember it saying, it can be very difficult to remember that theme.json settings and properties while you develop. So a JSON scheme was created to help and you can use the schema at this URL. And it's something that we have done workshops on and done tutorials on. And here is how you set up your schema in your theme.json file. You basically give it the schema key. You give it the value to the JSON schema itself and I want to show you what that looks like. It's basically another JSON object. So you can see the formatting is exactly the same. And it's basically a guide. It's a way that the JSON schema works. So it has the definitions. It has the different settings and then it has descriptions about what these things actually do and how they are applied. And if you have the schema set up in your theme.json and you're using, in this case, we're using Visual Code Studio. If you're using any other IDE, you can either enable it by default. It might be enabled by default like it is with VS Code or in PHP Storm, for example, you have to just switch it on. But it will then do auto completing and looking up for you. So for example, if I type in just a double quote there, it actually gives me a list of all the available top level options that I can add. And if I wanted to, for example, add title, I just hit enter and then I can enter my title. If I do the same for version, for example, it'll automatically populate with version two because version two is the latest version. So it's a great way of learning all of the settings that are available and then applying them. And what I realized recently when I was developing this block and when I was setting up block supports is that nowhere in the block developer handbook or the block editor handbook, does it really talk about the fact that there is also a schema available for building blocks. And I actually, if you do a search for the word schema in the handbook, there's no document that takes you to specifically the block.json metadata file and explain how the schema works. The only thing that I did find was in the metadata in block.json document, there is the schema link at the top. So it's available, but there's no way that I could find a heading about how it works or what it does. So I thought it would be, so here it talks about this. Development is improved by using a defined schema definition file. It's very sort of short and there it is but it's not like a top level heading. So I wanted to call it out today and kind of show you how this all works. To me, copy this link through the metadata link. Basically you add this at the top of your block.json file and it'll then give you the same looking up for the different definitions and the same autocomplete as you would for a theme. And so what that means is if I want to add supports, for example, I can come down here and I can, actually that comma needed to be there. And I just create a new top level element and I put it in and I can type S and it'll show me the different options and their supports is an option. So it gives me some ideas to work with and it'll help me add the things that I need to add. So it's a great way to develop and I just wanted to point that out. Okay, any questions on adding the schema to your block.json file? If you are coding along and you're doing it, did it work? Didn't it work? There's only a few of you so I'm only gonna take a quick sip and then we will continue along. I'm running out of water so I'm gonna have to switch to a full-time coffee. Okay, so we don't seem to have questions. Again, if you do post questions, I will keep an eye on the chat. But now we want to add block supports and the first thing that I want to add specifically is alignment support. So the schema does the lookup for me, it gives me all the options and it pops in alignment and I want to set alignment to true. And I want to show you what that means to the block when I set alignment to true. So if we go back to our browser now and the only change that I've made is adding that support setting to the block. I'm gonna remove some of these extra blocks here. Going to remove this block as well. I'm just gonna save it in refresh. And then if we add it, we will see that there's now a new alignment option that has appeared in the toolbar. So by enabling the support, it enables block control for us automatically. This alignment control is different from this alignment control which is the one we added manually last time. So let's have a look at the differences. This alignment control has different options based on both the theme and WordPress itself. And I can align things to the maximum 650 pixel width that the theme specifies or the wide width that the theme specifies. I'll show you where those are in a second. Or I can set it to full width or I can set it to a line left, a line center and a line right. Let's go a line right just to see what that does. And you'll notice that it aligns the entire block, the div and the rich text component included to the right. If I go a line left, for example, it aligns the entire block to the left and makes everything a bit smaller because it's aligning it to the left. So the important thing to understand, and they do mention this in the block supports documentation, so I'm gonna scroll right to the top. Actually, it wasn't here. It's actually in the doc in the hard to guide. So let's go back there. It specifically says here that, wait, hang on, I was here, sorry. I'm trying to find, no, this is not what I want. This is where I wanna be. There we go, okay. In order, here we go. In order for the attribute to get applied to the block, the generated properties get added to the wrapping element of the block. In other words, the root element. They get added to the object and returned from the use block props hook. So in other words, by enabling alignment support, the block props object will receive a new something. And we can actually have a look at that if we want to in the inspector and we might just do it in a second. And so therefore anything that we add as block supports will only be applied to the root element. So that's why when we're changing alignment in the editor, it's moving that root element to right. We can still, so let's set this to, for example, let's set it to the wide width of max 120, which we won't see now because the window is too small. But we can still inside of that block alignment situation, we can still use the rich text alignment which we set up last week and align that left and right and text and center. And we still need all that code for that to work. So by enabling alignment, it doesn't automatically enable it's all nested elements. It only enables it to the root element and that's the important thing to understand. So whatever block supports we add, only get added to the root element. It's a good idea when you're building blocks to not have too many nested elements, to just have maybe one or two nested elements because the minute you add more nested elements, if you want them to do things like alignment or whatever else, you have to apply that code specifically. So it's a good idea to have maybe one root element and maybe one child element inside of your block so that you can make use of all these things without writing too much code. Okay, if you don't need to use these supports and your blocks are doing completely custom functionality, which I have kind of worked on that kind of thing before, then it doesn't matter, then create as many child elements as you want. But I just want you to know that block supports only apply to that wrap elements, in this case, the div. And so whatever you apply will only apply to that div. Okay, so now we've applied alignment, that's great. Now we want to get rid of that CSS code. We want to make it so that we can apply background text and we can apply padding and we can apply text color, sorry, background color, text color and padding. So let's start with the colors. The first thing I'm going to do is I'm going to just remove the styling completely. So I'm actually going to delete the style sheet. I'm going to delete the style at CSS because I'm not going to need it anymore. I'm going to delete the editor CSS because I don't need it anymore. And in my block to JSON, I'm also going to remove the style sheet configuration because I'm not going to need them anymore. And what that's going to give us is a very bland block, which is fine. So let's going to have a look at it, what it looks like. Just save and refresh. And if we add the block now, it's just blank, that's great. If we inspect it, we just want to make sure it does still have the div and then the paragraph inside, which in this case, there it is. There's the root div and there's the paragraph rich text component. So that's all the way we want. So that's perfect. So now we want to apply color support. So if we do a quick search here on this page and we look for color, you'll see here that you can apply various color objects, color options. You can support color background. You can support color gradients. You can support color duotone. There's all kinds of fun things you can do. We want to specifically enable the background color. So the background of the div and then the text color. Now the interesting thing is that you can do this either independently from each other or you can do it as one thing. And by just enabling supports color true, that will enable both background and text. So let's work through all of that and see what that looks like. So if we go and copy that out and pop into supports here and just pop in color true. And then because I'm doing this in my block JSON file, I need to put some quotes around this. There we go, color true. And there's no way that's giving me an error. I might just need to show that's throwing me a warning but that should all work. So let's have a look. So now if we go back to the block and remove it and do a quick reload. Let's move that out of the way. Let's hide that. Now if we add the block, now we can see suddenly in the sidebar we can actually apply colors to this block. So just by selecting anywhere in the block, these options come up and we can say, right, we want to give this a, let's say pink background, which we can do there. And let's say we want to give this a, I don't know, lights. That's the most readable. So let's make it this contrasting color and it'll work and happy days. And there we go. What I also like about this functionality is if I choose specifically, if I choose colors that are difficult to read, it'll actually give me a little warning. It'll say the color combination may be hard for people to read. Try using a brighter background color and or darker text color. And that's very handy because that tells me okay, this is difficult to read. So that's great. So simply by enabling the color support, we have text color and background color automatically set up for us. However, we can enable them independently from each other. So if we go back to Visual Code Studio, we can also, sorry, I won't actually pop back to the documentation. We can also say color background false and color text true, for example, vice versa. So let's go back to the code. So instead of just saying true to both, we can open up a new object and then we can say, right, we want then there, it gives us the option of background, contrast checker, gradients, link and text. So let's just make the background color true, but we leave the text color as the default, which is false. So now if we refresh that, let's remove the block and remove, sorry, remove block and refresh. And now that has the saved. Hang on, let me remove it. I think it's because I'm hitting save. So let's try this again. Or I'm not refreshing properly, one of the two. Okay, so there we go. And now we can set text for some reason, which I might need to set it specifically, explicitly false. So let's go color background true and let's go text false. It's explicitly set it as false. And let's try that again. So there we go. I'm asking me to remove it twice there. That seems weird. But anyway, let's refresh, maybe I'm not clicking things properly. And there's our block and there we go. So there we can only choose the background color because we've explicitly set the text to false. So it looks like what that means is if you enable the color support and you enable background true, it's gonna default to setting color true as false. So you need to specifically say text is false. So we don't change the text color. And now the user can only change the background color to whatever they want and you control the tech color. So this is cool because you could, for example, in your CSS, you could specify the text color as we did previously. And then just allow the user to change the background color or vice versa, you have a specific forced background color and then the user can just apply the text color. So that's how we do that. That's how we change, we add color supports. And this applies for any of the supports options. So whether it's color, whether it's, let's go down here and see what else there is. This is all color related stuff. Custom class name you can specify. You can specify default style picker. You can specify various other things. The other thing that you can also specify is the padding, which we spoke about earlier. And the padding falls under the setting called spacing. So under spacing, you can enable the ability to set a margin and the padding and the block cap, which allows for creating block spacing. So again, you have the option to either set them all true or set some true and some false as you prefer. So let's add support for both padding and margin. Why not? So again, we just go back into the supports object and we create a new option and we can start typing. It'll give us some options there. So we're looking for the spacing option. And then I want to make margin true and I want to make padding true. Sorry, there we go. And I need an extra comment there. So now we've added background. Let's make text true as well, just so we enable all these things, margin and padding true. And there we go. And then we go back to our block. So let us remove this. There we go. Let's save and refresh. And now if we add the block, now there's all kinds of fun things we can do. So we can change the text color. So let's make the background color a light color. And actually let's make the background color dark color and we'll make the text color a light color so that it's nice readable. There we go. So we went with the red background. Actually, let's go with the red background. Why not? And what's also great about this is you can apply custom color. So if you click on, and this is the default color picker in the block editor, if you click on the color, you can then specify your own color if you want to. You can go and do all kinds of fun things. Sorry, I clicked off there. Then you've got the dimensions option. So purely because we enabled padding and margin, we have this new dimensions thing. We click on the plus and we can enable padding and it's enabled margins as well. So let's do that. There we go, margins is enabled. And now we can start going crazy with padding and margins. So the padding option gives us either the slider from the values are from one to six. And this slider is specifically set by the theme itself. I'll show you where this code for the theme is in a second. And it's basically presets that we're using to specify padding and margin. So we could go crazy if we want. We can give it a nice big margin if we want. Notice that the margin is around the div whereas the padding is internal to the div. So you can really go crazy if you want to. But also you can specify specific values. So if we wanted to specifically specify pixels, we can click on the size preset, sorry, not on size preset, it's the custom size button which toggles the custom size. And then we can then specifically say, give it 20 pixels of padding or give it 30 pixels of padding or whatever the case may be. And for the margin, we can do the same thing. So we can say, maybe we don't want any margin. We can also unlink the size option and we can say give it top and bottom margin but not left and right margin or give it left and right margin but not top and bottom margin. And this is all default block editor functionality. So just because we've enabled these supports, all of this default functionality comes along with it which I think is very, very cool. Okay. Quickly just want to show you where these values for the padding comes from. So if you have a look at the block theme that's currently installed, which is 2023, I think. Let me just verify that. Yeah, 2023. So in 2023 theme, there is a theme JSON file which specifies all of these spacing options. And if we scroll down and have a look at the spacing, custom spacing, no, it's not that here, we got spacing units, that one. Actually, no, it's not the 2023 theme. It's the WordPress core theme JSON. So here's a little interesting tip. WordPress core ships with a default theme JSON which is in the WP includes folder and it's just called theme.json. And I cannot find it now because I'm not scrolling down far enough. There it is. And it sets up a bunch of default values. So it sets up a bunch of default colors and default spacing and various other things. And it has all the default color palette and my favorite pale pink is in here somewhere. But then it also has the spacing, I think it's in here. Yeah, here we go, here's the spacing scale, the increment, the steps and all that kind of stuff. So that's what's setting all of that up. So you can define that in your theme and then it will be applied to the block editor wherever you go. Or you can, as we saw earlier, you can just, the users or yourself can just switch over to using the custom stuff and you can go crazy, you really can. And what I really like about that is how just by adding three or four lines of code in your block.json file, all of this functionality is unlocked for you and you can really do as much as you want or as little as you want with it. Okay, I'm gonna grab another quick pause. I have only allowed for an hour today because I have to go off early, but we weren't covering much today. There's one more thing I wanna show you today before we wrap up. And that's how to set default values for these custom things. Okay, so again in the, let's go back to the color options that we were looking at. Here we go. Let's go to the background color, for example. There was a color link, color gradients. Okay, yeah, color background. So here in the section on color background, it says when the block declare support for color background, the attributes definition is extended to include two new attributes, background color and style. The background color attributes is an attribute of string type with no default assigned. When a user chooses from the preset background colors, the preset slug is stored in the background attribute. And when I say slug, I mean the slug defined in either the theme JSON or the core theme JSON. For example, pale pink slug is this pale pink, pale hyphen pink. Background color presets are sorts from the editor color palette theme support, which we discussed. The block can apply a default preset background color by specifying its own attribute. So for example, if we create an attribute of background color type string and then give it a default, we can tell the block by default when you load have this background color. So let me show you what that looks like. So if I go back into my block, into my block.json and inside of the attributes object, I create a new attribute and I call it background color. And I'm just gonna need to put this in quotes because it's in block JSON. And then I'm going to give it a type of string, which it already is. And then I'm going to give it a default value. Now the defaults I specify here is based on the default color palette or any color palette specified either by WordPress core or by the theme.json file. So one way you can get these is by digging into the theme.json files. The other way you can get it is very quickly just to go over to the editor. And if you pop on over to the editor and you open up the global styles interface, which if you've worked with the block themes a little bit or you've seen any of my block theme workshops, you'll know that the global styles interface is just a little button here. And then you can go into the colors section. And these are the color palettes that ship with either the WordPress core defaults. So these are all the default color palettes. And then these are the theme specific ones. And there's pale pink, for example. And if you click on the little color options tab and you say edits colors, you can go and click on pale pink and it opens up a color and you can specify what pale pink is. And if you were to apply this to something, so let's say we're going to apply this to the section over here. Right, let me get that one here. Show more settings. Let's apply a specific color here. So let's go over the pale pink color. There we go. You will see that if we switched to the coded you'll see that pale pink is being used. There it is pale hyphen pink. Now, unfortunately, these default color slugs and your theme color slugs are not logged anywhere. They're not, you can't go and search them. So it's a good idea to understand where to look for them. As I said earlier, the core theme JSON file is in the WP includes folder. And then your themes theme JSON file will be in the root of the theme itself. So there's pale pink, for example, in the core one. And if we have a look at the 2023 theme.json and we look for the color palette, there it is. There's all the color palettes options in the core theme. So there's a base like we can use or contrast or primary or whatever the case is. So I'm going to stick with pale pink because I just like that color. So we can specify that here and we can say pale pink. And now when we add the block it's going to have a default background color of pale pink. So let me show you what that looks like. So let me close this and we'll go back to the post and we'll remove it, just do a quick save. There we go. And let's add the block. And there we go. Pale pink is the default. So you can do the same default anything. You can do a default text color if you like. You can do the default spacing if you want, the padding that we've done. You can do any of those defaults as we go through. What I would like to try and do today is try and wanna see if we can actually set the default color but then disable the user interface, meaning that is the color of the background but the user can't change it. So what I want to do is I wanna specify this to be false. So in other words, I always want it to be pale pink because that's the color I want the block to be wherever it goes. I don't want the user to be able to change it but I do want them to be able to change, for example the padding, the margin or the text color. So let's see if that, I don't know if this works. It's an idea that I just thought of before we started today. So let's see, it should work, but let's see if it does. So we've done that, let's add our block and there we go. So the pale pink color is applied because that's the default color because that attribute is available but the user can only change the text color. And so this is a nice way to control how your block works if you specifically wanted to be a specific background color but you want the user to change other parts of it. They can still change the alignment if they want and we could then specify on or off however we want to do that. And then to make sure this all works let's just preview this. Let's actually do some alignment stuff. So let's make it the wide width alignment. Let's align this in the middle. Let's change the text color to something. There we go, that's a bit hard to read apparently. Let's make it a bit, I don't want it perfectly black. Maybe the gray color, no the gray color is not great. What about the red? No. My color selections are not ideal. So we'll have to probably stick with the black anyway. That's fine. And let's preview that on the front end. And there we go, all our changes have been saved. It's set to the wide width, it's center aligned. It's got the background color. We have full control over that block. Cool, any questions on all of that? Any questions on how we set up supports? How we enable or disable them? Anything else that you've thought of while we're working through this? Do let me know now, I just want to check. Yeah, we've covered everything we wanted to cover today. So if you don't have questions, we can all go off early and we can enjoy our week. Okay, so that is block supports that are block supports works. There are a host of supports available in the documentation. I do recommend that if you're going to be building blocks and this works whether you're building, as you saw, we didn't write any JavaScript code today. So whether you're building blocks using React or not using React, this is all the same. It's all specified in attributes or at least in the metadata, which you can do in the block.json file. And you literally, you can just turn things on or off. I do recommend reading through the entire support stock to understand what you can and can't do. And just remember when you are applying these things, they are being applied to the root element. So your alignment, your colors, your text, whatever it's being applied to that root div or whatever your main element is, your primary element, your primary container. So if you're, for example, doing a line, but you want to align the rich text, then you have to go the way we went when you're writing the code yourself and making sure those things are happening. Okay, well, thank you all for joining me today. This was a lot shorter than usual because it was a lot smaller piece of information. I also apologize for my mistakes in the beginning there. I had to, normally I have Tuesday to do the live stream and then Wednesday to prepare. And then Thursday I present. I had to do the live stream on Wednesday and I had to prepare within four hours this morning. So that's why we had some bugs. I will fix the download links so that when you download the block, if you're watching the workshop afterwards, it will be the right version of the block. All of this code, as always, is available on the GitHub repository. Currently, the current step is still out as a branch. I haven't merged it into the main code yet because I clearly had bugs, but I'll make sure that gets done either today or tomorrow so that you can download all of that and work through it. Otherwise, I really don't know if I will be able to execute what I get at doing. Well, that's great. Hopefully this code, hopefully, Michelle, if you're able to download this code and just kind of work through the different steps, what I would suggest doing once this is wrapped up because there'll be an O5, a block supports folder, is to download the whole repository if you can or just download the whole zip file or whatever and then copy the code from the different steps into your block and see what it does and then read through the code and see how it's working and then do the next one and then do the next one. That's why I put all these different folders together. So hopefully that'll get you through that. For those who are watching this afterwards, I apologize if you couldn't make it today because I had to shift things around. But again, thank you all for joining me to enjoy the rest of your week and the rest of your weekend. And I will see you for my last workshop of the year, next week.