Kadence, Qubely, Stackable Gutenberg Blocks Comparison

hi this is david mccann for webtng i purchased three premium block add-ons cadence blocks cubely blocks and stackable blocks in this review i do a comparison i know that reviews sometimes skirt the hard questions but i'm going to do my best to give you answers this comparison will help you identify the strengths and weakness of each of these gutenberg add-ons 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 when setting up my test bed i decided to use the cadence theme because i know that it has good support for gutenberg all three of these gutenberg add-ons have at least some support for the cadence theme and take advantage of the cadence color palette there's a free version of all three of these gutenberg add-ons in the wordpress plugin directory cadence has more than 70 000 active install and 64 5-star reviews it comes with 12 free blocks 32 pre-designed sections one starter pack or set of designed pages editor width controls and copy paste column styles cubely by themium is also available on wordpress.org it has more than 9000 active installs 38 five-star reviews it includes 27 free blocks 61 pre-designed sections three starter packs global color topography settings and editor width controls stackable on wordpress.org has more than 30 000 active installs 270 5 star reviews it also comes with 27 free blocks and has 58 block layouts and 83 pre-designed sections and looking at these statistics in the wordpress directory we see that cadence has the most active installs then stackable and then cubely but 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 this means there are really more stackable installs than shown it's also interesting that stackable has many more 5 star reviews even though it has fewer installs than cadence let's take a look at what comes in pro on the cadence website we see that pro comes with nine premium blocks including form and gallery extras four premium sections unscroll animations and support cubely pro comes with 11 additional premium blocks 95 additional premium sections 28 premium starter packs and support and finally stackable pro doesn't add any more blocks they're all available in the free version however it adds enhancements to some of the blocks it adds the option to use your own awesome pro license it adds 223 additional pre-designed blocks it adds advanced column layout spacing options 232 more block layouts you can add css per block advanced options for the blog post block hover and image box effects more than 50 image blob shapes up to three separator divider styles a role manager and support on the website text version of the video there is a table showing the blocks that are included the ones that come with pro are highlighted in blue you can see there are some that are common to all three of the block add-ons and some which are unique some of the more advanced ones are form blocks a google map block a modal block the post grid blocks the container blocks a table of contents block and video pop-up blocks i'm going to look at some of these in the comparison in just a moment if we look at pricing cadence blocks pro is available standalone for 59 a year or you can buy a membership that includes it as well as all of the other themes and plugins for 139 a year or 449 for a lifetime membership cubely is available on their website for thirty nine dollars a year for one site 59 for five or ninety nine dollars a year for unlimited licenses there's also currently a special appsumo lifetime option which is a good value and there's a link to that on my website stackable pro is available for 35 a year for a single site or 99 a year for unlimited sites let's begin by comparing container heading and list blocks container blocks are key to having a page builder-like experience when using gotenberg all three offer a nice upgrade from the default column block that comes in core one thing i've noticed when trying to work with gutenberg as a page builder is that you're 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 while there are plenty of card types of blocks but none of them support a list so in this case you need to turn to a container block and try to create your own super block the container challenge for each of these add-ons will be to create cards like the mock-up shown i have here a test site with the cadence theme installed i've added a bunch of pages and there is a custom post type called books available i have cadence blocks pro and free cube lee blocks pro and free and stackable pro and free installed on the site but none of these third-party ones are active right now i'm going to start by looking at what we can do with core remember what i'm going to try to do is create our kind of super block or card with several elements in it and we can create a basic version with core to do that i'll start by adding an image and then i'll add a heading and some text and a list and a button and let's center what we can we can see that we do have the option to center align some of the blocks like the image block but note there are no spacing padding margin options we can text align the heading again no spacing options we can center the text again no spacing options there is no option to horizontally align the list block there is the option to center align the container for the button now gutenberg has a feature that's kind of nice and that is that there's the ability to group blocks together and you group blocks by selecting one holding down the shift key and then selecting the additional blocks and then clicking here on the icon bar there and clicking group there is the option with a group to give it a background color so i'll do that but there aren't any other margin or padding options now i'm going to duplicate this and then i'm going to add a core column block with two columns and and i'll place these two groups into the columns so here's what we can create using wordpress core i'll publish this and let's go take a look on the front end it's not too bad we don't have any options for creating a border or rounding the corners there are no options for spacing or for centering the list but this is not too bad and this is what comes for free with wordpress core now let's try to do the same thing using container and some of the advanced blocks that come with the add-ins let's start with cadence blocks we'll activate those create a new page and we'll start by adding a cadence row layout block this is actually pretty powerful the cadence row layout block gives you some preset layouts you can see you can have up to six columns this is also by the way how you access the pre-built library you can adjust the gutter the padding and margins for background options you can have a solid color a gradient a background image or even a video there are some divider options that you can select for top and bottom there are text color settings structure settings these are actually pretty powerful you can control the max width and the z index and their visibility settings by device size and whether a user is logged in or not to get started we want just a single row which is going to be our container and one thing i want to point out here is that cadence also has some settings not only on the block level but also on the column level which the core columns block doesn't have much of either again you have background options alignment options margin and padding visibility but also some animate on scroll options okay so to continue on we're going to add an image cadence doesn't have an image block so we're going to use core we'll choose an image from the media library and we will center align it next let's add a heading cadence has an advanced heading block see it has some nice options here and we will center align it and we can try to adjust the top margin and bottom margin now let's add some text and we'll center align that and now a list and cadence has an icon list block you can have more than one column and adjust the vertical and horizontal spacing align the icons you can adjust the list text styling and icon styles together or you can individually control the list items and give each list item its own url so that's pretty cool and change the icon individually for each list item so that's nice we don't need to do that but it's pretty cool that it has that so i'm going to add these you can move them up and down or remove them i don't see a way to center align the block but i can give a margin here to move it over some so we'll try that lastly i want to add the button cadence comes with an advanced button and we'll align that center and we'll style this a little bit cadence lets you have multiple buttons in your kind of button container and let's see let's give it a text color of blue a background color of white a border color a blue a box shadow border width of four and a border radius of eight let's see how that's looking now so now let's select the column and let's give that a background color and then let's do a border color and a border width and a border radius it looks good a box shadow okay now let's duplicate that okay so we have two of them let's now add another row layout block with two columns and place these inside and update and now let's take a look and this is the cadence version so that looks very nice now let's try to do the same thing using cubely i'm going to go into the plugins deactivate cadence i'll activate cubely with cubely you also get a settings menu item here however note there aren't any options here for turning off or disabling blocks one by one which is i think a nice feature of some add-ons let's go ahead and add our keebley page now cubby comes with two container blocks there's a row block but there's also a block wrapper and we're going to start with the block wrapper which is a nice little thing it's a little bit easier than using a cadence single column but i think it's going to work about the same way notice that a lot of the blocks have this spacer option here to adjust the top and bottom and it has these kind of stylish tabs here there are options for background and border and radius which we'll come back and use and cubely blocks almost all of them have on the advanced tab the option for animations i guess these would be scroll on scroll animations and also for interactions let's go ahead and add an image block you notice that cubely has an image block so we don't have to use the core version which doesn't have many options the cubely image block gives you two styles to start out with you have more advanced options you have alignment options we can insert our image but also there's an option for a retina image you can adjust the opacity and the radius and box shadow of the image so a few more features there than the core version here's our image and let's take a look at these animations and you can test it here so that's what it'll look like then we have an interaction option let's try this enable mouse movement so let's make that live you can see that we can have some effect if we move the mouse over and then there's an interaction option and what this is is there's move scale rotate skew opacity and blur so these are triggered as you scroll so try a scale and then i'm just trying again let's do a scale another scale and we'll put it back to one let's update that i think we might need to add some some content here to scroll past try this out and see how it looks okay so there's the effect obviously you can play around with that to make it work the way you want let's go back to our test here creating our super block cubely has an advanced heading block and here's interesting when you insert it it gives you some sections that use this block so that's a nice option let's add our text and an interesting thing is cubelee has an advanced text block which is okay and there are a ton of style options you have options for separators you have the option for title and subtitle and then our animation and interaction options again let's add our list jubilee has the option for an advanced list or an icon list the advanced list i think has an icon but you can't set it per item let's try this one here that's kind of cool and you can change the icon by clicking on it but i think we'll be fine with just using an advanced list let's add our list items if we look over at the settings we can see they have a couple of styles here we have some topography controls we have some font style controls we can change the bullet and let's see i think we want to make this centered and look under design here and let's make the padding a little less to bring these together you can see there's some options for color and border whatnot and finally let's add our button keyblade has a button and a button group block let's just go with the button block we get the suggestions of some sections with buttons and we want to use an outline and let's make the border width two and the radius four that's good oops radius four so let's make it four okay so here is our kind of start here actually on the text block he really has these options for title which we don't need here okay now let's go to the whole container let's give it a background color that we want and let us have a little bit less padding on the top let's say 10 and say 20 and let's go with a border color of blue and a border width of eight and let's enable the box shadow and let's have a radius let's actually go with border width of let's try six okay now let's duplicate that and let's add our other container the row two columns notice this how nice that is that shows you the padding here i think that's kind of cool and the cubely row block has a few style options here you can have equal column heights which is a nice little feature and you can adjust the column size you have a background option and their shape divider options okay but anyway let's go back to this and drag this down here and then this one and drag this over so let's update that let's save this and let's see i think i need to do some centering here i think the text was maybe centered also let's update that and now go take a look at it and this is our cubely version which i think is also attractive and that was pretty easy to create last but not least let's go take a look at the stackable version of doing the same thing with stackable okay i'm going to go back to the plugins and we'll deactivate cubely and we'll activate stack stackable remember you don't do both you just do one and we're going to use the premium version with stackable you get a settings page this is where it has an option if you own font awesome pro you can use it with stackable by entering your description information there you have a role manager for limiting access to images and content and here you can enable and disable blocks if you don't need them all turned on which is i think is a great feature okay let's go now and create our page and stackable also has two containers two container blocks it has a container and an advanced column and grid block but the way you access the container is a bit different it's not available in the block library this is how you access it first you add a block and stackable doesn't have an image block but it has an image box it's not quite the same so i'm just going to go with the image and we'll choose our image here for stackable okay and now the way the stackable container block works is you can add a block or blocks into the container so that's how you do it that's kind of nice now let's add our heading we can center it here a lot of stackable blocks have the option for a title or subtitle even if it's just the text block we'll see that in a minute but i don't need the subtitle here then there's the option for a top line if you want to put a line above or a line below the heading there are spacing options and then these are often the same in a lot of stackable blocks you can change the html tag adjust the opacity or the z index there are blocks spacing options and i think some of these are pro features there's responsive to hide what they call responsive but it's visibility to hide on different device sizes and then they have this custom css area panel here where you can add css that applies just to this particular block so that's the stackable heading block next let's add our text and stackable actually has an advanced text block here so we'll add that and interesting thing about this is that they give you some layout options here this is another feature of stackable is that they have these little layout panels here so you can kind of choose a pre-set layout just like with quibbly you can bring in a section from the library and the stackable advanced text box lets you have multiple columns which i think is kind of cool i know maybe it doesn't impress you that much but i really believe that one of the biggest drawbacks of the classic editor is that it didn't have native columns anyway here's a nice little feature just like with some of their other blocks you you can add a title or subtitle here you have your spacing options and then block background options and then you have an option for a top and bottom separator now these are kind of cool a separator so like we can add a wave we can give it a color you can adjust the height and width and flip it add shadow bring it to the front and back or what not and with pro you get two more layers so we'll turn that on and we'll turn this on so that's kind of cool the separators are available on a lot of the blocks for the top and bottom so that's kind of a cool feature i guess we don't really need multiple columns here so we'll go back to one column let's get our text edit in here and let's center it okay and then next we'll add our list stackable also has an icon list kind of interesting thing here if you need it okay again you have your option to use something from the library but you can have a couple of columns we don't really need that we want to write a line at center you can adjust the icon or text or spacing here but you can also click on the individual icon here to change it if you want to have a different icon for each item okay so we'll enter our okay and then all right and go to spacing and here's list gap we can bring those a little closer together if we want and now let's add our button we get some button layouts here if we want to have multiple got buttons and i think we want the ghost button there we go and we will have a border width of four and [Music] four radius of four now let's go to the container and let's give it our background and we see that it has the option for a radius and a shadow but it does not have any border options so we'll go to advanced and custom css and i'll paste in some css here see we have that we're going to need to adjust some spacing i don't think we need as much padding at the top or on the side let's try padding 10 px does that do anything for us okay let's make this a little thicker all right now that we have the container let's duplicate that and now add our advanced column and grid block and we can see this has this has layout options and some kind of tiled and uneven pre-configured layouts and there are style options again you have block title block description and your separators we want to do is drag this down into here and then this one drag that one down into there and let's update that and go and view it there are a couple more things i want to look at quickly here i'm just going to go ahead and enable all these so we can zip through these last things first let's take a look at the design libraries so we'll start with the cadence row layout block this is how you get to the design library here you can see it has some pro and then a number of free options it's only got one starter pack starter packs are multiple pages kind of themed styled together and here are the categories of the sections okay so they're nice looking but they're not really that many of them then this is how you access the quibbly pre-designed library this is more attractive there are 156 sections in total and they have these category filters here so you can see how many there are in each by each category here are the starter packs there are 33 of them see this one has five pages this one has seven and so on so this is pretty extensive and then there's the stackable design library here we can see it has 306 this is pro version 306 sections or blocks and they call them and there are no starter packs but you have your categories here but you also have color options you can do it by colors or light and dark which is nice so this is the stackable library it's pretty extensive okay so those are the pre-designed library options and then there's one more thing that i want to look at let's go to the pages so let's start with our cadence post grid carousel and first thing we see here is you can select custom post types so that's nice you can use a query or you can select the posts you want to include individually you have your ordering and offset the option to use pagination you can filter by including and excluding a category you have three layout options grid masonry and carousel now a nice thing here is there is a category filter on screen category filter so that is a nice feature also kind of an advanced feature of the cadence version then you have border and padding margin you have color for the filter and typography settings for the filter you have container settings image settings you have some ability to have the title to have the categories above or below the title the same with meta but you can't kind of totally shift everything around but there are some options there for that so we can see this is a pretty powerful post block option then let's take a look at the quibbly option this is very attractive you have a kind of list or a grid masonry and then a couple of options with kind of a hero or featured uh section you see you have some post design options in your query options you don't have the ability to choose a custom post type so that's a limitation here but in terms of all of the other features you have a ton of options for styling and making these look attractive so it is very attractive and has a lot of style options finally let's take a look at the stackable posts block okay and here we have several different layout options i guess that's a nice one you can choose some blog post pre-designed sections adjust the number of columns and under post settings there is the option to show a custom post type so that's nice you can filter the query by category set the offset and whatnot and then you have the option to turn on and adjust some of the settings for the different elements of the post block of the post display so this is the stackable hosts block two other things i want to compare quickly before we get to the summary and conclusions the first is that i created a test page for each of the blocks this is a page basically the same type of thing this is the core blocks use the same image and i used the core image block and core text block but the heading list and button block were from the gutenberg add-on packs so what i did is i created a core page set it as the home page of the site and then ran a gt metrics test as you can see the core i'm using the cadence theme the core got a 99 percent and page speed score a 91 percent in the y slow score it had 85.1 kilobytes total page size and 14 requests i did the exact same thing here with the cadence page i didn't try to style them really i just added the blocks and the content and the gt metrics score for the cadence page when this was set as the home page and by the way when i ran these tests i disabled the other blocks so there was only one block set active at a time it was also 99 for page speed 90 for the y slow score and 90.8 kilobytes total page size and 17 requests same thing then with quibbly test page set as the home page and this also had a 99 page speed score a 90 percent y slow score it had a 145 kb total page size which is a lot bigger than some of the other ones and 18 requests and then did the same thing with stackable and it also had a 99 percent page speed score a 90 percent why slow score it had 117 kilobyte total page size and 18 requests for all the tests the time to first byte was 481 milliseconds so i'll do a little comparison talk about these scores at the end in the summary last thing i want to discuss is the support channels i've actually had support contact with all three vendors and they're generally about a day business one business day for response and i was satisfied with the responses from all of them for cadence you use the support forums on their website i personally like support forums because you can read and see how other users solve the problems for quibbly contact them through their chat widget on their website and sometimes chats are hit or miss but this seems to work fairly well for them the people who respond seem to be doing triage and they get the answers from probably another layer of support but the answers have been on point they've been good and helpful and finally for stackable what you do is you log in to your user dashboard for stackable and there's a button in the dashboard for support and you go through a support wizard i'm not a huge fan of freemius but they have been making some progress in giving you more options for opting in in terms of what data is collected and i was a little skeptical about the support interface but it worked great the stackable support answers were always very friendly they seem to go out of their way to be helpful all three product have active groups on facebook it's not a support forum but it is a good place to get general information and ask questions and so i'd say support on all three is good now let's talk about summary and conclusions because i did want to actually give you some recommendations and not cop out on telling you what i think are the pros and cons and the best options so you know all three of these have lots of blocks and features so it is hard to draw overall conclusions but here's my shot at it in terms of power cadence blocks are the leader while the container blocks of quibbly and stackable are very convenient the cadence row layout block is the most powerful and provides the greatest control when trying to achieve complex layouts the posts related block from cadence also works with custom post types and has the option for on-page category filters stackable also had the option with their posts block for using it with custom post types so that was good both cadence pro and cubely pro have form blocks i didn't show it in the review but in addition to emailing form entries the cadence version allows you to save form entries to the database and provide some connections to a couple of email marketing platforms like mailchimp i would probably rank cubely second in terms of powerful as they did have a forms option their post block has a lot of flexibility they have a table of contents block which is a little bit advanced they have a google maps block which is also a more advanced option when we talk about performance cadence was also clearly the leader and it had a significantly smaller total page size and fewer requests when we look at the results here in a table the core blocks were at 85k the cadence were at about 91k cubely was at 145 which is a big jump and then stackable was at 117 kilobytes and then in terms of requests we had 14 from core 17 from cadence and 18 from quibbly and stackable so cadence was also the most performant in terms of ease of use i thought that cubely seemed a bit better the tabs in the settings area were attractive and set off the panels well i noticed when using the settings area of some of the more complex cadence blocks that sometimes it was easy to lose your place there was such a long list of controls that sometimes i wasn't sure exactly which section i was in i thought that cubely handled that better he really showed visually the row spacing on the screen and the spacing control on the button bar was a little bit simpler than some of the margin and padding controls but it was also very easy to use and it could be just my impression but it seemed that when you were trying to select the parent block in some of these containers that the cubely block parent block was easier to select for some of the others i had to go up to the block navigation area in order to find the block that i was trying to get to cubely and stackable were consistent in the options that they offered on the settings tab and the advanced tabs and that makes it easy for users to remember where things are for creating the superblock container the cubely block wrapper block and the stackable container block were convenient and i thought it was easier to use the container than the cadence row but you could get the job done with all of them but i just thought the containers were a little bit easier to use i liked the stackable option to group any block into the container i thought that was kind of slick and i thought that the cadence row layout block it has a nice copy paste styles feature which i didn't show in the video but i wish that more blocks had that feature on the design front cubely came out ahead again they had the most pre-designed sections and starter kits the designs were attractive they also had that animation and interaction feature which was advanced and available on almost every block i'd say second maybe on design front stackable separators with the three layers that was easy to use and attractive stackable also had a large number of pre-designed sections that's not to say that the cadence blocks were not attractive but it seemed those attractive styles and cadence were sometimes built into the blocks more than being options that the user could control and also cadence at this point anyway did not have very many pre-designed sections or starter packs now i understand they're having another plug-in for starter sites that will have some of those things but that's not what we're looking at in this video as noted in the video stackable included options for title and subtitle or description on many of its blocks i didn't see anything wrong with that and because they're optional but it also didn't seem really necessary there was one small thing that i didn't like with cubely which was that it didn't have the ability to disable blocks individually in the admin area which both cadence and stackable provided i think that is a nice feature because it helps to keep the block list from getting overloaded terms of value for price cadence has a lifetime option and cubely has currently i don't know how that's going to last an appsumo pricing that is a very good value so which one should you use in the pro versions i think i'd give cadence first place cube lee's second and stackable third this partly depends on who the user is and what blocks you need if you're a gear head then cadence is the most powerful and performant it might be a little bit harder to use than cubely but you know if you're a gear head you don't care you want to have it your way and have that extra control if design's the most important thing for you then i think cubely would be your best choice the blocks were a bit more attractive and there were a lot of pre-designed options it also had the advanced animations and interactions and i think that cubely was a bit easier to use if you want a free add-on for a content author then cadence cubely and stackable are all good gutenberg enhancements and any one of them would do so that's my comparison there's a text version of this video available on the web tng website along with some other reviews and walkthroughs and resources i hope you found this video useful thank you for watching

Channel: David McCan

Views: 7,060

Keywords: gutenberg blocks, wordpress tutorial, gutenberg wordpress tutorial, wordpress plugins, wordpress gutenberg blocks, kadence blocks, best wordpress themes, qubely blocks, qubely tutorial, qubely wordpress plugin, qubely pro, wordpress gutenberg, kadence blocks gutenberg, kadence blocks wordpress, kadence blocks tutorial, qubely pro review, kadence blocks vs, gutenberg blocks tutorial, stackable blocks wordpress, webtng

Id: 0AZYMLXFq8w

Length: 44min 16sec (2656 seconds)

Published: Wed Sep 16 2020