 Okay, we are recording, we are live. Welcome everybody. I am Jonathan from Cape Town and I'll be presenting this live coding session today. With me today, I have Thelma, who's joining us. Where are you joining us from, Thelma? Sorry, I was muted. Yeah, thank you for all. Hari in Zimbabwe, Southern part of Africa. Awesome, awesome. And then I also have Alvaro with us today. Please introduce yourself, Alvaro. Hi, I'm Alvaro, I'm in Spain, near Valencia. Awesome. And then I'm going to just go around and mention everybody's names that I'm seeing here. Please introduce yourself. So first I've got Joshua. Do you want to let us know where you're from? Hi, I'm Joshua from India, Chennai, India. Yes. Awesome, welcome, Joshua. They're happy to be on the... Yeah. Cool, I've got Kadano. Am I pronouncing your name correctly there? Yes, hi, James, actually. Okay. And where are you joining us from, James? Las Vegas, Nevada. Awesome, I love your office space there. Then we've got Kirsten, if you would like to introduce yourself. You don't have to, but you're welcome to if you want to. If you want to unmute and introduce yourself. We've also got Shabam with us. We've got Aki and we've got Steven. So if anybody wants to unmute, they're welcome to just introduce themselves quickly. Hi, I'm from Rihanna, India. Hi there, welcome. Okay, I think that's everybody. You're welcome to continue introducing yourselves as we go. So today's session, we're going to be reviewing this creating a block without using JSX because we've been working on the last four weeks. This is being recorded. So I do request that we keep it family friendly. If you are going to chat, if you are going to discuss things, you're welcome to be chatty today. If you see something that's interesting or you want to ask me a question, you're welcome to do that. And you're welcome to enable your video and your audio if you would like to. Just a few announcements very quickly. As always, please do consider taking the WordPress learner survey. If you're going to code along with me today, make sure you've got your local WordPress install locked and loaded and your code editor locked and loaded. Or if you're watching this afterwards on WordPress TV, we will be posting this on WordPress TV. I'm hoping to post it today or tomorrow. I'm actually on leave as from tomorrow, but I'll probably sign in just to post this quickly because it's nice to get it out before I go off. And then over the course of the holiday, whatever, if you want to go and do some more learn WordPress things, you can go to learn.wordpress.org. Okay, that's the end of the slides. We'll take, actually I need, I still need the slides because my browser's in the slides. So let me find my browser. There it is. That's not going to work. So I've got a very default WordPress install setup. I've got going to enable, let me just check. I've got no plugins except create block theme. I'm going to disable that just that there's no plugins in the way. And I'm going to enable the block based theme. That's a perfectly decent theme. And then I'm just going to make sure that I have a post to work with. Got the hello world post. So that's cool. We can use that. Then whenever I'm developing a block, I always like to have a block editor handbook open. You'll see it's in my history. It's saved there in my browser history, as always. So I always keep that open and handy. And the one thing that I like to do is I like to keep the blocks how to guide handy because that's the one that covers kind of all the things we're going to be talking through, the basic block stuff that it has all the code examples. If you're somebody who can code without looking at documentation, I bow down to you. I'm not that kind of person. I need to copy and paste documentation all over the place. Although with some of the AI things that we're seeing these days, like chat GPT and code pilots, maybe we could do it without documentation. So the block that we're going to be building today, I'm going to try and expand on the block that I've built over the course of the last four sessions. The block that we built was a basic div that had a rich text inside of it. I'm going to build that to begin with. And if we have time, I'm going to try and add some other block elements to it. So I'm going to try and add a header element. And then I was thinking of also adding an image element and trying to style the header and the text so that they're kind of overlaid. It's almost like a cover block. I haven't tested this. So if we run out of time, we run out of time and maybe we'll finish it up in the new year. But I'm hoping that an hour and a half is enough time to do it. OK, so the first thing that I always like to do when I'm building my block is I like to do the block.json file, which is the first step that the step by guide recommends. So we could just copy out that that code and then I'm going to go over to my PHP store editor and I'm going to create a new directory. And I'm going to call it WP learn. Let's call it cover block just for the sake of being different. If you're using something like WPCI, you can skip all the block from scratch. There's multiple ways to do it. Then I'm going to create my block.json file. And I'm just going to paste the example code from the documentation. And then we'll do some changes. So we'll do WP learn cover block. And you will see this today. I don't touch type very well at all. I've been I've been working with a computer keyboard for going on 30 years now. And I've never officially learned to touch type. So I don't know how I've managed so far. And we'll say WP learn. And then let's say cover block. We go. I'll leave the category as it is. Let's change the icon. So let's go and find the dash icons. Let's pick one. I want something interesting. Let's do the, let's do one of the database ones. Yeah, why not? So database dash icons database. It should just be database as far as I know. Yes, pretty sure it's just database. And then the editor script currently it points to the file build index directory. This is usually if you're using JSX code, I'm not going to put my block code in the build folder. I'm going to put it in a folder called block. So I'm going to do that there. I'm not going to change the path to block of there. I'm going to actually move my block JS on into my block directory. And then like that means I can just point all of my files to the local location. So it'll look like that. And I like doing this. I like sort of keeping all my block code in a folder if I'm writing it from scratch, because it's easy to find where it is. I like to keep all my, so if I've got PHP code, I like to have a PHP folder and then all my classes sit in there. And then in the root of the plugin, I'll just have the main plugin file, which loads everything up. So that's just the way I tend to do that. Okay, so that's the block JSON. That's the basics of what we need now. We're going to add attributes and things later on. For now, we also need the PHP file that will register that for us. So it's this code here. And I'm going to grab that out just as it is. Actually, let's get the name as well because we're going to need that for the PHP file. And I'm going to create the root PHP file and we'll call it WP learn other block. And we can just paste that text from there in. So there we go. And then we'll need to give it a name, WP learn other block. Just realized I didn't even have the chat window open. So hopefully Alvaro and Thelma are keeping an eye on that for me. It seems everybody's fine with what we're doing so far. And then this is a personal thing that I like to do. I like to keep my action calls at the top of the function because I find it easier to read. So when I look at this code, I can see, okay, the hook being hooked into is the net hook and that's the function being called and the function being called is below that. So I'm going to make this WP learn cover block register block, let's make it register. I like descriptive function names but I don't like really long function names. So we'll keep it simple and short and there we go. And now here we'd be doing the register block type. This path that we pass in here, this can either be an array of details that are covered in the blocked adjacent file or it can be the path to a blocked adjacent file. And our blocked adjacent is sitting inside the block directory. So we need to update this path here to point to that. So that the double underscore dir, double underscore constant is a PHP constant that means the current directory that this file, this block file is sitting in. So that's the WP learn cover block directory. So all we need to do is we need to append the block directory to it. And we'll WordPress will then do is WordPress will pick up, check whether that directory has a block.json. If it does, it'll pick it up and it'll register the block. So that's all we need there. And the last file we need just to make this all work is an actual file to handle the block code. Inside the block directory, I'm going to create this index.js file. PHP storm is nice because it gives you options to create the different kinds of files which is why I like using it. And then we need to do some block coding here. So again, I'm just going to copy this out of the documentation as it is. And I'm just going to grab this code here and pop it in there. And then we need to make sure that we use the name in that block registration. And I'm just going to leave the rest as it is just so we can make sure it's all working. The one thing that I didn't like about this code personally is I don't like this EL function here. I just think that later on when you're working with this block, if you see all these ELs, you might forget what it relates to and you have to go back up and have a look at the code. So I'm going to change this site here. I'm going to just call it, make it create element. So it's, when I'm reading this code later on, if I'm, you know, thousands of lines down and I see create element, I know what it's doing. That's a personal thing that I like to do to make things a bit more readable. So they have create element there and create element there. Now to me, that looks a lot cleaner, a lot easier. We're pulling in the blocks object, we're pulling in the elements object, which is great because we use those blocks we're using for register block type. That's cool. And I think that's everything we need. So let's test this code and let's see if it works. So in my WordPress install, there's my cover block. Okay, let's activate it. Register block handle was called incorrectly. Okay, as it follows, it is a script was defined. WP learn, okay, WP learn cover block, definition is missing. Interesting. So I've done something wrong somewhere. I love it when errors happen, then we can fix them. WP learn cover block, let's see what I've done here. That is pointing in the right location. That is the name. I wonder why it has a problem with that. Function register block script handle was called incorrectly. The asset file for the editor script find in WP learn cover block definition is missing. Interesting. I wonder, let's have a look at the docs. This is why you should never do live coding folks. See things go wrong. You don't know what's gonna happen. See there they pointed to the block chart. Oh, this is the root of that. Just have a look at this file colon dot. I've done something wrong here. Yes, I think I have a cycle through everything. No, all right. Wait, wait, wait. No, that is index. That is pointing to the right place. I wonder if, if I rename this block whether it makes a difference, that could be interesting. So that's the block to JSON. It's pointing to the block to JSON. This is location here. This is calling register block type and passing in the directory and the path to block. Is that JSON? Say again. Should that be defined as block.js? No, because I'm pretty sure that's just the directory. So I think WordPress is clever enough to actually pick up, let me have a look here. It actually picks up if it is a file or at least the directory and then it loads the block from metadata based on the block type. And then that actually looks for in the code it looks for if it's a file or folder and then looks for the block.json. So it should be clever enough to pick up that that's all working. But let's see if I refresh here. So let's deactivate this and then let's activate it again. Interesting. I said file for editor script defined. Block definitions. Okay, so let's go back a step. What I'm gonna do is I'm gonna put it in the root. So I'm gonna move block.js there. See, right now my brain is going, make this live coding thing. Wasn't such a great idea. And let's take this out. Let's make sure this works. So that's that. And that's that. Okay, let's deactivate. And activate. No, there's something else that I've done wrong somewhere because that should have worked. Okay, let's have a look here. Register block type. Learn cover block register, register block type. Passing the code. Let's kind of find this. And cover block, editor script. Hmm, okay. So usually this is where I go and look for some code that I've written before. So what I, this is one of the reasons why I always stick all my code in a repository somewhere. So what I'm gonna do is I'm gonna have a look at the original version of this and see what we did. So let's go back to here, the basic block. And I wonder if it's the block asset file that's missing. Might be the block asset file that's missing. Look at it and say, yes, it might be the block asset file that's causing the problem. I've got about that. Okay, let's copy that. What was block.asset.php? Let's see if that fixes it. That fixed it. Okay, so that was the problem. I'd forgotten to add the asset file, the block.asset.php file, which contains all the dependencies. That's very interesting. That error message didn't make sense though. Alvaro, that's something to think about because the error message was saying something wasn't working as if I'd done everything correctly but it wasn't registered correctly. But it was because there was, the asset files were missing. So maybe we can, this is one. So folks, for those of you in this conversation, this is one of the reasons why I love it, why either Alvaro, Catherine or Thelma are in these chats because they work on support all the time. So when we find these cool things, they can go, maybe that's something we should look at log in. So Alvaro, we'll have a chat about that in a year. Yeah, we'll take it out of the actual error message. Yeah, the error message didn't make sense to me but I understand that there was an error but the error message didn't make sense. And I've seen these a few times when building blocks where the message is related to something else. In fact, the live stream that I did on Tuesday was a friend of mine was developing blocks and he was getting a message saying the title needed a, the title shouldn't have an uppercase in the string but it didn't have an uppercase in the string and it was also because he wasn't registering things correctly. So my guess is that the checks that are happening are there's no check for all the files loaded properly first and then it says, oh, this is missing or that is missing and that probably makes sense because it's JavaScript. So it's only firing on the JavaScript side, not on the PHP side. So it can't check if those files are there yet, if you think about it that way. So then it gets to the part where it processes the JSON files and the attributes and then it picks up errors in those because those are there because it's not being registered. So yeah, that's interesting. That was fun. I enjoyed that. No, I didn't, it was stressful as anything. Okay, so let's move. So let's put our block asset back in the block and the block to JS there as well and the block to JSON as well because that's where I wanted today and then I can rename this back to what it was and just make sure it does work. So let us go back here and let's deactivate that and then let's reactivate it. Okay, it's working, excellent. So it's because I was missing those assets. So these are basically just the dependencies, the polyfalls and all that that you need when you're developing without using React. Okay, I'm gonna take a break and calm my nerves and sip some water. If anybody wants to see any of the code on screen if they're coding along, let me know. Actually just gonna increase the font size a little bit. Here we go. Thank you. Yeah, that's the one thing with PHP Stormy. You haven't got that cool control plus like you do in VS Code. Okay, so we've got our block JSON file which is gonna contain all of our attribute data and all those kind of things. Got our asset file which is telling it what to load. We'll move this over to here because I'm not gonna do that much. Then we've got our PHP registration which we're probably never gonna use again. So I'm actually gonna close that down and then we've got the block to JS. Okay, so the goal today as I say I wanna create the div element. Then I wanna put a rich text inside of it which is what we've done already in the first four sessions. And then I wanna add a header element as well and I wanna make the header element editable with an attribute as well. And then if we have time, I'm gonna add an image as well. So that's the goal today. So the first thing I remember is that we're gonna need use block props and we're going to need the inspector controls and the text controls and all of those things. So I'm gonna jump past the styling step because I'm not worrying about styling today. I'm going to jump straight over to the attributes because I think the attributes is where block props gets included. Yes, so here we go. Block props comes from block editor. Block editor needs to be added to the list. So let's start by doing that. And this is probably a good thing to do if you're building blocks this way. It's to pretty much, let me just see what order they've got them in, blocks, editor, then element. It's to pretty much load the block editor with all of your block plugins because you're probably gonna need to use it. So it's blocks, block editor and element and then we just need to add. Pretty sure it's just WP, block editor. That was code pilot suggesting that. So hopefully it's right. So that's that and that's there. And then with block editor, we can get the block props which we can do up here. And I discovered something interesting recently that I wanted to hopefully use today. And that's the fact that you can actually pass an object with a custom class name into used block props. So we might try it later, maybe not today. But anyway, so that's that and let's pass block props into there and into there. I just realized I haven't tested this block. I'm just assuming it's gonna work. So we'll test it in a second. We'll make the top level element a div and then I want to add rich text. So that is there. So that's the rich text component that we've already looked at. And then that we can add as a child of the div. And this is the point where I like to start spacing these things out a little bit so I can see what I'm doing with them. Rich text needs to have a value and it needs to have an unchanged. So here we go, rich text and we can object to sign but we don't wanna do that because we're not doing it on that one. So I'm just gonna grab this object on rich text. Oh, that's right. I need to create an element or rich text. So again, it's create element pass in rich text. Yes, it's better. I will say one thing. This is where the JSX code is a lot easier to read because it's just like HTML code. But this is now, so there's my nested, my top level element, then my nested rich text element. Give it a tag name of P, that's great. I'm gonna use unchanged content. Now I wanna make this unchanged text content because later on I want to have the same thing for the header element. We could leave it as, let's leave it for content now. We can always refactor later. The value will be content. It doesn't have any children. So that's fine. And I'm pedantic about my formatting. So that needs to go over there. We need to create the unchanged function. So let's do that now. And let's see. So copilot is installed and enabled on my PHP storm. Let's see if copilot is clever. Hey, I love that. It just picks up that I wanna do our unchanged content. It knows that I'm gonna expect a new content. It does set attributes content for me. I love that. But I'm gonna need to get set attributes from the blocks prop. So let us distract that now. Let's get the attributes as well and set attributes while we're there. If any of this, if you haven't joined any of my previous sessions and none of this makes sense, you're welcome to ask me questions about it now and I'll do my best to answer while I'm coding. But basically the attributes get passed from the block.json and the set attributes as a function that allows you to update them. So now we need the content attribute to be defined. In the block.json, we can create those. I like to do them just underneath the name and then it's content. And then I can never remember the different parameters. So this is where I always check the code. Here we go. Type string source selector, there we go. Type string, type string source HTML selector P. Okay. So type is a string. Source selector and I just realized something. I forgot to add the schema here, which would make my life much easier. So let me add the schema quickly. So the schema is basically a way that JSON objects you can do lookups autocomplete. And it's kind of like co-pilot with very focused. And it's something that don't talk too much about in the cartoons, but they do talk about it in some of these, there it is there. That's the schema. This is, I just want to find the reference guide where this exists. It's the block API reference made today. So there we go. So this is something that is a personal thing that I want to do in the new year. As I want to improve the section on the, on the handbook documentation where it talks about the schema because it's very kind of hidden away. Talks about the benefits of using the metadata file, but it doesn't have a section on the schema. Whereas the theme developer handbook does. So for those of you watching, I'll show you what that looks like quickly. Documentation. So if you go to theme JSON, there is a, I think it's here. I know it's at this one. It is, this is, no, no, this is the one in the theme handbook, the one that I'm looking for. Here, the theme JSON reference. So in the theme JSON reference, the current one, which is version two, the schema there, it's like the second item on the page. So it's the first thing they start talking about. And I would love to see that for the block editor because it's super useful. So anyway, that's just side note for anybody listening who works in sport. Okay, so let's grab that art. And this will make my life a lot easier. Okay. And then the other one is the selector. Yeah, there we go, selector. And I was actually, oh, okay. So that's the content attributes. So that will then work with the content. And then this will be attributes, content. Okay. So that's the content attribute. So that will then work with the content. Content, yeah, that should work. The interesting thing is you can also do something like this. You can go bar content equals attribute that way. Or there's another thing that you can do, but you can go something like, it's also an object destructuring. You can do an attribute, but a contract member works not something like content equals attributes or something. But I can't remember it now. Anyway, I'll just leave it like that. Okay. So that should all work. Now we need to update the save. So let's space this out a little bit better. I'm going to scroll down a bit here. I'm not going to lie. I love the fact that the example code is in, I'm thinking Spanish. I love that. I love that. We need a dev, passing block props. And we need the rich text content. With just the value. Content. And I think it just needs the value. And we need the attributes again. So I'm going to destruct these over here. No. There we go. Okay. So that should work. And now might be a good time to test this. To make sure it's all working. Okay. Let's have a look in the editor. So let's go to posts. As I said, today is very relaxed. So I've nowhere near as formal and organized and planned as I usually am. So feel free to interject at any time. What did we call it? We call it to cover. Oh, it's not coming up for some reason. Did I enable it? It is. Okay. So it looks like I've done something wrong. Let's see. Yeah. Something wrong somewhere because it's not coming up. Let me check my. Console. Hmm. Invalid hook call. Okay. So that's probably got to do with use block props. Invalid hook call. Hooks can only be called inside of the body of a function component. Okay. Oh, that's probably because I've done this in the wrong place. I can only do that inside here. If I remember correctly. Oh, maybe not. Hmm. Let me check my code again. I'm forgetting something. Yeah. Just have a look. Yeah. Always save your code, folks, because then you can refer back to it one day. I'm doing it at the top of the edit function. That's what I'm doing. That's where it is. So it's used. Okay. I could do this higher up, but I guess not. So it needs to go there. And then again. We have a message from IP. I'm not sure you noticed. Hmm. Destruction may not work. I have actually used it before. So it should work, but we'll find out. I think object destructuring is. Oh, you mean the, I know what you mean. You mean the other syntax I was using. Yes. Yes. I think yes. I do think you're right there. Yes. So you could do general object destructuring in the same way. You could do the other syntax. Yes. That is correct. You are probably very right there. And that's why it didn't work when I coded, but you can do it. In the. As, as the parameters. That's right. Thank you for pointing that out. Okay. Okay. Let's test this. So let us refresh here. So the problem when you code in both styles, you get them all confused. And let's see if we can add it. Hey, there it is. Don't you learn color block? Okay. It doesn't have any text because the attribute doesn't have a value, which is, which is what we expect, but at least it works. If I inspect it, I'll probably see hopefully. Let me get my. I've been open here and let me. Move things around. And there we go. That's got a div, which is perfect. And then it's got the paragraph inside. So that's working. So that's all good. Okay. So now we need to give the attributes a default value. I think it was, if I remember correctly. So let's just make a default value. Hello. WP learn JavaScript. And let us remove that one. And refresh. And the one thing, I think it is possible somewhere, but the one thing I would love to have. So web pack, which is what react users to both. WP learn JavaScript. And that's what we're going to do. And so the best thing to do is to just transpile the code, the web pack dev server has a like a library load option where while you're coding, it builds all the files and then it library loads. And to the best of my knowledge or memory. You don't get that when you're building blocks for WordPress, even if you're going to JSX, and that would be something that would be very cool. I think somebody I know figured out how to do it. Like once the build runs, then it triggers a refresh of the browser that you're using, which is, you know, saves you manually doing it. So let's add WP learn again. And now we should have some text. Yes, we've got some text. Okay. Excellent. Okay. So now what I want to do, so now the effects will be done, like most of what we covered up until this point. What I want to do now is I want to enable the background colors and paddings and most things on our dev. So that's going to be block supports, which is up here. Here we go. And just to refresh my memory, it's a case of just adding supports and then what it supports. So supports color. I want to do background and text color. Yeah. And then I want to do spacing. I think is the other one. So let's go see the support stock implementation. So color is the one. So let's add supports color. I'm going to just leave it to true. What that does is that does both background color and text color. And then the other one is, and this is, this is where I don't like PHP store because in VS code, it would actually give me all the options. And for some reason, my PHP store means this doesn't, I need to figure out why. But I think it's a layout. No, it's not the layout. Maybe it's spacing. That's the spacing. And I think if I just make spacing true, it enables both padding and margin, which is exactly what I want. So that's that. And I love the fact that those two lines of code enable so much functionality. So let's remove this guy. And let's refresh that. And I broke something. Where did I break? I wonder if it's the spacing and the color. I don't know if that's wrong. But it was right. Let's just remove that. And let's do refresh. That wasn't that. Something else I've done. Okay. So look in the console, inverted hook call again. Okay. Done some wrong things here. So let's put the supports back and it's going to look at the code. I didn't actually even test whether that function actually was working. So. Okay. Better function. Just do this property. Use block props. Use block props. And then inside. The edit. And inside. Oh, use block. Save and save. That's probably what it did wrong. That always catches me. In the save function, we must always use the use block props to save. Because it works differently. Okay. Let's try that again. Okay. Block validation error. That's fine because that was because the save block code was different to what was in the edits, which is great. So now that's working. And now we can change the text color. Which is great. And we can change the background color. I'm not going to leave it at green. I love the fact that WordPress tells me it's hard to read. I wish it would tell me that when I'm editing themes as well. But anyway, we'll leave that. Okay. So that's cool. I can also do some padding and margins and block spacing, but I'm not going to do that here. What I do is I want to set some defaults on those. So to do that, if I remember correctly. Let's go and find the color settings. And then it talks about. You can set the default background color attribute. Here we go. So in the block just attributes, I'm going to set a background color. And I want to set a text color as well. And I want to set a default padding and margin. If you're wondering why it doesn't have double quotes, because you can also add your attributes inside of the. Register block type function called as an object without quotes. And that's what's sitting in the code. I prefer to do it in the block JSON. And then for colors, I'm going to go with. A default background color of now what I need to do. Is I need to check the default theme, just on the ships of WordPress. Cause I want to use some of those colors. So inside the WP includes. Folder of your WordPress install. There's a default theme.JSON file, which gets loaded with a block theme. And it has some default colors. And so I'm going to go with. Maybe I shouldn't use those colors. Maybe I should use the theme colors. That's probably a better idea. So let's find the theme that I'm using, which is block base. I could go and get this from the editor. But I'm just going to have a look here. Okay. So there's a primary six. Okay. I'm going to have to go to the editor because I don't know what to do. So let's go and have a look at the editor quickly. And just get some color ideas. Okay. So here we go. No, not topography colors. There we go. Okay. So let's take the, let's take the tertiary color as the text color. And the secondary color as the background color. So if we go back here and we get the secondary slug. And this is, you can, you can do this because of the way block themes work. You can use the slug from the block theme. So that's the background color. And then I want to set the text color as well. Next color. Type string. And we said we were going to go with tertiary color. Okay. And then I want to set. Some defaults. Margin. I can never remember if margin. Which one is inside of which one is outside. Pretty sure it's margin. So the margin is. I think it's outside padding is inside. So it's padding. I'm looking for thank you all. I can never remember that. I can never, ever remember that. Yeah. Like I got a coat with shoulder pants and your pants are inside the coat, right? So that money might help. That actually might help me. Yes. That actually might help me. Thank you. Okay. So let's add some. Some margin and padding. And you do that through the style object. By the looks of things. So. Let me just see that's an attribute style. So style is a separate attribute that you can apply to the. That you can apply to the. The root element or the main element. And I actually have no idea whether it just takes a value or whether it has to have pixels and all that kind of stuff. So I'm just going to. I think what it does do is it takes the values. It can read the values from thing Jason as well. So if we have a look at. The spacing values. Should I sit here somewhere? I'm not going to find them now. Am I. There we go. Spacings topography. Don't want all the funds one sizes. Okay. Maybe this. Maybe I can see this from the editor. Layout. Oh, it doesn't look like they have any default set. I'm sorry. So I think I can just go. And he said it's padding. So it's inside. So it's padding that I want. I think I can just go 50 pixels. I think. I think that just works. Let's have a look. Let's see if that does what I wanted to do. Okay. So that's from that guy. And refresh. Okay. That's fine. Okay. You've got the background color and I've failed on the text color completely. And so the one thing that you can also do is you can actually do the padding and the margin in here. And then read the values from the block code. So I'm going to do that now. So now these paddings are the ones that are set in the theme. And if you. Click on the options of the editor and switch to the code editor, you can actually see how the padding is being set. So it's in the style. Spacing padding. There it is. Okay. So style spacing padding. Okay. I think you can just go and give it a value. I've done something wrong with the colors. So let's fix that first. Background color. Secondary text color tertiary. That should work. Hmm. Can't believe. Neither text color for now. So it was. Style spacing padding. Okay. Let's try that. So it's style spacing. Spacing. Yes. Spacing. And that should be another object. My fat fingers. And then padding. I wonder if it's just. Probably just pass. Or two. I think. Because I think that's the. 60. Okay. So let's give it a 60. And this is reading from the. From the theme. Jason file theme, which is kind of cool. So let's remove that. And let's refresh. It's probably done a save at some point. Okay. So let me just remove this completely. And you add a new one. Okay. So now we're still not getting padding. So something's gone wrong somewhere. The text is not getting a default color, which is good. Background is getting the secondary color. I wonder if I've got one of the tertiary color is a different slug. So let me set the tertiary color here. And then let's have a look at the code. Text color. Tertiary. What did I say? Probably spelt it wrong. There. This is why I don't do these kind of sessions for these workshops, because it's mostly just me staring at the screen with my. My tongue some way. And tertiary. Okay. And then style padding is still not doing what I want you to do. So let's accept this. No, not margin padding. So I just told us. Three. So look at this. Style spacing. Now they're setting the presets. But I'm sure it's possible to do it differently. So let me have a look in my. This fluctuation. No, it wasn't that one. This is out my branch. I have an emergency. Oh, I just did the alignment. That's pretty. I'm not even done this code yet. I don't think I did. Hmm. Okay. Let's have a look at this. So this is saying, see, this has changed slightly. And I picked this up with a color link recently. This documentation needs a bit of an update. Let's have a look at. Link. And it's here. It's okay. This is what it is. It's the style object. That's how it works. So, so Thelma and Alvaro. This is another one we might need to look at as the. The text and background color, the way they've got it set up. It's got to have this object notation. Which looks like this one didn't. Anyway, I'll make a note of that and look at that some other time, but let's go back here. Spacing padding. Okay. So it's the style object. All the double quotes. So let's do that. And then I don't need. That was because it was a link element. I think here I can just go. I cannot remember. No, I don't think it is. I think here I can just go. Don't know. Spacing padding. To do. To enable. The link color and see what that does. With grief. Text. The reason I'm doing this because the way the link color works requires specific notation. That's what I had to update the other day. So I want to see how that applies to the spacing and padding as well. So let me take this out. It's really like this one and add a new one. And I'm just going to link to something. So we can set the link color. Here we go. Okay. So. Going to set the padding. That's what I need. I need this. This is what I need. There we go. Okay. Let's make it 50. Give me what I need. And then I want to set the link color. I know this is not very readable right now. So I do apologize, but I'm using it to see what it says. In the code. Okay. So. Yeah. So it's style spacing padding. And then it sets top right bottom. Left. So let's grab this whole. Object out here. This is kind of a cheat. A cheat way that you can get all of this for your. For your style object. I think this actually works. I think. I might have to. I might add a little bit. Okay. So it's style. Then. Contention. Was. Style object. And then default. And then everything else inside of it. So it's style. Let's grab this whole thing here. So it's there. I'm going to kind of use this to. My padding going. So this will give me the link element. Okay. Which was the background color. That's because. My preset color. This needs to be. I think I can just specify. This. So then. To do. Spacing. Top right bottom left. Let's try that. Top. Bottom left. Let's take this out. Okay. Let's see what that does. So let us from the block. So the draft. I have to bring the block again. Yeah. So let's remove it. Let's add a new one. Hey, we've got some padding. Okay. So that's something that. Might be useful to also update. Make a note of that quickly. Okay. So now we've got some default padding. And we've said some default colors. And we've got secondary and tertiary. I should see what does that look like. Yeah, it doesn't look horrible. So now I want to try and add a header element to this. I've never done this before. I've never gone and looked for the header component. So. Pretty sure it's going to be in the component reference somewhere. And it'll be a heading of some kind. Yeah, there we go. This feature is still experimental. Okay. That'll be fun to work with. What if there's a. I wonder why it's experimental. It's interesting. Okay. Anyway. Important experimental heading. I don't know why it's experimental. It's interesting. Okay. Important experimental heading as heading from components. So components. Probably means we need to add this. I think it would just be components. Components. Block editor. And then. That should just work. And we're putting it off to the block editor. So it's. There. And we'll need to add it here. So I'm going to guess it's just WP components. I hope. If it doesn't talk about looking. Close that down. And then it's called. Experimental heading. So. It should be a case of bar heading equals. Experimental heading. That should work. I might be going to areas that are going to be so new to me that I get lost. In which case we might stop yet. And then it looks like you just, it just has probably a value. So we'll pass the heading in and just see what happens. So let's put that. Above the rich text as a child of the div. Let's go create element again. And it should just be heading. I see there's a copilot telling me there's possibly a level we can add that may or may not be right. I honestly don't know. But we'll see what happens. And we'll just call it. Yeah, cover block is actually fine. And let's see what happens if we refresh the browser and see what that does for now. So I'm going to save this draft. I'm going to remove this one. Refresh. And I'm either going to see a bunch of errors. That's cool. It just worked. So we can pass in, we can pass in the heading elements, which we're calling and you'll see. So this is interesting maybe to kind of think about and talk about when you're working with non JSX code, but you're looking at documentation that is using JSX code. Effectively this import line. That is the, the function that is the functional component within, within the react package. So that's what you call. And here it's just basically saying take that function and pass it to this heading variable and then make the heading component available to the, to the, to the react code. So what we did was we did the non ESX, where we imported components. And then we said call that function, but create the variable call heading. So that's the first time I've actually tried to do that from, from something where I didn't have the option to switch to the plan JSX. And I'm glad I'm really glad that worked. Okay. So that's the heading. It might be cool to see if we can give the heading a, I don't think we can though, because we would need to, I don't know how to give an element. A default value except I may be passing in a style object in the properties. So let's try that. Let's try a style object. And let's try color white and let's see what happens. Hey, it worked. That was really cool. So that's how you would pass styles to children elements of the route. So the route elements, you can do that via the supports. And the other way you can do it is by passing in styles this way. So now what I need to do is I need to make sure that this gets passed. What I also want to do is I want to make sure that the heading text content changes. I wonder if you can see a heading. I wonder if you can pass in a value to a heading element. Let's see. It doesn't look like it, but let's try. Because if it does, then we can also set up a value for that heading. And make it editable by the user. So let's try that. And let's brush this. Okay. And don't see the heading having a value. We probably need to give it an attribute. So let's Yeah. Let's have a look at the documentation. Heading uses text underneath. So we have access to all of Texas props. Okay. So let's have a look at text. So text. Text the line color display ellipsis ellipsis highlight highlight. His block limit. Doesn't look like we can. Doesn't look like we can make that edit. Which is fine. I mean, what we could do is we could probably implement another rich text. That's probably what we could do. Implement another rich text. That's probably what we could do. We implement another rich text, but we pass in instead of a tag name of P, we pass in a tag name of H2. That'll probably work. So let's do that. So I create another rich text element. This time let's make it a, because I want this editable by the user. So let's give it an H2 tag name. I'll leave that. Let's set up the attribute over here. So we've got the content attribute. Let's set up a heading attribute. It's going to be a string. That's all we're going to do the same probably. And let's say hello. Hello block. Why not. And then we'll change this to. I'm learning. JavaScript. Forward press. Why not? Okay. So that should work. Because it's using a rich text. But in the code itself, we've set that rich text element to be a, specifically an H2 tag. I don't want it to be able to change there in anything else. I'm going to leave the color as white for now, because that's fine. Then the value we can change to attributes. And this is where my memory eludes me. What do we call it? Attributes heading. And we're going to need an on change. And this time. We can't call it on change content because we need to change the heading. Because we're going to be updating a different attribute. So now we can. Use code pilot to. Write some. Hit the wrong button. Write some code for us. That's perfect. So there's a heading, heading, heading. That's got that. We probably could make the color editable somehow. Using the inline stuff I did the other day, but I'm probably not going to have time for that. But what we do need to do now is to. Add this to be. Save. So again, it's going to be now this is where it gets interesting. I need to make sure that I. Was in these tags probably so it saves things correctly. Do. Think I did this one wrong. I don't think I even tested it on the front end. I was so busy figuring out all the backend functionality. I think this is how it works. I think the differences I need to go content. And then we'll have to test this now and make sure it all works. That's the same. That's the same. That we don't need. Okay. Theoretically. Theoretically that should all work. So let's have a look. Okay. Move that. Give this all a refresh. We're going to have to remove it again, which is fine. Move. I'm just going to give this page a heading quickly so I can save the drop. So I can write what's been saved. And then let's add. Cover block. Okay, so there's hello block. And we can say hello my block that works. Okay. Busy learning JavaScript. So that works. Okay. Now we need to see if it saves correctly and renders on the front end correctly. So let's do that. Yay. It all works. Hello my block. I'm busy learning JavaScript. Okay. So we use two rich texts. We just set the one to a header. We set the other one to a paragraph. We probably could make this a selection of the header option differently. So that could be a future thing we might do. What I would like to do now though, I've got 20 minutes left. What I would like to look at doing now is adding an image to this block. And I'm going to try and add it. Hopefully there's time to add it so that the text and the. The heading and the text overlay the image, which we'll probably have to do using CSS. But first I need to add the actual image and I'm probably, I think it's the media component that does that. So let's see if we can find the media component. No, it's not the media component. I wonder what it's called. You watch it's going to be like image something. Let me see if I can find. Scroll through these components here and find some image. I would have thought it would be something to do with media or something. Form file upload. It's not going to be that. Now I wish I'd have looked this up beforehand. Yeah. Best field wonder. Image component. I know there's an element in the block editor that you can add images. I wonder if I just try and see this image. Option. Image file. That's basically what I want this but I want it inside of my block. I wonder if the name will give me a clue. It's just WP image. It's not there. Core blocks reference maybe. But no, this is the top level heading for the core blocks. See if we can find there's a cover. I want to add an image with text over there. I'm trying to bolt that so I don't want that. Gallery image. Let's have a look at the source code. Core image. It doesn't look like there's a component to be able to add an image to the block. Unless you know what it probably is. It's probably a case that the image functionality uses things like. Here it's using an experimental label. It's going to edit. Image. Place. This is probably. Uses too much. Too many other components that we would need to use. So. Maybe not a good idea to dive into that today. Yeah. Okay. I think I'm going to leave that then. I mean, we could sit and read, you know, reverse engineer the cover block, but I don't think anybody's even read for that today. I was really hoping that there was just a package that I could just. Implement. Let's go back to the cover block and see what the cover block has. Maybe the cover block has some. Some insight. Block index. It's using inner blocks. Paragraph. Okay. And if we go to the edit. This one. Using view and touch for the answers are using. Porting icon image. Image from component. What if that'll work image from components. Let's try it. Image from components. Let's try that. Digging through source code to try things out folks. Let's go to components already. So that's cool. Let's take it down here. Let's go image. Image. Image. I have no idea what this is going to do. So let's add it above. Rich text. And let's say. Image. And you know what this is probably going to need. A URL or something. Probably not going to work. So it looks like there is an image component, but it's not listed in the documentation. I wonder if we go to the components package reference. We might find image in there. That's an idea. No. Okay. I'm going to share a link in the chat. Probably not that. Maybe you can pull that thread. Maybe it represents any image uploaded to the media library, including featured images. Functionalities included for responsive image markup determining configuring. I mean, it's possible. It looks like it needs an attachment ID though. What I was, what I was hoping was, was this functionality, but inside my block. Just by being able to import a component. And it probably, it probably is possible. I mean, the only thing that I could cheat, for example, is I could do something like, like this and then just copy the code over. And that would be a cheat. But I was hoping to be able to add that to my block so that the user could click on the media. And then because I do know the cover block makes it possible, but I have a feeling now that I'm looking at the cover blocks. If we look at the cover block, for example, the cover block starts like this. And then you upload the image. And then it gives you the image with the, with the header ready to rock and roll. So I'm effectively, I'm trying to, I'm trying to reverse engineer the cover block. But looking at that code now, which I probably should have done before, and that's to say today is unprepared, which I probably should have done before I did today's session, was there's probably a bit more involved than just importing the component like we did with the header. It could come in the future. That's, I mean, we saw header was experimental. So that's probably a reason, you know, why it was like that. Yeah, I don't think I'm going to do the image today, which, which is, it's not a pity. I should have expected something like this because I didn't prepare for this, but I'm going to, I think I'm going to call it here today. I think this is a good example of how you can do multiple blocks, multiple elements with inside elements. And I think this is a good place to end. So yes, that was, that was me building a block without using ES6 slash JSX. It's definitely a lot more difficult, I feel, than using JSX because in JSX, you can just literally, for example, with the rich text, if we have a look at that example code, let's go back to the documentation. Let's have a look at the rich text here. If you look at the JSX here, it's just, you just pass in rich text, and then you pass in the tag name and unchanged. It all just works. You don't have to have this create elements stuff, but you don't have to have, you know, multiple nested function calls. And if you want multiple nested things, you can, for example, let me show you in the, where is it? Block controls. If you want to have controls, you can just have your block controls element and then your alignment toolbar with the different values. So it's a lot easier doing it this way than it is doing it using, using the create element every time. You know, when you're doing nesting, instead of it being maybe like one line of code or two lines of code, it becomes multiple lines of code. But it's definitely a fun experiment if you, if you are limited to not having no JS installed on your machine or anything like that. Cool. What I'm going to do now is I'm going to grab all of this code and just stick it in a GitHub repository so that if anybody wants to look at this afterwards, or if they are watching the video and they want to see that afterwards, they're more than welcome to. While I'm doing that, does anybody have any questions? Does anybody have anything they want to say, any comments? Anything that I was doing today that you didn't, didn't make sense to you. Or any questions in general about development, block development or anything like that. Now is the perfect time to do it. So please go ahead. I just want to say thank you so much. This is really enlightening. I really appreciate your time. Thank you. No problem. It's, it's loads of fun for me. I learned as much about all of this that, that as you do, because I'm also always constantly learning new things. Hi Jonathan. The session was helpful. Cool. I felt ahead. I have seen the videos before, but it is very interesting to see and be on a live session. Awesome. Awesome. And I haven't followed up on the recent blog session, blog theme sessions. Yes. Probably I should join them and view them so that, you know, I'll get a hang of what you're doing now. Absolutely. Well, if you want to, if I can make a recommendation with regards to the block themes, and I'm doing this for these JavaScript sessions as well. Let me just, sorry, give me one second. I just want to get into my, to learn press, the content plugins, we'll recall it, the block. The, the block theme sessions are actually all of the content for those sessions are actually available as courses on learn WordPress. So you can actually just, there's part one, which is the first four sessions and then part two, which is the next five. So you can also just work through them that way. And then that's a good sort of accompaniment to going through the sessions, because if you do the session and then do the course, you're going to get to the end of the session. And then you're going to get to the end of the session. And then you're going to get to the end of the session. And then you're going to get to the end of the session. I'm going to do that right now, I'm going to do a bunch of work, so I'm going to go ahead and organize up nicely. And then I'm also planning on doing the, learn, the learn JavaScript ones that we've been doing, I'm planning on turning that into a course as well to go along with the videos. And my plan for the next year, my, my sort of my way of creating content for learn WordPress is to, you know, affirm all the information. Cool. Very cool. Yeah. The other thing I would also say, if you would like to, on a, and obviously this depends on time zones, but on a Tuesday at, I think it's 1230 UCT works out to 230 my time. I do live stream sessions that are exactly like we did today. Yeah. But even less prepared, like I know nothing. I don't even know where I'm starting and I'm just digging into documentation. I'm trying to figure things out. So if you see those come up, you're welcome to join those as well. Okay. Okay. That's on a different network, right? Other than zoom. Yes. So that's, yeah, that's on Twitch. And then that's on Twitch. And then I also, what I do is I copy them over. This is a small plug here. I don't earn money off my YouTube. So don't stress. But I also cover them over to my YouTube channel. So if you miss them on Twitch, you can watch them the next day on YouTube as well. I try and put all the content out there so that everybody can get hold of it somehow. Thank you. Thank you. Okay, the other thing I do like about developing blocks without using JSX is the fact that you can. Let me just do this here. You don't have to worry about excluding your node modules and all of that from your Git repositories. Because the code that you've written is just the code that you need. So that's another thing that I like about all of this. I'm just going to add all of that. And I'm going to commit. That's interesting. Yeah. It's more difficult, but less issue on the Git side. Git commit. Git commit. There we go. Git push origin. I need to set the, I always forget the spot. Set the main branch. Go. And then Git push origin. Okay, so I will share this link once the code has been uploaded in the chat. And I'll make sure it's included in the recording. So let's just reverse this here. So it's just GitHub.com slash my full name WP learn cover block. So all the code is there. So feel free to go through it, pick it apart. I might do future sessions based on this code. So maybe we'll figure out the image thing and all of that in the new year. Cool. That's my good for today, folks. Thank you for joining me today. And for this year that you have joined me, it's been lovely to meet you all. It's lovely to work with you all. Hopefully you have learned something from all of this. I will be offline for two weeks. I'm not going to be enjoying some downtime with my family, but I'll be back on the first week of January and I'll be kicking off with a live stream and a workshop definitely in that first week. I don't know what I'm going to do yet, but I'll figure it out. I also want to take the time to thank Alvaro and Felmer and Catherine who's not here for co-hosting with me this year. You all have been amazing. Thank you to some of my regulars whose names I'm seeing you today. It's always awesome to see folks coming in regularly. And to those of you have met for the first time. If you are celebrating end of your holidays, I hope you enjoy them. I hope you relax and rejuvenate. And I look forward to seeing you all in 2023. Bye. Bye. Thank you. Thank you. Thank you.