Stackable Gutenberg Blocks

Gutenberg is the new editor that came with the release of WordPress version 5 and with it came blocks. Blocks are the new way to layout a post or page in WordPress. Whilst there are set of standard blocks, a number of developers have created plugins with a whole new set blocks.

One of the first ones we tried was the block plugin by Stackable. A the time of writing, it includes 24 blocks including Pricing Tables, Testimonials and Team Members. 

We are going to go through the steps to create a simple Call To Action section using the Container block. Below is the example from the Stackable website. We use the same block for the Contact section on our homepage.

The first step is to create the Container block. All of the Stackable blocks are in their own section, unsurprising called “Stackable – Gutenberg Blocks”.

Once the block has been added, you can, if required, adjust the width setting.

The option to change the images are within the block settings and the image is upload via the Media Library . It is also possible to change tint strength which is similar to adjusting the opacity.

At this point, you can start to play with the blocks in the container. By default, it comes with a Heading and Paragraph blocks but these can be changed or added to. 

In the above container, we have two Headings and a Button block which links through to the Contact page. 

The introduction of Blocks into WordPress v5 and the Gutenberg editor makes being creative with posts a lot easier. New Block plugins mean that you can do more in the Gutenberg editor without the need to include lots of shortcodes.