7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Using Built-in Components

In this lesson, you'll learn how to use the built-in components that ship with Gutenberg. These are used for creating common UI elements that are often shared between screens.

Related Links

2.3 Using Built-in Components

In the previous lesson, we very briefly toured the code of our block and why you learned a few things. Probably the most important is that, there are two pieces, there is what we see in the editor. There's also what is saved to the database. So we get to control both of those scenarios. So we are going to start focusing on the editor in this lesson because, but we kind of need to edit our content, which right now all we are doing is outputting some text. Now, this is using the internationalization library. This is used so that whatever text we pass to that can be translated. And we kind of need to do that. So all of our labels, anything that is going to be static in the user interface will need to be passed to this internationalization library. It's very simple to use, we simply pass two things. The first is the text that we want to use, the second is what's called the text domain, which in our case is always going to be guitar- entry, because this is the name of our plugin. And we can see that inside of guitar-entry.php, because a Gutenberg block is nothing more than just a WordPress plugin. It's a complex WordPress plugin but, it is still a plugin. And right here on line nine we can see that the text domain is guitar-entry. So every time we use the internationalization library which is a mouthful to say, that second argument needs to be guitar-entry. Okay, so with that out of the way, let's comment this out. And we of course wanna be able to edit content. So, in my mind, the very first thing I think of when it comes to editing content is using some kind of form control like an input element. So let's do this. We'll have a div element. That is going to contain an input element. We don't need a value or anything like that right now. And let's just save this. Let's go to the editor and let's refresh the page. We are going to see a text box that we can start typing into and we aren't going to have any issues, see, there we go. So we can build our own components to use within this user interface. However, there are a ton of components that are already built and they are available to us through WordPress. And we're going to start looking at some of them. So, the best place in my opinion to go is GitHub. Because all of the source code for all of the components, all of the blocks is open source. It's right inside of GitHub. So if we do a search for GitHub, Gutenberg block, not block library. Let's do components and we are going to see. This right here, this first hit components-GitHub. So if we look at this, of course takes us to the components folder inside of Gutenberg and packages. If we go into source, we're going to see a lot of directories here. Every one of these directories is a component that we can use inside of our own blocks. And as you can see, there's a lot here. What I want to use is this text-control. If we dive into here, we get the documentation. Now, this documentation is also available through the WordPress website. However, I'd like to come to GitHub because I get the same information here. But I also get the code. So, if there's anything that I'm curious about, as far as the code is concerned, it's all right here for me as well. So, here we can see just the basic documentation of the text control, the anatomy, we can see that there's a label. There's also a text input. We also get some styling guidance as well, do this as opposed to not doing that. And then we get into the usage. We get example here, we also get the documentation on the props that this component exposes. So there is a label, it is not required. There's all of these other props that we can use, but there are two that are required onChange as we can see here it is required and then value, that is required as well. So let's use this text control inside of our block. The first thing we need to do is import[textcontrol]. And this is from @wordpress/components. Now, there are many different libraries. This is the component library. There's also a block editor library that we will also use and they can be a little confusing. So what I typically do is just look at two things, Gutenberg and then components. So anything that is inside of the component library is going to be gutenberg/packages/components. Anything that is inside of the block-editor library is going to be Gutenberg/packages/block-editor. That is important because when it comes to importing these things, it follows the same pattern. So let's get back to components there. And inside of our code, we are going to use this instead of the input element. So let's go ahead and let's have textcontrol, now we could set that label property if we wanted to. So let's go ahead and do that. We need to use the internationalization library and this is going to be the Guitar Name. And then of course, we need to specify. The guitar-entry text domain, so we will have a label. We also need a value which for right now we're just going to hard code as Guitar Name. And then we also need the onChange event. So we will add that. Once again we're just going to have something here. So that we meet the requirement, and this is going to get the value, and we'll just return the value there. So let's save this. Let's go back to the editor and let's refresh the page and we will see our new control here or our new block. We'll scroll on down. And there we go. We have Guitar Name, that is the label there. If we click on the label that of course should focus the input element. But as I type, nothing happens. Well, there's a very good reason as to why the value and the onChange props are required. Because we have to control the input of this text control, the value that we see inside of the textbox is controlled by the value prop. But of course we need to change the value prop with the onChange event. So then the question becomes, well, how do we do that? Well, the answers kind of easy. We need to be able to access and work with the data that our blog is going to be working with. And we do so using what's called attributes and we will start talking about that in the next lesson.

Back to the top