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.6 Using the RichText Component

WordPress lets us use the RichText editor, making it easy to add rich text editing to our own blocks. You'll learn how to use it in this lesson.

2.6 Using the RichText Component

In the previous lesson, we added more data so that we can play around a little bit with more attributes and we also slightly modified the style. And the style still needs a lot to be desired, but we will get there, we will adjust that later. For now though, I want to add a description because it's nice having the make and the model, but we might also want to supply a description for a particular guitar. And we have options for that. We could use another text control if we wanted to. But I'm thinking more in terms of rich text because we might want to add our own formatting. We might want to bold certain text or italicize it or add a list. I mean, there's a lot of things that we might want to do. So we want something more flexible than just a plain ordinary text control. And thankfully, there's one built in that we can use. It is not inside of the components library however, instead it is inside of the block editor. And it is called simply RichText. Now, before we start using that, let's go to GitHub. And let's take a look at the block editor library. So there it is right there, and source. Now there's going to be a lot of components inside of here and whenever you think of the block editor library, these are typically things that we only use inside of the editor. For the most part they are a conglomeration of a lot of the other components, just combined in order to provide specific functionality for editing things. So, of course, as we look at the rich text documentation, we have everything that we need to use it. There's only two required prompts, value and onChange. So it's like the text control in that case. There are some other options. There's one called placeholder, which would be nice. We could specify a placeholder and specify that is optional, as well. And there's other things, we probably won't use them. Now we can keep scrolling down to go to look at how to use this. And this is a little dated because this says WP editor. It is not editor. However the actual code for using it is going to be the same. So all we're going to do is use rich text. We don't have to specify tag name, but we do need to set the value and onChange. Now notice though, that there is the save method here. And it's doing something a little different. It's using rich text, but it is also using this content here, and we will talk about that later. Just know that there's something special that we need to do for the save function, so let's get into our code. And we are going to use rich text. So we're gonna wrap this inside of another div. And really we don't really need to because it's going to be wrapped inside of a div to begin with. I'm just doing this so that we're consistent here. And if it looks awful than we can come back and we can change that. So we have our rich text and the two things that are required, are the value. Now, of course, we don't have an attribute yet, but we can add that here in a few moments, and we'll just call this description. And then we also need on change and really let's just take what we have for the text control. And let's copy and paste that so that all we need to do is change the attribute name that we are going to update. And there we go. So let's add that description attribute. Let's go to the index.js file. We will add description and this is of course going to be a string. So we have that there. Let's go to save. Now since we need to use that content, yeah, let's go back to the documentation. And we need RichText.Content. So we still need to access rich text here. So we need to import that inside of save as well. And since we are already importing this useBlockProps, all we have to do is just add rich text there. So that after our h3, we will use RichText.Content, and then we want to specify the value. And of course the value is coming from our attributes and that was called description. Okay, so as far as this content is concerned, when you think about the blocks that we are defining, we have an edit side and a save side. So when it comes to rich text, no rich text is basically HTML. So there's a little bit more involved there than just plain ordinary text. So what the RichText.Content does is outputs the HTML that is generated from the rich text component. It's basically setting it up so that it's going to be rendered inside of the browser as opposed to just displaying the markup bear. In fact, let's just go ahead and let's see what happens if we don't use RichText.Content. So we will have our Make and Name. Then we will have the description after that. So with that done, let's go to the editor. Let's refresh the page and we will probably be greeted with the validation error, which is fine. And no, we aren't. Instead we have just a little bit of area here that we can start typing and add some content. And let's do some changes here, let's make some of this bold, let's italicize content, and let's see what else is here. Inline image. Let's strike out start. I just want to have as many differences between all of this content that we can have. So let's save this. This is of course going to save our content to the database so that now whenever we refresh the page, we can see the actual HTML. So this is why we have to use that rich text content so that it is properly rendered in the browser. So we need to go back to save, we will throw in that RichText.Content. And since we're here in the code, let's also go ahead and add that placeholder. Because that way we can denote that this is an area that you can add content. So we'll have placeholder and that will simply just be a string such as Enter an optional description. All right, so with that done, let's go back to the editor. Let's refresh the page. And we will still see our content there because we really didn't change anything. Now we get the invalid content, okay. So if we get rid of the content inside, let's see our placeholder, and our placeholder is not being displayed, but that's okay. Let's update. And so now whenever we view this on the public side, we will see the actual content that we expected to see. And just for fun, let's look at the view source. And we can just do a search for Gibson Les Paul. And here we have our block, we can see that the block begins with that WP block, create block guitar entry. That's a mouthful, but then we have our h3 which has the make and the model followed by the content. So nothing really out of the ordinary as far as what we would expect from the saved content. Well in the next lesson we are going to play around with how our block is displayed in both the editor and the saved post.

Back to the top