Webinar #14
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 leverage JavaScript developer tools for WordPress plugin and 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
Timestamps:
00:00 Introduction
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
36:00 Q&A
Transcript
Introduction
01:12
Maciek
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.
01:40
Greg
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
02:25
Maciek
And my name is Maciek Palmowski. I work here at Buddy as a WordPress ambassador. And I'm also a regular webinar host. So before we go any further, let's see what we'll learn today. So, first of all, we will learn a bit on how to start with WordPress Block Development, then we will go to how to leverage all those cool JavaScript tools when it comes to block development. And in the end, we'll think a bit about how to automate everything and how to use body to in our CI CD pipelines. Before we'll go any deeper, if you have any questions, just use comments on LinkedIn, YouTube, or, or Facebook depends when you are watching us. And if you like our work, don't forget to subscribe to our YouTube channel, because you will be informed of any upcoming webinar and you'll have a chance to watch all the other webinars with it. So Greg, let's start with the most important question. What is Gutenberg? And why should developer developers care about about it and learning how to how to develop things for it?
What is Gutenberg
04:01
Greg
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.
06:32
Maciek
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
07:10
Greg
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
11:48
Maciek
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.
Block structure
12:09
Greg
Yes. So as you can see, now it was far faster because I had NPM packages cached locally. And so you know, it's like the project is created. And now let me switch maybe to the project that I started in particular just to explain all the ideas, the thing that Maciek mentioned about the project, so let me show is like, for every plot WordPress plugin, you need to have an entry point, which is a PHP file. And it has all those main metadata, which isn't that important today. But they aren't just explaining the concept. And the only thing like is registering the block type, which like, points to the folder when you can like look for the special files. And we are using clear in this in this project, a tool called WordPress script. And the thing is that does the dependency that instal that, and it exposes several scripts that you could see on the console, after, you know, like documentation sort of thing, after the scaffolding process finishes. And this is also the document and on NPM when you go to the WordPress, find WordPress kids package, and all the comments are explained in a very detailed way. You can also find that on the developers WordPress, org portal for the blog directory. And you know, like the build, of course, it builds all the things and so like what happens in the src folder, we have our source file, and they get, you know, like, you know, for the production, you need to minify files, and so on. So to hear that, you know, it doesn't make any sense when you are browsing that but it's like perfect for the user because they have the minimal version. But in the in here we have, you know, human readable code that we all we use when we work with JavaScript. And it's quite popular button to import also CSS Friday doesn't mean that it is included inside JavaScript because we use behind the scenes tools like Webpack we just like orchestrate or just trades everything and put them into Star style files. And yeah, in general, like you know, there is some way which register blogs and shows the references to other files. And what's important here is blog json file which was generated based on the input from the field so you can see like the title buddy webinar, this is my nickname I used. So in here this is the Then nicknames are used. And what else? This icon and text that was also the thing that were provided by default, just but you could change that, or the text domain, which is usually the same name as the project name or press space. And yeah, enough talking about code. And
15:21
Maciek
let's, let's see if it works, because it's, it looks nice. It looks nice. That's true. But
15:28
Greg
before that, let me show you a few tricks because I have visuals to the code. And I have some nice integration. So here we have prettier tool that you know, like, just a way to, like, you need to have this file. So the Visual Studio code could find your specific project, Kung Fu figuration, for code for code formatting. And also, we have ies link, which is like the same, but it's linking to your JavaScript code. So it helps you to find some box. And now let's go to Edit JS files. And let's try to break some and see, for instance, let's write something like that, in general, it's like, you should work but something goes wrong, definitely, you could see a change. Because if, if I go back, this is prettier integration. So what it does it just format your code according to the styling that is provided in this prettier, J. S file. So even if I go here, and like, start doing something strange, like this, you know, like, it just ensures that you always can the same, the same way of styling code. So it's great when you have a team of developers, designers, and so on. So you always have the same look and feel for the code. And
17:04
Maciek
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.
17:29
Greg
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.
18:32
Maciek
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.
18:45
Greg
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?
18:59
Maciek
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
19:46
Greg
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,
21:30
Maciek
just want to address control.
21:32
Greg
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?
21:55
Maciek
No, I think that that the show Oh, back. Yeah.
22:00
Greg
One thing I want to show how
22:02
Maciek
it is on the front of this,
22:05
Greg
how it looked before all the edits? Let's update. And let's refresh, you'll see like,
22:11
Maciek
it looks exactly the same, right? Exactly.
22:15
Greg
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
22:28
Maciek
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.
24:00
Greg
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
24:17
Maciek
to get up to whatever git repository you like. But to be honest, I'm a big GitHub fan myself. So I created such a plugin. It's called Buddy block. And let's see what will happen. It's importing. And as you see, we already have two pipelines created out of the box. One is called build and release. And it will build and release our plugin, it will create a zip file inside of our Buddy file system. And the second one is called lint. So this is something for those developers who didn't even start installing prettier or any JavaScript sniffer. So if they will try to push some code with. And their code was, let's call it a bit lower quality than for sure sure this lint will run and the point some errors out. So let's let's break something, right, because we as developers are constantly breaking stuff. So we are going to create a pull request, because this length pipeline will run every time we will create a new pipe or a new branch or change something at in any branch. So let's go into the added js file. Let's click it. Okay, the good news is that the GitHub didn't broke, because lately, I've had some had some issues. And once when we were doing dry run, in the middle of it, it just broke. So let's have variable x and assign the string called test to it. And let's create a new
26:10
Greg
branch. So just to explain, I suppose suppose to show that the link which should show two errors, one of them is that the variable is not used in in the context of the file, so you it's a thing for the developer that they can remove that variable. And the other one is that and the other one is that var as a keyword is not the preferred one, because JavaScript cash now.
26:43
Maciek
Yeah, yeah. And now, as you see, we got that all texts have failed, which is true, because we broke it on purpose,
26:55
Greg
the same error I had, because that
26:58
Maciek
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.
27:25
Greg
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.
27:42
Maciek
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
28:08
Greg
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.
28:41
Maciek
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
29:03
Greg
and the other one is Netflix. Yeah, but
29:07
Maciek
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,
29:56
Greg
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.
30:13
Maciek
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.
31:26
Greg
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.
Q&A
33:24
Maciek
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?
36:11
Greg
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
38:29
Maciek
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.
38:38
Greg
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.
39:49
Maciek
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?
42:00
Greg
Oh, there's luck for that already.
42:02
Maciek
Oh, yeah. So yeah, so yeah, sky's the limit, right?
42:06
Greg
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.
43:12
Maciek
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?
43:24
Greg
From top to bottom? So I you know, like, depends how you like to approach things. If you like to learn about everything first, or like me, go and just, you know, try like this couple this blog and try play with this. So edit some lines of code, see, see what it eats you. At some point, you definitely need to have JavaScript skills, I wouldn't say that needs to be you need to be an expert. But as soon as you reach in there also on the veto, you need to know, react to do some interactivity like work with state or the blog, if you want to, you know, change some interactions, or I like this example, when you could do the input, there is a component for that, which you need to find in the documentation. So one way that is one thing that is definitely useful for the Create Blog or the WordPress scripts, which are the tools we presented, is they're both hosted on NPM in the biggest package repository on the world by and when you find them, they have an extensive documentation how they work, but it's just for development. But for the like using those tools, but there is also developer.wordpress.org/block editor block hype Then editor. And when you, when you visit the page, it has a lot of materials, it might be overwhelming, super using a surge is a good thing. There's also a tutorial that is like covering more or less what we presented and just walks you step by step for building very similar blog that we presented with magic that, you know, like, integrated with the editor. So yeah, I think they start tutorial would be the first step I would go to we'll share the links on YouTube, probably magic, I don't know how to do it usually because I'm talking now and like,
45:41
Maciek
because because there are so many resources. I mean, I think it will be also a good way to first of all, the way how you want to develop in the Gutenberg work may, may differ because if you are more interested in, for example, full site editing. Caroline has a great website on full site editing. Also, Bill Gates, Gutenberg hub is also a great resource for finding anything that is happening in the Gutenberg world. And for sure, you will find also some some tutorials. And cause this this guy who's who's having those great Twitch streams about Gutenberg. Ryan? Ryan. Yes, Ryan Welter has has those really magnificent streams on Twitch. About Gutenberg, you can also learn a lot so. But still, the first thing, learn JavaScript deeply this is this is the thing, because
46:51
Greg
like, I think it's it's good to learn JavaScript, again, don't need to have a very deep knowledge because some of the things will just pop up as you go. And you can like, there's so many great documentation for JavaScript, like one of them, Mozilla has the portal MDN, that, you know, just have, like, everything covered for HTML, even the versions, like the versions of browsers that support given features. So it's very extensive. There are also great courses for learning JavaScript, the same for React and for anything, but I wouldn't start from that I would start just like, do something in there. Oh, yes, that's true. Feel the vibe, and just like, you know, break something, and then learn out of that. Because this is what always was the most exciting about WordPress that you could like, start very quickly to his development, and see how it goes, of course, the tools that that we use these days, they help. But they also create this, like you have this barrier of entry and understand that, but that's why we are doing we're doing this webinar, why we have all those tutorials just to ease out that and also like this template is also right, because you get like a project, professional project, like which teams can use and you get it like, you know, in five minutes, maybe depends how long the NPM packages.
48:26
Maciek
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
49:37
Greg
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.
50:44
Maciek
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.
51:21
Greg
Thank you. Bye.
Deepen your knowledge
Different approaches to WordPress Unit Tests with Buddy
Check out our guideYAML variables
Check out our docs