 All right, thank you for that lovely introduction and stalling My name is Julian today, I was not planning on speaking I was hoping maybe just to organize this time, but we had a couple cancellations and I wanted to make sure we had some Gutenberg content So what I'm doing today is kind of walking us through a Short version of a workshop that I gave at WordCamp Europe. It was a three-hour-long workshop So just bear with me here because what I want to do is I'm gonna make sure we all have a chance to look at a lot of this code I'm gonna I'm gonna ask in a couple minutes, you know What kind of experience we have some of this might look a little crazy just depending on where you are I? Put the slides link in here, but to be honest After I thought about it for a second. We really don't need it because I'm gonna be Showing so much code off Which I will give you a link to the code at the end. So just a quick introduction. I'm Julian I'm the technical director at craft peak. We make websites for breweries My Twitter handle is right there. If you want to take a picture or tell me that I'm wrong I like dogs and motorcycling and I've been really into traveling over the last couple years Just came back from WordCamp Europe in Belgrade, Serbia, which is where I gave this workshop With Zach Gordon and he's a pretty popular educator in the WordPress space And he's doing a lot of JavaScript stuff and Gutenberg stuff So I will say I highly recommend Taking his course if you're interested in learning a bunch more I've helped him edit some of that and work on that content. I also play music and I really like cooking There's lots of other stuff. This is my dog Wilbur and you could see the mountains, but it's not gonna work on the screen That's my motorcycle, but that's kind of what the mountains look like on the way down to South Carolina from here Like I said most days I do websites for craft breweries We work exclusively in the brewery industry and have about 50 clients Kind of scattered across the East Coast and all the way to Colorado and then two in UK and we do the Econ we do e-commerce for them as well as websites and you know basic online marketing stuff I'm also a Member of the roots.io team so I work on a lot of the roots tools like sage the starter theme bedrock Don't do so much work on trellis, but I highly recommend checking that out. They're all free tools and Then for about three years, I've been very seriously doing JavaScript development I did react for I've probably been doing react for about two years I think the Gutenberg decision to go with react was Really great for me because it felt natural I know that it was kind of upsetting for some people But I think that we've ended up in a really good way and I think that I'll be able to show some of that off here today as well So really quick I just to get away from the code. How do we how do we feel about Gutenberg right now? Are we excited? Maybe like raise your hand if you're excited like if you played around okay, so like less people who's scared You should all be really scared. I'm very scared I'm confused I think that that's also valid to raise your hand and You know if you really have never heard of Gutenberg Unless you're my girlfriend sitting in the back because she's watching me You could go to John's talk because John's going to give a really good thing. I won't be mad if you get up and leave Are we getting ready for Gutenberg is if anybody currently trying to get ready like actively at their agency Okay, or or you know in their work cool so I think you know right now it's a little complicated because everything's in beta right now and Still I mean it's stable But it's you know it has you know all these installs and still two stars on on the repo and it's pretty scary But regardless it's happening so we have to get ready for it and as developers We have to know how we're going to move over all this custom functionality that we've had I know a lot of us I'm included a lot of us use advanced custom fields to keep track of metadata on pages and There's some really exciting things about Gutenberg when I was first getting into it I was very upset because I was like this is gonna take me a long time Now I feel like it's gonna be worth it and for us We're kind of a platform when Gutenberg launches and I have enough time to move all of our clients over I can very confidently say for us. It's gonna feel a lot like a 2.0 for a lot of our clients So I'm personally really excited. I'm also scared for the amount of work that I have to do So let's talk about Gutenberg blocks for a minute I'm hoping that we all have a little bit of experience, but this is you know You're gonna go add a block and you've got all these kind of I've got a bunch of example blocks right here from Zach Gordon's example block repo, which I will also link to in my slides It's a really good way to get into this block development and my block is a combination of all of the most complicated Possibly complicated parts of the WordPress Gutenberg API except for the sidebar API so I I'm not gonna ask all of you to have the prerequisite of even building a block today because I'm gonna explain some stuff But I will say at the workshop that I taught our prerequisite was that everybody had built a Gutenberg block because we had another workshop where people were building it Zach Gordon has an example block Repository on github is really great just to look through because there's some really simple examples to get you started So Gutenberg blocks are modular and usually independent and what I mean by that is that you can move them around and also they eat They each keep track of their own data They're gonna be registered in JavaScript There's some methods via PHP and there's going to be some more methods via PHP If you want my personal opinion don't really mess with that. It's not I don't think it's very useful Because you're gonna be building these things in JavaScript so to me it makes sense to register your blocks in JavaScript usually these blocks are built with react or You're gonna have to use a combination of react or whatever framework or whatever regular JavaScript. You want to use All of my examples today are going to be in ES 2017 DS6 whatever latest JavaScript you want to use Blocks have two different types. This is a super important distinction to make so I'm going to talk about it for a second when we get to Kind of a little bit more of the code example, but static block types Store their own data and what that means is that when you go in and you go to add a block into the back end And I'm gonna show you here in a minute, but when you go to add a block in the back end That data is saved to the post content. So it gets saved locally into the post, right? It's not global. It's not across Different areas of the site It's in the content the actual content of the post there's also block types called dynamic block tapes and To me dynamic block types are where we start getting into the advanced custom field world and where we start getting into this a Lot more options for where your data comes from and where your data is saved is really powerful But what I will say with dynamic block types Unless you program it to be this way you cannot have multiple And you're gonna see it here in a minute But let's just say you have your source of your data coming from a meta like meta attribute and then you put two Blocks on the same page that both get that same meta value That's gonna get kind of weird with the editing experience and when you hit save. So just be careful with dynamic blocks That said They can be used in so many different ways and when they're rendered on the page You can actually make it so that it's regenerated. So Again, I'm gonna say static blocks are saved into wp content, which means when you hit Update it gets saved into the post and then when your post is displayed it gets shown right that makes sense That doesn't that means if you have dynamic data You can't use a static block because it's just hard saved into the post You have to use a dynamic block a dynamic block can register, you know have new data And we're gonna see this here in just a second Blocks can come from a lot of different data sources like I mentioned Dynamic blocks is literally like writing little snippets of PHP of what you want the block to look like and we're gonna see that but Static blocks also have a lot of different data sources and types you can get data from you can like, you know have a text field or a number and Kind of change around all that those options are available in the API But I'm not gonna go over this Okay, so if you could raise your hand really quick and have we worked with react or a JSX? Okay, about half the room Have we made a WP API endpoint ever a custom WordPress API endpoint? Have you ever made a brick Gutenberg block? Okay Have you ever are you using Gutenberg in production? I don't even I actually not a lot of raise my hand Um, I am not although I will be adding it to my to my personal lips. Oh, actually, that's a lie I built a blog with Gutenberg. Um, it kind of works. So So I think you know at this point I will say I wanted to cover everything on this page and I Don't know I might just kind of not talk about the API endpoint But I'm what I'm gonna do is I'm gonna give everybody a link to the slides and you can see the code examples and I think a lot of things will click but Due to time you're gonna have to just trust me on a couple things So the block that we're gonna build today and that's basically already built I'm gonna show you the code that powers this block is a very Simple block and this block is made to Basically get some points across But it's insanely over engineered. So if you were ever going to do what I'm doing Yes, it is definitely the right way. It is like way too far the right way But it's a really good way to show some APIs some some really cool ways to build some functionality and this This block code that we have on github is is a really good Recipe for some pretty custom stuff that that you all might need to do if you're for example using advanced custom fields or something like that So we're gonna be using very simple JSX components and for those who don't know JSX is a templating language that is Built into react. It's you can build a bunch of crazy templates But with react JSX makes it a lot easier to build components and build Markup basically and separate your markup from your code if you went to the fantastic Vue.js talk yesterday There was some good examples of Kind of putting logic in your Markup and having a templating language be a little bit smarter We I'm a very big proponent of dumb dumb components They're called and it just means components that render data that you give them They do not do anything else. They do not do logic or anything. So we're not gonna be showing that we're gonna be doing that Where it belongs for react? We also have an API endpoint that we've built as part of this For basically a ticker and so what this block does is if you can imagine at the bottom of a page You might just want to have a little heart button like have we ever seen on medium? How there's like claps or whatever. This is a heart button and when you click it it Adds a like or a heart. It's a react. It's a reaction and that's it. That's all the block does King of over engineering we're gonna use Wp data, which is a new API in the back end of WordPress. Thanks to Gutenberg Gutenberg uses it internally Wp data is basically React reacts well, it's not really it doesn't even have to be react but redux. I don't know if we've ever heard of redux It's a state. It's an application state management Methodology, it's a tiny framework. It's 50 lines of code But it basically is just says very explicit things about what data is on the page right there And it helps us build Applications, I'll explain this a little bit, but also Gutenberg uses Wp8 Wp data constantly and it's actually really cool to see it watching you can do something called subscribe to data stores It's this is just for on the page you can do something called a subscribe and you can actually add that call in to subscribe and Watch it as it updates. So you can see all the updates that that Gutenberg makes. It's really cool The other thing I just want to say is you're gonna see me using the WCEU 2018 Gutenberg reacts it didn't make sense for me to change all the code over just for an example So that is also probably an over-engineered post meta key But nobody's ever gonna use that for their plug-in So that's where we're gonna store this counter and literally it's just a number and we're just gonna increment it So the process of building a block like this that has a lot of moving parts and Actually, let me just let me hold on. Let me just show you an example of this of this block really quick Local so you can see this site. I'm gonna go to the individual post Check it out Whoa Seriously, that's it. That's all it does If we look in the back end here My password is password If we look in the back end here There's our meta value So let's just say I wanted to then you obviously would not have this on the back end of your site But this is just so that we can see that we can update the meta value to By hit update Look how fast that is these are the cool parts about Gutenberg right like that was instant because there was an Ajax call It just happened there. Nothing had to hit save the page wasn't refreshed It's so awesome and if and if you haven't seen I mean, you know adding things. Why is it making me login again adding things? Here actually, you know what I just remembered I just remembered that I haven't turned on screen recording So just everybody hold that thought Sorry All right Save me That means that if I didn't record my screen because there's so much live code I wouldn't allow this on WPTV And I want to make sure this one gets recorded So if I want to add like a regular block and I don't even know if we've ever even seen this So I'm just gonna show you really quick like there's some really common blocks like I can put some text goes here And I can you know make this center aligned and I can move this block up and it's just such a quick reactive Amazing experience. I still think there are some holes and in this compared to what what, you know, we use but It's just so fast the way everything happens and and I think it's really exciting So again, I changed the meta value in the back end just so you could see there's somewhere in the database But I'm gonna click it again. This thing doesn't even check to see if you've already clicked it So you could go back and refresh the page a hundred times I would probably just use a cookie or something like that if I didn't need authentication, but anyways That's all this block does So what we're gonna do our process in building this block and what I want to walk you all through is Registering the block because you have to tell Gutenberg on that page when you low Gutenberg up You have to tell Gutenberg that a new custom block is available We're gonna go through the block attributes and metafields which in our case is just one metafield coming from the database We're gonna look at how the front end block Output happens which is again because we're using the dynamic block. We're getting PHP to render this block And I'll show you that we're gonna build some dumb components that get data from smart components or containers It sounds very fancy, but it's just a thing that provides a thing that has markup with some information So all it is we're gonna register a new WP data store and that store is Again a redux store. Does anybody have experience with redux here? Okay It's gonna be fine It's really cool So I'll cover it really quick, but basically We're gonna have we have to tell WordPress that there's a store that we're gonna save information to in our case It's again insanely simple because we're just making a number go up And in fact, we're not making a number go up in the back end or in the front end or or anything like that The the the the number goes up by an API request and that's server side Only doing the logic you're asking the server to make that happen So then we're gonna build this API endpoint Which I think I'm actually gonna skip over because that has nothing to do with Gutenberg, but I'm gonna explain how it works Then you have to build your smart components and those are the components that wrap your dumb components and provide them with data Smart components can also be used for actions. For example, there's a component around the heart that when I click it All it knows to do is to handle that click event, right? I've been clicked now. I'm gonna do something and after it does that thing it returns data back to the little Child component that in that has that data that it's reading. We're gonna see it in a second. I think it'll make more sense So now we're gonna do all live code because there's really no way to show this stuff off But this is how I feel and Sarah asked me today if I had finished my slides and this was me finishing my slides so Basically at this point, I feel a lot more comfortable just kind of explaining how this is all built and So I'm for sake of simplicity. I'm gonna be using Visual studio code which is a fantastic free editor It is actually from Microsoft So you would think that I wouldn't think it was great, but it's really fantastic and it's it's very fast I personally use PHP storm in my day-to-day usage, but that's because It's an IDE and it knows everything about my code This is really a great quick code editor and it is it's amazing that it's free. I would pay for this code editor Where do I want to start so I'm gonna Just say this is a plugin Okay, so we have a plugin file and the plugin file includes some PHP that we need You can see that it has a file that in that in queues JavaScript and CSS on the page, right? because we need JavaScript to make things happen because It's all JavaScript And you'll actually see in this in queue scripts file. We have a couple separate functions We basically this talk has homework, which means if you want to go home and peruse all the code You should do that. Can we all see this text or would we like to meet a bump it up a little bit? Okay bump it a little bit Okay, yeah those in the back Yeah, no worries. I 225 might be a little too big Is that good or do we want to go up a little more? Okay, I feel like it should be a little bigger Sorry, I'm it sounds like I'm listening to you, but I'm not All right, that's gonna be so good So if we look here, we actually in queue block editor assets Separately from the front end assets, right? You have your block assets and that includes registering the block and includes the logic when you actually have the block moving Then you're gonna go down here. You can see we've got some editor only styles to be honest There's not a lot in there We have Assets here that we're going to be including on the front end and this is the the kind of kicker right here. So The front end assets are in queue in this in queue front end assets and it's really just a javascript file I should say the build process that's powering this Compilation transpiling blah blah blah. It's a webpack file that comes from zack gordon's block example I wanted to keep it in line with his course and his stuff due to due to the workshop, but it's again. It's really great It works I would probably build my own For a library, but it's a very good simple webpack file So we all understand that what in queuing scripts means is that we're putting stuff on the page so that javascript knows to run, right? I hope So from there, I basically I can just show you The first step which is going to be registering a block This is again es6 es7 looking javascript. So I'm using constant and let instead of Var to define my variables Um, we can go into why I would do that later see me afterwards um It's really not it's really not that crazy If you look at this though, you will see that I need a couple things There's a couple things that need to be on the page and really what i'm doing is i'm requiring stuff from Wp's global javascript object, which we may have used in the past You know it has a bunch of backbone stuff. It has a bunch of media player stuff It has a lot of stuff I use wordpress apis as much as I can because it's there not because I love them It's because they're there and it means they're always going to be there. That's the crux of the wordpress decision, right? Am I going to use wordpress? Okay, I'm going to use these things forever so We have constant Being used to declare these things and I just want to say you do need some things these things depend on what kind of Gutenberg block you're building Because this Gutenberg block uses a text control For that meta value you saw that little meta value that we changed in the back end went from 18 to 20 That's a text control So I had to also require that this documentation is actually pretty good and the Gutenberg github repository So i'm not going to explain what all of those functions do So registering a block type is pretty simple The first thing that we need to do is we need to give it some kind of namespace or some kind of identifier This is actually what's written into the code and When I say written into the code it's what I mean is If I show you the back end of this post Here really quick going to go into the editor and If I edit it as html wait, hold on If I oh, that's what that would happen if I converted this back to a classic block, right? You would actually see this As the identifier for that block. I don't know if anybody's done that yet, but when you It actually like pulls those Things kind of together and this is another good example another good example King of examples And Oh, it's not going to show you If I if I if I went into the database the post of the database you would see something that looked like that It would be a comment And it would be like type Wp core And then it would say Text block or something like that. So Gutenberg is actually parsed This is when it gets to be a little absurd Gutenberg is actually parsed by html comments So these comments are These comments are what delineates what the block is and if you deactivate the plugin your content doesn't go away, right? That's the beauty of it At least with static blocks. It's because that content is still there. It's rendered into the it's rendered into the thing But we need some kind of identifier so the parser knows. Oh, this is the reacts block. I need to render this code Um Again the prerequisite for this is that we know it all of what i'm talking about. So sorry again for you know I would say go in explore with Gutenberg. You can see how that all works So i'm going to run through this really quick. We need to give it a title a description You can give it a category which kind of like Categorizes it inside the block adding interface An icon. I used a heart This can come from dashikons. So that's why the wordpress is dashikons has a heart So you can put in a dashikons value for that you can give it a background color if you want There's some keywords. This is if you were to put a Gutenberg plugin like on the repository They can scan this when you register your blocks um The tributes this is a very important Little bit of information, but it tells Gutenberg everything about where your data comes from but all we're gonna Give it right now is the amount of reacts. So attributes and then you give it the value And then you tell Gutenberg What kind of data that value is and that's right here. So if you follow me reacts is a Uh, I could have called it reactions right like reactions is a thing And that thing is an integer and the default is zero and the source is meta And the meta is this meta key. Does that make sense? We're telling the block the meta comes from this meta key Then you have two very important functions. We have an edit function and we have a save function The edit function, um, and this is fancy fad arrow shorthand for like, hey, we're going to pass all the properties we need from The data because Gutenberg automatically gives you data and we're going to pass it into this set of uh Things Man, I really wish that this code was easier to well it is easier for me to read but it's because I know how the Gutenberg container works Again, those Those simple examples and Zach Gordon's repo is really going to help kind of make this all hit home but if we look at the Uh, if we look at the way this works, this is basically an if statement to say that if the Block is selected, right if we've selected the block in the back end And edit is for the back end and and save is for the front end So save it what is what gets put in the front end and edit is what gets put in the back end If so, we need to render these things First thing is if it's selected we need to render an inspector controls box With a panel body and again, this is in the documentation to look how this is built But this is how you build your sidebar interface to edit information And then the text control has three things it has a label It has a value and those reacts again. This is this is looking familiar This is the reacts piece of data and then this is the value of our thing And then an on change handler and that on change handler just says when you change the text box Set attributes, which is a Gutenberg function Send the reacts to set attributes and then it'll set a reacts for you. So it's basically just basically saying When you change the value you're going to save it into the database and Gutenberg handles all of that for you So in the back end, you don't have to do anything you tell it what kind of data you have And it'll do it for you. You can also run a lot of custom functions if for example Gutenberg doesn't provide you with what you need This though Is a very important line and this is what actually renders that uh That the heart like the reacts and that wrapper component Is right here And it's extremely simple. This is what jsx looks like. Please don't be scared It's in it's in a different file because we're importing it in the other file, but it's it's just a div With a class name And then we also give it another component a heart and we give it also a count But do you see how we're passing reacts into this reacts right here? So we're we're this is a dumb component, right? This is a wrapper that That all it does is render some information and we give it that information via The fact that Gutenberg already handles all the data for you. It knows what the value of reacts is Believe it or not internally wp data is running to make all that work, but that's all Gutenberg stuff As in we don't mess with that that's all core Gutenberg that's doing that the save function is very important If you have a static block so for example If we have that text block if you look at like the text block in core the one that we just add paragraph text to the save function for that Runs wp auto p on it like the content function that it would normally run And it just saves that markup right into the Block and that's it and then it's done right We're actually saving nothing into the content because We're doing that on the php side So we're gonna see in a second Is anybody feeling comfortable following me because we have about I don't know 20 minutes and I've covered about an eighth of everything I need to cover It's gonna be fine So jfx might look very scary and confusing, but this is actually very clean and if you read it It's like you might not understand the syntax right now But you do kind of get that I have a heart on the page and a count on the page And you can see where those things come from When you see that at the top of the file it says that those are imported So right now I'm just going to show you these dumb components really quick because I just want you to see how they work The heart is very simple as well. It takes a class. Well, it takes a Argument basically props are basically like arguments like if you think of short codes kind of it takes an argument of active And then we use this class names library to add the class of active if active is true And that's it That's all it does it renders an icon and it has an active class or not Or it doesn't have an active class. Does that kind of make sense? That's when we click the heart It gives it the active class For the counter It's also a super dumb component If I go into my components here You can see that Happening right here, right? We're just we've got a count. We've got a wrap and then we just put the count on the page So there's nothing too crazy But we separate these things because we use them in multiple places You know, I'd be like no julien. We don't use them in multiple places But we do because the cool thing about this block is that the block actually renders data separately via react on the front end And on the back end but differently so the reason why we have dumb components Is so that we can share The same exact markup with the back end and the front end and we're going to see that in just a minute So yeah, because you notice that the heart was like it does something right on the front end But it also appears on the back end. So we don't have to write that markup twice We have a separate components library In our source file and like so our blocks are kind of right here and our components are here and those things are separate We just call them when we need them where we need them Um, so if you had five different ways to show this block off You should you could still show the block off and only write the markup one time Okay So that's kind of confusing, but We've registered the block Now when we save the block it knows what to do Gutenberg handles the saving of the data And it also knows that it's on that post So really quick. I just want to show you the front end data of The the front end php that gets rendered Okay, this is basically just saying like hey Oh, yeah, we have to tell Gutenberg that the the block exists With this register reacts block in the back end and it just says register block type Do you know that does that look familiar? That's our namespace from registering the block in javascript And then this is this is what you do for dynamic blocks. You just give it a render call back So it says, okay when i'm rendered When when the Gutenberg parser hits this block type Render run run this function and this function is really simple This function just spits out some basic php I used output buffering for a lot of stuff because I like the way that it looks but if you have The reacts here you can see We just grab post meta. This looks familiar, right? This is all php. So we're not super scared Get post meta. We're getting the idea. Well, yeah, look at that. There's our meta key And then we spit it out here Why do I even have this because javascript does anybody know it's because some people don't have javascript enabled And sometimes google doesn't have got javascript enabled. There's a lot of things that don't have javascript There's also accessibility things some screen readers can easily disable javascript So this is a backup and if you notice i've called this div the reacts block wrap temp counter And that's because all it all it says and you probably won't even be able to see it These reactors react to so dang fast, but if I view the post Really fast. Do you see that? You see that flash That flash of text is actually react Initiating grabbing the value and popping on the page. That's how fast it is. I mean, we are running in a local environment, but Look at that. Holy crap. But anyways that other one right there is basically for non You know for for like an seo value or for Somebody who doesn't have javascript all right cool So you're gonna have to just trust me when I click this It goes to an api endpoint feel free to look at the api endpoint the end the api endpoint is so simple The api endpoint grabs the value from the database It pluses one to the value and then it returns the new value. Okay. That's all it does React then grabs that and pops it on the page when I click it Why do I do it server side because if you had 10,000 people clicking this at the same time the most Accurate count is from the server. It's never from the client right because the client would see 23 And it would hit a heart imagine being on a phone With a really bad internet connection in south africa and a hundred people just like the post But it takes you a minute to load that ajax call and come back It would be it would be 24 even if a hundred people have had it right So we asked the server to run that logic So you're just gonna have to trust me that there's an api endpoint When you click it it happens I'm going to show you that by showing you the front end javascript I really think this is all we need because I know we only have a little bit more time Looking at the front end javascript. You can see I have constant create element and render Okay, if you've done any react development, this looks ridiculously familiar. It's because it is Exactly a wrapper for react in that if you actually go to look in the source code for wp element create element Is reacts create element they do import create element create element equals create element That's it But it's a wrapper because if something changes down the road your code doesn't break when react updates their code Right beauty of backwards compatibility So we have a couple other components and this is where you're going to see our smart wrapper and our clicker And I'm going to go through these things in a minute, but Oh, yeah, this is our store registering All right, I'm not going to explain redux really quick. I'm going to explain that at the end if we have time but basically this is our Code and again king of over engineering, but I just want you to see this is how I would properly do it This isn't that crazy. We're getting an element by its id, right? So we're gonna it's like jQuery We're just we're we're getting an element, right? That element's called reacts block and if it helps I will show you the index Right right here this this id So we're grabbing that id Oh, yeah This is how I know the post id. Do you see You see that This is a dynamic block, right? So this dynamic block runs It pops this on the page Right here it grabs the id of the page and now I know the id of the page So I can ask the end point what the count is right? I can ask the end point how many it has Okay, if we have a post id which we should because it should have rendered one we're going to run an api request This is this should look pretty good if we do any javascript This api request also. Thank you very much wordpress Is from wp.api request you might not know that these things exist and you might be including a ton of javascript That you really don't need because wordpress already has an api request tool that is backwards compatible And works with other browsers Don't use fetch or axios or another library you all you have to use is this wp api request That's that's all you need and it's included in the global global wp object Some of this stuff is new so don't feel bad. You're like, oh, I haven't been using this for the last three years It wasn't there three years ago, but it's there now So we're this should look also familiar. We're grabbing posts from the api. We're asking it for the post id, right? Then we're getting the post back We're making sure the post has a meta object. This should look pretty familiar if you know what a response from the wp api looks like This is the meta value Ha ha ha this might look pretty good And then we're using this dispatch thing, which i'm going to explain in a minute, but it basically just says We got some data Now you know about it It's ridiculously explicit and that's why i'm saying this all looks really over engineered because normally with jquery I would just be like, okay, we have it now You know make the number 22 But i'm not because i'm crazy And then we're going to mount this component And I don't know if you're noticing here, but ha ha there's our post id. So we got our post id And we're we're popping it into this clicker So the reason why we have this Is because we want to make sure to tell the clicker the post id to update when it goes and does it So let's look at those components really quick And These are our smart components This is so complicated We have a clicker and we have a smart wrapper. I want to show you a smart wrapper first No, i'm going to explain never mind. I'm going to explain redux to you really quick Okay redux is really simple when I give Somebody a high five Imagine that there's a counter that has to be counting that right? So For example, greg over there. I'm going to call him out if I give greg a high five. There's a couple things that happen I might want to give greg more than one high fives and we might have somebody over here For example brent is counting the amount of high fives, right? So high five high five high five Obviously like all of you guys can tell that the high five happened and if you were paying attention You might be counting how many five five high fives happened, right? But if you weren't paying attention you might not know so you might think that there were two high fives And you might think that there were three high fives happening brent's the high five counter though So brent should know for sure, right? There's three. So the cool thing is redux is this over complicated crazy Like declaratory framework that basically says somebody needs to be keeping track of the high fives Somebody needs to know how to get the high fives back and you need to have a function to grab all of these things And you need to declare them explicitly so The reason why I explained it in that way of high fives is because if you look at me registering my Store Which is this redux register? You're actually going to see that I really don't have very many complicated things happening But we have to declare it. So there's three different things that happen. First of all, there's an action It's the giving of the high five For us, it's two we have two of them. We have activate And we have set reacts and set reacts is just basically like hey tell the component how many reacts we have right? Which we get from the api The reducer is what allows is What makes the change? To tell the store the state That a change has happened. I know that sounds really complicated, but again We have an action If the action type is set reacts We're going to set the reacts to action reacts. Don't worry about all this other stuff. This is es6 spread operator stuff Don't don't worry about it. Just you do need to know this stuff to be building these things with these tools But don't worry about it right now. Just look at the fact that i'm i'm putting an action if the action is set reacts Set the reacts. Okay action reacts get the action From get the reacts from the action Same thing with this activate, but instead of passing data here. We're just switching a bullying. So basically Somebody else keeping track of whether or not anybody has high-fived If I high-five greg we're going to run that Somebody high-fived. I know it sounds totally crazy, but your your application knows exactly where it is at any given time Has anybody high-fived anybody yet? Oh ask the store right The last part of redux is selectors and selectors grab data from this store and I know this sounds like really complicated, but the store literally looks like this Okay, does that make anybody feel a little better? We're basically saying like have we activated anything? No, not by default. Oh, sorry. Some of you might not be able to see this. I apologize Not by default, but haven't has anybody high-fived change it to true That's all the store is doing. Okay Selectors grab things from the store So get reacts is a function. It's called get reacts because what we're doing is getting the amount of reacts And all it does is grab the state reacts. Okay, so get reacts. How many reacts do we have Brent? How many reacts do you have? Well high-fives how many high-fives we have we have three. Okay three awesome amazing Sorry, that wasn't a very good Good job. Thank you for not returning false data. You didn't find the key in the fucking thing Sorry, I can't say that you didn't find the thing the key and the thing so you can't return any data, right? So we also have an is activated and again, this is how I know if the heart's clickable or not, right? Has it been activated? No, nobody's clicked it. Nobody's clicked it click Activate that's been set. This has been changed now. It's true. Okay. Yeah, it's active So I know it sounds a little crazy, but in massive applications. I promise you I've built a redux application with over 400 keys and when you have access to the exact state of your data Not only do you know where everything is and how everything feels but if you've wired everything up correctly Your store your application never shows the wrong data It's not allowed to show the wrong data And the coolest thing is that if you start building applications with redux, you know Gutenberg's back button All they do is remove the last action They keep a log of the actions that happen and they just remove the last action and so The the application says oh the state changed right our our information changed And we no longer have an extra high five. It removes itself It removing itself triggers the ui to Basically triggers the ui to re-render and it re-renders with the exact data we had So you can actually go back in time and and see how people are using your data if you logged all this stuff It's it's really powerful and very exciting and now that I've explained it. I'm just gonna say All the clicker does It's really not that crazy When you click it on click right handle click First of all don't do anything we're not supposed to we're gonna see if this has been activated If it's been activated don't do anything right. It's our somebody's already clicked it. Don't do anything If not dispatch the activate Which is gonna make it active, right Run an api request This is our custom api We're hitting this increment at a custom api endpoint Right here with the post id. It's just literally grabbing the post meta adding a plus one to that meta returning that back Dispatch Set reacts which we're telling it. Okay. This is how many reacts we have It re-renders Does this kind of make sense what i'm doing here? Yes Awesome, so really that's all this thing does But you can see the magical part of this is that it gets the data via an api request It sets the data via an api request and it knows exactly where it is at any given moment so The crazy example Is not here, but you can see why with this as a foundation for building your advanced scutenberg blocks You have a load of tools available to you from wordpress. I'm I'm using one non-wordpress provided library and that's a very popular library called class names And that's literally a library that adds a class To a box All it does It's good to use because you know you might need to get crazy with it, but Seriously, all this stuff is provided to you from wordpress to build very reactive smart applications and Gutenberg can handle that they can handle those kind of dynamic blocks And you can handle the use case of google not being able to render the javascript So I think that hopefully touches on a lot of Points where you might be afraid of moving something over to a block But if it makes sense for it to go in a block like this might And you might have had to build some crazy custom thing for user interaction and all this stuff Just know if you can write the javascript, which you know might be the next step Which some of you need if you can write the javascript you can build really awesome stuff like this with wordpress provided things um That's all I have for the code So i'm happy to I know that we're kind of getting there. There's a repository link right here I'm just going to go to zack gordon's thing. These slides will be available. I'll tweet them out Um, this is the link that you want. It's pretty short. It's z gordon slash wceu 2018 That workshop is still being edited unfortunately. It is not on wordpress tv, but I spend instead of 10 minutes I got 45 minutes to talk about redux So the high five example is actually from that, but I got way more time So there's way more time. I explained everything in detail line by line. I actually live coded line by line all of these components that said go back you're good go back to that um Go back to that repo and make sure that you use the branch called completed because the master branch is actually what I use To start teaching people. It was blank because we all did it. We all wrote the code together So go to the completed branch Um, that's about it. But if we have some questions, I we have about three minutes Yeah To the next day automatically. So the question is is what would be the west best the west way What would be the best way to reset the high fives or the reacts or whatever back to zero automatically the next day? That's a great question. Um, I would use the infamous wp cron to go and find all the posts that have that Value and reset them all to zero Um, I don't know how you run your cron, but I have a cron job running my cron Which is really common. I think my cron job runs every 15 minutes You could have it run every minute or every three minutes or something like that That's probably how I would run that. Yeah, I use the wordpress things. Greg Yeah Yeah, so the question well the thing that he just said was is it correct that Basically, if my friend from South Africa with a really slow internet connection Hit the button and it said 20 but 100 people clicked it in time. Will they get the new value? Which is 121 right? There's plus the 100 plus the 20 Absolutely, and that's why we use the server to do it because the server is going to respond with a new value We're we're we're giving them that classic Activated like they feel like they hearted it, but the number didn't change If I were to do it the real way I would change the number in the back end for them And then overwrite the number once I got the new Once I got the new value, right? So like I would change it to be like 22 23 100 people clicked it in the time they get the response back 123 does that kind of make sense, but that would have taken longer to build and I'm lazy go ahead Does Gutenberg have any built-in way of consuming external apis? No that api not not any special Not any special functionality other than like that api request, which actually isn't even part of Gutenberg It's used in different places in wordpress now Um externally doing other calling other apis. I would highly suggest Again king of over engineering Um, I would highly suggest building your own api point to go grab something from an external api process it in php And then ask javascript to take care of it. There's some blocks for that one makes sense For example of a wet a weather app might not make sense But the other thing that you get is you can cache that value in a transient And I know that I'm going off on a soapbox here But let's just say you hit an api really crazy like a weather api and you Exceed your api limits your Gutenberg block is broken But if you try and even if you set you have a bunch of Zip codes that you that you have it by zip code or whatever And you bring it back in that weather api you can at least cache that value so that you're not over hitting your api requests Does that make does that help? Okay. I would say defer to php. Yes It's awesome. Yeah, I think I think that with redux would be a good example I kind of wanted to rip it out for this, but I think it's worth explaining Yeah Yeah, so the question is is can I do all of this stuff with dynamic blocks just with php? Yes, you can I've never done it So I can't tell you the exact ways but so many people asked for that that they were like, okay We need to have this possible It's actually Funny because if you do it the javascript way it runs the php way in the backland anyways Surprise surprise wordpress. I mean wordpress has to be aware But I will say one point on that It sucks because wordpress isn't aware of dynamic block values You can't go to the api and ask Wordpress what a block value is it doesn't know what blocks are on the page until it renders them So we haven't fixed that problem yet and just what I mean by that is there might be a point where you're like Oh, I want to get a data value from a block Store it and post meta if you want to get a data value from a block Because if not, you're going to be parsing the entire content of that page boo Anyways, okay, that's it. That's all I got. Thank you. Oh, yeah one