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.3 Render the Column Inner Blocks

We can now complete our custom Gutenberg layout by rendering out the inner blocks, those nested inside our columns, and outputting them to our front end.

4.3 Render the Column Inner Blocks

Hey welcome back to building Gutenberg template layouts without JavaScript. In the last lesson, we finished getting our erase it up so that there is a nice little container ready for each one of our five tour categories. Each one of those categories has three inner blocks, it has an image, a button and a paragraph. So now we need to render these bits of content out in the way that we want. And put them inside these empty array containers so that we can then output our html and complete our layout. So at this point in our iteration circle here, we're currently iterating inside our individual columns. As I said, each of those columns then has three of its own blocks, so now, we need to iterate through those column inner blocks as well. So we're gonna set up another for each loop. We're gonna iterate through our column variable and once again we're looking for inner block. And we'll get them as a key, and we'll store the actual block content itself in a variable named Cole Block. Now for each of these column inner blocks, we're basically going to do the same thing that we did here to our top level blocks. I'm just gonna copy and paste that code and instead of saying block rendered, I'm going to say called block rendered. Yeah, and here and instead of rendering our top level block, we're gonna render our column block. Just copy that call block render there as well. We're gonna be stripping tags just like we did before, with the same set of allowed tags. We're gonna be adding our colBlock_rendered code back into our lpcontent array. But we need to go a couple of levels deeper inside our array to make sure that we're inserting our blocks inside these containers that we have set up for them. So the class name of the overall section gives us our first level of key name. Below that, we already set up here another level of nesting. So we need to carry over this column class. And then we're gonna need to go in one level deeper again so that we have a separate space allocated to each one of these inner blocks. And to add a key for that level, we're just gonna use this key here. So now, let's go back and have a look at what's being output in the console. So we'll refresh and we'll check inside here in our tour categories, and there we go. Inside each one of these tour category objects, we've got three entries. And you can see with the coding here, this first one is an image. Then we've got our button, and then we've got our paragraph of tua text, so that's perfect, that's exactly what we wanted. Now, let's output this content out to our index page. This is where we're going to refer back to the index html page of the static HTML version of what we're creating. We're gonna go into our tour section. And here we can see we need to wrap our entire tour category section the div using that same class nine. So underneath that heading, let that in, and then we close div. And now we know that our tua categories are contained in an object with this tua categories key. I'm just gonna copy that tua categories key and now in here, we're going to need to iterate through that tua categories array. So we set up a php snippet and in here we're going to say foreach. And then the array that we are going to be iterating through is our lp content variable. So we just add that in, and then we're gonna use that tour categories key. So we're gonna say as key and we'll store each one of our tour categories in the variable tourcat. Now, inside this for loop is where we wanna output the html that we wanna use. So make sure you're going to close off this bit of php here and here so you can just write straight up html inside this for loop. And the first thing that we're gonna need, just like in our original html, is a div for each one of our tua categories. And that div should output the class name related to that category. So to do that, we're gonna add in our div. Then we're gonna add in a class, and the class name that we need is actually gonna be output under this key variable. So add another page piece of it. I'm just gonna copy this to save talking you out all the little php with some pieces and we're going to echo that key variable. Now if we just take a quick look at our html, let me refresh. And now in here, There we go. Now we can see each one of our divs with the class name that we allocated to each one of our columns output in here. The next thing that we wanna do is output our image, then we need to div with this class to an overlay, and then out button, and our tour text. So I'm just going to copy that snippet for now and paste it in here, inside the div that we just created. Just fix up the indentation. Now we're gonna replace this line, this line, and this line with a couple of PHP snippets. And we can refer to our console output again to see what we need to actually grab out of our array. Now I didn't bother giving a names key to each entry in this array because we only have three. So what we're gonna do is just use the numerical array key to pull out each piece of content. So our image is under the array key zero, our button is under the array key one and our text is in the array key two. So let's just add in a couple more PHP snippets. We need one here. And we're going to echo tour_cat with the array key zero. Now let's copy this one. I'm gonna paste it over the top of both of these lines and we want to echo tour_cat one. And on another line, tour_cat2, so now let's see what we've got. Refresh once again and now there we go. That's outputting all our content. Now there's just a couple more things that we need to change. So in our original CSS, this div had the class name Rome, we replaced it with something more generic to our cap one. So we're just gonna need to go into our style sheet, open that up and we'll find Rome and we're gonna replace that with Tour cat one and refresh. All right, so now that's fixed up our layer. And now you can see here that this still has the styling that's been applied to this button by WordPress default Gutenberg style sheet. And the reason for that, if we look in the inspector. Is because it still has this class applied to it, WP block bottom link. So we wanna get rid of that and replace it with our own class name. So for that, we've got just one more piece of code to add to our filter. So we'll just jump in here and then after we have stripped the tags that we don't want from our rendered column, we're gonna check if the column that's currently being integrated is a button. So we're gonna do that with the same type of check that we used to see if we're working with a column block. So I'm just gonna add this in here and this time we're checking on the column block block name and we're looking to see if it is core button. If it is, then we want to strip out that WP block button link class and replace it with our own. So we're gonna be updating our rendered code. So we'll grab that variable, we're gonna change its value. We're gonna use this string replace function, so str_replace. First we need to provide the string that we're gonna search for and that is the class we don't want which is wp-block-button__link. We wanna replace it with our own class name and we actually already defined the class name that we wanted to use on our buttons here, button two. So we're gonna dig in to our currently iterated inner block to find that class name. So we're gonna do that the same way that we've found class names before. So I'm just gonna grab this code, copy and paste it. Only instead of looking for the attributes and class name of our column, we're looking for the class name of our column block. And then as the third parameter, we just need to provide the string that we're trying to replace content in. And that is the string that's currently being held in our cold block rendered variable. So just to summarize, this function string replace is going to search our current rendered column which is our button. It's going to look for, This class name that we don't want and it's gonna replace it with the class name that we specified ourselves. So now let's go back and have a look at our front end, we'll refresh and there we go. Now that old class name is gone, it's been replaced by our own class name that we specified in our block template, and now everything is completely done. We've got our heading being output just how we want. We've got our content being output just how we want. It's not separated into two different rows anymore. We're using a nice CSS grid and we have full control over how our buttons and text and images are all being output in our back end. We have a layout that matches our front end, so that clients and site users can come in and make adjustments to the content that's appearing on the front end in a comparatively wizzywig type of format. Again it's not a perfect one to one match, but it's certainly close enough that you get a clear idea of how making changes here is going to influence what you see here. And we did it all just using PHP, without any JavaScript or any complex JavaScript-based build processes. So now we have just one more video left in the course. We're just gonna quickly wrap everything up, just touch on what we've learned throughout all of these lessons. So I hope that you'll join me in the final lesson of the course. I'll see you there.

Back to the top