 Welcome back to the channel. In a previous video, I showed you how to make a Gutenberg block using SCF, and the link is in the description below if you want to pick it up or in the card that has just popped up right now. And in that video, we learned how to make a Gutenberg block effortlessly, of course with some bit of code and so on. Now I'm going to try to make the same block using native WordPress Gutenberg tools. And this is going to be a mini series because I need to explain so many things from this particular angle. So I hope you stick around with me and go with me through the first video and the videos that will come next. If you are interested in learning how to build native Gutenberg blocks, then this is the series for you and the video for you. And if you're interested in this, then let's jump into the code because we are going to do the same block, but with a different treatment. Let's jump into the video and code. You might be asking, what's the requirement of making blocks like the ones we have here coming in from Gutenberg? And the answer is very simple. Most of these blocks have been built with what's called as React JavaScript. So WordPress go to React JavaScript or React.js for short and then it and interrupt it in a container so that you would be able to do a lot of these things using JavaScript. And of course, since WordPress has been using PHP, a lot of the endpoints have been made using the REST API. So you'll find that without the REST API supporting the post types that you have here, you're not going to be able to use Gutenberg or the blocks editor in the pages that you have. Now, of course, with WordPress 5.8, even this editor has been taken to the widget sections so that you can use paragraphs and all the other blocks that come in from the block editor. So the first thing that we need to do here is we're going to need to have a plugin of our own since we're going to be storing content. This cannot go in our functions dot PHP. This must not go into our themes because the way themes were made is to style things to style content. But plugins are a layer where you actually add new content store it so that when you change a theme, your content is not distorted. Rather, you have it still working even though you've changed the theme. So we're going to need a plugin first and foremost. But we are also going to use something from WordPress that's going to give us all the necessary files that we need to run our new block. So let's jump into my editor right now. And I'm going to go into the plugins and I'll open it in the integrated terminal of my editor. But you can use any terminal to do this. So in here we're going to require something called NPM. Now NPM is short for Node Packet Manager. And this allows you to have different small small pieces of JavaScript. And then you can use them together to build something that is big or something that has different dependencies. So the way you check whether you have NPM installed is by checking NPM dash V. And when you hit enter, you should be able to get the version of Node that you have here. Now, if you do not have Node installed, I'm going to advise you to go to Nodejs.org. And then you will install the latest version for your particular machine. Right now I'm using Mac OS. So this recommends for me the Mac OS version. But if you're on Windows, it works the same way. Just download this, install it. And then you'll be able to run and have NPM on your particular machine or run Node. So after doing that, we're going to use a new command, which is NPX. And after that, we're going to write at WordPress. And we're basically telling NPM, please go check the WordPress repo, where they're storing all the Node packages and then look for the create block. And this is telling NPM that please go check the WordPress section. Check out for where they've stored all the NPM scripts. And then you're going to look for the create block. And after writing create block, we'll add a space and then we'll add the name of our new block. So I'll say itinerary block and hit enter. Now NPM will do its thing. And you'll see that it's going to install all the scripts that we need inside a folder here called itinerary block inside the plugins section. So let's see all the necessary scripts get loaded in here. And we shall begin to work. You can now see our new folder called itinerary block. It has some files inside it, like the edit.js. It has the CSS files that are needed, other SAS files. We have an editor.config. We have gitigno block.json itinerary block.php package.json and a readme text. Now I'm going to go through what each one of these does as we actually allow NPM to install all the node modules that we need to run this. Now if you don't know what node modules are basically we'll start from the package.json file to explain those. So the readme text is basically just a file talking about what this plugin does. The package.json is a file that actually stores all the dependencies that are going to be needed by this plugin. So you'll see we have the name of the block. We have the version. We have a description. And all these texts are editable. I'm going to just collapse them so that you can read everything. So we can actually change the description here and we shall say this block has entries for our itinerary. And then the next thing we shall do is we're going to see if the author is none the workplace contributors. We're going to say this is take a press. We'll allow that same license. We'll allow the main to be index.js which is okay. We'll see what that means because we have an index.js file right here. When we shall run some of these scripts like build you will see that we'll get a new folder here which is called build. And this build will have an index.js file. Basically this file is saying please start reading this plugin from that particular folder. So we also have the scripts here that are going to be needed. So we have a script here called build that's going to run the wp scripts and build out the block that we want to have after we finish developing it. It's going to build out only the minimal javascript that we need to run that block. We also have the linters. So this will allow us to link our CSS. This will allow us to link our javascript. And basically that means if we've written it poorly we can make it look right. I'll show you how to do that. And then we have a stats which is going to start running the javascript in the background. We also have the packages update which is basically a script that will allow us to update all the packages we have in here that are going to be dependencies and then make them to that latest. Should we be having WordPress changing the packages and giving us new ones and having them in a better way these packages update should be able to push us up to date so that we have good javascript running. Now next we have this itinerary dash block PHP which is basically the usual file that we install or write whenever we have our plugin for starters. So you see we have a plug in them. We have a description. We have the requirement for it to actually work. So this is requiring 5.8. It requires a PHP version of 7. This is the version number of this plugin. We have the author. Now some of these we are going to change so that they are like what we have in our package.json. So I'll copy that. I'm going to change our description for starters. And then I'll change the author as well in here. And then these others will actually look fine and then we're going to start looking at the code that's inside this particular PHP file. So let's go to our back end. I'm going to go back to the plugin section. I'll leave this page. I'll go into the plugins. And you're going to see that we have itinerary block and this plugin is ready for us to activate. The only challenges we are still installing because this takes a little bit of time. So don't worry. Just let it run. It's installing all the node modules that we need inside here. So we're going to take a peek inside this file that's installing and I'll explain what's going on. So you will see we have all these different files that are showing up in here. And they're importing things like React, JavaScript, they're importing things like Redux which is used for state management. And then we have things like that are going to help us to compile all our JavaScript into one particular file or a number of files should we specify. So if you are not well-versed with things like NPM or well-versed with things like React, JavaScript I would advise you to just stop for now and then move to learn those. But if you're interested in just getting to know how this works then you can stick around and maybe finger it along the way. But it is good for you to know how to work with React and JavaScript in general. So we'll continue looking at the other files that we have. We have the gitignore file that's basically a file that tells our git or our environment that is taking note of the changes we are making. Please ignore this. Don't include these files. Then we have the editor.config which allows you to basically have the same coding standard even if you're using different editors. So this is a file that's used by the editors to figure out what's happening like you should have an end of the line you should have an indent style of tab and so on. So the next folder that we have is the src folder which is basically the source folder and inside this folder we have the index.js which includes all the files that we are going to have running in our block and you're going to see that we actually import style.scss which is right here and then we also import the edit file which is right here, the edit.js and then we have the save.js which is also right here. Now you'll notice that you don't have things like JS, you also don't have the same extension here which is perfectly normal in modern JavaScript this is what's happening so we're just importing these files and using them. Now you will ask me how come we're not importing the editor.scss this editor.css is actually being imported in the edit.js you can see it right here. Now each one of these files has its own functions like the editor.css is going to import the CSS that you will see in the back end of the block. Then the edit.js is the one going to deal with the JavaScript of the block in the back end and then you will see the save.js which will also work in the back end to save your block and then you will see the style.css which is actually showcasing the block on the front end so you can determine how the back end will look like and also how the front end will look like you can be exact to the pixel so that you have a perfect block at the end of the day now these are the files that come by default from the WordPress script and they are the ones that we are actually going to use to make our block. You will now see that our time here is telling us some things have changed so now the JavaScript is being formatted and then our block is being compiled so we are near the end and we are going to see our first block that we built just by running that particular npx line and you will see that now our code has finished running we have the build script right here and you see the index.js and that's the file we talked about when we were looking at the package.json so this file is going to run first so everything that's going to be read is going to be coming from this particular file and you will see that it's one long string of JavaScript that has been actually compressed and made into JavaScript that's readable by the browser and that is simply because React is not read by our browser React has to be compiled and that's why we have things in our modules like Babel inside our node modules right here to compile all that code so I'm going to actually go choose this command that we've been told to do that is to change the directory go to our itinerary-block file and inside there we're going to run this script called npm start and basically we're telling our one npm run this line called start right here and we're listening in from this spot right here so webpack is going to run and it is going to be watching all these files so that whenever we make a change it's going to show us that a change has been made so for example if I come here and I remove this comment and then hit save we're going to have this compiling of the code again to show that we've made a change so I'll undo this and hit save and you will see that this we compile so that we have the most updated version of our block inside the build.js right here so I'm going to go back to our block I'm going to reload this I'm going to click activate and you'll see it will tell us that this WordPress version that's currently installed does not meet the minimum requirements for the itinerary block and therefore this block needs 5.8 and that is simply because in our itinerary-php we have this as 5.8 so if I change this to 5.7 and hit save I'll come back and reload this page and you will see that we actually have an error showing up here because something is broken that needs fixing but for now I'm actually just going to hit update to go to 5.8 so that I avoid all that unnecessary mambo jumbo I'll undo this click save I'll update my code to 5.8 and now we have a brand new WordPress 5.8 showing up all the different changes that have been made so I'm not going to dive into all the new changes that will go back to plugins and inside this you're going to see my plugin is activated and even if I go back to have my code right here and change this to 5.8 and then come back here and reload you'll see that I don't have any issues my plugin has been actually activated so if you want to restrict your block maybe you've built it for a particular version of WordPress you don't want to test it for lower versions it's going to be a pain to you you can restrict it to a particular version and then it will be running only on that version or higher so we're going to go inside our pages now I'll go to the sample page to edit it and inside here I'm going to look for the itinerary block so I can either use this plus symbol or I can actually go right here and look for the itinerary block type it nari block you'll see it's right here or I can actually just come here and add a slash type itinerary block and you'll see it's added there so I can add it from the different angles of our editor and these are going to be ready for saving so I'll hit update and if I go and preview my page you'll see that we have our first block showing up right here and then you see it saying hello from the editor and here it's saying hello from the saved content now how is it doing that that we have something different on the back end and something on the front end like I shared with you in our video we have all these files and these files are compiled into this build folder where you have the index.js you have the assets.php the css files right here now the index.js of course is going to supply all the javascript and you can see that webpack has converted all according to something readable by the browser you'll see we have a php file here index.asset.php and it is holding all the dependencies that we can get from the block editor from wp blocks from wp element from the internationalization or the translation script we also have the wp poly fields and it gives us also a version number of this particular block we also have the index.css which is basically the css we see inside the editor and then we have this .map file which is basically from the conversion of scss into css if you would like that would be good knowledge for you to pick up and then we look at the index.js which is also a map file just to correspond the changes that are made in the index.js we then have this style .index.css which is the style that we show on the front end of our page so we don't have to touch any of these files we can leave them the way they are all the changes we are going to do are inside this src file and what I'm going to do is just change some css on our style.css here I'm going to change this to red I'll hit save and you're going to see this is compiled so if I come back here and update my backend you're going to see that all these are red and on reload on my front end you'll see that these are also red because I changed the style.css file now if I undo this change you're going to see that when we come to the front end and reload it's still blue as the change were reverted and if I reload this here you're going to see that it is blue so after changing this to green I'm also going to change this to a 5 pixels so that we can see around our block a bigger border I'll come back here I'll reload you're going to see that now we have a green border around our block right here and if I go in the front page you'll not see that border because this particular editor.css only affects the back end it does not affect the front end so you can be able to do things that help you debug on the back end as long as on the front end they're not showing up so this is our first block we've made it it's actually perfect so the one thing that I'm going to do is just explain one more thing and then we shall close off this video and wait for the next video where we start making our own changes and adding our own things inside the block so if we look at this itinerary dash block file we have this particular action called init and this init is saying when we initialize WordPress we should run this function and this function here is going to actually register a block and it's using this method which is called register block type and it's taking in this particular directory where this file is so it's saying register the block that is here and then go to this directory this particular method is going to be looking for a file called block.json and inside this file we get to see a number of settings that we have here of course we shall edit them we shall make some changes we shall add more things to it but by default it comes with the name of the block and this has the name space of the block and the block itself it also has the version of the block it has the title it has the category where the block should go it has an icon that is coming from dash icons it then has a description it says the HTML is not supported so we are not adding in any custom HTML or whatever it's saying no don't support that it has a text domain to allow for internationalization or the translation of the block it's loading the script for the editor which is the index.js coming from the build again and then it has the editor style which is the index.css then it has the style for the front end which is the style dash index right here this is the final file that we need to have our block running and we can make a couple of changes so just like we did with the package.json and our index file I'm going to copy this to save the proper description of our file and that will not break it it will rebuild but it will not break our block so I'm going to reload this and you'll see that when I click on this block it is now giving us the proper description right here this block is for entries for our itinerary let me change it and say make changes make changes for the itinerary here so I'll save this come back reload if I click on this block or any of these you're going to see that the description is showing up here now this little smiley that we have here is coming from this icon here so I'm going to use some dash icons to actually change the look of our block and the way we know which dash icon to use is we can come to dash icons we come to developer.wordpress.org and then we are going to look for the resource folder and we're going to look for dash icons inside there so I'll hit enter and we can choose from any of these icons that we see here to make it work so in order to make our itinerary look smarter than what we already have I'm going to use this gallery I'm going to use this icon for the gallery which looks nice and I'm just going to copy only this images dash out I don't need to get the dash icons dash images and so on I'm just going to say images dash out I'll save this I'll come back to our back end here reload and when I click on this you'll see that our dash icon is now being applied inside here dash icons are actually a font type that is applied inside WordPress they are native to WordPress so you can use them and then you can change your block icon right here now you need to know that there are some changes that if you make on your block to JSON they are going to break your particular block so for example if we change the namespace of our block right here and say we're going to give it a namespace of take a press it's a great thing to do because you don't want to have the same namespace as so many other people because that will clash with your block so you give it your own namespace and then you can give it any other name right here so I'll save this I'll come back to this back end I'll reload this and you're going to see that our blocks actually break and that's one of the things with WordPress blocks if you are developing them be very careful and make sure that the traces you make at the beginning are the right one I'll go back to the code and revert the changes to the namespace I had made and then we'll see our blocks again we'll start making changes to our default block in the next video and at that we'll start adding some things inside our panel here that will allow us to have new settings that are going to show up inside our editor here so if that's something you're interested in seeing then wait and watch out for the next video otherwise enjoy whatever you're developing