In this article, we explore the GenerateBlocks plugin from the GeneratePress team, and how we can use it to create flexible layouts, and build beautiful designs.
We also show you how to make this already flexible plugin even more useful using a free third-party plugin that makes use of the native WordPress Block Pattern functionality, Block Pattern Builder.
I’m aware that at the time of writing, the WordPress plugin directory states that the Block Pattern Builder plugin hasn’t been tested in the last 3 major releases of WordPress.
I can confirm that the plugin works just fine up to and including WordPress version 6.
What is GenerateBlocks?
GenerateBlocks is a fantastic plugin by the creators of the similarly fantastic and functional WordPress theme, GeneratePress.
The GeneratePress theme has been around since around 2014, and it has been the WordPress theme of choice for many theme developers ever since. The reason? Its simplicity, core functionality, and extensibility.
In their own words, GeneratePress describes GenerateBlocks as:
GenerateBlocks is a small collection of lightweight WordPress blocks that can accomplish nearly anything.
https://generateblocks.com/
What makes GenerateBlocks so good?
What makes GenerateBlocks so good? Well, it allows you to add incredible versatility to your editor without bloating it with tons of one-dimensional blocks.
The GenerateBlocks plugin comes with just four blocks:
- Container. Which allows you to organize your content into rows and sections.
- Grid. Allows you to create advanced layouts using flexible and configurable grids.
- Headline. It allows you to create text-rich content with advanced typography configuration options.
- Buttons. A highly configurable button block.
Using all four blocks above provides fantastic freedom you might not expect without using some heavyweight page builder theme.
What can you build using GenerateBlocks?
You can build almost any layout or component using GenerateBlocks, even with the free version of the GenerateBlocks plugin.
I’m currently building a niche website project, and I wanted to create a number of components that would be used throughout the website. But I didn’t want to have to recreate it each time, and that’s when the WordPress block patterns functionality comes into play.
Before writing this post, I spent a couple of hours building a “suggested product” block, which would come in 3 different display options whilst also being responsive to mobile users.
Small Suggested Product
This block pattern will be used within more commercial posts, displaying product suggestions to break up the page’s text and promote relevant products for people to (hopefully) buy.
It is effectively a 2-column layout that works well at being eye-catching yet takes up minimal space.
The buttons are interchangeable, and they can also be removed if required.
Large Suggested Product
This is an alternative “suggested product” option, being larger and effectively having a predominant single-column layout, allowing for a larger image.
I also include a Pros/Cons 2-column block (also saved as a separate block pattern), allowing me to highlight the good and bad things about the product.
Top Pick Product Suggestion
Similar to the large product suggestion block pattern, except that I wanted a variation that is more likely to draw the eye as a user scrolls the page, and to highlight that this is the product that we recommend.
Responsive Product Suggestion Block Pattern
As the user’s viewport is reduced, the block pattern components will collapse into single-column layouts as required, ensuring the user experience and effectiveness of the block are not negatively impacted.
How to make GenerateBlocks more extendable
With GenerateBlocks already providing such fantastic functionality out of the box, how could we possibly improve its effectiveness and efficiency?
One thing that doesn’t come out of the box, and there is no mention that I found anywhere online, is the ability to use the native WordPress block patterns functionality.
“What are WordPress block patterns?” I hear you ask…
Block Patterns are predefined block layouts, available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration.
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/
So what we’re looking for is to be able to use GenerateBlocks extensible blocks to effectively build components that we would like to use throughout our website, but with the same simplicity of adding a new block.
Let me introduce the fantastic Block Pattern Builder plugin developed by Justin Tadlock.
Block Pattern Builder Plugin
The Block Pattern Builder plugin has genuinely changed my mindset about Gutenberg, making it much more pleasurable, especially when you use it alongside GenerateBlocks.
In fact, using Block Pattern Builder alongside GenerateBlocks is complementary, and I’d highly recommend installing it if you use GenerateBlocks.
I’d also like to suggest that the GeneratePress team look to implement the “save as block pattern” functionality within the GenerateBlocks plugin directly.
Summary
If I get enough time, I may create a youtube tutorial to recreate specific components from popular websites, showcasing the true flexibility and extensibility of GenerateBlocks, especially when we create and use block patterns within WordPress.
Please let me know your thoughts in the comments. Maybe suggest a few components you’d like to create for your website.