 All right, I'm gonna start. I know there may be a couple of people still coming in but you know We want to get going and part of the reason we want to get going is because When I think about like workshops I've having this head and this picture in my head where you know Everybody's kind of coding along and like if you get stuck I jumped down and run over and I help you and everybody you know when I get stuck you know you help me you can still do that and You know we only have an hour and so I'm gonna be going really fast and You can type along if you want to but honestly it might make more sense to just Kind of follow along If you do want to do it. There's a There's a thumb drive there's actually a whole bunch of thumb drives and And you're welcome to it You don't need the thumb drive in order to get the source code because it will be on my site Which is peak zebra dot-com after the talk There's also because I knew that I was going to have to pack a whole lot into a little box I also while I was preparing this I am recorded You know a bunch of video segments that actually do the whole the whole thing including the parts. I'm leaving out You know like starting from okay, let's use create block to actually create the starter which is already done when we start here today Okay, so my assistant has the fancy USB drives and I You're welcome to but I would love it if you didn't So that makes sense So I'm Robert and a couple of years ago I started. Oh, I should just say There's a direct. There's a zip file on the thumb drive and you would need to Unzip it into a directory in your plug-in directory in an already installed local WordPress Okay, so Yeah, so It's clear that there's a lot of interest in like doing dynamic things with blocks because I know you didn't come here you know from name recognition and And I was I was earlier. I was sitting in on another Workshop on creating blocks Sort of in a new and upcoming style and there was also just you know that room was filled too But let me if I could just get a really quick sense of the room like how many of you are You know like serious react programmers. Oh good. Good. No, this is great. This is perfect. You can leave though Yeah, me neither right, I mean I've learned a fair bit about it But like it's okay really and I think one of the things the WordPress community has to do is kind of make it okay to be finding your way and in React and JavaScript and getting comfortable with stuff How many of you have created custom blocks Okay, good good good good and In doing that you did that limit. Let me ask it this way How many of you have created blocks that had both a JavaScript edit function and a JavaScript save function? Okay, this is like a an exam, right? And how many of you have created blocks that have a PHP dynamic render callback? Okay, okay, so if like half of you, okay. Yeah, I think actually I think this is pitched about right so So you can blame me if this makes no sense Okay, we're off Today we're gonna be looking at handling dynamic data in blocks and when I say blocks I mean really the front end of the block right the black the back end of the block you're you're typing in your text and You're you know configuring the padding and all that stuff and all that stuff is done in react components so that's already dynamic right and the thing that is sort of an issue for some applications is that if you're Normally what happens is you render a static HTML block on the front end, right and like if you want to like call the user by their name or Figure out whether they are allowed to press the button or you know any of those things you don't have that information on the front end so So what we're going to be looking at is actually we're not really going to be looking at at the sort of normal dynamic block rendering Except that it's already I've already added it in and I'll backfill a little here and there and just point out What you know where those things are in place? And then we'll talk about running JavaScript after the PHP render function has done its little bit so that you can add interactivity Using you know JavaScript on the front end, but also react components as well and We'll talk about just You know really kind of how do you put those things? Into that JavaScript and make it work and it's actually not that hard and then finally If I can start talking faster We'll we'll talk about sort of the sort of final step which is You might want to pass some data back while people are interactively You know Working with whatever it is. It's going on on your page and and you know like I'm gonna be using a calendar component So like if they click on a certain day, you might want to ask like hey what what time slots are open on you know It's like Rewriting Calendly or something so So that's what we're up to By way of quick and slightly weird review I Just want to super fast remind us that the normal way that things happen with blocks is that you know You're users browser actually requests a page and the page has already been written as a post into the database and it's all HTML and You know if it has a couple of blocks in it they're in there right as HTML and In this case, you know, you could just pass the page right back But you can also set it up so that PHP so that there's a callback to a PHP function Before the page is delivered, right? So we put in the you know, these two static ones are already there But oh this one here needs a written a callback to the render function that we've written and I couldn't find a Render function render callback function icon, so I've used this balloon poodle Which I think is good So the balloon poodle gets called and He has knowledge of everything that's going on at the server right? He's running on the server in the current time that the page was requested and so can determine things like oh Who is this user and what rights do they have and? You know if you've written your own application You can look at this you know current state of the data in your application. You can take all that or your balloon poodle avatar can and You know pack it up and hand that into the page and that is what gets returned to the browser Yeah, so enough lather So I am how legible is that can you see yeah I Gave a talk somewhat similar to this in a room About this size, and it was just a regular big TV. I mean nobody could see anything. This is pretty fabulous Yay so there's a So there's a tool that well, let me back up a little so we're on We're on a fresh install of WordPress running locally You know it I've done a couple of things to it, but I'm gonna confess to that right now so There's a plug-in that is in it that was created by Using a tool called create block. Are we familiar with create block? So if you're not Life will go on but it's It's kind of a handy way to just get all the junk in place right it creates a template Of a complete plug-in. So that's what I did and I really have not messed with it except for a couple of changes that That I'm gonna tell you about But so you wind up with a directory Yeah, so the server is called acropolis. And so the plug-in really had to be named Parthenon I know But you know it's got all the regular pieces right so there's a there's a PHP that registers it as a plug-in or declares it as a plug-in and and In that PHP, I mean we can look at it We are hooking The init action which you know where it makes a call back to this guy and This guy all it this function does is Registered the block and I think pretty much all of you have done this in one way or another, right? So the less said the better except that I have added, you know, you can add in as a second parameter an array of Properties and so there is this render callback which has a pointer to the name of a function And so this is the function that right now is actually Rendering the block and it's doing so dynamically So I'll say just a little bit more about this in a second, but you know there there are other pieces here There is the block.json that kind of can Provides a configuration for most of the things that you care about when you register the block The only thing that I've added to it that wasn't put there by create block is this Attributes part and the only thing that I've done there is add one attribute. We're going very minimalistic today and That is my header and It's a string Yeah, and then finally we have well not finally, but then there's also a js file I always think of this is like on the front end, but of course, I mean it really kind of isn't it It will run on the client, but it's kind of It'll be running As we're editing the page or creating the page But so it it has a couple of properties that matter to us one points to an edit function and one points to normally this would be a Js function that handled rendering static HTML, but I'm returning a null here just as a signal that I don't want to do it that way and So What will happen is that this will actually be rendered in In the PHP function. We were looking at just a second ago. Yeah so So that's already on here, right? It's in so it all winds up in a plugin directory called Parthenon and If we look at Our plugins There it is and we just you know, we'd want to activate it I always like it when the first thing works And we can go in and add a post Hello Athens, right and we can Sure is good to be here then maybe I want to add that block and The create block tool by default puts your new block in widgets and there it is and we can add it and Normally the create block would would have created something that Just had static text on it right or just be returning a string of text I've modified the edit function a little bit so that it has one react component, which is the thing you see here and There must be a little CSS kicking around in the create block thing as well because I didn't do anything to make that blue but Obviously you can go back and you know CSS Fi this to your arts content But you know we could put something in here Now we are having real fun, right and You know we can publish it and so this is the moment when normally the save function would run and in this case the render function Will run only when we request the page So I can view the post. No, I can't it went away. I really got to say I don't love the Current UI Yeah, so you can see here Like this is coming from that. That's data that we stored as an attribute my header attribute and So we're just picking it up, but we're picking it up in the PHP function, right? So That's then just pasted in basically as an h2 here. So You know, so if we look at the edit just real quick you can see there's there's where I've added that text control and You know if you haven't Spend a little bit of time with react. This is where things start to get a little freaky But it it's it's really it's kind of the way that I think about this part of react is that? components are kind of like HTML tags that you just get to make up, you know So yeah, HTML doesn't have a text control tag, but darn it it should and so now it does right and then react kind of makes that all work and and then on the front end back in Bartholomew, so Now I need to get the data that was stored as an attribute When at Iran, so fortunately this happens just kind of like magically In in WordPress because I get past those attributes as an array, right? You can call it obviously anything you want, but I call that attributes because that's what it is and it's an associative array and Are we all output buffer users? Yeah, okay good so you know here's what I'm going to be sticking into the output buffer and You know there's this I've just made this little move here where I drop in a PHP for a second and and I can echo attributes and The the element that I want is my header and I'll just get the value from that Now that's all well and good, but As I said before we would actually kind of like to be running Maybe some JavaScript and have some react components like it's kind of nice to have like that nice edit field in the back It'd be kind of nice to have it in the front and also You know it'd be nice to Have a bunch of components and have them not have to have them I mean the nice thing about react is they'll automatically refresh as the user Interacts whether right if they toggle something and we need to change part of the display it'll just pick up that state change and You know re-render re-display So those are all things that it might be kind of nice to do Yeah, so let's do them So here in source, I'm gonna create a file Because we're gonna need to be running some JavaScript somewhere, right? So I'm gonna create a file called friend I'm calling it that because it is JS that runs in the front end and I'm going to just put in you know your basic Hello from front end Kind of a alert message there And That's all I'm gonna put in there right because Whenever I try to like do three things at once in a program Without checking that they worked like they don't work So all I'm trying to establish here is that we're actually able to get the file in cued and that That it's ready to run In the front end and then it actually runs and so if it actually runs when we reload this page We should get this alert message, right? So Now there's a couple of problems that we have Um Problem one is that we will have to in queue this file, right and I think You know a lot of people are already I can remember though being just like oh god No, this is so complex, you know, where's that JavaScript going to go and You know and so WP and Q was kind of a Unfamiliar thing but at any rate it's what you use to get your JavaScript running in the WordPress world Everywhere including here. So that's one thing. We've got to take care of the other thing. We've got to take care of is that this JS file when we really get going is gonna have react components in it and Possibly I'm also using like ES six syntax and punctuation and so forth none of which will run in browsers So it's got to be translated Magically by a tool called webpack and it will wind up in the build Directory up here about about which more in a second, but How many can I just so I know how fast to talk about this how many people are familiar with webpack and Okay, all right, well never mind So we're so we're gonna be running We're gonna be running NPM run start here, but it will not on its own look for Files that aren't index JS, right? So we've got to specify which files that it's gonna look for So I've got to edit package JSON right, so here is our start script and If if I decide to Individually call out files that I want it to treat as entries It no longer looks for index JS automatically, so the first one I got to put in is that so that's gonna be source Whoops sorry index.js and then also source front-end Dot JS and in the real world, I would also put that up here and build but the truth is I hardly reuse build, right? So I'm just gonna use No, just now I'm feeling guilty Superstitious, I don't know. I just feel like something bad will happen if I don't do that Okay, so now I can if I want to and I know you're thinking like but he hasn't saved front-end JS yet Yeah, because I needed to make that change before it would actually pay attention So I'm just gonna start it up here. Wow. That is really weird. Why are we over there? Of course, I still haven't saved front-end JS, but When I do It will transpile that stuff again Now if we were to look and build we would see that there is a front-end dot JS And it sounds like most folks are familiar with you know how this process works So, you know build is where the production versions of these things is going to come from But we basically can close that directory and forget about it for the rest of the development side of things No, and then the other thing we've got to do is we've got to in queue this file so I'm gonna do that over here and In my PZ the block Render function and I'm doing it here. You know, there's there's a lot of different ways to do this. It's kind of a habit I got into Because in the early days of this stuff The scripts would load both on the front end and the back end Right, and you don't really want that and they would also like load whether you use the block or not like if you just kind of in cute it and regular old life and this way it would only load if you You know actually we it can only load when this block is getting rendered because it's in the render function So so WP Q Script right which takes You know a variable number of parameters, but We're gonna use six I almost never use six parameters the first one is just a tag. It's just got to be I mean, it's a slug basically Handle I think is what it's called in this context and it's just got to be unique and Normally you'd give it like a more meaningful name But the fact is you wouldn't probably never use it again, but the system would Yeah, so let's see we also need to give it the URL at night that build Dot j s and then we need to tell it what dependencies This script will have when it's loaded and that's going to be an array and We're gonna have two dependencies just trust me on this So one is WP element, which is basically the react library just gussied up a little bit for the wordpress party and Also WP components Which that is the components, right? That and those are the things that that WordPress provides that you normally see on the back end And there's there's a whole little army of them. There's really quite a lot of them Let's see so there's that and then the next thing nobody knows what it is and then finally there is this True which do you know what it is? Yeah But we can ignore it for our purposes So true Answers the question. Hey, should I load this in the footer and the answer is true Why Because we'd like the page to be there before we start monkeying around with it, right? We need the DOM to be loaded so So we want it to run after that's happened But if I've done everything right and I mean what are the odds? You're laughing now Then this computer which is like really running the local site slow today, I don't know quite what's up with that Should show me eventually. Yes Thank You Jesus The So so this is in fact in cute and running so the life is good, right life is good. So the thing is We Over here in front in JS We're not actually doing very much and we would actually like to be able to like Insert some stuff into this page and the way that we're going to do that is we're going to we're going to create sort of like a little marker for ourselves when we render this in PHP and Then we're going to find that little marker in the JavaScript code and we're going to render to that location So over here in PHP I'm just in this HTML that I'm rendering I'm just going to add a div and in fact It's an empty div So it's not going to look like much But I am going to give it a class You know, I never use the light. Is it normally red one? Okay. I'm always using dark I think it reads better if it's light up here, but so like I'm like, oh my god red. I'm panicking Yeah, and if you're thinking like you're you know When he's react heavies and you're thinking that should be class name of the capital in right we're not in react right now We're just spewing out some HTML from PHP So we got to give it a class name you can make it be anything you want I'm going to make it PZ target Div because it is kind of a target PZ for peak zebra Right makes sense and So We'll say, you know, we'll say that and when it when it runs it'll insert that div and then over on the the JavaScript side We want to find that div So we want to do something like const div equals document query selector, yeah and We've got to Tell it what we want to use as the selector and the selector in this case is going to be that class name that we just created and For reasons that honestly, I don't understand We have to use the dot here and You just do sorry Target div right and so that will return This div div is just a variable. I should say it divs not a magic word here, you know, I could make it something else and And that enables me right so that'll be returned presumably right it'll find it and then I Can start thinking about doing things like changing the inner HTML property to like some text some text Would be nice. Oh, that'd be nice Yeah, that'll work. So I left the alert in there just to annoy people who are annoyed by alerts Yeah, I love that and And down here, okay, we're getting that Text right so so there's a little bit of progress, right? We can find a spot and we can put stuff in it We're still not quite there, right? So We don't actually want to like just directly change the inner HTML here for a whole lot of good reasons but we what we want to do is do react on render and That's going to It's gonna take two parameters right the first parameter is a component and As I said before components are kind of like, you know, HTML fairyland, right? You can just kind of make up tags and So I'm gonna call mine my component because that's the best I can do on short notice And then the second part is like where should this thing render and this thing should render at X div Now the only problem we have at this point Is that I really did make up my components. So like System has no idea what to do with this. So I need to write a function that explains what this thing is my component Yeah, so What I'm gonna do here is I'm just I'm just gonna return some basically HTML what I'm really returning is JSX, right? So like fancy, you know, like expensive HTML and Because React has our JSX has some some rules. One of them is that everything's got to be inside a single parent Thing and So, you know just a div to wrap this and then let's use what we used In the back just I mean this will be different instance of it text control and You know, we'll give it a label just to show that we made business You know enter some front-end data Tags need to be closed or self-closing in JSX self-closing is nice And then for a dramatic effect, I'm gonna use date picker Because it's dramatic And it's effective This of course won't quite work because We although I you know, I made up My component and text control and date picker. I didn't make up their real things like us But I do need to sort of like bring them into this context. So whoops up here. I'm still gonna leave that alert Come on I need to import text control and date picker WP Components So if you think back to when we said that we were dependent on WP components Is it WP or is it WordPress it's WordPress So different name, but this is package name and it's a different reference than the other but it's the same stuff Yeah, so I think that should be good and and so now if we flip over here and Go through the slow and tedious process of reloading this page Right because it draws out the dramatic effect Because nothing renders until it's cleared Yeah, so we've got a text control and and we've got a dramatic Date picker, right? I mean you think about it. I did basically nothing to get that whole date picker there, right? I put in the word date picker twice, right? So And it's smart man. It's you know, like it knows like all the years and all the months I'm easy to impress and you know, like if you if you click on another date, right? It knows today, right? That's us. You know, this is us here But if you click on another thing it like moves the highlight and it also fires a non change event in the background Which will futz around with a little bit But but yeah, so so that's good, right? So now we have things components running on the front end that that we you know typically are not in a position to use Right, but it's pretty straightforward One thing we don't have now is those attributes Because we're running in JavaScript And we're so but we're not so we're not in render PHP which gets handed the attributes and we're not When we're not running in you know, like save JS where we've been handed the props we're We're just running JavaScript. So Right now there is no kind of like official WordPress way to like pass through the attributes But you know, it's not It's not too complicated But it is kind of handy just you know to be aware that it's not that complicated so So really what I'm going to do is just kind of spew the attributes out as a string in JSON format and Then suck that back in and in JavaScript JS. This is a probably a good moment to mention that there is this thing in the works called the interactive API Which was anybody in that session or that workshop? So We have two winners three three I was there so four and Whereas this is like how you can do this right now a lot of the things where I'm saying like you don't get this there and that sort of thing are solved by the interactive API it's Pretty incredible. I don't think you'll see it in like completely usable production ready form you know And know why it's before September anyway, you know, we know how these things work, but Just The shortest possible aside what it does what's different about it is that the things that I'm doing with components In react On the client It lets you do in an HTML syntax on the server and It then passes down React components in HTML That are already set with the various defaults that you might want and and attributes and and all of those good things and It's much lighter weight than doing like if you get into something really intense in terms of You're definitely paying a slight performance Penalty for loading this front-end.js file and having to put and having to import libraries and so forth to run Like you could run really complex react components here if you want But anyway, I mean if this is the direction you're headed you definitely want to be watching for that Stuff because it's pretty cool. It does it does work in a very react-informed sort of mentality it's very sort of state and and Rerender kind of Mindset, so that's one you do have to sort of get to that which is not that hard But you've got to sort of change the way you're thinking about What's gonna happen on the on the front end? Yeah, but so that's coming but right now We've Let's see. We've got our class here. Oh, yeah, sorry. I Knew I shouldn't have gone off on that tangent. So what I want to do here is you know sort of spew out the attributes and Because I've been known to mistype this I'm just gonna so I'm what I want to do here is you know basically just drop in a php and Echo Attributes my header whoops, right? But I Actually want that to be JSON encoded, right? So There there's a tool for that So This is the part I always spell wrong. Okay, so WP JSON Encode my header now This will and you'll just have to take my word for this But if we save this and then we re-rendered it you would see that there was a string there that looked a lot like JSON But you might if you were you know really picky you might notice that the the quotations were angled and That files up the JSON interpreters of some browsers So I'm going to wrap this in a pre tag Tag a pre tag Just because I'm superstitious I'm gonna put that semi colon there Is that everybody? Yeah, that should do it And then over in the front end I kind of need to do the same thing in reverse right so Just like I found and sucked the goodness out of the the div that I marked I Want to do the same kind of an idea here The handy thing about using those pre's to straighten things out is that that gives me a nice Element to search to query on Quick side note It's entirely possible to have more than one instance of a block right think about the paragraph block on a page right, so I Knew that in this demo that I would only be using one instance of the famed Parthenon block But if I used like seven of them Then what I'm doing right now with query selector would only find the first one, right? So if if we were like really trying to build this thing out Then we would want to use query selector all Which would give us an object back that would have a for each method and we would just use that for each to Cycle through however many blocks there were So and that I mean you'd figure it out because you'd notice that it wasn't doing the lower blocks, but Just as a heads up Yeah, so anyway That gives us that and And here is where I'm going to take my chances in the interest of time and Just like do several steps at once but Let's just assume that it's going to find that the attributes fine I would like to pass that then or at least the my header part of it into The function that renders the component right so and Because these are essentially made up html tags I can make up an html property, so I Can say like header That red Is equal whoops. No, it's not equal to that. It's equal to something that's going to be Handled dynamically and so we're in JSX here and so we need to put it between curly braces, you know and we want hats and the property is my header and Then over here We will automatically be passed in the properties that are In in play at this point and you know as one typically does I'm going to call it props and Just to sort of show that we're getting the data that we want to get We can whoops again doing something dynamic here, so I want my Whoops props and In this case, it'll be header and not my header because And it'll be spelled correctly because that's what I used as my attribute Look, okay, okay, so Now if we reload this you'll see the wisdom of leaving the alert tag. It's always wise because It stops everything before The components get rendered and you can see I wasn't kidding around right it's there like yeah yay And and it's not here. What did I do wrong folks? Well, I'm not gonna worry about it. How's that? If I didn't do whatever I obviously did wrong it that attribute would have shown up here next to this blank So I can get attributes here and I can pass through any data that I want to from render PHP here And that gets it all down there But There there could be very well be a case where I wanted to Send up some data like oh like they just clicked on 15 and What we would do in that instance is write our own REST API route and Just query it for Whatever it is we're looking for and it would send back that data. How many of you are familiar with that process? Oh Come on raise my hands Because I have literally like three minutes, right? Yeah Okay What I'm gonna do is actually cheat and Jump up here. It's the thing fail. Let's try it again. Okay. Let's look a little better. Okay So I'm just gonna like super fast to show you what it looks like As I said, there's a video version of this where I do this at like normal human speed So on on the Parthenon side on the PHP side We just like a lot of other things you do in Wordpress we add an action. There's an action call REST API in it Which fires exactly when you think it does and it you know, you give it the name of a function You write that function that calls typically just this one thing register REST route or route and you've got the This is the namespace for For this route Or for this API rather this is the route name Cal for calendar and Then there's an array that has a couple of elements in it one is methods This would ordinarily I mean a lot of people do this by just saying get I've been told that there are some whack-a-doodle Machines out there. I don't know what they are honestly that have trouble with that and this is the same thing just in a in a system or WordPress Defined constant and then you have a callback and that points to a function and the function in this function I have just completely cheated and Made a quick array of fake data When I was running through this last night, I was sensitive enough to my cultural surroundings to do My pms in in the 24-hour clock time, but I'm sorry the version that's in the get is please forgive me Is this and then over in? In front end and this is actually a little maybe a little less familiar, but I'm gonna use fetch This guy right here and send the URL for the for the REST API, which is just a URL, right? And in fact, it's it's this URL and but It's it's a function that returns a promise, right? So it's an asynchronous operation So I do have to use await and I do have to sort of think in my head like oh this this might take a couple of seconds So like I should be prepared for that and I also have to Flag this function as an async function or it just plain doesn't work So I get the response I Asked so the response is a promise. I asked that for the text I get that as JSON which needs to be parsed that winds up in slots and then you can You know without having to build the rest of it. You can console like that. Everybody is blowing up. It fits for me I'm busy and I Think that if we and I really will be through the very second. This is like the big to the I think I hope How are you enjoying the big today? Oh, okay Yes, see this is what it looks like when it's actually working Now in order to see this I got to see the console, right, so let's bring that up real fast. I really am done Yeah, and right there's nothing there yet because I haven't changed anything, but if I pick something Right, I get this console log, which is the data that we were just looking at right so it does come back Yeah, that's pretty dramatic, right. Thank you so much