Build Versatile Layouts with the GenerateBlocks WordPress Plugin

Over the past few weeks, I have had the GenerateBlocks plugin sitting in my test environment. I have built a few layouts with it, tinkering with the plugin between other projects. The one thing I kept thinking was that it had huge potential. Aside from a couple of issues, I began enjoying the plugin more and more as I played around with its options.

GenerateBlocks was created by Tom Usborne. It was built specifically to work along with his popular GeneratePress theme. However, the plugin claims to work with any WordPress theme.

GenerateBlocks is meant to be the block answer to the page builder question. It is meant to take those elements that make page builders so popular and boil them down to a handful of blocks. It is meant to simplify the process of building complex layouts without the need for heavier solutions. The question is whether it holds up — does it do the job it set out to do?

Overall, it works well, particularly in terms of giving more freedom with layout building. It will not likely eat into the market share of page builders any time soon. However, it may make for a few more converts to the block editor, especially with those who are not tied into an existing solution and are looking for something lightweight.

Watch a quick video on how GenerateBlocks works:

The Plugin’s Blocks

Example output of the GenerateBlocks' editor blocks: container, grid, headline, and buttons.
Using each of the GenerateBlocks plugin’s blocks in a section.

GenerateBlocks’ bread and butter is its Container block. It is the WordPress Cover and Group blocks rolled into one with a gluttonous amount of additional options that cover nearly every need.

The one major area that the Container block falls short is with handling full-width sections. Instead of taking advantage of the standard full-width block alignment option that all themes can opt into, it goes with a custom solution. That solution is to provide a notice that the user’s theme must have some sort of full-width content option (likely via a page template). By choosing this route it means the majority of themes, including those built to style blocks, will not support the GenerateBlocks Container block when set to full width.

For end-users who are using a theme that supports the standard full-width block alignment, there are two tricks to bypass this limitation. The first solution is to enter alignfull into the CSS Classes field under the Advanced block options tab. The second solution is to wrap the Container block with the WordPress Group block and set it to full width. How these solutions work out will largely depend on how the theme handles those elements.

With all the flexibility of GenerateBlocks, this would be the reason that I would not recommend the plugin to users who want full-width layouts. The two tricks are not an ideal user experience. In design, the most important thing is for the user to not have to think. The provided solution should simply work.

If we gave that single element of the plugin a one-star rating, everything else would be an easy five stars.

The plugin’s four blocks can easily replace several other blocks. Instead of creating a library of dozens of one-off blocks, GenerateBlocks adds versatility without going overboard. It is easy to see why users have given it a perfect five-star rating (out of its current 34 reviews).

In total, the plugin adds four blocks to the editor:

  • Container
  • Grid
  • Headline
  • Buttons

Admittedly, I am partial to Automattic’s Layout Grid plugin, primarily because I prefer the visualization of the grid in the background. It puts me at ease. However, the Grid block in GenerateBlocks runs a close second. In practice, it is more flexible, providing more layout options out of the box and fine-grained control. For those who need greater control over column widths and a host of color, typography, background, and spacing options, GenerateBlocks is a no-brainer.

The grid block from the GenerateBlocks plugin in the WordPress editor.
Inserting a new Grid block in the editor.

The Headline and Buttons blocks are essentially recreations of the core Heading and Buttons blocks with all the options that make this plugin useful. Plus, the blocks have an extra icon option, which allows users to choose between entering custom SVG code or selecting from a predefined list of general and social icons. This is a nice touch that I would like to see in core WordPress.

The thing that makes the four plugin blocks so flexible is the bounty of block options. For every block, you will find most of the following options tabs with numerous fields under each:

  • Typography
  • Spacing
  • Colors
  • Background Image
  • Background Gradient
  • Advanced (extra options for the core tab)
  • Icon

The plugin also provides options based on desktop, tablet, and mobile modes. This allows end-users to make changes based on the screen size of the website visitor.

If I had one other nit-pick about the plugin it would be that its color options do not take advantage of the theme-defined color palette. For design consistency, it would be nice to be able to use those without using a color picker or entering the hex code. Update: there is a “Show Color Palette” button that does this, but it was not apparent that it would provide access to my theme colors.

Final Thoughts

Would I recommend the plugin? Absolutely.

I would make sure to note the full-width Container block issue with that recommendation. If you are using this with a theme other than GeneratePress, you will need to have a solution for handling full-width sections. For me, this is the most vital piece of what is essentially a layout builder, and it failed to live up to that expectation.

However, one issue does not discount the usefulness of what the developer has built. It is a solid plugin. Under the hood, it is a well-coded and documented piece of software. I have no doubt that it will be serving many more users in the years to come and will only continue to improve.

22

22 responses to “Build Versatile Layouts with the GenerateBlocks WordPress Plugin”

  1. Thanks for the article, Justin! Really happy to hear that you like it!

    When it comes to the full-width option, I think this is likely something I’ll integrate for people not using GeneratePress. In GeneratePress, I prefer the full-width template route to an alignfull class, but I realize this may not be the case for other themes.

    As for the color palette issue – there is actually a “Show Color Palette” button you can toggle in the color picker. However, I’ve had a few people mention they would rather the palette show by default, which I’m also leaning towards.

    Thanks again! :)

    • It might be worth showing the palette by default. I’ve had the plugin installed for three weeks and didn’t even notice. :)

      I’d welcome the integration with full-width alignment. I’m making it happen by wrapping in a Group block, which feels wrong since the Container block is essentially a Group block (but with cooler options).

      Anyway, great work. I hope the feedback helps.

    • I had a chance to go back and look at the show color palette button this morning. I do remember seeing that button now, but it wasn’t apparent that it would show my theme colors. Plus, it’s tucked in there right next to the clear color button, which shares the same design. I definitely think it would make for a better user experience to follow the core model of showing the palette by default while providing a button to add a custom color.

    • I agree – I’ve made the palette the default view in 1.1 (with an option to make custom colors the default if you’d like).

      I’ve also added align-wide/align-full support to the Container block in 1.1. That being said, I still suggest that people start with a full-width content container (if possible) and then define contained containers inside their content. This way you’re not using 100vw CSS (which causes horizontal scrollbars sometimes) or needing to define widths to everything :not(.align-wide/full). Still nice to have the option though in case your chosen theme handles those classes better.

      Really appreciate all the feedback! Thanks again :)

    • Hello, Tom! Wneh will GP Premium 1.11.0 (GeneratePress + GenerateBlocks) be released? Please add VK and Telegram to the “Social Sharing” option in your great WP Show Posts Pro plugin!:) At this moment there are only Twitter, Facebook, Google+ and Pinterest :(

  2. I’ve tried this awesome plugin and I love the way it let me set all the options I need.
    But Gutenberg destroyed my work when I switched to HTML view because it converted my container in single blocks.
    Is there a solution for this issue?

  3. Hello Justin,
    thank you for review the plugin of Tom, he is a guarantee!
    I have him Theme and i buy it because he knows how to do the thinks simple, and again, with this plugin GenerateBlocks he did it again.

    I dont advise the problem with the width because i have Generatepress Theme.

  4. I’ve been happily using this plugin but I did struggle with the full width issue at first, now I know why. I do enjoy it’s simplicity, I’m also left wondering why this functionality isn’t part of the core set of blocks ( but I acknowledge that smarter minds than min make these desicions ).

    I’m using it with the Astra Pro theme and full width works nicely with the Astra’s full-width/stretched page layout. I think I’d be more encouraged to see plugin use the more standardised WordPress approach.

    Having said that I may just invest in Generate Press and enjoy the integration.

  5. I have used so many plugins to build layouts but all that i’ve built well looked on desktop but when seeing on mobile the layout is miss placed or sometimes broken or look not-uniform.
    So if you build a plugin which i build and preview it on various devices like tablet. laptop and mobile it would be more helpful.

  6. In my WordPress setup there are mainly Generateblocks and Generatepress. The best duo to get 80%-90% of the most important functions. The support is really really good with Tom and co. And on top of that, it’s based on lean code. Just cool and 100% recommendation. I say this now after 4 years of experience and yes I have tested countless other themes/plugins.

  7. I have been working with GeneratePress for many years and was very happy when I heard about GenerateBlocks. I immediately downloaded the Alpha version, tested it and was thrilled.
    Tom Usborne and his team are doing a great job. I have never experienced such good and fast support anywhere else.

  8. Hey Justin,

    Thanks for this awesome write up. Have been playing around with this for sometime now, and must say the fact that anyone can build reusable blocks, this feature is also praiseworthy. For someone new to CSS, I would say it might be a bit tricky at the initial. But, nonetheless the whole flexibility of building a block to be reused for later is a fascination in itself. Though I believe there are other block plugins too who can do this, right?

  9. For me, GenerateBlocks is the best tool to create the layouts I want.
    It´s easy to use and the possibilities are endless.

    I love the fact, that there are “only” four blocks to use. Grid, Container, Button and Heading. You can do nearly everything with it. If I can´t do it with one of the four blocks, I just use some custom code.

    I totally recommend GenerateBlocks. This solution is kickass!

  10. Tom Usborne has done it again. GeneratePress is the foundation, GenerateBlocks is the icing on the cake. I absolutely love the flexibility and features that GenerateBlocks afford over traditional, bloaty page builders. GB is the perfect way to separate content from design, especially if clients are going to do most of their content updates themselves.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.