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.2 Set Up Column Iteration

As our columns are composed of nested blocks, we’ll need to set up an iteration process that renders them differently from the default. We’ll set up the groundwork of that process in this lesson.

4.2 Set Up Column Iteration

Hey, welcome back to building Gutenberg template layouts without JavaScript. In the last lesson, we set up our filter with its default functionality for rendering out our blocks and taking our content and putting it into a modified version of the content saved into a variable named LP content. But the problem is this iteration loop here only goes into our array of content one level deep, but if we recall, our columns are nested in several levels. We have our columns, and inside that, we have our individual column items, and then inside that again is the content itself, the image, the button, and the paragraph. So we are gonna need to add some extra iteration inside this for each block to enable us to process our columns differently to the rest of our content. So we're just gonna start by moving this section_class variable up to the top, because that's always gonna be something that we need to do whether we're rendering our columns block or any other block. Now we're gonna need to put in a check to find out if the block that we are currently iterating through is a columns block or not. To do that, we're gonna say if. And then in here we'll grab our block that we're currently iterating and we'll look inside it at its block name and see if that block name equals core/columns. So that is looking for this block name here. If the block name is core columns, then we're going to process that block differently and if it's not then we gonna use a filtering code that we already setup. So going to wrap our else statement around the code that we already setup before. So now everything that is not a columns block is gonna get processed the way that we were processing our heading block before. Now we are gonna get a little bit tricky with how we're gonna process this data because in our template blocks, we had to separate our two rows. We had two create a row here, our first row in one columns block and then we had to create a separate row. But in our mark up, we don't want two separate rows. We just want to get in and access each one of our two categories. And put them all into a single div so that we can just let CSS grid control their layout. So what we are going to want to do is create a single array that has all five of these columns in it. So what we're gonna do is look for this tour categories, class name when we're iterating through these blocks. The first time we encounter it is gonna be our first row. And we're going to use this class name to add an array key into our array. And then, we're going to add these two blocks against that array key. But then, when we encounter the tour_categories key, the second time we're gonna know from that, we've now found our second row. And for these next three columns we're just gonna add them in against the array key that we already set out for the first row. So that way we get all five columns, put into our array in the same section. So the way that we're gonna code that up is by looking to see if the section class array key that we've been working with so far is already in our lpcontent array. So we can do that with the array_key_exists function, so array_key_exists. And we give the function the key that we're trying to find, and the array that it should search inside and this function is going to return either true or false. But what we are actually looking for to start with is if the key does not exist in our array yet because if it's not there then we're gonna add it. So we're gonna add an exclamation mark at the side of the function to say if the array key does not exist. Then we're going to wrap this all in an if check. So now if that key does not exist in our array we're going to create it. We do that by saying LP content, adding in that key, and then we're going to give this newly created entry in our array a value. And that value is just gonna be another empty array and we're going to fill this array with all of our individual columns. So when we hit our first block of columns, this check is going to be run. It's going to find that we haven't added any of our columns into our content array yet so it's then gonna make a space for it. But when we hit our second column, this check is gonna find that we do already have a place for our column content to go. So it's not gonna make anywhere new for our content to go. We're just gonna keep inserting it into the place that we already created. And that might sound a little bit confusing, so just to try to clarify it a little bit more. Once we're actually into our front end, in practical terms, what this is gonna do is give us an ability to target our tour categories like this. With this key here, so we'll be able to just search for LP content tour categories, and that will bring out all five of our tour columns. So, just leave that for now, and we'll just carry on building out our filter. So now, we need to setup another for each loop. So referring to our content up here, again we know that we are inside one of that columns blocks, and we next want to get into the next level which is each individual column. So in here we'll set up another for each loop. And this time we're going to grab our block variable again and we're going to look inside the block variable for inner blocks. That's always a standard name that's used in this setup for any nested block, and we're gonna say as, and then we're going to get the key for that inner block. And then because we know that what we're trying to grab here is actually individual column, we're going to output the content here as column. Now we need to repeat what we did up here for our upper level blocks. We need to get in and grab the class name of the column so we can use it as an array key. So we're just gonna copy and paste that inside our for each loop and just modify a little bit. This time instead of the section class we gonna call this our column class because it is the class for this column. And now we need to look inside the column variable inside its attributes to get its class name. Now before, this is the line that we use to put content back into our LP content array so I'm gonna copy that. I'm gonna reuse it up here with a little modification. We do want to put our content under the section class key that we defined up here, but we wanna put it into a sub category lower than that again, so we're gonna add another key, And that is gonna be our column class, and this is where we're gonna store the rendered out content from each of our three actual content blocks, so our image, our button and our paragraph. So that's gonna be an array of another three blocks, so for now we'll just add an empty array in there so that we have something being stored. I guess now would be a good time to go back to our browser and have a look at what our console is outputting now. If we refresh our page and we check out our console output, now we can see the object that's being output here has changed. We've still got our tour-categories setting, that's the same, but now our tour-categories object is here and inside it we have nested these five empty arrays. So we have successfully created a space for each one of our five columns to have its HTML stored. And we've also successfully taken those class names that we defined earlier and used them to act as keys in this array. So that when we're ready, we can use those keys to look up this content. So now, all we need to do is render out the actual content itself, by which I mean this image, button, and this text here and then store it in each one of these arrays. Then, we'll be ready to output it, and our whole layout will be finished. So, we're gonna go ahead and add rendering of our columns in the blocks in the next lesson. I'll see you there.

Back to the top