 Então, vamos continuar com o António, com a Barcelona, vai falar sobre o Utenberg, mas não tem teoria, para fazer chocolate stranglers, então eu posso falar isso. António vem da Barcelona, e eu diria que... e eu pensei que era uma preguiça. Quando eu falo com as pessoas da Espanha, eu não sei se sabe mais sobre a Espanha ou Cataluña. A Espanha é uma preguiça. Mas, em falar sobre um outro tema que não é muito importante, vamos falar sobre o Utenberg. E ele vai falar sobre... Vamos mostrar um sete boas practicões, de todo o desenvolvimento com o Utenberg, e também alguns típicos mistérios que ele deveria fazer. Então, é isso. Desculpe. Então, é sério, então, obrigado. Obrigado muito. Então, este é provavelmente o quarto talk de Coutenberg hoje. Eu tento ser mais rápido. Tudo começou com este slide, de Matt Wunenbeck, um dos co-founderes do WordPress. Em 2015, em um trabalho no US, ele nos assinou para aprender JavaScript. Então, minha pergunta para vocês, é que você aprende JavaScript? Um? Ou pessoa? É verdade. Não, você trabalha comigo. Então, dois alunos. Este é o JavaScript. Então, eu não aprendi JavaScript. Um, porque aprender JavaScript não era uma prioridade para o meu trabalho. Eu sou um desenvolvedor de hormônio vendendo operas, operas que são feitas em PHP. Então, JavaScript não era uma prioridade para nós. Ante Coutenberg. Eu started learning JavaScript deeply back in December. Three days before, the final version of WordPress 5.0 was released. Because then was where we realized when Coutenberg will be in the code. That's three days before it was there. And why three days before? Because our plans were needed to be a refactor or fix it in order to make it to make them compatible with Coutenberg. So, I had three days to learn JavaScript deeply. I didn't learn JavaScript in three days. So, I started with the topic and I thought that I only needed to learn JavaScript and Coutenberg. But then to discover by reviewing the code days of Coutenberg that there are a lot of technologies behind that. As next battle to work with modern JavaScript syntax. React for the components. Redux for the state of the application. SAS, why not? Sling to yeah. To detect errors, webpack to bundle everything and NPM to work with dependencies. A lot of stuff. And that make me feel something like that. Like a baby, because I didn't know anything about that. I was used to work with PHP and with all this stuff that was only appearing in the front end. So, well, the first thing that we need is a modern build process. Now, you need to create something that when you write JavaScript produces a build file. It's like compiling. So, what we need is like we are in a because we are in an open source community. What we need was just to look at other guys that were doing the same. Other big plans that were adapting themselves to work with Coutenberg. So, I was finding them I looked at their source code and extracted things from there and from others. And finally created a kind of boilerplate to create plugins that were adapted to Coutenberg. So, I took information from them and now I publish it on my giscop for you to work. So, it's easier now without taking into account a lot of configuration and dependencies and things that never mind. But if you don't trust my code which is something that may happen recently in March Coutenberg itself released the package worker scripts this announcement, the links are at the bottom of the presentation for you to visit. Basically, you only need to import this package in your code and you have a start built to manage everything about the build process. So, build process is covered. Next step learning JavaScript deeply. I don't know about these books but please don't do it because it's not especially this one. Unless you have a broken table in that case you can buy it or maybe buy a new table. What you really need is only understand what's happening in Coutenberg and to understand the WordPress, the Coutenberg codebase you need to understand more the JavaScript. This means this next. X6, X7 All this stuff. So, there's also here a link with a tutorial that explains all this stuff. This is an example of object restructuring which is a very common statement in Coutenberg that I couldn't understand at first because each condition has this kind of black magic. So imagine you have an object to attribute title and content. This statement here is like defining content and title as variables from the object post. So you can use directly title and content instead of doing a post title or post content. So this applies in every file in Coutenberg. Learn that as the use of letter and comes from variables classes, other functions and all this stuff. This will take you at least one or two hours to learn. So it's pretty easy. You don't need that big book. So now that you apparently learned how to how to work with JavaScript the next mountain to climb is React. React is very complicated but the good thing about that is you don't need to learn React if you work with Coutenberg. You only need to understand the GIS syntax which is like HTML with superpowers something like that that is placed inside your galaxy. So if I want something like a heading like this one I just need to put this in a letter with parentheses like that. So it's pretty much HTML but it's a little bit more complex. The good thing about that is that Coutenberg exposes a lot of components that I can reuse. For example if I want to use a color picker I only need to extract a color picker from the components package and use it like that. This wraps a lot of tips and stuff that I don't want to know about that I only want to put it and I will get a color picker for free. There are a lot of components inside the components package that you can investigate in GitHub These are huge list here you have a color picker and when you go to inspect one of them there is a description a guide on how to use it and everything. So you have this code but if you don't trust these components React provides a lot of free components that you can use. There is a huge list in the React website or you can find it in other places. So... because probably some are created a React component before. Finally the last final boss that we have here is Gutenberg. So we have learned how to develop things we can model the process we have learned the modern syntax of JavaScript and we have learned the basics of React in fact the way to create components How about Gutenberg? Well, Gutenberg provides you with lots of functions that you can use functions to create blocks to clone blocks to get the blocks that are in the editor to get attributes of the post that is in everything to reset the blocks to replace a block insert a block you can do programatically everything that you mind. But today I only will deal with these three guys in detail. The first one is the most common one is a register block type which allows you to register a new block of course So it's pretty easy to understand you only need to use the register block type function pass as argument a name and an object contains settings these settings can be a title an icon, which is a dash icon a category and two important properties edit and save edit returns a component and here is where you put the ASX that we showed before and save is where you put the final HTML that will load so pretty much that's how blocks are created the good thing about that is that there are tutorials everywhere every person that wrote an article about Gutenberg explain it this function but there are a lot of more functions as we show here another function that may do you didn't know before is a plugin when I say plugin I don't mean a WordPress plugin I mean a plugin that extends Gutenberg that extends the editor a plugin for the editor the way to create a plugin for the extended editor is using register plugin with a name and an object with settings an icon also a dash icon and a component in the editor so let's see how does it like the plugin component it is a bunch of ASX wrapped in a fragment component this is also for WordPress and we have a sidebar menu and a sidebar the sidebar menu includes string with the name of the sidebar contains everything that we want to use inside the sidebar in this case again the color picker so all these components are from WordPress this produce this custom sidebar that you can see here with the icon, the heart, the name and the color picker so if you want to create custom sidebars for your editor that's the way you do it and finally this is a very interesting function which is called subscribe that lets you listen to changes in the editor so anytime that changes a course the function that you put inside the subscribe function that WordPress provides to you will be executed this is another function it's like using function without the arrow but instead of writing the function name you put the parameters and the value of the function separated with an arrow that's an example imagine that you want to execute the function on title change that you define in a file over there anytime that the title of your post changes so you use the subscribe from WordPress and you pass a function that obtains the title of the post these two instructions do that and call your function that's the way you can do it but if you do it like that you have a problem because a performance issue because this will be executed anytime a change of yours anytime if you click on a hyper this will be executed if you change some things this will be executed so that's not the way to do it instead put an if on it if the title has changed then do the thing the same as the title that I had before so if you use the subscribe method and you don't put a condition inside you are doing it wrong and beyond that there are funny things that you can discover when writing with JavaScript for example imagine that you write a piece of code that uses the subscribe method but the function that you pass as an argument has a mistake here we define a variable but we try to access the property d of this variable that doesn't exist so your code has a mistake because you cannot read the property that this will throw an exception on your browser now imagine that I subscribe I write this piece of code to subscribe to change the editor just to put a a funny message in the console the problem here is that anytime a change is of course in your WordPress editor the subscribe method will recover all the visual functions that it has and will execute any of them so it will execute yours yours will throw an exception and this will stop execution so my code will never run you can even try it in your laptop just open the JavaScript console copy the two subscribe calls and you'll see that if you just write something or click on something in the editor your function will be executed will throw an error but the SOS will never go out so be careful when writing JavaScript because in this case the subscribe function is shared space so my advice is that you are not alone please write JavaScript code respectfully or you may break things ok so back to the beginning we were assigned to learn JavaScript deeply but my personal recommendation today is that you don't learn JavaScript deeply you must instead learn Gutenberg Charlie because that will allow you to start developing things quickly and go deeper and deeper as you need so that's pretty much what I have today thank you Bridal I was curious about if you feel the rate on the use case that made you need to subscribe directly to the start because there isn't which select component that like auto updates and if you are a brand new idea you can also have side effects and things like that que you subscribe in this case Bridal but it was something with covering the content I think because we have this plugin that takes the content of your post the post that you are editing right now and create social messages automatically with the content so anytime you change the content I want to change the result of my plugin so that's why I need to do it after any exchange because there is no function that lets me know when you have changed the content only the content which select like there is an AR component yeah I know that but which select does not execute every time that you change the content or I think it wasn't using a converted plugin so it was legacy ah ok note that that was the very first three days that I was learning everything so I didn't even know that which select existed back then like if when we were going to react which select is like yeah I know in fact we are now re-factoring one of these plugins from scratch using everything that we learned components and which select and which dispatch and products and everything so now makes sense but now not three days before wasn't that was a mistake thank you