 Okay, we are recording, recording is enabled, should I say, or is in progress or whatever the case may be. Welcome everybody joining us, joining me today. For those of you who are usually here on a Thursday with me, you may have noticed that my voice is a little bit scratchier than usual. I had a little bit of a throat, scratchy throat, sore throat, cold I guess, this week. Now, I'm feeling fine, just the voice out. So I do ask you to bear with me if my voice cracks or breaks or anything like that today. Cool, so while you're all joining, please, if you're going to be coding along with me today, please do make sure you've got your local environment ready, make sure you've got your local WordPress install, and you've got your code editor, your VS code or sublime or PHP storm or whatever you're using ready. If you're wanting to code with me today, those are the only two things you need today. Specifically because of the topic of today requires no external dependencies other than a WordPress install and a code as a while folks are joining allow me to just introduce myself quickly for those of you don't know me my name is Jonathan. I am from Cape Town in South Africa. I am an ex developer to encode instructors so I used to write code all day. Now I prepare things like this to hopefully teach others to code. I'm a sponsor contributors automatic so what that means is I employed both automatic to work with the training team full time. So I do things like these workshops and tutorials and courses on learn.wordpress.org. And if you want to find me online, the best place to get hold of me is either on Twitter, which may or may not be around for much longer the way things are going there, or at least in the shape and form that we've known it as. Or you can find me. My website is just my name Jonathan Bossinger.com. Or you can find me in the WordPress slack the making WordPress slack. I think I'm just John Bossinger there. Cool. So today we are going to be developing blocks without using react. We're going to be diving into what I mean when I say that writing some code spending spending more time writing code today than we have in previous Thursday workshops. And this is more my sort of severe my where I where I feel comfortable writing code. So that's that's what we're going to be doing today. We're going to get going a couple of announcements. First of all, again, welcome everybody. I don't have a co host today purely because my regular co hosts are all colleagues at a division meetup now in Denver, so I couldn't ask anybody to cost. So I'm going to be waiting at today so I do apologize if the, the links in the chat aren't as quick as they were in Catherine is with me. Please bear with me. As always, I am presenting in focus mode, but if you would like to enable your video so that I can see your face you more than welcome to. You don't have to, but it's always nice to see folks interacting. You are welcome to unmute and ask questions as we're going through or post your questions in the chat. And as I've always said, I just asked that if the question is not related to what we're specifically talking about at that point in time please keep it until one of those breaks. Cool. Then, as I mentioned before the training team is currently running a learn WordPress learner survey so for those of you who come to these workshops regularly or who watch the tutorials online on learn.wordpress.org. We'd like to run the process of planning our goals for 2023. So as a training team we'd like to know what folks want more of what they want less of what they like what they don't like. So if you haven't already please consider filling in that survey and letting us know what your needs are from learn WordPress. Last reminder to get your local WordPress installed ready if you want to code along with me and your VS code or your sublime or whatever code it is you're using. As always, if I'm going too fast please do let me know. And I will be posting the session to WordPress TV afterwards, sometimes during the course of the day tomorrow so if you've missed anything or if you catch up halfway through if you're enjoying us halfway through you will be able to watch this later. And then lastly, you know we have to pay the bills. If you want more WordPress focus content please do visit learn.wordpress.org there's loads of tutorials, lesson plans links to these workshops, everything is in that one space. Alright, today's learning outcomes so we're going to be thank you. I appreciate that we're going to be looking at developing what I what we could call plain JavaScript blocks in other words blocks that are not using either react or JavaScript code inside of the block code. We're going to look at why you might want to do that and there's only a few reasons why you might want to do that we're going to have a look at why. We're also going to look at the structure of a simple react slash JSX block and I'm going to talk about what react is and what JSX is while we're doing this so we can understand those concepts as we go forward. What I'm going to try and do is I'm going to try and show you the react code, the react slash JSX code and then we're going to build the vanilla plain JavaScript version of that same code. So I have built the react version already and I tested it it should all be working, and then we're going to build the plain version of that. So today, the goal is going to be to build a basic block it just has a paragraph tag and some content. We're going to be looking at some of the concepts in the JavaScript world that it requires to be able to put that all together some of the PHP things that we need to do some of the manual steps we need to take. And then hopefully if this time we're going to add some styling to the block, just to show you how styling works within a block environment, and how you can style different parts of the block. While we're doing that we're going to then be comparing the differences between what the JSX version looks like and what the JavaScript version looks like. And you'll see why folks generally recommend the JSX way, but how it is possible to do it without using JSX and react and everything that comes along with that. Okay. So our objectives today we're going to create a brand new empty plugin from scratch we're not going to be using any kind of scaffolding we're going to be coding everything ourselves. We're going to create the minimum required minimum required files to develop a block so there's a block.json file, there's the main plugin file to register the block. There's the block.js JavaScript file to handle the blocks functionality. And then there is an asset file that we need to create as well to manage the block dependencies and we'll talk about what that file is and what what it's used for and how it works and show you how it all fits together. And then if there's time, we're going to be I'm hoping there is enough time we've got an hour and a half today so we should have enough time. We're going to be adding block prop support or use block prop support we're going to be talking about what that is and what it means and how it works again comparing to react JSX code to plain JavaScript code. And then we're going to be applying the block props to the edit and save functions in our block to be able to do some styling and we're going to create an editor CSS file and a style CSS file and add some styling to the block on both in both the editor and the front end. And then I'm going to show you how that works and how one overrides the other and all of those kind of things so that's the goal today a very simple block that has some styling. And I'm planning this to be a series of workshops for at least the next four weeks. So going forward we're going to be looking at things like attributes and nested blocks and hopefully creating a block that uses existing blocks and all kinds of other fun things. So if you have any questions around block development, how to do this or how to do that. A good time to ask those questions would be in the in the meetup event in the comments section for today's event. Let me just pop over onto the events quickly. Is to ask those kind of questions because then I can plan the next set of workshops to try and cover some of those questions. So in the in the comments after the meetup if there's anything that we didn't cover in the session today, because it was outside the scope of the session there wasn't enough time please do add those questions there. And then I will make sure to cover them, maybe not in the next workshop, because I do have a sort of a plan for the next four at least. But maybe in future workshops or as part of the next four workshops. Okay, cool. Just just to mention again for all of those who joined after I mentioned this earlier if you're thinking my voice is sounding a little bit weird it is, I'm recovering from a bit of a head cold so I apologize if I sound or croaky. Okay. Before we get started. Are there are there any questions about whatever we're going to cover today is anybody that still needs to get their local environment set up and ready to rock and roll. Otherwise, if you haven't I'm going to be probably taking more subs of water today because of the throat. So I'm going to take a break for a supporter. And if there are no other questions, we can get going. No problem. Thank you. Fortunately, it was one of those things where it was just a sore throat, a sort of a sore scratchy throat but it didn't affect me physically I was able to still work. It just was I was operating at about 80%. And today my voice just sounds like, you know, I'm a little bit. It sounds like I've been drinking sort of bad whiskey all night. Don't ask how I know what that sounds like. Okay, let's let's get going. So why would you want to develop plain JavaScript blocks. So the main pro the main reason why is that you don't need to install all the other software that I discuss in this using the create block tool tutorial that I created a while back. And we did a workshop on this sometime ago as well. We speak about the create block tool, and it's a it's a tool where you can sort of scaffold the block from from the command line. And in that video you're welcome to watch it afterwards you talk about software requirements and the software requirements are installing node JS and installing npm or the node package manager. The reason that that you need to do that is because the react way of doing things react to being a JavaScript framework requires you allows you to write your code in what's known as I think it's ES next syntax or whatever it's a more modern syntax of JavaScript. The syntax that that browsers don't understand fully. So your code has to be what they call transpiled or converted or compiled if you will compile it's not the right word but so those of us who come from the days of code code compiling your code basically has to be transformed from this more modern syntax to a syntax that the browser will understand. So that means you have a build step as well. So you have a command that you run on the command line, either npm run build to build the files or there's another one npm run start which watches the files for changes. And so you have to do that as well and then you also have to worry about what's known as the node modules directory. Now let's let's hop over to my to my example project in visual code studio so I can show you what I'm talking about there. So I've created this learn react plugin WP learn react. And you'll see it has the package JSON file which manages all of the dependencies and the build scripts and everything else we don't have to be not going to worry too much about that today. But then it also has this node modules directory and this node modules directory is generally quite large. And I don't know if I can get I probably can't get information about it from here. Let me open finder and we'll have a look at how much data that takes up. So if I go into my learn press site and I go into WP content and I go into plugins and I go into learn react. And we have a look at node modules get info. This is currently a who is the size still calculating size. There we go. So currently a 256 meg folder of information. So if you're if you're working in an environment we work in multiple projects that are building blocks. Every time you set up a new project using node to use to run the build steps and use the modern code. You're looking at about 250 megs worth of data every single time. That's going to take up space. You also have to if you're going to package your plugin to give it to a client or upload it to the WordPress repository. You're going to have to make sure that you don't include the node modules and I've actually done that myself before when I first started working with node modules and JavaScript dependencies. I didn't understand this concept and I package the plugin and I wondered why my plugin was like 200 and something makes big. And then I dived into it and I realized oh it's packaging the node modules I don't need them for the production version of the plugin. So it basically means you have less dependencies and less extra things to worry about. The downside of going this route is your code is a little bit more complicated. Now I use complicated in quotes or in air quotes because it's only complicated in terms of it's a little bit less human readable, let's say. And when I show you what JSX looks like versus what plain JavaScript looks like in terms of this you'll sort of see this but using JSX looks a little bit more like HTML that uses similar HTML tags. So it's a little bit easier for somebody to read and understand if they're used to HTML. And also the other kind is it requires more manual work so in the build step using the react slash JSX version. When you run the build step it generates certain files for you it'll generate the asset file for you for example. So you don't have to worry about updating dependencies and those kinds of things. You can just in your code and I'll show you always in a second, you can just say import a certain package. And because the node modules directory has the WordPress script package already installed, it knows to go and look for that code and use it when it does the transpiling. So the con is it's a little bit more complicated that way it's a little bit less easy if you will. But the what you have to do is you have to weigh up well, do I want to go to the node route or do I want to go to the non node route. The other reason that you might be considering going the non node routes is if you're not comfortable on the command line. If we look at WordPress, historically, if you had something like local WP installed or MAMP, or on Windows, Jam, or Champ, I think it's called whatever or WAMP or whatever any one of these things. Devkins to any one of these local WordPress environments. You didn't have to really worry about doing much on the command line you could write your PHP code. You could write plain JavaScript jQuery code CSS code, and it would just work because that's how you know the stuff works PHP is is interpreted on the fly when the browser runs. So there was no compiling or transpiling of the code you didn't have to ever worry about the command line you didn't have to install all these extra things. So if you're on for example a Windows environment you might not have done a lot of spends a lot of time on the command line doing all these things that might be complicated and you find it difficult. There is a pathway that you can go if you want to start building blocks and that's what we're going to be focusing on today. So those are the pros and cons if you're somebody who wants to build blocks, the whole development environment npm node build step stuff is just too much. Today is going to be perfect for you. Or if you just want to know how the stuff works. And then today which should work well for you. All right. The next step is going to be diving into some code before we do that I want to pause again and just check if there are any questions around everything that I just covered in the why we would do this. So if you do have any questions please do let me know. Otherwise we'll get stuck into some code. Okay, don't seem to have any questions. So I am going to now open up my local WordPress environment. So I have a very basic WordPress install setup for this. I don't have many plugins or themes installed or active. If we have a look at the theme list it's essentially just the default theme so I'm running WordPress version 6.1 which is the latest release of WordPress which comes with 2021 2022 and 2023. There is a dark theme that I'm busy fiddling with for something else which I'm actually going to just delete now so we don't have it affecting our work. So if you have a clean WordPress install this is what it looks like. In terms of plugins. I just have my good old favorite create block theme installed but I'm going to deactivate that for now. If you don't know what I'm talking about that stress but if you do you know. And then I have this learn to do plugin which is a plugin that is used that I scaffolded using the use create block tool just as a backup in case we need it we shouldn't but just in case. And then we have the WP learn react basic block which is the react version of what we're going to be building today. Another thing that I wanted to make sure we all open is this link here so I'm going to copy this into the chat. And I just want to say thank you to eagle for sharing all the other links as we've been going through. But this is basically a tutorial on the developer direct on the on the developer handbook, specifically in the block editor handbook on how to build blocks, and we're going to be following some of this code today. So if you haven't got this open I do recommend if you want to code along with me I do recommend opening this up in a browser because we're going to be copying some of this code over and then using it for our own purposes. And there's there's a whole bunch of preamble which you're welcome to read through, but you'll notice here that halfway up the middle it says your code snippets are provided in two formats the JSX format and the plain format. JSX refers to the JavaScript code that uses JSX syntax and requires a bold step and I'll show you what JSX code looks like in a second. JSX is specifically a react format a react syntax. So it's the syntax that the react framework sort of developed to work in the system, and then plain refers to classic JavaScript that does not require the bold step which is what we're going to be doing today. So you're welcome to read all of that in your spare time but we're going to be focusing on those two things today. So let's start with looking at what the react version of this looks like. So in a react block in a block that uses react which uses JSX, you typically have an SRC or source directory. And inside of there your main file at least will be your index.js file, and you can do everything in the one index JS file if you want to. And then generally at the top of that file there will be some import statements and what these import statements do is they say import this thing from this package so for example import the register block type function from the WordPress blocks package. Okay, and then it also says import use block props from the WordPress block editor package so when you see this over here that's basically a package that exists some way. And this is something that's being imported from that package. So this is kind of similar to doing requires in PHP or using classes in PHP. If you have a look at my node modules folder, and you go and find the WordPress sort of folder there, you can see we have this WordPress scripts over here, which handles a whole bunch of other things. But somewhere here there's also the package the different packages now kind of exactly where they are so bear with me. I think it might be a little bit further down 100% sure. I honestly can't remember today so I'm not going to I'm not going to go looking but basically when we import those packages they're effectively importing them from the node modules and then when the code builds it does what it needs to do. Okay. So here we have the actual block code so it uses the register block type function which was imported from WordPress blocks. And it passes in a unique identifier for the block which you typically has a slug, similar to a plugin slug or a theme slug, and then a name for the block and it's usually I think it's this is the recommended syntax so it's the slug hyphenated slash and then the block name. Then there is typically an edit function and the edit function handles everything that happens inside of the editor. So when you when you click on insert block and you search for the block then it's going to call that function and that's what the user is going to see. And then there is the save function and the save function is what fires when the block changes. So when the block it's added to the editor the save function triggers and it saves that that results to to the database. So if the user changes things or moves things around that save function triggers and it saves that to the database. So you will see in this block. If we look at the two return statements here and here, they are very similar. The only difference is the one says from the editor and the other one says from the front end. So the from the editor will be what's displayed in the editor and the from the front end will be saved to the database and then when that page is rendered on the front end you'll see the front from the front end part. So one of the differences is it's using use block props which is passing in from that block editor package. And in the editor version that it passes through block props in the save it passes through block props save. That's the only major difference. It's also doing this this sort of three dots thing over here which has to do with the way block props works we're not going to dive too much into that right now because we don't need to. But you'll see those are the only main differences between the edit and the save function. Then the other thing it's got we can we can dive into that now. I don't think I've set up the style sheets. I've got the rate background here now I have actually so I like so I've got the rate background for the front end I think it is. I think that was what it was. Yes, the rate was for the front end so there's the style sheet for the front end such that rate background, the color is white the padding is 20 pixels. And then there's the editor CSS which loads in the editor and then there's the background color and pattern. So if we if we look at this block on the front end, or at least in Wordpress should I say, and we open and I don't want to open the editor when I open up a post sorry, clicking on the wrong things yeah. Maybe my brain is a bit fuzzy from the cold. So if we just search for the word react for example that was the name of the block there it is WP learn react block. It's in green as expected. And if I if I update this let me just disable full screen mode so I can see my toolbar. I'm not going to update I'm going to preview this if I preview it in the front end, then I get my rate in the front end so the block is working. And all is good. Now, the reason the block is working is because I've already run the bold step. And what the bold step did was it created this bold directory. And in the bold directory you will see there is also an index.js file but the difference is the index.js file looks quite a bit different. First of all, all the code is just on one line it's minified onto one line so all the extra spaces have been taken out. So what I'm going to do is I'm going to format this code so we can see it thank you Adrian for pointing out that shortcut. Why didn't that format. All right, not formatting today for me try this. Yeah, it's not working for me today. I think this is because I don't have formatting enabled in my visual code studio because I don't use it. So I'm going to switch back to I don't use it. I think I need to install excellent and those kind of things for it to work. So I'm just going to open up PHP storm quickly and format it for us so we can see what it looks like. Let me just open up learn brace here. So bear with me for one second. I'm just going to format it and then copy it back into VS code because the VS code want is a bit bigger. So that's what it looks like format. So you will see what's interesting is it is still importing the different things if we compare the source index and the build index. So there's register block type from WordPress blocks and there's block props from block editor. And if we look over here there's blocks and there's blocks editor it's a different name convention is a different format. It's using the global WordPress object and blocks object from that with whatever it is. And this is also this element that it uses. And then there it's calling register block type. It's passing in the same the same name that we saw earlier. And there's a similar edit function and save function. And then it's doing this over here it's setting a constant and it's passing in use block props. And then it's returning an element using this create element call. And you'll see there it's saying it's a p tag. So there it's a paragraph tag. So that's kind of the same. And then it's passing in the same the same information. So the code is kind of similar ish, but you see what I'm saying by it's a little bit more complicated. Now, one of the other reasons that this code specifically is a bit more complicated is what it's doing at the top here is it's assigning the element the blocks and the block editor to these very simplified variables e o and r. And that's something that happens automatically as it's busy generating things. So reading this code, you've got to remember what e is and what o is and what r is and blah blah blah. But essentially what we're going to be building today is a slightly more readable version of this. So that we don't have to build it to create this we can just do it from scratch. And so that is the goal for today, but it's using the same styling it's using the same CSS and everything else. Okay. So that's why I'm going to pause again if there are any questions. While I close down PHP storm and grab another sip of coffee this time. And then we will actually move on and start building this thing. Okay, so I'm going to close all of this down and we're going to start by in our plugins directory I'd like you to create a folder for the plugin. And we're just going to call it. I'm going to call mine today WP learn JavaScript. I'm just using the WP learn prefix as I always do. And then I'm calling it WP learn JavaScript. Okay, so that's we're going to stop some empty folders sitting inside the plugins directory of our word of our local WordPress install. And we're ready to start writing some code. Then I'm going to switch back to the documentation that I shared with you earlier. The block tutorial. And we're going to click on the create a basic block link which is the first page in that document. And it starts talking about how things work and it starts talking about setup steps and create block tutorials and all of that. I want you to move past all of that and go all the way down to step one. Configure a block.json file. So if you've been working through the theme workshops I've been doing the last few weeks to remember we talked about theme json theme json basically handles all your settings and your styles for your block theme. Your block.json file handles all of your settings for your block. And the minimum required settings you need to set up are the API version. The title, which is what shows in the editor when you're adding the block. The unique name which we spoke about earlier slug in and block name. The category that you need to add it to and the options are text media design which theme and embed. That's where it shows up in the editor when you search by category. An icon, which uses the WordPress dash icons which I'll show you how to find those in a second. And then the editor script file in other words the index.js file. And the nice thing about this documentation is it actually has the two different options for us. So it has the JSX option which is the React version or it has the plain option. So we can click on plain there make sure plain is highlighted. And this is what the code looks like. So what we're going to do is we're going to just hit copy over here. Or you can just select this code to copy it and right click and copy or control C or command C or whatever. Copy this code and then switch back to your editor. And in your WP learn JavaScript or whatever you've called the plugin just creates a new file. And we're going to call it block.json. Okay. And in that file we're going to paste the code we just copied. All right. I'm going to kind of go through this pretty quickly and then I'll give you folks time to catch up if you need to. For now we're going to make some changes. The first thing I want to do is I want to change the title just so that I know what I'm working with. So I'm going to call my title WP learn colon and I'm going to call it basic block. In terms of the name, the unique name for the block because my plugin is called WP learn JavaScript. That's what I'm going to use the slug. So there and then for the name I'm just going to call it basic block. This doesn't matter too much if you're just creating a single block in your project but if I had more blocks in the WP learn JavaScript plugin folder then I would obviously give them different names and that would make them unique. And the category I'm not worried too much about the category today so I'm going to just leave that as is. And then under icon I want to change my icon. Now if you've never seen the dash icons before it's basically these icons that are used in the dashboard. So it's all of these chips down the left here. And there's a very handy document. If you look at the last page of the resources here which I'll share in the in the chat. There's actually a list of all the dash icons or dash icons if you want to pronounce them. And you can filter by whatever you're looking for and then get the dash icon you want to use. So I'm going to want to use a code icon for example so I'm just going to type in the word code and there are some options at the bottom here. I'm going to use this one which looks like a sort of a code file for this for this project. And if I click on that you'll see that the top dash icon changes that icon and then there is the unique name of it. Now, the name that you need to copy is everything after the dash icons hyphen part dash icons hyphen part so it's basically this media code section over there. So I'm going to copy that out. Switch back to my code and then put the icon there in as media hyphen code. So that's what that looks like. Okay, and then the editor script is going to be a block.js file which we're going to create in a second so I'm going to leave that as is. We could call it index.js if you wanted to we could call it Bob.js that doesn't matter, but we're going to leave it as default block.js. Okay. Is anybody who is following along up to speed with that at this point in time do I need to slow down or can I go on just hit me up with a ready in the chat if you're good to go. Awesome. Adrian is good to go. So I'm going to move forward. Cool. Everybody else seems good to go as well. Excellent. Okay. Then switching back to the creator basic block documentation. So this is the block.js file and I recommend after this if you want to go read more about what block.js and does you can go and look for it. There is an API document about everything that block.js and can handle us, but we're going to go. We're going to dive deeper into what can do and how it works in future workshops. The next thing we need to do is we need to register the block in PHP so we need to tell WordPress. Hey, my block exists. And this will be the last time we're going to write PHP code today. It's a function called register block type and we pass it in a path to where the block information is. Okay. So again, we've got all this code here that we need. So I'm going to copy that code. And then in my plugin, I'm going to just create the main plugin file. Now the main plugin file can just be an index dot PHP file. You can effectively call it anything you want as long as it has that plugin header, which I'll show you in a second. I like to name my main plugin file the same as my slide or the same as the folder. It's just a personal thing that I've picked up. Some folks do follow this. Other folks just make an index of PHP either way. It doesn't matter. The one nice thing about doing the index of PHP ways, if somebody hits your index file, then they're just going to get the plugin. They're not going to hit anything else. So then we're going to paste that code in. So the code has the opening PHP tag. Great. So the server knows it's going to pass it as PHP. And then it also has the header, which is awesome. So we need to have that header for WordPress to pick this up as a plugin. And then it has the adding of an action that hooks it onto the net action. And then it runs our custom function. So we need to change some of these names. So in terms of the plugin name, I'm just going to call mine WP learn JavaScript. And apparently it's Java uppercase S script like WordPress uppercase P and I'm a bit pedantic about naming things. I'm going to call it that WP learn JavaScript block. And then I'm going to want to change my functions. Now again, I like to prefix my functions based on the plugin that I'm working with to make them unique. So I make WP learn and we're going to say JavaScript. The other the other way you might see some folks do it is they do something like this. They go to W. They pick the first letter of the slug. So they might do something like WLJ. That's also an option. I kind of like the long names just because it makes it more readable, but sometimes you might end up with massively long names. So then, you know, shorter names are easier and better. So I'm going to change that function name there. And then I need to change the function name in the net callback as well so that when the net hook runs in WordPress, it's going to call that function. The other thing that I like to do, and this is just a personal preference, you don't have to do this, but I find it makes the code more readable. As I move the action, the adding of the action to the top of the code. And the reason I do that I picked that up from another software developer way more experienced than myself is that it makes more readable. So I read what the action is that's being hooked into and then the function that's being called and then I go and look for that function right below it and that's the function that's going to run. So I personally find that more readable. Either way, it doesn't actually matter. Okay, so now we've told WordPress our plugin is good to go. Is there anybody who still needs to finish up this or can I get a couple of thumbs ups already to goes. Thumbs up is easier. So if you've got the thumbs, you can even just give me a plus or anything. Okay, got it one. I'm going to sip a coffee while I wait. Awesome. Eagle gave me a plus. Awesome. Okay, everybody's up to speed. So that is our block JSON setup. So it's all the settings for the block. We've told PHP that we told WordPress at least that the block is there. We need to register it. Now we need to create the block code itself. Okay. So here it says the editor script entries include automatically in the block editor. The editor script file contains the JavaScript portion of the block registration and defines two important functions, the edits and the save function, which we discussed earlier. So again, we will click on the plain option and that takes us to the plain JavaScript code. And I'm going to copy this code. And then I'm going to create now because I specified the editor script file as the block.js. And you'll see it's using this dot slash notation, which in a Linux or a Unix environment means the current directory and then find the file. So inside of the plugin directory, I'm going to create a new file and I'm going to call it block.js. And then I'm going to paste this code. Okay. Now while you're all the pasting this code, I'm going to talk through this code so we understand what it's doing, why it's doing things in a certain way, what those things mean. Okay. The first thing that I want to talk about is I want to talk about the fact that there's an open bracket there and then a closed bracket there. And then a function inside of the open closed brackets. And then over here at the bottom, another open closed brackets there with these things here. Okay. So if you've been coding in either PHP or JavaScript for some time, you will know and I'm going to just do that. That if I did this. There. And let's just take. Actually, let me just do this way. So it's actually logical. And let's take this. I didn't expect it. Okay, let's just leave it like that. If I did something like this, this looks like a logical piece of JavaScript code. It's a function. It's receiving some things. In fact, it might need to be done something like this maybe. So let's just do blocks. Let's do element. So it's got some some some parameters that it receives. And then it's doing some things with those parameters and whatever else. Actually, we probably need to be something like this. Let's just say luck has ever name of some kind. Okay, so this is kind of traditional JavaScript code if you will. You will also know however that unless I call this function and pass it in some information. It's not going to do anything. It's just there. It's in the code, but it's not actually going to be triggered. So what I would need to do it's at some point in the execution, I would need to actually call this function block. And I would need to pass in probably the window. Hang on, can't spell today. Window dot WP. Am I also correct is not doing what I wanted to do. Sorry, give me a second. Yeah. I don't want that. Oh, good grief. And it would need to be probably blocks and then I would need to do window WP element or whatever it was as well. And then then that code will run. Now the other problem with that is when this block.js file is in queue, it's going to automatically run that function call. There's nothing saying, well only do it when the code editor is running or whatever the case may be. So that is kind of a traditional way that you could do things. So let's go back one step and have a look at what the code was that we pasted so we can understand what it's doing. And I'm going to link you through to some readings that we can put in the gaps. What this syntax does, and I'm going to take all of this code out here, so just focus on the syntax. What this syntax does, it says it creates what's known as an anonymous function. And it's not anonymous because it doesn't have a name, but it's anonymous because it doesn't have a name. Bear with me. In other words, we just want this function to fire. We don't need to give it a name because we don't have to call it anywhere else. We just always want it to fire. And we're going to pass in this window WP blocks item from the word, the global WordPress object, as well as the element. So that's from those imports that we saw earlier. So the window WP object is loaded by WordPress when WordPress fires. There's another piece of JavaScript file somewhere that sets up that object and it has various functions. And by passing it into this set of brackets here, it passes it to the anonymous function as blocks and elements. And then we can use it in our code. Okay. So that's what that syntax is doing. Then you'll see inside of that syntax, it uses element and it creates uses the create element function and it passes it to a variable. And then it uses blocks that it's passed through and it calls register block type and then it does all the same things as the JSX code passes in the name. And then it does this return, et cetera, et cetera, et cetera. Okay. So before we go any further, I want to share some more, some more links with you. There's a, there's a article or a document, should I say, let me pop this in the chat. It talks about scoping your code. And it talks about making sure that your code runs at the right time and all of those kind of things. But if we scroll down and I recommend reading through this document if you can. So I'll write it right at the bottom here talks about scoping your code within a function. And then it gives some examples, and then further down this that talks about this automatically execute anonymous functions. And that's what we're dealing with here. So it's known as an immediately invoked function expression or if I if e for short. So what it means is, they won't work because these functions will be called by no one we've only defined the functions we haven't executed in it. So what this code does it automatically runs. But there's a problem. And the problem is, if this code runs before the window blocks, when the WP blocks, or at least I say, before the window WP object, which uses blocks and the window WP element object is is instantiated. Then we're going to hit some issues we're going to hit some errors. So then we need to create what's known as the dependencies. Now, can I get a quick hands up for anybody who's seen in key. Seeing this function before in PHP. In WordPress. WP and Q script. If you've built plugins or themes and in the past, you've probably seen that function. Okay, so that's going to have a look at that function. In WordPress. A couple of folks received rights as the WP and Q script, script function, it registers some JavaScript either in a plugin or a theme to be used. And one of the parameters is the depth parameter or the dependencies parameter. And it's an array of registered script handles that the script depends on. And for example, if you are using and I think they might be a good example down here somewhere. Because the WordPress documentation in my opinion is great at this. No, there's not one day. Let me see if I can find one here. No. Yeah, here we go. So link a theme script which depends on jQuery. Here the example in the array jQuery is the dependence. So what that means is only in queue this script after jQuery has loaded so that when I start using jQuery functionality it's available to me. Because the way the web works is the files are loaded as they are loaded on the page. So if, for example, your plugin JavaScript file gets in queue before jQuery runs, and you start calling things and jQuery hasn't loaded, you're going to have errors. So that's why folks use the dependency. So if you're writing some code that requires jQuery, when you in queue it, you say one of my dependencies is jQuery. Yeah. So the reason I'm showing you that is because in this block code we are dependent on using window WP blocks and window WP element. So we need to tell our block that we need to wait for those things to load. And the way you do that, if we switch back to the create a basic block tutorial, step number four is you either build your asset file. In the react route, it'll build it for you. And this is where I was talking about manual steps that now come in and doing it the plain way, or you create the asset file yourself. And this is what it looks like. Okay. So let me go back to the react plugins. I can show you that quickly. So here in the build folder this file is created automatically for me. And it has a PHP tag and it returns an array with certain dependencies and one of those dependencies is block editor because it's using block editor. The other one is blocks and the other one is element. And then it generates an automatic version number. Okay. We now need to create that file for our block because it's not going to automatically be created for us. And what's nice about the documentation is that it has an example of what that code looks like. So again, I'm going to copy that out and it actually tells us here, create block dot asset dot PHP. So that's the file we need to create. So if we go back into our plugin and we create a new file here and we call it. So that's the react one. I'm going to be in the JavaScript one new file block dot asset dot PHP. And we pop that code in. Okay. Now in the react version was all on one line in this version. It's it separated out. It doesn't matter either way. It's there. And you'll see that it's using the WP blocks dependency, the WP element dependency and something called WP polyfoil. Now what polyfoil does is it fills in a whole bunch of of jQuery. Sorry, not jQuery, a whole bunch of react stuff for our plain JavaScript plugin. If you have a look at it somewhere down here, I can't find it now. I saw it the other day and I'm not going to find it. Actually, I know where I'm going to find it. One second. If we look at the, sorry, one second, bear with me here. If we look at the, it's the create element. So it's elements. So it's the packages called element to bear with me. I'm going to explain where I'm going in a second. It's a handbook. And we have a look at the reference guides and we have a look at package reference. And it was the element reference, which is done here somewhere. Here we go WordPress element. So this is the element package that we're using in our code. And it has here, it talks about installation. So if you're installing the module, in other words, you're going the react route, then you would run the install. It says that this package assumes that your code will run on ES 2015 plus, in other words, a modern environment. If you're using an environment that has limited or no support for these features, which is what the environment we're on, then make sure you include the polyfoil ship with this package in your code. And that is what this polyfoil is in our, in our block asset. Okay. You'll notice that in the, in the react version, the polyfoil isn't there because we don't need it because we're using the more modern way of doing this. Okay. If that whole document confused you, we're going to come back to in a second. I'll go through what I'm talking about there, but I just want to explain what polyfoil does. So blocks is, is a package that is available to WordPress that allows us to do certain things with blocks. There's also an element package that allows us to do certain things with elements. And then there's the polyfoil package. And now, because we've set up these dependencies, now our code should work. So theoretically, if I, there's a couple of changes I still need to make, but theoretically, once I've made those changes, we should be good to go. The first change I need to make is I need to change the register block type name that I've passed through. And that is exactly the same name as set up in my block.json. So I'm going to copy that over. And in my block.js, I'm going to paste that there. Okay. So for the purposes of this example, I'm going to change the hello world there to hello world and hello world. If you like the Spanish, that's cool by me. I just like the hello world. The other thing I'm going to do is I'm going to pop in JavaScript, just because I want to do that. It doesn't matter too much. Hello JavaScript world from the editor from the front. Okay. So once again, just to recap, we are telling this function, it's an anonymous function to run. And we're telling it to accept the blocks and the elements objects from or these packages from WordPress. We're passing them into these two variables here. Then we're setting up this EL variable, which is based on create element. And then we're saying using the blocks package, calling the register block type function in JavaScript, passing it in the name. And then inside of this object, we've got the edit function and the save function. Inside the edit function, we're turning an element using the paragraph tag. It doesn't have anything passed into it yet. We're going to dive into these functions in a second. So I explain everything what this is doing in a second. And then there's some additional information there. And then again, for the save function. Okay. Just to cover our block.json, we've got the API version, the title, the name, category, our media code and the file. And then finally, we need that block asset PHP file, which has all the dependencies we pass through. We don't have to change anything here. So what I like to do is I like to set up a version number in the plugin and then make sure the version number here matches the version number there, but that doesn't matter too much today. That's more of a personal. And then finally the learn JavaScript file, which is in queuing all of this code and making sure it works. Let me take this out so we don't have that there. So those are the four files that you have. Is there anybody who doesn't have those files yet who needs me to focus on one of them to catch up. Otherwise, we can start testing this thing and seeing if it works. Who's tested their plugin? Who's activated and tested already? Who jumped ahead? I'd love to know. Anybody? Or is everybody scared? Too scared. Fair enough. Have no fear. If anything goes wrong, if anything goes wrong, then we will catch up. Okay. Elizabeth is almost there. So Elizabeth, I'm quite happy to wait for you. If you need me to focus on any of these screens to catch up, please feel free to do. As otherwise, everything is on that document, as I mentioned earlier. It is all there. But I'll wait for you to catch up and then we will almost testing. Oh, almost testing. Oh, okay. All right. So it sounds like everybody's up to speed. Everybody's happy. Everybody's good to go. So those are the four files. Now, based on those four files, we should not have a working block. So let's have a look. Okay. So let me find my local WordPress install. I'm going to just remove this block from here. I'm going to go over to my plugins list. Yes. I don't want to say if this changes. I'm going to go over to my plugins list. I'm going to deactivate my react like these that I don't want to interfere with my, it shouldn't, but I don't want it interfering with anything. I'm going to activate my learn JavaScript block. Okay. I didn't see any errors there, which is good. I think I have debugging enabled on the site. I'll check in a second anyway, but there's no errors there, which is already good. And I'm going to pop into my post and you're welcome to do this along with me. I'm going to open up a post or create a new one. I'm going to hit this plus button to insert a block and I'm going to search for the word JavaScript. And the first thing I should see is that I should see WP learn basic block. I'm going to click on it. I'm going to click on it with the icon that I set. If you're not seeing that. So I'm, I'll get back to version number in a second. If I'm not seeing that, then it's not working. And then if I click on it. Yay. Hello JavaScript world from the editor. So that part has worked. So from the version number I was talking about, I was just saying in the, we had a test on the front end in a second in the block.asset.php code from the documentation. They include a version zero one. I was just mentioning that I often like to try and have a version number in my plugin and then tie it up to the block asset version, but we don't have to worry about that today. Maybe this time later I'll show you how I do that, but don't worry too much about that today. We can talk about version numbers in a second as well. Okay, so let's go back to the front end, or at least the back end of the website, if you will. It's all front end to me. So now let's see if we've got, if the save part has worked as well. So let's preview this on the actual front end of the website. And there we go. Hello JavaScript world from the front end. It's working. Right. Is anybody else not seeing that? Is anybody seeing it not work? It's not coming up. It's not available in the block list. Anybody, or is everybody seeing what I'm seeing? I'd love to hear in the chat. Eagle says not working. Okay. Anybody else? Okay. Adrian says all good. Okay. Excellent. So Eagle will get back to you in a second to do. So when you say not working, is it not showing up in the editor or is it not showing up on the front end? When you try and add the block, is it not coming up in the list? Not in the editor. Okay. Can I just confirm? Have you enabled the plugin? That's usually the first step. So have you got into your plugins list and seeing your plugin in the list there and then activated it? You have activated it. So what I'm going to ask you to do is... No, I don't want to update my software. Cancel, please. Thank you. Do you see... Are you able to open up your... Let me go back to the editor here. Are you able to open up your developer tools? So in Chrome, what is going on? Yeah, I'm losing things. Hang on. Sorry, folks. I've lost some things here. In Chrome, you can click on the settings and go down to... I think it's... Yeah, settings. No, it's not settings. Sorry. Then the more tools and then developer tools. Do you see any errors in the console that might point to what's gone wrong? So black names must contain a namespace prefix. Okay. So that might be related to the code. So let's have a look at your code. What is your... In your block.js on file, what is your name value here? Let's have a look. So wplearn basic block. Okay, great. And then in your block.js file, are you passing in that same value into register block? Oh, no. Okay. So if you can pass that same... So pass that same wplearn, wplearn slash basic... I can block into your register block in the block.js file. And then that's... And then if you refresh, that should get things to work. So you will have to refresh the editor because it's JavaScript. And you might also find... And this is something I actually wanted to chat about now as well. I also sometimes find that the JavaScript gets cached. And there's a few ways you can bust your cache, but the easy way is just to open up DevTools and right click on... In Chrome at least and clear cache and hard reload. And once you do that, are you seeing your block in the editor? Yep. Got it. Thanks. Okay. Excellent. Great. So there we go. Thank you for doing that on purpose. Eagle, I appreciate you doing that on purpose. Very important that your name in your block.js file matches the name that you pass into your register block type function call. Okay. So let's talk about some more of this code in the... So the blocks that register block type is fairly expensive. It's registering a block type in the editor. I think everybody can agree that's fairly expensive what it's doing. Passing it in the name, which we saw is very important so that it actually comes up in the editor. And then we have the edit function and the save function, which I mentioned what they do. The editor is what renders in the editor and then the save triggers and saves to the database. Let's focus on this code over here. And so what I want to do is I want to go back to the documentation that I was sharing with you earlier. And I want to explain what I was doing there. So the documentation that I was looking at was the WordPress block editor package reference. So every package that exists in the block editor world. So in other words, the blocks package and the element package has a reference document in the block editor handbook. Because we're not using... Let's go back to React. Because we're not using... No, that's the wrong file. Where was it in the source? I'm going to repeat myself now. But because we're not using this syntax here, it sometimes might be tricky to find the documentation for that package. But as you can see, it effectively uses the same thing. It uses the same name blocks in this case. So if you look at this block code, we can assume that there's going to be a reference about the element package and a reference about the blocks package, which there is. So if you go to developer.wordpress.org and you click on the block editor build blocks option over here, the third option in the left-hand side menu, sorry, is the reference guides. And if you open that up, then there is the block API reference, which is about how the metadata block JSON works and all of that. Core blocks reference, which is all the core blocks that get loaded and various other things. But then further down here, there is the package reference. Now, the package reference are all the packages that you can use in your code. And the two that we're using in our code is the blocks package and the element package. So let's start by looking at that element package. So if I scroll down and they're mostly alphabetical. So you see it starts with admin, Ali, internationalization, annotations, API, so it's all the A's and then the B's. And if we keep going, we keep going, we keep going down to E, we'll find the element package. And if we click on that, it says that the element is quite simply an abstraction layer on top of React. So React has an element package, which allows you to, in this instance, create an element, in other words, a JSX element, or render an element. And the WP element object basically is built on top of that. So when we're passing this WP element global object into our code, that's what we're pulling in. And as we said, if we were doing it the sort of React way, we might have to install this package. You don't actually have to install this. If you just install the WordPress scripts package, it installs everything for you. Yes, sure, I can make the script bigger. Can I? Yes, there we go. Let's go 125. And we spoke about the polyfill, so that's all good. But let's scroll down past this example. And let's keep going. And there it talks about JSX, which we're not worrying about today. But then underneath here, there's all the functions or things this creates. And the one that we're focusing on today is this create element over here. So I'm going to zoom in on there a bit. So this returns a new element. Now, when it says element, it doesn't mean an HTML element. It means a JavaScript, sorry, a JSX element, like we see in the JSX code, of a given type. The type can be either a string tag name, in our case, the p tag, or another function, which itself returns an element. So you can have elements returning elements returning elements all the way down the chain. The parameters are first the type, the tag name element creator. The second one is something known as the props, which is basically just the properties of the element. So you can pass properties around and use them, which when we get to use block props, you're going to see how that works. And then there is the third parameters, any children, any descendant elements. So now that we have this knowledge, let's go back and have a look at our code. So here we will see the EL is effectively at this point in time, it's doing, it's saying the EL variable is equivalent to the create element function call. We could just replace this, I'm not going to leave it like this, but just as an example, we could replace this with that. And that would be the same thing. But they're doing it this way by using EL as a shorthand. If you wanted to, what I personally might like to do is I might like to do something like this. So I create a local version of create element and then use that in my code because that's a little bit more sort of human readable. That's another option you could do either way works. I'm going to leave it like that for now. And then it's passing in those parameters. The first one is the P for the paragraph tag. The second one is an empty object at this point in time. So in JavaScript, the two curly braces as an object. There are no properties for this element. And then the children is literally just some text. So this means we could, and we're not going to test this today, we're going to get to that. But we could, for example, do something like that creates the parent element as a div. And then inside the children, we could make that a paragraph and then close at the end. I'm not going to do that now. But then you kind of see how the sort of JavaScript JSX HTML thing starts working. We're not going to cover that today because that's a little bit more advanced than what we have time for. But that's kind of hopefully explaining how this works and what it's doing. Okay. Excuse me. Cool. Any questions on what that means, how that's working, what's happening there before we start passing some props around? I'm going to, it's getting warm. So I'm going to take my top off and sip of coffee if there are any questions before we move on. Okay. It don't seem to be any questions. So that's, I don't know if that's good or bad. But let's move on. So I'm going to jump back to my slides here just to remind myself what I wanted to do next. So we've finished all our objectives number one, which is great. Now we've got half an hour for number two. So let's see if we can get that right. So we're going to be using use block props. Now use block props is a special thing inside of reacts that allows you to pass properties around. What's cool is that in WordPress, they've sort of set something up for us to use, which we're going to use. So if we've, thank you. If we pop back over to our documentation, the writing the first block type documentation that we were looking at earlier, we're back yet to the boulder add dependency section, which we've already done. We've confirmed it. So it's tested, it's working. We're happy with that. Let's move on to the next step. Before we do that, I just want to mention all of this code that we're going to be looking at over the course of the next few workshops is available in this Gutenberg examples repository. So I'm going to paste that there in the, no, that's not the one I want. I want the link. I do recommend going and checking that out afterwards as you become more, more familiar with with block code. It has this example with the JSX build and the plain JavaScript. So it'll give you a good idea of what's going on there. But now I want to scroll down and there's the dash icons link. And there's the block Jason made a reference. All of it is their link through, but I'm going to jump over to the next step in this tutorial, which is using styles and solutions. So in the using styles and style sheets, it talks about the block markup inserts HTML and you might want to start in some way. And there's a whole preamble. It talks about various things. And it talks about two ways to add styles. The one way is to insert the style in the block code. So you set up a constant with your style variables and then you pass it in using use block props. I'm not going to dive into this today because I prefer to keep my styles separate in a separate styles stylesheet. And the reason for that is it gives me more control over where my styles on what they're doing. It means I can change my styles without changing my block code. I just come from a I come from a web dev world where style sheets and block code are separate and that's the way I do things. But if you want to do it inside you're more than welcome to for today. I have also I find the this way of doing it a lot easier to manage as well. If we move down and it talks about you can you can set up a block class name. Okay. So here it starts talking about the use block props hook. Now a hook is a special thing in react that passes data back and forth. We don't have time to dive into what it does today. But if you if you import the use block props hook from the block editor package, you can then use it in your code and it'll set up a class name for your block. Now let me show you what I'm talking about. If I go back to my post and I add my and you can do this on your side if you've got your editor open. And if you click on it you'll notice that if you've used blocks before you'll notice the little top toolbar that comes up and you can do things with the block. If you click on this block none of that seems to happen. If you click on the let me just close my dev tools so we can all see what's going on here. If you click on the list view at the top. The block does exist in the list view. And I can click on here and I can remove it but I can't click on the block itself and do things with it. The other thing is if you inspect this block so I'm going to select the hello part. And I'm going to inspect it. And it opens up DevTools and opens up the elements and I'm hopefully going to get it into a view that you all can see. So I might have to zoom in a little bit. Which I can't remember how that's done. Hang on and click on the right place. There we go. There is the hello JavaScript world block there. And you'll see it's just literally a paragraph tag with the text. Nothing else. It doesn't have a class like everything else does. So I need to apply a class to it so that I can apply styling to it. And we do that through use block props. So the way use block props works is we import it into our code. And then we call the me sorry. And then we call the use block props function to then get the properties to pass it into our element. Again, the documentation is quite nice. It has this plain option for us. So we're going to click on the plain option. And you'll see that the first big difference between our code and this code is it has this block editor item coming through. And at the bottom here again, block editor. Okay, so let's start by adding that to our code. So I'm going to start by copying window WP block editor at the bottom here. And I'm going to pop it into my code over here next to element. So that means take the block editor from the global WordPress space and pass it to my function. And then at the same time, while I'm here, I'm just going to take that block editor there and set it up as a parameter in my function there. So the block editors being passed through. Now, some of you might be going, okay, but hang on Jonathan, you said earlier that there was dependencies that you needed to manage. You're not adding a dependency. Surely we need to update that block.asset.php file and you would be 100% correct. So if you scroll down on that documentation and those of you who were here for my live stream on Tuesday, I managed to get it included before today. So I'm very happy about that. I added this piece of documentation to this document the other day where it says in order to include the block editor dependency, make sure it's either run the build step or update the asset file. So if we click over to the plain version, you'll see that suddenly there's a block editor dependency that's been included in that asset list. Yes, Tristan, the trial and error did help. So we're going to copy that dependency out and pop that into our assets. Now again, this is where if we were using the build step version if we were using npm and build steps and all that that would happen for us automatically we just import block editor into the code, run the build step, we go, oh, you're importing block editor. Well, I need to add the dependency to assets and regenerate the asset file. Okay, so that's where this is a little bit more of a slip, but it means we don't have to have all those dependencies. Okay, so we've added block editor to the dependency list. Remember to make sure that after every single one there is a comma because this is an array in PHP. You don't have to do the common the last one, but all the ones above that otherwise you're going to get an error. So we're going to use block editor to get block props. So if we go back to the code, and we scroll up a little bit here, you'll see that what they're doing is at the top of each function is this line of code. So the top of the edit function is VAR block props, use block props from the block editor. So in other words, get the block properties from the block editor. And I'm going to show you where that comes from in a minute. So we're going to copy that out and pop that at the top of the function there. And then at the same time in the save function, there's a slight difference. It uses the same block props, but it calls the save function of block props and explain why that's happening in a second as well. So that's going to go at the top there. So the changes that we made now in the block that asset of PHP file we added the WP hyphen block editor to the dependencies. Okay. What I would suggest you also do at this point in time is update your version from zero one to zero two, because that will force it to cash bust, and everything will get refreshed when you refresh your browser so I recommend doing that as well. I mentioned about versions earlier. Then the second change we made was we included the block editor in our list of sort of anonymous function dependencies that we wanted to pass through so we're passing block editor through. And then we added that parameter to the function so it can receive the block editor. And then at the top of each function so just inside the edit function we added the var block props equals block editor use block props function call. And inside the save function we said bar block props equals block editor use block props that save function. Okay, we're going to stop there for a second because I see there's a question. Would it be good practice to add block editor after building the original block or at the same time you create the block asset file. You could do it at the same time. It means that your code will be ready to expect block editor to be available before it runs it won't break if you did it earlier. The reason that I showed you this today is if you're if later on down the line you need to add another item to this list because you need something else from a different package, you need to know to go back and add it to your to your block that asset file. But it doesn't matter which way you do it you could you could just set this asset file up like this from the word go every time. And then all of those packages will be available but for example let's say and we're going to get to that in the future workshop. Let's say you want to add internationalization functions that's another package so you need to add that package to the list that's being passed around and then add it to your dependencies so the way you do it doesn't matter too much. As long as long as you do it. Okay. So now we should have this block props variable available to our element but we need to pass it into our element, and it can get passed in in this object over here. So what we can do and if you have a look at the code you'll see it's doing that and I think it was Tristan appointed this out to me on Tuesday in my live stream, we just pass it in we replace the empty object with the block props object. We can just copy out block props there, and we can replace that with block props, and we can replace that with block props. Okay, now, while you're catching up, if you're still catching up. Block props essentially gets a bunch of properties about this block and builds up certain things. One of the things that it builds is a class name for our element. So that's the properties and the class name from the block.json file. So it takes the name. WP learn JavaScript basic block removes the slash and replaces that with a hyphen and prepends this with WP hyphen block. So our class name will end up looking like this WP block WP learn JavaScript. Okay, so some folks have an issue with that long class name and I understand that. So that's another reason why you might want to make your your prefix shorter. You might want to do WP L or WLJ or whatever to make it shorter so your class name is shorter. You might want to give your block name a shorter name so that that shorter that's up to you. But understand that whatever name you set up if you're using block props to set a class name. That's the class name it's going to generate. It's also going to use the block.json which we'll do in probably the next session to pass attributes around. Now attributes are things that you can set up for your user to be able to make changes to your blocks, and you set them up in your block.json and then those attributes get passed to your block props, and then they get passed around when your user changes them. So when your user changes them in the edit function, they then get passed to properties to the save function and that's how that all works. So it's a good idea to when you're building blocks to understand how to set them up, how to set up block props and how to pass into the relevant places. Okay, is there anybody still catching up with this code? It's only those changes that we've made. So it was adding the block editor to the asset, adding it to this code and then adding the block props lines and then passing block props into the function. But this should now work if we load up our plugin we should now see the class name in both the editor and the front end, and then we can start styling that. If anybody needs me to slow down, please do shot otherwise I'm going to grab a sip of coffee and then we're going to start testing this out. Okay, it seems like we're all good to go. I would just mentioned before we go on. This is actually a good time to mention this I am building this publicly in my GitHub repository, or in my GitHub account. So if you want to follow along with the code if there's something that's not working for you today and we run out of time. There's the WP learn JavaScript repository. And what I'm doing is I'm at each step of the way I'm going to create a folder inside that folders the code for that for that workshop at least with those two workshops or whatever, and then the current version will always be in the current version. So do feel free to grab this code at any point in time and have a look at what's going on there if you can't get things to work today, or if you want to do this later if you're watching the recording later. Last thing I want to mention, it is a good idea when you are developing blocks in your WordPress config file to make sure that you have WP debug enabled. So true. I didn't have an enabled. And there's another one called script debug. And that that does is it helps also with the cash busting. Don't worry about it today too much because we can just clear cash and all that but in your WP config file. Find the WP, WP debug constants that it's true. And then you could add the script debug it said that the trios one that helps with kept cash busting and making sure that you're getting the latest stuff. But don't stress if you're not going to do that now because it should all work. The other reason it should work is because we changed. Sorry, let me go back here in the block asset we changed the version number. That's another way to cash to cash the bust to bash the bust the cash. So if you didn't do the debug settings, this should still work. So let me go back to my video here I'm going to keep the developer tools open because I want to see what that looks like in a sec I'm going to close this down. Actually, I'm going to open it up because I want to remove that block quickly. I always like to clear everything out before I refresh then I'm going to hit refresh and I'm going to do an empty cash and hard reload just to make sure everything is clean. And now that's loaded, we leave the elements open there. And you're going to see two things have changed when I add my block. And you should see the same. When I add my block number one the toolbar works. And the toolbar works because use block props is being passed around. So it's a default thing that happens when you add use block props and enables the toolbar for your block. There's another good reason to include and you'll see the toolbar by default has the move up and down buttons. So now you can start moving a block around or the drag option. So you can start dragging a block around. And then obviously the little icon in the toolbar and the option to show or hide the settings for the block. So who's not seeing that. This is what defines what tools are included in the tool bar. I'll get to that question in a second Linda. I just want to make sure that if there's anybody who is not seeing that please give me a thumbs down or a no or anything in the chat. And while we're doing that I'll answer Linda's question. So Linda there is actually some custom code. No, no, that's fine. There is some custom code that you need to write to add tools to your toolbar. And we're going to do that in a future session so I will be I will definitely be covering that. There's a special this special packages you need to include and then you code the tools in the items in the toolbar. But we are going to cover that as well as items in the setting sidebar as well we will cover that in a future session. So you can go through the guides that we're going through and see I'm basically going to be. I think it says in this list somewhere let me have a look here. There's the sidebar. And there's the toolbar so it is there in the guide if you want to read through it we're not going to cover it today though. Okay. Cool. Let's go back here. And now if we inspect this item. You will also see and the windows of screens I'm going to have to move some things around here so bear with me. We'll also see me just inspect the right thing here. There it is. Suddenly, this block has a tab index, and it has an ID, and it has a role and all kinds of accessibility stuff, and it has a class attributes. So all of that is coming from the fact that we just added use block props. Okay. Both a block editor block list underscore block class, and then a plane just WP block class and then our custom WP block WP learn JavaScript basic block in my case class. And that's the class we can use to apply styling. Okay, but notice all this other stuff that it adds, all because we use use block props. That's another good reason to make sure when you're building your blocks, you always use use block props. Let's make sure it's doing it on the front end. So if we open this up in the front end, and we inspect this we should also see the same class name set up there it is. You'll notice that it's only the custom block class because that's all we need on the front end we don't need the accessibility stuff because it's not in the it's not in the editor anymore. But again we can use that to style this block in the front end. Okay. Is everybody seeing that on their block and I get some thumbs up or some thumbs downs, or some yeses or nos or yeses or whatever. Is everybody seeing that in their block can we can we move on we've got 23 minutes to do some styling quickly we shouldn't take long. And we've got a star by that except from Elizabeth that's great. Everybody seems to be with me that's excellent. Okay. So because we have a class, we know how to stop those of us who work to CSS for as long as most of you probably had. Yes at the moment nothing can change we haven't set that up yet we're going to be doing that probably next week. So so we'll get to that one nothing can change right now it's just a static block. But now we want to apply some styling and again the documentation is there for us it's all in here. So if we go back to the doc. And we look at the class name so set up the class name for us we've done all of this which is great. We've done the building or adding the dependency. Now we need to in queue the style sheets now this is very similar to using WP in queue style the old way. So you have to set the editor style and style attributes in your block Jason file. Okay, so let's copy out those two switch back to block Jason and this is one of the things I love about block development is I can just do this and block Jason and just work. So after the editor script I'm going to add a comma because this is a this is an object so it's common delimited similar to a PHP array. And I'm going to paste in the editor style and the style attributes. So it's looking for editor dot CSS in the roots of the plug-in so we're going to create that in a second. It's looking for style dot CSS in the roots of the plane. Okay, so that's step one step two is now to create those styles so let's create them. So inside of WP learn JavaScript we're going to go editor dot CSS. And while we're here let's create style dot CSS. Okay, these work just like any other standard CSS file. We're going to start with editor CSS, and it was WP block WP learn in my case JavaScript basic block that's the class name. Now if you've worked with CSS, you know that you use the full stop or the period to donate a class name not an ID. And then you can start writing your CSS code. So in my case, I'm going to just literally try and remember what was happening in the react one. So as far as I remember there was some padding. And let's go crazy. Let's make it 50 pixels. Why not. And it was background color was let's make it. It's going blue violets because I just I'm feeling like a weird color today you folks know me I like weird colors. And then the color let's make the color something that's a bit more contrasting so let's make that white. Okay, you can make yours read or any hex colors you want whatever you whatever you want to do that's all fine. But that is our CSS now for the editor version of the block. Okay, so let's go and look at that. And if we are going to now I can remove it here which is very cool. It's jumping around because I've got DevTools open so let's make DevTools a bit smaller. Let's remove it. And then let's refresh this page. Okay, and then let's add it again. Yay. Okay, so we've got the nice big padding happening. We've got the white text we've got the purple background in my case Linda says no pink. No I decided not to do click today Linda. Cool is anybody else not seeing this on their side once they've added their their styling and their colors and things anybody else not getting this. Edrants is not yet that's fine I can wait. If you need me to switch back to the code let me know. I'm going to just leave this open because I want to show you what's happening in the inspector. I need to move some things around you but I'm not seeing to get the styles higher up so we can see them. Okay, so the reason it's wanting to restore from backup is possibly because you hit save at some point in time so just remove the block from the post then hit save and then refresh and that should resolve the problem. I'm not getting the proper toolbar but getting the class and able to apply styles to it. Interesting. That's not a problem that I've seen before. I think I wonder why that could be happening. Not getting the proper toolbar but getting the class and able to apply styles to that as far as I know the toolbar. So as I know the toolbar comes with use what props I've done nothing else but add use what props to get this to work. So we are running a bit out of time what I would recommend is one of two things either have a look at the code in the GitHub repository and make sure your code matches that or if you like, if you can upload your code to a GitHub repository somewhere and send it to me either via Twitter or in the meetup group and I'll have a look afterwards. But if you get in the class name as far as I understand you should be getting the toolbar as well so I'm not quite sure why that's not 100% working for you. So let's let's see if we can connect somehow afterwards and figure that out for you. Happy happy to have a look. Okay, while we're here I'm just trying to sorry I'm just trying to get my developer tools to a point where I can see the stars because I want to show you folks something here we go here we go here we go. Okay. So the stars that are being applied to the paragraph, let's find them. There we go. Yeah, there is WP block WP learn it's all the cap. Right. Okay. Seems that everybody's either here or we've got a plan to solve solve things afterwards I want to make sure we don't run out of time. So now we can do the same thing for the front end. So if we switch back over to our code. I'm just going to copy this as is and I'll make some changes. And if we pop this into our style that's uses fall there. And then let's change the padding and make it 25 so it's half the size. Let's make the color something a little bit less glaring. So in my case I'm going to go with like a green color. Let's go green. Yeah, that's fine. And then we'll make the text color we'll leave the text color as white as well. Okay, so it's the same class name. We're just making things slightly different from the front end. I'll switch back over. I'm going to remove this here again. I'm going to update that and refresh things. I'm going to add it again just to make sure it's all working. So there we go basic block that's all working fine. Let's preview this. And there we go that's working fine. Okay. So because we're running out of time I'm not going to wait for folks to catch up I would like to recommend that you try this afterwards there's something I want to show you before we wrap up today. Don't get the front end styling right hit me up in the meetup in the comments and I'll help you afterwards but what I want to show you is something that's very important about the way the styling works. If you have a look, I'm going to have to move this up again. Why is this thing not working for me. There's the class, or at least the element with the class. And if we go down there's the, the front end style applied as we apply this. Okay, let's go back to the editor though. Let's have a look at that. And the reason I'm showing you this is because if we have a look at this, you will see that we find it. Both the green 25 pixel front end style, hopefully you folks can read that I'll zoom in a little bit. Both the green front end style and the editor style is applied in the editor. It basically loads the front end style, when you're in the editor and when you're on the front end of the website, and then overrides it with the editor dot CSS file and then makes those changes. Now I'm not sure the reason for doing this, but my understanding is sometimes you want to just have one version of the style, and then sometimes you need specifically editor styles, why they haven't removed sort of the loading of the style to load editor I don't know. I'm sure there's a reason we can go and dig into it, but it's something useful to understand is if you just set the style dot CSS, it's going to load for the block in both places which makes sense, because the block should look more or less the same in both places. The reason you might use the editor CSS is you might have some other piece of functionality that needs to look different in the editor. And the one, the one common example I have for this is there was a plugin that I was working on a number of years ago, and the functionality was that you would add the block. It would show a select box of all the different posts in the in the WordPress site, you click on the select box that would drop down you would select your post and then based on your selection. The block would refresh to what it was going to look like on the front end using various things. And then you could save that and show it on the front end. So we needed to style that select box in a certain way. And that select box is only visible in the editor. So that's why you would typically use the editor CSS stylesheet. But generally you can get away with just using the style for both front and back end of your block. Okay. Well, that's my bit for today we've used up all the time which I expected we did we would. There's not a lot of time for questions so I'm going to I'm going to kind of call that a day for today. As I mentioned earlier, if you haven't got anything working you can go and check out the code in this repository, which I will paste in the chat and I will update my slides with it as well. If you have run into any problems today. Shevon, for example, or anybody else, please do comment in the meetup group and find a way if you can to take the code that you have currently, either zip it into a zip file and stick it on a we transfer or Dropbox or somewhere, or pop it into a public GitHub repository or GitLab or any other repositories that you use. I will gladly take a look and see and see why it's not working I'm happy to help. If you have any other questions around this, please do ask them in the meetup group. As I mentioned next week we're going to be looking at adding code pen also works if you can load it up to code pen that also works fine. Just if you can get it to me in some way, carry a pigeon as well if necessary. I can probably grab it from there somehow. Next week we're going to be looking at adding attributes so attributes allow you to allow your users to make changes. And we're going to add some attributes to the block and then we're going to show you how to pass those attributes around. So if you're if you're interested in that please do hang around and meet me up for Thursday if you want to see how I put this all together on a Tuesday you welcome to join me on my live streams. I will enjoy yourselves today. The recordings I will post in the meetup group in the comments tomorrow sometime during the day, but they are all available on WordPress dot TV. So if you go to WordPress dot TV for example, obviously today's recording is not there yet. But if you do a search. Last week we were doing internationalization for example internationalization. Again, it should come up. You can also I think just search my name and all the things that I've done should come up. But I will be posting it to WordPress TV sometime in the course of tomorrow and I add the link to the recording in the meetup group. We are running out of time so unfortunately I can't handle any more questions I do apologize for that I hope you've enjoyed today's session. I look forward to building this block out more and more without using react. And if you as I say if you do have questions please do hit me up in the meetup channel or online. Have a great rest of your Thursday and I will see you all next week.