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.1 Set Up the Block Template and Page Custom Heading

Everything is now ready for us to start creating a “template” of Gutenberg blocks in our custom post type definition. We’ll start by adding a custom heading field and styling how it appears in the editor.

3.1 Set Up the Block Template and Page Custom Heading

Hi, welcome to part three of building Gutenberg template layouts without JavaScript. In this lesson, we're gonna start getting our block template for our custom post style setup. And the first thing we're gonna do is set up this heading, have that recreated in the backend ready to be output in the frontend. The first thing that we're gonna do, you might have noticed with our little dummy post here, but this is just a normal post editor. It's not the Gutenberg block editor. To make this into an actual block editing space, there's another parameter that we need to add into our custom post type setup. So if we get back into our functions PHP file, and we go into our post settings, we can add the parameter, show in rest, and set it to true. This is short for show in rest API. And without getting into bunch of detail, WordPress needs to know that this post should be valuable to the rest API in order for it to be interactable with the Gutenberg block system. So if we say that out jump back into our backend, and then we refresh our dummy page. Now you can see that it's showing us the Gutenberg block style interface instead. With that done, now we're ready to start telling it what blocks we wanna have appear in this page. So we've got our empty array here. It's kind of a bit confusing that the collection of blocks is called a template, but then the files that make up a WordPress theme are also called templates. So just bear that in mind that sometimes a template is going to be referring to a file in WordPress like our index.php template. And sometimes it's gonna refer to a collection of blocks. I'll try to distinguish between the two as we go along, but JUst be aware that there can be some crossover of terminology there. All right, so our block template. We have this empty array, so let's just make a new line inside it. The first block that we're gonna land into our template is going to be a heading block to drive the heading for our tour section. So first up lets just add in a comment, so we know that's what we're doing with this block. And every block that we add in is itself gonna be an array. So there's gonna be bunch of nested arrays here. So you really want to try keep on top of your commenting and your indentations so that everything is readable and it makes sense to you. So let's create an array to hold our header block. Now we need to let WordPress know which of the core blocks we're gonna use in this template. So what we can do for that is provide a string. We're going to say core/heading. And I'll just show you quickly how you can figure out what the names are of blocks that you might wanna use in a template like this. If you go into WordPress and just make a new post. And then you add the kind of block that you want to include in your template. So we want to go with a Heading, and let's put some dummy text in here. Now, if I go up to these three dots here, and switch into Code Editor, I can see that the name of this block in this code here is Heading. We know that we wanna pull from WordPress' core blocks. So that means that if we want to put one of these heading blocks into our template, we specify core/heading as we saw inside the regular post. Now we need to provide an array of settings for this block. And to make it a little bit easier to read I'm gonna put that on another line. So let's put our bracket on a line below. And then we're going to indent and put another array inside. Put this on another line as well, and then we're gonna add in two settings for this block. The first thing that we're gonna add is placeholder. And that's gonna allow us to determine what should appear in this block before somebody fills it in. So we're gonna have it say Add Categories Heading. So this is a page that's showing off a bunch of categories of tours. So we're gonna let people know that they should put in a heading that represents those categories of tours. Now I'm gonna add a comma and I'm gonna add one more parameter. That parameter is going to be className. And we're going to set it to tour_categories_heading. Now, this class name parameter is used for just what it sounds like. It's to alllow you to add a custom CSS class name into the markup that Gutenberg injects into your content. But you can actually use it in another way as well. The way that we are going to use it is as an array key. Later on we're gonna fetch all of this content and put it into an array. And then we're going to use this className parameter to give each section of our content a recognizable key that we can use to look that content up again. And pull it out and display it in our frontend. If that doesn't make heaps of sense just yet, don't worry about it, cause we're going to step through it all piece by piece as we put this together. So let's save that out, actually forgot the greater than sign, save that. Now that's all good. We'll go back into our backend and into outlining page area. The unfortunate part of working with these types of layout is that whenever you change the template, it's defining the Gutenberg you wanna use. You're gonna lose whatever content you've already put into an existing version of the custom page template. So as we refresh, you're gonna see that it complains that the post doesn't match the template. So you can either choose to reset the template or just delete the post and make a new one whenever you make massive changes to your template of books. So for now we're just going to hit Reset Put this into code-editing mode, there we go. That's our heading block with our Add Categories Heading placeholder that we added in ourselves. And I'm actually just gonna blank out this title since it's a little bit distracting. We'll just put in some underscores there. That will help to make it stop looking as though it's part of the content. Now the next thing that we wanna do is add some styling into this editor area. Right now, you can see that this space is really quite narrow. It's not nearly wide enough to represent this space, that we're actually wanting to create. And also, if we add a heading in here, This looks at the moment, nothing like the way we want it to look on the frontend. So to fix this up, we need to add a couple of things into our editor stylesheet. So let's go ahead and open up our style-editorcss file that we created earlier. And the first thing that we're gonna do is override that small narrow width that we saw in the block editor. So we're gonna do that by targeting the style wp-block. This is a style that's used in the backend of WordPress and we're gonna override its max width. We're gonna set the max width to the max width of our own layout, which is 1440 pixels. While we're at it, we're also going to apply our own font to any content that's contained inside our block. And we can grab the font that we wanna use from our stylesheet. We want this line here that we're using to apply to our body on the frontend. And we're just going to add that in here. So let's take a look at that. Let's update and refresh the page. All right, so now you can see that our block is much wider. It's 4040 pixels wide, and you can also see that the font that's applied to our heading has changed. And the cool thing is as well if we inspect our code, you can see that the tour category's heading class that we applied via our template of blocks. You can see that that's being applied here to this heading as well. So we can target that class in our editor styling to make this heading look like it’s going to look on the frontend. So we’re gonna jump into our main stylesheet, and find the styles that we’re using to control the presentation of our headings. Which in this case, is these styles here and here. So we’re just going to copy those over And then modify them as required. At the moment, we are playing this styles to an h1 element. But the heading that we're actually gonna be working with in WordPress is h2. So we're gonna change both of these to target h2. And then we also need to specify which h2 tags we're trying to target. And they are those with the class tour_categories_heading. And there's just one more thing that we need to change here. And that is, we're using color variables in our stylesheet, but we can't use color variables in the header of the stylesheet for the WordPress editor. It's just do it the way that the editor stylesheet gets loaded into the backend. So that's not possible, and that means we just gonna need to replace these variables with their equivalent color codes. So we've got text_color _three, which we'll replace with this hex code. And text_color_two, which we'll replace with this hex code. Now let's have another look at our backend, we'll refresh again. All right, and now our heading is starting to look the way we want it to. We need it to say Discover Around The World, so let's just add that in. And so when we've copied and pasted that text in, it's bought in the strong tags or bold on this top line. And it's also bought in a page break, we just look at that encourages so you can see. So there we've got a strong tags and our page break, and that is why that automatically looks correct. So now that's our first custom block defined inside our custom post type. And styled using our editor CSS. Now we're ready to move on to the next portion of this part of the site layout. And that is setting out these rows to our categories. Because of the way WordPress works, we can't set this whole table up at once. We need to set up this row and then this row. And I will explain why as we get into building this out. So in the next lesson, we're gonna start by creating this first row of category to us. We're gonna add in the blocks we need to our template and then we're gonna start them up in our post editor. So for all of that, I will see you in the next lesson.

Back to the top