 Hi everyone, my name is Thiago Louredo and today I'm going to talk about my journey to build my first Gutenberg block. It was really my first one. I have some experience with WordPress but Gutenberg didn't have much time to look into it before so it was the process of getting there. So if you guys have any questions please do free to interrupt me and I might not be able to answer more complicated questions but I probably someone in this room will be able to but for I hope you guys at the end of the session will have some pointers on how to start coding if you guys want to. So first of all thanks to the organizers and volunteers who were helping to make this happen and to our sponsors too. So this presentation will be divided in a series of questions they're kind of the questions that I had in mind when when I started this so there are a lot of them I know but they will be fast and there are more questions after that and then after that there is the questions part. So first of all it's a question that probably you guys are tired by now of what is Gutenberg but I'll try to give another answer to it. There will be so many different answers. So Gutenberg is just a different editor experience roughly speaking. You have in the left here the classic the classic editor and here you have the Gutenberg experience. That's basically it's a new way it's kind of more intuitive more using blocks that's kind of the trend in this publishing business online publishing. So how to what are these blocks? So these are the blocks I'm talking about. So this big thing here not big thing there's rectangle here that's the classic block. Is it possible to turn off these lights in the front? No? Okay. More contrast? Cool. Thank you. So the top one is the the classic block which is the very same thing as the the classic editor but in a block and you can have as many as you want inside the inside your page. Then you have the image block. This is by the way I don't know if you guys know this cat. It's called Wilfred Warrior on Instagram. Make sure make sure you follow him. It's it's it's real. It's so cute but it's it's it is it's a cute cat. No it's not. Don't say that. And there is a less block here. Very simple. These blocks they're they do one thing and they try to do it well. I like this principle and a code block here. Let's go back and all these blocks they're inside a bigger block. So there is this what we call a column block which is like two columns and there are blocks inside this columns block. And again classic editor and again. What is a Gutenberg block? This is a Gutenberg block. Just how to create one. And what are the options available? Like color. I can change what goes inside of this button. There are not a lot of options. It's just very specific for this specific block. Different blocks will have different options. Yes yes this has the this color thing for buttons specifically has to be supported by the theme as well. So it interacts with the thing you're using. And there I can add a URL. So you can click on the button. You can align it. A bunch of stuff. And the blocks you get out of the box. Vanilla Gutenberg. You get this many blocks. A lot of them you know. You can achieve the same effect with the class editor not in a block fashion. I think I feel there are a lot of new ones here on the embeds. And it's a really cool feature like be able to include for example a YouTube video from the block. It looks really nice from the editor. But these are all the blocks. You get them for free. If you install plugins or if you install a theme you're going to have even more blocks. I think that's the plan. They want eventually they want to transport those widgets to inside Gutenberg. Yeah yeah to be your blocks. No more widgets. Everything will be a block at a certain point. So what's the need if you have all that. What's the need to why we need to build. Be able to build Gutenberg blogs. I think it's for two for different reasons. One of them is because you want to sometimes what you want is not going to be provided. You want something very specific. Or you want to modify a block. And that's that's totally fine. What we're in this world prep wordpress world. What else. All this this URL here URLs here are really nice. The same way we have a marketplace for plugins inside the WordPress. People are getting these ideas of providing a marketplace for blocks. A lot of the plugins right now they will offer a bunch of blocks at once. One plugin. Many different blocks. But if you want to search for a specific block there is not really a way to do it using the default search for plugins inside WordPress. So this at a search kind of marketplace is here. Editor blocks WP.com and WP.gov.io. You can search for a specific block and see if it's available through a plugin or through a theme. Yeah, so these are the reasons to know to get used to Gutenberg building. Is it a plugin? Is it a theme? No, it's not a plugin. It's not a theme. But he can leave inside a plugin or he can leave inside a plugin. Did I say plugin twice? No. Oh my God. Sorry. It can leave inside a plugin or it can leave inside a theme. How to choose one or the other. It depends. It depends on if the nature of the block you want to build. It's something that you want to make a reusable across different themes put inside a plugin. And the plugin doesn't need to be just for the block. It can be a plugin that offers some functionality and blocks. So that's what's happening, for example, with Yoast. Yoast is an SEO plugin and now they're offering FAQ blocks so you can easily build your FAQ section in your site and how to block. So Yoast, if you install latest version of Yoast and try Gutenberg, you're going to see that there are two blocks that Yoast is offering right now. On top of the SEO functionality, question. If you, though, can you say are they still using word templates to reuse? Yes, you can. But that's not it's from the nature of Gutenberg. You can mix and match blocks and save them as a kind of template. I know that page builders have this concept for a long time that you can mix and match, reuse, reuse, reuse. And that's one of the major advantages over the classic editor, being able to reuse stuff that you use all the time. So a basic one, what does it look like? So that's it. It can be just like that. That's not editable, by the way. It's just a text, plain text, and that's a block. And it looks like that. So the same thing I'm seeing in the editor screen is going to be the same thing I'm going to see in the front end once I publish. It's very close. It's way, way closer than the classic editor experience. What languages should I know? JavaScript, a lot more JavaScript than before. So if you're just used to be on PHP realm, or if you're a developer in your own, just PHP, PHP, PHP, PHP, start transitioning to the JavaScript in general, especially in learn react. It's a good thing right now. And if you're learning react or any other frameworks that are similar to react, at this point, it will be easier to go from one framework to another one. But you don't need to really, really know react. JavaScript is important. PHP, it's kind of important. CSS is important to make sure you're styling it properly. Good ways to start a Gutenberg. So this part is really important, I feel. It was really important for me. I don't want to start a Gutenberg block from scratch because there are some files that it's a thing that people have to go through all the time. So there are ways you can quick start this process. So one of them, and that's important even to study the nature of them, you can use for two different purposes. The Gutenberg team has this repo on GitHub, Gutenberg symbols from the WordPress people, where they just showcase the capabilities of Gutenberg blocks. It's really progressive. So you start here, this basic one is like the most basic one, it's just plain text. And then you go for an adjustable block where you add the capacity to add it, whatever you're seeing. And it showcase all the controls available inside a blocker. We'll see all that later. But that's a really, really nice project. And they're always contributing to it as the Gutenberg project evolves. Another way to start is by using, sorry, so let me go back here. What I did with my plugins, I just got this guy here. I copy it and I modified it. That's what I did to create my own Gutenberg blocks. That was my approach to it, because I found it was kind of simpler structure and less files so I couldn't understand better what was going on there. But you have the guy here. If you guys are if you guys know React, there is a React tool called create react app that kind of starts a vanilla React project for you. That's the same idea. But for Gutenberg blocks, it creates all the unnecessary files and you can just start. I think it asks you some questions. What's the name of your blocks or whatever? Let me check here. So it requires NPM and MPX to work, which NPM is a package manager and kind of a test runner for a node. So it asks you some questions before you start. Based on these questions, it's going to generate the necessary files so you can start working on your block. So that's the repo of this project called create Gutenblock. So this is from a popular guy in the WordPress community called Ahmed Awaz, I think. That's his name. Yes. Yeah. So that's the repo for this project. So wait. Yeah. Create Gutenblock, zero configuration, developer toolkit for building WordPress Gutenberg block plugins. Okay. Next question is what's the usual structure of a Gutenberg block? A very simple one. PHP code and a JavaScript script file. That's it. The minimal one usually the classic minimal one will be this file here and a JavaScript file. That's all you need. So this is a block right there. This file can go inside a plugin, it can go inside a theme, but it's all it takes. By the way, I'm going to make this presentation available at the end and the code that I created two blocks here, and I'm going to make the code available on my GitHub account. I make sure that this will be on the website and stuff. Okay. So by the way, let's go back. This guy here will become this block. Vanilla plain text block. I'm searching for it. Yeah, there it is. Basic block. It doesn't do anything. It's just hello block. I did a page and that's exactly what I should there. Cool. So let's go deep inside the code now. It's it's simple. So first part is your PHP part is a part that is going to register the blocks. And you're going to register the scripts that your block is going to use this red part here. That's where you're registering are saying like, Oh, I have a script called block.js. And this will script the script will drive the behavior inside Goodmerg. And here I'm saying like, Oh, inside good inside Goodmerg, I'm registering this block ID. And it's important, by the way, they're they're always recommending that people put a prefix in the in the block name. So there are no collision of blocks there. And I'm what's the next instruction I'm giving here. For this block here that I'm registering in Goodmerg, I want to use a script that I that I give the I gave this alias here called basic block, basic block binds to here and here binds to here by this JavaScript file. And another thing, when I say editor script, what it means, why not scripts? For example, if I write editor script here, I'm making sure that this JavaScript file will only be loaded inside Goodmerg. Not in the front end, not in the page when you publish it, but just inside Goodmerg. Now to the JavaScript part, remember two parts, one PHP to register and to enqueue your your script. And one inside and one JavaScript file that will drive the behavior inside Goodmerg. Three parts, basic ones. The red part are the attributes of your block and how they're allowed how it's going to be organized in the Gutenberg editor. Every block has a title and I can give the title here. And if I search for blocks inside Goodmerg, I can search for basic block and this block is going to show up there. You guys probably saw there's also a category for blocks. Blocks are divided because there are so many of them and so they divided blocks into categories. You can create your own categories. But this one, I'm saying this block here, it's called basic block and it's going to go inside the common blocks category. Next part, it's one of the most important one. It's the yellow part here. All blocks will have an edit function and a save function. The edit function will be how what's going to be the behavior inside Gutenberg. The save function is how you're going to store this block once you hit publish. What you're saying here is give me an element a p is a p tag is a paragraph tag. Just know I don't remember what it is, but whatever. And this is the content of the block. It's going to be the string that will go inside the speed tag here. When I saved, what do I want? I want to save a p tag with this content here. So no, there's no addition. It's a very stupid block. But I don't remember if it if it's like the attributes, but there it is. Thanks a lot. It was my next one. Okay, so that's one way of building blocks. And again, oh, so that's very helpful. When you're writing your block, if you go to the screen to your Gutenberg editor and you don't see your block there, it might be because your JavaScript is broken and you can see this inside the Chrome console or Firefox, the same counterpart Firefox. And I've run into this problem so many times, like I was sure I had all the files there. But if your JavaScript has a problem, it's not going to show a warning in the screen or anything like that, because the JavaScript, so you're going to have this error here in the console usually. So keep an eye on that if you're if you're building it and it's not showing up there. First place to look. Okay, question is, I still feel there's a lot of code there, and we can make it simple, right? We can simplify it. There are a lot of nested stuff. I don't like that. What can you do? So we can transform this block here into this. It's the same thing. There's no difference. But here, we are using JSX, which comes from React, which comes from Facebook. Have a look. It's the same thing. You register the same block in JavaScript. Both are JavaScript files. One is using JSX. The other one's not. Very simple code. Same thing. This part here attributes of your block. This part here, behavior when you're editing. And this part here, behavior when you're saving. Okay, JSX. If you try this in any browser, this is not going to work. It's an HTML5 in the middle of JavaScript code. It doesn't work. Because this is not JavaScript. It's the syntax, an extension of JavaScript. This is not intended to be part of JavaScript ever. It's just an extension of JavaScript syntax. That kind of makes it makes easier for us to read and understand what's going on there. It was created by Facebook and it's part of React. Then it's part of Gutenberg too. Remember that I showed you here. So here, this repo with Gutenberg examples, they have zero one basic and zero one basic yes next. So they have both versions of the same plugin. One that uses JSX and the one that doesn't. So you can see the difference in how much more code you need for when you're not using JSX. Okay. Another thing that we are using here is what they're calling yes next. Kind of yes six, yes seven, yes whatever. Some browsers will not support some types of some JavaScript calls. And that by the way, this table here is the support for JavaScript specs. Not all browsers can understand yes seven, which is a nicer, more productive syntax. And not all browsers, I mean most of them at this point can accept you know, I11. Not all, yeah, I11 can understand anything anyway. But you can still use this nicer syntax inside your JavaScript code. So it can be more productive and you like it don't, the code looks nice and you get more productive, trust me. So how do you make old syntax? Like this very crazy syntax works in the browser. See we tried it as I said, you tried this in a browser is not going to work. Right. You have to somehow get this JavaScript here, transform it in a way that all browsers can understand. And that's where we have the building process, which involves bubble and webpack. You have your, that's the JS file you're writing with JSX, for example, that weird syntax. We run a JavaScript process with bubble and webpack and it's going to transform it into this file that is going to be compatible across all browsers. So there's more file here and that's true. That's the same file. Same functionality. Goes from this to this. No developer should read that, right? It should be only the browser. The browser I11 will understand that. Chrome will understand that. Same thing. Developers won't understand that and that's fine. You go from here. This goes to the next developer. You run the build process and you get to that version. Okay. If you need a block that we can edit. So right now, that's the same old block. Doesn't do anything. If you need something that we can edit, what should we do? There he is again. I'm editing the label. And there is an image that comes with this block. And once I view, it's what your guys were seeing in the editor, right? There's no visual difference. This is still black. This is still the same cute picture. Yeah. Update it. Polish it. Okay. What changes? So the PHP part, we're jumping from that stupid block to this kind of better block. The PHP part doesn't change. You're still registering a block and you're queuing JavaScript. Same thing. Same thing. But the JavaScript part, of course, is going to change. Let's go per parts. First part, you're giving you guys know that already. You're giving the name of your block here. Whatever name you use here, it has to be the same name you're using in your PHP file. So you can bind them. Second part, the attributes of your block, like the title, how you're going to be able to search it. Category again. This one is new. The attributes of your block, the content that you're going to provide, and they're going to stay with the block. What am I saying here? This block has an attribute called content. Sorry, it's a poor, it's a horrible name for it. But it could be anything could be like age. What else? Just age. And then you're telling here where you're going to store this information about the block. What I'm saying here is the information about this block is HTML. And it's coming from this div. So whenever you save it, you're going to save in this way here. And then the last part, how edit and save. Always edit and save. This is going to be there for most of the blocks. And again, sorry. Yeah, yeah, you're going to see that. It's modifying the state of the component. Yes, yes, you're going to see that. Yeah, yeah, yeah. Here on change. That's what you're saying, right? React. Let's see this part now. Edit part, how it's going to behave when you're editing it. If you guys know React, you know, you know that you cannot return sibling tags. You have to wrap it around something. You can only return one element. So that's where this guy comes on. It doesn't do anything. It's not a div. Some people do dibs can do can be like div div and wraps it up in just one element. It has to be one element in the end. This one is called fragment. It doesn't do anything. It just groups the two tags you're putting inside. It's going to throw an error. If you try it, if you remove this, they're going to throw an error. No, no, no, no. You're receiving attributes and you're receiving the function to set attributes here. You can receive way more stuff. That's a yes, six, I think syntax. That's the only things I'm using. You can receive way more stuff here that you can use. It gets way more complex than that. But for now, I'm receiving the attributes that I set here, right? Image style. This is on the top. You're going to see that later. So that's just CSS. It's an object that contains CSS. Same for this guy, text style. That's the content. And that's the part that it has whatever we want to save. Sorry. And that's when you change this rich, so that's a rich text element. It's not a div. I think that kind of goes with your question. It's a rich text tag. And you say, act like a div. That's what you're saying. Or become a div at some point. And you say, when you change content, you're going to set the attribute of content here. Just update. As you change, update your content. Same thing for save, except you don't have the own change. You don't need it. You don't need the own change, because that's when you save it. You're not changing stuff anymore. But you're still styling. And that's the part that will be rendered once you publish. And that's the part that is going to be saved in your database. By the way, let's, where is it? Okay. Same blocks we saw on the other slide. And here we have the styles. You're just JavaScript objects. Key value. Key is the CSS. Some of them I wrapped around the single code. Some of them I didn't. Sorry for that. I should be more consistent there. But, and you can give the styles inside the JavaScript file. It's probably a poor practice, though. I just did this to make sure we have a fewer number of files. Because ideally, you have to enqueue your CSS file, too. The same way we're enqueuing your JavaScript, you have to be able to do the same with your CSS instead of just declaring inside our JavaScript. So that's how it looks like. Remember the two blocks? The meow meow thing, the meow woof woof. Once we save it, it's not going to be a dynamic thing. Like when you go to the page that the post that we're posting this, it's not going to use React to load or anything like that. It's just WordPress. It's just WordPress getting this from the database, right? Here we have an image. And this comes from the column because I use the column block. Back end. Oh, sorry. Front end. Front end. It's the published page. So I published it and I hit view source. And that's what it shows. No, nothing dynamic here. No JavaScript anywhere. It saved like HTML. Because I gave the instructions to do so. Remember on the save part? Same thing. Okay, so I think that's it. And from now, there are many things to do now. So that's just the beginning. There is one thing that you can do that a way to build your blocks is by doing server rendering blocks. You don't want to always use JavaScript to render them. You can have dynamic calls. I can try to show that later to see how it looks like. But in this case, you don't need to write JavaScript. You can just rely on PHP for your block. Block controls are like the controls you can have to give more options to your block like select a color. This is all WordPress is going to provide you with nice controls. The same stuff you have in the customizer, for example, you're going to have available for blocks out of the box. There are a lot, a lot, a lot of attributes. Remember the attributes part where we put the title and the category that we can put so like you can put a lot of stuff in there. If you guys use ACF, ACF version 5.8 which is in beta right now, introduce the capacity to build your own blocks using ACF. No JavaScript required. And it's going to perform like a block, but you can do purely on using the ACF editor by adding your fields and stuff and render it PHP. Very nice feature. REST API to maybe you don't want to save your blocks as JavaScript. You want your blocks to get something from the API. You can do that too in both ways. In the edit part or in the save part. The code used for this presentation will be in this here. But don't worry about it. I'm going to put it on my Twitter. My Twitter handle will be easier to memorize. And I'll put it in the end. So questions, if you know, I'll go to the next one, but I don't know if you guys can do any questions. Wait, wait, you. Sorry. Let's go ahead and see. If you can use jQuery, you can use jQuery. It's JavaScript. Yes. You can use Vanilla JavaScript. Or you can use the build thing that I showed before. Use ESNX plus JSX with a build process in place. That's important part I think that I probably have to enforce is that if you guys are using this, you need to have a way to build this code. Oh, but I don't know how to use NPM. I don't know how to use Babel. I don't know how to use any of that. Come here and I can either use this. This is probably going to provide you a builder or copy this guy here. It's going to have a nice, all the NPM files are going to be there. You just have to modify one thing another. But that's what I did, for example. I'm just using their Babel configuration file and their package.json file. So even that part, you don't need to write from scratch. You shouldn't. And then you can write this nicer code as long as you have a way to build it. That's important. If you want to stick with vanilla.js, all this guy here, all this nesting craziness, you can do it. Then you would need a way to, you would need a thing to build your JavaScript, transpile it to something that all browsers can understand. So you had a question, sorry? Sorry, sorry, sorry. You're going to go to JSX, you're going to need to know. Yes. Babel part of the node or is that number 2-0? Babel is something you, let me see if I can show here. Yeah, yeah, yeah, yeah. But I'll show you the files for the package file that I used and the Babel file for that too. Did I just copy it from the repo? I'm going to show that. Just a second. Well, I see, it's probably the Wi-Fi here too. Are you using the Wi-Fi here? Yeah. Yeah. So wait a minute. Can you guys see the code? Yeah, OK. Babel. So I copied that repo and that repo came with this. So that's the package file. NPM will understand this and will install all the packages that are defining this, including Babel, this, this, this, JSX, React, Parada. And when you run NPM, Run Script, build, it's going to transpile and have that long JavaScript that I showed you. And as you're developing it and you don't want to be hitting that button all the time, right? You change something here, you run it. You can keep running with this command here. So for every change in your source, in your JS source file, it's going to generate a new transpiled version. Transpiled version is that long one, right? You have to, yeah, exactly. It's a good point. That file has to go with your plugin, right? Because the user won't be able to transpile that. So if you're publishing that in a plugin, make sure you have the transpiled file there if you're using this JS, ESNX plus JSXY, which is a lot of the plugin developers are going this way. And the Babel file is here. This also, I just copied this from that repo. What it's saying that the code that I'm writing should work on all these browsers. You see IE11 here? So whatever code I'm writing, it can be crazy JavaScript that I never saw before. Babel was going to make an effort to make it work inside the produced that long file and make it work inside IE11. So all users can use their plugin, for example, right? Any other question? Oh, I see the fields. Let me see if I can show the other presentation I had. I don't know. The short answer is I don't know, because we were talking about the input field itself. You can change how they are presented. Just a second, there was another presentation I made today about plugins in Gutenberg. I'll see if I can quickly show it here. It's a really cool example. While it's running, we can go to another question or something to have time, I think. Just going to say go on there. Cool. Any other question? Cool. Gutenberg is stable. Plugins? No, plugins are not. A lot of the plugins that they claim, oh, we have a Gutenberg block. It might break. It's still breaking for them, for some of them, to be fair. But some of them are doing the diligence of saying, oh, it's better. Our Gutenberg block is better, so be careful. Don't expect anything great right now. But the core vanilla blocks you get with Gutenberg, they're great. They work. There's no problem with that. And also, I think that Gutenberg has been running on wordpress.com for a long time. That's the default experience inside. If you create a blog on wordpress.com, the first one you're going to get is Gutenberg. A lot of people are running Gutenberg already, and yeah. No, so there are no plugins specific to Gutenberg. I mean, there are plugins that will bring new blocks to Gutenberg, but they're just like any other plugin. In the sense of code, same thing. There's no way to tell that's a Gutenberg plugin. The concept of Gutenberg plugin doesn't exist. There will be plugins that can give you blocks. And there will be themes that can introduce blocks too. And they can do other stuff. They don't need to just insert blocks for you inside your wordpress installation. So here's the ACF experience. Let me see if I can do it. Nope. No, it might be loading. It's a lot of Wi-Fi. OK, let me see if I can show the real thing here. Any other question in the meantime? If you're a theme developer, there are some things you can do that will interact with the blocks, like providing some functionality to them. But the only theme I tried is the 2019, which is the next theme will come bundled with WordPress. Your question, sir? If I want you to take it and exist with it, then what's the challenge that you take? Because whatever they do new, you're not going to get that piece unless you go through it and manually do it. But there's no automated way to do that, I feel. Whatever I want to limit the number that I want to explain. Or it's easier to hook into that. Exactly. So that's where I miss that. But then you're not copying the plugin, you're just extending it. And then you're going to depend on how well written the plugin is. Good plugins? Probably, I would say so, yeah. Let me see here. I never heard of that. Now I want a child plugin. Any other question? How it saves in the database? Yeah, the same way we were seeing on the screen. It depends. Not all of blocks. I know what you're saying. So remember the attribute part that says how you're going to save it? This one doesn't get the comments. A way of saving some of this information is by what you're saying. It adds some comments that you won't be visible, but these comments will hold information about your block. And that gets saved in the database. And if you go back to classic, you might lose information that way, right? Because classic doesn't know what this special HTML comments, what the meaning of them, right? Yes, there is a JavaScript framework that does this parsing, and you're able to get the information out of it. Yeah, yeah, yeah. Sorry for that. Any other question? No? You guys didn't try to think things will hold up when those plugins end? I tried different plugins to see how they are behaving with Gutenberg, like the popular one. That was my presentation in the morning. Those slides will be available on my Twitter, too. Have a look. Some of them didn't work. Some of these plugin developers, they're just worried for us not to provide blocks, but to keep it compatible. I think that's the first challenge for plugin developers. Keep it compatible in both worlds. From there, if everything is OK, then start building blocks that will only work in Gutenberg. But so yeah, that's it. Elementor. Any other question? Cool. All right. Thanks, guys. Thanks for coming.