Intro to Gutenberg Block Development
With WordPress moving more and more into the world of blocks, knowing how to build your own blocks has become valuable knowledge. However, if you are a plugin or theme developer, you might not be sure where to start. This workshop will serve as a guide to building your first block.
Don’t forget to check out the create a block tutorial in the WordPress Developer handbook for more information on how to create a block.
- How to set up a block enabled plugin/enabled your existing plugin to be block enabled
- How to create a simple block, and the basic elements of a block
- How to create a custom block, using existing WordPress components
- How to create your own custom block, by creating your own custom component
- What property of a block is used to store information about the state of a block, and why is it useful?
- Briefly describe what a custom Component is, and how you would create one?
If you have a look at the code editor version, you’ll see here it says from the front end. So this is what’s stored this code this comments with the workshop block stuff, and then the contents of the block with the code that’s final, this is what’s physically stored in the database. And then that’s what’s used to render on the front end. There are some people that don’t like this way of storing this data, but it has its pros and cons. So we need to understand those two differences. So this will be where we will do most of our work with creating the block as it displays in the editor. And then here this will probably be a simplified version of the same thing using the content that saved and then just displaying it on the front end. Okay, so now the next thing we want to do is I want to add a component so let’s talk about what components are first, components are sort of special pieces of code that you can use in a React would be in the in the Block Editor that allow you to do certain things without having to rewrite the code. Now obviously the editor has a whole bunch of components. So it has an image component. It has a rich text component, which is what a paragraph looks like. And these are all in different editor will have the rich text. You probably find there’ll be a media company ponents somewhere, which will have the image upload options, maybe media, utils, whatever. So it’s a good thing to get into all of this and kind of see how all these things work, we’re going to start with using the rich text component. This is the most common component, you might see when you’re editing a page or a post in WordPress, it basically is the paragraph tag, if you will. And we’re going to use the attributes. So first, let’s grab the code. And let’s see what it looks like. So I’m not going to take the register block type stuff out, I’m just going to take the edit and the Save functions, and I’m going to replace our edit and save functions. So here we go. Okay, so the first thing is you have this new is this thing called props, which we’ll talk about in a second. There’s an unchanged content function. And here’s the rich text component. So this rich text component, when it’s transpiled, turns it into some code, which generates the rich text block. And then this is the save, which then does all kinds of other fun things. So let’s save this, you’ll see that my, my bold step is already automatically run. And let’s see what happens when we refresh our post. So you’ll see that it’s failed. Okay, that’s cool, because that means something’s going wrong. So let’s have a look and see why. Here we go. uncaught in promise reference editor, richtig is not defined. If you don’t know why this is, this is my Firefox developer tools very handy to open up while you’re developing. And you can see what’s going on. The reason this is happening is because I haven’t imported rich text like I imported register block type, I need to import the rich text component. So let’s go up here. And here it is there. Let’s import this. pop it in the bold step will run automatically. Yes, that’s done. Let’s refresh that page. Okay, another block validation failed. Now what this means and you might see this when you’re developing is that I have changed the code of the block, which means now in the same function runs, it ran something completely different and it doesn’t have this information is stored in the database. So it’s saying, hey, hang on a second, I tried to validate the Save content, what you’re telling me to render now is totally different. I don’t know what to do, and it gives you the zero.
While I’m developing, I can ignore this because I know that it’s happening for this reason, but it’s good to understand what it’s doing. So now if we add an image, just clear out the console. Now if we add a new workshop block, here we go, it’s registering the rich text editor, I can tell because it’s got all of these cool rich text fields that I can change. And I can start putting some content in here and go, Hello, this is text. And I can do things like bolding and various other things. And this is all part of the rich text editor. So this is how you can use an existing component to build a custom block. So let’s save this. And let’s preview it. And Hello, this is some text. There we go. We’re all happy. Okay, so this is working great. This is doing what we need to do. Now. The other thing to understand is attributes. Now, in this instance, I don’t necessarily need to use the attribute because you’ll notice that I’m typing in the text there. And it’s saving the data. And now the reason it’s doing that is because over here, I’m saying set attributes on the content, and it’s basically just automatically pumping that in, but it’s a good idea to define your attributes as well.
So let’s take this over here. And we’ll just pop it in the category. So now I’m actually defining my attributes. And I’m saying this is the content attribute. And the selector is the paragraph tag of the rich text. And it will then store that data. Now where this becomes handy is if you wanted to store some additional data on the block. So let’s say for example, I wanted to store some kind of ID on the block. So I’m going to create a new attribute. And I’m going to call it ID. And just for the purposes of this, I’m going to make it a string. And I’m going to leave out source and selector because then it’ll just store it on the block. And I’ll show you how that works in a second. And then here we’re I’m saying set attributes. Let’s let’s talk about this for a second. So what this is doing is, there’s this concept in React called props, we basically you can pass all the properties into a method. So inside of props, I’ve got the attributes from the block, and inside attributes, I’ve got the content. I’ve also got a set attributes method, which is passed from I think register block type, and a class name method, which is passed through and if you have a look at the class name, it will be the name of the block transport. So what I can I do is I can update the set attributes, mythical here, function volume zero, and say update the ID, which is the new attribute that I just added. And call it something like, let’s say my luck. Now, that’s not going to be obvious what it’s doing right now. Actually, let’s do a tie, I’ll leave it at my block for now. So if you do that, and we’ve made sure that run is running, the build is running, that’s great. If we do that, and we hit the post, nothing’s really going to change. I’ve added the ID, nothing’s really changed, I’m going to add some more text, which will trigger the on change. And you’ll see that if we have a look at the code editor here, you’ll see it’s storing, there’s the ID, my block, okay? Now, where this becomes useful, is, let’s say on the front end, I wanted to render something different, I want to based on the my blog content, I’m going to go and grab some data somewhere else and whatever and then render that as part of this, I can then do something like this, or what I’m going to do now is I’m just going to go and I’m going to go cats concatenate the ID attributes on the front end only. Okay, so that’s bolts. And if I now exit the code editor, and save this, I should save it. Actually, I probably need to refresh because I don’t think the codes refreshed. Okay, that’s fine. I expected that to happen. Let’s just remove this block. And let’s add a new one. As my workshop block, some text, okay, let’s have a look at the code. Okay, there’s the ID. So that’s good. Let’s save that.
WordPress Code Instructor at Automattic, full-time sponsored member of the training team creating educational content for developers on Learn WordPress. Husband and father of two energetic boys.