 Welcome to this workshop, in this workshop we will learn how to create a blog from scratch in Gutenberg, ok? Today we have a mission, the mission is very important, if we don't get to create a Gutenberg blog from scratch today, we won't be able to dream tonight without nightmares, so we have to pay attention and create the blog correctly, ok? So, well, let's start. Ok, I am Pedro Crespo, developer of Movomo, a company that makes custom plug-ins and themes for world pre-handle commerce. And well, my tutorial is Pedro MCG95 and my same Movomo point-point com. This is the presentation. Ok, the preparative. So, I now sit down and we will start to get it out of theory about Gutenberg blog. It's fine, it's fine. It works, there? Ok, I use both. Ok, I have to be so near here. Ok, let's start. Ok, perfect. Ok, the first thing we have to install is Node GA, ok? We will need to have Node installed on our computer to be able to work with the Gutenberg blogs, ok? So, this is the link, ok? We have to install three things, so I will give you time to install and download everything, ok? While we are installing and downloading everything, I will be telling you a lot of theory about Gutenberg blogs, ok? So, don't care. The salinos of everything takes more or less seven minutes, so don't care. If you don't have installed Node.js, let's start, ok? The latest version. You don't need the latest version, but you can go to the page and it's the same, ok? We need a WordPress installation where we will be able to test our blog, ok? So, I personally use localWP. It's a very great tool, ok? We can have a lot of different WordPress versions installed in our PC. We can test our plugins in different versions, so it's ok. You can go to this link, ok? And download, ok? And after this, we will use the package of Node WordPress slash createBlog, ok? This tool is official of WordPress, and this tool, you can use it to create Gutenberg blogs from scratch, ok? If you install this package and use it, you will get a blog of a text perfectly done with a lot of comments, so you will be able to learn with the blog and read a lot of documentation, ok? But I will explain you every important file inside of the plugin, ok? And I will explain you the functionality of all, ok? So, let's start with the installation of the WordPress, ok? To give you time. I have here the localWP installed, ok? I press this button at the local side, create a new site. E, por exemplo, o Camiúro, 223, ok? We have to click in advanced options, everything, ok? Ok, I have another, so, two, for example. Or a watch, ok? Let's continue. We have to click in custom, ok? Set the correct version of PHP. We have to try to at least take the most advanced version of PHP, por exemplo, the 8.1.9. The web server, this tool usually install the engines, ok? But I prefer always a patch. And the database, use mySQL 8.0.16, ok? Let's continue. Create the most advanced security user and password. Admin, obviamente. Your email, ok? And this will take no more than one minute, I think, ok? This will be very fast. If is your first time creating a new local site, maybe you have to give permissions to install, ok? Like me, por exemplo. It's not my first time, but he asked me for permissions, ok? Ok, we are downloading WordPress. Ok, let's see if the internet connection is well here. I think that yes, ok? After this, we will open the folder WP content. And go to the folder plugins. And we will write the command line of the slide before. Ok? We will have to write this command line, ok? With no installing. Ok, same? What? Inside of the plugin folder. Ok? So you have installed, you have one installation of WordPress already. So you can write the command, ok? Because this command has more or less need 7 or 8 minutes to create the plugin, ok? So start if you can. Ok? Ok? We will have time to do it. Ok? I have now the WordPress installed correctly, ok? In this tool we can set this option, one click admin to on, and set the admin to always login as an admin. Same? Ok, perfect. This command, ok? Well, I will go to there now. So don't care. I will go to this link, ok? To the go to site folder in the local tool. This button will open the installation of the local of our WordPress site. We go to app, public, WP content, plugins, and inside of this we have to open the terminal and press and write the next command. I can copy and paste, but I will give you the time here, ok? NPAs, roba, WordPress, slash create a blog, for example. Ok? Well, let's start this, because it takes more or less 7 or 8 minutes, ok? If I can't install this, I have another installation with the tool installed, so don't care. Can you read that please? Ok? You only have to say yes, ok? Because now this tool hasn't asking me, ok? But after this installation, you just have to... I will say later, ok? We have to wait a bit, more or less the most of the people have installed the tool, ok? This tool is very important because it's official by WordPress, ok? And I began with the WordPress blogs of Gutenberg in 2089, I think, and I had to create a tool for this, and it was incredible. It was incredible, it was very hard to begin to create Gutenberg blogs, but with this tool we have easier to create blogs from scratch, so I am very happy with this tool, ok? How many of you have the... at least one WordPress installed in your PC? Ok, perfect. And how many of you have... is running this command line? Ok. A lot of you will have nightmares this night. We have to accomplish the mission, ok? Ok. So installing WordPress script. This takes a lot of time because this tool needs a lot of node modules to work correctly, ok? It needs a lot. If you try to move the folder, ok? Of this tool to another folder, it will take a lot of time because there are a lot of small files there, so try to write the... to type the command line in the correct folder that is in plugins, ok? Ok. With this line formatting JavaScript files, ok? We are finishing... We are finishing... ok. Now we have a lot of console commands, ok? The most important console command is the MPM stack, ok? With this command, we will say to the tool that we are programming Qtml block, and the tool will be... compiling, ok? Every time that we save a file into the fourth folder that I will show now, and we will export the information to a build folder, ok? That I will show you now, ok? And the MPM run build. This is to get a... a folder completely compiling and compress it in .zip and install it in a Qtml, in a WordPress installation, ok? So... Now that we have the plugin... the tool created, ok? And the plugin installed too. We can go to this button in WP admin, and we will now see our first block, ok? I can move a lot, ok? If we go to plugins, this is very important, because some of you may be think, oh my god, the tool is not working correctly, because I don't see the... the block in the editor. No, no. You haven't enabled the plugin, ok? In the plugin sleeve. This is... so... so simple. Activate the plugin, ok? We have the plugin here inside. Go now, for example, to pages. Add a new page. Name it, for example, blocks. And if we type here, slash, my first block, we will have here now our first block, ok? It's a very simple block, but half-ordered structure that we will need to create and edit the block, ok? So publish. And I recommend you to open this page in another tab, ok? So we will have these two tabs always open, ok? This is the editor side of the block. Say, the editor, the Gutenberg editor, ok? This is the editor side and this is the front-end side, ok? This is very important because in the creation of Gutenberg blocks we have two sides. The backend, the editor, ok? That is this. And the front-end side, ok? How many of you have installed the plugin currently? Ok, ok, ok. You will sleep tonight well. Ok? Perfecto. Perfecto, perfecto. Ok, more internet connection for the rest of the people. Ok. We can close that. We can close this. I will open my ID. New window. And for example I have to go to the folder the plugin inside of the plugin. Ok. We will have here some files and folders. I copy the path. Go to open folder. Ok. Select the folder. And now we are in Visual Studio Code with the plugin opening, ok? Ok. We have a lot of time. Ok. Now we can open the command line, ok? The console. Here inside of the ID or inside the folder, ok? You can say if you are in window they open the terminal and do the same, ok? I will do it in the console, ok? Here. And we have to type npm start and if everything is correct we will see these lines, ok? And now I have to tell you something. If you don't see nothing red here everything is well and close the tab, ok? If you see that you are programming the blog and you can you stop to see change in your blog there is something red in this console, ok? So you will have to come to here, ok? So we minimize the the tab, ok? And let's start to explain all the theory. Meanwhile the rest of the people is installing the tool, ok? Preparations, we have now the blog. Ok. Anatomy of a blog plugin, ok? Open the folder we will see these folders, ok? And these files. The build folder is very important because contains all our blog compile and prepare to use in Wordpress, ok? We will have to code anything here. We won't have to touch anything here. So if we touch something here possibly the blog will break. So don't touch this. Ok? The node models, the same. You don't have to open this and touch this for nothing, ok? If you touch something here possibly you will have nightmare, ok? So care about this. Ok? The source folder, ok? You will be here most of the time. Most of the time. So don't care. This is possibly the only folder that you have to open inside of the plugin, ok? We will go inside of the folder after, ok? My first block, ok? This is the typical PHP file that tell to Wordpress that this folder is a plugin with the headers and all. And we will have here more information, ok? I don't know. Do you see where the code is? Ok, thank you. Here we have all the definitions of the plugin or the headers, ok? I don't have to tell us. This is the plugin name description, ok? This is the typical thing in a plugin, ok? And we will have here the register block type. With this function we will be telling to Wordpress that we are creating a block and Wordpress can search all the files inside the build folder, ok? So really Wordpress is seeing all the time inside of the build folder not in the source folder, ok? Ok? Let's see with the readme.txt this plugin is important if you want to upload to the repository of Wordpress the plugin, ok? And tell to the repository of Wordpress all the information about the block, but I don't I don't understand this, ok? And not to me of a block. The block JSON, ok? Here we have all the source for the opening, ok? The block JSON in this file we will configure everything about our block, ok? Let's explain something I say you, more or less 10 minutes of theory and after this we will be programming all the time, so don't care the appy version in this line we are seeing to Wordpress which appy version of Gutenberg and are we using, ok? Cursing version is too the name, the name of the slug of the plugin, ok? You have to create here a string slugified, ok? The title of the block is here in the title, ok? You can write my first block, my second block my end block, ok? The categories, this is very important, ok? If we go to here if we go to here and click in this button and go to what was the category? Widgets, ok, thank you you are paying attention, ok? Widgets, so here we will see my first block so we have learned now that in this line in the category line we will be able to configure this is the category, is the block, ok? The icon, you put the icon that you want, ok? A smile we always have to be smile description so the description, ok? Supports, this is very important I won't tell you nothing now, ok? But programming we will be seeing here a lot of cool things this is very cool to play with Gutenberg blocks, ok? to surprise with them This is incredible, ok? The test domain to internationalize the lines of the block, ok? It's very important to don't write only the block in your language you have to let other people to translate the block into other languages, ok? In the editor script the location of the script in the build folder the editor style the location of the editor style in the build folder the style, ok? And Jason I have to go to here the index.gs This is like if the block point Jason is the metadata of the plugin, ok? If the information, the headers, no? Like the headers of a plugin the information the of a block, ok? In the index.gs you will program the you will connect the edit build with the save build, ok? We will connect we will connect this part, this code the code from here with this code, ok? the front end and the editor side, ok? ok? We will have the register block type ok? to register the new block is the most important possibly function here, ok? In this function we see here that we insert the name of the plugin, ok? the slack, we connect the edit and the save After if we have time we will edit these lines, ok? to make the block more or less dynamic ok? and render the block in the front end with PHP instead of with JavaScript, ok? but later let's go with the edit.gs ok? that is here is the file where we will be programming the site of the block, ok? let's explain a bit these two underlines, ok? R4 translating every string of the block, ok? they use block props, ok? this is to give to WordPress the ability to show into the container of the inside the container of the folder of the plugin, ok? all the classes every class every style from the support, from everything ok? so this is very important we will use there, ok? in the first tag of the code, ok? we connect the editor cc scss and export the file function edit with this function we will export to the index.gs the code from the editor site, ok? and the same to the save.gs with this file we will be programming the front end site of the block, ok? this will be showing after if we have time for render PHP ok? to render the block with PHP instead of with JavaScript, ok? we use to the use block props and the export the file function save, ok? it's very important because we have to we have to have here the same display code, ok? the same functionalities, ok? that here in the in the edit site, ok? and after this slide I will close the power point and like this this slide save let's go in ok? we will start to code here, ok? with that second we have a lot of code to program here so I don't want to remember nothing so this is important, ok? I think that you will see now the code well, ok? you see the code well? ok, thank you you are paying attention ok? this is the block JSON here we have the app version 3 ok ok, perfect I expect that anything change from the version 2 oh my god ok, perfect ok, ok? go to this file for example we are we are going to change something, ok? to see that this is running, ok? go to the go to this console, see everything green and nothing red ok, it's correct so go to the djs for example and change this state, ok? it's simple we possibly can change to hello from workam euro 2023 if we save this ok? and we go to this console this have changed this have changed but we didn't change, ok? everything is hitting, ok? so no problem we have to remove the block this is a bit bored but we reload the page and put the block inside the editor, ok? and save and reload the ok we are seeing now things, ok? ah, yes why is this? because we have changed the text in the edit file but not in the in the front side so we have to go here at this time the console the command lines don't have errors, ok? but there is here something that will throw the errors if you right click in the mouse, ok? click in inspection you will see here the console very perfect ok, this usually don't let you save the content, ok? if the content here is different from here show you a big red error so now no ok, don't care I wanted to show the error but well ok, we copy the line and now we will see the same text ok? yes, ok everything is well now we have the problem because the save the front side of the block have changed so the block break for this we have to remove every time the block and reinsert it reinsert it, ok? update and we have now the front side of the block change it, ok? perfect let's begin inserting some values, ok? to begin to to configure something, ok? I will we will learn how we will learn now how to insert variables here, ok? the variables here have the names of attributes, ok? what are the attributes, ok? are the variables inside of the block that we can use to store information of a specific of the block and connect the information between the save and the edit version of the block, ok? for example, we are going to insert now attributes attributes, ok? ok? possibly text, no? text I have the jacopilo but only for how to complete don't care for that, ok? it's very useful because it's reading all the node models so I don't lose any I don't lose any line or any import, so, perfect text, we have to configure here the type of the variable for example, if we want to save a string we have to say that we want the type a string, ok? if we want, for example to save a boolean is a yes or no variable we can type boolean ok? and this will store a yes or a no, ok? we will start with text, ok? text we can put here a string yes, the string correctly you are paying attention a string, ok, perfect the file for example we will use here hello work com no euro 223, ok? save the block json ok, now possibly we have errors in the console ok, everything, ok? if I, for example commit an error and save we will see this red ok, isn't red, but normally it's red, ok? but this have a stop, ok? and everything you do after this error won't be changed in the build file, in the build folder so, if you are programming chilling very well, ok? and you don't see any change in the block because you have a problem in your console, ok? so, check this npm start ok? we have the same problem because I haven't changed it ok, fill out the tool npm start ok? everything is successful so, we can now go to our block and and we won't see anything because we have to program the attributes, ok? for example we are going to change this test for a input where we can input test, ok? so, we are going to introduce for me the most important component here that is the reach test ok, this is very useful ok? you can do a lot of things with this meanwhile you are programming the blow you will have to insert components and another dependency in the block, ok? so, for example if we want to use a reach test, we have to insert in the import WordPress block editor ok? the string ok? with this, we will be able to use the reach test, ok? so easy we just have to insert the reach test here and after this, we will be able to use this, ok? I have learned something in this day very useful, I didn't know this tag but it's this, ok? this tag it's nothing but it's all after this, you will see why it is very important this tag, ok? it's nothing but it's all, remember this ok? let's insert the reach test ok? reach test we have now the reach test we have to I wish it now the tag name this attribute for the component, we will be saying to to the component which tag we have to we want to use, ok? if we have a h2 h3 h1 a paragraph, a span, ok? we can select here, ok? tag for example p and we put for example tag name with the value attribute the value attribute we need here to introduce to insert the attributes, ok? attributes and set up ok? we need to insert this into the block to use it if we don't insert attributes and set attributes in the params of the function we won't be able to use it, ok? attributes for example the value of attributes we have the attribute text, ok? let's put text here, ok? and we have to set the what happens if the input changes, ok? how we do this? saying what is doing here, ok? un change we have to open curly brackets then we have to write here the variable, ok? and set attributes this function is to save one value into one into one variable, ok? into one attribute sample text, ok? with this we have now an input editor side to change the text, ok? and not have only the what we have here, my first flow hello, blah blah blah, ok? we have to use this ok? and we need now to insert in the save point yes? the same component, ok? reach text to the information stored in the attribute text, ok? we import in this line in the block editor components, ok? the reach text we set here ok? the attributes we don't need here the set attribute because this is for the front end, we won't save anything here, ok? ok? so only the attributes ok? and change this for reach text point content, ok? with this version of the right state we will get the store value, ok? of the attribute, ok? formatted with the tag that we want, ok? for example I close this here tag name we have here the p, no? so put here then, ok? and set the value to attributes point text, ok? so we have now a reach text point content that will show the value stored in attributes point text, ok? as a paragraph, ok? the value change we don't have to write the on-chain here because we won't save anything in this side, ok? we will only show information in this side, ok? turn value we see the console, everything is ok if we remove the block save, reload and put my first block we will see now the hello, welcome, Europe 2023 ok, and you will ask why before do this the background color of the editor of the block was blue and now not, ok? is because I have forgotten something very important that is the use block props, ok? we have to use the block props here, ok? use block props 3 points or here, no? instead and inside here, yes ok? I don't know how why this is now failing ok? wait a moment, please the brackets, ok? ok ok, perfect sorry the nervios, ok? ok perfect here and now, ok? perfect, ok perfect, now yes oh my god, the curly brackets ok, and now we have to write here a deep the read the read content, and use the the same use block props here is save ok, and we have to use here in the save version of the file a different version of use block props ok? we now have the use block props and the parenthesis and now we have the point save parenthesis, ok? and if we check the console everything is ok the editor here the editor, ok? this we have the deep the curly brackets thank you the three point, the use block props parenthesis ok? ok? and in the save version we have to use three point, use block props point save and parenthesis ok, un change you have to open brackets parenthesis equal and plus done set attributes parenthesis, curly brackets and test, ok? ok? we don't need this, ok? we for example remove the block save and reload we will have now the styles that we have before, ok? because now we will see here if we save update if we inspect this we'll see now ok? these classes these classes and this information, ok? we will see WP block create block my first block, ok? that is basically the look of the block, ok? and we will have all the classes from ok? test change something for example, hello work we can change the test for wherever we want and we will see the change, ok? so now we have a risk test, ok? and input to change the test inside of the block have your hands who have at this point, ok? well we have to try it ok? let introduce more complex to the block, ok? for example, if here is something like a H2 and H2 and for example we are going to be faster now we are going to insert information in this sidebar, ok? this sidebar is the inspector sidebar, ok? we can use the settings sidebar with the following imports, ok? we need to go to the I will close this a bit we will have to go to the block editor and introduce the inspector controls, ok? inspector controls with this we will be able to configure at a sidebar settings bar, ok? inspector controls ok? and we have to insert now new imports that will be import ok? panel body panel body this is like a table, ok? with the the body, the footer with the TDs, the rows, ok? is more or less the same, so we will need the panel body the panel row for the rows of the settings sidebar, ok? and for example a toggle control, ok? ok? toggle control and from WordPress slash components, ok? we have to use the components, ok? I'm seeing your faces typing code, ok? panel body panel row and toggle control, ok? because we are going to insert in the sidebar a toggle control that we will control, if we have, for example an H2, ok? or a paragraph, so we are going to introduce some of conditional logic inside of the block, ok? conditional logic is for example if, for example, we are going to create a new attribute named block with header, ok? instead of with paragraph, if we set the variable to the attribute to header we will have a header and if we set the variable to attribute we will have an attribute we will have a paragraph, ok? so we have to go to the block JSON go to here insert a new attribute for example with header, we put the type of boolean and set the default to to to true, ok? no I use the uppercase in the team ok? maybe this is a child? no, this is correct, ok? we have the new attribute in the block point JSON named with header type boolean and default true, ok? we can now go to same ok? what do you want to see? the block JSON the edit, ok? the block JSON we have this new attribute with header type boolean and the default true ok? you will have good dreams tonight ok? with header we go now to the edit point and we will configure the inspector controls ok? this is a part of the side of the front-end side ok? in the front-end side we won't have to introduce the inspector controls, ok? we will only have to write the inspector controls in the edit.js ok? now we have to set the panel body and we will set up title for example basic configuration basic configuration in this function ok? with the two underlines we have to set first the text, the string, ok? and after the string the text domain of the plane, ok? if we set the text domain to my first block we will have to copy this text domain and go to the edit.js edit.js and introduce my first block, ok? sorry reached it, not find it, ok? that is because possibly you have you have to see this code, ok? we have here use block props, the reached it and the inspector controls so check that you have correct this line ok? save and we will have to to get the reached it correctly, ok? we have to close here the panel body with this panel body with the closed tag, ok? and we will have to put now you have you are following having the error of the reached it no? ok perfect we can now introduce all the panel rows that we want, ok? this is like a small box inside of the sidebar configuration, ok? we will see now panel row and for example we can put now the toggle control ok? no we want this we want this version of the toggle control we will put a level ok? to show the the text, the small text bit near to the input, ok? for example show a header show a header the value, ok? here we don't have to use the value, we have to use the check it attribute, ok? check it curly brackets and use the attribute that we have created some minutes before, ok? attributes show here what? ok? with header, ok? perfect with header you are paying a lot of attention ok? and the typical function for what happens if we change the input, ok? so on chain curly brackets the variable this with header this is not the variable inside of the attributes, ok? this is a temporary variable that contains that store the information of the check it input ok? and we have to use the equal plus dan set attributes parentheses, curly brackets with header, ok? if we save this I will toggle to here perfect, thank you toggle control tool control we have the label, we have the check it and we have the on chain attributes, ok? we don't need more here I will let this screen here a bit more ok? and now in the front end side we are not going to write of this, ok? we will use now the conditional logic ok? to change the tag name of the reach state depending of the value of the with header attribute ok? I will go down and I will put here the curly brackets ok? and we will put if attributes with header we put the integral icon, ok? and if the attributes point with header is true will show H2, ok? and if it's false will show a P and how can we connect this with the front end side? so easy we go here and put the same code copy and paste I will let the screen here, ok? with the curly brackets attributes point with header interrogant, ok? and H2 two points P and copy oh my god copy and paste the same here ok? ok, let's check if everything is correct here, ok? we are going to remove the block ok? my first block I will put again the screen, ok? don't care and we will now see the header here, ok? and if we for example in the basic configuration set the show a header to false we will see the P, ok? the paragraph sample update the block and we will see the block correctly running, ok? I will put again the code do you need the save or the edit side? ah, ok ok ok so on 947 you have one change with header, ok? ok what if I add another dog control how does it know which one to use? change at the same time let's say I add another dog control that says show me the money I think the change how does the edit know which with header to use? I think that both we will see it now, ok? because the set attribute when you said one attribute, ok? is set for order block, ok? so for that we could use the conditional here, ok? do you have the with header in the block jason? ok yes, in the block jason here, with header ah, ok ok, so I can use another one and I have that body, ok? ok so now I reload again no, I have to remove save and reload, this is very important my first block and both change at the same time, ok? my question was if it was a different a different toggle a different toggle but I see it in the block jason declared it ok, ok, perfect perfect so well I will remove this toggle control ok reload we are going to see now the supports of the block, this is very awesome, ok? you won't need to code nothing, basically to get a lot of features, ok? so, for example we are going to the block point jason and go to here, ok? and for example I want to be able to change the color of the block, ok? my first block and I want to have here in the sidebar another column with the styles of the block, ok? so we can go to here to the handbook, ok? or press handbook wood timber block here there are a lot of information about wood timber block, ok? and we are going to see all the supports, ok? how to guides right in the here in the handbook, ok? how to guides blocks and block supports, ok? if you go to block supports you will see a lot of a lot of awesome features this is incredible we will see, ok? for example control block supports the support documentation it's here ok, if we control f the color, ok? we have the support for a color and we will have a attributes that we don't have right here in this attribute but we will have new attribute by the support, ok? if we put for example here color and we put for example text ok? oh my god in this box text true, ok? text true and background true we will have now the ability this attribute, no, ok? this is everything well if we now remove the block save, reload this is always the same, ok? we will have now the my first block ok? here is happening something we are going to close this yes ok support ok? supports and ok, it's everything ok I was sitting here but it's in this side, ok? sorry in the register sidebar we will see now these two buttons ok? the column of the configuration that we have set before and now this button to set the color of the block for example we can set the color to black for example so easily and point for example to something that is can be good, ok? for example this ok? we can read this well? if we update the block we now will have the block with the possibility to control the color easily we just have to code four lines color, text and background and I think that we can use to the anchor for the links but we don't have links now color background ok? I don't see it now here but anchor so for example another good support that we can use is the alignment, ok? to the align ok? ok? if we put here we write here the support we have to remove this the support here align and set to the this value, ok? now we will be able to everything is ok remove the block below we will be able to align the block to wherever we want, ok? we have now if you have problems selecting the container of the block you can go to this button and click this, ok? and you will see now this control the align control and we can set now if we want the block align it to the left align it to the to the right align it to the center for width, ok? middle width so easily with align of code, ok? if we write write in support the align value and set to true we have this automatically this is awesome, I say you this is incredible, ok? and if we save we have now a full width block, ok? if we inspect this block we will see now here more information, ok? align full, ok? here is the class ok and the color for example to yellow no, color of the test to black and color of the background to yellow if we save now we will see more information here ok, we will see now the a lot of more classes, ok? ok let's see for example another useful support that is the spacing another colors? with this support no, because this is only for for this colors ok? like general colors, ok? text, background and I know that if you want to if you have for example what are you asking? ok, from attributes that take the from attributes that don't have the block JSON here but WordPress understand that if you write here a super color, ok? and you said text and background to true you have now attributes here, ok? for that information but you don't have to write that attribute ok? as a general common attribute, ok? so that information is there, ok? if you want to configure the value of the color to get the color, ok? I think that yes, yes super I think that I don't know exactly because I only use the support with that and let the to WordPress put the class of the color so I didn't mind that so I will check now if if we can see I think that no as well how was the name, ok? background color maybe we can test it, ok? we don't have face here ok? the color is there in that attributes, ok? you can go to the handbook see what attributes are here, ok? and for example the background color the style ok? you can the documentation and see all the attributes, ok? and use them attributes text, ok? we are at the same point for example we are going to introduce now a new text here for example upper text and we will show you I will show you now more conditional logic, ok? to show information if it exists, ok? for example we can make a new panel row for example the text control the text control is a control like the rich text is a simple text input, ok? you can insert the input the simple text and just all, ok? you can set the tag of the input the value, ok? text control, for that you need to to insert here in the components, ok? in the text control ok? and save and we have well I give you a time, ok? text control in the wordpress components ok? wordpress components import line, text control, ok? ok? and if we go to the panel row text control and set the typical level, ok? for example description, no? a description for the for the blog, ok? description value, ok? we need a new attribute for example we will name it as description, no? description I don't want to see more that red color, ok? so text control we need to configure later the on chain, ok? the on chain attribute but first we are going to write a new attribute here for example I will put the attribute after them the scriptium will be an attribute of type of type of type string and by default by default we have the text of this is a the scriptium, ok? if we save the default the default the attribute we check the command lines, ok? everything is well we go to the edit point yes we set now the on chain function ok? to the blog jason? ok? just a little slower in general ok, ok, perfect ok, ok the scriptium type string default whatever you want if you want to write a new description you can I want to show you the PHP render but I think I won't be able to do it ok the scriptium, ok? type default ok, there it is yes do you need the import? in the import we have to set text control in the component side ok? component side I will show you bigger information import, we have the panel body panel row, text control and toggle control ok? ok, I will show you now that in the code ok? we have now the text control here inside the panel row ok? we are inside the inspector controls ok? panel row, text control level level, value on chain and we will write here the scriptium is always the same function save the information other people create a function outside of this but I think that this is more clean this is cleaner it's a very small stream so we can have we can have this line here the scriptium arrow set attributes parentheses curly bracket the scriptium ok? text control with the level the value and the on change the on change with the scriptium arrow set attributes ok? to the scriptium ok? ok? and let put that information ok? under the read state for example because it's a description so it's a typical position of a description and there are header ok? but we are going to write the conditional logic ok? it's very simple we have to write curly brackets ok? we will stop text control do you need something what what? ok? I don't have error now ok? the console of the node models ok? restart the npm start ok? check if hey what? ah yes larval components no? larval ok ok perfect yes yes is similar yeah you have the in the same structure as a larval yes another framework you have the components, the attributes save it ok? we are going to see now ok? I will follow with the conditional logic ok? we will see if attributes the scriptium it's it? ok? it has content after that put interrogant and this is very important ok? you have to press to write parenthesis open and close of parenthesis and after that point double points and null ok? with this we have now the conditional logic because I will open this and put inside information ok? if we write a lot of information inside of this parenthesis but after this we forget to write the double point null we will have here a problem ok? so for example we can write now a p ok? we don't have errors now ok? we will show you I will let the screen here ok? to show this information curly brackets attributes point the scriptium interrogant parenthesis parenthesis double point null ok? and inside of the paragraph we will open curly brackets we will call the attributes point the scriptium ok? where the parenthesis has has gone off because it's only one line ok? but I used to to write the parenthesis ok? so where? what? in what line? in the block json in the description type string ok? ok? ok ok perfect so now we are going to connect this attribute to the save to the save.js ok? we have to do the same ok? we can copy and paste usually we will be able to copy and paste the lines ok? from the edit.js to the save.js ok? we have now a half an hour so I will introduce you to the dynamic block ok? with the PHP that is easier than this ok? and I think that is very useful ok? attributes you have to copy from edit.js and save ok? the console is ok we have remember to remove, save reload the editor my first block and like we copy the attribute description with a default and this default have content in the edit.js this check that the attribute have content so we'll show will display the paragraph ok? so here we have the paragraph and if we remove the content of the paragraph or the description the block will hide the paragraph ok? for example this is a description ok? and if we save the block and go to the front end side we will get the same information ok? ok? did you get the description? with the condition and no ok? is it not easy? I will try to go slower ok? ok? ok? perfect but this is you can understand better this line is more understandable ok? for the workshop yes ok? ok? ok? for the workshop but no no no so if I write this I can say if something happens interrogan everything is ok so we go to this part and after if nothing happens here because this is empty so we go to null that is nothing ok? we don't display anything ok? ok? I have to advance a little bit to show you the PHP that will be easier ok? ok? ok? if we go the PHP well ok if we go to here ok? if we go to yes more or less if you remove this if you remove the inspector control more or less is the same but the difference here are the user block props point safe and the reached point content and you don't have here the on-chain functions ok? ok? and remember to import the reached state component ok? import ok? in this line my line is the seventh line ok? control seat ok? the safe? ok ok? perfect ok? ok perfect so we are go now to the block json block point json at the at the end of the json ok? we are going to set a new attribute name render ok? and write file double point point slash render point PHP and this is magic ok? this is easier ok? this is a line but we have new too we have now to create now a field inside the source folder name render PHP ok? inside the source folder a new file name render point PHP ok? and we need other thing ok? that is to go to the index point yes and kill safe double point null but we have to insert here the attributes to at least use the attributes ok? so the block json is with the line render I go now to the index point yes save double point parenthesis attributes like arrow null ok? ok? we have we need the block json attribute render point into the file render PHP we need the I will close this safe yes now index point yes ok? with this line like this and a new file in the source further src name render PHP ok? ok? what what? ok I will show you now how we can use the attribute in the render PHP in the render point PHP we will have now the attribute because we pass the attributes here ok? ok perfect attribute ok no no no I have forgotten the curly brackets no it's ok it's ok attributes oh I think it's ok ok let's check ok everything is well we will have here the attributes ok? so go to the block json and we have the text the width header and the description so go to the render PHP write text that will be text equal to attribute one we have to open the PHP line ok? write less than the attributes ok? text attributes we will have the variable attributes here ok? and it's an array ok? we can get all the information or the attributes because it's an array here ok? write text for example I am going to copy and paste three times for the three attributes ok? I am going to let you time now I am going to write and let the attributes width header width header ok? and the description so you can copy from here and we will have now the information ok? and now we have to show the same the same information that the edit point yes so we have now we have here deep ok? we close the PHP I will write the text ok? simple h2 text and paragraph more text ok? more or less this is the same structure of the save point yes but we have to write more information here ok? give the conditional give the dynamic logic to the blog here we need the function the function use block props ok? but with PHP what function it does? it does this function ok? we open here PHP and the function is get echo get block get block wrapper attribute ok? and with this function we will get the same return done with the use block props ok? I put the render PHP ok? ok? I will now write here the information of the h2 ok? I have to put a logical condition we open and close PHP we write if the typical if ok? and check if we have header if we have header we can show I usually write the full structure of the if ok? so later I don't forgot that ok? and if this is the structure ok? ok? I need more time ok? with header, else and if ok? if we have the with header we write heading 2 ok? open PHP close PHP and echo with header and if we don't have the with header we write a paragraph open PHP close PHP echo description ok? with header come from here and echo yes? this is a boolean no? omega sorry yes? was an error I write here the with header ok? sorry description omega the text perfect thank you ok? we have here the with header the text and the text ok? and now we can put here the copy and paste the conditional logic but we don't need the else here p, paragraph and now yes? description and this will be description too ok? we check here if we have in the description value variable and if have information will show the description text ok? so if everything is well we will see now in the build ok? everything is well the render PHP file because it's running the the webpack ok? the console will introduce the render PHP in the build folder ok? so I will give you more time well I have to check this I think that everything is correct thanks to your help with the variables ok? hello my first block everything is equal here in the editor ok? ok? that in the response is not valid in JSON ok? ok internal error I hope we have fan error here attributes attributes in the here? x block x block x x attributes ok? oh my god sorry ok? get block attributes ok? ok? a typical one letter error ok? we are going to try to update this ok? oh my god for a letter typical errors, thank you oh my god for a only letter ok? you know this kind of errors ok? hello work in Europe and like this is PHP we can now echo more information ok? I don't know if you want to put more information like hello work ok? and you will get the information can you put this in the back end as well? what? can you put this in the editor as well? yes, I can put it but this is the a new way to introduce information only in the front end side but not in the editor side ok? I can put this test this test in the edit.js but I don't have to do it ok? if we had this information with the save.js we would have to have the same information in both of the files ok? do you want something? ok? just catching ok? save.js edit.js render PHP ok? so we have only ten minutes ok? I will try to introduce you to the no no I have to the block controls and custom fields but I think that well I will introduce the custom fields which have follow all the all the code we will be able to do it ok? we have to go to the I will close this we have to go to the my first block PHP and we will set a custom field ok? we will connect a custom field to the API because in the render we will need we will need that custom field accessible for the API ok? so we have to ok? this function again function register postmeta ok? we are going to register a postmeta for that block ok? add action in the init in the init just for explain this because it's very useful ok? and the function register for postmeta ok? for pages we have to set here page because we are writing the block in a page so if we if we write here a post we will be able to use that custom field only in post ok? so we have to write page and the name of the value will be for example other description ok? other description ok? and we have to use now an arrive an arrive set show in res arrow true to see the wordpress that we need that attribute in that attribute ok? that custom field show it in the res ok? in the API res single the type of the attribute ok? that will be string and the we don't have to use it but it's useful if you want to upload your plugin to the repository of wordpress you will need to sanitize the custom field ok? so we will use the sanitize callback pattern to put the the typical function to sanitize to escape text input ok? that is double p ok? with this code today I will upload everything of this code in a jihap and you will be able to see the code and copy and test it ok? and I will show examples of more blocks that I have in testing environments ok? so you will be able to learn a little bit more of the watch ok? so register posmeta ok? we need now to go to the to the save no to the save no to the edit and insert now a new import that is use use entity prop ok? use entity prop from work from wordpress cordata ok? wordpress slash cordata with this function we will be able to use custom field ok? we have to insert this here this import ok? now we have to set here the context the context and after the curly brackets we have to put this code ok? to get access to that custom field ok? so cons bracket meta update meta equal to use entity prop and we have to give some parameters here post type equal to page and meta the name of the meta will be no the meta will be context id ok? is like the post id with the context with this variable we will be able to access to the post type of the block post that is using that block ok? context ok? if we are using this block in a page context we will give us here context the context we will give us in the post type the post type that is using this block and here the post id ok? of the post ok? meta and on the chain we are going for example to copy and paste one test control we have to chain only one thing we can chain to the level ok? order description and we have to change this ok? we have to to use the update meta ok? that will be the name of the custom field that was order description ok? order description with parenthesis ok? and now update meta parenthesis brackets meta comma and we have to set order description value from here ok? ok? ok? we have now the meta here the meta ok? and we will be able now to go to the render php use here the global post that this variable will give us the information about the blog about the post that is using our blog ok? so we can go here and get a typical get post meta for example order I will copy ok? order description order description c4 2 get post meta post id order description and to get the value as a single string we have to use the truth so we will be able to get from this by this way the order description only one minute php open php close eco order description if we don't have failed here ok? everything is well we can remove the blog save reload my first blog ok? I forgot the the panel row the panel row here ok? reload load my first blog and we will have here now the custom fill for example order description ok? ok well there is an error here with the custom fill for going so fast up to the top ok? ok sorry what you are your coding yes yes I will put the coding in yeah ok? I didn't change the value ok? was attribute so we have to access to meta and there we have it's like an attribute but for the attribute with custom fill ok? fastly change again all yes yes yes yes and I have more information ok so will be impossible to to use this so I hope that you have learned something about creating Gutenberg blogs ok? I have tried to show how to use custom fill but ok we didn't have enough time for this but at least you know how to create blogs from scratch you know too to create to render the blog as a as a php and well that's all I think that the mission more or less has been accomplished well thank you to you have a nice work come thanks to the organization