 Welcome back to the channel. In the previous video, we actually created our first block and we saw that all it did was just have the static data, we managed to change the icon of it and also change its description here. So, what we are going to do today is we're going to add some particular pieces that will allow us to save settings of what our itinerary block is going to be. So, the first thing that I will do is go to developer.wordpress.org and I'm going to go inside the blocks and I'm going to go inside build blocks right here and here we actually see an example of what the blocks will look like. So, we have this section here which is a block inserter. We have the block editor content area and we also have the settings sidebar right here. So, the things that we're going to add are actually going to go inside the settings sidebar for us. Now, your question would be how do I know what goes where and so on. One is you can try to read the documentation but that's going to be really crazy. It's going to take you quite a while before you can build one block or you could actually just go to github.com, go to the wordpress account and then go to the gluten bag repository. So, inside this repository you'll go to the packages, you'll go to the block library and inside here you're going to find a number of blocks that have been built in Tuko that you can actually use as a benchmark. So, for example, if I go to the audio block I can look at the edit to JS and then I'll see what has been built and whatever I see from here that's beneficial to me, I will take and use inside my own blocks. So, for example, you will see that we have block controls here being returned, you have an inspector, you have inspector controls, you have figures showing up here and you have this weird looking markup here which is quite funny. Now, you need to remember that we are working in React JS and this is valid markup for it because what React does is that it uses what we call a virtual DOM. Now, to do this correctly, you'll need to go into your editor, you'll open up your block that you're having, the folder and since we're going to be working on the back end we're going to open up edit.js and right here in my integrated terminal or you can use your terminal or whatever you use and you run npm start. Now, this will help us to compile any new changes we're going to add to our JavaScript because we already installed those files. So, if you're jumping into this video before having seen the first one, I would advise you to just go through it, get to know whatever it is, especially if React or block building is something that is new to you. So, please go set up first and then come and watch this video. So, let's continue. Now that our compiler is starting to compile everything and put it in the right place, we're going to start experimenting with writing just a simple div and you will see that my editor is already giving me errors and it says that JSX expressions must have one parent element and that simply means that you cannot have two items on the same level as the starting point. You will need to actually just push this inside this and then you can be able to have a number of other divs or paragraphs of whatever it is but you need to have this initial item showing up right here. So, I'm going to save this and you will see that this is going to compile and I want you to notice that we have this use block props and it's attached to the paragraph. It's not attached to our div. So, I'm going to go back inside our editor, I'll reload this and when I click on this and inspect this particular block, you're going to see that all the parameters, the IDs, the class attributes, tab index and all of that are in the paragraph. They're not in our parent item. So, the first thing that I'll do is that I'll move this JavaScript from here and push it here so that we can be able to utilize all the different props that we get for this block starting from the parent item. Since we're going to be working with the settings that should be coming inside this location, we need to have what we call the inspector. So, I'm going to get the inspector controls and then I'll close that off here. Now, you'll notice that as I wrote this inspector controls, this was automatically imported as a component from the WordPress block editor and that is simply because the setup that we have visual studio code editor that we're using is built on TypeScript and even these scripts that we have in here also appreciate what TypeScript is. So, they automatically import that for you and then you can use it in here. So, for our controls, the next thing that we're going to have is we're going to look for a panel and this is with a capital P. So, when I open up this panel here, you'll see that it was also imported for us from the components. So, we have a panel. The next thing that I want to do is actually just have a panel body and if I click panel body here and import it, you'll see that we'll have panel body coming from the WordPress components. Now, this panel body has its own attributes. For example, it has a title. We can say the title will equal to and then in here, I'm going to say itinerary details and I'll save that. Let's wait for this to compile and after compiling, I'm going to go back to the front end. I'm going to reload this page and it would be wise for you to actually keep your console open to catch any errors that we'll be coming in from JavaScript because we're building on JavaScript. So, when I click on this block, you're going to see that we now have this new item here, which is the itinerary details, which we can collapse and open at any given time. So, in here is where we're going to start adding our different items that will be saving our data. So, here you see we have this radio kind of group. We have this text areas. We also have this image that we'll need to upload here. So, I'm going to start working on those by starting with these items right here and remember I told you the best way is to always look for things that have something that is similar. So, since I don't have anything that looks like that checkbox that I'm looking for, I'm going to go back to the block editor documentation. I'm going to look for check box and you'll see that we are provided with a checkbox control right here. So, I'll click on that and you'll see that it gives us this option. We see that this is exactly what we want to actually have. So, I'll scroll down and I'll look at the sample code that we've been given. So, you see that it returns this right here and it is imported from the components. So, I'm going to copy this. I'll come back, add it into our panel body. As a checkbox, I'll tap this in to have it properly aligned and then I'll bring my checkbox control and I'm going to pick it from the components of WordPress. So, I'll save this and you're going to see that it compiles very well. If I come back here and reload this page, you'll see that this is broken because it's checked, it's not defined. So, what I'm going to do is just comment these two lines out and let's see what happens. So, I'll come back here and reload. You'll see this compiles very well and you'll see that we have a checkbox here to tick on and off. Now, it also breaks because there are a couple of things it's expecting and those are not met. So, we'll come back here and we'll see that there are a couple of things it uses as a use state which is going to be broken because the way WordPress blocks are working right now, this is not the way to do it. You need to set your attributes inside your block log JSON and we shall see that when we are trying to save the data. So, in order to have a number of these, I'm going to come back into my code. I don't need this help right now. So, I'll comment that out as well and I'm going to change this and say this needs to be breakfast. I'll move this all into one line. I'll remove these other pieces that I don't need. I'll duplicate this over and we'll have our lunch and then we shall have our dinner. So, I'll save this. If I come back here and reload, you'll see that if I go to this component, we have breakfast, lunch, dinner. If I go to this component, equally it also has breakfast, lunch and dinner. When I tick them, you'll see that you actually get errors down here. If I uncheck them, we also have the same error showing up right there. Now that we have this, I need to actually make up some of the other items that we need. For example, we're going to need these text areas showing up here. So, I'll need to look for a text control and you'll see we have a text area control inside our documentation and it will look like this. If we keep scrolling, we should be able to find out how it's used and we have our text area control right here. So, I'll copy this. I'll come back here. I'm going to put it just above the breakfast. I'll tab everything in. I'll comment out the unchanged because that's going to require a function which we don't have yet. I'll remove the help and then I'll put this also on one line for now because we don't have much to say. I'll save this. I'll give this a label of title because we want to be able to label that title. We also want to have the PM overnight AM. So, we're going to have those duplicated. So, we'll have AM. We'll have PM. We'll also have overnight. That's what we're going to need for now because we have the same thing here. I'll save this. I'll come back here. In my front end, I'll reload this. We see this is broken and it's selling as the text control area is not defined. So, we forgot to actually bring that in through our components. So, I'll pass that. I'll save this. Compiles. I'll come back here and reload. You'll see that it tells us text is not defined. So, I'll just collect all of these and remove them. Come back here. Reload. And when I click on one of these, I'll close this for now. You'll see we have our title. We have our AM. We have our PM. We have our overnight which are showing up. We also have this right here for the breakfast, lunch and dinner. And then we now just need to add the final piece which is this image right here. Now, if you remember this file, we saw something like media plus holder. So, we're going to copy this and we are actually going to use it inside our block. So, I'm going to come back here and I'm going to open up and say media changes to media plus holder. I'll close this. This should be self-closing as a component. I'll remove this media upload because we don't need that for now. I'll save. I'll reload right here on the front end. This is not broken. And you'll see that we have this clickable item that when we click, it will show us to either go on our computer if we click the media library, we can actually pick something from the media library. This is not the best way to have this. If you look at other things like an image block and add it, you'll see it has this image showing up in this area. It's not on the side. So, it's not a setting per se. So, I'm going to have to move this and then put it as part of our block this side. So, I'm going to come here and pick the media plus holder, cut it and then I'm going to come and put it in our new div that we have here. So, I'll remove this paragraph. This will be our div and inside here, I'll put our media plus holder. I'll save this. I'll come back here. I'll give this a reload and you'll now see that we have this being enveloped and it looks much nicer. When we click on it, we can be able to pick a logo or whatever we need to have or we can pick from our media library, something like this and add it. We're going to need to have different sections that can actually contain the item and do the rest of the other stuff. So, this works sort of like what we want to have. So, in the next video, we shall be adding the settings for each one of these fields. We shall be able to see how to upload our image and put it in our block and then finally save everything so that it's working. If you enjoyed this video, don't forget to give it a thumbs up, share it with your friends, let them know what's happening on the channel. Don't forget to subscribe if you're new here and you want to see wukamas and nice WordPress tutorials with other plugins, but most importantly, enjoy whatever you're developing. Otherwise, cheers.