7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 11Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Create the First Row of Tours

Next up is the setup of our first row of “tour” categories. We’ll cover why this needs to be done separately from the second row of tours. We'll also set up the nested block definitions in our custom post type template and style how the blocks appear in the editor.

3.2 Create the First Row of Tours

Hey, welcome back to building Gutenberg template layouts without JavaScript. In this lesson, we're going to start assembling the actual tour categories that we're showing in this part of the site. And, we're gonna begin by creating this row, with these two elements inside it. We're gonna be doing that, using Word Press's own columns block. So to help you to see how, we're gonna be working with these blocks and why we have to do these two blocks separately, I'm just gonna show you a little bit of how the block system works. So if we start by looking at how we would break down the content that needs to go into these cells inside this grid here, we'd have a column for each one of these. And then inside the column, we need an image like this one here, we need a button and we need some text. So if we match those three items to existing core blocks in Gutenberg, we have the image block, a button block and a paragraph block, that we can then re purpose. So if we wanted to put those together with normal blocks in a normal post, it would look something like this. So we have our columns block, just ignore that empty paragraph at the bottom there, actually let me see if I can delete it. Right, so we have a columns block, then inside that they're automatically inserted column singular blocks. And the number of column blocks that are inserted in here, depends on this setting over on the right columns, which in this case is set to two. So if we change that number, it will change the number of nested column, singular, blocks. Then inside that singular column, we have an image block, a button block and a paragraph. And if we look at the HTML version of that. We can see these are our block names columns. Column, image, button and paragraph. So that's what we need to recreate inside our block template. And you can also see here, the reason that we can't create all five cells of our grid at once. So let's jump out of code editor mode. If we have our columns work selected, we can see that there's no way for us to say that we wanna have three columns on the second row and two columns on the first row. We can't select an individual column and give it a column span of 2, there's no setting for that. So we have to work with the fact that the column block has a fixed number of individual columns. That means we are gonna need two column blocks, the first one with two columns in it, and the second one with three columns in it. Now in our HTML page, we used CSS Grid to make this quite simple. The markup in the CSS here is very minimal. We're still gonna be able to use that same markup and CSS, because once we have all of this content pulled out of the database, we're going to strip off all of that excess markup, just get the content of the individual columns. And then output it in the same way that we did in our original HTML. So now, let's go ahead and create the block template for our first row. So just like we did here, let's start by adding a comment, so we know what this section of the block template is all about. So we're gonna say, tour categories, row 1, as usual, in here we're going to need an array, and the block that we're gonna be pulling in, as we saw before is a columns plural block, so we're gonna say, core columns. Now we need to provide an array that shows the settings for this column's block. So we'll set up our array for the settings for this block. We're going to give it the class name. Tour categories. We're gonna use to setting columns, to specify that in this row we want to have two columns. Now and inside this block, we need to have two block that are each an individual column. So first, we just gonna create an empty array to contain both of those columns. So make comma and add that array. And add a space inside that array, in here is where we're gonna add our two individual column blocks. So we're gonna comment the first one, and we'll just call it feature tour category. It's our first category with a large image so that will work. Make another array for our column block, and we want to pull in core. Column singular, now just like with our other block so far, we need to provide settings for this column block. And they come by way of another nested array. Here we only have one setting that we want to provide. We want to set the class name. So tour_cat_one, and you see how all of these class names that we're adding in are going to put into practice, as we move through putting together this code. Now, we want to add in our image button and paragraph blocks. And these are nested inside our column block. So in the same way that we created our columns, plural, block. And then the nested blocks had to be added in to another array, that came after the settings array. We're gonna do that again. So this is our settings array. We're gonna add a comma and then after that, we make another array, and this is where we're gonna set our nested image, button, and paragraph blocks. So first up, we'll add in our image block. So core /image. We don't actually need to add any settings to this block. We don't really need to specify anything non-default. All we're gonna do is just add an empty array, and post that as our second argument there. Then we'll add a comma. Then we're gonna add another array for our next block. And that is going to be core/button. And we do we have some settings that we wanna specify for this button. So, another array, lots of arrays in here. We're gonna add a placeholder, just like we did with our heading before. And we're gonna set that placeholder to say button_text. And we're also going to set a className. Of button_two. This is gonna allow us to apply the button_2* from the stylesheet that we already have created to make this look like a button. And then we have just one more block that we wanna next nest inside our column. So another array. And this one is gonna be cool paragraph for a little bit of text. Once again, we want some settings to be applied to this paragraph, we want a placeholder that says to category text, and we want to apply the class name, Tour text. So we'll save that. And actually that's flagged an error, and that's because I neglected to add a comma. So many commas required. And then I did the same thing here, missed a few commas. And you'll notice that that's where it really helped to have all of the indentations set up correctly, as soon as I saw that there was a red line letting me know that there was an error. It wasn't hard to see where the comments were missing. So this type of in-depth nested array system, you don't have to use the exact same indentation pattern that I'm using. But make sure you come up with something that works for you, and then use it consistently. So now, let's take a look at what we've got in our post editor. We'll refresh. Reset the template and there we go, now we've got, heading just like it was before. And while I'm at it, let me just paste this back in. You probably gonna be doing this a few times, as you go through this type of development. And there's our image, our button, and our text. And if we take a look at the outline, there's our columns it's like that, we're gonna have to look at what's nested inside. We got our columns with a column image button in paragraph, nested inside it. So now, let's duplicate this three nested blocks inside the other column. And because we setup this first two here to be quite neat, what we need to do is just copy. We'll add a comment there. It just messed up my indentation, so let me just put that back. And then we'll paste. That same content in again. And we are just trying just to change second tour category, so we know what's happening here. We need to change this class so that instead of saying tour cat one, it says tour cat two, and then everything else can stay the same. So just save, no errors, that's good. No actually, let me just save that to the heading. Refresh the page. Reset the template. And there we go, so now we've got these three nested items as well. We look inside. That's the exact set of blocks that we wanted to have for our page. So now, what we need to do is apply a little bit of styling to this area. We know that in our first row, our first item needs to be twice the width of our second item. So to make that happen, what we're gonna do is find the class names that controlled the width these columns, and we're going to overwrite the width settings with their own styling. So if we inspect, and we try to select the column block, can be a bit tricky. We wanna keep going up until right now there. That line here, if we have that selected, we can see a couple of things. We can see that wp block columns class is being used to apply to this overall columns block. We can also see that it's put to our categories class, and has to columns class. Our next row that we're going to create with three columns in it, is also going to have the two categories class applied to it,and it's going to have WP block columns applied to it. But it won't have the has two columns class applied to it, because it's going to have three columns. So what we're going to do is target all three of these classes. We're gonna target wp.columns, so that we specifically override the width settings of the columns that are chosen of this block. We are gonna target to our categories, so that our style sheet is only going to affect column blocks that are used as to a category column block, and nothing else accidentally. And then we are going to use the hash two columns class, to make sure that we're only changing at the width of these individual columns, in the first of the two rows that we're gonna be creating. That might have sounded a bit confusing, but don't worry, we're gonna skip through it. So in our editor style sheet, we're gonna try and get WP block columns, and also with no spaces in between these classes two categories. And also, has two columns. So that makes sure that this is only gonna apply when all three of those classes are present. Now we want to target a child element, we wanna target one of the individual columns. And what we wanna do, is make this column wider and this column narrower. So, we need to find the class of controlling the width. Let's hear this class WP block. And if we go into the styling in here, we can see this has been controlled by flex box and the flex basis is set to 50%. So let's go ahead and our overwrite that. So we wanna target the class WP block, we wanna target the first of these and make it 66% wide instead of 50%, so we do that with nth of type. Then we'll set it to 1. And then in here, we're gonna set the flex basis to 66%. And we're gonna set it to important, just to make sure that no other styles in the editor override this. Now, let's duplicate that whole lot. Change it to effect nth of type 2. And change this one to be 33%. Now that should make our first column two-thirds of the width, and our second column a third of the width. So let's have a look, so we'll refresh. Reset the template, and there we go, sure enough. We've got our two thirds width column here, and our one third column width here. And the next thing that we're gonna do is override the styling of this button, with this blue button styling that we have on our own slide. We're actually gonna leave the paragraph styling as it is, because if we change it to what, like we have here, then you're not gonna be able to see the text. And unfortunately, there's no way for us to take these blocks and position them on top of this image book. The way that we have in the front end here. If you wanted to create this exact layout, that's when you would need to dig into some JavaScript and create a custom Gutenberg block. But we're gonna have this all set up so that it's very clear intuitively that this button. Matches this button. So the first thing we need to do is find out what class name is being used in this editor, so that we can override it with our own styling. So let's inspect this code. Wanna try to drill down until we get to the correct item. So that's the right one here, it has the class name wp block button __ and link. So let's actually get in and copy that class name now so that we can paste it into our editor style sheet. So we're gonna add that in here. And then we want our styling to come from our regular style sheet, and we want it to come from our button through style. Which is this one here. So we're just gonna copy all of this code, and paste it inside this class. And once again, we need to replace this SS variables with the actual hex codes, because we can't use SS variables inside the WordPress post editor. So let's change the text color, so it is just straight up white, and then we'll put in the highlight color. And now, let's take a look at our results. We'll refresh. Reset the template again. Actually should have saved it the last time. Saved that now. So now we've got our blue buttons showing up, but it looks a bit weird. And that's cuz for whatever reason, there's actually two copies of this button used in this interface. So what we're gonna do is use some CSS to find the second copy of this button, remove this space that's making it show up in a different position under here. And remove the shadow, so it doesn't look weird. So, I'm just going to copy this selected name, cuz we need to find the second instance of this. So we're going to say, nth.of.type, and we're gonna look for the second of these buttons. And for that button, we're gonna set the margin to zero to get rid of the weird spacing, and we're gonna set the box-shadow. So none, so we don't have two shadows one overlapping the other. Now, let's have another look. And now our button looks normal. Now, almost ready to start adding in our actual content, our images, button text, tour category text. But before we do that, we're gonna add in the second row of tool categories, so that we make sure we only have to put in our content one time. So we're gonna do that in the next lesson. I'll see you there.

Back to the top