 As I start this video I just want to let you know that if you've watched my previous video in this particular series there are a number of things that have changed and you don't have to lose that knowledge because some things will be reusable. However when I was making this video series that was over a year ago so so many things have since changed like the way wordpress is built and the way the editor is it has advanced in this period of one year in that there are things that we would actually put in our settings that don't need to be they can actually just be part of the core development using the tooling and the components that have been made available inside wordpress itself in the core. So you'll see here in this previous video that I showed you how to use jsx which is basically using html in javascript and we saw how to use inspector controls, block panels, text area controls and so on. However the development of Gutenberg blocks natively has since changed because different components have actually been exposed so that you can use them. Previously we had to have very good knowledge of React as a framework to be able to make our own components but now wordpress has changed so much in that when I go to my editor I'm able to select just a small piece of my content, adjust it, make different changes to it and of course when I go to the settings panel I am able to do things like text color changes, make background changes to that effect as well as change the color of the links all the way to typography and all these other changes. Now if we want to keep our editing experience as close as possible to what we have in the block editor then we have to build things the new way. That means we're going to use things like the block.json file which we're going to see we're going to have a new way that tools are being used and if this is the journey you want to walk with me then let's jump into the code and the first thing that we should do is check that nod is installed and we should also check that npm is also installed. I'm going to use npx as a command and I'll type at wordpress slash and I'm going to go for the create block and then hit enter. I'll get this question whether I want to install this I am going to type y to proceed hit enter and this tool will allow us to compile our react and different modern javascript syntax scss and sas down into javascript and css that the browser can actually understand. Now this has been installed and it's asking me do I want to actually customize my wordpress plugin block and I would say yes so you can choose whether you want to use a static block or you want to use a dynamic. Now in my case I can choose a static or I can choose a dynamic so I'm going to use a dynamic for now and the slack that I want to use is travel it block native and I need to use a namespace so I'm going to just use take a press which is my name. I'll use travel it block for the name of my block and I'll say a block natively created to use good and back for wordpress and then the dash icon I can use anything right now I can leave it as a smiley and change it in the future or I can actually go into dash icons I'll go here to my browser and I just need to go to the developer.wordpress.org slash resource slash dash icon and since we're going to do travel we can use something that's more related to nature for example I want to use this palm tree so I'll just get palm tree here go back here I'll type palm tree in relation to text media widgets and so on I'll leave it in the design and then I'll say do I want to customize my wordpress plugin I'll say yes I want this to be outside of my wordpress repo so I'll add my github repo that I'm going to use so slash ytt take a press slash travel it block dash native so the current version I'll leave it as 0.01 the contributors are myself I'll leave the license as that and then I'll just say let's have that in languages I'll copy my github link and pass that as the uri for the plugin and then the tool will actually start creating our files that we need inside the specific part so I'm not going to go through explaining all these other files because we did that in the very first video of the series so you can actually go back and watch that but basically this is our file that has all the comments to allow us to initialize our plugin what I mean when I go back into my plugin section you'll see that we have the travel it block right here and I am able to actually activate by clicking this button but let's allow our installation to complete and you will see that in here we have a new folder called src which has all our different files that we are going to use while we are compiling our block informations that is the javascript and the scss and in here we're going to see that we have a new file that we didn't have before and this file is known as the block to json file now this file is the one that keeps all the different information that we have about our block and as we add more features to our block you will see that there are more options than what we actually just have here and that will allow us to explore and build more features into our block making our edit experience as native and as close as to what we have in the core of wordpress because we chose to have our block as dynamic in nature we actually have another file called the render dot php and if we go back to our block to json you will see that this is added here and you're going to see that this is the file that will be used to render and it actually has some php going inside here so we can do manipulations of different types in our php and that will actually get thrown on the front end and now that the script has finished installing all the files that we need you'll see that we have a node modules files here which houses all the dependencies that we use for compiling our block and you'll see that we also have a build folder here that has everything being exported so that it can be used on the front end or in our editor so let's go back I'm going to activate this block and you'll see we don't have any errors and if I go to my pages I'm going to come to the sample page click here and I'm going to add a new block which is the travel it block click on this and you'll see that we have this showing up here if I click update we should be able to go and view this on the front end and we have a block right here so if I am to inspect this block you'll see that it has a paragraph it has all the necessary things like the IDs the classes and so on and it's basically just html being thrown out and all of this is coming in from the javascript that we've written and if I go on the front end you're going to see that we just have a paragraph tag and the inner texts that were thrown in in the render file so you're going to see that this is just basically a reflection of what we have in the render file now some of the use cases of having this block.json is that we can actually come here and say we don't want to support the class name and we want to say let that be false so if I save this let's run this in our integrated terminal and I'm going to hit npm start and that will allow us to recompile our block now this will allow our block to be recompiled and I'm going to come back here I'll hit reload in our editor and I'll remove this I'm going to re-add the block here and say let's add the travel it block we'll hit update and then we'll go to view our page here and on reload you're going to see that if I inspect this very item we don't have a class name attached to this and that is simply because we've added a class name false right in here now this particular property stops the editor from creating a dynamic class so that we can use the html classes that we have written in our php and html however this is not the only property that we can affect in this particular case I'm going to use the align tool to make sure that our block can center left align or even right align and I'll also add a property so that we can see whether this allows itself to align wide inside the editor so I'll come back here to our editor I'm going to click reload here and when I click on this you will see that we now have the option of actually centering this or sending it to the right or we can actually say let it go full width so it blows all the way through our editor and we're not doing much we're just adding different small changes into our block.json file and it's giving us all the components that are available in core and we're adding them into our block with this we can now start to manipulate our block and make it much much better I don't want to make this a long video I just wanted to show you the possibilities that are here but in the next video we're going to start adding different components in here to make sure that our editor is actually editable and we have the different settings that we can click on and allow our block to look as we want it to do so thank you for joining me on this journey I hope you like the video please give it a thumbs up share it with a friend don't forget to subscribe to the channel and watch out for the next videos