March 23rd, 2022
Length: 52 min
How to automate Gutenberg block development in WP projects
Learn how to automate block development with Buddy to release more error-proof features in a shorter time and elevate your WordPress projects to a higher level.
Who is this webinar for:
- WordPress agencies and developers looking to optimize their WordPress development workflow
- Business owners interested in introducing DevOps to their company with as little hassle as possible
- Developers with a knack for new technologies and QoL improvements (work smarter, not harder)
What you're going to learn:
- How to start WordPress block development
- How to automate your development workflow to maximize confidence in the codebase and monitor its health
- How to configure a pipeline in Buddy to automate the development process
02:46 What we’re going to learn
03:58 What is Gutenberg
07:50 How to build a custom block
10:07 Using a create-block template
12:36 Block structure
19:56 How does it work?
23:12 Automating the workflow with Buddy
Hello everyone, welcome to today's webinar. Today we are going to talk about how to automate Gutenberg Block Development in WordPress project. That's why I decided to invite the person who is much more. Who is much more smarter than me when it comes to Gutenberg development. It's Greg Ziółkowski. With me, Greg, tell us a few words about yourself.
Hello, so my name is Grzegorz Ziółkowski. I live in Poland like Maciek. So that's why our names are a little bit problematic to pronounce. I work at automatic and my company is called Source my time to spend all of that contributing to WordPress Core. And I started contributing to WordPress and the Gutenberg Project filed almost five years ago. So I, I have a little bit of experience with the development. Also, this is my favourite area of this whole project. So I'm really glad to be here and talking about this topic.
What we're going to learn
What is Gutenberg
Yeah, so WordPress introduced it like three or three years ago, I knew anything paradigm that is based on blocks blocks is you can think about them as a small ops. You see on the screen, the page has been created using this concept. So you can think of the blog as a unit that is interactive can be edited and has the same representation or article or presentation on the front end. So in this case, II as you can see on the right side you someone is editing a header. And you can like pinpoint to any parts of that log. This is site logo so you know this type of paragraph. And it's a great way for users to you know, narrow down the experience so they can think only about isolated parts. But it's also great thing for developers because WordPress by default is extensible, which means you can build your own blocks, which extends the extension And then integrate nicely. You can think about all that like, like a set of Lego blocks. So you know, you can compose them, you can create, like, there is this concept of patterns in here, which allows you to insert a predefined set of blocks that user only needs to modify. So it's like, you know, I said, like, combination of several projects that allow gives users the power to edit full site, without needing to call an agency, a developer, or designer, they have like a gallery of patterns that they can add, they can be provided with the theme that the, or you know, like a design that you get with the site. But you can also go to the WordPress, Block Pattern directory, and get one of those patterns you see now, and copy it to your website, which is like, you know, from it's mind blowing, like, so advanced things that you get for free. And, you know, like, it's something that you can modify yourself, and also export that as your own partner, or save in the database as a usable block. So that means you have this modified version, and you can just easily share that between different pages, while you know, user experience.
Yes, that is that is true. So we can say that, thanks to Gutenberg, we won't have to instal any other page builder. And we won't have to worry about being locked in, in some plugin, because thanks to Gutenberg, we also have as you mentioned, we can move our code from from WordPress to WordPress, and it will work just like this. So this is something really great. And Greg, tell me how we can create blocks, because there are quite quite a few ways there isn't just one, one and only way to do so.
How to build a custom block
Yeah, so I already mentioned some of those ways. So let me highlight them. So one thing that is, whenever you add is your website, and you have some like design, but you find them online using, you can even copy that, like patterns, you can copy because it's the HTML code after all. And so you can modify that. And you can just save that and share it between your other website if you are working for several clients. So that's one way or the other way is just to build a custom blog. So for instance, you want to have on the contact page, you need to show a map with the location for the business. And you won't find this type of blogs, you know, in vanilla instal of WordPress, but you can create the, the, your own. So, WordPress provides a set of development tools that help with that. So you know, like, instead of going through the documentation, which is like, you know, it's, it's fine when you know what you're doing, but when you are exploring, like, great to have tools that help you. So this stuff, the only command you need to run and you just set up your project with all the code for the WordPress plugin, which is a way to create a blog or set out multiple blocks in our plugin. That's a general way how you extend the functionality onto WordPress. And so when you run that, command, it instals the script and just start the process. So it creates a folder creates a blog json file, which is like a schema for how the blog should look like. It creates a package json which is like if someone is familiar with Node js development, it's a way to provide details what other data bases and provide the list of scripts that you can run. And this WordPress script package that you can see right now that's being installed is another tool that integrates everything and it provides a set of options like it provides you Yeah, so scripts provides you a ways to run those commands that you see now on the screen because the project is already scaffolded which means that we have a live demo folder and inside you will have npm start that start the build development build does have something for production there is code for my deep linking. And there is more but it's you know, you know it's in here, it's just highlighting the most important one But what we wanted to show you today is something more advanced because we we paired with magic. And we created a special template that integrates with this create block tool that provides scaffold to project projects that integrates with Bobby. And magic will later show you what fantastic things you can do with that. But for now, let me present because the first version for scarfone Wasn't interactive. So, you know, like, for the demo purposes is great, but you want to have control over what you're creating, because you probably want to create different things. So this goes through the whole process, ask you several questions to help you modify the details. So for the blog, you need to have some type of identification. So it provides some defaults, and that is Macik. Responsible for Dan to just type that in the template. But you can change that if you don't like GutenBuddy, you can do something else. So the internal namespace is something like you know, like, name of your company, or like I'm using G that IO R, which is my nickname that they use on GitHub, Twitter, and so on. And so you know, you can change the display title for your blog, that then you will be using to find discover user really used that to discover the blog. And there's a short description, there's a lot of like icon, you know, some visuals, a category that you can assign that. And there's more also the for the WordPress plug in, you can, you know, change a lot of things which we don't care about today. But you know,
Using a create-block template
of course, what's important, the moment when we create block, it also creates a plugin, which consists of this block. So this is also also the thing that if you are starting your adventure with using create block, you don't have to worry about creating a plugin that will instal this block. It's everything back in. In one.
let's, let's see if it works, because it's, it looks nice. It looks nice. That's true. But
that was the only problem is you have to have prettier configured in your in your Ida, which, which isn't something I mean, the developer can not configure it for some way. So that's why that's why the CI CD is also handy in the lighters in the later part because there's no escape from it.
Yeah, that's true. And also you can around the same command. And let me just ensure that I'm in the proper folder. Yes. So you can also do NPM run format from the project. And we just ran the same magic, you as you could see, like, all the files get got formatted. It's hard to show now that it was because obviously, whenever I change something in here, it will format and maybe I would have to do something like use Vim and break something this way. So if I go up, you know, you see it changed, and now it's fixed. And the other tools that we want to present is linting. So no, it's your own name. Let me check quickly.
It was lint that cleans JS. Yeah. Yeah. So I think we should add also also lint command which which will run both lint style and lint JS.
Yeah, something went wrong. I don't know. But this magic has everything covered in his example. So no worries, you will see see soon how it works in action. It's a live demo. So it wasn't before like magic. You saw it?
Yes. I mean, this is a Yeah, but this this shows how lint works because it checks if the code is correct. And probably at some point during configuration, or when you save something, something just changed and no lint found the problem which is which is natural, because on the other hand, this is NPM everything changes from minute to minute and if something worked five minutes ago, after some update. So this is this is the sad part about the NPM ecosystem. But the good thing I want to tell you that we will have some more NPM jokes coming soon, so don't worry.
How does it work
Yeah, so getting back so the other thing is that usually really neat is a building, and I have this. Let's show now that in the editor so just to explain what's happened. So I have this Buddy webinar plugin installed. And it was activated before just to so I could show you how it works like, and in here. So this is the WordPress block editor. And this is the inserter. And here I can look for the blog. So this one we created, it's called Buddy webinar. And it looks like like, the preview looks like this, when I insert that, you can see I got an input field that allows you to write something, let's do a plug for my company automatic. And, you know, it's like, you can type something you can do different things like more of this blog, you could we could like group that, which means that it's now you know, you can do some nice things like, you know, add some padding, what else you can do some different background colour, you know, it's like those type of things. So it integrates nicely with other blocks. But you know, at the same time, it gives you some options here, you can also drag and drop that in a different way. So, you know, like, you got a lot of things for free, because it's just fits greatly. And it wasn't that much code, like if we go back to the editor, so edit, which is responsible for for that. And you know,
just want to address control.
Yeah, I mean, it's like, the at high is a huge one. But I'm just presenting like a very, very long thing. Already is is so much powerful. And yeah, that I think that that's, that's nice. Well, did we want to cover something here? For so long?
No, I think that that the show Oh, back. Yeah.
One thing I want to show how
it is on the front of this,
how it looked before all the edits? Let's update. And let's refresh, you'll see like,
it looks exactly the same, right? Exactly.
Yeah, yeah, I'm just, I could just move it back to show you how it could look better. Because that was the original thing before I started tweaking everything to show that.
Automating the workflow with Buddy
Yeah, this is this, this is the example of why we, as developers shouldn't have access to any styling, or anything that is connected with how website looks, because let's be honest, the whole internet will be ugly. That is, so as you already as you already mentioned. Now it's time to show some magic that is connected with with Buddy. So now this is now it's my turn to take over distribute. So as you saw when Greg was creating his his blog, he used a template called Buddy WP web blog directory template, quite a long name, but but I think it's quite descriptive. And so thanks to this template, we will be able not only to create block, but this template has one magical thing, this buddy.yaml file, this means that the moment when we will create plugin using using this template, and we will connect it with Buddy. We will already get some pipelines out of the box with and we want me to configure anything. So let's let's do it.
This is the only requirement is that what I showed before is that you create a project locally, you'd still need to create your GitHub, Git repository and send that to GitHub. Yeah, I think that's good, how
Yeah, yeah. And now, as you see, we got that all texts have failed, which is true, because we broke it on purpose,
the same error I had, because that
led to see, so let's check out in the rounds, what happened. And we see in the, in the log that error, unexpected var use let, or const instead, and error x is assigned a value, but never used. So this were the things that you mentioned that that should appear in your case that but for some reason.
Also, if you can show there are messages, there is also a hint, because those some of those error are fixable, which means that you can run this command and to fix the issue about using var and we replied that Wiscon.
Exactly, yeah. And another thing. So because this fix is oh, I mean, this error is only on this Palmach patch, number one, but the master branch, because the built in release is connected with the master branch should work correctly. So let's try to create a zip file of our plugin, right? So
explain. Yeah, because I didn't show that because that was easier for this. But to explain, one of ways to installing a WordPress plugin is by uploading a zip file with all the files required for the plugin and magic is now creating this type of this type of zip file using an NPM run plugin zip command that is also included with corporate scripts that is installed in the project.
So the good news is that it went quite quickly. I mean, we found that will take a bit longer because we know that NPM takes time to load and especially for the first time that way, we had a few jokes about NPM downloading, like half of the internet and stuff like this, but
and the other one is Netflix. Yeah, but
but this time everything went went quite quickly because buddy really tried to cache as many things as possible in the background. So for instance, it only took like half a minute. And as we can see it's done by the webinar block zip is ready. So if you will go to your file system, you can see see this zip file, you can download it you can and you can instal it or or you can start editing your pipelines in create something more so for example, the moment when the when the zip file is released, you want to upload it to some website or or whatever you all it's really up to you now, like the sky is the limit as this Yeah,
I think if you have WP CLI which is another tool that It's helpful for people that use WordPress, you could just, you know, butter, like, bundle that together and use this URL with the zip file and just that plugin from the command line.
Or, I mean, we did start to think, sometime ago with Andy Fagan, you can connect, get updater to use get updated for updating, so you just create a GitHub release, that will upload the new release version, the new release version into GitHub, and after this, all the websites that will be using it and having get updated installed, would see that there is a new version, and you could just update it. So like I said, sky's the limit, it's really up to you from from from this point, what you will do. So, I hope that we will continue to develop more and more about this, this template for, for creating blocks. So if you have some ideas, how we can change it, what options can we add, then we are we are really, really open to, to do it. Or of course, if you want to start your Gutenberg adventure, and just create a pull request, this is this is this is a perfect way to start your adventure with, with with open source.
So I definitely have some ideas how you can improve that because I know how that commands. So one things we didn't mention, you know, just to, like not cover too many examples to distract from for them main topic, which is to automate everything, to have this instant feedback about the quality of code. So definitely unit tests and end to end tests is one of the examples how that could improve. So there is also a command that runs tests. It uses Jas, behind the scenes, which is a testing framework. So it's as easy as creating a Father and with dot test dot j s or dot yes dot are inside the test folder. And you just that Take That around that integrate the same way, how linting is integrated with the with the Buddy pipeline, and you have verification, every time someone comes. The other thing is end to end test, which is more more complex, because you would you would need a test website to run that. But end to end tests, as as of today, they use the puppeteer. framework that is just a nice wrapper on the Google Developer Tools. And it just like orchestrates all the tests, so it just, it's has even interactive mode for development, when you can just see all the clicks and interactions typing in the browser. Having collide, and that's, that's so powerful when you have more complex applications, and you can just, you know, code all the most important flows and ensure that if you build a blog, that it's all insert correctly, you can edit that with all the options you build, and so on.
Okay, so I think so everyone, if someone like, is interested in doing a pull request for something like this, Greg just gave you a lot of examples. And I can tell you that creating end to end test on body will be it will be possible, it's quite easy to connect such such I think we have sandboxes, or maybe services, there are many ways we can do it. So really, this is a really perfect adventure to start the perfect way to start your adventure with open source. So I think that we covered everything, cried Greg, we we showed how, first of all, what is Gutenberg, just to just to make sure that everyone was on the same page, then we showed how to create a new block and how simple it can be because it's it's just one command. And on the other hand, we showed that there is this template option which gives you access to like lots lots and lots of power because you can create your your basic template based on which you will create more No more blocks that you want with some additional tasks or other functionality. And I think that of course in the end we showed how to connect everything with with Buddy so before we go into the, into the q&a section. If you still have some questions, there is the there is still time to ask them you're using the commands. And we at the start of the of this webinar, we launched a poll on YouTube. And we asked, Are you building custom blocks? And? And 71% of you said, Yes, we are. So that's 39. Yeah, so, so, but no, it's a question. Are those 29? Just using patterns? And they are just collecting everything that is already built in? Or RG? Or are they just using the core box? So we we don't know. But maybe, maybe someone will tell us in the comments. So okay, from from what I see, at this moment, I have only one question. And this is a really a great question for you, is there a chance of earning a living? If I dive deep into Gutenberg Block Development?
Definitely there is. I'm a good example of that. So you know, like, I work full time on Gutenberg, which is the block editor. But that's, that's, you know, that's a joke, of course. I think that that's a good opportunity for the future. Because, as WordPress, Ignite majors, in general, that blog concept is also popular in other areas in the industry. And everyone's thinking in the same paradigm speakers is just so good for users, because they can, you know, like focus on one thing at a time when they're using this blog. So it's, I think it's universal in general, similar, like, design patterns is also for designers way of thinking about everything these days. And I believe personally, that block patterns are powerful, and they allow to build great designs. However, the challenge is that we as we have so many, we have so many ideas for websites, and they need a lot of interactivity like even build a building, or store, it's like, there's so many things you need, like cart, checkout, you know, like, and all that is, you cannot do that we started blogs that just presented that you just type, you need to connections with data by Sue, you need to finish to create some abstractions that allow you to connect with the server and interact with that. So I think the s because the block teams is a new concept, their release was this January. So it's something that is still getting up to speed in the WordPress community. So I think the need for custom blocks will be growing. There is also a blog directory that currently has over 100 blogs at the moment, which extend the door. And you know, there are also plugins, some of them very successful, that
some of them are premium, then some of them are also important. So if you want to earn money, yes, there is money in this.
Yes. And yeah. And also, we read the toll I presented Create Blog, we are working on suffer support for multiple blogs. So that that would allow you to create this type of plugins that provide a certain community of blogs, like imagine you have a total block that would need a parent look like like a rapper, that orchestrates everything, and to do item blocks. So there is this concept of, you know, a relation between blocks. And so for complex things like to drop is, it's not something you can easily do is like you need to have some awareness of the state that those blocks had. So so the to do list knows about the items and their states like checked for you would like to remove that. So I think there's a lot of great opportunities for developers. It's at the moment it's most of the work is focused on the design aspects. Because, you know, it's where it shines at the moment. But I think the future we need more interactivity.
Yeah, I think that interactivity and on the other hand, because the thing that I personally love about Gutenberg and hate at the same time is the thing that really the sky's the limit. You can, you can create everything, you can either create such a simple block as we did. Or you can create a winner player or a piano keyboard, they there are really blocks for this, you can see there are Winamp, and piano, keyboard blocks, and they are working. And the problem is that, with all those with all this freedom, at some point, we will see some problems when it comes to user experience, we will have to think about making everything work in the same way. So so so. So we won't feel the difference between different block packs or something when, for example, in one, when you want to upload an image, you will have to press a button in the sidebar and the second one, you will have to drag and drop it. So for sure there is a long way when it comes to Gutenberg, so jumping on this on this train, it can be a really great decision. And not only when it comes just to how WordPress will grow, but also but also money wise because for sure, Gutenberg will start taking over more and more page builder market and probably at some point that more and more money will go into into Gutenberg because people will be buying premium plugins, premium block packs or whatever the future will bring. Because we are in the middle of the second and third phase of Gutenberg. Right. And who knows what will what will happen in the future? I mean, I won't be surprised if at some point we'll see. I don't know, virtual reality Gutenberg or something?
Oh, there's luck for that already.
Oh, yeah. So yeah, so yeah, sky's the limit, right?
Yeah, definitely. And also, I personally think that it's really fun to explore, like how to integrate this into like, very well established patterns on website like this. This weekend, I participated in the cloud, first hackaton. And we created a plugin that contains seven or eight interactive laws like accordion, carousel, gallery, lightbox, and the sidebar, that when you click on the button, just like there's a flyout sidebar. So you know, it's like, if you have libraries that do that, you can easily integrate them. And it is so much fun to see the results. Often an user, the only thing they need to do is just pick this, this block, you could have created spend, spend some time on it. And you just see, by using the concept of those inner blocks that you can inject inside they can like build so amazing. Websites that, you know, that's very much what I love about that.
And we have one more question from from wallet. My question is, would you consider going deeper into Block Development? Or which resources would you recommend to learn from top to bottom?
Yeah. Okay, so I think we got everything covered. So the last thing I want to mention is, in two weeks, we will have another webinar about WordPress, this time, we will have Kevin fatness and then Bolden from bolt from Ellie and we will talk how to automate continuous integration checks for pull requests. So oh, so in general, we will talk a lot about testing WordPress plugins and themes from from very different points of view. So this this will be something really, really interesting. Also, remember to join our buddy CI CD group on meetup you will be informed about what is happening when it comes to new events. And the last thing is, subscribe to our YouTube channels. If you like our work, you will also have a great chance to watch other webinars and other videos we created about continuous integration and continuous deployment or development. So
anyone? Yes, you are inviting everyone. Also, their WordPress project is open source and we welcome everyone to contribute. So one way of finding out is go to make.wordpress.org/core if you want to contribute to core and see or just you know, be around and know what's What's happening in WordPress world. The other thing is on GitHub, there is WordPress slash Gutenberg is the project for the block editor, the when the active development happen, and you can also go there and like, try the latest version, like, try to build it. That's also one way of learn how the blocks in the core are developed and learn about the workflows. Also, you can check like the very complex thing like CI integration that is based on GitHub actions that's there. This is also great way for some, you know, I finding some ideas how you can set up your project and take it to the next level.
Exactly, yes, I also invite everyone to the WordPress project, because it's really great. It's just great. I mean, I'm also a core contributor, and I really like to spend some time just helping others. It's a really great feeling, and a great way to learn something new. So, with this, I want to thank you all Thank you, Greg, for for for help helping explain how to create block works on the Gutenberg case. And see you in two weeks everyone. Bye.
Thank you. Bye.