An introduction to GenerateBlocks

The developers of GeneratePress have just released a new plugin that’ll open up a whole world of customisation for you to use on your WordPress website. They’re calling it GenerateBlocks and in this article I’m going to show you what this collection of blocks can do. Because they’re developed by the great team behind GeneratePress you can rest assured that GenerateBlocks are fast, easy to use, and highly customisable.

GenerateBlocks are meant for all WordPress websites that use the new Gutenberg block editor. It’s hated by many but I quite enjoy using it. That said, GenerateBlocks do offer a few more advanced features when used with GeneratePress. GenerateBlocks can essentially replace page builders such as Elementor and Beaver Builder without the extra bloat those bring with them.

Once installed, GenerateBlocks will add four additional blocks into your WordPress block editor:

Watch the video

Replacing Sections with GenerateBlocks

The sections will be replaced by a Classic Edit block

I’ve been updating a few of my pages and have replaced the sections (which are built in to GeneratePress) with GenerateBlocks. One such example is my Projects page. The first thing I did was disable the sections. This will leave everything looking a bit odd because all of the content will be placed inside of a Classic Edit block. But luckily all of the text is preserved so I can easily copy and paste it later, once my GenerateBlocks are in place.

The GenerateBlocks Grid

The first GenerateBlock I added was a Grid. When selecting a grid it will present an array of varying columns and sizes. Im going with two columns, each filling half of the space. This block “allows you to build advanced columns in your content. It uses flexbox, and even allows you to wrap the columns on multiple lines, meaning you can keep adding columns forever to build multi-line grids.

Into the first column I’ll add a container. Containers are “the core block behind [the] plugin. [They] allow you to create advanced (or simple) containers for your content.” So far for me, containers have been mainly used to add a coloured background to a collection of blocks.

The varying grid options
Containers allow you to add multiple blocks

Adding new columns

Once you’ve added a grid and selected a layout that grid isn’t set in stone. You can add further columns by selecting the grid and clicking in the + icon.

Changing the layouT

If you do add further columns you might also want to change the layout. If you had a 50/50 grid before and wanted a 33/33/33 grid you can simply select each column inside of the grid and change the layout.

The GenerateBlocks Container

But the containers aren’t just useful to add some colour. There are so many more options which can be edited to affect all of the blocks inside of it. First up are the typography options

Typography

The typography options will be applied to all of the blocks inside of a container. These include transformations (upper- and lowercase etc.) and font weight. Both of which are rather basic adjustments. But enable the advanced options and you can change settings such as:

  • The font itself
  • A fallback font
  • The font size

You can even select Google Fonts from these advanced options.

Spacing

Spacing options are what you’d expect them to be. But it’s so much easier doing things in a GUI compared to adding div containers and a number of classes.

The padding is the inner space of the container. Meaning, how far e.g. your text will be placed from the containers edge. The margin is outer space of the container. In basic terms that means how far the container is distanced from the object next to it.

Here you can also give your container a border and set a border radius. The border radius will round off the corners of your container. Though it might sound like it would be, the border radius is not dependent on the border size. The container this text is placed in has rounded corners but no border.

Colors and background gradient

These option will allow you to apply a background colour to a collection of blocks inside of a container. As a neat little feature, you can also select the transparency of the background.

If solid backgrounds are too boring for your WordPress site you can add a gradient. And the options are of how your gradient will look are almost limitless. You can select the direction, each colour, the stop position of each colour, and the transparency.

Background image

If solid colours and gradients are both not enough for you, there is also the option of adding a background image. Obviously having an image instead of a few lines of code will make your page a bit heavier though.

The GenerateBlocks Headline

Typography

The Headline can be compared to the Headings block built-in to WordPress. But on steroids. Under the typography settings you will find a similar selections of options when compared to the container. But here you’ll find a few additional fields for the line height and line spacing. Both of which are welcome additions when trying to fit a heading into a tight space.

When typography settings have already been applied to a container, and the Headline is placed in said container, these settings will take priority.

Spacing and colors

The spacing and colour options are quite similar to those of the container. However you’ll find some text-specific options here. Such as the option to change link colours and the possibility to highlight the text.

Icon

You also get the option to add an icon to your headline. GenerateBlocks has some icons built-in. If you can’t find a suitable one you have the option to add icons as SVG HTML. A good place to find such icons is Google’s Material Design website.

The GenerateBlocks Buttons

The default button WordPress offers is rather boring. Up until now I’ve resorted to creating my own buttons and styling them using CSS. GenerateBlocks once again makes creating interesting looking buttons easy.

Colors

When adding a button you’ll find many of the same settings we’ve just been over. Though I did want to highlight the colour options. Using these you can create transparent buttons, that only have a border and turn solid when hovered over (ghost buttons). Just like the four buttons at the top of this page.

To do this you have to make the background colour transparent. Then give it a border colour. To make the border appear you’ll have to adjust the border width under spacing. To finish it off all you have to do is add a hover colour.

Avoiding confusion

Block navigation

When placing a number of items inside a container and then maybe placing that container into another container and so on, things can get confusing. And you might not even be able to select certain blocks anymore using the block editor.

There’s a simple solution to this: The block navigation. Just click anywhere on a container or grid and select the block navigation in the top left-hand corner of your editor. Using this you’ll be able to select any of the blocks inside of a container.

Summary

In summary, I can highly recommend GenerateBlocks to anyone creating WordPress websites. This plugin will allow you to design your site the way you want to. And all without ever writing a single line of code. As we’d expect from the GeneratePress developers it is fast, responsive, and built to the highest standards. You might still encounter a bug here or there, seeing as it is rather new, but so far for me it has been rock-solid and has quickly turned into one of my default plugins.

Wishlist for future GenerateBlocks

Posts

It appears that WP Show Posts, a plugin I’m currently using on all of my WordPress sites, isn’t being actively developed anymore. The last update on GitHub was in 2018. So obviously I would love to see parts of WP Show Posts pop up in GenerateBlocks.

A block to embed other posts on a page or post is needed would be the perfect addition to GenerateBlocks.

Presets

I don’t know if this would even be possible but I’d love an option to create presets. The headlines I’ve created for this post are all just duplicates of the last one. I would love it if GenerateBlocks would allow me to set it up as a preset and then select it when I want a headline in the same style.

AMP integration

AMP is a bit of a hot potato in the web development word. But Google loves AMP and I need Google to love my websites. As such, integration with the official AMP plugin would be great.

Links and downloads

GeneratePress Pro

The best WordPress theme out there. Use my affiliate link and show me some love.

GenerateBlocks

Visit the official website for more information.

WordPress

Install the Plugin from the WordPress website.


Photo by Ilario Piatti on Unsplash

1 thought on “An introduction to GenerateBlocks”

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.