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

3.2 Diving Deeper Into Attributes

Attributes are vital to our block; they allow our block's data to be saved to and restored from the database. In this lesson, you'll learn a bit more about attributes.

3.2 Diving Deeper Into Attributes

In the previous lesson, we implemented the inspector with our block, so that we can add extra settings and extra functionality to the block that doesn't necessarily need to be in the main editor of our block. And, it worked, we were able to choose the year that the guitar was manufactured, we were able to save that. And, whenever we looked at the resulting HTML, we saw what we expected to see. We were saving that in a data attribute and that value is being saved. So if we look for Gibson Les Paul, there it is the data year and we selected 2020, that's great. However, in the editor, whenever we refreshed it, we saw that we ran into that issue that there was some invalid content. And the reason is because of the attribute. We need to supply some extra information so that Gutenberg knows where to get that value. Now, that's kind of a little lie because we could actually make this work with a very simple change. However, I do want to dive into some more advanced attribute stuff. Because as you develop more blocks, and you start saving that in less traditional ways, you are going to need to specify some more information with your attributes. That's just the nature of it. So, when it comes to our attributes, we have a property called source. And there are many different sources that we can choose from. This basically is going to tell Gutenberg where the source of our value is. In our case, it is within an HTML attribute. So we are going to say that it is within an attribute. And because we have specified that we need to tell it where or what that attribute is, in this case, that is data year. But then we also need to specify where that attribute is. And we can do so by specifying a selector and that was the h3 element. So for the guitarYear attribute, this is gonna get a little confusing considering that where we are referring to the block attribute, and then we are referring to the HTML attribute. So, I'll use this terminology. For the guitarYear block attribute, we've said that it is a number that value is within an HTML attribute. And that attribute is data-year and it resides within an element that has an h3 tag. Now if there was a class, I mean, we could use whatever CSS selector that we needed to in order to retrieve the appropriate element. So if we had a particular class to look for, we could do that as well. So, this should be enough. So let's save this. Let's go back to the browser or to the editor, I should say, and let's refresh the page. Now since we have already saved the block content this should just pick right up and should work, we shouldn't see the error that it's not valid, but we still do. And the reason is very simple. The type that we specified is number which kind of makes sense because a year is a number. However, we are saving that as an HTML attribute and all HTML attributes are strings. So the type is a string. And in this particular case, we could get away with doing just this, setting the type to string is going to know where to pull in that guitarYear value and give us the appropriate year. So if we save this, now if we go back to the editor, let's do a refresh, we're going to see that this is going to work just fine. And it's going to load the appropriate value for our block whenever we select it, and over on the right-hand side 2020. So if we change it to 2019 and update, that is, of course saved that. So if we go back to the source code, let's just do a refresh we can see that the year is now 2019. If we refresh the editor, then that is going to work just fine. All right, so, let's look at this a slightly different way. Sometimes guitars need to be repaired and we want to denote that not just in the settings but we want something in the markup so that we can change the style of guitar that needs to be repaired. So we are going to add another setting here and we'll just copy the existing panel body, we will change its title to needs repair, and then we will have a checkbox. So we are going to use a select control, we will use what's called the checkboxControl. So we will go ahead and import that so that we can then use that in our settings. Now this is gonna be very similar to just everything else because well, there is a value but we don't use this value prop instead it's simply called checked. And we are gonna define a new attribute called needsRepair and when the value of this checkbox changes, we are going to change the value of needsRepair. So there we go, we can get rid of options. And, that's it as far as the editor is concerned, we do need to add that attribute. So let's add another attribute called needsRepair. This is going to be a type boolean and we're gonna leave it like that for now. And then let's hop on over to the save. And we're gonna add another attribute to this h3 element here and we'll just call it data-repair or something like that but, let's take it like this. If that attribute is present, then it's true. And then that would give us something that we could use in the CSS as far as a selector is concerned in order to style it however we needed to. But if it doesn't need repair, then it's not going to have that attribute at all. So we're gonna have to do a little bit of setup for that. So let's create a variable called attributes are attrs and this will be just an empty object. And if our attributes has needsRepair, if that is true then we are going to add the data-repair to that object, we will set it to true. So that inside of our h3 element, we will simply just spread those attributes out so that if we needed to add other attributes, then we could easily do that just right there. So with that done, let's go back to the editor. Let's refresh here and we are going to change our post here so that we will be able to see that change. So, we will go over to the inspector, let's check that, and we will update that. Let's go to the source code so that we can see that in place, and there it is, data repair is = to true. All right, so if we go back to the editor, let's refresh the page, then that should work fine. It should automatically load that in and we should see it checked, we do, so let's uncheck it. Let's update, let's check the source code once again, that attribute is not there. So let's go back to the editor, let's refresh the page. And, what do we get? Looks like everything works just fine. I have to admit, I expected something a little bit different. But, that works because in earlier versions of Gutenberg, you had to dive in and add all the extra stuff as far as the attributes are concerned. But the way that we would make this work is essentially the same thing in that we would add the source the attribute in the selector except that in this case, it would be data repair as opposed to data year. And in fact, we can go ahead and we can uncomment those out and we can see that it is still going to work just like it should. So Gutenberg has really gotten a lot smarter over the different versions, which is nice because when it came to working with attributes, that was one of the things that always bugged me at least but now they've made it so that it is almost flawless. I'm sure that you're gonna run into some issues where you might need to do that, but for the most part, that's working just fine. All right, so there we go. Now I will stress that the reason why this particular thing is working is because we either have the attribute data repair or we don't have it at all. And that is why we are able to use the type of boolean here. Now, if there was always a value for that attribute, if it was either true or false, then this would not work, because in that instance, the type would be string. So in most cases, if your block attributes value is from an HTML attribute, the type is going to be string. It can be boolean, but it's a slightly different scenario where the attribute is present then that value is true. If it is not present, then the value is false.

Back to the top