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.1 Adding Features to the Inspector

Gutenberg relies upon the inspector to provide component settings. We'll start adding settings to the inspector for our block.

Related Links

3.1 Adding Features to the Inspector

In this lesson we're going to focus on what we call the inspector, it is the sidebar. It has additional settings for our blocks. Settings that wouldn't necessarily make sense to be in the main editor itself. For example, the manufacturer in the name you can make the argument that that really isn't something that should be in the main section of the editor. That's kind of periphery information and we might want to put that inside of the inspector, we're gonna leave that alone. Instead, we're going to add another setting for the year that the guitar was made. So whenever we are done and we select our block over on the right hand side where the inspector is there will be a setting for choosing the year that the guitar was made. And we will of course save that information so that it will be saved and properly loaded every time that our block is loaded. Now the majority of our work is going to be inside of our edits file. And that kind of makes sense because we don't need the inspector whenever we are saving or even when we are setting up the block itself. This is primarily for whenever we edit. So there's a few things that we need to import. Some are going to come from the block editor, some are going to come from components. And let's reorganize this, right, first so that we have these things kinda grouped together. All right, so as far as the block editor is concerned, all we need to pull in is something called InspectorControls. This is essentially going to give us an area that we can specify our own inspector settings for our blog. And we're going to use this inside of our edit function. In fact, it is going to be a sibling to this div element that we have that encapsulates the main portion of our editor. So right here, we can go ahead and have inspector controls. But of course, since you are familiar with React, we can't really do this because we need a single root elements being returned by the edit function. And I'm just gonna get rid of this comment because we don't need that anymore. So what we want to do then is wrap this whole thing with a fragment. And you can think of it kind of like the document fragment that the document object model gives you. And this is from a completely separate library simply called element. So we are going to import Fragment from @wordpress/element. Now notice its element and not elements, that's very important because it won't work otherwise, I'm speaking from experience. So now we can wrap this whole thing with this fragment. And the great thing about this is WordPress behind the scenes is going to automatically recognize what is and isn't part of the inspector. Basically, because what is inside of the inspector is inside of the InspectorControls. Everything that's outside of that is going to be just normal stuff for the main editor of our block, so there we go. Now inside of our InspectControls, we have a panel body. So if we look at the UI, this right here would be considered a panel body. And let's look at this paragraph here since there's multiple things. So there's this Typography panel, and all of the Typography settings are inside of a panel body and they are also divided into separate rows. So then we would have Color settings that its own panel body divided into multiple rows, the same thing for the Text settings and then Advanced as well. So for our case, we're going to put the year that the guitar was manufactured inside of its own panel body. This is something that we also need to import and this comes from the components library. I'm going to start putting this on multiple lines, so that it will be easier to see on screen here. So there are two things we need the PanelBody, we also need a PanelRow, and I'm gonna go ahead and throw in the SelectControl. This is what we are going to use to select the year, this is just a glorified select element basically. So there we have all of the things that we need inside for our Inspector. So we are gonna start with the body and a PanelBody has a title, you don't have to set the title but it's typically a good idea to do so. So in our case, we are simply going to have a string that says Manufacturer Year, but this is something that should be translated. So, we are going to use the internationalization library, the first string that's going to be our label name, and then the context is guitar-entry. So there we go, we have our body. The next thing we need is our PanelRows. So let's go ahead and add that and inside of this row, we are going to have that SelectControl. Now we aren't going to fill out every possible year, I mean, we could, we can programmatically just iterate from 1950 to the current year, which right now would be 2021. And we could build the options that way that's simple JavaScript stuff, we all know how to do that. So instead, we're just gonna have a very limited set of years here. Now the value for the SelectControl is going to be something that we will save in our attributes. So let's go ahead and assume that we have that and then we will implement that attribute later. And we're just gonna call it guitarYear. So we will use our attributes and then access the guitarYear, like the rich text and the text controls, there's also an onChange that we need to handle. And of course, it's going to be just like everything else where the new value is going to be supplied and we just need to set the appropriate attributes. So we will set guitarYear to value and then we need to define the options and the options is an array of objects. These objects have two properties value and label. So we will have a value of 2021 and a label of 2021. And we will essentially do the same thing for, I guess, let's go to 2019. So let's copy paste and then make the necessary changes. So for right now we're done here, let's go ahead and go to index so we can define that attribute. We gonna add this after description, and this was guitarYear, the type will be number since that makes sense, that's the year. But then we also need to go to save because we need to save that value someplace. And because that is how Gutenberg behind the scenes is going to get the value for that attribute it needs to be able to find it in the markup. So let's add a data attribute to the h3, we'll just call it data-year and we will output the guitarYear here. So there we go, that should be it. Let's go to the browser, let's refresh. And then we were going to see on the right hand side our settings for the Manufacture Year. So if we select our block, over on the right hand side, we see Manufacture Year, that does not look right, Manufacture Year, okay? And let's choose 2019. Now, it's interesting in that the Update button did not highlight, it's supposed to highlight. So let's do a hard refresh, CTRL F5 and let's see if that is going to make a difference here. So we are going to select our block, let's change the year to 2019, and that's not updating. Let's make sure that we don't have any errors in the console. So let's pull that up and we do set attribute in. Once again, just one keystroke can make everything not work. So that was inside of Edits, we need to go there, set attributes, there we go. So that should fix that. Now we can Ctrl + refresh, and whenever we change the year, the Update button should highlight so that we can then save that. Then we will be able to look at the result and the post, so there we go. We changed it to 2019, we will update and as it saves, we can see that it saved. So let's go to the post, we will refresh, and let's just inspect this. So if we look at our div elements we see that we have h3, the data, the year set to 2019. And all of that stuff is there. Now I know that we selected 2019, it says 2012, I don't really care what that says. I'm more interested in the functionality. So let's go back to the Editor. Let's refresh and let's see what happens because we are going to get in there. This block contains unexpected or invalid content. Now don't click on attempt block recovery. Well, I guess, yeah, go ahead and do that. Because whenever you select the block over on the right hand side, you're gonna see 2021. It did not load that value that we saved 2019, and the reason is pretty simple. Because remember as we save our block content that's being saved into the database whenever it is loaded into the editor. Gutenberg has to try to find all of the necessary pieces of information for the attributes and to load them. But it doesn't know where to load the value for the guitarYear attribute. So we're gonna have to dive a little bit deeper into the realm of attributes, and we will do that in the next lesson.

Back to the top