Categories
Post Loops Reviews

Gutenberg Post Blocks

A review of the most detailed post list, post grid & post carousel block I have found so far, and why this type of block should always support all registered CPTs.

One of the holy grails of blocks, as far as I am concern, is post loops. To me, this is the essence of dynamic blocks and over time I have used several tags to keep track of the blocks I review that include this feature in some capacity, most notably:

Out of the three above I believe that it is paramount that any new “post loop” blocks include support for all registered CPTs and Custom Taxonomies on a given WordPress site.

The problem with “posts” blocks

The very ethos of Gutenberg is compatibility and stackability. This naturally translates into letting a user select any CPT or taxonomy the may be using on their site when using a post loop block.

I realize there is a plethora of shortcode based plugins in the repository which already offer this type of functionality but I am focusing on blocks specifically, not on WordPress in general, and I am only interested in blocks that do this.

There are many great post list plugins/blocks out there but very few of them meet this condition, most of them will only work with posts.

Up until today my go-to plugins for CPT listing were Custom Post Types Block and Guten Post Layout but they did not offer too many options in the way of query complexity or layout styles.


An -almost- perfect block

I came across Gutenberg Post Blocks a couple of weeks ago and I quite liked the completeness of the plugin but, as it nearly always happens, the block did not support CPTs. I added this comment:

Congratulations for putting out this plugin, it is the most comprehensive plugin to add post grids, lists and sliders I have found so far. I particularly like the fact that you included pagination, offset and filters. The amount of detail you put into certain details, like the post meta part, is almost insane!

I did notice a couple layout issues with horizontal overflowing and the editor crashing once, but I need to test these further before I can offer any feedback on that.

I do have a couple of suggestions to make it even better:

– Include an option to also query/filter posts by date or author.
– Enable the possibility to query other CPTs.

There are couple of plugins out there which already do the above. If you were to include these two features, specially the last one, your would totally kill it!

Thanks again, all the best!

MrFoxTalbot – Gutenberg Post Blocks reviews

To my delight -and quite frankly also to my surprise- the plugin author replied a few days later saying they had updated the plugin to add CPT support.

Here goes my detailed review to, in my humble opinion, the most complete post listing Gutenberg block at the moment. Shout out to wpxpo for their responsiveness.


Gutenberg Post Blocks

Intro

Here are a couple quick videos from the plugin author’s YouTube channel to introduce the block.

General intro:

Block types

The plugin introduces a number of new blocks, but most of them are variations of three types of Post Loops: Lists, Grids and a Carousel.

General Settings

The first tab is the general settings one and allows us to easily show or hide most of the elements in the post (image, excerpt, meta) as well as the well as in the loop itself (heading, pagination, filters).

The Grid block introduces the choice for columns & gaps as well as an option to style separators.

The Slideshow block also has a few specific options such as autoplay, animations and arrow/dots display.

Queries

This is by far the most interesting feature in this block. The querying options are as thorough as they get but even then they are easy to understand even for a basic user.

  • Select CPT
  • Pick Taxonomies (combine multiple terms)
  • Include/Exclude posts by IDs
  • Offset (skip X posts)
  • Order (several options)
  • Pagination (ajax)

The only query criteria I am missing here would be the Author one and, if we were going to get picky, a date based filter (months, years, etc).

We have quite a few sorting options!

UPDATE: While writing this review I noticed that if you choose any CPT other than the regular posts, the taxonomy filter will not update to show taxonomies associated to that CPT, I have shared this feedback with the plugin author as this defect seriously limits the possibility of using the plugins with CPTs

Style options

Styling options are truly staggering, even to the point where I would argue it may be going a little bit too far, especially in the context of Global Styles being introduced very soon. As a front-end web developer, I will normally prefer to make this tweaking by adding my own CSS styles, which I realize is not everyone’s case.

There are all kinds of layout & typographic settings as well as separate mobile & hover options.

  • Category Filters
  • Display terms
  • Post Meta
  • Pagination
  • Headings
  • Typography
  • Mobile styles
  • Hover styles
  • Images & Overlays
  • Content Wrap
  • Titles (heading level)
  • Categories
  • Read More
  • Excerpt
  • Separator

The degree of details around post meta visibility and styling, to mention a specific example, is almost insane:

Preset Designs

Beyond the default blocks, each of the blocks also offers a few pre-made layouts to choose from. These premade layouts work pretty well out of the box.

Bonus track: Advanced image block

This could be especially interesting, especially in combination with the new Rich Image Tools.

It has quite a few options when it comes to image overlays:


Conclusions

It was on my talk on Gutenberg at WordCamp Bilbao, nearly two years ago and well before Gutenberg was introduced in core, that I mentioned this quote on my presentation:

“We want to make the simple things EASY and the complex things POSSIBLE”.

Matt Mullenweg

I work as a Happiness Engineer for WordPress.com helping newcomers set up their sites and this is something I see every day. This plugin’s degree of detail might be a little too much for the average WordPress.com user, but we must strive to make all these basic options (both for queries and layouts/styling) available to users.

We must make good, flexible blocks, not necessarily many or complex blocks.

At the same time, we should not miss the bigger picture by giving up the things that have made WordPress what it is. Let me explain what I mean by this:

When sharing this block with other members of the WordPress community I will sometimes hear comments to the effect of “with this plugin, we don’t need archive pages “.

I wholeheartedly understand where this feeling is coming from, and the fact that the plugin introduces pagination makes it even truer than ever, but I believe that simply adding blocks like the one discussed on this post to static pages and using them as a substitute for archive pages falls really sort and is a disfavor to ourselves and the WordPress users at large. Let us not do that.

The way to go would be to introduce “Archive pages” editing in Gutenberg, meaning styling the templates that the theme will use to show all category, author and date archives (ideally each of them separately).

This is something Elementor and Toolset have been capable of for a while now and that Gutenberg development should focus on introducing as the next thing.


Annex: Block Demos

Block demo: List

Here is one of the Post Lists Block in action, with a filter at the very top:

Post List #2
Dolores harum magni voluptatum iste ipsum perferendis
Dolores harum magni voluptatum iste ipsum perferendis
Alvaro Gómez Velasco14th May 20181 min read

Ad nostrum sunt eum in quae quod. Sint vel quas inventore qui natus libero aliquam quia. Totam molestiae minus et…

Est voluptas et quo
Est voluptas et quo

Velit illum ut sapiente labore cum quia aspernatur asperiores. Soluta quo tenetur exercitationem. Mollitia vero velit non laboriosam. Omnis nihil…

Sint vero ipsa minus consequatur quod ipsa autem
Sint vero ipsa minus consequatur quod ipsa autem

Rerum et nemo non ratione eos. Ut at aperiam eos sit omnis Est qui dolore et id expedita odioDolor et…

Another list style, with pagination at the top (instead of the filter).

Post List #3
Dolores harum magni voluptatum iste ipsum perferendis

Ad nostrum sunt eum in quae quod. Sint vel quas inventore qui natus libero aliquam quia. Totam molestiae minus et maiores…

Est voluptas et quo

Velit illum ut sapiente labore cum quia aspernatur asperiores. Soluta quo tenetur exercitationem. Mollitia vero velit non laboriosam. Omnis nihil optio…

Sint vero ipsa minus consequatur quod ipsa autem

Rerum et nemo non ratione eos. Ut at aperiam eos sit omnis Est qui dolore et id expedita odioDolor et ex…


Block demo: Grid

Here is on of the Grid Blocks in action:

Post Grid #1
Dolores harum magni voluptatum iste ipsum perferendis

Dolores harum magni voluptatum iste ipsum perferendis

Alvaro Gómez Velasco14th May 20181 min read

Ad nostrum sunt eum in quae quod. Sint vel quas inventore qui natus libero aliquam quia. Totam molestiae minus et maiores…

Est voluptas et quo

Est voluptas et quo

Alvaro Gómez Velasco14th May 20182 min read

Velit illum ut sapiente labore cum quia aspernatur asperiores. Soluta quo tenetur exercitationem. Mollitia vero velit non laboriosam. Omnis nihil optio…

Sint vero ipsa minus consequatur quod ipsa autem

Sint vero ipsa minus consequatur quod ipsa autem

Alvaro Gómez Velasco14th May 20181 min read

Rerum et nemo non ratione eos. Ut at aperiam eos sit omnis Est qui dolore et id expedita odioDolor et ex…

Another Style (somethings is not quite right with these styles but this seems to be a conflict with my site, not a defect on the plugin itself).

Grid block, alternative design:

Grid block, another design:


Block demo: Slideshow

Here is the Slideshow Block in action:

Patient Ninja
Patient Ninja
Alvaro Gómez Velasco16th May 20191 min read

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend…

Ship Your Idea
Ship Your Idea
Alvaro Gómez Velasco16th May 20191 min read

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend…

Flying Ninja
Flying Ninja
Alvaro Gómez Velasco16th May 20191 min read

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend…

Premium Quality
Premium Quality
Alvaro Gómez Velasco16th May 20191 min read

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend…

Woo Ninja
Woo Ninja
Alvaro Gómez Velasco16th May 20191 min read

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend…

1 reply on “Gutenberg Post Blocks”

Leave a Reply