 Hi, I'm Josh. Thank you for coming. This is like 9 30 after the after party the night before so Thank you. I'm really impressed. Everybody's here and like looks awake. We're awake ish pretend. It's a story you tell yourself. Um, so Come join us. Thank you. Um, I Meant to message Carl and say I didn't really like the word slightly in the title Um But you know, then I know we got distracted. I think this is a little bit more like fairly advanced topics and block development So be kind to yourself if this is all new which it is for the whole community. These are topics that I've come across in my work Working on a plugin called caldera forms that I'm pretty obsessed with and I get the pleasure of working on It's a drag-and-drop free responsive form builder and we've been working on incorporating the new Gutenberg block stuff What does that mean? How much of it are we gonna use inside WP admin in other places? So that's kind of what this talk is about and it's a word camp talk So you're not gonna become an expert in Gutenberg in 45 minutes, but hopefully when these problems come up You'll remember this in these slides are at caldera forms calm word camp Montreal 2018 If you look in the speaker notes, there's gonna be a link whenever there's a code example And you might kind of squint to read and it's a image if you look in the speaker notes when you download these slides There is a link to You know a file you can download that has the slide the code Um in some cases, it's literally just cut and pasted out of caldera forms It's a word camp everybody's welcome what we are talking about today is Once you've been mastered the basics of Gutenberg if you haven't yet, you know if you don't know how to build a block That's fine. There are tons of talks about this on word camp TV to search for Gutenberg Mine from word camp Jacksonville kind of goes before this talk in the chronology But we're going to let's go back We're gonna be talking about Building slightly more complex products and what do you do about your short codes? Right, you have a plug-in. You have a theme you have a site you've developed and you have short codes there It's a hundred percent necessary that those short codes continue to work, right? So let's talk about that because that's one concern But also if you're building plugins you want to make sure that your users don't keep using short codes They start using blocks to work with your plugins. So we'll talk about that Um So we're just gonna be talking about like sort of the modern JavaScript tools Constructing like an interface out of Gutenberg components and creating components components that can be shared Right for use we're gonna talk a lot about code for years How do we kind of build web web applications out of WordPress? Thanks to Gutenberg? This is a photo of my dog She's super excited like I got this photo her food would be slightly off to the right And that's her favorite ball and her favorite little toy so she was super excited about this and that's kind of me Are this stuff like I'm nerding out about it and it's um, it's really fun But also like, you know, it's my dog. She gets me in the slideshow um the Kind of question of do you need to use all these fancy things that you hear about with JavaScript development webpack npm parcel? Whatever um This is an important topic. I write I generally side with yes Um The period gets its own line for emphasis You don't have to I Is there anything obvious unobvious about my opinion here like npm yarn like dependency management Consistency everybody on your team has exactly the same copy of low dash of react Right and that's a thing that you write one line of code and everybody has the same thing when you distribute it Everybody has the right dependencies You can build in your automation for your testing for building for release, right? You know when we develop plugins we have test files We have unminified JavaScript all the stuff that maybe we don't want to send to wordpress.org We don't want to load on the server and production, but we need for development We can write scripts to do that so it's really a lot of the crazy stuff about wordpress Where we're cutting and pasting copies of like bootstrap jQuery plugins in That's kind of at cons known modules gets big. We have to learn some new things. I think it's worth it Webpack webpack is a fully featured bundler so it could do things like take JavaScript files and minify them combine them. He can Take new JavaScript syntax is yes sex. Yes next things like Type script and flow which creates strongly type JavaScript, but you can't actually run that in the browser webpack and compile that to browser safe JavaScript You can help with CSS and images because of them Because of Babel you can use the new JavaScript syntaxes and because of web assembly you can use basically everything It's not the easiest thing to learn And it's a very fast-moving ecosystem so That kind of but it using webpack and Babel allow you to use the new JavaScript, right? I can never remember if I'm supposed to call this yes next or yes 27 10 17 and right I just call it the new JavaScript because we get like Constant and let instead of our much simpler We have arrow functions iterators fetch a single wait like it's a really neat Language using it is a little bit more mental overhead. It's you know, you often have to transpile You have to remember if you're supposed to call it yes next No, but like, you know, you want to look cool in front of other JavaScript developers, right? So but once we start doing this I want to talk about the things that we can do when we use a modern approach to JavaScript development in WordPress Does anybody use node package manager? Right. It's useful, isn't it? What's use it to manage WordPress right nbmi WordPress element? Install with the WordPress element instruction. That's part of Gutenberg. It's on npm This is Cut and paste it out of the Gutenberg source code for element what we just installed And if you look it's importing create element Create cuz that's what like React basically does is creates elements It all these other things Component when you see react doc, you know class extends react dot component That's react dot component and WordPress is just exporting them right away unmonified in the reason for this Is you know how WordPress uses jQuery one dot something? but jQuery is on three Because there's just no better solution for WordPress There's no way to upgrade the jQuery dealing with the fact that jQuery 3 has removed certain functions That many WordPress sites are dependent on from jQuery one. We're just stuck So this right now is literally like cutting and pasting in a sensible fashion So in the future if WordPress needs to go in a different direction, we have a place to do it But right now, it's literally like import react export react So everything that we're talking about today is a WordPress concept But it's really a react concept, which is great because there's a ton of resources out there on how to use react And there's a ton of great tooling and a ton of great stuff But also your WordPress developers, you're like, what about backwards compatibility? This is smart When this becomes an issue, this will be how it'll be solved. That's way better than the jQuery situation and inside a WordPress This gets put on a WP global. This exists now. We have like WP dot API request things like that in WP admin. There's no real management for it But now if you enqueue WP components, you would expect WP dot components to be the WordPress components package And that's things like in this case a select control Or WP element, which has got component for building components And then WP dot I18n, those are the translation functions WordPress is this great set of PHP translation functions where you give it a string and a name And then the text domain and then it swaps out if it has the translation for that string It swaps it out and you have all those PHP functions. There's now a JavaScript package that does the same thing So that's the WP global when you're in WP admin You or Gutenberg or whatever has enqueued WP component, WP element, WP data Using WP and Q script like we always did So I said that we were able to use npm to install these parts of WordPress So if we're in a WordPress plugin, we don't want duplicate right, we don't want to load my my copy of WP I18n and your copy of W18n and course copy, right? That's bad for performance We want to load one. So I'm gonna develop add them to my develop dependencies So I can test with them. I can use it in isolation But my plugins, I'll just use WP and Q script to put it there If I'm doing an app that won't be used in WordPress I'm just going to install it regularly. So that way it's in my webpack buttons And sometimes this gets a little trickier and like webpack and roll up can handle this sort of stuff I mean, I just kind of paste from how it's done in Gutenberg So what inside a WordPress now? Once I've installed This doesn't really matter if it's WordPress plugin code or a web application code at this point. It doesn't matter Like as long as we take this into account In our decision-making the rest of this doesn't really it doesn't matter. This is the same. So I can now If you do JavaScript development, I know this should be look weird, right? I can just take a piece of WordPress and import it into my scope using webpack And then it does all the tree shaking and optimization if parts of these libraries aren't necessary. It doesn't include them It's pretty smart This could be its own slide But the benefit of working this way is that just an enzyme are really cool testing things We're talking about this on the way over here that when you like start a WordPress site with WPC You get very little WordPress stuff done Whereas when you create React app you get like unit testing and accessibility testing and all of this stuff like right away it's a different developer experience and when you develop WordPress this way you get to start to tap into this stuff and it's great because You can have your tests as you're developing them So any time your components change you're just basically taking a JSON representation So if it changes it shows you a diff of what's changed and you say That's great. That's what I wanted and updated or you know, I made a mistake and keep working So I really love that you know accessibility testing really great so Once you have this all set up you can use JSX this is an option you don't need to know JSX to write react or WordPress Gunnberg I recommend it strongly So we'll get back to that as we go There's scaffolding tools for blocks out there, right because this is a lot of setup Right, I think this stuff's important. I think it's worth Thinking through if this solves problems that you have in your life, but also like I don't want to set any of the stuff up, right like I Basically understand webpack But if you asked me to like set all this stuff up in scratch And I could cut and paste from code on github. I might get it right but WPC li is the command line tool for WordPress These two commands will make you a new WordPress plug-in with a block That's basically like a hello or a block requires no build tools This would be what I would recommend if you've never built a block install this package type that modify what it generates and That's really the best way to get started For more complex blocks that actually use the monitor tooling create good and block Is copy is similar to create react app if you're familiar with create react app Which is developed by the react team for scaffolding react apps. This Gives you all of that stuff in a WordPress Gutenberg block package in one command There's also good and block Which I've looked at and tried once and then got distracted, but it looks really neat it's similar to Create good and block and it also gives you like a Docker environment I think it's still under development, but we're looking at Human made has a React WP scripts That's their own create react apps that handles a lot of the weirdness of in queuing scripts in WordPress when you use webpack It gets weird They've worked through that doesn't actually create blocks, but it's really easy just to add a block from there The when you're doing JavaScript development you can have the page Refresh every time you make a change And with haunt module replacement. It'll only replace the one thing that actually changed. So it's super fast Um, and that can be tricky in WordPress I generally just don't have it like the create react or that human maids WP react scripts Creates a separate dev server that does that and then you just load it into WordPress when you're done That works for me Let's talk about building blocks out of this stuff I'm creating blocks out of modular components What's really cool about react in Gutenberg is we can have very small functions that do one thing And then we can build larger things out of it So the Gutenberg philosophy is everything is a block as developers We can go more modular than that everything's a component that we put together to build blocks So our users can build stuff out of blocks So this allows sort of modular building blocks for our code Every single function has one concern Code becomes reusable code becomes highly testable I work in plug-in support does anybody else here do plug-in support theme support work for host? Yeah, people are concerned about stability aren't they things break a lot in WordPress That worries me as somebody who's dependent on more and more people coming in wanting to build WordPress sites And hopefully they choose my plug-in and then upgrade to the paid version, right? So I'm worried about some of these stability concerns when we as developers write code that's more easily testable We're more likely to write tests that helps solve this problem So has anybody have we all built blocks? Last time I gave this talk it was like at the end of the Gutenberg day And I was like, yeah, that's topics that make sense. Josh. We've been talking about Gutenberg all day I realize now I'm skipping past some of the basic stuff in your Gutenberg block You have an edit callback. It creates the edit interface We got that concept edit edit callback edit interface This is the JavaScript function that generates our edit interface that you see in the Gutenberg editor And you'll notice that I'm not doing a lot of code here. I'm just dropping components We'll zoom back up to the top to see where some of the stuff gets imported from But inspector controls That's a h.o.c. From that's a component from wordpress that when anything inside of here shows up on the right in the You know block Settings this right here. This is my actual block. We'll get into the rest of this stuff. This is the whole thing We're gonna zoom in on parts of this One of the things that we can do in Gutenberg as we start to make this more complicated We can use data from state From like what the people are currently typing into other parts of the interface Right, anybody ever had to like figure out what the categories are and then make a recommended post widget down there You could do that in real time by just subscribing to the categories So if we wanted to like use the current post title now This was kind of smushed in there. It's kind of hard to read before that's why I jumped ahead You saw this in the last slide we could say WP data Right, this is one of those modules. We were talking about importing. I want to select from core editor I want to select from the post editor The document title and the document permalink So whenever the permalink or the dot or the Or the title changes This function gets run again in this array or this object that I'm building here will change So some as somebody types and changes the post title this object will change in real time how that works just doesn't matter I mean it's redux. I give a whole talk on it, but we don't have time for that But my point is for you as a developer it doesn't matter you should not worry about that You should just worry about the output let WordPress take care of that concern This is literally all you need to know in order to know what the title is at any given time as it's being changed That's much different than I'm used to working with WordPress Um, so what am I doing with this? I'm passing this into a component Right, this is a tiny little function That takes props and Then with props we get that settings back out. We figure out the share link here Right, this is kind of like Twitter comm like this is if you just build a text input This is sort of the no, you know, no Twitter tracking way of building a Twitter link You don't want to embed all their tracking JavaScript Which you'd need like a GDPR consent and a cookie consent for and just building a URL and Then building a little link, right? This is JSX here But it looks like HTML doesn't it that's a div you see how it has like an HTML div That's how you create a div Why reinvent the wheel? Let's start reinventing the wheel. You see how it's this class name That's because it's a JavaScript function, so you can't use the word class Right because that means something very different than like the CSS class So class name gets rendered as class Same thing with like on a label. It's HTML 4 instead of 4 because 4 is a JavaScript Keyword so this gives us it's very much like in PHP when we can do with in double quotes with We can put variables in but this updates live in the DOM automatically for us So whenever the value of any of what's coming in in props changes this re-renders as much as it needs to But as little as it needs to so it's performing and there's a ton of math there that I don't understand But that's why we have Facebook Like I don't use Facebook much socially, but I use their open source every day. It's really weird um, I really like the Inversion of they're working for me instead of the other way around So let's look at an example of how we can reuse word presses stuff In our own pockets, right? I have this theory that if all the plugin developers get together and use Gutenberg components for interfaces It'll be a lot less confusing to use word press, right? Because if you learn Gutenberg then you should you should automatically know how to use the rest of the thing, right? As WP admin takes on more Gutenberg components as plugins do it should be more intuitive to use word press because you'll be learning less things And you'll be switching us So here's another component. I've kind of zoomed into its render So we can fit it on a screen again. This is why I have the downloads for my slides And we you see how up here we have import checkbox control text control from word press components They've got basic controls like radio button, you know range slider that kind of stuff Whatever you see in Gutenberg you can reuse And then more complex components for these are just basic checkboxes where I say Heading label help text it's wordpress and this stuff's super accessible like they've thought through all this Like it still needs work like there's a lot of a li a 11 y issues in Gutenberg that need work But that's a good thing about wordpress is somebody will step up on them or maybe somebody here But they'll like put the aria described by tag based on the fact that you put that help There like it's figured out for you And it'll be consistent and if there's a change in the standard wordpress can update that right if wcag 3.0 is a thing I assume one day and it changes how this works like wordpress can help update all of us once we're through here So like we say is it checked or not and then we have an unchanged function. This is super important This is coming through We'll see this but this is coming down from it When we have to pass data back up this is coming in our edit callback and wordpress We're past this function set attributes if you're a react developer and you're familiar with set state This is the same API. I assume it's the same function under the hood somewhere. I didn't look But our block has some attributes which we defined and then when we update them we use set attributes to update them Right we get attributes. We get set attributes in wordpress is passing us this function and saying hey You use that function to update that your values and then we can we can wrap it up in a reusable function like this And then we can pass that Into our components. So our components are unaware of the fact that they're loaded in Gutenberg But they work perfectly with Gutenberg because set attributes as a predictable API and we're just passing this unchanged function down to them and This is the same slide Code reiss Right so inside of our component. We're just calling on settings change this dot on settings change So our component is unaware of what it's doing. It's just calling this function what that function does doesn't matter But I said that wordpresses set attributes has the same API as react set state That's an opportunity for code reuse. It doesn't really matter where it goes to the component That also means you can use it with a unit test very easily The difference between using it in a unit test and using it in real life doesn't mean anything really So this is my settings component I've kind of like lopped off the render here so we can see we were looking at how it renders But we get past this on settings change component. Oh, I'm sorry. Yeah, see this dot props dot on chat Unchanged settings. So this is a dependency that comes in and then we just pass it an updated value of what it came in We merge the change in and we pack we call that function which then gets called by Gutenberg Right because remember that came from Gutenberg in here So this is kind of this part that I had lopped off For Britain for the sake. This is the bottom where we have these these functions So JSX looks like HTML And it's kind of like if HTML was dynamic. It was live whenever any of these values change it changes for us But besides that it's like fancy HTML Blocks in the front end This is less complex than it seems we gave this Talk at WordCamp Miami like all-day workshop like four of us in March when this is all very brand-new and at the end somebody went Okay, so how do I show it on the front end and we said but it's just HTML Right like we spend a ton of time on how to build these complex interfaces that hopefully are just putting HTML Into the post-contact and then it's like how do you show HTML in the front end? Well, that's what we've been doing for like 15 years, right? We've been using the tech the whizzy wig editor and short codes to put HTML into the front end and if you're saying yeah But Josh, we don't actually output short codes. Well, hold on like there are pages on my website where there's like broken short codes But in general, we don't want to show a short code. We want to show us a markup So in some cases, we're just going to use Gutenberg to save HTML into the post and that's great And then we use a Javascript and CSS to To enhance it so in this case, this is the save callback in our block Take a look in the handbook at register block. It covers all the different things that you do when you register a block using the function register block We can all remember register block So when we save we can save some some HTML. What does react do? It generates HTML. So when it saves the block, it'll call this component Which by the way is the same thing I used for previewing it, right? And potentially I could mount in the front end or in any other react app And I just use it to save HTML to post content Right and that's really neat because we could save semantic HTML that works with screen readers works when Javascript is turned off Works in low brand with situations and then we make it better progressively. That's really neat Um Right like why invent a new thing Like I know it's WordPress and we like to invent new things come up with our own way But I love the restraint here. I love that like just save a semantic HTML whenever you can strategy I think that's really beautiful. Um Sometimes your blocks are dynamic for example WordPress core has a block for recent posts It doesn't save the HTML of recent posts there because that can change every time it loads It does a rest API call to get the current post and puts them there, right? It actually queries the database We've all written short codes this way Sometimes you might want to save your blocked out as post meta, right? You can query by it. That's super useful You do like a where query. Those are great. Um, and so that might mean like a more complex rest API driven app That might mean get post meta gets called in your theme. I don't know. These are all problems We had before there Before this um now you can use a PHP function to register your block This is super useful if you already have a PHP function that renders what your block does for example a short code callback So in your JavaScript, you can tell Gutenberg Don't save anything. It saves the attributes like magically In one of those HTML comments that doesn't actually get printed. It gets stripped out So when you do this The rest is kind of automatic, which is cool No pun intended So in caldera forms, this is what we do because we created a block to show a form But like we already had a short code to show a form that we already had a PHP function to show a form Why reinvent it, right? I mean like that would be fun, but I had other things going on So um in PHP side we can register a block we can either do it in JavaScript, which is preferred Unless it doesn't work, which sometimes it's just not the right option in this case We needed to register our PHP render callback So I have this function You'll notice the first thing I do is check if the function register block type exists And if it doesn't exist I return That's key because after that I'm assuming Gutenberg's installed as a plug-in or WordPress 5.0 is active Right, that's a big assumption. Let's test for that first So we test for that and then we register a block Just like rest API routes, they have namespaces this will throw an error if we don't have that slash that So all of the ones from your one plug-in show the same namespace and I have no idea why I abbreviated, but I'm stuck I did this in like December. Nobody knew what they were doing And then I registered the name of a function that will get called when this rendered We'll get to that in the next slide and then I say it has attributes. We kind of touched on that and again, I apologize Well, we're good the Jesus 10 minutes. I've got like three slides the Because I thought we would have like a beginner block because this is in Boston But the attributes are kind of the data that your block has like what are the settings of your block in this case We have a we have this attribute called form ID and it's a string in its default value is nothing There's a section in the handbook on this It needs work. I should try I should do some work on it, but it kind of explains this attributes concept I went way more into it in my intro talk, but the idea is that this block knows about form ID Wordpress handles that automagically storing it and then when it renders it calls this function, okay? So this gets past that array of attributes. I should have run a linter on this There's an extra space after attributes, but not well. There isn't a space before attributes, but this is an array And then if right remember the default value of form ID was empty Right, it was just an empty string. Well, that's no good. There aren't forms of that So we do have to do a little bit of validation And then as I said, I already had a function that renders forms So I'm just using Gutenberg as a way of connecting settings in the user interface To this function that just takes an ID and renders form, right? And this is exactly how my shortcode callback works You know, my shortcode has a that's exactly the same arguments and calls this function The difference is that um, this is data coming out of the database so I don't trust it So I am going to count Airforms very safe string does a lot of sanitization to strings that I don't trust So I do right like it's coming out of the database. I don't trust it But that's good early all it takes to render an existing PHP function based on the settings of a block And it's designed to be a lot like shortcodes so that way you can Reuse your shortcode type architecture, which creates backwards compatibility simply I'm basically at the end. I'm around the rest of the day We're doing a lot of this stuff putting at Caldera WP Putting blocks together putting stuff that goes in blocks also in react apps in Laravel that kind of stuff So that's interesting. Come find me or I'm at Josh 412 on Twitter Caldera forms comm slash contact again in touch It means a ton to me that everybody like came out this early in the morning to hear me nerd out about the stuff that I get to Do um, so thank you very much. I think I have a little bit of time for questions Any questions? Jamie yes, yes so the question is about Extending blocks is there a model here to take a block and make it into your own version of that block That that's fair. So yes, there are in WordPress PHP. We have this this plugins API We have do action add filter right apply filters and action There is a if you search on npm. There is a WordPress hooks package Now that is a JavaScript implementation of that same pattern So one of the things that happens in the JavaScript code be right after a block is registered is one of those filters goes So you can actually use that to a modify it and say, okay, this block has a setting for color False that's no longer a setting always save it as you know, this hex code Don't let the user do that for example. Now also color palettes are in your theme You can register color palettes so that will constrain the settings of blocks to only use certain colors, right? So there's a lot of these options But one of the things that I've done is at that event like when the core button block goes renders copy It's current settings into a one that has like one additional thing and now I have a second block that just you know But in for one special use so there's a lot of opportunities like that And then the other side of what you're saying is like what if you don't want that capability? um on a per post type level you can whitelist and blacklist blocks and You can also have like intercall you got a box that have nested blocks inside of them and you can define what type of blocks go there So you have a lot of different control like you can make it so in the books post type You have like an author bio block and author photo block in a you know Book summary block and those have to be filled out. You can't add any more they go in these positions Or you can say like that's how it starts, but they can add and remove blocks beyond So there's a lot answers to that which is great because if there was one they wouldn't be good enough Do we have other questions? So the question is and correctly if I'm wrong if you're getting content from a post that was edited in Gutenberg via the REST API Do you just get the rendered content or do you get the blocked out? Right, so by if you go to the rest API and you query for WP slash v2 slash post 42 and you get post 42 and then you go to you know content dot rendered like you always did you would expect to see all the Block content rendered there, so I'm gonna answer your question twice and say no It's all rendered there just like short codes are but there are new API endpoints For getting the block data of each post because like for the most part you just want it rendered right like you have a valid developer reason for wanting that data But 90% of the time you just want it rendered right and that's why the rest API was built where like the title and the content Are an object and you have dot rendered So that way we can do things like have dot you know have un-rendered when you're in an admin context or whatever it is and there is You're gonna have to look in the docs. There is either an endpoint or a sub route of There's either it's own route or an endpoint of the post route that gives you all the block data But you have to have the right authentication. It's not publicly available by default Because there's likely private information in there, but it is available and also Michael wood has a blog post. He's WP scholar com. He's WP scholar on Twitter Michael would he has a blog post on creating a rest API endpoint out of the block parser, right? like there's a PHP parser for block data and He bet he showed this very simple bit of code that creates a rest API endpoints That's just JSON encoded attributes in that potentially for front end could be very interesting query that type stuff So there are a lot of options, but by default it's just gonna render it out, which I think makes sense Other questions time we had a time here Okay, well, I'm around the rest of the day and I love talking about this stuff so come up if you have questions about Gutenberg But thank you so much for coming out. I really appreciate it