On May 21, Greg Ziolkowski and Fabian Kägy demonstrated in this Live Q & A on YouTube how to use create-block tool that comes with Gutenberg plugin and how to custom templates for creating blocks and share them on npm.
You can reach Greg in WP Slack and on Twitter @gziolo and Fabian on Slack and Twitter @fabiankaegy
Resources
- Discussion: Next Steps for Block Creation Documentation
- GitHub PR: Create block: Add support for external templates hosted on npm
- Experimental npm package from demo
- WordPress/Gutenberg Examples
- WordPress Script at npm
- 74 WordPress packages at npm
Transcript
Sponsored by Pauli Systems
Birgit Pauli-Haack: So, hi there! We are here on the Gutenberg Live channel, and have with us Greg Ziolkowski and Fabian Kägy and both will show us how the future vision of the Create-Block scaffolding tool, that comes with Gutenberg, and Fabian is going to show us also how to extend it and make it your own to have more productive block development. So, I’ll take myself out of it and I’ll turn it over to Greg!
Greg Ziolkowski: Okay, let me share my screen first. I just want to show some background, present some background on what we are trying to do here. We are aware that everyone’s trying to create their own blocks, and so far, it was quite hard to do it because of all the requirements like using JavaScript tuning around that and everything else. So, we started this process a long time ago because we use a very advanced JavaScript tool inside Gutenberg Project, but we figured out that it would be great if you could share that with the community. This is how we created npm packages.
WordPress on npm: Create-Block and WordPress Scripts
If you go to npm and find there is an organization called WordPress, and there are as of today 73 packages. There are two of them that we want to cover today. The most important one is Create-Block as you can see on this demonstration. It’s just a way to create your block with one line of code. There are a few ways of doing that and at the moment it supports two code templates, so it’s like the way in how the block will look like after the scaffolding ends. One of them is using ES5, which is the standard of JavaScript that is very old, it’s 10 years, and it’s also something that WordPress developers in the past used for jQuery, so we wanted to bridge that and provide this template. However, we will focus today on ESNext and JSX based template that is contained, so they build tools, linters, formatters, stuff like this.
Behind the scenes, this solution, the second one I mentioned, it contains also another package which is called WordPress Script. WordPress Script it’s a collection of different scripts as outlined in here for working with JavaScript, CSS, there is unit testing, end-to-end tests, and so on and so on. It’s not that important here. The idea is that once you run the script block, it creates an environment that is ready to work. So, you don’t have to worry about finding what tool you need to you use, what kind of language features you want to use. Everything is ready for use.
First magical Steps
Maybe let me show an example how that could work. So let’s say, I’m running npm init @wordpress/block and this is, something happens, code is downloaded from npm, which is registered for packages and then you have CLI prompt that asks you to customize your block. So, this is a way to make it simple for everyone to create their first block, but also at first it allows you to change some default settings to avoid the stretch when you have to go through the code and do a search and replace, techniques and stuff like this. So, let’s say we can create, we can provide…it’s not that important what kind of things we are providing here. The whole idea is that those are things if you ever build a block, you should be familiar with that. So, this is something that allows you to create your block like category, title, description. It’s everything that’s visible in the UI.
There is also this part related to the client. So, Birgit mentioned to me once that it would be cool if this block here that they could be also a plugin at the same time, so we have this supported now. So, we could provide everything that you require if you want to publish your blogging to the WordPress repository. So, license and the version.
Once that starts, then there is the process in between. So, the folder is scaffolded and also, what’s important here, the dependencies for the core scripts are behind the scene installed for you. So, this will end in half a minute or something like that and you will have everything that is ready to work with. What we are trying to do now is, Fabian, he proposed this approach that rather than using only those recommended templates for how block definition will look like, we want to allow also third-party packages, hosted on npm that would allow you to create, be customized experience.
Block Directory
However, we want to have this baseline. I think you could see now how the CLI looks like, how it works, that should be quite close at least for now. However, using all the values that users entered during this process, we can provide quite a nice experience. Also, I want to highlight this effort that Anne recently posted in this issue on GitHub in the Gutenberg repository, so that the whole point from my perspective that we are trying to do is to make the first step magical. So, we envision the future when there is also this huge project blog directory that allows to install blocks directly from the inserter. So, rather than going to the plugin repository and starting your plugin as before, you would just type inside the inserter and the QRQ type doesn’t have any matches inside your editor, then it will just go to the new block directory which is specific for blogs that are JavaScript based, initial approach and with that, you would be able to install your block.
So we want to bridge that, that tool concept at some point. So we want to have this component so that you could quickly craft your own block, publish it to this block repository and the end user could install it while working. It’s like, there are a few things that we want to converge into one coherent experience. To make this step magical, we also want to simplify the way you manage, you use documentation for WordPress. So today, if you go to developer.wordpress.org docs, no, there is this. There is this handbook and if you go to “Tutorials” and go to “Blocks”, you see that there are lots of examples that you need to copy over. There is a way to make it simpler by copying from the Gutenberg examples repository that we also maintain, so you have those examples in here.
The transcript is still work in progress. Pardon the dust. (bph 6/20/)
The idea is that thanks to what Fabian is working on, we would be able to add in copy just around the same comment by putting the name of the template, like this, so let’s say at the moment we support also ES5. So we will just create something different so ES5 has also different defaults and things like that. So, now let me maybe show what I just created. So ES5, for example, you see right now it contains only five files and it’s pretty basic. He’s using ES5 in here. If I would open another scaffolded project, what was the name, demo today. It’s much more complex. It contains several things that were created behind the scenes like back end JSON file and there is a source folder, because we are using ES Next we can use ES model so you can split files into smaller chunks and things like this.
So, the idea is that instead of going to this Gutenberg examples and going in here, downloading material or cloning this repository and copying it over to your WordPress installation, you could just go and run this one line and that would drive you through the whole process and allow you to make this blog. So once that’s ready, then you can just go to your WordPress and activate this plugin and it’s ready to work. And also, because this is ES5, so when I open the terminal and I run MPM start, it will just start all the building and once you start the development process, behind the scenes everything is covered for you. So you can see right now, if I would go here and say import, and bring the _______________ when I save it, it triggers refresh. So every time I change something here, maybe let me show it this way because it’s quite fast. It rebuilds.
So, those are tools that are included in this set up and that’s something that’s quite exciting. Fabian, can you explain what was the whole idea from your side to get into this idea with hosted on MPM?
Fabian Kägy: Sure. So, what I think in order for me to appear on screen, you need to stop sharing for a second. Yeah, this seems to work, cool. The problem in mind was that there are these two templates that you can start with the ES Next or ES5 template, but several times when you’re working in a company, when you’re building multiple plugins, they’re just different approaches, just different ways that you like to structure your code, different things, like for example, the new way that the block repository has different ways to structure the actual plugin, then for example a normal Gutenberg plugin. It would be cool to make that a bit easier to just have anybody be able to contribute a template and then being able to use the same scaffolding tool that’s already there to use your template or use the template that somebody else created and go from there. Just have a magical experience with your own template or with the template that somebody else built.
Greg Ziolkowski: Yeah, that’s cool. So I guess I covered all that we wanted. So just to recap. Our goal is when you go to this tutorial inside the block editor handbook, the first thing you would have is just this comment, that one line comment that we provide a template name the same way as I did it for ES5. So, that would be that. So calling this template name, so for every step you would have a different template provided and this way, someone who wants to build a blog, they could just start and go run all those comments and build up on that their own experience, or just go the last step and just build the most complex and start from this stage to building their own code. Oh, I’m not sharing the screen so you can’t see that.
Anyway, I think that could be much more powerful rather than copying over code from those tutorials. There are often mistakes that people catch after time, but I’m sure that some people they don’t have this opportunity to go to the Gutenberg repository and find an issue of all the PR, so that’s why we want to make it much easier. So maybe now, should I do some tour of our code? Fabian maybe you could do that because you are new to it, but that would show us the experience that someone could have if they would like to contribute to this because we see this opportunity to bring more people to get interested in improving those tools that we have already.
Fabian Kägy: Sure. So, should we just take one of the Gutenberg examples? Just pick one out and try to make that a new template for it?
Greg Ziolkowski: Yeah.
Fabian Kägy: Then once we build that in just the template folder inside what’s currently there, we can take a look at the PR they created and show how it will work once that is merged.
Greg Ziolkowski: Yeah, we could also start with the higher level thing. How the packages, where you can find the package, how it’s structured, so also those extension points because what you are describing now is something that would be external. Today we will just show how you can build inside the project, your own template. However, it will be as simple as breaking out those folders that you will create and publishing it to MPM with some additional meta data.
Fabian Kägy: Sure. Then let me share my screen. There. So, I have cloned the full Gutenberg repository. Let me start by just, if I got to GitHub and search for WordPress Gutenberg, I can find the actual Gutenberg repository where all the development happens and the different packages like the Create-Block package that we’re working on today, are all inside the packages folder. There’s, like you showed earlier, loads of them that are published to MPM. They are all the sources coming from within this packages folder. I have cloned this whole repository onto my local machine and I’m just opening that up.
Greg Ziolkowski: Could you show this button, clone or download, so people know how to do it?
Fabian Kägy: Sure. Just on the top right here, you have the opportunity to clone or download and if there are, you can either use the actual command to do it in your terminal, or there is a tool that’s maintained from GitHub desktop that when you click the Open on Desktop button, it clones it that way as well.
Greg Ziolkowski: Yeah, I think there, you also are using a fork, so there is on the top right this fork button that you need to click if you want to do something. It might be even more automated in the States, I don’t remember.
Fabian Kägy: When you click on the fork button, you’ve seen that I’ve already created a fork. You can basically select one of your organizations or your private account and create a fork, and then it creates a copy of the repository and then you can work on your local copy, and when you then are happy with the changes that you’ve made, you can submit a pull request, but we can look at that later.
Cool. So with that cloned I can open it up and again, I have the same folder structure that you can see on MPM where at the packages folder with all of the different packages in here. Greg, do you want to walk through any others, or should we just jump into…?
Greg Ziolkowski: I don’t think it’s relevant at this stage. Of course, the other thing that I showed you on MPM website, there is 73 packages so all of them are in this same folder. So, maybe not all of them because some of them are private.
Fabian Kägy: Cool. Yeah.
Greg Ziolkowski: It makes it easier to discover if you want just to contribute to the one of the packages you are using. You will go to this folder and you will quickly based on the name, find it in this folder.
Fabian Kägy: And when you’re only working, yep, what I sometimes like to do because it sometimes feels a little bit overwhelming when you have so much stuff going on here, so in some of the packages I just navigate to it in my finder, just open up for example the great block, just open that up directly and then I have only the files that I’m looking at. When I want to actually commit something, I can go back and do stuff in the actual Gutenberg repository, but for now I just have the files open that we are actually working on. So this is the actual Create-Block package that Greg showed earlier. This is where the magic is happening and you can see there is a templates folder inside of here that has the two templates that Greg showed. There is the ES5 one and then there’s ES Next one.
When I look into these folders, they’re these dot mustache files. So for each file that gets created, that gets scaffolded out, there is this mustache file that already has everything that we’ve seen earlier in it. Just with the addition of some of just some variables. So, basically under the hood, it’s taking these files, replacing the variables with whatever you put into the prompt that you’ll get asked and then removing the dot mustache at the end and creating the scaffold plugin for you. With that, the idea is to add another template to it and then that can be used that way.
Greg Ziolkowski: So just to recap or remind what I said earlier. We will want to provide a few more templates that would align with the tutorials that we will have, we will update for block creation. So then we be step one, step two, step three and so on to make it all easier. So they will be quite similar, but they will build up on each other this way.
Fabian Kägy: Cool. Do you have a preference of which of the Gutenberg samples we should take? Or should we just start from the beginning to convert one of those?
Greg Ziolkowski: We can just copy ES Next and just go to the basic one and you just probably have to remove some code at first, that will be much easier to follow.
Fabian Kägy: Sure.
Greg Ziolkowski: You have to find the Gutenberg example. Once you are looking for that, I just wanted to say that the choice for mustache, that wasn’t made based on my previous contribution to WPCLI. That also has a very basic support for creating blocks. It creates the ES5 version. So it’s nearly the same as the one that you can find in this templates folder and the one I showed you also when I ran the comment. So WPCLI has a lot of history, so I’m sure that choice is the right one. I didn’t want to brag that, because although this tool, those tools are Java Script based, they use the note JS and WPCLI is PHP based, however, those libraries are universal and work across. Also, that could be a way for, in the future, if WPCLI would like to align in some way, they could just take all those templates and use inside their project as well.
Fabian Kägy: Sure. Then, one more thing about the structure. We have the templates folder where just the different template files are located and then we also have this templates.js file where the preview finds block templates, the ones that ship with the Create-Block package, they have some options, default values. They have an option whether WP Script is enabled or disabled and by default it is enabled. We will also need to add our new example to that list for now, until it will be possible to pull it from external link. Cool. Greg do you want to?
Greg Ziolkowski: Yeah, you also could scroll down in this file because there is a larger list of values that we probably will have to modify. So in here, those are the defaults for every template that would be ever created. But, the idea is that every template can override the defaults, so this is the value that is presented when you are using…when the prompt shows up on the screen. What was your question?
Fabian Kägy: I wanted to ask whether you wanted to start with just duplicating the ES Next, or just start by copying over?
Greg Ziolkowski: If I would have to create another template, I would probably do that this way.
Fabian Kägy: Cool.
Greg Ziolkowski: The same as when someone starts their journey with blocks, they will probably use one of the scaffolded blocks then try to tweak some values just to see what happens. So that could be in your experience.
Fabian Kägy: Then we will just….
Greg Ziolkowski: You can copy and paste.
Fabian Kägy: Just paste it and rename it into the, what should we call it for this?
Greg Ziolkowski: You can use the same name. It doesn’t matter.
Fabian Kägy: Basic ES Next. Cool. Then I will just open this on the side so we can just copy our stuff over. Sure. So, I have this open on the side. And we can probably, the editor config we can ignore. Those two are the same.
Greg Ziolkowski: So let me explain. This editor config is a special file. It’s copied from the WordPress repository. It’s just the setup for the IDs, just to make sure that all the files are formatted in the same way. GitIgnore is for usage with Git. It ensures that some of the most popular folders aren’t comment like node modules which we don’t want to store in the repository because it sometimes takes hundreds of megabytes. What else do we have? We have CSS, PHP and JS, Java Script five and also there is Read Me text, which is also, it’s something based on some recommendation from the WordPress documentation. Fabian Kägy: Sure. Awesome. I think we can leave the editor config, the GitIgnore and these cells, we might have to look whether there are cells in there, but leave them for now. Same for the Read Me and I don’t think there is anything we need to change in the PHP file as well, is there?
Greg Ziolkowski: Depends. Because I think BASIC doesn’t contain CSS tags. So then you have to remove some. Just need to open that and we will see.
Fabian Kägy: Cool. Yeah, over here it doesn’t look like there are any CSS files. So we can go in here and where we registered the script and then registering the CSS, and I’m just taking those out for now and seeing what the block style and block editor style, so we can remove that and just have the registered block type function and cue the editor script. Then I can also delete the two files from here. Then we can go into the actual source folder and in here, there is currently only one file. Should we split, yeah we can also move the edit and save files from our copied folder and just put everything to one file. Or do you want us to split it up?
Greg Ziolkowski: Oh, yeah, you can do it. It’s up to you.
Fabian Kägy: Cool.
Greg Ziolkowski: For the initial experience, that might be easier to not bother with importing files.
Fabian Kägy: Sounds right. We are importing the same two dependencies, register block type and then the underscore, underscore for initialization. We can read the comments for that. We don’t need internal dependencies since we’re only doing it in one file. Yeah, we can leave the name space and the slug for currently…we will just change the icon in the default values in a minute when we register it. So, I think the only thing we need to really change here is the actual set and save.
Greg Ziolkowski: Yeah, and also we don’t need support in here.
Fabian Kägy: Correct. Move that.
Greg Ziolkowski: I mean, I would argue we need it, but that’s not so important.
Fabian Kägy: Then we can just basically copy over into our edit block and put it in here. And the same goes for the save slot. Put that in and with the block style it’s used that, again that would also need to be added to the top and then we can add another comment just to let everyone know what’s happening.
Greg Ziolkowski: It seems like a lot of repetition to have all those comments, however, depending on the stage people who would start, etc., I think it’s still valuable to have those in line things that you can always disable. Also, we might provide the flag for the CLI tool just to disable all comments if someone doesn’t want to have them. Something to think about for the future.
Fabian Kägy: That sounds like a good idea. Cool. So I’ve added the block styles and the change the edit and save method. And I think that’s everything we need to change in here. The only thing we need to add now is add it to the templates JAS file and add the default values up top there. Then we can give it a try whether it works.
Greg Ziolkowski: Looks like a super simple task to do.
Fabian Kägy: First problem, we had hyphen in, or, just sorry, dash in our name and would that be supported?
Greg Ziolkowski: No. No.
Fabian Kägy: We need to….
Greg Ziolkowski: You will have just to rapid test, like a string. You don’t have to rename it.
Fabian Kägy: Okay. So this, will the scaffolding find the….
Greg Ziolkowski: No, no. What you need to do here is, you just need to use string like rapid.
Fabian Kägy: But can we do that inside the object?
Greg Ziolkowski: Yes.
Fabian Kägy: Okay. Yeah, then. My mistake.
Greg Ziolkowski: No worries.
Fabian Kägy: BASIC ES Next and here. And we currently don’t have, we can copy over the icon. I think when I will check…these are again, all the available options and it’s named dash icon. So, we will also provide the default for that. And the default category will be laid out. That is that category. Besides that, I think we can leave the rest as is.
Greg Ziolkowski: I guess so.
Fabian Kägy: Actually give it a try. So I’ve just opened up the terminal and in order, because I’m not pulling the tool from MPM, I’m just testing it out locally, so what I want to do is, I want to run this index.js file using node or do you have a better way of testing it locally?
Greg Ziolkowski: So there are a few ways to do that. One of them is using NPX which is a way to execute binaries from the node model folder. So there is a binary defined for this file that is called wp-create-block. You can just go and run NPX wp-create-block.
Fabian Kägy: SWP or just wp?
Greg Ziolkowski: No, no, wp create, block. Create-block and you provide the name of the template.
Fabian Kägy: And that was ES Next. For me, it’s trying to….
Greg Ziolkowski: I know why. Because you are in the Create-Block sub-folder. So we just need to go up. So we tried to install it from MPM.
Fabian Kägy: Yep. So now I’ve changed my directory to actually the Gutenberg directory and just clear that, and now I’m trying the same thing again. NPX wp-create-block and specifying the template. Let’s see, so now that works. So now we can, yeah. It’s giving us the default options that we put in. The default title. The description. It has the correct icon in here. The layout is the default category and we just go through here and then you will see that once it installs everything.
Greg Ziolkowski: Should be somewhere up in the folder structure because you are now in Gutenberg.
Fabian Kägy: Yes. Doesn’t it place it within the same folder the Create-Block is? Or does it create it where it is happening?
Greg Ziolkowski: No, no. It’s from the folder you executed the command, which was the Gutenberg.
Fabian Kägy: Correct, yeah. Then let’s go into the Gutenberg folder. There it is. The Basic ES Next. Open that as well. Even though it’s still executing, something it is already here, but we should wait for this to finish running. Cool. So now you can see just the build folder also appeared and it has everything in here. When we open it up, you can see what we just did. It has the block styles in here. It has all of the scaffolded comments. I should also remove the comment here because it’s not correct anymore. But, this is our scaffolded out.
Greg Ziolkowski: Are you able to run that inside your WordPress by copying to the WordPress instance and trying if that actually works? That would be nice.
Fabian Kägy: Sure. Let me just quickly get the site up and running.
Greg Ziolkowski: So in the meantime, there was this comment from Jessica. “I wonder if it would be good to set up some best practices for these templates that could be contributed, which might include that style should be set up in your block ID. So, especially continuing on that in the Gutenberg examples, it makes sense not to have them for aligning purposes, but for the scaffold it seems like a bit of a nuance.”I totally agree. So we are just showing how that might work, in existing templates that we already have inside tutorials, but outside of tutorials this example is super simple. It’s we removed more than we added. So the idea would be that we’d rather provide more advanced examples. In those examples for tutorials, the example five or six that are quite advanced, and they seemed like a very good way to experiment with your own block template.
Also, I see that Fabian mentioned that some teams that work among blocks, they just want to have something more customized, like having their own sub-name for sub-folders, they are maybe using different to link. Maybe they are not using Git or they just rely on SVN as a default approach and there might be some integration with some people, I know they are using GitHub work flows so once they commit to GitHub it just deploys the code somewhere. There are many things that people might find useful, but the default one is something that would be always optimized towards the best experience for someone who wants to create a block.
So I envision that once the block directory is up live, with WordPress 5.5, I hope it happens, then the example, the default one, when you don’t specify any template name at all, it would be something that creates a block that you just scoot into, publish right away to the block directory. How is it going in the meantime?
Fabian Kägy: I just started, created a new local site and I’m just, I copied the folder over and it’s in here. I’ll just spin up the site here real quick. Now just start a new site here. Just to scrap a WordPress site. Example, I’m just adding into our plugins folder.
Greg Ziolkowski: Another way of doing that would be, you just could go, once that tool is published to MPM, another way for usage if you want to consume that is that you go to the same folder as Fabian is going now, and just run this comment inside this folder. Just another idea I have is that maybe we could have a way to specify paths, just to make it easier for people. So they don’t need to go directly to the folder.
Fabian Kägy: Or if the Create-Block thing, scaffold is used when you’re working on just an actual block plugin that doesn’t need to be integrated into a site right away, you could use the dev environment that’s included in the WP scripts.Greg Ziolkowski: Yeah. This is what I’ve been doing when I’m playing around. So there is another package called N??___ and it has this binary name, WP-N. It just helps you to use Docker and all the already auto developed provided instance in WordPress that is tailored specifically to implement, to the development of blocks or plugins that are based on Java Script.
Fabian Kägy: Cool. So I have, inside the plugins folder here, I have the BASIC next example. I’ve just activated that and want to create a new block. Should be able to Basic ES Next, and I can insert this and it shows me hello step one from the editor and when I want to publish that site, see from the front end, this is what we set up. There is no interactivity, just the Basic ES Next example from the Gutenberg examples that we just ported over to one of the templates.
Greg Ziolkowski: Great job. You did it. So now, you know, having that tool, that should really make it much simpler for people. I think that it would be valuable to show one day also a seminar, do a seminar stream and show how to do the WPF you mentioned, because if you combine those two, then it’s really powerful. It makes everything so much easier.
Fabian Kägy: Yep. That’s also something with the external templates, you could just, in the package or also with the internal templates, just in different templates you could have a WPN already set up in one of the templates that, or you just have everything already inside of the one template, and use that to start with. Depends on what you want your projects to be.
Greg Ziolkowski: So you are saying that this WPN allows you to specify multiple plugins? In the configuration you can provide multiple paths to plugins?
Fabian Kägy: What I meant was that currently in the ES Next template for the Create-Block, all of the WPN isn’t configured, but for the WPN as part of the WordPress Scripts isn’t configured, but one of templates could of course just configure that and add that to it.
Greg Ziolkowski: Yeah, actually that one is something I would consider as one of the options that is, will be behind the flag, an advanced one. So someone wants to use it, that could be, but because many people, I believe they have their own tools that allow them to develop with WordPress or even test with WordPress, like Flywheel or whatever, there are so many tools.
Fabian Kägy: Yeah.
Greg Ziolkowski: So it all depends on your use case. So maybe now you could present your proof of concept for the same thing, but working for something that’s external. Like a remark from start, in the meantime while you are working, I just provided some changes to the code base just to make it easier to integrate that, so they way how it’s structured it differs a bit, however, the whole idea just as the most important thing that we have here. If you could continue.
Fabian Kägy: Sure. I’m sharing my screen again. Then, I’ve just switched to the branch that I’ve been working on and let me clean up.
Greg Ziolkowski: Yes, I guess that is the easiest way.
Fabian Kägy: Then I can go from here. Again, I’m just opening up the actual Gutenberg development folder and the actual Create-Block folder in my code editor and here, I need to close down the terminal.
Greg Ziolkowski: While you are doing that, there was another question from Jessica. “So, if you want to continue with templates through the Create-Block products, should we push them to MPM or to the templates folder in Create-Block?” Yeah, we haven’t settled on that yet. So it’s still in discussion. In the issue I also posted in the chat on YouTube. It’s hard to tell probably we will start with having them locally. Because they don’t take so much space so that shouldn’t be a constraint in terms of the amount of download size you would have for the package, but that would make that easier. However, I anticipate that we would move that to separate packages on MPM. Ones that work on the feature that Fabian will show soon will be done. So, definitely for now, for providing, I mean, just to be clear. The whole concept is to have as little template as possible inside the Create-Block package. So the ES Next and ES Five that would be probably in the…that’s what we need to support and the tutorials, they would exist outside of that.
Also, third party, that should be, that I think is something for MPM. Also, just to explain that, that once we discuss with Fabian how it could be implemented, we were looking at Create React Up because they also support templates and what they do, they also have this way of providing local paths. So we could have copy templates from someone, put it inside your folder on the disk and just whoever has that. That would be another way of doing so. It’s something that we should definitely discuss and find the best solution. Okay, sorry Fabian, you can continue.
Fabian Kägy: No problem. So what I did to be able to actually test this out, I just took the ES Next example that is currently located in the templates and folder and pulled it out into its own folder and its own project. As you can see, it has the source folders, it has the editor config like earlier. We can ignore all of the files. In addition to that, it also has three files that are not mustache files. It has a package JSON in order for me to be able to publish it to MPM. It has a Read Me file just to give some basic information, and it has the most important thing here, a template.json file where again we are specifying the default values the same way that we did in the templates folder earlier. With this, I’ve added the default, I can category those things. Then, I just published this to MPM. So this Basic ES Next example currently is available on MPM under the name Gutenberg-ESNext-Example.
This is just to test out the scaffolding tool. So when I copy over that file and, or that name, and again open up my terminal and clear that and run the create-block command again, but instead of passing it the local template name of one of the local templates, so I could either have ES Five or ES Next for local ones, I’m passing it the name of the MPM repository and with this, it will, I’m still in the same folder. Let’s also add the my block, that was, I added that before the flag, also specifying the name in here. This should, yeah, it’s creating the new block. It’s basically doing the same exact process then what we saw earlier, but while installing packages and while doing all of this, it is not pulling from these two, it is actually downloading the package from MPM and using that to scaffold it out, and I’m opening up the finder again just to go to the correct folder because it should show up here under the name my block in a minute. It’s already here, but it’s still pulling stuff down.
So, for you, it doesn’t really look, or for any of us, it doesn’t really look much different, but these files were not coming from the templates folder, they were actually pulled from MPM.
Greg Ziolkowski: Yeah, what could help is, just you can show change something inside your repository comment it, publish to MPM and just try the process again just to show that it’s coming from there. It shouldn’t be that hard to do it right?
Fabian Kägy: Yeah.
Greg Ziolkowski: But it also would be great to show the process for publishing to MPM. So one thing that you need to go to MPM.org and create an account there. It’s for free. Once you have that, you need to probably do MPM log in just to provide your credentials. Is there anything else required?
Fabian Kägy: I think when you, inside of the folder where you want to publish it, when you run MPM published, it will prompt you to log in to do everything that you need. So you can just open up the folder and then it will prompt you for everything to get you up and running.
Greg Ziolkowski: Yeah, you are right. Also, there is this MPM who I am comment, which allow you to check whether you are logged in or out.
Fabian Kägy: Cool. So I will just, to quickly have something here, add the comment at the top of the file saying I was here.
Greg Ziolkowski: Yeah. So what’s the URL? What’s the name of the package? Gutenberg.
Fabian Kägy: It’s Gutenberg ES Next example, template, correct. I’m just adding, I was here and then I’m running MPM version minor just to bump the version number up and then I’m running MPM publish. It will ask me for one time passwords. So just quickly grab that. That should be, that. Now it’s uploading into MPM and on the website you should be able to see that version number, well it was still 0.3.0, it should now be 0.4.0, and when I run the same exact command again, it will take a minute again and let’s hope that it’s not cached anywhere in between.
Greg Ziolkowski: Yeah, sometimes it takes a few minutes. Sometimes even a few hours. So, it depends.
Fabian Kägy: Let’s see. Under my block, I can already open that up and it’s already in there. So it already ruled the correct version. This is using the other version from MPM. This is pretty cool. It’s just downloading the external package like this. Cool. Did you share the link of the actual request for that so that people can try it?
Greg Ziolkowski: I was just finding, it looks like Birgit needs to do all the URL sharing because of some security reasons. Okay, I’ll find that. I’m really excited about that because as you can see, it’s quite easy to build your own template and also is that it’s maybe not so straightforward for testing, however, if you will do this trick, that you will use Create-Block and develop the template inside there and copy over there, that would be much simpler. Also, I believe that once you have some sort of packages, you could just install it inside your node modules folder and just edit it directly. There are some people that use that. There are even tools that allow that but I don’t know the names, so I won’t share them. And the PR from Fabian.
I think we will shortly wrap it up. I think we covered a lot today, and it’s really exciting to see the progress on your PR and so, let me check again on YouTube. Thank you, Birgit, for posting the URL for the MPM package. And there is another question from Jessica, nice. “Can you explain why you type in my block before the to name the folder instead of going into interactive mode?” Do you want to take that Fabian?
Fabian Kägy: I wasn’t sure whether the interactive modes left the template under or whether, the reasoning why I switched it up is because I wasn’t sure whether the interactive mode had the template wired up yet or not. So it was just the current state of the development.
Greg Ziolkowski: Yeah. Just to expand on that. By default, if you don’t provide any parameters or options, then it launches interactive mode. That asked you about all the values and you need to enter them. However, there is also a way to provide the name of the folder that you want to scaffold, which also becomes the name of the plugin and the name of the blog. This way, you don’t have to provide any values. It assumes that you are happy with the default. So this is also the way if someone is thinking that I have no idea what that means on the CLI, I just want to start away, that’s the best way to do it. Then, once you discover I would like to change this particular thing, then you, okay this is a description or let’s go and run that again and provide a different value.
Also, there are a few more options. Can you, Fabian, you are not sharing the screen. If you run, that’s complex because the way node works, by default you install your bracket as using MPM install in the name of the package. If you want to use a package that can be run from CLI right away, that means it has an executable file defined, then you can use this MPX shortcut. It’s something the same as you would write MPM east on my package and then do execute that binary. So it just combines it to one comment.
The third one is MPM in it. So this is on top of those two ideas and just a shortcut of installing locally with MPM install then running MPX with create prefix. So it’s just a nicer way. It also provides the intent that you are using that here. So, to continue on that, yes interactive mode should work with MPM test templates and without, I mean, general interactive mode and quick mode, they should work the same, regardless if you are using templates that are local or from MPM. There is no difference. I hope that clears a bit of the situation.
Okay. Are there any other questions? I see that Birgit, she is sharing more links. There is a bit of delay.
Birgit Pauli-Haack: Well, that was fabulous. I really like what you did there. Thank you so much. We are still entertaining some questions. So if you want to, I’m also sharing some more links that I shared at the beginning, but now that you all know what those links are, I’m sharing them again.
Greg Ziolkowski: Also, this PR from Fabian if someone wants to help to shape that and also play in the current state. We need definitely need to work more on the structure of the config file for the templates. So the one that Fabian shared, it’s an old one and based on that I applied some changes. So one of them is that you will be able to provide the folder name, where those template files including mustache will be located. So by doing that, you don’t need to specify all those largely. Some templates could provide 25, so it would counter-productive to list them all and so it just will scan the folder and find all of those.
We are also thinking about providing more general control over WordPress scripts so this is the tool that we are using behind the scenes to do the building, formatting of the files, linking. It’s growing. So, but also what Fabian mentioned is that some projects, they have their own workflows. They might be needing to use something else. So they could define dependencies and install them. Everything is still being discussed and improved.
Fabian Kägy: Very cool.
Birgit Pauli-Haack: Super cool, yes. All right. I think that concludes it. Is there anything else that you wanted the people to know?
Greg Ziolkowski: Just thank you, Birgit, for doing all the technical aspects. Because it was last minute. I don’t even figure out you are doing it live. The screen sharing, it looks like a lot of work. It’s hard to set up.
Birgit Pauli-Haack: Yeah, but I like those pick up live streams. So, cue me up, you stall, I only needed about 10 minutes to set it up.
Greg Ziolkowski: There’s one more question, so maybe, “What process should we follow when we want to contribute a template to avoid doubling up work and having people work on very similar block template?” So we share this, we share PR, so we should coordinate there. I don’t think there are other places where we can, discount that maybe in on WordPress Slack. It’s hard to tell. So definitely you can reach out to me on WordPress Slack and I can help to find a good place. But I believe that there’s discussion on next step for blog directories, very related to the work we are doing here. I know that Marcus on GitHub, he has some great ideas. He’s willing to use his own tutorial for creating blogs, just like a baseline so we provide the to port all those templates he has there. Also, this is discussing the issue I mentioned.
Birgit Pauli-Haack: All right. Go ahead, sorry.
Greg Ziolkowski: I mean, just, thank you everyone for watching and for the great questions and especially to Fabian for showing around in the code.
Birgit Pauli-Haack: All right. Great job everybody. Thank you. Bye-bye.
Greg Ziolkowski: Thank you, bye bye.
Fabian Kägy: Bye.
