2.2 Gutenberg Tabbed Content Block

Welcome to the second lesson of this course. Let's move on to our second component to which is a tab content. Now the process here will be relatively the same as in the previous lesson, except this time we'll write a little bit of custom JavaScript and we'll load it into WordPress. So let's begin, our second component for the tab content looks something like this, these are the tab links. And whenever you switch from here the content on the right side will change. Now in addition to our typical content we also have an icon that I used here. So we'll be using the Font Awesome plugin for WordPress to get access to this icon. So let's go back to the Block Lab plugin. Let's add a new block. We'll call it Custom Tabbed Content, and let's add the keywords of custom and tuts and let's go ahead and publish it. Then let's create the template file in the same place and let's also create the CSS version and then let's add fields. So for fields, what do we have? We have the link text, and we have the tab content, and we'll do the same for each tab. Let's do three tabs for now, just to keep things simple. So we're gonna have Tab 1 link text, that's gonna be a text area or a text element. And let's do Tab 1 content, and for this we'll be using a Textarea. That's it really, now let's do the same, Tab 2 link text, Tab 2 content, and Tab 3 link text. So at this point we're pretty much set with the structure of the fields. Let's switch back here, I've created a new page called Tabbed content page, currently looks like this. Let's add our custom block. Let's actually do a refresh and we'll choose Custom Tabbed Content. So let's go ahead and fill in these fields. And here I'm just gonna take some text that I got from the Tuts+ website. All right, and let's hit Update, let's do a refresh. Of course, we cannot see anything right now, because we haven't written any coding here. So let's do that, let's start with a diff class tabs. And inside we're gonna have two sections basically, one for the tab links. And again, we're gonna use the for statement to go through each one. And on the right side, we're gonna have the tab panels, again, with a for statement. So let's do ul class tab-links and then php, we have three tabs, so again, we'll use 3 there, i++. Now we'll make the very first tab active, okay? So when the page loads, this will always be active. So we gotta do a quick check here. If the cursor is 1, so if it's the first tab, then we're gonna echo a certain markup, if it's not, we're gonna echo a slightly different markup. So if i is 1 then we're gonna echo a list item and then a href will point to tab- i, and I'm gonna give the class of active And then inside the anchor tag, I'm gonna display the link text. So block value, tab-1, Link-text. And then we'll close the anchor tag, and close the list item. Now, if the cursor is not 1, so if it's not the first item, we're gonna echo a similar markup. So we have list item, a href tab-i, and actually just to make this a little bit simpler, we can actually, I made a mistake here. We can actually replace this and just say tab-1, because we already know it's the first one, right? So tab, Tab-i, we're gonna remove this class active, okay? And then we're gonna have block-value tab, And here we're gonna replace the 1 with i. So tab 2, 3 and so on link-text. Okay, and I think we are pretty much good to go on this side. Now, let's see about the tab panels. So tab panels, we're gonna open up again, with a PHP. And just to make things simpler, let me just copy this bit, okay? So for i = 1, all the way to 3, if i =1, so again, if I'm on the very first tab here we're gonna echo the following div class-panel active and I'm also gonna give it an id of tab-1. All right, so that happens if we're on the very first iteration. On the others, we're gonna have a simple panel without the active class and the id is gonna be tab-i. And then we're gonna echo the block of value of tab-i-content, and I'm gonna close that div. All right, so let's see what we got. We have our links and we have our three panels. So that's correct, now let's write some CSS to style this whole thing. All right, so again, I just skipped to the end here and we're gonna quickly walk you through the CSS. So the result is something like this. Okay, again, the fonts do not look the same as they do in our designs. But other than that, it all seems to be working just fine except for this icon which we'll fix in just a little bit. So let me quickly show you what I did here in terms of CSS. The most important parts, by default, I'm hiding all panels by setting display none. And then on the ones that have the active class I'm setting display block. The tab links themselves are part of a list, so I'm resetting the list style type, resetting the margin and padding and then adding the proper styling for each. I'm just making the text capital, setting the background and the padding and the border radius to each one of these. Ad I'm also setting the active class, which has a darker color. It has this arrow that is using Font Awesome, which is positioned absolutely. And then on the desktop version, it uses a transform of a little bigger scale on hover, and on active. So if we resize this, it will simply revert to a stacked solution. But on larger screens it's gonna look like this just like in our design. Now to fix the icon here, let's quickly go back and install the Font Awesome plugin. So Plugins > Add New, I'm gonna search for Font Awesome. And it's this one here, Install and Activate. And right now, all the classes from Font Awesome are available for us to use. Now, this is not a tabbed content just yet, because we cannot switch tabs, right? Right now it just goes to the HREF values that I set. So we need to write a little bit of JavaScript to that. To do that, we'll go back to our theme folder, we'll create a new one, which I'm gonna call custom-js. Okay, and here I'm actually gonna create a new file, and I'm gonna save it in custom-js as custom-scripts, you can name this whatever you want really. And custom-scripts it's actually .js, excuse me. All right, so for this bit, we're gonna use jQuery. And there's a very good reason for that, WordPress already has jQuery installed. So it's not like you're loading a whole different library, just do this very simple thing, right? It already has jQuery, so we might as well use it plus it's gonna make our coding a lot faster. You can use Vanilla JavaScript for this, but it doesn't really matter, we're gonna use jQuery. So to make sure our script works properly with WordPress, and there are no conflicts, we're gonna do the following things. We're gonna say, jQuery(document).ready(function) and we're gonna pass in the dollar sign. And this will make sure that we can use the dollar sign inside this function and it's not going to create any problems with other files or with jQuery inside WordPress. jQuery is a bit finicky with WordPress, sometimes so if you're gonna start your script with this then you make sure your code is compatible. So here let's do something very simple, we're gonna reference the tab links or the anchor tags inside tab links, and let's also reference the panels. All right, so panels equals panel. All right, we'll say tabLinks on click, we'll have a function, And we'll make sure to, Prevent the default click behavior, but before that let's actually create some variables. We'll reference this which refers to the clicked element, because we're gonna use it in multiple places. It's a performance thing really targetPanel, it's gonna be this at our attr href. So basically, this variable will contain the panel or the id of the panel that we need to display. So we're gonna prevent the default behavior, then we're going to remove the active class from alt tab links. So this is very simple in jQuery, tabLinks.removeClass, Active. Then we're going to add the active class to the clicked item. So we're gonna say this, .addClass active. Finally, we'll hide all content panels, so panels.removeClass active and we will show the panel, Corresponding to the clicked item. So we're gonna reference that targetPanel and we're gonna add, oops, add the class of active, all right. And that should be it, really. Now to load this into WordPress, we need to change the functions.php file for the theme that we're using. That's not super hard to do, let's just go down here at the very end, and we're gonna say load custom scripts. And we're gonna say add.action wp_enqueue_scripts, and we're gonna attach our own function to this, we're gonna call it add_custom_scripts. By the way, when you're creating this function, make sure it has a unique name. So let's define that function, add_custom_scripts, and inside we're gonna call another WordPress function called the wp_enqueue_script, and inside we're gonna pass in three things. First is a handle or a name for our new script, we're gonna call this custom_scripts, but you can call this whatever you want. Next, we need to specify a path, so where are we loading this script from? In my case, it's from the actual theme directory, the theme route/custom-js/custom-scripts.js. So we're gonna do get_template_directory_uri /custom-js/custom-script.js. And finally, if we have any dependencies we need to specify them here. In my case my script depends on jQuery, so by specifying that hey, I need jQuery for this to work, WordPress will load jQuery in case it's not loaded already, and that should do it. All right, so now let's go back to the frontend here and give it a whirl. And of course it's not working, so let's find out why it isn't working. Let's open up the console. All right, it says tab links removeClass is not a function. I'll actually use an uppercase L here, And I'll also do that here. All right, let's do a refresh, And what do you know? It is working, all right, with that simple JavaScript, we now have functional tabbed content. A quick recap of the whole process, we start by defining our block using the Block Lab plugin, we define all our fields. Then we add that block in a specific page and we populate the fields. Then we write the necessary markup in the template file, we write the CSS. And if we have JavaScript, we create a file and we write our JavaScript. And then in functions.php, on the theme folder, we just add this a little bit here where you create a function that will load your customs script and then you attach that function to the call of wp_enqueue_scripts. So when a WordPress loads or executes wp_enqueue_scripts, it would also execute your function, and that's all there is to it. Now, by doing this you have a custom, Gutenberg block, With JavaScript., super simple. Now for our third and final lesson of this course, we're gonna create a toggle content component. But we're gonna do that without using any kind of JavaScript, I'll show you how in the next lesson. See you there.