Kadence, Qubely, Stackable Gutenberg Blocks Comparison

Introduction

The hayday of themes gave way to the rise of page builders and now Gutenberg dominates the scene. I purchased three premium blocks addons: Kadence Blocks, Qubely Blocks and Stackable Blocks and in this review I do a comparison. I know that reviews sometimes skirt the hard questions, but I’m going to try to give you answers. This comparison will help you identify the strengths and weaknesses of each. I’m going to compare which blocks are included and look at some of them side-by-side, show the advanced features, the pre-designed libraries, pricing, performance, and support.

Update December 18, 2021: Kadence and Stackable have had tons of updates, but sadly Qubely is only rarely getting fixes. At this time I wouldn’t recommend Qubely until the team is able to give it some attention.

When setting up a test bed my first challenge was what theme should I use? I wanted to use the Kadence theme as it has good Gutenberg support and all three block addons support the Kadence color palette. I was prepared to try the Blocksy theme, as that was mentioned specifically as being compatible with Qubely, but I didn’t run into any oddities and Kadence worked fine with all three.

Video Version

Free Versions in the WordPress Plugin Directory

All three have both a free version in the WordPress plugin directory and a pro version for sale on their websites.

We see that Kadence has the most active installs, then Stackable and then Qubely. One thing to note about Stackable is that you uninstall the free version when you install the pro version, which is not the case for the other two. That means that there are really more Stackable installs than shown.

It is interesting that Stackable has many more 5 star reviews, even though it has fewer installs than Kadence.

What Comes With Pro?

The pro versions add more features. Here is a list of what each adds:

Something to note when comparing the advantages of the pro versions is that with Stackable you get more design options with Pro, while Kadence and Qubely add more blocks with their Pro versions.

Included Blocks

Here is a table showing the blocks that are included. The blocks included with pro are highlighted in blue.

Container, Heading, and List Blocks

Container blocks are key to having a “page builder” like experience when using Gutenberg. All three offer a nice upgrade from the default columns block that comes in core. One thing I’ve noticed when trying to work with Gutenberg as a page builder, is that you are largely at the mercy of the internal block layouts. What do I mean? Suppose you want a row of “card” type blocks, each with an image at the top, a title, a description, a list, and a button with a nice background and border. Well, there are plenty of “card” types of blocks, but none of them support a list. So in this type of case, you need to turn to a container block and try to create your own “super block.” The container challenge for each of the addons will be to create cards like the mock-up below.

Core Version

I started by adding in the core image block. One thing to notice about the core image block is that it does not have any options for margin, padding, or border.

I next added in a core Heading block. Note that it also has no padding or margin options.

I added in the core text block. Again no spacing options.

Now the core list block. Again no spacing options. With the list block there is not even a horizontal align option.

And lastly, the core button block. Again, no padding or margin options.

So this is what it looks like so far:

Gutenberg has a hidden gem of a feature that allows you to “group” a set of blocks together to move around together or to duplicate. So, I selected all of these blocks and then grouped them. You group them by selecting a block, then holding down the shift key and selecting the additional blocks. Then you can select the option to group them.

I then added a core column block with 2 columns and duplicated the group.

I moved the groups into the columns. The core ‘group’ has the option for a background color, so I set that. This is as far as we can go with the core blocks.

And this is what it looks like on the front end. This is not too bad. Some things that are missing are the border around the sets of blocks, there is no option to adjust the margin above the title to reduce the space, and there is no way to adjust the margin around the list or to move the list towards the center.

The core blocks are missing these spacing controls as they are leaving it up to the theme. That works in many cases, but not when trying to construct advanced layouts.

Kadence Version

When you add the Row Layout block to a page you see an overlay with preset column options. Note that the Row Layout block is also how you access the pre-designed library. You can have up to 6 columns and you can nest Row Layout blocks, so it is possible to create pretty complex layouts.

Under the grouped blocks I added a Kadence Row Layout block and picked a single column layout. Note that this is also how you access the pre-designed library items.

The Kadence Row Layout block has a ton of options, both for the overall block as well as for individual columns. Of note, the Structure settings have advanced settings for layout and placement, and there are also animation settings on the column level that are applied when scrolling into view.

I added the image, as before, and center aligned it. I then added the Kadence Advanced Heading block. It has a number of style options and the ability to animate on scroll.

I then added the Kadence Icon List block. It has margin options, as well as the ability to multiple columns in the list, to style the list items and icons altogether or to do so individually.

Wow, the ability to configure list items individually is very cool. You can give each one a link URL, set the icons individually, and apply styles to each line.

Next I added a Kadence Advanced Button. Note there is the option for the button container margins, which the core version doesn’t have.

I then went to the column settings and added a border, a background color, shadow, and adjusted the margins. I also adjusted the margins of the Kadence Heading block.

I then added another Row Layout block, this time of two columns. I duplicated the first one and dragged one column into each of the new two column areas. I adjusted the margins slightly and this was the result.

So, that is the Kadence version of my test “super block.” It was pretty easy to accomplish.

Qubely Version

Qubely has two container blocks: a Block Wrapper block and a Row block. The Block Wrapper has a number of style controls that seem appropriate for an outer container, so I’m thinking I can put the blocks inside of it to build up the first “super block.”

Kadence doesn’t have an Image block, but Qubely does. It has a ton of controls so that you aren’t stuck with the limited core default image block. There are two layout styles, just the image, and the image with a blurb. There is the option to load a retina version of the image, which is unique.

All of the Qubely blocks have the spacing options on the block icon bar as a “Spacer” button.

Under the Advanced tab there are Animation and Interaction options. Animations are entry effects triggered when the block comes into view. Interactions are mouse over types of events triggered when the user interacts with the content. Animation is available in the free version, but Interaction requires pro. It is worth taking a quick look at these as these advanced options are common to many of the Qubely blocks.

I enabled the pro version and there are a ton of settings to create an interactive animation. Once you toggle it on, there is a sort of vertical timeline. If you right click on a place on the timeline then the actions: Move, Scale, Rotate, Skew, Opacity, Blur, become available and you can click on one to add it to the timeline.

When you add an action to the timeline then a slew of options appear giving you fine-grained control of the animation.

Here is a captured frame on the front-end.

OK, back to creating the test super block. I added the Qubely Advanced Heading block under the image. In the settings area there are three tabs. The Layout tab suggests some sections from the library, which is a nice touch.

The Style tab offers options for setting the alignment, color, and typography of the heading. There is also the option to have a subheading and a divider.

The advanced tab has the animation and interaction controls that are common to most of the Qubely blocks.

Next is the text description. I checked out the Qubely Advanced Text block. Like the other blocks, the layout tab suggests some pre-designed layouts. The style tab gives you the option to have a header and a sub-header (but no spacing controls). The advanced tab has the animation and interaction options.

I disabled the Title option, but kept the Advanced Text block since it has the Spacing button.

I next added a Qubely Advance Button. The Layout tab had suggested pre-designed blocks that use a button. The Style tab provides two starter styles: fill and outline. There are the standard button options in the various style panels for colors, border, typography, icon, hover states, etc. Again, the Advanced tab has the animation and interaction options.

So, I have all of the blocks added to the container. The next step was to adjust the spacing and then I turned to styling the wrapper itself. I gave it a background, border, and adjusted the spacing.

Oh, I need to add the list. Qubely also an Advanced List and an Icon List Block. I tried the Advanced List block and was surprised to see that it includes the option for icon bullets, though you can select regular bullets or numbers from the icon bar.

It allows you to change the icon for each list item, like the Kadence version, but you do so by clicking on the individual icons.

I adjusted the alignment and spacing.

The next step was to add two columns using the Qubely Row block.

I duplicated the wrapper block and added the two items to the two columns. When you add a row you can see the spacing visually, which I like a lot. There are also some spacing and style options.

The advanced tab had some row controls and this is the final view in the editor.

I saved and took a look on the front. Nice.

So, that is the Qubely version of my test “super block.” It was also pretty easy to accomplish.

Stackable Version

Stackable also comes with two container blocks. It has an Advanced Columns and Grid block and a Container block. Interestingly, you don’t find the Container block in the block list. Instead it is found on the icon menu bar when you have a block selected. We will use it but I guess first I need to add the image.

Stackable doesn’t have an Image block, so I used the core version. I then clicked on the ‘More Options” menu and selected Group into Container.

The Container block has three tabs. Stackable suggests some layouts on this tab. I guess if you were making your own “card” that this could be helpful.

The Style tab has a lot of size, alignment, and style options. One thing to note is the Top and Bottom Separator options. These are available for many of the Stackable Blocks and give you the ability to add row dividers of different shapes.

Since these separators are a common feature, let’s take a minute to try them out. Here are the separator options. There are 13 design shapes, color, height and width options. You can also flip them or bring them to the front. The pro version gives you two additional separators so you can create unique designs. Here I’ve turned on the first “top” layer.

When you click on the Separator Layer 2 or 3 you get a popup with a similar set of controls. Here is a screenshot with the other two layers enabled.

Our “super block” doesn’t really call for separators, so I’ll remove them and continue by adding a Stackable Advanced Heading block. There are several panels in the Style tab. The general panel has alignment options, there is a tab for the title, for a subtitle, for a top and bottom line, and for spacing. Adding a title and subtitle to the blocks is something that you see with a number of the Stackable blocks.

The Advanced tab also has several panels. The General panel lets you pick the HTML tag, set the opacity, and z-index. The Block Spacing panel gives control over padding and margins, Responsive lets you disable the block for different device sizes, and Custom CSS lets you enter some block specific CSS.

Custom CSS is another pro feature. The classes for elements in the block are pre-filled in so you can tweak the block, if necessary.

Stackable also has an Advanced Text block. On the Layout tab is has both the options for some preset layouts and for adding pre-designed sections.

On the Style tab there is a cool feature where you can have multiple columns. There are also options for a Title and Subtitle.

On the Advanced tab the General panel again has the option to select the HTML tag, set the opacity, and the z-index. There is a block spacing panel and one for column spacing. Again there are responsive and custom CSS options also.

I made the description the same as for the other tests. Stackable also has an Icon List block. There is the option to add a pre-designed block on the Layout tab.

On the Style tab you can set it to have multiple columns and display the lists in a grid. There are icon, text and spacing options as well as the options for title and description, background and separators.

The Advanced tab has the same set of panels and features as the Advanced Text block.

Like the Qubely version, you can set the icons individually for the list items by clicking on them.

So I set the list and then added the Stackable Button block. Again, the Layout tab offers some presets and suggested some blocks from the library.

The Style tab has a ton of style options for up to three buttons.

The Advanced tab has the standard Stackable options like the previous blocks. I styled the button and then the next step is to style the Container. I set the background color and margins, but could not find options for the border. I had to use the Custom CSS panel to add that manually.

Finally, I added the Stackable Advanced Column and Grid block with two columns. This block has some column settings on the Layout tab as well as some present layouts.

On the Styles tab there were the column options again, as well as a ton of other option panels. Note the common title, description, and separator options.

I duplicated the “super block” and added them to the columns. There still seemed to be extra space, so I went through all of the blocks and set the top and bottom margins to 0, but that didn’t help. Here was the final in the editor.

And is the final for Stackable on the front end.

It looks nice and was also not difficult, though I didn’t have as much control of the spacing as with the other tries.

Pro Post Blocks Compared

After the container blocks, the next most important blocks are those for displaying posts. I’m not going to do a deep dive on them, but will point out some high and low lights.

Kadence Post Grid / Carousel

When you add the Kadence Post Grid Carousel block you first see the option to pick an initial style.

Then you get the block with posts and options. The first thing at the top of the options is the ability to pick the post type, which means that the Kadence block supports Custom Post Types. You can filter the query by taxonomy.

Kadence has 3 layout options: grid, masonry, and carousel.

Another nice advanced feature is the option for on page category filters.

The Kadence post block has options for showing and hiding elements and a few options for reordering some of them.

Qubely Post Grid

The Qubely Post Grid block is very attractive and has lots of good, well-organized options for displaying posts.

There are several layout presets available and it is easy to switch between them, giving you the options of list, grid, masonry, and featured displays. There are a ton of customization options for ordering the elements. The query panel allows you to filter by category, but there isn’t the option to use the block to display Custom Post Types or show on-screen filters, which are limitations.

Stackable Posts Block

The Stackable Posts block offers several layout options including basic, list, portfolio, vertical and horizontal cards. It also offers suggestion for a posts or blog layout from the library, which is a nice option.

The Style tab has a lot of options available for styling the elements, but there are not options for reordering them. There is the ability to use the block with Custom Post Types, but I didn’t see an option for add on-screen category filters. As with other Stackable blocks, there are extras such as a title, description, and separators.

The Advanced tab offers features common to many of the other Stackable blocks.

Pre-Designed Blocks and Starter Kits

I’m not going to look at the pre-designed content in depth, but here is some comparative information.

Kadence Pre-Designed Offerings

With the pro version the Kadence library currently has 36 sections and 1 starter pack. You access the Kadence blocks and pages through a button when you add the Row Layout block to a page.

This is the interface for the library.

And here are the Starter Packs. Starter Packs are sets of pages with a same theme style. Kadence currently only has one.

Note that Kadence has another plugin that offers starter sites, which I believe are linked to the global design settings, so there are more options than what comes with the block plugins.

Qubely Pre-Designed Offerings

Currently with Qubely pro you get 156 pre-designed sections and 33 starter packs. You access the Qubely library via a button at the top of the edit screen.

This is what the library interface looks like. The side filter search is more useful than the Kadence version.

And this is the library of pre-designed Starter Packs.

Stackable Pre-Designed Offerings

With the pro version of Stackable you get 306 pre-designed blocks. There are no starter packs. There are two ways to access the Stackable library: there is a button at the top of the edit screen and also a number of the blocks offer suggestions on their settings panels.

This is the interface for the library. It is nice that you can search by color or by light or dark designs.

A Quick Performance Test

I wanted to do a quick performance test. I created a page that had two blocks with “super blocks” inside, similar to what was used when looking at the container blocks. However, I used the core image and text blocks in all of the tests as well as the same image. I did use the containers, heading, list, and button blocks from the respective block plugins. Also, I didn’t put any attention on styling. The Kadence theme was used for all tests and all of the tests has a time to first byte of 481ms. I’ll discuss the results in the conclusion section below.

Core Page as Home Page

Here is what the home page looked like using only core blocks.

And here is the GTMetrix score.

Kadence Page as Home Page

Here is the Kadence version of the test page.

And here is the GTMetrix result.

Qubely Page as Home Page

Here is the Qubely version of the home page.

And here is the GTMetrix score.

Stackable Page as Home Page

Here is what the Stackable version of the home page looked like.

And this was the GTMetrix score.

The performance summary comparison is discussed below in the conclusions area.

Support

A note about support. All three products have support forums on WordPress.org and offer another support channel for pro support. All three products also have active Facebook groups where representatives from the company were present. Note that Facebook is not an official support channel, but it is a good venue for general questions and information. I’ve had support contacts with all three teams and I was happy with the responses and thought the interactions were positive. Here are the differences and my impressions.

Kadence Support

Kadence pro support is offered through a forum on the product’s website. I like forum support because I can learn by seeing how other people’s questions were answered. I found responses on the Kadence forums were informed and helpful. Most responses were about a business day.

Qubely Support

Qubely Support is offered through the online chat. The chat agents seem to offer first level support and triage, getting answers to harder questions behind the scenes. Chat support can sometimes be hit or miss, but in the case of Qubely the questions I asked were understood and answers were appropriate and on target. Most responses were about a business day.

Stackable Support

Stackable support is offered through an online ticket wizard on the Freemius website. Freemius is a service offering licensing and support features for developers. I am not a huge fan of Freemius, but I’ve used the online ticket system and got quick and friendly responses, again, in about 1 business day.

Summary and Conclusions

All three plugins have so many blocks and features that it is difficult to draw any overall conclusions, but here is my attempt.

Kadence blocks are the leader in terms of power. While the container blocks of the Qubely and Stablable sets are very convenient, the Kadence Row Layout block is the most powerful and provides the greatest control when trying to achieve complex layouts. The Posts-related block from Kadence also works with Custom Post Types and has the option for on page category filters. Stackable also had the option to use the Posts block with Custom Post Types. Both Kadence Pro and Qubely Pro have form blocks. I didn’t show it in this review, but emailing form entries, the Kadence version allows you to save form entries to the database and provides connections to a couple of email marketing platforms. I would rank Qubely second as they did have a forms option and their posts block has a great deal of flexibility. Qubely also has a Table of Contents block and Google Map block, which are more advanced elements.

Kadence was also clearly the leader in terms of performance with a significantly smaller total page size and fewer requests. Stackable and Qubely had the same number of requests, but Stackable came in second with a small total page size than Qubely.

In terms of ease of use, I think that Qubely seemed a bit better. The tabs in the settings area were attractive and set off the areas well. I noticed it was easy to loose your place with the settings areas of some of the more complex Kadence blocks. Some of this is a Gutenberg limitation of needing to do everything in a limited sidebar, but it seemed like Qubely handled it better. Qubely visually showed the row spacing on the screen and the spacing control on the button bar. It may just be subjective, but it seemed easier to select the parent block with the mouse, where with the other two I have to resort more to the block navigator. Qubely and Stackable were consistent in the options they offered on the settings tabs, which is helpful in remembering and finding available options. For creating the “super block” container, the Qubely BlockWrapper block and the Stackable Container block were convenient and easier to user than the Kadence Row Layout block, though they all worked. I liked the Stackable option to group any block into the Container. The Kadence Row Layout block had that nice copy / past styles feature, that I wish more blocks provided.

On the design front, Qubely came out ahead again. They had the most pre-designed sections and starter kits. The designs were attractive. Qubely also had the animation and interaction features which are advanced and available on most every block. The Stackable separators, with the three layers are easy to use, attractive, and flexible. Stackable also had a large number of pre-designed sections. This is all not to say that Kadence blocks were not attractive, but that was more built-in than user controlled.

There are some small things I saw that I liked. The Stackable Advanced Text block, with the ability to have text columns was nice. I am probably overstating it, but the lack of real columns was for me the biggest missing feature of the Classic editor. The Qubely Image block filled a gap that surprisingly many block addons ignore. There were a good number of settings giving the user options that the core version sorely lacks. I noticed that Stackable has an Image Box block, but it is not really the same thing. Stackable did not required that the free version of the plugin be installed and activated, which I appreciated as it helps to keep the plugin list from being too cluttered.

As noted above, Stackable includes options for a title, and a subtitle or description with many of its blocks. I didn’t really see anything wrong with it, as they are optional, but they didn’t seem necessary. There were a few small things I didn’t like. Qubely did not have the ability to disable blocks individually in the Admin area, and that seems like a sign of a good addon. Both Kadence and Stackable did provide that option.

In terms of value for price, Kadence has a lifetime option and Qubely’s AppSumo pricing is currently the best value.

Which should you use? In the pro versions I think I’d give Kadence first place, Qubely second, and Stackable third. This partly depends on who the user is and what blocks you need. If you are a gear-head, then Kadence is the most powerful and performant. If design is the most important then Qubely would be your choice. The blocks were a bit more attractive, there were a lot of pre-designed options, and it has the advanced animations and interactions. I think Qubely is also a bit easier to use, though perhaps that is subjective.

If you want a free Gutenberg addon for a content author then Kadence, Qubely, and Stackable are all good Gutenberg enhancements and any one of them would do. I hope you’ve found this comparison helpful. Please let me know in the comments what you think.