 So hi everyone. Before we start, if you guys have any questions or if you don't understand what I'm saying or if you don't agree with what I'm saying or if you have your opinions and you want to expand something that I'm saying here, feel free to interrupt me. Just say whatever you want to say. I wanted to make this as free as possible. And thank you to all the organizers. They're donating their time to make this happen. So thanks to them. Also the volunteers. So thank you guys. Whenever you can please say thanks to them. So the format of this talk will be I'll be answering questions, simple questions, and there are going to be 18 questions. It's just going to be, they're going to be simple mostly. I'll be showing some code and also concepts. So the intention is not to give full knowledge of how to build a WordPress block. I think it's more like to give directions on where to go if you want to build one or get a better idea of what Gutenberg is. I think everyone here in this room will have something to take from this presentation. And that's my intention here. And I'll be available. The slides are going to be online. They're online right now. And also the code that I'm going to be using. It's also going to be available. So the rest of the questions. And the first question is, what is Gutenberg? You're going to hear many, many different ways to describe what Gutenberg is. My version is it's just a different way to edit content and WordPress. That's it. This here on the left is how the editor used to look like. And the right is the Gutenberg way, which is just, so here is just like sequential text. You write and you format your text. And on that way you're just building blocks. Your content is divided into blocks. It just rearranged them. You can reuse them. On the left side here, it's really hard to reuse stuff, right? But on the right side you can. It's easy and they encourage you to reuse content, reuse templates and stuff like that. So expanding that the right screen there is here. It doesn't look like blocks, but these are blocks. The top one is a block is the classic block, which behaves the same way as the old editor. What you see here, all the capabilities of formatting they're also there, right? You can have the same experience on that block, but you can have way more. Image block, which is a simple block that will add an image. There is the list block. It's just a block that will list stuff, right? Quote block and what else? And this by the way, yeah, there is a columns block. So this columns block is dividing, so dividing the content into left column, right column. This is a block. A simple one is a button. A button can be a block. It's a small, simple block. And you can, you have the options here. See how I'm pressing stuff. I'm manipulating and all these options, they're only relevant to buttons. You're not going to find more options than you need here, right? It's just like the color, how you want the text to show and the alignment of this button. So these are all the blocks that are available inside Gutenberg right now. There are a lot of them. And they're really cool to play with. If you install, if you have the latest version of WordPress, it will come all with all this stuff, right? These are, that's probably one of my favorite parts of this in bad ones. Okay. And why would I need to build my own Gutenberg block? Why would I need to know about that? There are some cases I think, sometimes you want a specific block. You want a specific structure that is not there by default. You can try to create your own. That's one of the reasons. And also sometimes I think the best one is you can modify existing blocks. So there will be, there are going to be plugins that will provide you with blocks. And sometimes you want to tweak them a little bit. And if you know how to build a block, you also know how to modify it. I think that's really powerful. And also, by the way, there's a way to search inside the WordPress marketplace, the place to search for plugins in WordPress. There's a way to search for plugins that will also give you blocks that are block enabled plugins. So if you go here, anyway, pretend that it's showing out here. Anyway, it's just going to show you, yeah, all these plugins here, they are not plugins that will only provide you with blocks. They will also have some blocks available. Or they will modify existing blocks and stuff like that. And Yoast, for example, has interesting blocks in the latest versions. I think an FAQ block. They provide you the blocks and with the advantage that they'll also provide you the SEO for them. So I think Yoast has two kind of structured blocks. One is FAQ and the other one is how to, very specific. If you want to format or content your content in this way, Yoast will provide you blocks for that. Is it a plugin? Is it a theme? It's not a plugin. It's not a theme. It's something that can live inside a plugin or it can live inside a theme, too. It depends. Sometimes you want to create your theme with blocks and sometimes you want to create your plugin with blocks so you can reuse it. It depends on the problem you have in hand, so it depends. The answer for that is it depends. Okay, so the one we are going to build, one of the first very, very, very simple block that we are going to build is going to be this one, Hello Block. And that's how the whole workflow, so here I'm adding the block. I'm searching for it. Basic block. Once I click, it just displays it. It's just text. I cannot even edit this part. Not in the editor. And then once I publish, I have the same content that I was seeing in the editor there. Well, language is true. I know JavaScript, a lot of the code of a block will be inside JavaScript. PHP, not so much. It's going to be kind of standard way of dealing with PHP code for different plugins. But JavaScript is where the heavy logic is. And CSS, if you want to style, make your block look pretty. What's a good way to start a Gutenberg block? So I think there are two ways. One of them is use this repo here on GitHub. It's maintained by the WordPress people. It's called Gutenberg examples. And they have like one, two, three, four, like around ten plugins that they showcase the capabilities of Gutenberg. And these are the ones, by the way, the code that I'm going to show here are modifications of some of these plugins here. Really simple, really straightforward. And one of the best ways to know, to learn how to build them. Another way to start a Gutenberg block from scratch is using this tool here called create Guten block by this guy here, Ahmed Owais. I think that's how you pronounce his name. If you guys are familiar with React, there was a similar tool for React called create React app that is kind of just gives you the initial structure of a React project. This is the same kind of idea. It's just an MPM, use MPM to start and it's going to create a basic structure for you so you can just give the name you want. And it's going to give you the builders, all the stuff that you're going to need. Here is the repo on GitHub. If you guys want to check out. Okay, now let's let's start building it then. Remember that block that I showed you here? This guy here. Once you publish, that's what you see. That Gutenberg block is here. Just this code, right? One file, one PHP file and one JavaScript file. That's it. That's like the bare minimum for a block. Here is the example again. You guys saw that. Okay, and now I'm going to try to explain how that... What's going on in this code. So the PHP part. This file here should be living inside a plugin. In this case, it will be inside a plugin. Okay, so the index dot PHP file. This call here, probably some of you are familiar with it. It's just the old way to enqueue scripts in WordPress. You're just defining an alias and you're going to define a path to a JavaScript file. And here the dependencies of this JavaScript file. This is not new. This has always been part of WordPress for a long time. You're registering a JavaScript file. And this JavaScript file happens to be the one that is going to define your block. So a lot of the heavy logic is going to be inside this JavaScript here. Here, this call here, register a block type. That's the new one. You're saying that you're giving a name to your block with a prefix. A prefix is important here because of collision, right? Because you don't want... When you're creating a block, you don't want to have the same name of a previously created block or a plugin that is going to, in the future, have the same brilliant idea of naming a block block or something like just prefix with the name of your company or something or your last name. Remember this part here. We're going to come back to it later. And in the part that I say editor script basic block, what is basic block is binding to this guy here. Whatever script I define here, the alias is going to be the same one that I'm going to describe here. So this binds to this here. And this is just old regular WordPress initialization plugin stuff, right? So that's the new part, the JS part. Inside your JavaScript file, you have remember on the last slide, the previous slide here, whatever name you define is going to be used again here, right? And these are the attributes and functions of your block. All the blocks will need an added function and a save function and some attributes. Basically, that's how they... that's the basic structure of them. The title is going to be how it's going to be presented on the screen. When I search for a block, I will type basic space block and I'm going to have my block available there. The category is just a way to organize the blocks. What you saw on the example that blocks are divided, because there are so many blocks, they kind of divide it then into categories. So it's kind of easier to go through them. The added function is how the block is going to behave inside Gutenberg screen. When you're editing, you're defining this behavior here. The save function is saying when I hit publish, how that block that I'm editing there is going to be stored in the database. So here's the same thing. I'm creating an element, p, a paragraph, and the content, the thing that will go inside this paragraph is hello block. When I save it, I'm saying generate a piece of HTML with a paragraph and the content of this paragraph is going to be hello block. I can't edit this in the editor. Nothing like that. It's just a static dumb block. Again, I'm going to type basic block. No, I'm going to, yeah, there it is. Any questions? Cool. So the question is what happens if I put a hashtag like here? You can. We're going to see better examples of this later. Actually, you're supposed to do that. You're supposed to build your HTML in this part, in the save function, in the edit function as well. That's going to be the next example. Any other questions? The trouble shooting tip is like, if you're trying to create a block and somehow your block is not working, I think right now there's, WordPress is not really going to tell you, oh, there's something broken. I'm not going to display anything. So look for Chrome developer tools. Always be searching for that. And that happened with me a lot when I was preparing this presentation. I was expecting the block to be there to be searchable, but it was not. So I opened Chrome and it was like, oh, there's an error in your JavaScript. Because the heavy logic isn't JavaScript, right? Whatever errors that are going to be there, they're going to be JavaScript. Okay. Can you make this simpler? And the answer, thank God, is yes. This is, I don't know if you guys are familiar with React, but there are nicer ways to write this code. And it helps to understand better, too, I think, because it gets rid of a lot of, it just gets smaller. I think for me it makes it, I can understand it better when it's kind of a smaller and I can kind of understand what goes where. Okay. So remember this guy here? It can come this. It's way shorter. And that's exactly, I think that was your question. If I could put actual HTML there, yes, you can. But if you guys know JavaScript, you know this is insane. Like you shouldn't put HTML tags in the middle of your JavaScript code. So that's where we talk about, here again, the comparison. This too, they do the same thing, the very same thing. If I, whatever block I was building here is going to display the same way in the Gutenberg editor and it's going to display the same way when I publish. And again, this part here, having HTML in the middle of your JavaScript code, this is called JSX. It's not part of JavaScript. It's like an extended way to write JavaScript code. And you actually need a tool that will take this code and will transform this code in something that your browser can't understand. If you try to run this in a browser, it's going to break. It doesn't work. Browsers can't understand this. So we need a tool to get this code and make something else. Another concept is, yes, next. It's just like, I think developers, they want to be always using the latest versions of JavaScript. We don't want to really, like, be always thinking about IE11, for example. The code I'm writing in JavaScript has to be compatible with IE11, this classic problem. And because we want to be using this thing here, right, we want to be using the latest stuff available for JavaScript. And if you go back here, edit, this way of writing JavaScript also doesn't work in IE11. If you try to write a function in the middle of this object here, it's going to break. Modern browsers will take that, but not IE11. So you need a way to make your browser or any browser, including IE11, understand this craziness here and this kind of modern syntax of JavaScript. And that's where we use Babel and Webpack. By the way, you don't have to understand, have a deep understanding of what Babel is or Webpack. And in the two projects that I showed on how to start a Gutenberg block, they are provided with all the configurations for you. You just need to run npm build or whatever. So these two are going to get your very cool code that your browser can't understand and will produce a bigger file with lots of JavaScript you don't really need to read, but your browser will understand. So these two are kind of doing the translation work. And I'm going to show you how the two side-by-side, these files in the end are going to do the same thing. It's not adding any functionality. So this tiny guy here, browser can't understand this. A developer can, I can, but the browser will understand this guy here and they do the same thing. It's just one is a translated version of the other. Okay, any questions on this part? Okay, and the next block is, and the last one too, is if I want a block that I can edit. I think that's more useful to understand how I can create a block that the user can go inside Gutenberg and add some information inside the block. This one is a dumb block, but I want one that can, that I can add information. So that's my editable block. I didn't format the font. So whatever I typed, it was already in that format. You see like black background and white letters. It comes with style already. I don't need to rely on the user to add the proper style. And also comic sense, by the way. Proper font for that. Is it showing when I publish or not? Yeah, once I hit publish, what I'm seeing there is exactly what I get in the front end. And I think that's one of the major advantages of Gutenberg. It kind of gets the experience that you're getting in the editor. It's going to look much closer in the front end. Okay. So what's, so that's another block. Whatever we saw before, forget it. That's a new block. Same thing. This was in the other block as well. A title. A way it can go inside Gutenberg and search for this block. The category, kind of same kind of principle. This is new. It's the attribute. A block will have an attribute that will hold the information that you're editing. In this case, the case of this block, there is only one thing that I want to say here. This is a static. This won't change. The user won't be able to change this beautiful image. Just the content that goes here. And that's what I'm calling content. This is what I defined. The selector says you're going to get this information. The content information will come from HTML and a div inside HTML. There are other ways to store this information. But the one I picked was HTML. There are other ways. You can either, I think the basic ways of storing this information is either in HTML or inside meta. I think most of the basic blocks or the blocks that will come with WordPress, they will store the information inside the HTML that is produced. And Gutenberg is smart enough to from the HTML make the Gutenberg block. So it can go, whenever I save this, this is saved in pure HTML. It goes to the database as HTML. When I press, when I go to the page, there's no translation process happening. Whatever is in that page was already in HTML at that point. So Gutenberg has to know how to rebuild the block from HTML and display in the editor. Okay, again, I'm going to have an edit and save function. So this is my edit function a little bit bigger now. And my save function again. This too, always have this too in mind. This time is a little bit, it's a little more, a bit more complicated one. It has a fragment element here, which is just an element that can group other elements. The image, the cat image that I'm using there, and the rich text editor, which is this guy here. Whenever I start typing here, that's a rich text editor that will translate to a div. This is just on change. This is kind of reactive for guys that used to react are going to understand what this is doing. I'm not going to go in much detail here, but the save function will have a similar kind of code that I have in the edit one. If you're seeing the image is going to be the same. The image that I'm seeing in Gutenberg is going to be the image that I want to see in the front end. And also the content, this is where the black text, the text with black background and white letters go on. The style is going to be defined. I'm going to show you guys, this is inline CSS that I'm adding here. And I'm saying whenever I save this, I want this to be saved as a div. So this will go as HTML code to the database. Yeah, that's how it looks, the whole thing. And the style, the style that I'm referencing here. And I'm referencing here. So they have the same style. The part that is going to be displayed in Gutenberg will have this style and the part that is going to be stored in the database and later displayed in the front end will have this style. And also image style, which is this guy here. Any questions? Again, that's the block we get in the end. Okay. And that's how it looks in HTML. If you're looking at this in the front end, after you save, I'm already tired of seeing this so many times. Sorry. Can fast forward this. It's a div. Okay. If you press view source from the front end page, that's what you're going to see. There's nothing special here. There's no JavaScript. It's just HTML. If you roll back, I don't know if you can do this anymore. If you have that classic editor plugin, you say, you know why I don't want to use Gutenberg editor anymore? I want to use the classic editor. You're still going to have this saved in your database and it's going to display, I think it's going to display the same way. It was, if it was a block or not, it doesn't matter. That's HTML. What was generated in the end and what's generated in the end is HTML. And that's what goes into database and that's what's displayed. Okay. So that's about the end of the presentation. And then just some directions to go from here. They're way more complicated blocks than that. There are many, many types of controls you can add in your block. So for now, we just use a simple text one, but it can go really, really crazy and add color pickers and stuff like that. And one of them is dynamic blocks, too, which retrieves information from the back end to create your block. These are the fancy blocks that I'm talking about the next kind of next level of blocks. The attributes are where you can store the information of your block. You can find here. And one of them is an interesting one is meta. You can instead, instead of storing whatever information that is in your block inside the HTML that is going to be displayed, you can store it in meta. ACF takes a lot of this complication out for you. So and that's version in version 5.8. It helps a lot. And you can define most of your block in PHP. If you're used to PHP, you don't want to mess with JavaScript or React stuff or whatever. You can use ACF. And they're starting their support with Gutenberg. But the code required for this is way, way less than what I showed here. It's a good opportunity. I don't think you need a pro account for that. I think that the basic version will offer that. The REST API, you can build your blocks and make them call the REST API in the front end. It's a way of doing it. It's just, you can go crazy. And the code is here. It's also, if you go to my Twitter account, I'll have this there and also the presentation. It's light. And that's it. If you guys have any questions. So, okay, let me. So the question is, what is Babel? Remember this code here that I showed? I don't want to write that much code. I want to make it simpler. And then I write like this. This two will do the same thing. But in this one, it's easier to understand. What's going on there? But browsers won't understand that. It's easier for programmers to understand what's going on. But browsers won't understand it. So Babel will get this and transform it into something that browsers can understand, including IE11. IE11 is problematic, or whatever, IE version. They're usually problematic with support for JavaScript. A lot of stuff historically. It works on all the browsers except IE11. So Babel kind of takes this complication away and gets this code and it translates to that code. That code you don't need to read that. You don't need to give to your fellow developer to read that. That's what you should be worried about. But Babel will get whatever you write here and make readable for browsers. So it will make work. So as a developer, you can just worry about this making code that makes sense for you. And you have to run a command. This isn't happening like magic. You have to build your JavaScript. The process of building your JavaScript, which is defined here, will produce this JavaScript here. You had a question? Oh, you can. It's better, actually. I think you can write, like, in queuing your theme, actually, instead of associating it with the block. But actually, you can, actually. Sorry. Where is the call? The part that you're in queuing your scripts in PHP, this part here. You can also define CSS. Yes. You can define one CSS that is only going to be available inside the editor and one CSS that is going to be available for front-end. Only for that block. Or you can go the other way and just make a global one. One question there. Sure. It's a request to go back to the where to go from here is light. Is it the role of the JSX? Sure. I'll go back to this later. So the request was to explain again what is JSX. The role, yeah. It's just to write so. Doing that part, but you said Papa was doing that part. No, no, no. Sorry. You're writing this code, which makes sense for the developers, or like it's easier to understand than this. If you look at this, you say, oh, this is going to return a paragraph with HelloBot inside. When you look at this here, it's like, I don't know. I don't know what's going on. It's just it makes more readable for developers, but the browser won't understand it. So Bobo is a tool. The question is, what's the difference between JSX and bubble? So Bobo is a tool that was going to get this guy here, the this very nice code that the browser can't understand and make the browser and make something else a translated version of this. You get this block here. You're nice with JSX. You run bubble, and it becomes another file that will do the same thing. But this one, the browser will understand. So once you read, cool. This you run NPM run build, it generates this. And it's hard to read this. Don't don't don't. You don't need to read that. But it does the same thing. Right? This will do the first thing. More question. You know, okay, this one? Sure. No, the one that has like, oh, the two versions. Okay. The long version and the so I think it's just now because JSX is a little easier. But that stuff on the left is like totally valid. This is yeah, this is valid. And then your browser can understand that your browser can understand that and send us here. And that's our requirement. You can write your Gutenberg blocks like this and get this bubble thing out of the way. Up to you. Right? If you if you're used, if you get used to this, go crazy, you're eliminating like this building pro like step out of your workflow, which is good. But this one, I feel it's kind of nice to write stuff like that. Like it's shorter. You get a better sense of what's going on. You don't need to remember the syntax here element dog creator. Yeah. So the question is, how do I manage to update Gutenberg blocks without validation errors? The answer for that is I don't know. I had problems with I had problems with that too. I think that's one of the biggest problems with Gutenberg. Because this happens when you write a block, let's suppose we're writing this. And all of a sudden I say, Oh, no, there's not a p tag is an h one tag. And I have to update my block. And think that's where you get the validation errors, right? If there's anyone that knows how to manage this, I sincerely don't. Yes. It's a good point. You can do server side, you can rely less on writing JavaScript code and do more server server side code, which is what I mean in this server rendering blocks. If you guys want to look with more detail what it will do. But yeah, you can resolve when you have this validation errors, you can resolve the conflict and stuff. And it's never it's never it offers you, right? Like you have a validation error saying you want to get rid like it gives you like two options and you can yeah, convert to XML. They're going to freak out. Yeah. Yeah, I don't have I'm sorry, I don't have I don't have an answer that. And I think I also lost there as much as yeah. But I think at some point they might attack this problem, I hope, or if they did already, I don't know. Any other question? I think ACF as well. If you use ACF to create a box, you probably not going to have because you don't have to write any JavaScript code. If you're using ACF to write your box, you will probably help. You're probably going to have less of this problem, I think. More questions? All right. Thank you. And here's all the information you can find. Yeah. On my Twitter, the slides are going to be there and my repo with the code samples that are used here. Feel free to contact me if you have any questions. A lot of this guy is from from Instagram. Wilfred Warrior. If you have any questions, don't don't feel shy to contact me. Cool.