 Yeah, redesigning plug-in functionality using WordPress blocks, so as you know the editors coming out that Joe just gave us a lovely introduction to and I would like to take a little look at how we Take an existing plug-in that's been around for a while and we need to alter the way it interfaces with the Current state of affairs with with the Gutenberg coming out. So we need to redesign some stuff. So Basically the challenge that was presented to us by the Gutenberg folks and this quote here is from the handbook on the page there So this editor will endeavor to create new page and post-building experience that makes writing rich posts Effortless and has blocks to make it easy What today might take short codes? custom ace HTML Or mystery meat and bed discovery you got to love that So that yeah, okay, that's the link to the handbook but It sounds like they're Denigrating things like short codes. Is this really a problem? Did we have an issue with that? I mean custom HTML sure that seems kind of unword-pressy But mystery meat and bed like I don't even know what that means but So the question is are they trying to say that these things are equal and That they're bad things So we have something that's very familiar to us like this, you know Typical shortcut short code that we would use in paid memberships pro Is this now bad So we have something like this, okay, that is short code here That's that right and then This thing is naming the short code Personally, I like it to use hyphens not underscores, but that's just me Kevin doesn't like it. I don't know That's the short code When I think of like when I think of dashes that's HTML CSS stuff front-end sort of thing so the short code and Classes to me though should they should be our CSS classes. They should be hyphens, but here's an underscore for the button Level and then what you have is button text, you know Those are basically parameters, right and what you're going to get when you put that push this into your post editor or page editor It's gonna look something like this Right. That's pretty simple That's But I guess what they're saying is wouldn't Sorry now I need to be here going here, sorry Yep, okay, so this is looking at the something Jamie was talking about last night Where we can put in this little toggle control into our JSX and When we go back Take a look at that block refresh the page click on the block now We have a little toggle there to open in the new window That's pretty nice pretty nice feature to have Okay Oops, so I guess the question is though, how do we do it? Oops Well It's not it's not so simple right because we're making a major shift here and It's funny because Joey's Joe's Joe was talking about George Washington And he said that's a common motif for him. I don't think that's true But we really should have had him Good thing. He's not here. Usually what he talks about is Star Trek, you know Star Wars sorry Saras Yeah Hey, it's clear. I mean he does you right so I mean last night we stated a lovely B&B and They took a shower and Made it into this space-age Technology actually this does look like Star Trek, you know be me up Scotty, right? You know and it's got you know even like it's Creature comforts you get a little steam shower to going on there And then you see that thing you could put it on the ground in that it would spin to I don't know What you do with your feet on that but Looks nice, I don't know Anyway, but what it boils down to is something a difference between using JavaScript and A lot more JavaScript versus the standard sort of PHP stuff Okay, so why do we want to make this change? Well PHP requires talking to the database which means it's gonna be a little bit slower because you have to go back and forth and each of those database calls are going to be expensive whereas JavaScript is a browser technology and this operator just on your computer And it's not competing for bandwidth and the processing of the server So what does it mean to be not in the browser? Well, let's take a look at this Here's a lovely Website that we have oh There's some handsome people So let's take a look at what the to build this page. Let's look at what the the page source looks like Okay, you know you got your standard links and style sheets and JavaScript that's in Q'd right here. That's just a block of CSS Nothing major right But then we compare that to what we get in The browser okay, so here what we see is we're actually pulling in something with a huge JSON Object and it's basically got all the settings and everything in there So you're just grabbing that once and then you're just Navigating through your your browser window and it does have some stuff that you also use on the front end And that's what this huge JavaScript object is But you do it once it's just a block of text essentially and it's you know downloaded quickly And then you have it in and it's lightning fast okay, so there is a Little discussion that we need to have about what is JavaScript? because There's lots of different types of JavaScript so you got you know your standard jQuery Angular view node JSX ES 6 anybody heard of to ES 6. Yeah Yes next which are both, you know forms of ECMAScript ES 2016 I guess 2015 so really JavaScript is basically any file that has a code you that Uses structures with the with the file name and the extension JS right so anything That ends in a JS. Yeah, that's JavaScript if you want to know more about it you can Look at the debate between Netscape and Microsoft from years ago, and that's how we get Many different definitions and so you have JavaScript and ECMAScript where JavaScript is the code that's used in these JS files regardless of the flavor and ECMAScript is the is code that adheres to the certain standards put forth by the whatever ECMAScript body or So this was a nice little explanation for how to think about JavaScript so As a linguist it's appealing to me When people call JavaScript a dialect of the ecta script language they mean it in the same sense as When talking about English French or Chinese dialects A dialect derives most of its lexicon and syntax from its parent language, but deviates enough to deserve distinction One of my favorite questions as a linguist is What's the oldest language and A lot of people would say Chinese But either way it's an unanswerable question because languages are always evolving. So what constitutes Chinese today? Didn't you know a thousand years ago? What's even worse? What the hell is Chinese? It's nothing. It's just some language that's spoken over there That we have no idea what it is, but if you live over there There's a ton of different languages that people we would all you know, whether it's Mandarin Cantonese I don't know there's a bunch Some of them are dialects most of them are just completely different languages anyway Shift to the JavaScript some of the reasons showed who's already talking about it's basically shift in the marketplace shift in demands and shift in what's possible and shift towards speed So what do we what do we need to do? Let's start off by building a plug-in There you go Lovely little sublime text So basically what we got here are some folders the blocks folder up top contains the blocks that Will use in this In this plug-in that will be adding to the editor the CSS and JS just has like common files to all of the the Blocks that will use and then the node modules are something that you would download for your development purposes But when you actually ship the plug-in they're not going to be there and there's a ton in there. It's huge So looking closely at the files that we see in there this Babel or Babel This basically is the the thing that will take the JavaScript that you have and if you need to have it configured in some Backwards compatible way it will be able to render things through they talk to all the different types of JavaScript and basically what WordPress did was they took react and they created Basically their own sort of react modules in the WordPress core and that's what you're tying into right there a Key concept in react is that you it's a huge thing Maintained by the folks that are started by the folks in that Facebook and maintained by a group of you know High-class developers from Facebook Twitter other places, right? and so They have all these modules and you basically just take what you need for the blocks that you're building and you Basically are deconstructing So in this case You have all of these dependencies that you get from MPM and this is telling MPM what what dependencies you need to build what you want. I Don't know anything about this stuff. I basically just copied from Zack's course and It looked good to me but actually there was once or twice where I wanted to add something to it and You just go to the command line and you MPM install it'll add it to this file So looking closely at this up to the top they have these declarations while I'm building a plugin called Wclvpa blocks gave it a version number license all that sort of stuff This would also be where I specify a repo a github repository or something like that It's interesting when I spin up with MPM. It will say, you know, no repo, but that's okay this babel stuff this is Some of the MPM modules that are telling it what to Pay attention to our what to pull in for tying into the WordPress functions that we talked about earlier And then after you run the MPM install you get this Package lock JSON and what this does is basically if you had something that was out of date like one of your MPM modules it would tell you, you know, there's a newer version here and so then you would run MPM audit fix and What that would get you to the latest one and then update your package.json file. So this tells you what what you're running In the latest version, right? so it's all it's all pretty useful stuff and the reason why I actually wanted to show you this is because it seems kind of daunting scary or whatever, but You don't need to know anything about it Just know that these files are there and those are files that you're going to be Referencing, but you really don't you know need to know exactly what version your JS escape dependencies are, you know, who cares Okay, so here's here's our standard plug-in The the base file the WC LVPA blocks dot PHP And it looks like any other plug-in, right? This is you got your dock block up here, which is just declaring everything for you and I'm using a PHP namespace Just to keep it clean. I like to use that to keep things out Nothing you really need to worry about here Really actually I thought I had another one. Okay. The only thing that matters here is that This one here required the blocks PHP The other stuff is that extra I'm okay We also have this JS file that we're Using with his webpack and this is another one is just you don't really care what it has in there What this is important for is this will help? Reload the browser so when you're developing you make your changes. It'll be able to show you what you what you're Changing Okay. Yes, so this is what we worry about That that will kick everything off So that file looks like this and Again, we only care about this right here Actually, sorry, we do care about the other stuff. This is going to be loading your your block scripts Sorry This is just a standard It's not a standard what I should say is it's it's very much like in queuing CSS or JavaScript using WP in queue, but it's got a new function, which is The block in queue scripts. Okay, so that's a different new function that's come out pretty much looks the same but you have This array is handled a little bit differently. I mean Analogically it's the same And then the file time Which is a nice feature. So I actually don't know if you put a version out here or not. Maybe not Okay. Yeah, that's what we want. It Yeah, yeah, yeah, and I don't I don't know if Exactly, yeah, I think I think that works in concert with the web pack to Trigger the update. I'm not exactly sure Yeah Exactly. Yeah, yeah, yeah, I don't know if it would work with like a WP in queue script though I don't know. It's just a block in queue. But anyway This is what the block in queue looks like it. So it's it's pretty much the same type of thing In queue script and the queue style The there we have both the Front-end and back-end stuff that's getting in queued there Okay, so now in the blocks we looked at that with the blocks PHP now the blocks JS we have two imports One for the checkout button and one for the block button this one is actually one that we're using for pH PM pro and We thought mnemonically block JS seemed a little more Appropriate this is something that I borrowed from the atomic box Which is a great set of Gutenberg blocks to play with and they have some really lovely code in there They you I'm with the index Jx Completely arbitrary doesn't matter Oops and then you got your last file is the I 18 and this is for The whole plug-in basically So you're basically just setting It's anybody know what I 18 n stands for it is translation internationalization Why why is it why is it I 18 n? Yeah, that would sound good that would be good except that's not it It's because there's 18 letters in the word internationalization And you have another one For there's a yeah a 1-1-y is for the Accessibility 11 letters in the word accessibility and then what's the other one I 10? I 10 n or something dad W3C that's not a wordpress thing L10 n that's what it is L10 n Yeah localization. Yep. Okay, and so basically it's just saying Anything that you you find Just look for the object and if it has this as the text domain then render that for translation Which could also just mean translation within English like changing words Using localization Anyway, okay, so this is what the we're looking at inside the checkout button which you know PM Pro, but I changed it To WCL VPA for this and so here here We have a you know your basic react construct where you're importing what you need from the higher stuff and Then you're declaring your constants, which are essentially Instead of var they use constant at const and And a Constance supposed to be constant right doesn't change and then if you want to Change have a variable that changes then you use the word let so kind of avoid var now, but That's all we're doing here and then You have this export function which will export the block. There's a lot more below this so Okay, so this is this is basically what the export is and sorry that's cut off there, but basically that's going to be your title description category icon and You know all these different attributes that your parameters that you can declare in your block and Then you get down here to the edit and This edit area is What you're rendering in your in the editor itself? and props is Is is about state so when you're changing things from one state to another? Basically you declare state and then you use your props or properties to change that state so it's a cascading thing where state is up higher and then props are down below and then At the bottom there you can't see it, but there is a save but in this case There's not very much there were Rendering out so it's not there's not not much there, but those are the things that you need Okay, so I was doing my slides I was like trying to look for something to help explain some of this stuff and then I found that Zach I had taken Zach's course, but it was like a long time ago and He actually built this plug-in that actually shows you how to build a plug-in so it would have saved a lot of time But anyway, this is the little video that shows you when you when you start that Block and you install that it'll just it'll tell you each of the things that you need Yeah, it's it is really cool Point point here is that the only the top two are required and the bottom two the stuff in the middle is optional Okay, so basically when you install the plug-in install the plug-in and activate it you go to the plus sign to Create a block and and you'll see Zach's things there. This is also his demo demo block but So then yeah, I could go through each of them individually Those required dash icons are optional as Zach makes a big thing about using your own SVG Which is probably a good idea, but you could just as easily use dash icons Yeah, you did it cool Keywords keywords are optional, but it is pretty useful because well actually they'll see that in a minute Yeah All right, and obviously this is required because you care mostly about that Editor area and then saves are required to which will return to your front end actually, you know a Quick note about this this stuff basically it kind of looks like a Cross between HTML and JavaScript This is what I this is JSX right and it's basically a Hybrid if you will and supposed to be much faster faster than Typical vanilla JavaScript Okay, so to build a block. Do you need to learn react? Probably not It's good to know a little bit about JavaScript, but Other than that, you don't really need to know it, but so let's Let's install Some npm show you what that looks like Again, this is like nothing that you really need to be overly concerned with but Just for fun. I thought we could look at it together All I do is I get to the command prompt at the root of my plug-in and I run npm install and see it's it's grabbing all those packages takes a it takes Maybe a minute or two and then when you get all that stuff installed you can now see that you have that package lock Which is now there and the node module over there, buddy. Yeah, okay right So all of those load module modules are loaded, but And just in case you use those in your block you don't care about them at all. I just wanted to show you that No, so so basically there is so npm is the place where they all are and What you're doing here is is grabbing the ones that you need Based on what's in your package. Yes, son Yeah, so Exactly Maybe right. I mean depends on what your package Jason is that's all it's It is but you know what it's so much easier to do it this way because then you don't have to worry about the versioning it's all taken care of at the npm level and They're constantly getting updated and then your local installation and you're you're gonna get rid of this stuff anyway So it's not really Not really gonna affect anything Oh nothing. Yeah Okay, so let's I wanted to show you this is not the best video, but kind of show you what webpack is gonna do so This is this is videoing the the webpack and after I run npm dev to Watch the changes that I make This thing is gonna be running and say oh he just edited this block js and it'll give me a little note there in my terminal window That something has been updated. Well, okay What webpack was actually looking at was this thing here And that toggle control that I was playing with earlier I basically just cut it out and I saved it and Then that's what? What webpack was telling you had been changed? Okay, so Putting this all together. What does this mean? Well, we got some buttons there on the front end, but how do we get there? I didn't realize This is just the basic Native WordPress what button which I really like I think it's pretty slick And Here I can just give it notice when I did this it doesn't have the Open another window but let's look at the p.m. Pro checkout button and This was actually built by David and I did some CSS to it Which doesn't look great on the back end, but This is cool. This is what react is about you see that it's basically I can change the script on the inspectors Or in right in there and the buttons reflecting that that's what react is about It's like paying attention to all these areas and it can react to it wherever the changes are made Now this one is nice. This is the one that I borrowed from the atomic blocks and export it for this so We're just add this they basically Extended the existing button, which is really nice And I changed a little bit that's going going on and over in the inspector side But you know you can change the color button text change the size and In this case because they had the CSS in there you can also change the shape Okay, so looking on the front end Isn't that pretty? So lots of ways that you could do this These are two blocks that we built or one block that we built in another one that I built custom for this But I recently saw one where you could Build some stuff pretty much using just PHP however To build to to register a block you still need to do it in JavaScript. There's no way to register a block with PHP alone you need to have that block js and Basically that is About it. I was going to put more references, but I wanted to get Joe's plug-in and what I Did do is I have a repo called WC LV PA? 2018 Blocks I think and I'm going to put these slides in that repo and it'll have the The two blocks that I was showing you here So you'll be able to actually look at the code and get your hands a little dirty with it And yeah, it's pretty cool stuff. So I think we got time for questions Little bit 15 minutes. Come on bring it Yes, so I'm gonna say yes But I will backtrack from that a little bit. So that is a great question and I should have had a slide on that Similar to that npm module business that JavaScript is about figuring out all of the HTML and CSS that you need for the front end and then it when you hit publish It'll package that into the HTML and CSS right so on the front end That's all you're gonna. You're all you're gonna have So yes, you could grab that HTML but Exporting I don't know how you would do that So I mean there's no real export feature of the HTML that I'm aware of but it's there on the front end Well, I don't know that you would be locked in Yeah, so exporting the post is not gonna do you much good because what is gonna happen Gutenberg specific basically That's another slide I should have had but yeah, I don't know But Yeah Yeah, I don't so I Yeah, so So yeah, they do have an export blocks But here's all you here's all you really get and and it's got only that so remember when Joe said that the The the Gutenberg stuff would be commented out or whatever That's all you're gonna It's not gonna be helpful. Yeah So So yeah, I don't know I Mean the HTML obviously is there when that page is rendered but until that page is rendered You're not gonna have it It's all secret But I mean there are plenty of people who use the decoupled architecture, so wordpress just on the back end Perhaps you can modify the output to suit your needs, but I I'm not aware of it And the other questions, it's really cool stuff I am a big fan of Gutenberg Just because I feel like it will open us up to a whole new Range of possibilities for what you know what wordpress is capable of But at the same time it's a big pain in the ass The coolest block, you know what I Haven't I haven't seen anything that I'd be like, you know wildly crazy Yeah, and I was actually looking for things that were much more simple for demonstration purposes But I have seen some useful blocks that I think is is pretty nice like it was one for like Doing like a book review and it it had a whole bunch of You know options that you could specify and I thought in terms of usefulness and ease of Dealing with that. That's great Yeah, I don't know But I think that You know we have a responsibility to build some really cool ones with PM Pro so that's where we'll focus on All right, thanks very much folks