 Well, thank you very much for being here today My name is Antonio. I come from Barcelona where I live where I work We have a different weather And well, I work developing planning for WordPress in my own company in Elio software We are a very very small company only three people and Well, let's start With the topic do you know that guy? Yeah, Matt Mullenbeck in the state of the word 2015 work on us say the following that we should learn JavaScript deeply So my question for you guys is did you learn JavaScript deeply? Because I don't I didn't I didn't learn JavaScript deeply and the reason is because Being a small company you have very limited resources with limited time and I had no time to learn JavaScript deeply Also, it wasn't a priority to learn JavaScript deeply for my business because my plugins were working So back in 2015. I have no idea Gutenberg was in the cook in in the kitchen. I think so The problem becomes a pretty became a priority when in last December Gutenberg finally was announced it with a release date It was a tough moment when I think I thought that Well, we had a problem. We need to make our plugins compete compatible with Gutenberg and the new editor in order to continue with our business So I started learning JavaScript deeply at that moment And I discovered that learning JavaScript is not only learning JavaScript Is learning JavaScript Gutenberg and all these stuff that you can see here because everybody is using it including Gutenberg So well here you have two options first one is complain and Sorry Now I'm complaining. Okay. The first one is complain, you know, you can There like the sky and say why me why me but this won't do anything you'll have the problem already. So Being an open source community like WordPress we have the the benefit of Looking at the source code of other plugins From other companies that have more resources than I have So that's what I did so in order to start you need a modern build process, but I didn't know how to create one so I Explored the the most common plugins that had the resources to adapt to Gutenberg before that I could so with that Plugins I Investigated how they how they did all the things and they were using compiler transpilers linters banners and all that stuff that we so that so here so I Extracted that information understand what they did and create WordPress block editor boilerplate that is available for free for you to use so you have to Not worry about all this stuff because you can download it and start Creating your projects on top of that without all the problems that configurations Introduce so now I was able to write JavaScript on top of something The problem is that I was reading Gutenberg the JavaScript code in inside and I couldn't understand anything about that Because because the syntax was really different of course. I'm a developer I know how to program but all this stuff object a structuring latent cones and all that Constructions that you see right there are new for me So in order to start Writing JavaScript Instead of learning JavaScript deeply what I needed at first was to understand the syntax behind that so it took me a couple of hours not more and I was ready after Doing some tutorials to to be ready to to learn and understand the Gutenberg code So my recommendation is that you start by understanding the JavaScript modern syntax Then maybe you think well, I need to also learn react deeply wrong You don't need to understand anything about react when working on top of Gutenberg What you really need is to understand the JASX syntax, which is kind of HTML with superpowers that allows you to create user interfaces on top of Gutenberg Here's an easy example that uses a heading attack But also there are other Components inside Gutenberg that you can reuse so don't reinvent the wheel don't start from scratch There are a lot of components like here color picker that it's already in Gutenberg for you to use another thing that was really really surprising to me was that Everybody was talking about in tutorials on internet about register block type Which is the main function behind Gutenberg that allows you to create new blocks Every single tutorial out there is explaining how this function works and how you can create new blocks inside Gutenberg But nobody told me that there are lots of functions for you to use as a developer So I'm not going to explain anything about register block type today because It's easy to find on internet. I'm going to explain a couple of methods that are very interesting I'm very powerful and less popular The first one is register plugin That's a method that allows you to include an extension in the editor That appears in the sidebar of the editor itself, so it's really easy to use you use you only need to to call the register plugin function include a name In and a configuration including the icon that you want to show in this case hurt Which is the hurt that icon and which is the component that you want to render And the component is also very easy to understand This component is just a function that returns some jsx Which is a fragment another reusable component that wraps everything and inside you have a blue inside bar more menu item Which is an item in the menu and the sidebar itself that includes in this case a color picker Only by doing that you can have all that you can see there My plug-in with the hurt icon and the sidebar with the color picker that easy. So finally writing Components in in in Gutenberg is nothing More difficult than that another very very powerful method that maybe nobody of you Now is the subscribe method inside the data package that method allows you to Put inside a listener function that will listen all the changes in the editor So anytime changes occurs in the editor your function will execute Let's see an example imagine that I want to call the function on title change from my functions anytime that the title of the post changes so I'll call the subscribe and inside a put a function where These two lines get me the title of the post and then I call the untitled change But please if you want to use the subscribe method Taking into account that this will include in introduce a performance issue because anytime changes occurs in the in the editor Your function will be executed not every time that the title changes. So anytime that you use the subscribe method, please Use a condition Like that. I just added an if that checks whether the title has changed or not and if it didn't just return But this has some some particularities. For example, let's say that you write the code on top Which is another call to the subscribe method and you include your function that do something and then I write the Function in the bottom that only calls a console a lock If you do that You subscribe it first. So every time a changes occurs in the editor your function will execute But your function has an error that will throw an An exception that will stop the execution. So my code will never run my suggestion here is that You need to be aware that you are not alone that even though you won't Produce a white disc of death like in PHP You should write the J the JavaScript code respectfully or otherwise you may write You may write things So finally We come back to the beginning About learning JavaScript deeply that that was our assignment according to Matt But in my opinion what you should do is Learn Gutenberg shallowly not deeply and Then start developing quickly because that way you'll be able to react faster and to Have a big picture of the project and then Go deep with what you really are interested on doing So that's pretty much what they have today. Thank you