About 10 months ago I wrote a blog post, “A Simple Page Layout with the WordPress Block Editor”, as an exercise to compare using just the block editor versus using the block editor plus one of a couple of plugins; Stackable and Kadence Blocks. I concluded that:
The Stackable and Kadence Blocks plugins both made building my page a bit quicker and allowed me to make the site look more interesting without using code, but it was pretty straightforward to build the page using just standard WordPress blocks.
Since then, the blocks plugins I have used most often have been Kadence Blocks and Ultimate Addons for Gutenberg.
Now that GenerateBlocks has been released by Tom Usborne, the developer of my favourite theme, GeneratePress, I wanted to have another go at building the same layout with this new plugin for the WordPress block editor. Note that GenerateBlocks can be used with any theme, not just with GeneratePress, although there are some features that are designed to work hand in hand with the GeneratePress theme.
GenerateBlocks is described as “A small collection of lightweight WordPress blocks that can accomplish nearly anything.” It is not supposed to include a block for every possible purpose, but can be combined with core WordPress blocks and ones from other plugins.
The plugin has just four basic blocks: Container, Grid, Headline and Buttons (although strictly speaking, there is a Buttons container block surrounding one or more Button blocks). These blocks have more or less the same controls for Typography, Spacing, Colors, Gradients, Backgrounds and SVG Icons.
Although I’ve been impressed by Kadence Blocks and I’m not actively looking for something to replace it, I’ve seen from posts in the GeneratePress Facebook group how much time and care Tom has put into developing and thoroughly testing GenerateBlocks. I know that he has a reputation for lightweight, dependable, well-built products so I would expect GenerateBlocks to be a good, solid choice for building pages with the WordPress block editor.
As before, for this exercise, I built a layout composed of:
- A full width image at the top of the page, with a heading and a button on top of the image
- Two rows of 3 images each linking to a different page
- A section of text with an image as its background.
This article is not specifically aimed at users of the GeneratePress theme, but that is what I chose to use, along with the GeneratePress Premium plugin.
I added a new page but before starting to build the layout, I decided to disable the content title, which is a feature available in GeneratePress Premium.
I installed and activated the GenerateBlocks plugin and added a Container block to my new page.
It’s important to note that the width of the Container block is constrained by the width of the page content as a whole. In order to make the Container block stretch across the entire width of the screen, both the Container block, and the page content container need to be set to “Full Width”.
For the GeneratePress theme, it’s possible to set the entire page to full width by selecting the Full Width option under “Layout” and “Page Builder Container”.
However, GenerateBlocks provides a shortcut that does the same thing.
If “Set Full Width Content” is switched on for any block on the page, then this setting is applied to the page as a whole.
The width of individual Container blocks can be set to either Full Width or Contained within this full width page content container.
The switch will not be displayed if you are not using the GeneratePress theme.
If you really don’t want to set the entire page to full width, but just want one Container block to be full width, then there is a rather inelegant work around. You can give just that Container block a class of alignfull, but it seems best to use the blocks as their developer intended and go with a full width page.
The Container block has a lot of different settings, which can be set independently for desktop, tablet and mobile. I gave the block some top and bottom padding and added a background image.
Comparing this block to the Kadence Row Layout block, I saw that Kadence offers a couple of extra features, i.e. video backgrounds and shaped dividers, that are not currently available for GenerateBlocks. But most options are similar for both plugins.
It was a similar story when I moved on to the Headline and Buttons blocks (see below). GenerateBlocks and Kadence Blocks provide a similar level of control with minor differences here and there. For example, GenerateBlocks has an SVG icon component for both headlines and buttons, whereas Kadence has icons for its Advanced Button block but not for the Advanced Heading block. In several areas, one or other of the plugins has a few extra options, but there isn’t a lot to choose between them.
The next step was to add a GenerateBlocks Headline block. The standard core WordPress Heading block would have been sufficient really, but I wanted to investigate the GenerateBlocks version. This gave me a great deal of control over the font, size, colour etc. and I could even include an icon.
I used the GenerateBlocks Buttons block to add a button under my headline. The Buttons block is a container for one, or more, Button blocks. As with the Headline block, the Button block has Typography, Spacing, Colors, Background Gradient and Icon components.
I used the Spacing and Colors components to change the appearance of the Button block, and then went up one level to the Buttons block that contained it to move the button to the centre.
I increased the padding of the Container block slightly, to show more of the background image, and then my hero section was complete.
Rows of Images and Buttons
I used GenerateBlocks’ Grid block for this section of the page. I’d recommend taking a look at the documentation for this block, https://docs.generateblocks.com/article/grid-overview/ , as it’s a powerful and useful block that works a bit differently from the columns that you might have used before.
I started by adding a Container block and setting it to “Contained” rather than “Full Width”, then I added a Grid block with a single grid item within that. This was because I knew that I wanted to end up with six boxes with a similar layout. If I started with a single box then I could get that looking just right before duplicating it five times so that all my boxes matched.
I added an Image block within the grid item and linked the image to one of the other pages of the website.
I put a GenerateBlocks Headline block below that, set to H3 and another one after that set to paragraph. I could have used core WordPress Heading and Paragraph blocks, but the GenerateBlocks versions allowed me to play around with the padding and margins until I was happy with them. I added a GenerateBlocks Button block and gave the grid item a border.
I set the Horizontal Alignment for the grid item to “Center” and input values of 24px and 36px for the Horizontal and Vertical Gaps respectively.
I duplicated the Container within my Grid, set the width of it, and its clone, to 33.33% and duplicated again until I had six boxes. Then it was just a case of editing the images and text in each box.
I was able to specify that the grid items should each take up 33.33% of the width on a Desktop, but should be 50% on a tablet and 100% on a phone.
Full Width Photo and Text
This was pretty straightforward. I added a Container Block set to Full Width, but with the Inner Container set to Contained, and gave it a Background image, with a setting of Fixed and a coloured overlay.
I used a GenerateBlocks Headline block and a standard WordPress Paragraph block, then adjusted the padding of the Container block once I could see how it looked.
The Final Result
After seeing the discussions in the Facebook group, I was expecting to be impressed by GenerateBlocks and I wasn’t disappointed. I felt that it was beautifully designed, simple and well organised. The Grid block is particuarly interesting as it is not just an improved version of the standard columns block. I can see myself using GenerateBlocks in future, alongside other blocks plugins.