 Let me introduce myself, I am Karthik working as a senior WordPress engineer in Multidocs for the past 10 years, I have a WordPress experience of about 10 plus years and saying that I have some knowledge of Wootenberg blocks and let me share with you today. So, getting into the topic introduction to Wootenberg custom blocks. So, what is Wootenberg block? So, Wootenberg block was introduced in WordPress 5.0 and at that time most of them were not interested in Wootenberg because it has some there were many negative, negativity points that were surrounded by Wootenberg and most of them did not like the Wootenberg block, editor of block. So, when they passed by Wootenberg became very popular in WordPress and then most of them, most of the website developers and business owners were interested in Wootenberg blocks and then they were trying to build all of their webpages using the Wootenberg blocks only. So, Wootenberg blocks is mainly building block of a web page content. So, imagine there are many, many blocks available in the Wootenberg page default, in WordPress by default. Some of them are text images, GALBs, BQs and many are available and we can just create some our own custom Wootenberg block as well and the today's topic is mainly about the custom Wootenberg block only. So, Wootenberg is just not untexted, it is a series of every content that we need can be incorporated into the Wootenberg blocks. So, moving to the next slide, what are all the benefits of Wootenberg blocks? Unlike other page builders like Visual Composer, Editor, it is frequently used in WordPress, it comes available by default in WordPress and whoever likes to start WordPress, it is the Wootenberg block is very much user friendly or beginner friendly and if someone wants to build a web page and he does not have any website knowledge or coding knowledge, he can just come into this WordPress backend and it will be very easy for him to navigate or make any sitting there, everything is very much user friendly and one more thing is that fast page loading. So, if you build any websites using Visual Composer or Elementor, there will be some page loading time based on the contents that you use. For example, if there is any images or any contents that are loading dynamically which is the pages the data from APIs or from databases or from custom postage, there will be some page loading issues and Wootenberg has advantage of if any dynamic contents are also loading, the page loading will be very much fast in this Wootenberg blocks and it is compatible for most of the teams that are in the market and editing experience. Editing experience is that you can just drag and drop the blocks from anywhere else from a section to another section, it is very much compatible for anything for any web page content, this Wootenberg block is very much compatible. So, coming to the next slide, what are all the types of Wootenberg blocks based on the contents, contents Wootenberg blocks can be classified into two types, static and dynamic. So, we have some categories inside the Wootenberg blocks that is like common, widgets that are all based on the types, but based on the content we have two main blocks that is static block and dynamic blocks. So, static blocks are like for example, as shown here paragraph, heading, list, code, code, details these are all the static blocks and dynamic blocks are post list, archives and latest posts. So, let me explain what are all the differences between these two static posts and dynamic posts, dynamic blocks. So, coming to the static blocks, static blocks contents does not change, you can just if you need to show some static content from the Wootenberg editor itself. So, it is it is the it does not have any content from any dynamic resource or database or from the API something like it. If you want to show some fixed content, you can just use the static blocks and unlike that in dynamic blocks, you can just base the data from APIs and from custom post state. Hope everyone is aware about custom post state, custom post state is a clone of posts, WordPress has a post, default post and a clone of post is called custom post state. And we can just customize it based on our needs. So, the contents are fixed in starting and it is a changeable in dynamic blocks. So, dynamic blocks is if in dynamic blocks if there is any real time change in APIs for example, if we are in a dynamic block we are showing some data from weather report, there is some data in weather report using a block. So, if there is any change in the weather condition and this dynamic block will be incorporated such that that changes in the API will be automatically shown in this block. So, dynamic it will be the content will be automatically changing, but in the static it is not like that. And they are suitable for external APIs, the dynamic blocks are suitable for external APIs and data sources that we use in external websites as well. So, examples of static and dynamic are as I shown in the previous slide. In static, for static we can take call to action block and separator the default blocks which are available in the WordPress mostly a static except some of the blocks like latest post and archives are the dynamic posts. So, in this session I am going to create a static Gutenberg block. So, I will show how to create a static Gutenberg block. In this session let me, CD is the change directly command. So, now I am in the plugins folder and I will be to the plugins folder. So, basically for creating any blocks we need node install in our system. So, I have already installed node.js in my system for installing node you can just Google node.js and install the latest version from this. So, you can just download the file and you can install it depending upon your operating system. So, now I have I will get it out here. Let me check the node version which I have installed in my system. So, it is 14.19.3, but I need the latest version. So, let me check what are all the available versions in my system which I have installed. So, npm and this npm is node version manager. So, I have the latest version 20.9.0. So, I am going to use the latest version npm use 20.9.0. Now, I am using the latest version 20.9.0 and the npm version is 10.4. So, it has automatically changed the npm version itself. npm is the node package manager. So, what are all the packages that are needed for the Gutenberg blocks will be handled by the node package manager. So, now I am going to add a tool which is called NPX. NPX is for node package execute. NPX comes inside the npm itself. It is a tool inside the node package manager which is used to create a plugin with a static block in the name of a plugin. So, let me show you. This is the command which is NPX WordPress create block and custom block is the plugin and let me add custom block plugin. This is the custom block plugin is the plugin name if you are going to create and this command will automatically create a plugin and the static block in our system. So, it will take a couple of minutes for installing this. So, up to this if you have any questions you can just stop me and ask any questions if you have the installation might take some few minutes. We have to create a dynamic one. We have to give a command variant equal to dynamic. It will be if it is a static block if dynamic block you can just change the variant equal to dynamic and the files also will be changed according to that. If static block means there is no need of PHP file in it. So, this command will not add that for example in dynamic block we will be having a render.php file which is used to connect to the custom post or the API something like that. So, that file will be created when we give the variant equal to dynamic. So, here we have provided only static. So, this handles the npx command it is a tool incorporated in the node package manager. This will be handling all types of the starting and dynamic blocks and the files that are needed. So, this will automatically handle that. So, changing dynamic is enough to create a dynamic block. It is the block that jso is the file that value actually. Block of? Block that jso. Yeah. Yeah, let me show you once it is created I will show you everything. So, there is one more question. So, for example let us say we have to... So, the render.php can be up with you know integrate with any existing package as well. All of them you can come in inside the... No, actually the basic thing will only be added in this command. Whatever changes that we need for example if we need to show any post from the custom post types or anything. We need to add the code based on our requirement. It is just a template like this. Okay, for example let's say I am adding a title. And then if I have to set up a color font size do we have to create a dynamic block for that? No, in starting block itself we can add the option for changing the colors font size. Provide default writing in Gutenberg code. Yeah, in starting block the Gutenberg provides it by default. Yeah, default if we want we can add our own itself. We can also add more options. I will show you one option by adding once it is done. I will create a static block. I will add a text box and a user input as well as changing a background color for that. Okay, so now it is done. Small question, sir. Why are we going to node instead of SQL? There may be SQL. Why are we going to node.js? Basically the Gutenberg blocks are built in React.js to me. So if we want to run any React code node is the primary node is the one which is node.js is the one which is needed for everything to run in our WordPress system itself. Okay, okay. Yeah, that's good. Now it has been created. Now let's check the plugin has been created or not. So the name which I provided in that command, it is the same name. The plugin has been created. So now let's activate the plugin and I'm going to the pages. Adding an image and let us check if that block is created or not. So clicking on this plus button we can see all the available blocks in our system. So custom block plugin which we have created is showing up here. So you can see, see this content which is custom block plugin. Let's jump up to the file. So I'm using Visual Studio Code which is a popular editor at that particular folder. It's a particular WordPress which I have created for this custom block. So this is the plugin that we have created. So you can see what are all the files that the NPX2 which has created in our local system. So we have a folder called build, SRC and node modules. Inside the node modules, you can see all the available modules which are created over here. So we did not add anything, just the command we run has created all these folders. So the block which is showing in the backend is showing from this build folder only. You need to understand. Build folder, I will let you know how this build folder is being updated. So we will be doing the changes only in the SRC folder. SRC folder has some files called block.json, init.js, scss. So index.js, save.js. This file contains all the data that we incorporate for that particular block. For example, the name. This is the name of the block that we have created. Trade block is the trade block and custom block plugin is only the name of the block that we have created. Title can be anything we can provide. So I have provided the title custom block plugin. This is the category widgets. So the block that we have seen will be the widgets category. You can see back in over here it is coming from the save.js file over here. You can see the same content over here. So now let us make something more interactive like the edit function. This is the edit function which is responsible for all the edit backend related functionalities. So let me check what are all the properties available over here. The props is the parameter which edit accepts over here. So let us check what are all the props that are available over here. So I am consoling the edit props in the backend. Let us check in the inspector element. So one more thing we need to do is that I have already told you that in the code needs to be, code is unique, backend is showing from the build folder. So now what we need to do, but we have changed the code in the src folder. Now in the build folder there is no changes. Only we have changed in the src folder. So how the changes that we do in the src folder should be, how it will be going to the build folder. We need some compilation process. What is the use of compilation process is that the codes which we have written over here in edit.js is the es6 code, ECMAScript 6 code, a 6 version. But all of our browsers does not understand this 6 version. It understands only the basic 5 version. So we have written in 6 version how to convert it to the 5 version so that the browser accepts, understands the code. So we need some compilation process which converts the 6 version to 5 version. So we need some compilation and it is, we have added some packages and methods in the package.json file in which we have written the, this is the main file from which the build folder is running. So here are all, here is the scripts that are mentioned for which we can build and start. Build is the command which is used to convert the es version, xmascript 6 version to 5. So in wordpress default there is a compiler which is incorporated in it. So we can, now we need to run the npm build command run build. You should find the folder. Yeah, sorry. I need to navigate to that particular folder because in that only we have the node module specs and running the npm run build. So now it has built. Now the changes that we have done in the SRC folder has been moved to the build folder. So let me check the console.log that we have added. See the console.log that we have added now it is showing over here. So attributes and set attributes are the main properties that is needed for some data handling in the custom block. So now every time if we do some changes we need to go and you can ask some question like every time if I do some changes I need to come to this command line and command interface and run the npm run build and it will be very difficult for us to every time do that. If I am doing a small change I need to come to this command interface and do the changes. So to avoid that we can write npm start. This will automatically compile the changes whatever we do in the SRC folder to the build folder. So now you can see now I am going to do some changes and it will be automatically compiled. Now let us go to the block.json in which we will be adding the attributes. Attributes are the most important thing in the Gutenberg block in which the data handling will be mostly taking place in the attribute. So we have created one attribute for example if we need to have some name, email address, phone number anything we need to create a separate attribute for each of the fields that we are going to use in the Gutenberg block. So now I have added a title attribute only and by default let me add a value all over this. As we have seen the attributes which are available in the console block we have seen this. Properties which are available in the props we can just add it away here like attributes and let me paste the title which I have added in the block.json. So that block.json attribute value will be available in this title that we have added directly in the block.json. Now we do not need to again run the command which is empty and start and it will be automatically saving our changes. And there was some error that is why the compilation has been stopped. Now it has been started again. Now let us check if the changes that we have done props is not defined. It should be props in the back end. Yeah sorry that is the console block sorry. The edit should have to be received. Yeah sorry the edit option should be in the property. Yeah it is an object so we need to add the attributes in the curly places. I think the lower which we have added in the block.json default value now it has been loading in the backend. So you can see the hello world is printed over here but it has been not saved. If you load the front end it will not change because we have not made any changes in the save.js file. So the same changes we need to apply to the save.js file as well. So let us add the attributes in the save.js as well. Gutenberg editor itself. Now I am going to the edit.js for including the rich text box we need to import some components from the WordPress block editor. So there are some components available. So rich text is a component which is available in the WordPress block editor. So we need to import that rich text first and we need to specify the tag name for the rich text. In which for example if we provide the paragraph tag the rich text will be surrounded by the paragraph tag in the backend. And we need to provide a value for that that we add as a typing. So I will just leave this default hello world in the block.json file. I am adding this rich text over here. Do we have to copy this to the save.js message? Yes but that is a small change. Once I am going to the save.js I will show you that. So let us check. The rich text is showing up here. You can see now the hello world is editable. You can see. So now previously it was not editable because it was directly from the block.json file. Now it is editable. So now if we do some changes it needs to be saved over here in the editor section and edit page. And then for that we need to add a small on change event. What this does is that we have already seen the set attributes as well. So we need to fetch the properties of the title from the. If there is any change that is in the backend we are going to do some changes in the title. So that change needs to be updated as well. So we are using the set attribute for updating the title. So on change of title there is an arrow function. Using the set attributes we are setting the title over here. So now let us check in the backend that is hello world. Hit testing and see if it is saving or not. It has saved and we are pressing it again. So the ones which we have updated has been saved right now. But in the front end it will not be doing any changes. It has already, why it is showing is that we already have the title in the save.js. So it is already saving the content from the backend to the front end. So the same rich text can be moved to the save.js like this. Rich text content, the value can be titled. We have made some changes and imported rich text in the blog reader. So that is why there is an error. So since we have made some changes in the save.js file again the blog has broken now. I am clicking attempt blog recovery and updating it again. Let me do some changes again. And updating it. And let us check the front end. Check. I guess if we are meeting type problem. So now there is a text box in the backend. Whatever content that we add in the backend now it is showing up in the front end. Now let us try to add a background color to this blue color. Let us try to add some background color. For that we need to add some more components into the WordPress editor. So let us add the inspector control. And one more thing we need to import is the panel body. Panel body is nothing but grouping the options that we are showing. I am going to make in the dive roundup here. We need to import the panel body from the WordPress components because the panel body is available only in the WordPress components only. So let us try to add the inspector control. Panel body we can provide some settings. So there is an error over here. Let us check what it is. So that should be a parent element which should cover all the content. That is why we have an error. So let us add a parent view over here. So now I am adding a parent color settings. Let me check the syntax for that. Sometimes I might forget the syntax. I will just use this inspector controls which I have already put over here. So panel body is the one which we can have many color settings. For now we have added the background only for the title. For example if we have many fields like title, email, phone, everything. For each of the things we can add some background color or color features like that. So panel body is used to group all of the settings that we are adding in the right side panel. So now we have added the inspector control which we have already imported over here. The panel color settings and the panel body. Now in the panel color settings we have an option called color setting in which we are going to add the background color for the title. So that should be another attribute. So background color is another field that we are going to introduce into the blog. So we will be adding this title. I have added a title bg over here. The title bg should be added as an attribute again in the blog.json file. So I am adding this title bg over here and the default can be empty and I type the string. Now the title bg, the color settings value is going to be the title bg on change. There will be when that if you change some color there will be a new color in that color panel. So that value should be also updated. So we are going to add a new color over there and the set attributes will be setting the value of title bg to the new color. So this thing all done but we now we need to update the background color where editor, so this one should be edited. By default what we will be doing? We will be going to the inspect element and add a style for that like this. We will be adding like this and background color, something like this we will be adding. The same thing we will be going to do in this code as well. First we will initialize title variable which is style title and assign it to an empty object. So now if title bg is not empty, so I am now setting the background color of the title bg. So to see the settings you just need to click on that particular block. So you can see the color settings that we have created has been showing in the right side and the title color which we have mentioned in the label. So you can see the panel body is the one which is showing up over here. So you can group many of the titles like background color, title or any of the piece that we are going to add. So I am trying to add a color over here, title piece. So background color that we have added in the background now it is reflecting in the editor. Now updating it, it will not change it since we have not changed any code in the save.js. So now let us load the changes in the save.js as well. So now it is done in save.js we do not need to import all of the inspector controls because inspector control is only in the back end and not in the front end. So we can just only use the variables that the properties that are needed in the front end. So we can just use only the main properties that are needed for the front end. So I have just added the style which is added in the attributes I am using in the front end save.js. Now the color which is changed in the back end is now reflecting in the front end and it is reflecting in the front end. So that is it with the static blocks and let me show you some of the static blocks which I have created in my projects. So these are all the static blocks which I have created in my project. So let me open up here you can see this is one of the card static block in which you can add the switch on and off the ribbon over here. You can add the title, you can add an image custom image over here. See you can add it, you can add the hitting that we show you one demo page as well in that which is already added and you can add the button name. If you need to add a new card just click on this plus button and you can add as many as buttons as many cards that is needed. So if you need to remove it just click on this and you can just remove this card. If you want to move it to the right you can just move it like this to left, you can move it like this, remove, you can remove it like this and each of the cards have a separate settings like this. If you want to enable and disable see the description at the top you can see over here can be switched on and off, the heading can be switched on and off. If you need to turn on and off the buttons you can do it like this and for the whole card section if you need to show a background color, background image you can just select a background image and it will be showing like this. So one opportunity you can just make these changes, you can incorporate into the custom blocks. So that's it with my presentation today. If any of them have any questions you can just ask. So one question is like for dynamic block there won't be any page render like page load.