Using GenerateBlocks plugin to build custom blocks

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?

GenerateBlocks

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.

In fact, the GenerateBlocks plugin comes with just 4 blocks:

  1. Container. Which allows you to organize your content into rows and sections.
  2. Grid. Allows you to create advanced layouts using flexible and configurable grids.
  3. Headline. Gives you the ability to create text-rich content with advanced typography configuration options.
  4. Buttons. A highly configurable buttons block.

Using all four of the blocks above provides fantastic freedom that you might not expect without using some kind of heavyweight page builder theme.

What can you build using GenerateBlocks?

You can build pretty much any layout or component using GenerateBlocks. Even with the free version of the GenerateBlocks plugin.

I’m currently in the process of 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 decided to spend 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

Small suggested product component

This block pattern will be used within more commercial posts, displaying product suggestions as a way to not only break up the text found on the page but to promote relevant products for people to (hopefully) buy.

It is effectively a 2-column layout, which works really well at being eye-catching, yet taking up minimal space.

The buttons are interchangeable, and they can also be removed if required.

Large Suggested Product

Large suggested product component

This is an alternative “suggested product” option, being larger in size, 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 both the good and bad things about the product.

Top Pick Product Suggestion

Top pick product suggestion component

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

Responsive product suggestion block

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 the 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 make use of 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 to you 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 that much more pleasurable to use. Especially when you use it alongside GenerateBlocks.

In fact, using Block Pattern Builder alongside GenerateBlocks is truly complementary, and I’d highly recommend you install it if you use GenerateBlocks.

I’d also like to suggest that the GeneratePress team look to implement “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, which would showcase the true flexibility and extensibility of GenerateBlocks, especially when we then create and use block patterns within WordPress.

Please let me know your thoughts in the comments. Maybe even suggest a few components that you’d like to create for your website.

Useful links