PostX Gutenberg block review & tutorial

PostX web page

I’ve been using WordPress for a long time. When I started, WordPress became a pretty serious alternative to hosting your blog on Blogspot (or Blogger).

Then it morphed and morphed and now it has become a one-stop platform for blogs, company pages and even e-commerce websites.

Statistics show that WordPress is becoming the platform of choice for an increasing percentage of websites.

WordPress is to websites what Trivago is to hotels. Hotel? Trivago. Websites? Wordpress.

If you are interested in the PostX plugin, then you are probably seeking something that makes your web development experience easy and straightforward.

You don’t want to go mess around with the PHP files on the backend or write your own Gutenberg blocks with React. If the previous sentence seems like Greek, that’s because those two languages are in effect mumbo-jumbo written in English.

You might have considered Wix, Squarespace and for some reason you’ve settled on WordPress. Now, how easy is it to start a blog?

postx gutenberg starter blocks

What is PostX?

PostX is really a bunch of Gutenberg blocks that make it easy for you to build pages that look modern and professional.

It’s a bit like sending WordPress’s default blocks to Pimp My Ride and then getting something that is customizable and full of bling features. PostX gon’ give it to ya.

At the heart of it is PostX’s style toggles. Instead of writing CSS, you can toggle a few checkboxes, sliders and buttons to change things like font size, colour, hover effects, etc.

For the posts related blocks, there’s a Query editor that you can use to filter out posts. If you know about The Loop, this would be where you’d send different parameters to The Loop to ask for posts that fit a specific query. In other words, let’s say you only want posts that are tagged “pizza”, you’ll be able to tell PostX to find all posts tagged pizza and list them on the post block.

Here are the categories of blocks that you get:

Heading

postx titles

Heading blocks allow you to style your headings. WordPress does come with a Heading block but PostX’s heading block gives you more options.

The default WordPress heading block only allows you to change typography, colour and H2-H6 tags, whereas PostX’s heading block allows you to change a lot more.

It can do everything the default heading block can do, but you can also change the font family, font size, colour, spacing.

postx headings

The ability to go wild and create much more than the default heading blocks allow you to do really allows for creativity. It also allows you to put hot-pink Comic Sans on your content, so keep in mind that with power comes responsibility.

PostX also provides a few default designs for headings and those are much more in-line with what you might use this block for. I just made a design that went off the deep end just to prove that you can also make something that looks very off-brand.

Images

The default image block in WordPress allows for minimal customization. You can align it to the left, centre or right. You can also put a frame, border or rounded crop on your image. It’s functional for a blog.

postx images

Enter the souped-up image block from PostX. You can overlay a button on the image, put a hover animation, put a greyscale filter.

Post Grid

In a default WordPress setup, you can choose to list a page or your blog roll as your front page.

postx

If you choose a page, you can’t display your blog roll (unless you know how to write the WordPress Loop in a custom home page file).

What the Post Grid allows you to do is to list your posts in an attractive way.

Compared to the default blog roll layout where your post are listed sequentially, Post Grid allows you to put them in different grids.

There are seven Post Grid layouts in the free version.

Plus, you can modify their styles such as how big a font you’d like on the post titles, colours and many other things.

Post List

postx post list

Post List is… err… a lot like Post Grid but more list-like.

In all honesty, they aren’t that much different. They just list a bunch of posts in a more sequential way than the Post Grids.

Looking at the starter layouts that come with PostX, I think the developers envisioned these being used in a two column layout.

Assuming you use a layout with the Post Slider block or Post Grid block, the Post List block could be used on the sidebar to feature specific posts that you want pinned. I can see this being used if you want specific tutorials or essays being listed on the side.

Post Module

The Post Module block is another way to list posts.

There are two options in the free version: one listing a post with its image, excerpt and author’s details and another listing just the title and author’s details.

postx post slider

Post Slider

This is one element that I’m quite excited about because it’s something that really enhances the user experience.

With the Post Slider block, you can put a dynamic post slider up in just a click.

By default the slider will automatically animate with a fade-in-fade-out animation. You can control the amount of time it stays on screen through the slider’s editor. You can also control other things like the number of posts listed and the details placed on the screen.

Wrapper

When I first placed the Wrapper block in the block editor, I was a bit confused as to what its use was.

It’s just a container with a background colour. I imagine that people would use this to separate the different post blocks that they had. So, you might put the slider at the top of your home page, and then another section in the wrapper with a colour, and then another section in a wrapper with a different colour.

The PostX’s documentation doesn’t suggest any use cases for this.

The process of starting up a site with PostX

Let’s take the scenario where I am setting up a new blog and I want to use PostX.

PostX promises that you can get a decent blog in less than two minutes. This is their video attesting to that:

Looking at PostX’s landing page, they do offer quite a tempting promise.

In the past, you chose your WordPress theme and you were locked into its structure unless you’re willing to fumble with the theme files.

With the introduction of Gutenberg blocks in WordPress 5.0, you are now able to do a much simpler process to customize your website. Gutenberg blocks are like building blocks that you use to construct various sections of your website.

Granted, you’re still locked-in with the base theme that you’ve chosen. For fairness’s sake, I am using Twenty Twenty-One, which is the newest theme that is Gutenberg compatible.

The goal of responsive design is to allow a single design to work on mobile, tablets and desktops.

First problem: responsive design breaks

On the Twenty Twenty-One theme, PostX’s default blog layout fails to be able to stretch from edge to edge at desktop resolution. Instead, it’s just a skinny column.

Testing it with older themes such as Twenty Twenty or Twenty Nineteen didn’t work either.

So I went to Google and found out that I needed to use the “PostX Template” rather than the “Default Template”.

postx  post slider

When I learned that this was the case, I immediately went to RTFM (SFW version: “Really Try Finding the Manual”). It was a bit of a pain to find the documentation because it’s not immediately obvious on the download page. I had to go to the product’s website’s footer to find it. For your convenience, it’s here https://docs.wpxpo.com/postx/

Second problem: multi-column layout demands proper image sizing

postx uneven columns

As a web developer, I am well aware that when it comes to layouts with images that span multiple columns, one big problem is keeping the images and text aligned.

This is a bit difficult, unfortunately, for a web developer to do so especially if the images uploaded are of an unknown size and unpredictable ratio.

So, in order to keep PostX’s post-listing blocks from going awry, you must ensure that images are of a specific size so that they present well on the post blocks. It would be quite the sin to forget to upload an image because it would throw the design off.

Ease of setup

Installation of the PostX plugin is pretty easy. You just have to add it in the plugins screen in the WordPress CMS system.

PostX doesn’t change anything on your system so you can work with it immediately and integrate it into your current website.

So, if you aren’t spinning up a new website, you could use this to integrate the Post Slider block to your home page, for example.

Learning curve

There isn’t much of a learning curve with PostX assuming you’re familiar with the block editor and you understand CSS.

PostX is great because it takes away all the tedious CSS writing. Instead, you’d just toggle a few things and everything that you would have done in CSS is done for you through the PostX Gutenberg block.

Use cases

This is a niche product that helps a certain subsection of WordPress users.

It’s not a page builder like Elementor or Beaver Builder is. For example, Elementor can modify headers and footers, but PostX can’t.

custom home page postx

Use case 1: a custom home page with a blog roll

The first use case for PostX, in my understanding of it, is that it helps you create a nicer home page than what WordPress can offer.

WordPress gives you two options: a static page or a blog roll. You can put whatever you want on that static page, but you can’t integrate your blog roll into the static page (unless you write some PHP).

So, this is where PostX finds its first purpose. Let’s say you want your home page to have an introduction of yourself, your contact info and then the blog roll. You can do this with PostX by creating a page, writing your intro using the standard WordPress blocks and then integrating the new blocks from PostX such as Post Slider or Post Grid.

What I am particularly pleased about is the ease of integrating a slider on the front page. That’s one of my favourite things about this Gutenberg plugin.

Use case 2: put some snazz in your internal linking

You can also integrate these new blocks into your posts.

If you’re a Yoast user, you’ll know that Yoast always berates you if you don’t put internal links on your posts. Yoast also uses a frown emoticon to guilt you into doing your SEO duties. Who wants to see a red frown?

post grid postx

With the PostX posts blocks, you can easily add in some internal linking without much effort. Just throw in a Post Slider block and your post immediately has some internal links. Of course, to make these internal links more eye-catching, you could put a category filter to ensure you’re only linking things that a reader could be interested in.

I imagine if you know how to write PHP, you could also ask WordPress to integrate these blocks into all webpages created by post.php.

Use case 3: integrate into page builder using shortcode

postx shortcode

When you create a PostX custom Gutenberg block, you can save it into a shortcode that can be used in your page builder.

PostX creators have cleverly thought of a way to sideload their block plugin into these page builders’ editors.

In order to do this, you must go to the Addons page and ensure that the “Saved Templates” add on is turned on.

Then, you need to go into the Saved Templates link and then click Add New Template.

Type in your title for your custom Gutenberg block and then add whatever you want in it, and then publish it.

Upon publication, you will see a shortcode. You can use this shortcode anywhere — classic editor, Gutenberg editor, or page builder.

Free vs Pro

Normally, I’d go straight for the pro version of stuff but not this time.

I found the free version to be adequate for my uses.

The Pro version comes with more Starter Packs (fully fleshed out layouts) and Readymade Blocks (layouts for listing posts).

One important feature in the Pro version is the Quick Query Builder which will allow you to create more specific post blocks. For example, you can list the posts which are most popular, most commented or the latest posts.

The other thing that’s useful is the addition of lazy loading images. These help improve load times, a crucial part of user experience and SEO scores. They help speed up load times by not asking the browser to download these images until they come into view of the user, reducing page sizes in the first moments of page loads.

I haven’t really found that my experience with PostX required the Pro version. It’s like buying a higher trim level of a car with a sunroof, heated seats and lane departure warnings. Some people might find those worth the extra cost. Others, like myself, don’t.

I’d give the free version a go and then see if you needed the Pro version. PostX makes it obvious what the Pro version offers, so you’ll never need to go hunting for reasons to buy the Pro version.

Verdict

Free is good, right?

So give it a try and see what you think.

I think what PostX offers is good and you might find it very useful for whatever use case you can think of. The three above that I have written about are generally where I think they’ll work.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top