The Gutenberg Post Blocks plugin provides a solution to the common problem of how to show a listing of your posts or Custom Post Types. Many block addons have a Posts block, but you are stuck with the layout and display options they provide. Gutenberg Post Blocks, on the other hand, is a dedicated tool for displaying posts and it comes with a large number of content, layout, and display options.
Video
Versions
Free Version
There is a free version of Gutenberg Post Blocks in the WordPress plugin directory. Gutenberg Post Blocks is a relatively new plugin, the first version was released just over a year ago in November 2019. It has more than 9,000 active installs and 57 five star reviews. The support team is active in responding to support request. I submitted a feature request back in November and it was recently implemented.
When you install the free version you get a new menu in the WordPress admin area.
The Saved Templates menu area is where you can create a layout or section template using Gutenberg and Post Type Builder and it gives you a shortcode you can use to include it in another page using your page builder.
The Addons menu lists the three addons currently available. Here you and disable or enable the ones you want to use. The Saved Templates and Elementor Addons are the two that come with the free version.
The Settings Menu area is where you can select the way the CSS style sheet is loaded, the preloader style, the default container width, and the editor container. There is also the option to hide the template import button. The plugin documentation suggest Heading while development and File System for production sites. I changed the Container Width to 1290 to match the Kadence theme default. For Editor Container, I selected Theme Default instead of Full Width.
These are the blocks that come with the free version. There are several Post List blocks, several Post Grid blocks, two Post Module blocks, a Post Slider block, Heading, Image, and Wrapper block. Note that the several versions of the same type of block, like 4 Post List blocks, each have a different main layout.
For example, Post List #3 is a single post per row layout. When you select that you get several Block Layout Designs. The free version comes with 11 Block Layout Designs.
The free version also comes with a Block Library with 3 “Starter Packs” or predesigned pages that use the plugin’s blocks.
There are also 10 predesigned block sections called Readymade Block Designs with the free plugin. Note that these Readymade Block Designs are styled versions of the Block Layout Designs which are shown by the section names.
Instead of picking them from library, you can also pick them from the individual block’s settings area, under the Block Layout Designs area.
Pro Version
The Pro version is available from the WPXPO website, the plugin author.
The Pro version does not add any additional blocks. Instead, it adds more features to the existing ones and adds some more Block Layout Designs for a total of 32, 6 more predesigned Starter Packs, and a total of 64 Ready Made Block Designs to the Block Library.
The Pro version adds a settings option for a quick query based on Sticky Post, or the post with the most comments.
Other features of the pro version are the options to lazy load of the blocks with an animated spinner, custom style options for categories, and some content animations. We will look at these further in the walk-through below.
Post Blocks Overview
The plugin comes with 4 Post List Blocks, 7 Post Grid Blocks, 2 Post Module Blocks and a Post Slider Block. Where there are more than one of the same type of block they are named sequentially, like “Post List #1”, “Post List #2”, and so on. It would be easier for me if instead of numbers the variations were given descriptive names. Anyway, my first question was to find out the differences between them.
Post List #1
The description for Post List #1 is “listing your posts in the classic style”. This is the basic single post list and there are various options for the placement of the category, whether to show the post meta, etc.
Post List #2
This block’s description is that it lists the posts with a big post at the top. There are several options for showing the subsequent posts underneath, with or without an image beside them or with a small number on them.
Post List #3
Post List #3 shows the posts with the featured images on the side. There are several Layout Designs, including the option to alternate with the image on the left or right.
Post List #4
Post List #4 has a big image on top and small images next to the posts below that. There are the options to not have an image or to have a number instead of the image.
Post Grid #1
The Post Grid #1 block shows the posts in a classic grid style. There are layout options relating to the placement of content below the image, such as an overlapping card, for example.
Post Grid #2
This block shows the posts with a gradient overlay on top of the featured images with the content also over the image.
Post Grid #3
Post Grid #3 also has gradient overlays, but this one has a large image on top or rows with different numbers of columns.
Here are the Block Layout variations for Post Grid #3.
Post Grid #4
Post Grid #4 is another one with a gradient overlay, but this one has the big image on the side.
Post Grid #5
Post Grid #5 also has the big image on the left, but the overlay style is different. Also, one of the posts on the right is larger horizontally.
Post Grid #6
This one is very similar to the fifth one, but the smaller post titles are all the same size.
Post Grid #7
Post Grid #7 is similar again to numbers 5 and 6, but this one has more emphasis on a column format.
Post Module #1
There are two post module blocks. The first one shows a large article on the left and smaller articles in a list, with or without images, on the right.
Post Module #2
Post Module #2 is like Post Module #1 except that the large post is a tile with the content on top of the featured image.
Post Slider
The Post Slider block has options to toggle all of the visible elements like the dots, arrows, post meta, etc. You can also position and style the content overlay.
Other Blocks
There are three other blocks that come with the Gutenberg Post Blocks plugin: a Header, an Image, and a Wrapper block. The Wrapper block might be useful as a container if you want to add extra background or border options. The Header and Image blocks have more options than their core equivalents, but the options are not as extensive as those in other block collections I’ve reviewed.
The Post Blocks Settings
One of the things that makes the Gutenberg Post Blocks collection interesting is that it has a large number of display settings for all of the Post blocks. Here I will look at the Post List #3 as a sample.
There is a title, currently set as “POST LIST #3”, but you can change that to whatever you want. There is a single column list of posts with the category, title, post meta, excerpt, and read more link. The post meta has attractive icons and the read more link has an arrow icon.
There are three tabs of block options. The Design tab has some block layout options and some ready made design options that you can select. Note that the various ready made designs use the various block layouts.
The options on the Settings tab are very extensive.
General Settings
In the General panel there are toggles for the content items as well as horizontal and vertical alignment options. You can also switch the featured image to the right, if desired.
Query Panel
On the Query Panel you can select an Advanced Query, which is a sticky post or by number of recent comments. You can also select the post type. Here I’ve selected books, as I have a Book Custom Post Type. I was happy to see that I could select the custom taxonomy, in this case “genre”. Then there are options to filter the query by taxonomy or to include or exclude posts.
Heading Panel
Here you can change the block heading, set a style, adjust the typography and colors, and enable a sub-heading. I changed the text from Post List #3 to Book Reviews.
Title Settings
On the Title panel you can adjust the title style and toggle the post meta to be under or on top of the title.
Post Meta Settings
On the Meta panel you can adjust the post meta settings. You have placement options, meta style options, as well as typography and spacing options. In addition to the usual post meta items, there is also the ability to show the Reading Time or View Count.
Category Panel
There is the option for the categories to show and then to adjust the position, spacing and styles. If you have Pro then you can select the colors. The categories didn’t show for me, probably because I had selected a Custom Post Type that had a custom taxonomy.
Image Panel
There are quite a number of image related settings. I selected the Medium image size and adjusted the height so that the book covers looked good.
Content Wrap Panel
This is where you style the rows. I set a light gray background color and added 5px of padding all around.
Filter Panel
A cool thing about the Gutenberg Blocks plugin is that it comes with AJAX filter options. I selected the genre taxonomy and the category items I wanted included as filter options.
Pagination Panel
The pagination panel is where you style the pagination.
Excerpt Panel
It is nice that you have control of the excerpt length, which you can set here.
Read More Panel
There are Read More display options.
Separator Panel
And you can also have a separator between rows and style it as well.
Advanced – General Settings
There are some general settings on the Advanced tab. These apply to the overall block.
Advanced – Responsive Settings
The Responsive settings let you hide blocks by device size.
Here is the final result of my listing of books. I like the on page filters and the large number of layout and style options.
Elementor Integration
To use Gutenberg Post Blocks with Elementor you create a template by going to the Post Blocks, Saved Templates menu. Then click Add New Template to start. You are then taken into the Gutenberg editor where you use Gutenberg to create the template’s contents.
I created a quick grid and saved the template.
Then I went into the Elementor editor and saw the Gutenberg Post Blocks widget in the General group of widgets.
I dragged the widget to the page and a drop down showed to pick a template. I picked the once just created and it was rendered in the Elementor editor. Being rendered in the editor makes it possible to design an Elementor page around it. However, you cannot edit it in Elementor. Instead, if you click on the Edit Template with Gutenberg link then you will go back into Gutenberg in the plugin’s template area.
Documentation
There is basic documentation for all of the blocks and videos on YouTube from the company.
There are a fair number of YouTube videos also.
There is also a roadmap showing the planned features.
Discussion and Conclusions
In discussion and conclusion, there were a few things I noticed that are worth pointing out. First, there are multiple versions of the grid and listing layout blocks. Naming them sequentially with numbers makes it difficult at first glance to tell them apart. A descriptive name may have been easier for the end user. Second, the plugin author decided to have multiple versions instead of lots of options in a fewer number of blocks. Perhaps that was done for programming reasons? I can imagine that a huge number of options in one block might be harder to program. In any event, some block collections give you the option to disable blocks you don’t plan to use, but that isn’t an option yet with Gutenberg Post Blocks. Third, the category tag didn’t show on my Custom Post Type’s list display, perhaps because it was a custom taxonomy?
The major strength of the Gutenberg Post Blocks plugin is in its ability to display posts and Custom Post Types in a list, grid, or slider. The free version includes most of the content options and settings, but doesn’t have as many style options. There are a ton of content options. The pro version also comes with more pre-designed page and block options. I really liked the easy AJAX front-end filters. The Elementor integration is a nice touch and might be useful if designing an archive template using the Elementor theme builder.
The plugin is relatively new and is being regularly updated. The author is taking user feedback into account to make the product better. The roadmap indicated that they are serious about the future of the plugin. Overall, the Gutenberg Post Blocks plugin offers more options for displaying post lists or grids than you normally find. While there are a lot of options, they seem to be organized well. The free version is pretty full featured and is not crippled, so it is worth trying out.
