 Hi, morning, I'm happy that you're here. How are you having fun enjoying the talks? Okay, so we're gonna talk about creating a Gutenberg block. Gutenberg, as you know, is the hot topic right now and it's coming soon in November 19 or maybe in January. We'll see how that goes. So Let's start. I'm gonna introduce myself. I'm Elio. I'm from Argentina. It's in the top, the tip of South America and I travel all the way here because I love you all. I love you too. So what I want to do with this talk is about demystify a little the process of creating Gutenberg blocks because there are a lot of components involved in creating a block. Previously, when we were creating the plugins, we were just using PHP, but right now we have to use PHP, JavaScript, React, Babel, and a lot of other black magic stuff. So let's start with with a little bit of what has been happening in WordPress regarding content offering. In the beginning, the spirit of math flew on the water and developed this. This was the original editor. It didn't do much, but it was what started the everything and started making history and it's the reason that we're here today. Eventually we got this very nice editor. Back in its time, not even an expression engine had an editor as powerful as this one. This is a tiny NCE. The original version only had the tiny NCE and didn't have the HTML tab. So you have to go and deactivate it through other settings. Right now, currently we have the option of switching very quickly between the two modes. And eventually this was fine for a long time. We democratized publishing and WordPress was thriving, but eventually business owners needed more more content, more ways to build their content. So we started with the page builders. There are very successful nowadays. One of the... Compiled here, one of the what I think are the best ones in their kind, but they all have a one significant flaw between... But it's not... they're great. The thing is that they're not compatible between themselves. So if when you start with one, you're stuck with that one for better or worse. You have to continue using it forever. So now we have Gutenberg that is like a page builder. It's not a full page builder right now, but it's completely compatible between all the WordPress installations. Right now, it's only a content builder, but the idea is that it will eventually be a full site builder. So Gutenberg, if you still haven't got much into it, you can find more information about Gutenberg in these links. The documentation is a great place to start and you have a demo in the general information. And of course, you can contribute with code or raising issues, filing bug and reports in development repo. Right now, it's still under development, so they're taking all the help they can. And this is what Gutenberg looks like when you start with it. It's just a blank slate, just like the current classic editor, but it does some very interesting things. It's very easy to use, very fast to work with. You get the previews instantly. You have all the time this bar on the right side that provides contextual options to whatever block you're selecting. The way to discover a Gutenberg block or to find it, to insert it, is to search for it. Or like we see in the example, to type a slash and you can choose a block. One of the most interesting things is that you can not only add content like blockquotes or images, but also complete widgets. I know that there are some people developing widgets that connect to a Google spreadsheet and fetch data from that and create a chart, like a bar chart or pie chart, all in real time, and that's amazing. That's a future. And what do the content look like if you see it in the HTML tab? It looks like this, but don't be fooled about it because this is just an HTML representation. What it really looks like under the hood is like this, because Gutenberg is all JavaScript and it's an object tree with all the different, all the blocks are different objects with all different properties in them. The structure of a Gutenberg plugin that will create a block is very simple, actually, which is have the PHP that will initialize the plugin, will incubate the files in the admin and the frontend. We have, of course, the JS that will be the block itself, and we have some styling for the block that you can add in the admin, in the editor, or in the frontend, too. So it's super easy, but why make it easy? It's complicated for a little bit. Sorry, like, no, wait, wait. We're going to, this is a nice setup for if we only are going to create one block. That's very simple, but we might have to create one plugin that has several blocks in different folders. We have to have a way to manage all that, concatenate those files, compress the CSS. So we're going to introduce this complexity, but we're going to try to make it simple. So the first one that we need is the NPM, the package manager, to get all the dependencies that the previous person mentioned that it wasn't that good, which I agree, because right now I have like 24,000 files in the dependencies, but it is what it is. So in the dependencies that we need for a Gutenberg block are actually quite simple. We just need a bunch of bubble packages. We need webpack to package everything and output our final files. And we will define a build and a watch to build the final file that will be understood by the browser and use for a plugin. So one of the most important things that I highlighted in this slide is this bubble plugin that transforms React into regular JS that can be understood by the browser. You probably know it's a transformer that takes syntax from ES6 or some other weird things like JSX and converts it to ES5 that can be understood by any browser. What we need to do here on this important thing is this transform React JS. We instruct this to be, we're going to see it in a minute, WP element, create element. That syntax is what creates an object. You will see it looks like a tag. You probably saw JSX already. It will write it as a tag, but it will create an object. And this is what this transform does. You can write the JSX code or ES next, whatever you want to call it. And Babel will transform it to this syntax that is just a function code that will return an object. Is that clear so far? Or if you have any questions, you can stop me. So that's about Babel. We don't need anything else from it. Let's go to Webpack. Webpack is what we will use to compile our JS and all our CSS into the final files. And this is what it looks like. The interesting things here are the entry object where we can define a path to our source file. And the output will be the one that says file name. It's the final file that will be loaded by the browser. And if you see here in loaders, we have Babel loader. That is what we will use to transform a syntax. And finally, we have this line that will compress all the JS. Sometimes the Webpack configuration files are quite esoteric. But this is all we need for a Gutenberg block. So let's move on to actually creating the plugin. We will need, like we said, for a plugin, just PHP, JS, and CSS, the rest is just tools. The first one is, like, in any plugin, the PHP file, I left outside all the plugin headers because, obviously, they don't fit in the slide. But I'll give you the repo afterwards, and you can see the headers that are, like, any other plugin. So we will call this function on the init hook. And we have some new function in Gutenberg that is this register block type that we can pass the name of our, the ID of our block and register several attributes for that. In this case, we're interested in registering the two slidesheets, one for the front end, one for the editor, and the JS that will be the UI of our block. And we'll register all those, and we assign them to the block with this call. Is that clear? And that's all for the PHP. And the block.js is the interesting part. This is what it looks like. This is what a Gutenberg block looks like. So let's see. The first line imports the internationalization function, the two underscores. And then we register the block type. You'll notice it's the same Gutenberg slash fall than before. We set a title, an icon, a category to be inserted because when you search for a block, you have groups of blocks and all those are categorized. And we insert this in the layout category. And we have some attributes. These attributes are important because those are the things that we'll be able to edit through our block UI. These attributes are dynamic and can be changed not only by us, but we'll see that we can programmatically change it, for example, the ID. And these two functions are the edit is what will build the block UI. And the other one will save the final HTML that will be displayed in the front end. So these two functions, the function to create the UI and the function to save, receives some properties. These are all the properties. You can check them if you log them using a console.log in the console. You can check them and you will see they get all these. The ones that are interesting for us are the attributes because that's what we'll be working with and our users will be working with. And also you'll see that the same attributes are passed to the save, the save function. The inner blocks is there, but we're not getting to it. It's a property because in good time where you can put blocks within other blocks, it's a thing that is still under development. We'll start with an easy one, saving the block. And saving the block is just writing the HTML that will be displayed in the front end. What we write here will be what we save and what will be displayed in the front end. For this, we need to import the rich text editor. And we use a tag that you will see of rich text.content. That tag is specifically for writing the content that has been entered by the user using the rich text component, the rich text box. And not many, this is not too difficult. All the attributes are what the user edits the title and what will be revealed are just like that. When we save this, what the block will do is this. So we have the title and the reveal. When we save this, it will render that toggle or collapsible. So far it's clear. So let's get to the wild part which is creating the block UI. The block UI is much more complex. We have a lot of components to use in our UI. All are predefined in WordPress. We have these two packages that will import components from. I'm going to use a class for this. You can also use a function like in the save property. We were just using a function, another function. But for the edit property, you can use a JS class and you can take advantage of all the component life cycles because let's not forget that this is under the hood. This is React. This is to all the component did update and all the component life cycle. So we're going to import all these components, the rich text to enter our text. A bottom that we'll use to create a new question. I just wanted to add that so you can see that you can create a block from within another block without having to go and search for a block again. You can quickly create one. And the class initially looks like this. We just have the constructor that will receive all the arguments. Remember that we say that we go backwards a little bit. The edit property receives all these properties. This is where we're accepting this in the constructor. And the render function is the one that will render the final UI for the user to enter the data. So initially, we used to set up something in the constructor. We pass all the properties to the parent class, which is the component, which is a class provided by Gutenberg. It's what we need to extend to create a block. Thanks for coming. It's 11.45. Or you have a private test. So previously, we were using attributes to be editable in the block, the title, the reveal, and there was an ID. I need this ID for the front end to be able to toggle the dropdown because it's a CSS-only dropdown. It's not a JS one. I didn't want to enqueue another file to make it more complex. And I don't know if you ever did a tool using only CSS, but the technique is to use a checkbox. And when the checkbox is checkered, you display the... It's a pseudo selector, the semicolon checkered, and you select the sibling, and you can display it. But to do that, it had to be in the same level, so I need the ID to reference it. So we set the ID, and it's one of the properties that the component receives. If you create another function, you cannot do this because the ID will change every time you select to edit it. And it won't be saved properly. And since this is a class, the class is initialized only once, and the ID is set once and forever. That's the reason why I'm using this class and setting the ID in the constructor. Because obviously the constructor runs before any other component event or lifecycle. So we set up two methods in this class. What these methods will do is that whenever a user enters some text in the textboxes, it will change the title, it will update it in the attributes. Remember that the blocks are an object tree, and it will update the attributes of that object. The same for the answer. And the add new fold is that we'll be using in the bottom to create a new block from within the previous block. And it uses this API to insert blocks after. You can also insert blocks before. And if you see, it will just call this function create block and use the same ID, so it will create the same block. Obviously you can add another ID and create whatever block you can think of. And finally, we'll get all the properties that we need for the render function. And we'll see how the UI looks like in the return. So this is all the UI that will be rendered. First, we're using this component, the rich text, and the tag name is a label. We'll see later when we see the CSS for the editor that Gutenberg will actually create a label tag. It's not faked with an ID tag or an input tag. It's really a label tag, so you can use it for the styling purposes. We set a placeholder so the user knows what to do when they see the... because if you don't set a placeholder, they will just insert a block that is purely white. They will be lost. And the value of that will be the attribute, the title. And whenever the component changes, the user enters some text, it will update the attribute on the object. And that will be always displayed. If we see the next section, this section will be only displayed when the component is selected, when the block is selected. We'll display a second text box to enter the answer or text to reveal and the button to add a new block. In the class name, I also added an edit class whenever the block is selected because I don't want to rely on the... There are some classes in Gutenberg, like it's selected, it's typing, but since it's changing all the time, I don't want to rely on them for now. Once Gutenberg is finally released, it won't be... It will be backwards compatible. Right now, it's not so... They're changing and breaking all the time. Finally, once we have all this ready, we export the class and we can use it, we can import it from the new file and use it when we have registered our block. Before seeing how this works in the... How the UI works, let's see two other interesting properties that we can use when registering the block. Keywords helps discovering a block. So, if you're registering a new block and your users are not aware about it, maybe they will find it while typing in the search box so you can add some keywords to make it discoverable. It's limited to three, so choose wisely, and this is how it works. So, the block name is false, but you can type some of the keywords and it will be displayed for that. I think there is some work around typing a category and getting the blocks in a category. And the other interesting property is this anchor. The support is an object that has many properties. One of them is the anchor. What this does is when you select a block, you get this new field in the sidebar that you can link to it. So, when you're in front-end, you can click on it and jump to the component. It's pretty nice for a table of content or going to different sections of a page. It's pretty nice. Finally, we need to add some styling. And if you remember before, we've registered two style sheets, one for the front-end, one for the editor. And the front-end style sheet is merely styling some things, doesn't do much. The interesting one is, like I mentioned before, that we'll be using the same tags that we have in the front-end. The same tags will be in Gutenberg, in the UI. And that's pretty nice because we can style... I actually use this as an example, but if you choose your selectors carefully, you can only use this style sheet and enqueue the same style sheet in the UI and in the front-end. But, for example purposes, I did this. So, finally, let's use the block. We'll rely on another property of NPM. We're going to build our block using Webpack. NPM run build and the CSS build. Look, if you see, we'll grab the edit.js file that has the JavaScript class and the block.js, and we'll build it all together. So, this is the final UI of the block. Notice that the Chevron changes when it... And that's the bottom. Notice that the previous question, the text to reveal was hidden and the Chevron changes. All this makes a very nice experience for the user because they are editing what they will be seeing. So, that's pretty much it. Again, the links are for general information and the documentation. And the repo is right there. GitHub. I will be tweeting the slides afterwards. I need to export the PDF. And the thing is I forgot my password for speakerdeck.com. I need to reset it. So, one final request this time is that Gutenberg is under heavy development and we need every one of you to go and help and submit bugs, whatever tests the things. Anything that you can do will help to make Gutenberg a better experience for everyone. And that's it. Thank you. So, if you have any questions, yeah. So, you want to read a cookie in the front end. That will be something that you could do in the UI. I mean, it's better if you do it in the UI because the user will see what is going on and they will not have surprises later. Is that your question? Yeah. Oh, no, yeah, you can do that in front end, too. You can include a separate file for a front end, a JS file. Do it in the front end. Yeah. I mean, you can do it both ways. Elementor. It's funny because Elementor, there's a controversy about Elementor. The free version in WordPress.org is GPL, but it doesn't do much as far as I know. And they have a paid version that is not GPL and it has been brought to their attention a few times during the last year and they are not changing the license. So, of course, they won't go with Elementor. Besides, Gutenberg has been under development for almost, what, two years? Yeah, Gutenberg is coming from WordPress.org, all the core team that is committed to make the WordPress to keep it open and free for everyone. Let's see. If you give me one second. Ah, you're not seeing this. Yeah. I have it. And it was this one. Close that side of it. I will close this one. This is what you wanted to see, right? No, wait, it's not. Oh, this one. Yeah. Yeah, this is the one. So, yeah. This is stored as an HTML and if you notice, the attributes are set to the element level. For example, the ID doesn't rely on a, that was set in the constructor of the class. It's set to the component level, but the other ones are set to, are inserted within the tags that they are using from the Gutenberg team or from a developer perspective. You can migrate the block in the documentation. There is a section dedicated to, because, yeah, that was a concern that whenever a block changes the markup, it will be rendered invalid if a new version doesn't accept that markup. So there are paths to migrate that. And there's even a new thing that whenever you inserted a block like this and you later disabled the plugin that inserted it, you will get a message saying that that block was inserted by a certain plugin that is no longer available. So you will know what is going on and you can fix that. But yeah, there's a way to migrate all markup to new markup. Yes. Yes. Yeah, like I said, in the talk, you can just use a PHP file to initialize the plugin and write in JS without using the Babel. You can write all the functions because it will be longer because you need to... I'll go back to the slides. Yeah, no. So if you don't want to use any of that, you will have to write this. Which is not that weird. You just create an element, you set the tag, the class, and a text that will be within the p tags. You can do it without it. Of course, it might not scale well if you eventually end up with a file that is super huge. Honestly, yes, next risk better. But yeah, it's possible. You just need to write JavaScript. I have it right here. Any other question? Okay.