There are a lot of great core blocks with the WordPress block and site editors.
But there is one glaring need that is sorely lacking at the moment: a powerful grid block.
So that was one thing I targeted as needing when building out the Crosswinds Framework. I wanted to create a grid block that not only added a simple grid to a post or page but also gave the user a ton of control over how the grid and grid items inside of it looked.
The result turned out to be really cool, and it was surprisingly not as hard to build as I thought it was going to be at the beginning.
So in today’s blog post, I want to go over my thoughts on planning how to build the grid block, how I ended up building it, the future for the block and what I learned from it all.
The Need for a Grid
As I mentioned previously, there isn’t a grid block in WordPress core at the time of this writing. You could use columns blocks to try to create a grid of sorts, but making it look good responsively would be a massive challenge.
But that wasn’t going to work for me with creating the Crosswinds Framework. I knew I was going to want to use grids for various things with the themes, and I knew that it was going to be worth the time building my own grid block that could do a lot of cool things rather than waiting for something to appear in WordPress core.
The Plan
Figuring out how to go about creating a grid block that allowed for flexibility but kept the grid looking good at all screen sizes was a bit of a challenge.
First off, I had to determine the block structure for the whole thing. Eventually I settled on creating two blocks: a basic grid parent block and a basic grid item block.
The parent block would be a container for all of the grid item blocks. It’s also where a user can set the number of columns that are used at desktop, tablet and mobile screen sizes. The user would also be able to set the size of the gap between grid items here as well.
The grid item block would be for each grid item and would come with a group block as an inner block by default. The user would also be able to set how many rows and columns a grid item spanned at the different screen sizes and set whether it would be a flexbox item and how to arrange items inside of the block.
So with that out of the way, it was time to build the block.
Creating the Parent Grid Block
First, I needed to create the parent basic grid block. And it ended up being pretty simple.
I used the RangeControl component for the number of columns at different screen sizes while limiting the number of columns to a maximum of 12. I also used the component for the grid gap size and set it up where a user could have a uniform grid gap or change the column and row gap independently of each other.
Finally, for the inner blocks template I made sure to set the grid item block as the only allowed block. But more on that later.
Creating the Grid Item Block
Creating the inner grid item block was pretty simple as well.
The only real challenge was getting the items set up to where they could span multiple columns and rows, but that was solved pretty quickly. Once again I used the RangeControl component for this as well as using CSS.
There was also the added feature of allowing users to choose an inner flexbox layout for the grid item: normal, center aligned, aligned bottom or align the last item at the bottom.
And then for the inner block, I made it where a group block could be the only block added inside the grid item (though a user can obviously use any block inside of that group block).
Advanced Features for the Grid Block
There are few advanced items that seem kind of small but really take the grid from something simple and turn it into something powerful for creating unique layouts.
Only Using the Blocks in Tandem
First off, I wanted to make sure that when the grid block was in use that only the grid item block could be used directly inside . And likewise, I wanted to make sure that the grid item block could only be used inside of the grid block and nowhere else.
The latter is really easy to do. In the block.json file for the grid item block, I added the basic grid block as a parent for the grid item.
"parent": [
"crosswinds-blocks/basic-grid"
],
And for the former, I used the allowedBlocks property for useInnerBlocksProps to only allow the grid item block to be added as an inner block for the grid.
const innerBlocksProps = useInnerBlocksProps( blockProps, {
allowedBlocks: [ 'crosswinds-blocks/basic-grid-item' ],
} );
This way the blocks could only be used in tandem with each other.
The Grid Settings
The other part of the grid block that’s a bit advanced is the ability for a user to choose how many columns are shown at various screen sizes.
As I mentioned before, I used the RangeControl component to create the fields for the number of columns at desktop, tablet and mobile screen sizes.
And then to get those changes to take effect, I ended up using CSS (not inline styling or HTML). I found that using a structure like has-{number}-desktop-columns or has-{number}-tablet-columns allowed me to make sure that the number of columns showed up correctly at each screen size. I did have to write CSS specifically for each of those number of column classes, but with limiting the number of columns to 12, it was manageable.
Grid Item Settings
Finally, I also wanted to give users more control over how each grid item looked, specifically how big a grid item could be. One of the best parts about the CSS grid is that it’s easy to make grid items span multiple columns and rows to create unique and interesting layouts.
And adding that option to the grid item block turned out to be pretty simple. In fact, a lot of what I did came right from the grid block, using the RangeControl component for the column and row span options at each screen size. And then again I used classes like item-span-${ gridColumnSpanDesktop }-desktop-columns and item-span-${ gridRowSpanTablet }-tablet-row and CSS to control the column and row spans at each screen size.
The Future for the Grid Block
So what does the future hold for the grid block in Crosswinds Blocks?
Well for the most part, I think it’s pretty good as is. It’s a great block that I have used a lot on my various websites. And I hope that others who have used it have found it to be a great tool to create amazing layouts on their posts and pages.
There is a part of me that would like to take it to an advanced level by adding template areas as a feature. That’s one of my favorite features of the CSS grid and it allows you a lot of options for designing pages.
But I also know that it’s something that will be really tricky and challenging to figure out. So it might be a while before I’m able to get that built and shipped.
