 To creating Gutenberg blocks hopefully we're going to go from getting started to start building some advanced blocks we're going to go over some code samples and Feel free to ask questions as we go Just briefly about me. I'm a senior developer and co-founder at 11 online. We started block party this year in anticipation of WordPress 5.0. I installed my first WordPress site in 04 which seems forever ago I didn't like it much then but I came back around to it These days. I'm mostly a react developer and I do a lot of Python and PHP web application stuff. I also do Android development and of course WordPress and I've been doing react for about two years Okay, so hopefully you've been to some of the other Gutenberg talks If you haven't I'll just go over this briefly. What is Gutenberg? It's the new WordPress editor as of 5.0 whenever that comes out. It's so what you see is what you get experience more so than the current one which is supposed to be the same thing, but You get more interaction with the blocks that you're using the content paradigm against blocks It's made out of blocks you just start thinking about Building blocks designing blocks. Everything is going to be a little block a piece of content And Gutenberg comes with simple blocks very simple blocks But you can build custom blocks and kind of the sky is the limit so far We've been building them for not very long But we haven't really run into anything where we felt like this is not something that we can do even If there's some hacky things in it. We've been able to do everything Gutenberg is written in react and you can learn more at reactjs.org All right, so I'm going to do a demo My CEO said my slides weren't interesting so he took them over and put in like this Gif to make it to make it better So Hopefully hopefully that's not going to be what happens All right, so We'll just do a simple little demo. Maybe some of you have already seen this Right you have a title you can put in some content and a paragraph, right? We can put in You know like a button a Lot of this stuff is not that different from Maybe what you're used to it's it doesn't feel that different, right? Put in something we can take a look front end Right and we have our we have some content. We have a button, right simple pretty easy Maybe not much to write home about in terms of this isn't Earthshattering But I think where Gutenberg gets way more interesting is when you start Building your own stuff and you can do all sorts of things so You can really get something that maybe used to be Like a shortcode you can build right here like we'll say cheap plan and It's ten dollars a month Right and we'll add that comes with this You can add another plan $20 a month You get this and you get that and we'll make that Green right and so you see that as you start building this out Users get a really good sense of what the page is going to look like and it's much better than Trying to guess at something like short codes or using ACF, right and then Right here, so then we can update See on the front end There we go. This is not I'm not using a Gutenberg theme. This is just the default 2017 theme 2017 theme if you have a Gutenberg theme that's set up you can more closely Replicate your front-end styles in the Gutenberg editor So you get things like that and then you can get things I think that are kind of wildly interactive like I'm from New Mexico. So has anyone been to New Mexico? Oh Wow a lot of you. What's the question that you get asked in New Mexico? Yeah, all right, so just in So in case, you know, you don't know we'll we'll say We'll do a little pie chart right for green and then you can do red How many people will read will say 78? I prefer red unlike a lot of people and then there's another option like there's Christmas Which I don't know we'll give that orange right So you get you get that kind of interaction. You can rotate things, right? They're kind of whatever options you want to put on things you can Do and you give users immediate feedback on what they're building So I think when you start getting into this level of blocks This is way more interesting and way more compelling than a site builder Like a traditional shortcode base site builder or anything else. I think this is where Gutenberg gets really Really exciting for what the possibilities are is when you start building these custom blocks like that All right, we didn't start on fire Thank goodness Okay, so some basics Gutenberg puts everything in the content Few are like me. I've been I've heard a lot of people use ACF my companies is CMB to this is kind of a standard way of Putting things post meta for all these little pieces of content post meta is bad In terms of performance and searching But it's the tools that we we have Gutenberg gets rid of that. We have we are putting stuff in the content area and then Gutenberg uses attributes as Settings on each block. I have some resources here There's the handbook and then the thing that I've found the most helpful is just going to get hub and reading the source code Because a lot of stuff is not documented I'm sure you've heard other people say that today. So Some basics when you register a block you have an editor method and a save method The save method takes the block attributes and saves them as HTML in the post less page content area So this is that some HTML from that pricing table And then the attributes are saved as JSON in HTML comments, which is at first kind of weird to get used to but You can see that we just have some JSON with some with some data So on the editor side What Gutenberg does is it reads those attributes from each block and then it puts them into your editor block It also does some validation where it says given these attributes Does the HTML match what the save method tells me it should give me and that's just to maintain some integrity in case somebody is editing the HTML directly So the editor method is what Allows users to interact with the block and change the attributes and then the front end of the site. It doesn't show React it just shows that HTML that's outputted So just a very simple example all my examples. I'm going to be using create Guten block We have register the block We set some default attributes with with different types The edit method might be just as simple as this you Have some built-in things like attributes that attributes focus And we can say if the element is being focused on and this is this is Might not be familiar for you. Hopefully it's expressive enough But it like say if it's focused we're going to show this plain text object Which is something that you can interact with otherwise we'll just show a p-tag And then the save function can be as simple as this So this is kind of as you can make a Block as basic as that it doesn't need to be a lot of code a lot of the built-in stuff makes it very easy to get started as I said, I'm using create Guten block to Do some of the scaffolding and this is really easy you can once you have it installed You have this command npm create Guten block You cd into whatever directory that you make whatever that name is and then you run npm start and it will Start a watcher so it will watch your code and Rebuild it whenever there's a change So all the documentation is on the github page Okay, so let's start talking about what do you get for free? What's built in? So set attributes is going to be the way that you are making changes to the blocks It's built in and all you need to do is say Pass it an object key and value of here's what I want to change. Here's what attribute I want to change And here's a new value for it Focus and is selected Are ways that you can tell is has the user clicked on your block? are they trying to interact with it and Based on that you can show or hide different things There are a ton of editor components that are built in just ready for you to be used to be used by you plain text rich text media upload color palettes drop down Inner blocks which is nested blocks and then all sorts of controls like select control toggle control and many many more and All these there is not always great documentation on them But you can find them on github under either the components or the blocks and then I'll show you in our examples How you can import them and start to use them? With very little effort Okay adding more so I Said before the front end doesn't show react. It's just your HTML But that the editor the Gutenberg editor is all done in react and you can basically add anything you want from npm I mean, there's certain things that are maybe not for react, but there's a lot of libraries Anything you can maybe think of That hey, I need some help. I don't know how to do this. There's probably an npm package for you npm has over 20,000 packages, so There's a lot of help and it's very useful for extending default functionality one way that we've used it is Color palette the color palette has a drop down for custom colors The Gutenberg drop down doesn't let you put a drop down in the drop down So if you want to have the color palette in a drop down say I want to click this button to show more options And then I'll change the color You can't have that custom color picker As built by Gutenberg because it will shut both drop downs when you open it No problem. What did we do we looked okay? What's the library that Gutenberg is using? Oh, they're using chrome color picker So what did we do we imported it? And then we just used it and we were able to get around the problem of drop down within a drop down the whole process took maybe five minutes and it was Really useful to have all these packages available to us We doing okay, I know I'm moving fast. I want to spend more time on some examples. Yes, so Kind well, okay, so it might make more sense with how in the examples, but Gutenberg it exposes All of its components or most of its components and editors to you just through the global WP variable, okay With the create Gutenblock there is that's where you get the web pack builder and stuff like that but if if you want to Like make available some of your components maybe to other components that has to be done in the same plugin at least There might be a way to export it like Gutenberg does there probably is a way to export it But I haven't played with that just to make it kind of globally available so So I want to go over some simple examples with you I tried really hard to think about some of the lessons that I've learned and our team has learned and Boil it down to a simple of examples as possible So I created two repos Gutenberg simple statistics and Gutenberg simple weather block and These are by no means exhaustive I just tried to keep it as simple as I could while exposing you to some of the concepts that we've Been using in developing these blocks so I'll have the link on a few slides so simple statistics Some goals with this is we want to make a block where users can put in statistics as many as they want And then have a simple count up animation. You've probably seen these on a lot of sites 10 million cups of coffee and 25 websites made or hopefully it's not that many cups of coffee to websites and Then what what are some strategies that we want to use okay, so Typically attributes are Just defined as as one-to-one like I have a title or I have some content or I have some text So we're gonna use an array of statistics to allow some flexibility in the number We don't care how many users that want to put in let them put in a million or two. It doesn't matter And then since we don't get Javascript Interactivity we're not putting a react component on the front end So our save method is only HTML as I've mentioned before we need another way to show That count up animation. So what we're gonna do is we're gonna save some data to data attributes And then we'll use a jQuery script to parse the attributes and to start the animation Okay, does that more or less make sense? Okay, so let's Let's go over the code then Well first, I'll do a little demo of it. So All right, so we're gonna add a statistic You know We'll do this. We'll just do right and then Okay, and then we do have this simple count up Okay, simple statistic block. Okay So how do we do this in Gutenberg? All right, we're gonna start This is the the default project project structure using create Gutenblock and the files that we really want to pay attention to are init PHP and Then in that's in source and then source block block. Yes so And it PHP is super simple super basic all we're doing in this Version is we are in queuing some scripts In queuing some files or some styles we have the The block assets when with create Gutenblock that gets created those are in cute on both the front end and the back end and Then you have another set that are back-end only the back-end only ones are typically They're gonna be your block editor. You're the JavaScript that we're gonna be writing in block.js Because again react exists only in the dashboard and Then on the front end we're just gonna in queues and simple things There's a count up library that we're using in a peer library so that it only starts to come up when it appears on the page and then our Parcer to parse the the count up. Okay, so so that'll make sense. Hopefully this This doesn't look that different than in queuing styles and scripts anywhere in WordPress, right? Okay Are we awake? Yeah, okay. All right good So let's take a look at the JS code We're importing some stuff just the styles that we have And then we are importing Underbar under bar the internationalization Stuff from WordPress We are importing from WP blocks our register block type where we register a block type and then we're just Importing a plain text component which again Built in to Gutenberg. Okay So far so good Register block type we namespace it and we give it a name We give it a title which shows up in that little plus buttons. You can find it You do an icon from dashikon's or a custom one if you want and then you can give some categories and key words And then again, we're saving attributes. Okay, so the attributes are really important. I remember what I said before that Gutenberg validates your HTML based on your attributes and one of the ways One of the things that it needs is it doesn't need you to define your attributes before you start so This is super simple. We have stats It's an array defaults to an empty array. Okay And then we have a random key Which we're just using for the parser so that we can keep everything unique in case that there's maybe more than one statistic block on a page and Then let's move down to our edit function. Okay, again attributes at attributes focus at focus This is all stuff built in you just have access to We're gonna set a random key if we don't have one again just for uniqueness and then we're going to create a few pieces so we're gonna create our Ability to add a row. Okay. This is just a button that when we click on it We get the new stats or we get the stats from our attributes and then we add a new one and Then we set attributes to the new stats. So we have that empty stat to add to it It's pretty basic We have delete stat which does the opposite it just Slices the array at whatever index we're at so that we can remove it and then again, we save our new attributes our new stats System I'm going too fast. I don't want to do like a lesson on react at the same time, but this Kind of falling along. Okay And then the return function if you're familiar with react that's kind of where Whatever is displayed happens and this is again, it's it's really simple. We have We just map through our stats and We have some stuff where we render our plain text inputs and we have a render count up which just starts that count up animation and But the main part is that we are If we come and we look at this if we're not in focus, we're gonna show our stats Just as HTML if we are in focus. We're going to Render our plain text input Okay All right, I don't know you you guys aren't give me a ton of feedback Yeah Yeah, their second example will use PHP Okay, so But you'll still need JavaScript to at least do that Editor interactivity. Okay, so pretty simple. We have some help This is kind of a super hacky thing where we're saying if we're not in focus. We're gonna After a hundred milliseconds, we're gonna start the the count up function But that's because the count up library otherwise will typically works on Document ready and jQuery so and then we have again if we're in focus, we're gonna add a row Otherwise, we're gonna show nothing The save function is even simpler We have we just map through our stats and we put it out. We just Export it as HTML Okay, the one thing that we're doing may be a little different is we have this data value and data key And this is then what we're using in This function where all we're doing is when document on document ready We're just going through we're finding all the Items that are be counting being counted up. We have to assign them a unique key each And then we as they appear on the page We just parse through and we grab what value they're counting up to and We start a count-up animation for it Okay Yes okay, so That's we have this This is one of the files generated by create Guten block This is just a plug-in like any other plug-in you install it as a plug-in you activate it Yes, if you're using create Guten block so you Well, if you're if you want to set it up as a part of your theme you can do that too The tooling around this and the reason why all the examples are around this is that's Built and easy and you don't need to learn about webpack or anything like that Any other questions? okay, so You guys want me to go over any piece of that again. Yeah, no the editor is react only I Yeah, so when when this page loads, it's this is the if you take a look at Well, I guess it's in cute in both places, but what it's doing is it's looking for When the page loads, it's just parsing through and looking for what do I have this class if I do? I'm gonna add an ID to it so that I can start an animation and then I'm gonna look at the data value Attribute and know that that's the number. I need to count up to so we don't get the react on The front end only in the dashboard so No Yeah, so that's the So because we were just saving HTML. We're duplicating effort. Okay, you'll see this in the other block too There's a fair amount of duplicating effort with Gutenberg and so what we're doing is we are Creating our save function is creating a way That we can do something with it interesting on the front end with just a jQuery script Okay, cuz in our react stuff It's really easy to just we can start this count up animation and it's great. We can just do it Well, no, I mean we were like including the library But we can do interactive things in the editor We can do very interactive things in the editor if you want to bring anything outside of just Here's some HTML to the front end if you want to have some kind of JavaScript action or You know, maybe event listeners or whatever it is that needs to be done and On the front end as well. And so the reason why I'm using jQuery is that jQuery is already a part of You know, basically every theme, okay? So you guys feel okay Let's just go kind of back over the overview Sure Well, I did a hack so we did a hacky thing where when it goes off focus in the editor It starts the count of animation So we're just do saying when it's not in focus on after a hundred milliseconds just start the animation Yeah, so so this yeah, so what this is is this is It's just a inline conditional. Are we in focus if we are Do this or you know in this case do this otherwise do The other thing and yeah Okay, yeah So return functions can either return arrays or parentheses And those just represent different things that you're outputting as HTML So this and map takes another return so If you want something to show up using map like if you're mapping through an array any s6 you have to This is how you do it. You return also in your return And if you get complicated pieces, you're returning in returns and returns and you just there's a whole bunch of pieces Okay so Right, so just again going over our goals We wanted to have people put in as many statistics as they wanted and then have a simple count up animation And we use an array to have flexibility and then we had to since we don't get that JavaScript Interactivity we had to replicate that in a jQuery script and save those attributes just as we're saving them as data Attributes so that we could parse them Okay, I know this is a lot but Well, we're getting JavaScript in the editor. We are only saving HTML though to the post content Okay All right simple weather block. Okay, maybe I shouldn't have called them simple, but It's all it's not that much code once you kind of get used to it, it's really not that much code But simple weather block. What are our goals? Okay, we're gonna use the open weather API We're gonna allow users to set temperature units on a per weather block on the Open weather API is global right if you're gonna put a bunch of weather widgets in you probably are gonna be using the same API key But we want people to set temperature and or cities and temperature units on a per block basis Okay Strategies. Okay, so this one we're gonna get into PHP. We are gonna use server-side rendering on This block because we don't want to expose our API key. Okay Maybe you guys don't care about that. That's something I care about. I don't want people using my API keys So we're gonna save the API key on the WP options table So all our blocks have access to it We're gonna use the inspector controls, which I'll get into more for the temperature unit and then we're gonna use Regular or almost regular react component for the edit method So we have access to local state and the react component lifestyle All right So let's take a look at this one Actually didn't test this. I hope my API key is still good. All right Okay, there we are. That's our weather right now and there it is on the front end Okay, I know it's not very pretty so Okay, so this one let's start We have a lot of the same stuff. We saw before we're in queuing styles. We're in queuing JavaScript stuff On the front end. We're not we don't have any JavaScript. So we're just in queuing the style on the back end We're in queuing our block our react code and then our CSS. Okay Then we're doing just a very simple Piece of code if you've ever registered new settings, this will look familiar for it to you We just are registering a setting to save the API key And then we are going to register the block this time in PHP A lot of the same things we don't have to specify an icon or a title or anything like that But we do need to use the same name spacing that we'll use in the JavaScript side And we do need to set our attributes and then the important part is there is a Parameter for called render callback and what this means is when this block is being rendered When when PHP is creating the page what function what method should I use to render this code? And that's what we have down here This is simple. We get the attributes right they're passed in just like they are in The react code in the editor We get our API key from the WP options table if there's a city and an API key then we build our request We use WP remote get Because it the open weather API just does get requests and then we use the response body to Just return some HTML down here. Okay. Hopefully this doesn't look unfamiliar to you guys So that'll make sense Okay, so what does our block look like our block is a little more complicated We're gonna import a lot more stuff We're gonna import inspector controls button text control select control. Those will be for some of our options and Then maybe I'll start the bottom So this is how we still need to register it also in JavaScript And we're just gonna give it a simple title and icon And then the save function is really easy Return null. This is the easiest save function. You'll write because and why are we doing this because? PHP is taking care of the rendering. Okay And then our edit we're just gonna pass in an editor component Okay, which I'll show you above and then I am including just a simple debounce Which I don't want to make excessive API requests when someone's typing in the city name. So we debounce that Okay, so if if you have worked in react, this will look super familiar This is basically just a react component and what are we doing? We have a constructor where we're setting some state Okay, so If you're not familiar with react and how state works This is a super big topic react is basically a state machine You change the state and then the return function will change what it's outputting in this case We want to have some Information that's local to the block the block itself That isn't saved. So typically what a Gutenberg block will do is it'll save all that stuff in attributes But we don't want to do that because we Can't get our like simple weather API key right from the attributes because it's saved as in the WP options table And then we don't know if we have weather yet from our request to the open weather API So we're just gonna set some basic state variables And then we're gonna use the react life cycle each react component has a whole bunch of life cycle Functions that are called when different things happen. So component did mount. Okay mounted once We call it component did update It a re-render was called. There's a there's a whole bunch of these and you kind of have to look at each use case and see What am I what do I want to use at each time? And people have very different approaches sometimes to this stuff So our component did mount what I want to do here is I want to just get our Simple weather API key our weather API key or open weather API key. I should say So all we're doing is this WP Variable this is just something available. It's in Gutenberg that has all the I Don't know has tons of stuff associated with Gutenberg if you notice from up above This is where we're importing a lot of things from okay, and a part of that is we can make API requests So we're going to get our settings from WP options. So we can know what our API key is I Have this did component update where I'm just saying if some things have changed do I want to get the weather or not? And then we have save API key This will do the opposite of getting the API key. It's going to save it to the database for us and again We're using the WP dot API stuff We have our get weather function which we're debouncing again Where we're doing the same thing we do in PHP. I wrote this in jQuery because I thought that might be more familiar to people So we're just making a our get request to get our weather back And then we have our render Which we're getting some data. We're getting our attributes focus set attributes, and then we're just trying to parse the Units so that they're a little more user friendly in case people don't the default is Calvin which is super not helpful for the open weather API But then imperial for Fahrenheit which most people that doesn't really say much to them. So and then our return has We this is where we get to our inspector controls and just as a reminder of what those are That's this stuff over here. These are our inspector controls if you can see my mouse moving There they were called They were called advanced settings at some point in Gutenberg, and I don't know what they're called now But this is where we get that helpful sidebar with If you went to the last talk in Gutenberg that no one seems to know exists apparently And what we're doing is there we're saying again is my block in focus if it is I want to show these Controls if you don't check if it's in focus. They will just show all the time no matter what block is selected So make sure you use that in focus, and then we're using the select control Again a built-in thing that we're just allowing people to choose what type of units to show We have a text control which shows What the API key is if they have one or allows people to enter a new one And then we have just a button where when they click on it it will save the API key and The button has this useful is busy Things so if I click on this there's a little animation that says Something's happening Okay, and then we have What gets shown in the editor itself again, we say are we if we're in focus we can show the city if not we'll hide it Right this is all Pretty simple. Hopefully it's starting to seem familiar. We have our on change that sets the attributes and then up above I'm Getting the weather from that local state if you remember when we get the weather we save it into state Which again don't want to save it in attributes because the weather changes all the time and Then we just display it so they get a preview a preview of that Alright Any questions on that How much of this like you're adding yeah Yeah Yeah, it when you come in or it doesn't have anything I think it has something editable. I don't remember Yeah, there's a it's just a Simple block with like a div and some p tags. I think and maybe a code block. I don't remember But it works you can install it and it will work and you can start messing around and building off of that You know if you're gonna import any of this stuff Bit you know a lot of the places where you see comment like comments at the end like this That's stuff. That's just done automatically and create Guten block Stuff without that is stuff that I added But like I said that simple example that I showed in the slides earlier Like this is this is as simple as it needs to be Have a plain text that sets attributes on change to whatever your new title is and then it's really up to you Then it's up to you to say I need this thing to have a certain background or Whatever kind of CSS that I want around it Some of that stuff is possible just with the default p tag Like I can you know put in some stuff and then what do I have I can change the text size So there there is some some stuff. That's you know That you can use just basically built in but I think You know if you're building client sites, I don't think giving clients that Amount of freedom is necessarily good idea So you can create come very simple components that aren't that different than this that have all your styles and Where they can't mess it up. No, it's in just in this block No, it will because that's again, right I can do Well, here how about I wonder what it's like back home. Did I spell that right? Yes, I did right so then each are pulling from that same API key, right? Because we want that to be global so that people have to put it in all the time it would update everywhere And then you know, I can change I can change these and it will update so There it's basic to begin with I think But everything is there for you to go nuts and to build super interactive things that are Really easy to use. I mean the ease of use thing is up to you in a lot of ways when you're building these Okay, so Any other questions before you? I have that set so that it only does it so I that's why I debounce it so if you're typing in the name It doesn't do it on every keystroke Or if I change a setting that's how often it does it and then on Like for the user when they're viewing the site. It just happens on page render. So one time. Yeah plug in Yeah Yeah, I think you just need node and npm Well, it's a github Yeah, it's a tool that it generates a plug-in for you Yeah, okay. Yeah Okay, so As a part of it you get these Simple things you have the editor which I'm not using at all But then you also have the stuff that's pulled in both places There's some constants that are defined in Common that you can add to or use these are just like some basic things But yeah, then it's just an scss file and create gluten block will also compile that for you And then I I think a good strategy is to have minimal styling Very minimal styling because you want the you want the block to take on the styles of the theme Right, that's kind of the point. So the less you can do with colors or things like that And I did some of that here just because it was I'm just doing a demonstration But ideally you would have maybe only positioning and then whatever button styles are in the theme it will just take on or whatever textiles etc Yeah, so if your theme is not Gutenberg ready, which the 2017 theme is not There are some differences in front end and back end But what you can do with a theme that's ready is you can define colors You can do so right now. I only have I Don't know if this block does it. I don't think this one does but there's an alignment option That's full width that has to be defined by the theme But otherwise you just get like a line left center, right? But if your theme is ready for that full width alignment, then you'll see that option as well Yes, you still need a theme You might not need as many theme files In the future, but yeah, you still need a theme any other questions Yeah So well, it's it will be faster the first version will be faster because The theme when it's showing it to end users is just rendering the HTML So in our second example, we have a few extra steps. We're getting the from WP options We're getting our API key then we're making a request and then parsing it So that will be a little slower, but otherwise You know, it's just HTML. We're not lowering any JavaScript unless we're doing it on purpose like with our count-up animation It's just HTML. Yes. Yeah Yeah, you can also do it as react or whatever you want That's kind of up to you of how you implement that on the front end I just did jQuery because it's familiar and it's already being included Any other questions? Okay Okay So to like make a block for single sign-on So Yeah, you'd have to implement a lot of logic for that to happen You'd have to do some JavaScript logic, right? Probably. I mean if it's like Samo based or something you definitely want to hit your server and have your server generate all that stuff So it can read the certificates and everything and then make the request and then you'd get the response back in PHP And then whatever that Ajax function that you call from the front end and JavaScript would then You get a response back and then you take some kind of action. Okay. Alright, so we're getting short on time So just a quick overview again We wanted to save the API key globally and then set the other options Per block we use server side or our strategies are using server side rendering So we don't expose our API key using the WP options table and then use the inspector controls for those For those other options and we used a react component For the edit method, so we have access to local state and the life cycle react component life cycle Okay, so some gotchas Validation I don't know if I've ever run into somebody who hasn't had some kind of problem with validation Initially You read Gutenberg revalidates every time so If you're making code changes, it's very understandable you're going to be breaking validation But if you're not making code changes, it's probably a problem with your attributes and you need those default attributes for everything Arrays don't allow for declaration of sub attributes. So arrays are great in some ways It's kind of like using a Mongo database put whatever you want in there and nobody cares On the other hand, you don't get some of that protection of saying these are the attributes. I want to use Set attributes is no callback. We've used hacky solutions like set timeout. Micah has mentioned He thinks there's another way that we'll talk about hopefully at the workshop tomorrow and Then using out-of-the-box components, right? You saw that I was using Basically all the components I was using for editing were out of the box Those are great, but they don't look like what it will look like on the front end And that's why I was always using that Focus are we in focus if we are show the plain text or rich text or whatever it is otherwise show just HTML so that users get a better sense of What it's going to look like on the front end And then inner blocks are a big gotcha that I spent a lot of time Well, I mean maybe not a lot of time a few hours one day banging my head against the wall with Trying to use more than one But inner blocks are global for each block. So that's the nested blocks So you can't have one block with several sets of nested blocks. You can only have one they share The state so your your content is replicated everywhere that you use it all right templates This is going to be this is what's going to I think make Gutenberg really possible in the long term is you can define templates and This I just pulled directly from the handbook They're registering a post type of book and saying okay post type book here are the blocks that we want to use Here's the order that we want to use them in we can pass in some default attributes, which is super useful And then you can lock the templates So if you're building this book template and you don't want to give users the freedom to mess it up You say you don't get to add anything or move anything or do anything other than input content You can also do insert which allows Reordering if you want to live on the wild side, I guess All right, we've had questions throughout. I think I have four minutes left It's kind of drinking from a fire hose. I know But look at the code Those are public repos You know use those as starting points to say hey, I want to build this thing and look at some of the solutions I used and say, you know, maybe I can do the same thing or come up with something better And if you come up with something better, let me know. Yeah Okay It wouldn't be it's just how you include the files. That's also what you would do is you could use create good and block as is Take out the You'll need to take out the well actually I'm not sure you might need to take out the What is it called all the comments in your like main file in the plugin file so that it doesn't recognize it as a plug-in That might not be true if it's in the theme directory But then you would just include that's not true It only looks in the plugins directory So if it's in the theme directory, you just throw that whole directory in and then in functions PHP You would require it once do require it once for that Yes Yeah, this is part of the It's part of the register post type So it's just one of the options in I think it's it's a separate option from template But it's you would just add it at the end my very first computer. I had a I had a DOS computer when I was little and I have no idea how old I was and I Don't all the other than it was one of those laptops that wasn't a laptop It was like a briefcase and it had a screen this big. I don't remember anything else It did I mean it had everything it weighed probably 40 pounds and Yes, I don't know I Don't know do you know oh? Yeah, that's right It is a lot if I would recommend getting started with React or just JavaScript A lot of the stuff is really transferable. I Think entirely transferable. There's some gotchas. There's some things like I mentioned that are kind of weird But if you can develop and react I don't think there's anything to stop you from developing in Gutenberg and there's a lot of resources for react and And virtually none for Gutenberg. Well, there's there's a couple But I would say for me if I wasn't able to read source code in Gutenberg I would have been lost on a lot of things because the documentation is bad But if you can read react in general, I think you should be able to read the source code And start small that one example I had was really simple nothing was really Count that very simple example. That's enough to get started. That's already can be your first block Any other questions? Yeah, yeah, I think it I think it really depends on You know depends on what your goals are and what you want to So like you mean in terms of like using a react components of just using the method the edit method Oh Okay, yeah, so I like the inline controls if it's an array Or if it maybe makes more sense like to put in like I'm adding the city I should type in the city name I think that the inspector controls make a lot of sense if they're global to the block and Then like most users aren't gonna need them or not need them very often For the for the arrays You know you can't you don't have the inspector settings for an array for each item in an array So if you want to have settings for a bunch of items in array, then you really want to have them with Whatever front-end thing is like put a little gear and have a drop-down for more settings All right, any other questions? Yes? Okay The themes the themes should be doing that You might I think there could be a use case for Maybe showing or hiding certain elements in the block But that might be as simple as there's a little toggle switch that adds like no mobile a no mobile class Or something like that. All right. Well, thank you guys. I hope that was helpful