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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.5 Storing More Data

The more data we want to save and restore, the more attributes we need. We'll also briefly look at how to add CSS styling to our block.

2.5 Storing More Data

Now that we know how to save data, I want to save more of it, because we have more information that we want to catalog as far as our guitar is concerned. Of course we need the name, but we also need the manufacturer. We might also want to have a description box so that we can type a little bit of extra information that we might want to supply there. But before we start doing that, I want to address the styling here. Because as we start adding more things to our blog, well, we want things to make sense with everything else. And if we look at the paragraph, now this is center of the screen, so that there's a set width. There's probably some padding there as well, and I want our block to fit in with that. Now if you remember, it did originally, if we look at the saved content, our blocks content is right here. It's centered, there's probably padding, but there's also this blue background, and we had the same thing inside the editor. And what changed was that we didn't use this useBlockProps. Because if we look at the save, we're going to see the same thing, there's this useBlockProps.save. Now the primary purpose of this is to essentially denote that this element is the beginning of block, both inside of the editor, as well as the saved content. That's why we see .save here. So we can start by just taking the code that we commented out, and we can add that to our div element that is so far containing the rest of our blog. And if we save this and go to the editor, let's re refresh the page, we are going to then see that it fits in. But we have this background color that I don't know necessarily want us to have for that block. So we can easily change that by going to the style of our block. Now, you can see that we have two files here, we have editor.scss, then we also have style. And if we look at the comments, we can see the difference between this style.scss is for the styles that are applied to both the front of our sites. So that is what is saved in the database, as well as the editor. The editor.scss is only applied to the editor itself. So here we can see that there is this dotted red border around our block, and it's kind of difficult to see because of the blue background, but it is indeed there. But this blue background is also used both inside of the editor as well as saved content. So that is what we want to change, and we will change that inside of style.scss. And all we have to do is just take out the background color, and we're good to go there. So if we refresh both of these pages, we are going to see that background color go away. Now our style here is rather horrible, but we're going to leave that, because I don't want that styling there. Now that does mean that we are going to need to address the styling, but we already know where to do that, we just have to make that work. Now there's one other thing that we will talk about as far as styling is concerned, and that is our class name. This is the class name that is applied to our block. So any other type of styling that we want to apply to anything inside of the block, we need to use just normal CSS selectors. So that we address just the elements inside of our block, but there we go. Okay, so let's go to edit, and it's great that we have the guitar name but we also need the manufacturer. So let's copy our text control, and let's start putting these inside of their own div elements so that we have something to break them up on. Now of course, this also means that we need to have another attribute, one for the manufacturer. And I'm not gonna call this manufacturer, we're just gonna call it make, because that's a whole lot easier to type into say. So we need to go to our index page, and we need to add another attributes. We now have the guitar name, which we can probably just change to name, because I don't want to have guitar in front of everything. But I guess just for the sake of being absolutely clear as to what we are working with, we can go with guitar and then whatever attribute name that we want to use. So once again here, we are just creating another attribute, it's type is going to be string. And then we just need to reference that inside of both the edit and save methods. So this first field is going to be for the make, and I guess right here, we'll have the manufacturer, the one to put make there. But as far as the attribute is concerned, we will use guitarMake. We also want to set the guitarMake value when that changes. And let's change the label for the name, we'll just call that Name as well. So that is easy enough to do, let's go to our save file. Now this is where we need to start addressing how we want this information to be displayed. Because right now, it's just a p element, I think we should probably change that to a div. So let's go ahead and do that. And let's just use a couple of headings. In fact, really, let's just use one to where we will have both the guitarName, as well as the Make. And we'll just do it like this so that we are going to use the string interpolation syntax and we will simply include the make, followed by the name. And of course, we'll have a space between them. But that way, we can say, Gibson Les Paul, Fender Strat, things like that. And if we wanted to, we could also include the year, because the year does factor into things especially if you are a collector and if you want to sell something. So with that done, let's go to the editor. Let's refresh, we should see two fields now, one for the make one for the name of the guitar itself. However, we are going to see this unexpected or invalid content, and that makes sense. So the manufacturer in this case, it's going to be Gibson. The name is going to be Les Paul. We will save that post so that now, whenever we view this inside of the saved post, we can see Gibson Les Paul, that's great. And so then we can have a description box. So kind of the title is going to be the make and model, then we will have the description. And we will add the description in the next lesson.

Back to the top