2.3 Gutenberg Toggle Content Block

Welcome to the third and final lesson of this course. So far we've created two Gutenberg custom blocks, one for a pricing table and one for a tab content. In this lesson, we're gonna create a custom block for a toggle content component. And for that, we're gonna use some pretty special HTML syntax. So let's get started. The control in question or component in question, looks something like this. It's basically a series of expandable a collapsible elements. And this is a perfect element for an FAQ page or a frequently asked questions page. So let's go ahead and create our content block. We're gonna call this Custom Toggle Content. Let's create the necessary files, and also a CSS version. And we'll use the same keywords here. Let's publish it. Let's add this into our new page. And there it is, Custom Toggle Content. So let's go ahead and add some fields. So for fields, it's actually very simple. We have a question and an answer, and that's it. So we're gonna have question one, answer one. The answer is gonna be a text area, because it's bigger. But we'll do this again for three fields. Question two, answer two, question three, answer three. That's it. Let's hit update, and we can actually go ahead and close this. Let's refresh here. I actually forgot to update the page, but it's fine, we'll just add this again. So let's populate some of these questions. Again, for content. I'm just grabbing stuff from the Tuts Plus website. And let's update that. And now let's write the necessary code here. Now, this is where it gets interesting. Normally, for a design like this, we would probably go a list, and then a list item, and then write, maybe a bit of JavaScript. But also, CSS-only solutions. Like, maybe with using radio buttons. Now, instead of using JavaScript, I wanted to use a slightly different technique. It's probably not the best, because it doesn't have the widest browser support. But it's by using the details and summary tags in HTML. And this is actually something that I found our recently, and let me just write a quick pin here to demonstrate. So if you do details, summary. Let's say hello, and under that, you put some content, you automatically get a toggle content, a toggle element. How cool is that? And this is with HTML, right? There is no CSS. There is no JavaScript. This is a native HTML element. You want another one, just copy the whole thing again, right? And now you have two of them. It's really, really simple. The browser support for this is pretty good. So details in summary elements. As you can see, Internet Explorer doesn't support it. Of course, earlier versions of it don't support it, but the latest one does. And other than that, yeah, the latest versions of the most, or the main browsers, do support this feature, which is fantastic. So this is the structure or the syntax that we're gonna be basing our questions here. So, really simple here. Let's start with the div class toggles and inside, again we're gonna use the for statement. So, for i = 1, how many do we wanna show? Let's do three because we made the fields for three questions and three answers, right? So for each of these, let's make the first one opened. And that's really simple to do. If i is 1, then I'm gonna echo details, and you simply add the attribute of open, else. We're simply gonna echo just details. And then you're gonna echo the summary. This is for the label. Okay, and the inside, we're gonna use a block value of question.i, and then we're gonna close the summary. Then we're display the actual content in a div. Right? So it's gonna be blocked value, answer, i. And finally we're gonna echo the end of the details. And that's it. That's all there is to it. Now if we do a refresh here, you can see that we have working toggle on. Pretty cool, right? Let's go ahead and add some CSS, and after the CSS, our page currently looks like this. For the CSS, you can basically target the details. You can target elements inside the details, you can target the summary. But the tricky part comes when you wanna customize it. Because, first of all, you cannot animate that state change, right, from open to close. That cannot be animated right now. And if you want to access the marker, here's what you do. You basically use list-style none on the summary on most browsers. And that will get rid of that default triangle, that you had here. And if you want this to work in Chrome, you gotta do this, you gotta target the webkit-details-marker pseudo element for the summary. And you gotta set display to none. Other than that, you can do whatever you want with it. In my case, I'm just adding this icon from Font Awesome, as a pseudo element on the summary. And I'm just changing it depending on the state. So if the the details is open, I'm changing the color of the text. And I'm also changing the code for the icon. So I'm using a chevron down for when it's closed, and a chevron up for when it's opened. And that's it, really. Without any JavaScript, just by using HTML and CSS, you have working control like this. Now, for any of these elements I showed you in this course, if you want to add more of them. Well, let's say I wanted to add one more element to my toggle content, right? Well, I would go to Block Lab. I would open this, and I would simply add one more field. Let's say question one, or a question four, excuse me, and answer four. We'll hit Update. Then we'll go back to our page. We'll do a quick refresh here. And now we have two extra fields. Let's populate those, and let's update. Now, if we go back to our page, we're only displaying three fields. To display the fourth, we need to go back to our template file, and simply change, how many fields do we have now, four? Change that to four. And now we have our fourth field. And it's exactly the same principle as with the other components. And that's it for this third, custom block for Gutenberg and this third lesson, we're at the end of the course. Thank you very much for watching. I hope you found it useful. As I was saying in the beginning, if you want to follow along, you'll find source files for this course. You'll find all the PHP, all the code that was written here. And you'll also find links to HTML versions of these components on CodePen. And there is also a link to the original Figma file where you will find the designs for these elements. Go ahead, download them, use them whatever you want. So again, thank you very much for watching. I'm Adi Purdila, and until next time, take care.