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.4 Storing Data With Attributes

We work with data inside our blocks using attributes. They're easy to define, and we'll start using them in this lesson.

2.4 Storing Data With Attributes

In the previous lesson, we started the implementing the editor side of our blog. We used the TextControl from the components library, we gave it a label and then we set the value in onChange. Now value and onChange are required. We have to have a value. We have to do something when that value changes. However, as it is currently implemented, nothing happens because we have to provide that functionality. Now the question then becomes, well, how do we do that? How do we update the value of this TextControl whenever the onChange event fires? Well, one thing that we might be tempted to do is something like this. We can have a variable called val and we will initialize that as an empty string. We will set the value to val. And then when onChange fires, we will say val = value. Well, let's give that a shot. So let's go to the editor. Let's do a refresh here and we will see if we have that functionality. And, well, we can see that it worked. But if we type, once again, we don't get anything. Well, the reason is really quite simple, we don't really need to work with local data here. We need data that is accessible to the component as a whole. Because remember that all we are working with right now is simply the Edit function. This is being imported into the actual component which is inside of index. So when it comes to working with data, what we essentially do is use what are called block attributes. Now, a block attribute is not an attribute that we use inside of markup. It's really nothing more than just JavaScript. So inside of index.js, whenever we call this register block type, now, there's all of these settings being set, the title, the description, category, icon. There's another option called attributes. This is an object and the properties are going to be the names of the values that we want to work with inside of our blog. So if we want this to be the name, we can have an attribute called guitarName. Now we need to provide some information about this attribute such as it's type, which in our case, is going to be a string. And there's some other pieces of information that we can provide. But for right now, this is what we're going to stick with. So then the question becomes, how do we access the attributes inside of our Edit function? Well, it's very simple. They are passed to that function. So we want access to the attributes. Now there's something else that we want to use as well, then it's called setAttributes. And we will use attributes in order to get the value of our guitarName. So we will simply say guitarName there, but then whenever the change event occurs, we want to set the new value for guitarName, which is where we use setAttributes. We pass in an object because we can set multiple attributes here, but we only have one. We're going to set the guitarName equal to the value that is being passed to this function. So we don't need this local variable anymore. And we are essentially binding the value of our guitarName attribute to this TextControl here. So now we can go back to the editor, let's do hard refresh here. So that we load everything straight from the server, and we should be able to start typing into it and we can see that that is changing. So, let's type in a name. We'll just call this Les Paul. And then let's click on Update. Now we can see that the post was updated, if we view the post, we aren't going to see really anything new because the Save method or the Save function is still the same thing. It is outputting this static information, and we, of course, want to change that. So let's go ahead and let's open up the Save file. And we want to pull in our attributes. We don't need to set any attributes here because we are saving data, we aren't setting data here. So we need access to our attributes, but now what we really want to output is the name of our guitar. So we'll have guitaName here. And if we save this, and we go back to the editor. Now of course, if we refresh what was already saved, that, of course, isn't going to update because we've already written to the database. But let's do another refresh on the editor here and we're going to change the name of our guitar. Now we can see that the block contains unexpected or invalid content. Now we've seen this before, and we know why we are seeing this. What was saved in the database doesn't match what we have inside of our block. So let's do this attempt block recovery. Thankfully, everything worked there, and let's change this. We have a Les Paul Studio, which is a cheaper version of Les Paul. So let's update this. If we go and look at the saved post, we see that text there. Now the styling is still the same and that's something that we can change. But the important thing is that we are now actually saving data from our blog. So if we refresh, we're going to see Les Paul Studio, it's going to be inside of the text box. Let's change that back to Les Paul just so that we can prove that everything is working here. This, of course, is going to save that into the database, which is going to change what we see in the browser. So as it stands right now, we have a working block. We are able to add some content to it. We're able to save that and we can see that Gutenberg is doing its thing. It's properly loading the content from the database into the editor so that we can edit it. And it's properly saving it. Now in the next lesson, we're going to add some more controls so that we can work with more data.

Back to the top