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

4.1 Set Up the Default Filtered Block Rendering

As we discussed in our introductory video, in order to take full control of our Gutenberg content, we need to create a filter that ensures only the markup and CSS classes we want are used. In this lesson, we’ll start creating that filter, set up the default way in which it will render blocks, and test it by using it to output our custom heading.

4.1 Set Up the Default Filtered Block Rendering

Hey, welcome back to building Gutenberg template layouts without JavaScript. In this part of the course, we are going to process the content that we're pulling out of WordPress so that we get rid of any excess markup that we don't need. And we make sure that the right CSS classes are applied so that our front-end is going to look the way we want it to look. So just to give you a comparison, this is the HTML that we want to have appearing on our front-end, so it's this div here. So it's all fairly light, we've just got a single div wrapping the whole section. We've also got a single div around each one of these cells, and then just an image and a little bit of markup, not too much. Whereas at the moment, we're getting a whole bunch of markup coming out that we don't need. You can ignore these comments. A lot of the noise here is just because this content is currently totally unprocessed. Normally, there would be processing applied to this that would remove these columns and they wouldn't be showing up in the front-end. But still, there are a bunch of classes here that we don't want. For example, the styling on this button, we don't want, so we're gonna get rid of all of that and replace it with our own markup and our own styling instead. All right, so let's jump back into our code, and the first thing we're gonna need to do is to create a custom filter. So we're gonna do that with the function add_ filter. We need to give our filter a name, so we're gonna call it landing_page_content, oops. And then we also need to specify a function name that this filter should call, that's gonna handle what our filter does. So we'll call it get_landing_page_content. And now let's set that function up, so we'll say function get_landing_page_content. And now we're ready to start building this out. Let's make a bit of space. Now, when we apply this filter, it's going to be applied, actually, we're right in now, the code that's gonna apply this filter. At the moment, this little bit of code here is what represents our unprocessed content. So we're going to add in the function apply_filters. And then as the first argument here we're gonna provide the name of the filter that we wanna apply, which we just set up, so that is landing_page_content. And then it's applying to that same content that we were already using, but this is just gonna pass it through the function that we're about to run. So this post_content needs to be made available to our function, which we'll do by creating a variable in here, we're gonna call it content. So now everything that's in that post is gonna be held in this variable. Okay, so now, the first step that we need to take, right now this content is just exactly what's in the post editor if we switch into HTML mode. But we want to access this content as a collection of blocks. So to make that happen, we're gonna set up a new variable called blocks, and we're gonna use the function parse_blocks, P-A-R-S-E, blocks. And we're gonna apply it to our content variable. So now this parse_blocks function is gonna go through our content, find all the individual blocks, and create an array out of those blocks. And what we're gonna do is we're gonna iterate through that array, make changes to the entries in that array, and then put them into a new array, organized the way that we decide to organize it. And that is what we're gonna output on our front-end. So let's create that new array, we're gonna call it lpcontent for landing page content, And then we're going to return that content. And then in between these two lines, that's where we're gonna do all of our processing. All right, so now, let's start iterating through the array of blocks that we just created up here. So we're gonna say foreach, We're gonna iterate through the blocks. And then we need to pull out the key from each of our array items, and we're going to output each one of our individual blocks as block, singular. And what we'll have right now in this block variable as we iterate through each block is still fairly raw. You're still gonna have all of those comments and placeholder stuff in there. So what we need to do is render the current block. So add in another variable, we're gonna call it block_rendered. And here we're gonna use the render_block function, And we are going to render our block through this function. So then that is going to give us actual HTML that we can properly output in our front-end, unlike the sort of messy, raw data that you saw before. But we don't wanna keep all of the HTML that would currently be output. There's some extra stuff that we don't wanna keep, like these figure elements, for example. So what we're gonna do now is set up a list of HTML tags that we are going to allow into our content. So up here, outside our iteration block, we'll create a variable and we'll call it allowed_tags. And then in here, we're gonna put a list of all of the HTML tags that we are going to allow. And I'm just gonna copy and paste those in to save a little time. So we are going to allow h2 elements, images, links, buttons, paragraphs, line breaks, and strong tags. So that is going to pull out those figure elements, and it's also going to pull out all of the extraneous divs that we don't need. We're gonna be able to add in our own divs, just the ones that we need, inside our index.php template instead. So now, with the current code that's stored inside our block_rendered variable, we're going to use the strip_tags PHP function, which we are gong to apply to our block_rendered variable. And we're going to use the list of allowed tags that we just created. And then we're gonna feed the result back into our block_rendered variable so that it gets updated. So now this is the block content that we actually want to keep, and this is what we wanna feed back into our lpcontent array. But we have to do it in a way that we can then find this block again inside our array, so we need a key that we can use to look up this block. And that is why we made sure that we added class names for each one of our blocks, to make sure we could use those class names as keys in the array that we're setting up now. So now let's look up the class name for the block that we're currently iterating through, and we'll store it in a variable named section_class, a class for the section that we're currently looking at. So we need to dig into our block variable again. We're gonna go into the attributes subsection, so this A-T-T-R-S, this contains all of the settings that we added in here. So if you wanted to look up a placeholder, for example, as well, or the number of columns, you would need to dig into the attributes. And then inside there, we can look up the className. So now that we have that className stored in this section_class variable, we can use it to create a key in our lpcontent array. So go into lpcontent, and then we're going to add a key with the name of our section_class. And then against this key, we're going to store our rendered block. So now this filter so far is gonna go through every one of our blocks, strip out the HTML that we don't want, and insert that block back into our lpcontent array. And right now, even though we have applied our filter and we're echoing out our lpcontent, we're not really gonna see a whole lot on the front-end. If I refresh now, all it says is array because that's all we have to access at the moment, all that content is buried inside that array. And as you're going through this development process, if you wanna check on what is currently being held inside this lpcontent variable, we can actually turn this array into a JSON object and then output it in the console. So I'll show you how to do that cuz it's a good tool when you're doing this type of a development. So I'm gonna echo out a script tag. Inside that is gonna be a console log message. I guess strictly speaking, you could say this is kind of JavaScript, but not really. Then in here, Going to concatenate in some PHP, I'm gonna use the function json_encode. And we are going to json_encode this lpcontent array. So that's gonna turn that into JSON and then log it out into our console. So let's take a look. All right, so there we can see our whole object. At the moment, it's all looking a little bit messy still because we haven't finished doing the complete filter, but you can see that it is outputting our content. At the moment, it's not quite right because we need to still dig down into the nested arrays that form up our blocks, but that shows you the content of our array right now. What we can also see is that our tour category's heading is in there just fine. So our heading is just in the top level of our template of Gutenberg blog, so that's ready for us to access right away. So let's output that in our index page. So in here instead of just echoing out the entire array, what we're gonna do is dig into the array, use one of the keys that we just set up to pull out a specific piece of content that we wanna show you here. We know that our tour category's heading has the tour category's heading key. So we can use that to dig in here and pull that specific piece of content out. And now if we go back and refresh, that outputs just our heading. Right now you'll notice that that's not styled correctly. That's because in our original template, we used an h1 element here, you could see that there. So what that means is we just need to dig into our stylesheet for our theme, find the inner h1 styling, and just replace it with h2 styling. And now there's our heading with only the markup that we want, so let's just take a quick look here. Just the heading, with the single class that we need, no extraneous markup, and everything is styled how we want. So now we've written the filtering for our default block behavior. But most of our blocks are nested, they're nested outside our columns blocks and then inside our individual column blocks. So we're going to need to iterate inside this block variable in order to get into our columns and access all the data that we need to handle the content that's inside. So we're gonna add that column iteration into our filter in the next lesson. I'll see you there.

Back to the top