2.7 Updating the Look and Feel
Not every built-in component provides functionality; some allow us to present a better UI. In this lesson, we'll use the Card component to provide a better experience in the editor. We'll also adjust its CSS.
1.Introduction1 lesson, 01:48
2.Block Fundamentals7 lessons, 54:05
3.Adding Features2 lessons, 19:37
4.Conclusion1 lesson, 00:57
2.7 Updating the Look and Feel
In this lesson, we're going to focus on the look and feel of our block and primarily in the editor. Because when it comes to saving content, well, there's really not a whole lot of stuff that we can do well. There's a whole lot of stuff but nothing that's really worth spending time over, because we can't use any components from the component library. We definitely can't use anything from the block editor library. So what we see whenever we save our content is really just normal react stuff, really, I mean. So, in this case, we're gonna close save and we're gonna focus primarily on the editor. Now, one thing I do want to do is open up a style.css. And let's get rid of the colour of white so that we don't have to strain our eyes in order to see the content. And just by making that change that it's so much easier to see and we will also see that in play in the editor as well, so, that will be nice. However, the next thing I want to do is get rid of this border. Now we can have a border. But I think that there's a better way that we can approach this because there are other components that we can use. That do a better job of grouping everything together. Like for example a card. If you're not familiar with a card, just do a quick search for a bootstrap card. And the minute you see it, you'll know exactly what it is because it is in use everywhere it is a very common thing. There we go, that's a card. So we have the same kind of component. But as I mentioned, it is something that we can't use on the saved side. Although it would be really cool if we could, but we can only use it inside of the editor. Now that's not to say we could write our own card component, and then use that for the saved side. But, once again, that's just normal typical react stuff, so we don't need to dive into that. So let's go to our edit file and we are going to bring in three controls or three components from the component library. The first is card the second is CardBody. And the third is CardDvider. Now if we have a CardBody, then chances are very good that we would have a card header and the card footer and that is indeed the case. But in our case, we just really need these three things. We are going to keep this div element. And we're going to define the card inside of that div element. And we're going to wrap everything else inside of the card. And we will change all of these div elements inside to a card body. So that's just a simple matter of copy replace. So let's do that. And then between the CardBody that has the guitar name. And then our editor or our rich text editor, we're going to add the card divider. And there's one other thing I want to do is changed the placeholder. This is not camelcase that is just all lowercase. And we're just gonna go ahead and denote this using the prop syntax. And we'll use single quotes for the string there. Of course, the quotes don't matter. It's just typically what I use now. So with those changes, let's go back to the editor. Let's refresh the page and we will see something that looks fairly nice or we will encounter an error. So let's look at the console. And let's see what the error is. Sometimes we can tell right off the bat, what the error is. Other times we can't, and usually this error is gonna say that the above error occurred in the Edit. Or if we have something in the save, it might say save, we can see that the card divider is not defined, and that's because I cannot type. So we need to add an eye there. That will make that work. So now let's do another refresh. And we should see something but notice now, well, that's not gonna show us anything. Never mind, so now we can scroll down and this looks a lot nicer. We can see that everything inside of this card is kind of grouped together. So we know that the manufacturer and the name go together. It's also nice that we have the content and if we get rid of the content, we should see the placeholder. So there we go that's great. Now I do want to get rid of this dotted border. So let's go to the editor.css. This is of course, specifically for the editor and we're going to get rid of the border. And we're going to add some style to the card because it's nice that everything is grouped together but the white just kind of stands out to me. So what we're going to do is use some of the colors from the palette of this theme. And unfortunately, there's not really any documentation on that. But if you inspect on any part of this green part or the greenish part and then you start looking at the styles, you're going to see a list of variables, and the styles that we can use. And what I've done, is I've picked out some colors that don't stand out as much as the white in my opinion. So, let's go to the editor. And we are going to do this. We want to style the card itself. So we can do that in a couple of different ways but the best way would be to just use the class name of the card component itself. And you can find that out by going through the source code if you want it to do that or you can just inspect the card. And then, right there, there is our card, components-card, that's the class name that we want to use. So either way, you're going to end up with the correct class name. It's just how you want to go about getting that. So we are going to use our provided a class name, but we're going to style the components dash card. And then we're gonna set the background color to our global Color Purple. We're also going to change the border of the card because it's a lighter color and I would prefer to use something a little bit darker. Or we're going to use is a little too dark for my taste but it is what it is. So we're gonna set just the border color and the color itself is going to be dark gray. Just like that, so with that change alone we can go back to the editor, we will refresh the page. And since we didn't modify anything inside of the block itself, all we did was the CSS. So here's our changed CSS and it still kind of stands out but not as much as the white at least in my opinion. So let's change the content so that it's some actual useful information about this Gibson Les Paul, it is a 2012 Les Paul 50s tribute. That means that a lot of the things about the guitar was built towards the specifications from the 50s. And the color is a Satin Wine Red. So there we go, we will update this. And of course if we view this as the saved post, all we're going to see is that the content itself changed. But for this lesson, we were primarily focused on the block itself. So we've changed how our block looks and the presentation is a very important thing. So now in the next lesson, we are going to focus on the settings of our block because not every block, but most block has some settings. With our block selected, if we click on the settings, that pulls up this little tray on the right hand side. And if we had any settings, they would be listed here and we would be able to choose those settings. Like for example, if we go to the paragraph, we can see that there are several different options, the font size and basically everything about the typography. You can also change the color of the text and other stuff. So, of course, those kinds of settings don't really make sense for our blog. But we would be nice to have some settings and we will start looking at that in the next lesson.