Developer Hours: Improve your workflows with WordPress development tools

Nick Diego 0:00
All right, welcome everybody to another session of developer hours. This is actually our second to last session of 2024, and what we’re going to be talking about today, it’s going to be kind of a meandering discussion on developer tools and how you can kind of optimize them to improve your own workflows. What we’re going to be talking about today, you know, we’ve kind of covered in previous developer hour sessions in various forms, and they’re kind of the kind of the core fundamentals of our workflow. But we’re going to try to hopefully highlight some more interesting aspects of the tools, and hopefully you’ll find something useful that will help you improve your workflows, building blocks, block themes, editor extensions, that sort of thing. So my name is Nick Diego, and I’m a full time contributor to WordPress sponsored by automatic and I’m joined by my colleague, Ryan. Ryan, would you like to introduce

Ryan Welcher 0:53
yourself sure my name is Ryan welcher. I’m also a full time Developer Advocate sponsored by Automattic. And, yeah, happy to be here.

Nick Diego 1:02
Yeah, excited. Give me a phone. And I think that it’s one of these things where it’s, it’s we also want to hear from you if you’ve been using these tools as we go through the presentation, if you have questions, if you have things like, Oh, you could do it this way. Even better. You know, please use the chat. Please, please engage. You know, we want to try to all learn from one another in this session today, before we begin, we always kind of run through a couple of announcements. The first one being, and this is a bit old news. Happened a few weeks ago, but WordPress 6.7 is out. If you’re not familiar with what came in the release, there’s a great overview here. Hopefully everyone is up to speed on the WordPress 6.7 release, but a lot of cool things that are included there that will help you build better with WordPress. I kind of missed this step here. I want to share with you all a link to a resources document, so every all the links that I’m going to share after this are also included in this document. It saves you a little bit of effort having rather than having to copy and paste from chat all the time, I’m just going to paste that link here, and you can check out the Google Doc, and it has all the resources that we’re going to be referring to today. Next up, in terms of announcements, we always like to spotlight a article series called what’s new for developers. It comes out every month on the 10th on the WordPress developer blog. The last edition was for November. We’re currently working on the next edition. Ryan is doing most of that work, which will be coming out next week, on December 10, and that will be the last edition of the year. This. This series kind of covers all the latest things that are happening, both in WordPress core and in Gutenberg, and it’s a great way for you to just to kind of catch up and stay up to date on what’s coming and WordPress, from a developer’s perspective, next is, I wanted to showcase that we have our final session already scheduled. It’s the it’s going to be about WordPress playground. So you may have heard about WordPress playground. We have done a presentation from developer hours back, I think it was in May, around playground templates. But this is going to be a really fun session that kind of does a recap of all the enhancements to WordPress playground in 2024 and there were a ton, I mean, WordPress playground just increased massively in this year. So much new functionality, so many different ways to use it, and that’s what the session is going to be all about. So we hope you guys will all join us then and then finally, all these sessions are recorded. So if you have to leave halfway through, whatever these sessions are recorded. They are on YouTube in a playlist. I’m going to share that playlist right now, and so you’ll always be able to watch these after the fact. And I think Ryan already handled that form. So perfect. Thank you. Thank you for that. So what we’re going to do is there’s a couple developer tool there’s a lot of developer tools out in the world. We’re going to really focus on ones that are specific to WordPress, and kind of the big two are going to be the WP scripts package and the Create block tool. You may have heard about these. Maybe use them already. We’re going to try to dive into some more unique features of each and we’re going to start with WP scripts. So I’m going to pass it off to Ryan, who’s going to kind of lead this discussion, and then we’ll go from there. All right, Ryan, you’re up.

Ryan Welcher 4:27
Thank you. Nick, yeah, so WP scripts, if you’ve built a block, if you’ve built any modern JavaScript in WordPress, it’s about WordPress five you’ve, you’ve played with this, the WP scripts package, or the scripts package, as we call it. It handles all of the building for Gutenberg itself. The Gutenberg Project handles that using scripts. And yes, there’s a lot of this. There’s there’s far too much for me to be able to go into in in depth for everything, because there’s just so much that this package can. I can do. But I think what I wanted to do is kind of focus on some,

Unknown Speaker 5:05
some sort of

Ryan Welcher 5:09
easy ways to get started with it. That’s not what that’s not the right way of saying that. But let me share my screen, and then and then we will go from there. Which desktop am I sharing here?

Unknown Speaker 5:22
Gonna share this desktop. Sorry, move this up.

Ryan Welcher 5:30
So if you’ve ever worked with Webpack, you know that it can be fun. Webpack is notoriously hard to configure, and so a lot of times when you’re using the scripts package to build blocks to build your custom grabs JavaScript to build whatever it is you need, the tendency is, is to say, Okay, well, I have to add a new thing, or I want to change something, and I so I have to go and and create my own web pack configuration and get into the source Code and all that stuff. But I that’s not always the case. There’s a lot of times where you don’t need to change a thing with sort of the way the scripts works. Rather you just add some flags or add some configuration items that the package actually supports by itself. So I put together this repo that we can follow along with here and it it. This repo is a bit it’s a bit like the way I’m talking right now. It’s kind of all over the place. There’s a lot of different things going on here, but basically it’s going to show us some of the more common flags, some of the more you know, a bit more developer ones, things that that make our lives easier and and then there’s actually a crate block template associated with with with this as well, that where you can scaffold out a plug in that handles multiple blocks. Sorry, zoom in. Is that better? Sorry, I’m getting request.

Nick Diego 6:54
Maybe one more. Yeah.

Ryan Welcher 6:57
Okay, perfect. So, yeah. So let’s just, I’m just I’m just going to go through this. First of all, this is how I react anytime anyone says to me, I would like to to configure a web pack and so, but you may not necessarily have to. So there’s a there’s a couple of things that you can do if you just need to target a file, if you just need to say, I want to build this particular file. Maybe you’re not building a block. Maybe you’re building a low an extension. Maybe you’re building something that’s not even, you know, a custom editor screen or something, and you just want to target an index file for JavaScript. You can do that just by passing the file that you want to build. And so you don’t need to change anything nice and easy. You just set that up in your start command or your build command, or whichever command that you want to use. So, so that’s that’s a really quick and easy way of like not having to to to customize anything. You can also do the same approach with multiple files. So if you have more than one file that you want to, you know, build, you can pass them all in in a list like this. Just keep in mind that this will generate one output file. But again, don’t need to to to configure word or WordPress web pack in any way. The next part is, this is where it gets a lot like you’re going to want to do more complicated things. So for example, if we want to customize the location of our source file. So in a standard build, I have to zoom this way into let me know if this looks okay, but looks pretty good. Okay. So in a standard sort of build, for a block, you would have your source files inside a file called inside a directory called SRC. That’s that’s just the default way of doing things. But if you wanted to do something slightly different, like, for example, have blocks and some other JavaScript. So you may want to, you know, the SRC directory might not make a lot of sense, and it does get a little bit more complicated when you have nested blocks. So if you have more than one block sitting inside of your directory, it makes sense to kind of split out some of your JavaScript files. So you can do that by passing this flag called web pack. Source director, I’m going to actually see if I can get into this file like this. Does that give me a bit more space that looks a little bit nicer? There. There we go. Okay. So this allows you to say, hey web pack or hey scripts, this is where my source files are living. And it’s just by simply adding the flag to your command and then adding whatever the name of the block is, and it’s relative to to wherever you’re calling that from. Sometimes you want to change where it gets output to by by default, it’s a build directory and but if you want to change that to dist or public or whatever it is that you want to do, it’s quite simple to do that and and it everything just works. It just works and just puts it in places where you want to go. If you want to copy all the PHP files from your source directory to your build directory, you’ll you’ll want to pass this flag, which is the web. Copy PHP flag. You’ll you’ll see this with dynamic blocks, because dynamic blocks has a render dot php file associated with it. So this is just going to automatically copy any PHP that’s in your source into your build these ones. These ones are a bit more developery. So if you want to analyze your web pack bundle, so where you can actually see how big the different chunks are and and all of that, you can actually just pass that with this. Maybe I can show these.

Speaker 1 10:31
Can I show these? If I could show these? Stand by one second. Just do this.

Ryan Welcher 10:40
So if I go in here and I go scripts, I’m just going to bear with me one second. Sorry. So if I, if I go in here and I, I’ve set up a few of these commands, just for sort of examples. You can see in my package js on sorry, I don’t usually live this zoomed in. I have this analyze command. So what I’m doing is I’m going to run this, and we we can see what that looks like. NPM run analyze. What this should do is kick open. So this is actually showing me and it’s, it’s it’s zoomable, and you can get information about each, each part of your bundle, and where it’s lo located. This becomes really important when you’re doing a lot more advanced things, when you have some huge files, maybe you’re you’re importing packages and stuff that. So this just gives you a sense of, like, how big things are. You’re not going to use it all the time, but it’s something that’s just there and it’s available, which is really cool. What was the next I’m sorry, so the the dev tool. So I don’t have an example for this, because this changes how your source maps are generated. So if you need to make changes around the way that source maps are working inside your project, you do have access to that which is what’s going to this one is no external so if you’re familiar with the dependency extraction plug in, in the scripts package, what it does is it, it’s, it’s the magic glue that that makes it so you don’t have to import every single package to your project. It converts your import statements like these ones. It converts these, these import statements into accessing these the same items, but on the WordPress global, which is great, because you’re you’re you’re not importing all these JavaScript functions and growing and growing and growing your bundles. This flag turns that off, basically. So if this, if you run this with this in place, it will require that you need to have all those things installed. So where does it? Where does this become important and practical? I’ve literally never used this and except for preparation of this presentation, but the place where you would probably want to use this is, let’s say you wanted to have, let’s say you you wanted to have a Block Editor inside the a label project, for example. So you would want to turn the scripts, the the dependency extraction plug in off, because that’s not going to work there. It will be no WP global in that context. So this is a way of using this sort of outside of the WordPress space, if you need to experimental modules this. This is a experimental flag that is being used for the the interactivity API. You need it for, for the interactivity API, and what it’s going to do is compile your JavaScript as a JavaScript module, as opposed to the way it’s doing it normally. And this one is, it’s so hot, I love it. It’s literally called hot. And it’s enables fast refresh, which is basically like you don’t have to Reno reload your page. It does it all for you. So I have that set up when I’m going to show you all hopefully works

Nick Diego 13:48
while you’re while you’re pulling that up. I just want to stress to everybody that everything that Ryan’s been talking about it is a single flag like it is a single flag in your scripts that you’re you’re running, and there’s no other setup required. So, like, it looks very complicated, perhaps, but it’s just a single flag you’re adding.

Ryan Welcher 14:09
This is true. I probably should have been a bit more clear about that. So there are a couple. So this is where we’re getting into, the place where there might be some things we have to do. And, yeah, Anton, it does work. Well, it works. It works in the script, but you need to have some things set up, yeah, and basically, so this should, if I’ve set this up correctly, I’m sorry I was gonna hide this. Should be able to get some some stuff happening here, so you should be able to see that this is saying script examples. Oh, my goodness.

Unknown Speaker 14:45
Okay, it’s if I change this,

Ryan Welcher 14:49
see it just updated. I’ll zoom that in a little bit. But this is very, very cool, so now I can. So as I’m saving this, this is just being updated, and it’s not just for text. I. Can actually just drop in some expected controls here in the side as well. And if I look, look over here. I select this, select, select this.

Unknown Speaker 15:08
Where did it go?

Ryan Welcher 15:10
Block. Sorry. I see I have my content panel here now so I can update the content. They update the content. Save that. You can see that this just gets replaced. So this is really, really, really cool. It gets really it gets very powerful when you’re doing very, very complicated things where you have say, like, you have multiple steps, like you have to select your block, then you have to come down here and select your control and have your control open up. You don’t have to do that every single time. That’s where we’re hot module replacement or fast refresh becomes super important. Now there are some caveats around this that you have to be aware of. The first thing is you do have to have the version, the latest version of Gutenberg, installed, and you have to have script debug constant set to true. So if you’re running, if you’re running like WP EV script debug will be set to true. If you’re not and you’re running anything else, you have to mainly go into your WP config, and you have to make sure that that’s set. Now, the other thing that you have to keep in mind is that URLs your if your development URL is not local host, you’re going to have to make some changes to the web pack config, because by default, so it so under the hood, it’s using the this thing called dev server. And dev server has a a sorry, I linked to the wrong one. It has a property called allowed host, and basically allows you to set auto all or some string of whatever you want. So Auto is what is being used, and there’s some security reasons for that. It’s because the hosts are vulnerable the DS binding attacks and things like that. But if it sets auto, it will only look for like, local host or host or some other sort of, like, very specific names. So if you’re using something else, if you have, like my site dot Dev, or you have map set up with a custom URL, or you’re using certain other local development environments that that have their own custom dot what, whatever is right, you’re going to need to make a change to the to the web pack configuration. Sorry, lost my train of thought there. And it’s, it’s a fairly straight forward one. Now we’re kind of into the the you have to customize things way now, but the way we do it is actually fairly, fairly painless, because there is a default config that’s provided to us by the package. So what we can do is, all we have to do is just change the pieces that we want. So we don’t have to come in and figure out what plugins and what entry points and what all all these things. All we do is take the default config and then we’re going to we’re going to export an object, and we’re going to use the spread syntax to take everything that’s in the default config, and then, and then we’re going to override it with things that we want. So there is a dev server option or sorry, property. And so what we’re going to say is, okay, we’re going to take the dev server, we’re going to take everything that’s already in dev server, but we’re going to just override this allowed host things. So I set mine to all. Now this is important to understand that this is technically a bit of a security issue. This is just going to work everywhere, but you can also set it to like a URL at some of that. So if you’re doing this, be sure you’re not deploying this or just Just be careful with it. But this is how I do it locally, and it works. It works across the board. I’m gonna pause. Is there any questions about any of this stuff?

Nick Diego 18:50
I’ve went through a lot, yeah. And there’s one question about some SAS error logs that show up, but we’ll talk about that later, because I ran into it as well. There’s one about from Elliot, saying, presume that updates attributes under the hood as well. I guess while you’re doing hot refreshing,

Speaker 1 19:10
presume like block Elliot a little bit. Yeah. So I’m not really sure what that Oh, props. But props,

Ryan Welcher 19:20
yeah, so when it’s it’s essentially just, like, just so, so the fast refresh is basically just, like reloading the whole page, but it’s just, it’s just reloading the JavaScript portion. So I haven’t put it through, like, some serious paces around, like, finding out what its limitations are. Like, if your server side stuff, it’s most likely not going to get there, like, if you have something in PHP that that’s being in queued, and then you make that change, you’re going to have to refresh that page. But if you’re just just working in JavaScript, it’s able to just just replace that particular section. So for the most part, the props would be fine. Everything would be okay there, but it. If there’s a thing that you have to get it from the server that’s not like a REST API thing, I think you think you will have to reload, but it reloads really, really fast, and in fact, in some cases, it does actually reload the whole page. So it’s, it’s

Unknown Speaker 20:13
pretty great. There

Ryan Welcher 20:13
was a question about, do any of these tools have type script support? Yeah, script supports. It can process TypeScript files, but it doesn’t do it. Let me rephrase that. It has TypeScript support in the sense that it knows that what TypeScript is, but it doesn’t do the TypeScript processing for you. If that makes sense, you will have to probably add that in TypeScript support in WordPress development is it’s, it’s tricky right now, because a lot of the types are up to date, both of the project and then, like, fully type. So that’s kind of a, that’s kind of a, it’s a, it’s a deeper topic. I would love to see more support for it. I know there are people who are putting in concerted efforts to move all the packages to use TypeScript, and that’s great, so that will make things better for us. But yeah, so, so yes, with asterisk, let’s put it that way. Okay, so the last real thing that I have, yep, there was

Nick Diego 21:15
one question here that you might have. So what is the best practice to add an assets folder to your builds. I’m updating default config. But maybe you know of a better way to achieve that

Ryan Welcher 21:27
an assets folder to your builds. Like to copy assets around over is, is that the question? Imagine they’re using a custom web pack to handle right? Okay, so you want to have something like fonts that get just moved into a build. You’re there, you’ll have to add a plug in for that. There’s a copy. There’s, there is a copy plug. In fact, we want to get into it there. There is there. You can look at what’s being done. Yeah, I think you’ll need to do it with a custom config at this point, because you’ll need to target what those things are now there, if you wanted to look at so, there is plugins, so 100 So There, there is some stuff that you can do. If you look in the advanced usage section of the documentation for scripts, you can see that they you know, you can get it into the weeds a bit more. And there is support for fonts and there is support for stuff like that. So you some of this might help get you where you need to be cool. I move on, though, because I think I’m taking more time than I should be. So the place where you absolutely have to, and probably the most common reason why you would have to update, sorry, you would have to provide a custom web pack config, is when you have multiple entry points that you want to have as discrete files. So in in this example. And this is a very common example, you want to have a plug in that registers one or more blocks and but you also want to be able to generate a JavaScript file that that stores your your variations and your slots and maybe your custom admin screens, or whatever it is. So this, this is the, probably the best way to do this. So what we’re going to do is we’re going to import the default config again, we’re going to spread the default config across our object. Then we’re going to add an entry property, and then we’re going to this is very important. We have to to spread the entry property, but call it as a function. The reason being, is scripts has got this amazing little built in functionality that it can detect any blocks that you have in your source directory and build those out, which is really, really cool. It means you don’t have to go and update your your your entry points. Every time you want to add new block, you just add a new block as long as it’s got block dot JSON it, scripts will find it and be like, oh, there’s a block and build it. So that’s what this does. So if we add this, you’re golden, and then after that, you can just add as many more slots as you want. So I actually have an example of that in here, and that’s what that’s what this template does. This template is going to build out. So my web pack config, sorry, this, I’m going to move my move this over. So my webpa config has got everything I need. This is going to build one or more blocks out. I’ve got my JavaScript in a completely different folder, and so I this is kind of putting together all the pieces. Like, for example, in my start, I’ve got my start, I’m copying any PHP files from my blocks, and I’m also telling, oh, my Webpack sourced or is actually in blocks. It’s not in source anymore. So this is that’s building all that stuff out. It’s managing a lot of different things. For example, there’s this really cool new register block, meta. Data Collection, which is going to increase performance for registering multiple blocks. And it’s all, it’s all in place there, and, yeah, and so that this is available as a create block template, which Nick, Nick’s going to talk about next but, and it’s, it’s on NPM, and it’s also part of this, this repo. So if you want to check it out, you can it also does some really neat things, like, anyways, I won’t get into it, but there’s this has got almost everything that we’ve talked about today. It’s got the hot module, it’s got the Analyze, but you can go in and add your own stuff to it, and that is available. Like I said on

Unknown Speaker 25:41
where is the, sorry, I

Nick Diego 25:45
have your repo link if you wanted to paste that,

Speaker 1 25:47
yeah, where did I put the I put the, oh, it’s down here. Sorry. So,

Ryan Welcher 25:52
so the Nick said, talk about create block, but when, when, and if you you want to use it, you can, actually, you can get it right here, so you can target NPM packages and do it that way. But anyway, I’m gonna stop let people ask questions if there are any. Hopefully I haven’t glazed you all over the speed at which I was talking. But yeah, and if you have any questions about this after the fact, which I always have when I ever edit these things, just reach out to me. I’m on WordPress, Slack, I’m on X I’m on blue sky, and threads, I’m everywhere. So just reach out and I can answer what I can

Nick Diego 26:29
Yeah, I think part of this is, I mean, we could talk about this topic, these topics for like, you know, four days. And so I think a lot the main point of this session is to, like, provide a taste of different ways of doing things, and then also hopefully further discussion. So like Ryan said, reaching out to us, talk to the fact or, you know, in the chat, wherever we really want to try to show what’s possible, and then hopefully generate a discussion from that. Because there’s also areas where, as you start using some of these tools, you might have a specific build process that isn’t supported, like the the gentleman mentioned about, you know, the having us you wanting to pull over SVG files and which would require a more complicated web pack, but maybe that’s something that we could incorporate into WP scripts in the future. So the more we talk about this, the more we look at different use cases, the more that we can consider improvements in WP scripts that will cover all these things. So I wanted to talk about create block, which is a very cool tool, which, if you haven’t used before, I encourage you to do so. So I’m going to share my screen, and we will talk a little bit about create block, and specifically about creating templates, because I think that this is an area that is I will need to start using myself, and it’s amazing how much time it saves and speeding up workflows. Before I get into what you see here, I want to share a documentation article, and we’ll take a look at that here. So create block is a tool that allows you to scaffold a block, individual block, block, plug in very quickly. It is the way that we recommend that anybody starting out building a block builds blocks. I mean, you can do it by hand, but this is the best way for you to get started in a very quick fashion, straight out of the box. I zoom in a little bit here. You can just run this MPX create block, latest to do list, and it will just scaffold a really stock block that you can then use as an starting point to build out whatever you want. The create block tool includes a number of built in templates that will allow you to it will scaffold the block in different ways. You can create a dynamic block or a static block. Won’t get too much into the differences there, but hopefully you’re familiar with those terms and has a lot that it can do just in and of itself. But one of the benefits of the Create block package is you can actually create your own templates. And this is where I think that, again, I only just started using this after being, you know, prodded by Ryan. Ryan has a great article on how to create external project templates, so I’m going to share that here in the chat. And he’s also given many talks about this, I believe it word camp Canada as well. The chat window is not appearing. So this is Ryan’s article on the Developer blog on how to create external templates. So let me kind of paint you a picture around why, if you build a lot of blocks, if you build editor extensions, you probably want to start building, sorry, building your own templates. So I built a lot of extensions, and I built a lot of blocks in my life. And every time I go to do it, it’s a copy and paste process, you know, I’ll, maybe, I’ll scaffold a simple one with create block, and then I’ll look at some. My old projects, and I’ll, like, copy over any custom web pack config that I have, or copy over just the file structure and how I like to have things put together, which you can definitely do. And it actually doesn’t take that much time. So it’s very tempting just to, like, keep doing that, but what you can do with the template is you can actually build out a scaffold that matches your own personal preferences. So let me give you a quick example. So I have a plug in called The icon block, which is not an advertisement for but I have a very specific way that I like to have my output files. So in my build folder, I have a style dot CSS and editor dot css by default, if you use the Create block package, it will generate a style dot CSS and a style dash index dot CSS, which one is designed for the editor and one is designed for both the front end. And I just, I always found that a little confusing, and I don’t, and I wanted it to be this way in my own projects, right? So whenever I would use the Create block, I’d have to go in and I change the file names and in, but not also there are others. So I’ll in my source folder. You can see here that I have index and editor dot CSS. So what I wanted to do is, and you can you don’t need to necessarily need a web pack. I don’t think for this, but I just have a custom web pack config where I’m just mapping the SAS files to the output files for style and editor. So every time I want to go create a new project, I copy over this web pack. And I also like to use the Remove, remove empty scripts plug in that just removes the empty JavaScript files that ended up getting created. So I just have, like, this little setup that I use all the time. But what if you can just create a template? So whenever I scaffold at a new block, this my personalized way of doing it was just already, already there. Similarly, there are scenarios when I want to create a Block Editor extension plug in, where I want to use WP scripts, and I’m not necessarily building a block, or maybe it’s a combination of a block plus some block variations and some slot fill and some other stuff and that project. But because it includes multiple things, blocks and additional JavaScript, you can use great block for but then you got to start adding all your own stuff into it. But you can build a template that will scaffold that entire project with all the stuff that you need already to go. So what I did is, ahead of this presentation, is I put together a little library. Let me back out here one more a little library called Create block templates. And this is designed for my personal use. You are more than welcome to take it, iterate on it, copy it, whatever. But I made it personally because it’s personal to me. So for example, if I have one actually let me back up and we explain how these templates work. So these templates are use must, must files, and so let’s take a look at the first one, which is a dynamic block. So if I want to scaffold a dynamic block, instead of using the default create block dynamic template, I’m going to use my own. We’ll start by looking at this index file. This index file very dissimilar to what we saw with web pack, where you have that module export, where it’s exporting an object. We’re doing the exact same thing here. And what I’ve done is I’ve passed a whole bunch of default values. You can see, like, I’ve passed my name, I’ve passed the plug in, default plug in, Uri, and, you know, custom title, custom description. I’ve included some things that I like. I copied this from Ryan, this prettier config. I also have some custom scripts. So I like to customize my scripts a little bit. So I have one that not only links JavaScript, but then there’s one that also fixes all the errors that it can so I have, like, a custom script that I add to every single one of my projects. I can define those custom scripts here. I also have another custom script that’s using CLI to generate the pot file of the translation file for the plug in I’ve included that here. This is something like I just always add to every project, but here you can generate a scaffold that will do it all right. Off the bat, I’ve included NPM dev dependencies for that thing in web pack that allows you to remove the empty scripts. Basically, you’re defining all the custom stuff that you want. You also need to define the path to the plug in files and then the path to the block file. Files, because we’re working with the Create block package. This entire thing is designed to build blocks, but you can do blocks, and like you can build blocks, plus you can scaffold plug ins that maybe have a block but also have a whole bunch of other stuff. So you have your block template, your block files, and then you have your plug in template files. So let’s back out and look at those files.

Nick Diego 35:25
Now this is also custom, because in the documentation, you’ll see that your two folders are plug in and block. So we go back here and see that it’s plug in and block. Normally, this SRC is block. But I to me personally, it made more sense, because these are all the files in your source folder. I just called it a source because it made more sense to me. Again, this is how you can customize things to for your own needs. So inside of source, this is going to be all those files that pertain to the block. If you ignore the little mustache at the end, it’s the files that are very familiar. You have your edit.js, s, your editor, dot, sess, so on so forth, and your render, dot, PHP, because this is a dynamic block. Before we look at these files, I want to back out and take a look at the plug in folder. Here we have some more custom, custom stuff, a custom read me, both in Markdown and text. We have that custom web pack config. Here you can see this looks very similar to that icon block example that I showed you before. I have those defined entry points recently in work in WP scripts, it generates RTL style style sheets, which is great. That’s a huge, great addition to WP scripts. But in this case, I wanted to disable that. So I’m disabling the RTL CSS plug in that generates those right to left style sheets. And then I’m also using that remove NP scripts plug in as well. So again, all custom but when you include it in your scaffold, it will generate that for you. Backing out here, I have a custom Git ignore, a custom editor config, and then here this little dollar sign slug. This slug is actually going to come from the index file, so I’ve defined my slug here, so it’s called dynamic block. So when this plug in is scaffolded, this log will be replaced with whatever slug is provided. In this case, dynamic block. And here we have our PHP file. Now, again, this is something that I like. I have a specific setup, or how I like to set up my plug in, you know, the main plug in folder, I like to use name spacing. So you can use name spacing. There’s a way for you to transform the slug into using Pascal case. So that’s what we’re doing here. And these little, what do you call them? Brackets. This is what’s dynamically inserting the content that’s in that index file. The defaults. It’s inserting them into your files here. So here, this title will be input, the plug in Uri, the description, the version, the author, text domain, so on and so forth. This is all getting dynamically updated whenever you scaffold the block. Plug in and see here, yeah, I’m registering the block. I have my name spacing, you know, so on and so forth. And again, you can customize this however you want. You could also build a really, this is a very basic block. It’s just a default block, but with some additional setup, you could basically completely customize this. So let’s say that you wanted to create a template that scaffolded block variations, or block bindings, or, you know, you can get really specific with this. You can build an entire, basically an entire plug in, in these mustache files, when you run it, it will scaffold the whole thing. And then you can make your minor tweaks here and there. So you can really go as far as you want. This is just a very simple example where all I’m doing is registering the block. I have this in my mind, where I build a lot of editor extensions. And so a lot of those editor extensions are modifying blocks, you know, adding attributes, whatnot. It’d be really cool to have a template that had, like, all those functions in there, and then all I would need to go in is, you know, change the block that I’m actually modifying, you know, change the attributes, so on and so forth. So you can really go pretty far with this. Now, let’s go back to the plug in files, or, sorry, the block files, and we’ll just take a look at what this looks like. It’s a very similar we have our editor file, or edit file, which is the file this editing the plug in in the editor, and you can see here, everywhere you see these brackets, this is worth inserting that content from the main file index. And now you if you look closely at this, you’ll notice that this is a different index file than what’s in. Included it with w the just the default create block tool, the way that it handles things like the registered block type, pulling things from metadata that I did I just like to do in my blocks, which is definitely possible. That’s how I’ve set it up here. Again. This is just tailoring it to my own personal preferences. And as opposed to using the default that comes with the Create block tour. So how do you use this? Okay, so once you’ve created these templates, in my case, I have, this is a repo, and there’s a couple there’s another example in here. There’s the editor extension example, but we don’t need to go it’s very similar to what we have. What I just showed you. This repo lives in my local computer, so if we come over here, we can see that I have this folder called WP projects. It’s a bunch of random things. And here’s that repo, and it has the templates that I’ve built. So let’s say that I want to use this template, and I have a local site for developer hours, and it’s over here in plugins. So what I want to do is I want to scaffold my block using the Create block package from my templates that I’ve created. In this case, let’s create a dynamic block. So there are different, couple different ways you could do this. I could in my terminal. I could start inside of the templates folder. Then I can use a new flag called Target dir, target directory, and then I can target this plugins directory, and I that will scaffold the block there. I could also, in my terminal, navigate to the plugins folder inside of this local site and then target the template from this WP Projects folder, so you can do whatever you want, like you can do how you want to target it. It doesn’t matter. I’m going to use the new template directory flag, because this is brand new. Ryan was brought this to life, and it’s really cool, and it just shows you a way that you can basically scaffold your blocks from anywhere. Because before you had to be in the in the directory where you wanted the block to be scaffolded, now you can scaffold the block from anywhere by passing that target directory. There’s a couple things to know, and this side we right before this session, we were kind of practicing with this. You do need to be pretty precise around where you’re targeting things, but as that would make sense, right? Because I was not precise and ended up installing plug ins in random places that they should not have been. So let me pull up my notes here, and we can start this. So when you create a when you scout the block using create block. Zoom in a little bit here. You’re going to use MPX at WordPress slash create block. Now this is this you can do at latest if you want. But this is pulling from the Create block package. The next thing you need to do is you need to pass a slug. So this is there. There’s a there’s a way to do this automatically, and we’ll walk you through some steps on staff capital demo block. But in this case, we’re going to do is we’re going to create a slug for the name of our plugin that we’re creating. So let’s just call it my dynamic block. Okay. Next we’re going to use the template flag, because we want to use the template that I created. We use template right now. We are inside of this create block Templates folder. So in my terminal, I’m inside of this create block Templates folder. What I need to do is, I’m going to do I need to target templates,

Speaker 1 44:12
dynamic block. Okay,

Nick Diego 44:17
let me just do this first, and we’ll see what happens. I’m

Unknown Speaker 44:24
buttons, oops,

Nick Diego 44:27
I don’t think I do any of the dot here, yeah,

Ryan Welcher 44:30
because it’s a local path, so it has to know where to look from, where it’s being called,

Nick Diego 44:36
all right? So you can see here that it’s scaffolding my block, and this is just using the Create block tool and my template to scaffold the blocks. And you can see here that I had that custom web pack config in the Read Me. Can zoom in. It has my name, all the stuff that I made custom to this i. It’s building out the node modules. It’s going to build the plot, build the block, and you have the complete block here. Now let’s take that and instead of just scaffolding in the directory that we’re in, we’re going to use target Dir. Then we’re going to copy this plugins folder, get the path of the plugin folder. Now, when you do this, note that we are currently in the Create block Templates folder, so we need to be able to get out and get to the right place. So we need to back out twice, because I’m here, I need to back up once, twice, and then studios here, see if this works. There you go. Oh, and I did it wrong. So see, alright, see, this is why, why we, why we do these things, because we learn what we’re doing wrong. So what I, instead, I did is I built it out into this folder, but I did not specify a the folder for the block itself. And this is actually one of the cool things that ran and I were discussing. Because if we look at this, my slug is my dynamic block, but you can actually specify the name of the folder to be anything you want. So let me change this, and we’re going to call it my cool plugin, and we’re just going to delete the extra stuff that I don’t need here. This stuff we don’t need, all right. So now I’ve specified a folder inside of the the plug in folder. Now we have my cool plugin right here, and we have the block being scaffolded behind the scenes, and the name of the block. For the actual name of the file is my dynamic block, all the slug and everything inside of that is going to be my name dynamic block. But using the target dir, we can specify a custom folder if we want. Now to prove that this actually works, let’s open this up.

Nick Diego 47:33
Sorry, it’s on a different screen. Gonna pull this over. I’m

Nick Diego 47:44
and look at that. It didn’t work. Okay? So there’s, there’s something broken in there that okay. And the reason why I think this is broken, and I know this is broken, is because I was scaffolding a plug in, and I did not make the name of the folder the same. So I was showing you how cool it is to be able to change the name of this. And I think if we go back here and we just change this back, we should be okay. No, I

Nick Diego 48:26
all right, my dynamic block is deactivated.

Unknown Speaker 48:31
Just try refreshing again. It might just be that it got deleted, blew up. I

Nick Diego 48:49
All right, what we’re going to do is we’re just going to delete this, and then we’re going to come over here and we’re just going to copy this over. I’m

Ryan Welcher 49:15
just a question in the chat about being able to modify other values by with like on the fly, and the answer is yes, just have to pass. I’m just looking for the scripts. Documentation.

Unknown Speaker 49:33
Great, block documentation.

Ryan Welcher 49:37
It there are, there’s, there’s a number of flags. Now it’s not, as robust as the as what Nick is doing, but there are a number of of options that you can pass. I’m just going to link them in the chat here, specifically things like title and variant, which is something short, description, title, category, whether or not it has scripts to. Associated with it, whether or not it has WP and V associated with it, the name space things, things like that. Sorry to continue. No, they’re

Nick Diego 50:07
just a ton of flags you could add to that. So, like, for example, like in my example here, if I wanted to enable env, I think it’s just what WP and V, you can just enable WP and V, just like that, by adding a flag, and it will just add it to the scaffold. So, like my template does not preclude any additional flags that you add. So you could just build a very simple template for your own specifications and then use all the available tags that are there and then customize it further. So I think I just had a mix up with my local site. So after refreshing it, everything is working now. So this is my scaffold the block, my dynamic block, save it, and then on the front end, we have, you know, the two two options there. But again, it’s very just a very simple block. But under the hood, the scaffolded files and everything are kind of my own personal preference on how I like things built. And if you are somebody who’s building a lot of blocks, or you’re running a company that you’re doing building your own scaffolds, building your own templates, I if you’re not already doing side I highly encourage you to do so, because it really allows you to standardize the way that you build build blocks, and also speeds things up, and then you can always add more functionality to them along the way. And again, it doesn’t preclude, preclude those existing flags that exist in the Create block package. We are running a bit out of time. But one of the things that I wanted to share, which I mentioned earlier, is that these tools, while gray and they can do a lot of amazing things, they can’t do everything. And it’s important to hear from the community development community around what things you would like to see added or improved. So I wanted to draw attention. I’m going to stop sharing real quick. I wanted to just draw attention to a PR that Greg, who’s actually in our chat, has been working on, and this is to improve WP script specific. So this is a cool PR about how to automatically detect entry points for default JavaScript and CSS files in your projects. This basically makes the idea is to make WP scripts a little bit more intelligent around how it handles all this stuff, and it’s currently a draft PR. But if you’re interested in this sort of thing, please take a look, provide some feedback. I think that’d be very helpful. And if you have other ideas on how we can improve these tools, let us know, or open an issue in the Gutenberg repository. There’s so many cool things that we could do now. Thank you, Ivan, for reminding me about this issue that you were having, so I haven’t run into this too maybe somebody who’s smarter than me can help me figure it out. So if I go to how Okay, so if I’m in my dynamic block and I do NPM run build,

Speaker 1 53:13
you’re not sharing Justin, oh, I’m sorry. I Yeah.

Ryan Welcher 53:23
Also, I want to mention that if you are a Windows user, we need testers for creative block and for scripts, because there are things that only happen in Windows land. So if you know that would be a great way of contributing and just letting us know if all these tools are actually working the way they’re expected. So

Nick Diego 53:43
absolutely. So this is the issue that I have been running into as well, which I believe I’ve been as we’re running into too if you define your own entry points, like I’m doing here for style and editor, you get this legacy JavaScript API notice. And I don’t really know how to solve it. I haven’t honestly looked into how to solve it, but I have noticed it popping up. Now, everything still gets generated as expected. You still get your files, but it is a bit of a scary notice, and this only started happening at least to me in the last month or so. So have you run into this? Ryan, or

Ryan Welcher 54:26
Yep, yeah, I’ve seen it. It looks like a dependency issue. Most likely, updating the SAS dependencies in scripts will probably make this go away. That’s a guess, just based on the the the the output message, I love Greg. I think, I think Greg said something similar, maybe in chat. So I wouldn’t worry about it. This is definitely just like a plumbing thing that that, that that the team, the development team, needs to to to address not anything that you’re doing wrong. It’s just the way that it’s building,

Nick Diego 54:58
yeah. And if you look. At this article. It seems to indicate that, you know, they’re just trying to be very proactive to let people know about it and everything. So, all right, all right. Does anybody have any last minute questions before we kind of close down the show here? I know we kind of reached, breezed through a lot. Yeah, we did. So

Ryan Welcher 55:28
did, did? Did you mention Nick, sorry, I got caught from chat, but did? Someone was asking about the flags that could pass to scripts on on the fly. Did you happen to mention that if you use those flags, they will override the values provided by the template, regardless of what’s in the template. I don’t know if you mentioned that. So if you have a name space, that’s like, my fun name space, and then you use that template with the namespace flag and change it, it’ll change it for the template, like it won’t use that default value. I didn’t know if I was saying it. If it wasn’t, I apologize. But I just wanted to get that out of my head.

Nick Diego 56:01
No, that’s great. I did not. I did mention that you can use flags with templates, but that is important to note that the flag takes precedent over the template. So just note that whenever you guys are are doing that sort of thing, but I usually I really like combining, like, if you don’t want your template to include everything, and you’re very used to using the flags already. Keep your keep your template simple and use the flags, you know, it’s but again, I think that the really, the cool thing about this is how customizable it is. And it really comes down to your own personal preference on how you want to set things up. Yeah. And I will admit it does take a little bit to kind of build it the way you want, you know, figuring out what pieces you want to replace and you know how you want to structure everything. The mustache files, I’ll admit, were a little bit intimidating for me at first. I’m like, What is this thing? But it’s just normal files with it,

Ryan Welcher 56:56
yeah, the the one thing about is that there are some conditionals that you can use inside those files. So there’s a, this is a bit more of an advanced approach. But if you have files that you don’t want to output based on your variant, which is a way of defining multiple sort of flavors of your template, you can actually wrap it in conditional SO, SO files don’t so parts of files don’t get output. The and things of that is, I it’s in the article that I wrote on the developed blog, if you want to take a look at that, but it allows you to do some really like out of the box, things like not render any block files at all, just render a single JavaScript file, because that’s all you want. Or, you know, you can do all kinds of stuff with it.

Nick Diego 57:38
Yeah, and I want to share, Ryan, you have a cool repo with more examples that are more complicated than mine. So it’s that has things that use those conditionals, use the variants. I didn’t use any of the variants in my examples, just to keep things simple, but you can definitely do that. Scott asks, will be likely to see any official package of block templates. No, not necessarily. However, the Create block package itself includes templates. So whenever you pass that flag is dynamic that is actually rendering a template that is defined to render a default block template. We also have one for interactivity API. I think you just just flag interactive. Is that right?

Ryan Welcher 58:26
Well, you passed the template, so the template, they’re also on on let me see if I can grab it. Here. They’re all stored in the on NPM. So the other thing about both templates is that you can actually host them on NPM, and then just access them directly. So there’s an out WordPress, create block tutorial, and then there’s an out WordPress, sorry, I have to find it here,

Speaker 1 58:51
and I don’t know my where’s the interactivity?

Unknown Speaker 59:00
Oh my gosh, while

Nick Diego 59:02
you’re looking for that, fill us creep theme script in the future, I’m not sure. I think I

Ryan Welcher 59:10
don’t want to add a hackathon two years ago that hasn’t gone anywhere, but hopefully we’ll get there, there. Oh

Nick Diego 59:17
yeah, share your thing.

Unknown Speaker 59:20
Oh sure, yeah. Here I’ll share

Ryan Welcher 59:23
with the thing is, we do have the, we have the Create theme block, right? Or the plug in. I mean, sorry, that handles a lot of that, that stuff. So this is the interactivity API block example. So the way that you call it is you would just pass template and then the NPM package name, so which is, this is a really great way of of of distributing templates. So,

Nick Diego 59:53
absolutely, yeah, yeah, and that’s how you have your templates. I think,

Ryan Welcher 59:57
yeah, I have three. My Block developer cookbook. I have them all on an NPM as well, which makes it just makes a lot easier. You don’t have to distribute all your code, but you can, yeah, so you can share these. The The thing about the the official block templates, is that the Create block package has two templates that are built into it. One, sort of like an ES, ES, next, like advanced jobs or not, advanced modern JavaScript ones sort of like a vanilla JavaScript version, and they they covered, like, the majority of use cases that the community needs. Um, because it the like, what’s great about a template is that it’s really customizable, but there’s not, not everyone’s going to need the same style of of of customization. I mean, the only variant that I can see maybe getting added is one that just does something like a variations file or a slots file, or like an admin screen file, one that doesn’t necessarily do a block, but then we’re kind of pushing the limits of what create block was meant for anyways. But, yeah, yeah, but, but you’re welcome to create your own and go wild with what it does. So I

Nick Diego 1:01:07
do before we drop off, I do want to mention one thing that folks are talking about of. I have an example in the repo of a editor extension template. The editor extension template is not a block, right? It’s just an extending a block. But it’s using the Create block package. So by default, it will always generate a block dot JSON file. So basically it, like, does everything I want. It just gives me an extra block that JSON file, which I will just remove and keep on going, you know, keep on developing. But it would be kind of interesting if there was a, you know, create plug in tool, something like that, where you or a tool that’s a bit more abstracted, where you could say, I don’t, I’m not building a block, but I want all the other stuff, you know. But you know, all my other custom stuff that we currently have, so that’s that would be very interesting. So because I do think that I find myself building more plug ins that are not blocks, like we did the interactivity API was just introduced, and using the interactivity API and block variations, you can build a really cool plug in that does a lot of things that you would previous have to use a block for. But if we could have a way of scaffolding that without having to, you know, create a block, that’d be pretty cool. And I think you can get pretty close with the Create block package, but it’s still going to get you that block dot JSON

Unknown Speaker 1:02:35
file. Maybe

Ryan Welcher 1:02:36
we just need a, need a flag that’s like No, like no, emit JSON or something, or or, or something on the template level, that just removes it. Or you could just, you know, add something in your scripts and POST call that that deletes blockchain. Yeah, yeah, yeah. Block binding stuff too. Like, we’re going to get to the point where there’s less and less need for custom blocks. I mean, there always will be need for custom blocks. But a lot of, a lot of what custom blocks are solving are, like, I want to connect post meta to a thing, or, like, you know, a lot of these, a lot of these custom blocks are built because core doesn’t support what you’re looking for, but we’re getting closer to where it does support. And custom blocks are becoming less and less they go to, yeah,

Nick Diego 1:03:16
absolutely. But this is great discussion, everyone. Thank you for commenting on this, because coming up with a solution that tackles all these use cases is something that would be great for us to have, and what we come up with will really rely on the input from you all and what you need. So alright, we’re five minutes over. Thank you all for coming again. The next session will be on the 17th, and we’re gonna be talking all about playground, and a lot of cool things that you can do with playground for plug in, theme developers. So hope you all will attend that one if you’d like to continue the discussion. Ryan and I are both on X make blue sky. All the things I do want to highlight if you’re interested in this conversation in a more like centralized place, there’s the outreach channel in WordPress slack, that’s a great place to have some of these discussions and kind of keep them in one place. But wherever you find us, feel free to reach out. Thank you all so much for coming, and we hope to see you on the next one. The recording of this session will be up later today. Thanks again.

Unknown Speaker 1:04:20
Thanks everyone.

Unknown Speaker 1:04:20
Great chat. Bye.