 Oh my god, is it wrong over here? Yeah. What does it say? 421. Hold on. Good batch. Not batches. We have a bug and we are fixing live introduction. I'm totally open. I could have gone next week. Oh, it's so hard to do this. Back off. There we go. Boom. I fixed the introduction. Oh. It's right over here. But what I feel about this 4 week is somebody who is like, Josh, please fill out the 4th week. Like, you know, like, they were a lot better. Yeah. Right. But like, it's not tough. Well, it's Josh. It's 421. Yeah. I think I'll play Twitter. Yeah. I'm getting some things and batches. There are some way out of like screenshots in here. Comparisons that I think that I apologize to anybody with a sense of design. This is not what I do. I'm excited about Gutenberg in terms of like, I can write code that makes designs happen. I don't have to make the designs. I'm getting ahead of myself by three slides. Okay. Can we get a tour? Is it time? Yeah. Should we do the tomorrow? Yeah. Okay. We'll get started. Hi. Hi. Do I need to do anything for the streamer? Am I on? Do I need the mic? No. No mics. Okay. Cool. So we'll get started. Thank you all for coming. This is a great morning. I'm Josh Pollock. I'm the redeveloper for Caldera Labs. We make Caldera forms. You can find me on the internet at Josh412. You can get the slides for this and this URL here. It'll just redirect you to the Google slides. And that's important because there's a lot of links. If you come up and touch the screen during the talk, it's not going to work. But there's a lot of really useful links for that you can have and go to. So download the slides there. And also, you can name Google slides. You can do make a copy and make this your own. And this is essentially forked from Brian Richards from WP Sessions' talk from the WordCamp Miami workshop that we did together about three weeks ago. And I encourage you to kind of do your own as you learn about Gutenberg because we in this community now, people who go to WordCamps segment of the WordPress user community have their need to teach other people now what Gutenberg is and why this is a benefit and how to use it. So what is Gutenberg itself? This is, I copied the first like phrase on Gutenberg's page, a new publishing experience for WordPress. I'm a developer, like I need a more specific requirement because this is a technical talk. And I used it yesterday to work on some content that I want to publish. And it was a different experience. But what we're talking about here is code, like PHP and JavaScript code. And so we can say that this is a WordPress UI framework. And I'm going to use the term framework relatively ambiguously because Gutenberg is a lot of things and we can just kind of bump them together. We'll kind of get more into that door. You won't leave here with its things. But this whole system, let's just say it's a UI framework for building user interfaces in WordPress. For example, the post editor in WordPress 5.0 will default to Gutenberg. You'll also be able to switch it over to Classic, which is what we have now, becomes called Classic. But in WordPress 5.0, that is the focus feature of WordPress 5.0. WordPress 5.0 will be released when Gutenberg meets the requirements of this new post editor. Right now it's under development. There are some things that need to be finished. But that's WordPress 5. And then in the future, other Gutenberg-powered features will exist in WordPress. There's a lot of opportunities to reuse this for sidebars, for widgets, for menus, for plugins that you use it. So this is a system that is being used for the WordPress post editor. And then other things. And I'm not, it's not like I'm not in on the secrets, right? This just isn't, it's a very public here or some ideas about where to go next. I'm hoping this is going to work. I'm working on this set of tutorials on Advanced Object Oriented PHP for Torque, partnering with Tanya from Code. And so we've been doing a lot on Twitter about it to promote it. And I wanted to try and put together with different embeds in Gutenberg, you know, the tweet here. I'm not done with this. But, you know, a little bit of text here, the tweet here. Some more about what we're talking about, you know, the WordPress embed of content on Tanya's site about the same content. So, you know, and then that's a loop-con video. So this is just a quick screen recording of my progress in putting this together. That I wanted to show, I don't want to throw up on it, because we need to know this idea of everything is a block in Gutenberg. What does that mean? And it would be really nice if I could give it a look. Can I get you to shift a little more right so we can get you in the frame with the slides? Yes. Maybe I can just currently cut off a little bit. There we go. There we go. Now I can see both. So this is, as you can see, this paragraph is now become a block here. And I'm adjusting its controls over here. What we call the inspector controls for the block. And this is, these are all settings, you know, I'm adding that little drop case and materials that apply just to this block. And this is inside of the new multi-column blocks, which are a feature under development that I recommend everybody use and they go to GitHub and explain, publicly explain parts about it could be better because it's under development. But I just dropped in this image box here, you know, block and added something out of the media library. And you can see here that I'm kind of doing this back and forth multi-columns. This is default Gutenberg, no page builder. You know, okay, cool. Tanya's going to help out. Here's her tweet. And then here's the, you know, why I think that's good. Go back to full width content. Here's a related video from loopconf that, you know, that's on their YouTube about code review. So this is about collaboration. You can open up and see that it's HTML. We'll talk about this in a bit. But see that that's the YouTube embed link right there. Just like currently, we just drop it into post content and it works. Same basic idea. But the preview comes up immediately. And then we go back to that. And these little ones here are actually pre-format blocks. And I'm able to turn them into, you know, into paragraphs and back so the blocks can change what kind of block they are. As I go, I can turn them into a quote. I'm kicking this part of it. And then James, the joke we were just talking about, I'm like attributing it to me, like this old thing, like this quote, Josh Pollock, my qualification, is I'm about to give the talk about code. Which is a dumb joke that, like Roy and I have been making forever. But I'm able to do this kind of formatic stuff and take on the design that Gutenberg has. I have multi-colons all of a sudden. I don't know how this is going to work out. But I'm going to the right here all of a sudden. This is going to be a CSS problem. But, you know, and at the bottom I'm going to, what did I do? I think I put a button here. Or I want to add, like, learn more about this course. Kind of call out. So I think I eventually found the button. There's a lot of different blocks that exist here that we can search through. Yeah, there it is. I found the button. I'm in the total run place. I'm supposed to go to the bottom. But we'll solve that in a second. So click here to learn more. Kind of call to action. Change the colors here. There's, like, a link inserter down there. But, okay, now I got it to the right place and it can be centered. It's going to try and tell me, you know, use one of your own posts here, just based on what I'm tech. You know, that's basically how it works now. Just a little bit of a cleaner interface. You know, this is all stuff that's now going to be the standard for WordPress. And these are all concepts of everything is a block. Is that the paragraph becomes a block. You know, you enter and you're in another paragraph. You have to delete. You're out of that block. But you're moving things around where everything is modular and everything can have serving roles to it. Because each thing is a defined piece of the program. Right? A paragraph block is functionally the same thing as we used to just put paragraphs in the text editor. Right? And our themes figured out how to make it look like we auto-added this ptext. Now we're having a thing called a paragraph. And we can, it's a block type of paragraph. And we can make new versions of it. We can make versions that, you know, add a pre-formatted tag around it. Versions that are only capable of having a certain font face. Because that's how this system works. In this part is about how to build those blocks. If I can get this to navigate. Well, we're just going to stay on this slide all day. What if we do this? So that was kind of how it works. That was a really quick demo of these are all blocks. They can turn into other things. They have their own settings. They have that panel on the side. What we're covering today is how do you register your own block type. Okay? That was the text block. But you want the block for your custom events plugin. You know, that you've developed for your organization. Or, you know, instead of having this like Google Doc that says every time you talk about an event use an H2 tag in a title case and then have a paragraph and then have an image with a write-align. You can just have a reusable block or pre-develop your own one. That's how we're going to talk about how do you make that a thing. We're going to talk about three basic JavaScript functions that you're going to use for all of these. How to make a basic static block. One that just kind of puts content there. You put it there and now there's a thing. And then editable static blocks. The kind of block that saves some HTML to post content but also has an interface so we can change what that HTML is. And so that's kind of like the YouTube embed block that I showed. It would be a static block that's editable. So, once you save it, the only way you can change is somebody going in and changing what it is, opposed to say latest posts is going to look different every time because there's new posts. That one that's this specific YouTube embed is an example of an editable static block. And I have a ton of links on how to learn more because you're not going to learn all this stuff today and I'm not going to cover everything you need to know. So, as I said, this is based off of some presentation that Brian Richards gave at Workamp Miami, which was a whole all-day workshop that Greg from Automatics at Gordon, Brian and I did. And so all the code from that is these two GitHub link posts. And we're going to actually be playing mainly in this first one today. But if you are used to JavaScript and you are looking for a modern approach with ES6 and such, you're going to want to look at the bottom one. And if you are new to JavaScript and you're looking for some very beginner Hello World stuff, the top one is probably more helpful, we're going to stick mainly to the top one today. But this Workamp Miami workshop was like all day, so it was longer and we did more. There's slides from everybody there. Greg, one of the developers from Automatic, has a slide deck that you can just kind of look at, get a lot of value out of. That explains why Gutenberg, what the general direction is and why these decisions were made. I'm speaking from somebody who's developed with this, written educational materials for this, developed with it, but I'm not a developer of it. And Greg can speak with that as part of the project and his slides are a really good overview. There's more example code. Gutenberg Times is a website that has a lot of Gutenberg content and that's their summary of that event. That's really good, it has all the information and all that sort of stuff. So this is a developer facing talk. I'm going to assume you know some PHP and Javascript. We're not super advanced stuff here, but everybody's welcome to be here. But that's who this talk is designed for. And if you're looking for something that is for users, people who want to use this interface, again, that Workamp Miami give did a lot of, they had Matt gave a talk and they created some other resources. So that's kind of a round up there for them that I really recommend everybody take a look at. Really good stuff to understand what Gutenberg is. Introduction to Gutenberg, Joe's course, is designed for users to understand how to use Gutenberg. If that's a thing you're looking for, that's a video course. And then Nathan who's here has I-Themes training. I'm getting ready for Gutenberg. And I-Themes training always just great stuff. And so that's awesome that they got Gutenberg stuff. So no, they just do good stuff. That's a good site. And so those are good things to show. If you're looking for other people who you speak with or just looking for, I need the basics. I need the what, the hat. Those are good resources. So let's talk about how do you make your block happen? How to register it with WordPress and make sure that the CSS and the JavaScript files show up. What we're going to create here is a PHP file that goes in a plug-in that calls the WP, well WP register script, register block type. Then a second, the JavaScript file that does the rest of the block basically. And then we can have the CSS file for the front-end styles for the admin styles. So when you go to that example code plug-in, it has four blocks break up broken out in it. But this is the structure of one of them. This is the static block. This is a PHP file that we'll look at next, at the bottom here. Ooh, lasers. But that's what we're going to use in PHP code to tell WordPress, hey, this is a block. This is what it is. But most of what we define the block, we're going to be in block.js. And then these are CSS style sheets. And that's the basic structure of a block. How do you get there? If you want to use SCSS, you want to use JSX, you want to use a complicated build tooling system, you want to use grunt. I mean, I still use grunt because I've got a lot of legacy stuff, but I think I've lost tipster cred in the room for admitting to it. I have webpack runners that run grunt tests. So however you get to this, I have a lot of opinions on but however you implement that's up to you. Let's start very simple. So what we're going to do is we're going to use WPRegisterScript. If you've ever developed a WordPress before, this is not a new thing. This is where you make WordPress known that there's a JavaScript file it can load. It has this handle that's located at this URL. It has these dependencies. WPRegisterStyle, same thing, but for a stock sheet. And then register block type is this new function. And one of the things that it does is associate those handles that we registered with parts of the block. So let's start looking at that. But notice that we're not calling in Q-strips or in Q-styles. Gutenberg will figure that out for us. We're just going to register it. So this is the registration function for the first one of those blocks in the example pocket. The first line is WPRegisterScript here, right? This is just hooked in out of net. There, so standard WordPress plugin. I think this is the only PHP slide I have in this whole talk, by the way. That's not going to be your whole reality as you move on with this. Later, but for me to do basic Gutenberg development talk, this is all my PHP for today. But this is very standard. We're just saying this thing depends on these three already registered scripts. WP, so we can assume they're from Core. WPBlocks, WPI18, and WPL. Remember those three, they're going to come up in a minute. WPRegisterStyle, ours is dependent on WPBlocks. It's a CSS for the blocks from Core. And then we're also going to do a separate one for the front end. And then down here, we're going to register block type. This is the one new PHP function we need to learn today. Is register block type. The name of the block, you'll notice that there's a slash here. Name space, and then the actual type. So all of your blocks, if you're plugging this called calderaforms, all of your blocks would be caldera-forms-forms. Caldera-forms-forms, you know, entries. It's a vendor's namespace. You can avoid namespace collisions. Kind of like resting the guy routes. You're supposed to register all your things, all of your routes in a namespace. Did it always use the plug-in slug? It's WordPress, it's convention. It will require you to... Should it be the slug that you use from WordPress.org? Yes, that's what I'm asking. I would argue that it should be. Is there a role that's going to be enforced on code? No, but I think that that would be the correct way to do it and how I would do it. It would recommend to you. But we are saying here editor script, right? That one, editor style, style for front end. We could also do front end style or just style. And so, we know that this, you know, there's a relationship here between this registration and this registration, and Gutenberg can kind of handle the rest words in the back end. That's ends the PHP section of the... of the talk. You're taking your picture of me, but did you make that one? Yeah. James and Vince here do WAPUs. And they make WAPUs, and so I went on to their site last night and went, I need more WAPUs. And had a good poo. But he was taking a photo of me when I came up with this word. So that's all the PHP that we need today. Because now we're all in JavaScript there. These three new JavaScript functions. WP.blocks.registerBlockType defines a block type. It's very similar to the PHP function we just looked at. It has many of the same capabilities. WP.i18n. WordPress has these translation functions. It's one of the strengths of the platform is that we can internationalize sites. Instead of just typing a string in our code, we put it in these translation functions and give it a text domain. And then, however the translation system works, I don't really know, it replaces all of the strings that it can with the local language. So you write in that function, you know, hello, Cod Air Force, and then somebody creates this translation package that has OLA, Cod Air Force, this same line and it figures out how to replace it. Somehow match. So now we can do these in JavaScript functions that work the same way. WP.element.createElement is a JavaScript function that creates HTML elements. And it is a wrapper around react.createElement. So, big question always comes on. Hold on, what? I need to know react? No. You do not need to know react. If you know react, this is going to help. You don't need to have any experience with react. Most of this talk today, if you know like var equals and what a function is, you can get through this JavaScript. So, let's go back through those three. We're going to come back to all these topics. Let's bring this into scope. It's attached to WP. You can also use webpack imports if you want. Where do you register block type? And you'll see again, name space slash name. This has to be identical to how it was done with that PHP function. That's the unique link. And again, name spaces. And then the second argument is this object. And that's like the code that makes your block. And we'll get to that one piece at a time. But just know this is the JavaScript function that takes this one string to identify the block. And then this object that we'll fill in in a minute that makes the block a thing that has functions. Getting back to I18n, this lets us have this default function, text domain, which should be your plug-in slug. Right, if you're slash calderaforms, it should be calderaforms there. That's how WordPress.org works. And this will get replaced if there is a available string. And it used to be that we used WP localize script to use this write a PHP version of this and then put it into a global scope, a Windows scope object that then we hoped was there and had to do a bunch of validation on and then used to replace script. So this is state management. This is just getting boring. So now WordPress does it in a more intelligent way. So this is a part of five. But part of the ambition of Gunamurth is to have a lot of these types of utilities as NPM scripts. So I believe this one is already in the WordPress NPM. But yes, it's not in WordPress 4.9. But the idea is that you'll be able to rely on using NPM in your own plugins if you want to use it with backwards compatibility. It's just that that's an ambitious stretch goal that is maybe less important than the editor functionality and usability, right? Well, if they've got the editor, they're obviously using... Yeah, but that will allow us to use these types of new tools with backwards compatibility in mind. Which is important. So let's go to WP element create element. This, as I said, is a function that creates HTML elements. So we're bringing it into scope at the top here. Just so we have an easier, shorter way of referring to it. L creates elements. WP.element.createElement. And then what kind of element are we creating? We're creating a paragraph. So P. What's the class? Because we can't use class as a reserved word. In JavaScript, we can't say class, so we say class name. This is how React works. I don't love it either. And then we have our actual content, which in this case is just a string generated with that translation function. That's weird. This is a new thing for a lot of people if you're not into JavaScript. But let's go get kind of a side-by-side here. This is a ULLI type thing. Ordered list, as you would say. On the right, with HTMLs. And on the left, what you would use to generate with this create element. So if we wanted to put it into this variable list. UL is the type of the outermost one. The class name is inline list. And then we have a JavaScript array that has one of these that we said is an LI. Well, it should have been an LI, but we lost it in the copy-paste. Let's hide it. So it has one try. It starts to get a little clunky. You're starting to wonder why we're going to do this. But we could start to write code to generate HTML. Before, we were just making it syntactically different. Now we're able to use logic to generate HTML. Also, they're not really HTML elements. They're like the whole React synthetic DOM that's better at interacting and updating the screen than we are. Because they're Facebook and they spend a lot of money figuring out how to do it right. And so, but we're able to say, now I have this outermost item. And then the inside is this list items. This array. So before I had one child in it, but I could have an infinite number. So now, I'm just generating that. We switched over to S6 syntax because arrow functions make JavaScript worth writing. And we're pushing into this array these LIs. And as this, we start to write JavaScript code where the user interface is generated based on you know, dynamic inbox. That can be the changes that are happening because people are clicking things in the browser, right? So this is a little bit more cumbersome than writing HTML. But we know that just writing HTML manually doesn't skip. If it was, if it made sense to write websites just typing HTML, we wouldn't be here then. Right? We wouldn't need a word. Right? That's a terrible way of doing business. We have WordPress and do a lot of stuff. But, you know, this begins to pay off because this function can run whenever somebody types into a and writing changes what's here. So we can build interactive user interface without writing a kind of code. It will look at how to get there. I am not a huge fan of writing code that way, to be honest. The one alternative there are many alternatives is to use JSX which lets us write something that looks very similar to HTML. So this is the way we're showing on the bottom. This is the way we edit the top. Right? So this is on the right very little code that we had to do to show this text. Whereas we had to do all of this with the other way. So this takes more work to get set up but once you have that in a generator, like create Gutenberg does that for you, sets that all up that I think is a little bit simpler. So JSX is built into the Gutenberg already? You will. So Gutenberg itself uses a mix of JSX and CreateElement just whenever it's the best choice. So you can use both in a webpack configuration step to use Gutenberg's compiler to get JSX back to browser-safe JavaScript that one of those two code links I showed in the beginning does and also create Gutenberg automatically generates. So it's a little bit more build setup but it's done. But one of the things that's great about JSX is that you can just use your logic in the middle of your HTML if you want. And so in this case we're just mapping this array. But remember that as this I'm getting very close to introducing the editable part where these arrays are going to be whatever the current value is in the Gutenberg system. So we can have this list that's dynamically updated every time one of those values change. And because React is being used under the hood it's really smart about when it's actually going to read data from the DOM model and when it's going to update the DOM model. Because the advance of React in Angular and Vue is that that's really hard to do efficiently and really sophisticated and only really like Facebook and Google should be trusted to figure that out. Or the one guy who wrote out of Vue. Because he's cool. And we can kind of offload that task and all this stuff becomes magic. So to summarize wp.element.createelement isreact.createelement that we can do it however we want with JSX with those render functions with components, with react components with WordPress createelement components we can use vanilla JavaScript we can one of the things I like to do is mount to Vue.js because I like Vue.js up to you but this magic of updating what the values are that we're working with and making the system the website look the way it's supposed to look it is now handled by WordPress which is effectively react in this context. So we have wp.element.component if you're a react developer already and you're used to using classes for your components in doing class post extends react.component you can do that or you can do react, class post extends wp.element.component it is react16.3.something right now again, I do not speak with any authority but the answer that I've gotten from people with authority is that as long as there's a reason to upgrade react to WordPress core we'll do that but this is the backwards compatibility statement on WordPress 5.0 is like this is the WordPress API that right now I'm pointing out that it's compatible with react because there's a lot more documentation on react.component than there is on WordPress.element.component so in the future this is our WordPress API but right now it's functionally identical to this react API which means that if you're having trouble understanding how wp.element.component works you can go to the documentation for react for react.component and you can go to this course that must cover that in depth I can say with a lot of certainty he must go very deep in depth and that Zach Orman teaches on this stuff all these react concepts that you can learn or might already know apply but you don't need to know going in so basically you don't need react it's great if you have it you're going to learn it because you're going to learn WordPress let's look at a basic static block this is basically a block to put some hpm out that has no configuration on the page but remember when I showed register block type and I said like there's the name and then there's this object and now it's empty trust me we're getting back to that that's before we even get there we need to bring those other things into scope then we need to give it its title its icon, its category, its keywords edit callback, save callback attributes prizes for anybody to mention something I left off here there's a big one I didn't put on this list delete supports is a good one whether or not it supports html or not so supports html is something that we'll add later there's a couple more here but these are the key ones what would that mean to support html and html block whether or not it allows you to save remember some of them use metastore whether or not you're allowed to edit the html inside of it so let's back up a second here we already saw these three functions we saw the php code to put them in oh ten minutes plus another hour oh we do have another hour so I have ten minutes to be done but we have this open universe hack lab your call, your room in ten minutes speed through this or do you want me to just keep going keep going okay cool so register block type here we're just bringing that into scope like we saw and we've used the php code before we showed how to you know how to load those up so that way they're part of the dependencies so now we have our translation functions we have this create-all remember I showed this line fill stuff into this javascript object that's what we're doing right now let's look at little pieces that we're putting in there the title that's in that little block inserter thing that popped up what's it going to show up at what's its title going to be and also that's one of the ways that we'll be able to surface in through tech search there are other ways there is an icon that also represents it it can be any dash or it can be we can pass a variable that is an SVG to make the up and I think there is a way to pass a path to an SVG but I think that's to be done in the php site I can't remember but all of the dash icons that are right this is just the dash icon site or WordPress.org all of those shoes one smiley categories there are five categories you can be in every block and have exactly one category so that's another way to throw up in search you can have as many keywords as you want there might be a limit I don't know there should be a limit I'm a plugin developer I definitely when it was allowed stuffed all those keywords in there like I was like the easiest way to top your rankings and it was well documented they changed that now I think that this is a system that if it's three to five will be great but you just have keywords there social share things that kind of stuff this is the edit callback before you're looking at using this function to create html elements why do we need to create html elements well because html is what makes neted interface so this is a very basic block that doesn't really have an edit interface so it's just creating that html but what you'll see is that this function has props and one of them is class name so that's the class that Gutenberg uses to know that this block is that block right this html represents that block how that works we can nerd out later about how that works I don't care that's all you need to do to have that relationship that's what's on you as a developer that's your responsibility Gutenberg will kind of do the rest magically inextensibly there are filters then the save puts html into the post-contact where the block goes this is totally optional by the way you can just return null here and not have it and it'll handle the serialization for you or if you're using meta storage you don't need it if you're storing your block attributes which we'll get to so this is optional but our props comes in props class name same thing so this we are saving this html here and we're putting this class name you know this html class the same way that we did in the previous slide right this looks identical because it is you know kind of pace and that's all I'm responsible for as the developer for Gutenberg to know that this is that block does that make sense that that class which we're creating with this that's the whole relationship so WPCLI can accomplish everything we've covered so far the command line tool for WordPress in like two commands WPCScaffold plugin WPCScaffold is a package for WPCLI we can make a plugin create a plugin files and then we give you WPCScaffold block you can read the documentation but everything I've covered so far the command line tool for WordPress if you have it installed will do and now you have your block so all of that stuff you need to know the lineage of that code is basically Brian and I were working on something we hit the command, we edited it we used it for something we reused it for that talk it's all coming from these commands this is that simple with WPCScaffold but if you are a JavaScript developer who expects webpack and stuff like that you're not going to get it this way there's another and then we have this one line of PHP to include that file cool if you know WPCLI they should be exciting to you, if you don't let's go back to it later, it's helpful let's make the block editable because that was a really complex way to put HTML into the post content and I don't think we saw all of the benefit there but the blocks that I showed you had interfaces where we could save that and make them dynamic and stuff so now we're going to include wp.blocks.richText this is that WYSIWYG editor that you can see it powers the paragraph editor it powers the paragraph editor that's what we're just going to use it to create our message and then attributes this is the data of the block we're going to have a change function to update that value in the attributes and then we're going to use the props through the save function and this is going to make our block actually editable so, you know, we're not just pre-coded HTML this is the new concept here's block attributes this is the editable data for a block this block has one attribute called message that is the message that it gives this is, you know, in the example code this is the notice plugin you know, it adds a notice there what is the notice? it's this one attribute so we can have them save as an HTML comment this is where WordPress in the save callback we just return null and it puts it into comments that are removed from the content before it is displayed and used to create the blocks and this is great for blocks that use server-side rendering so if you have a short code right now in your plugin and it has some attributes that people can type in you can create a block that has exactly the same attributes as your short code and use a PHP render callback to create the HD you know, render callback when you use registerBlockType and just hook that up to the same function that worked with shortcut so now you have one function that's serving short codes for backwards compatibility and blocks for the future but this is the minimum to say this block has an attribute called post ID that's always going to be a number this is going to go in attributes in registerBlockType we'll slot it in a second and it's going to be represented in the HTML markup so one of these ideals is that we will have very clean semantic HTML that works on its own and then we'll put some JavaScript and CSS on it to progressively enhance it but it works without if we're talking about an assistive device or a low crawler for a web search that doesn't have JavaScript enabled we can support that so this is going to take the text of the element that has the class my-block-content that looks just like jQuery or Mood Tools or something there, that selector then we can also save attributes in the database as post method because sometimes we want a query for them we want to change them as mySQL and so we can say this one's text it has the source meta and that's the name of the meta key and we do need to register this with registerMeta the PHP function and make it show in REST true because Gutenberg is using the REST API to serve to read and write this data so this meta key must be a public meta key when it's registered so when you use registerMeta let's say the name of meta key is a pre-existing function where you expose it on the REST API or not because by default when you have a meta key in the database WordPress doesn't just let it be exposed by the REST API you have to opt into that with registerMeta you would have had to do that for this more so inside of register we have a lock type we do have attributes as an option just like we have title, edit and this one is going to create this message for this notice block and because we're going to use this paragraph that can have many paragraphs there are going to be arrays that they're all going to have this good and dev notice class so it can be multiples it's not one, it's an array setAttributes is the function that is used to update the value of your attributes so you have this message attribute and then you have a text input where people type in the new value when that when that text input changes you will need to have call function to say the message is now this so here is our new edit callback where we've replaced here we just have a static string now we have this rich text component and we are passing in props.attributes.message that's the value and then every time it changes on change we use on change message which passes props. which passes this new value to set attributes so it sets the attribute message to whatever the new value of this input is in React we have this concept of properties flow down so Gutenberg is providing the attributes current value props.attributes we use props.attributes.message and we tell Gutenberg to change it to something else using props.setAttributes and then this object literal message we can update more attributes at once and then this new value our save callback basically identical except for using props.attributes.message to persist just that one value there instead of the string before it just saved one string now it says whatever the value is set in that input that kind of brings me to the end because that's that relationship of how we can have these attributes tell Gutenberg what they are have an interface for them and then persist that back to HTML that's it that's the basics this goes over a lot deeper I went overtime and I still didn't teach you everything you needed to know I have no regrets so you should learn more there's a lot of stuff here you should learn how to use render callbacks use PHP but you can just save HTML you can save something it can cause JavaScript to happen in the front end you can use PHP to do what you always did in the past up to you look into that using JSX again I think it's really helpful there's a focus property that I think is now called isSelected that in that walk will be true when somebody is clicked on that so if you want to update what it does or bring in sidebar controls that whole thing pops up and that's what you can do when I was showing the text paragraph walk and stuff on the side those are inspector controls you can use this component inspector controls look at the handbox for an example and plug in sidebars don't relate to a block they just relate to a plugin so that's one place that things that used to go in meta boxes might go you know global settings for the post is that new? there wasn't anything for global meta yeah so plugins sidebars are still experimental but they're in there for a few releases and seem to be pretty good and stable but they are not finalized but I think they're the problems that they are the latest I didn't hear about the static block so some things that used to be meta data do belong to post content right so it kind of makes sense to have a block that's fixed there especially if you're using templates but there are other things that aren't post content so you can use a traditional meta box but that's boring or you can register a plugin sidebar it's just that that API is not totally finished but it's almost finished so I recommend learning that in two weeks dynamic blocks where you're using you know I want the five latest posts I want the seven reviews of this product so you can make a rest API request to this site or some other site based on those settings building those kind of things and then higher order components is a concept in react that makes it easy to have a very simple component that just shows a product, a post, a review and then wrap it up with a more complex component that does stuff like query the database via the rest API therefore you can test that one part of it independently of the larger system WordPress provides these higher order components for example with API data is a higher order component that gives API data for the WordPress rest API with spoken messages uses the WP.A11Y speak API to speak screen reader messages in real time which you know making that easier to do is great for everybody and a lot of stuff in Gutenberg kind of automatically does that when you need your custom thing you have that so I said before WP.CLI it's a fan line tool for WordPress has very basic stuff and has an open issue for more complex block generation a Model A is created create Gutenblock which is similar to create react app create react app is one command tell it the name and you have a react app all the best stuff that you need for react development there create Gutenblock is a one command create Gutenblock what's the block name all the best stuff for WordPress block development there and it's very similar to what create react is so I also gave a more advanced version of this talk at work camp Miami I followed up those are my slides for it and again slides for this in download the Gutenberg handbook is a very good resource on a lot of stuff it is also based out of the source code you go to github and you go to WordPress github and then to the docs directory that's where the handbook comes from so if you know more than the handbook share what you've learned documentation is a community project and when you browse there's a lot of code from WordPress.org but what you get on github a lot of the code has a readme file so like the blocks most of the blocks are getting like if you go to the rich editor or the source code for that where you see the JavaScript and CSS there's also a readme file about how to use the rich text component so read the source always this there is on WordPress.org there's a bunch of example code that we've worked on for a thing that's coming soon Gutenberg boilerplate by mod again just more example, basic blocks you can look at the the Isaac Gordon's Gutenberg course is video courses, super in depth definitely worth looking at Gutenberg rich tableware who does theme development more has done some really cool blocks that you can look at and educational content thank you a lot of people showed up and we had a pretty low attrition rate good churn is important it takes a lot that everybody came out I don't know how much time we have I don't know how sick you are of hearing my voice but you can get these slides and get all those links Gutenberg hack lab what do we want to do I can make some suggestions we can like answer questions templates do the pre-made block layouts so we can take like feature requests or I can look at some code that I'm working on that's a good example we can look at something that other people here wanted to build we can all just kind of like break up a little and go and try this why don't we do questions for a bit so you've got the php side register block text do you need to call them both or are they going to be used to change it no but yes is the short answer and not set because surfacing this data on both sides is like the wicked problem of php javascript and you know we're not using known on the server so we just have to deal with it you can register attributes on the server side and if you're doing the like replacing my short code style you probably want to do that or if you're like maybe using an object oriented system for creating your box dynamically that might be easier to do especially with database access um you know secured information that's only available on the server you might want to do that with php so you would use register block type and um you know if you're going to use meta you know at least you need to kind of put those two pieces of registration you probably want to use functions that represent the data consistently um but you do not have to use both and if you really your minimum with the php side is just to say it exists and have for some way have have javascript file exists like the preferable standard way being that registration step it's not a piece of all the rules nobody's going to people will say bad things about you but nobody can stop that kind of links to my second question is you've got the attribute storage and the meta storage can you talk about when you would want to use one or the other yeah so or the html storage I would love to use both and that's something I've been scheming on because I think there is a huge benefit to having it where it's just the way that it is and it has a consistent markup in that plugin that I had you'll see that I'm setting the classes using keys of the object literal so that way there's one true source of class name and therefore the html structure will be consistent and I don't know anything about css for design because I shouldn't be allowed to do that but I know that if I'm consistent about these things that will make designers happy and that will make SEO people happy and so that's another advantage to doing kind of JavaScript land is that you can define it there so my answer is I don't know what you're doing and with meta storage you can query the database right you can't do it I need I would like to say you can't I need all the posts where there's this one html thing but I've written that script that's got in every post and scraped it for the shortcut and rejects this is stupid let's stop doing that and now I have this system that's the one true system for and that's what these block attributes are for when you're in Gutenberg in the top right there's three dots and you can switch it over to html code mode and it's a pain in the ass to look at but it helps you conceptualize it as a develop because that's kind of a weird thing this whole concept of batch attributes and how they relate to html is weird actually I'll take a minute like I was lucky he likes it because he was figuring it out but it's weird but it's super powerful super neat and it's an opportunity in WordPress to say noun meta fields or whatever fields I've used which you know is really different did I not answer your actual question I feel like you were asking about templates well my question about templates might be answered by the plugin sidebar which didn't exist last time I was looking at it are you talking about page templates or like for instance I'm trying to figure out how to use this it's actually like a pop-up maker 90% of the data we're storing is like how do you trigger it where it's positioned so that's what I've been trying to figure out and one thing that was suggested at WorkCamp US and this is before the plugin sidebar existed I think was they were coming out with nested templates so you could basically have a template block that had an editable area at the top which would then have a nested template where they could build their own layouts and they could have a block that they couldn't move at the bottom when you do register post type there is now an optional argument register post type or template where you can set an array of blocks where they can be nested and then you can there's like a global word called lock and if it's locked that's the thing that can't be modified and if it's not then it's hot and there are open tickets about the fact that that's not good enough right so you'd be able to lock the top level template but unlock the nested template so right now the API is incomplete for that kind of stuff but there's an understanding that that's a need it's kind of my choice whether I use the plugin sidebar or the nested template yeah and then the other thing is that you have settings in your plugin that just have nothing to do with content right you know like rules on like when does it expire right like they show this pop up you know this date range I assume it's a feature in a minute but that kind of stuff it has nothing to do with display a plugin sidebar is probably the solution there I don't know how it's going to work with you know if you could go the whole way out second session would be do you have to use their own field APIs to use those or can I render my own we just went through a whole rewrite to build something maintainable and simple okay so you can if you have a meta box there's JavaScript rendered tabs yeah each will still render right like in that video I don't know if I scroll down the way to Yoast but Yoast was just there right the same old thing was there I mean it works fine now whether or not it's going to save the same way they've gone through a lot of lengths to be backwards compatible you should test it that there is when you go to the meta boxes section of the template of the handbook it explains this kind of path where you can mark your meta box as just for backwards compatibility you can mark it as incompatible which would cause that post type to divert to classic or you can just say this is the one that we you just leave it be and just let it be that like there's no reason to change if it works so test it and see if it works and then decide is it going to benefit you as developers is it going to benefit your users to make a change right is it worth it I'm definitely looking forward to being able to like compose a premade layout like a subscription form and a list but the other thing is and I showed this with that editable component instead of coming up with your own rich text set instead of looking at using your own coming up with a number input and when I say a number input I mean the h2ml that surrounds it and the label and the description and the aria tags to make those associations in the right accessible way that used to be a thing that we had that you know come up with our own system for right I've got a form built on it right but instead you can use the Gutenberg component called text input and one of the properties is label and if you do that it will create the right you know for ID relationship and if you use the description it will put out a paragraph that has an ID that's aria you know aria described by probably more advanced than there is honestly we have field dependency and everything already built so use your thing but I'm saying because there are other people in the room that is the opportunity to have the one to work the best way but if you're outputting your settings with html stop it and stop it move to something like this because you're literally if you want to add a new setting and in my new method or in this that you literally add a new php array key that names the setting the type of field the label and the description and boom it's automatic the rest handles don't do the old way oh yeah I'm halfway there but we're just going to use good a bunch of other stuff because WordPress has the this has this framework this is where I started where I said it's a UI framework if I say that because it delivers this one end result but I can use that one little piece if I just want the way that cool little component that for blinks that's called url that's wp.box.components wp.components I don't know the handbook yeah so but it's literally that input that does the search automatically for posts and if I want to modify its behavior I can extend it and nobody's telling me I have to use that but why shouldn't somebody else is better at this than me about designing it the answer to the main thing is the compatibility and the styling and do the accessibility audits why not make life harder and the answer is sometimes it's worth it I don't know if that's going to continue to be worth it to develop those kind of custom solutions like you did in the past because I really don't want to keep talking for more than an hour um I could I could literally start looking at code I just need to like get a little bit more water because we have about an hour do you mind I appreciate it can we take a survey of who's in the room the javascript familiarity