The Plus addons for Gutenberg: Should You Use It?

today we're gonna look at a new gutenberg blog plugin that i've discovered and it is called the plus blocks and honestly i'm blown away by the features because there are some really unique features that most gutenberg block plugins don't provide now we have to address the elephant in the room before we move on to talk about using it on our sides our main concept when using over stylish blocks is that it may bloat the web page we've got to be objective here right the reason why we choose to use gutenberg instead of using page builders is because we want our sites to load fast and have as little bloat as possible if not there is really no reason for us to use gutenberg right now i've got to be honest and objective in this video the guys from the plus blogs have asked me to check out their blog plugin and they have offered the partner with me but what i've done on this channel is to be as truthful honest and transparent as possible so if i want to promote something i gotta stand behind it just like how i decided to promote cadence generatepress and bloxy as awesome wordpress teams as well as a2 hosting and dreamhost as the best wordpress hosting provider i test them out openly and independently and i share with you all the data that i've collected i work with only the best because you deserve to know only the best i do not blindly promote products just because they offer some incentive so that's the same thing over here we're gonna discover if it's worth using the plus blocks by discovering if they are bloated to determine that we have to look into the dome size of each block dome or document object model isn't audited in the google php inside and it measures every single element you use on your page every paragraph image container column button or whatever are counted as a dome element the more complex the coat of the element the more dome it adds to the page and what i classify as lightweight are blocks that have lower than 40 dom elements between 40 to 100 it will be medium weight and anything above 100 dome elements it will be classified as heavy don't worry if you don't understand what these numbers are you will get to know it in a while now we don't have a lot of time to test everything so i will test only the unique ones on this video and if the plus blocks happen to be a plugin that i recommend i will start doing tutorials using the plugin anyway let's get right into it hey this is jack and this is your first time watching a video from my channel i share a lot of wordpress tutorials as well as online business content and my main focus is to help you create fast loading wordpress sites so that your content can rank better on search engines if any of these topics align with your interest feel free to subscribe to the channel and hit the bell notification now before everything else we need to test the dome size of the blank page before we install the plus plugin and we need to compare it to the dom size of the blank page after we have installed and activated the plugin this is to know if the plugin brings any bloat to the blank page then that dom size after we've installed the plugin can be used as a benchmark for us to know how many dome elements are added using each block so let's get cracking shall we let me first show you what i've installed on the site this site is still hosted on siteground so i have these two plugins installed i'll be switching to a2 hosting soon by the way and i've loaded one of cadence's starter template which comes with the cadence blocks plugin so these are the four plugins i've installed and since this is a cadence template the theme is naturally from cadence let's add a new page we'll name this as blank and let's publish this blank page let's copy this paste it over here and analyze now let's not look at this what we are focusing on is the dom size right here so the blank page has a total of 257 dome elements 23 dome depths and seven child elements now let me share with you the benchmark google has set google said that your page should not have more than 1500 notes which is the total dome elements it should not have a debt that is greater than 32 notes which is right here and a parent note should not have more than 60 child notes which is reflected over here so we have some room to design the page before this audit is flagged naturally you want gutenberg blocks that are not bloated so that you can add more design elements to it and still pass this audit a site that has lower dome size would naturally perform better than those with excessive dome now let's install both the free and pro version of the plus blocks to see if the plugins add any dome to the blank page normally this only happens with page builders but let's test this out so that we can use the data as a benchmark as well now we have installed both the free and pro plugins let's purge the cache and test this again now let me try this out a couple of times just to be sure so it seems that after we've installed the plugins the total dome elements has decreased by two but the child elements has increased by 3. so let's use this as a benchmark to test other blocks now to save your time because there are a lot of different layout options to test for each block i've created a brand new page for each of these layouts so that we can test them immediately and get the results rather than watching me build it from scratch as you can see from this bar chart there is nothing else on this page it looks like this on the live page as you hover there is this small little data here so let's test this let's copy this link paste it here before that let's purge the cache and let's analyze so as you can see it adds tree to the total dome elements the dome depth remains the same and it seems that the child element has reduced by one so this is generally a lightweight block i'll be happy to use this next let's test the radar chart it looks like this on the live page let's copy this purge the cache paste it here and analyze so this add one to the total dome elements and the child elements is reduced by one so this is awesome i can definitely see myself using this next let's test this line chart it looks like this on the live page so this is awesome again it has the same result as the radar chart let's test the next chart which is this polar area chart this is amazing as well even with the animations and stuff it is still fetching a low dome size and finally let's test this bubble chart that looks like this cool the result is exactly the same as the previous charts so there you have it this advanced chart block is a lightweight block and i'll definitely recommend that you use it and now let's test the next block now we're gonna test this animated service boxes and before i do this test i want to mention that i love this blog it can make your site look unique and definitely wow your site visitors like for example this sliding boxes as you hover to each of the boxes they will expand some details of the service or this which looks amazing and this as well and how about this this is probably my favorite you can have different services here and you can add different backgrounds to each of the service with different descriptions and what i really like is this as well because as you hover to the text the images change as well this is very useful if you have products to display or if you have services to explain this is perfect for those scenarios so let's test if this block is lightweight let's go to the first layout over here unfortunately the image accordion doesn't work as you can see no matter how i purge the cache it doesn't work but in the editor it works fine but anyway let's just test this out so this adds about 16 elements to the total dome size the damp remains the same and the child elements as 9. so generally this is a lightweight block which is kind of awesome if this works so maybe the team from the plus can actually look into this and identify what is the issue if that is fixed i think this is amazing you can probably use this as a side header next let's test out the sliding boxes let's copy this purge to cache and let's test this out this is really a cool way to display the services so this adds about 19 elements to the total dome size the rest remains the same and that is good let's go to the article box let's purge the cache and this is definitely a little heavier it adds about 28 elements to the dom size but in general it is still fine let's test the nyx info banner i really like this so this is heavy as well it adds 23 elements to the dome size but i don't think i need to test any further because i believe all the remaining layouts is going to fetch a result close to this but let me test one more i really like this hover section so i'll just test this and this will be the final test for this block and i'll determine if this is a lightweight block okay no issues over here i think in general the animated service boxes is a lightweight blog and i see myself using it to design home pages services pages and products pages this is definitely a blog that i will use now let's test the next block now we'll be testing this before and after block i'm really hoping that this is a block that i can safely use on my site because this is useful you can display the before and after to show the effects of a product if this can work with dynamic images we can add this to a product template and it will be amazing so before thinking about using it let's test this out this is so cool it only adds six to the total dome elements so this is a lightweight block and i definitely see myself using it more and more like on the renovation website i can display a before renovation and an after renovation image over here or for a wedding site i can have a couple images before they get married and after image after they got married and this is lightweight so this is amazing now let's test the next block now we'll be testing this animated heading block if we go to the wordpress editor this is how it looks like and if we select the block you can see that there are two types of animation the first which is over here where the highlighted part is animated i've created one page for this and then on another page i've selected this text animation and i've chose this style so this is how it looks like on the live page for this animated highlights let's copy this and let's test this out so this is good it only adds 6 to the total dome size and the rest are the same let's test the other now this is a little heavier it adds 23 elements to it but in general it is still fine i'm really loving the blocks from the plus so let's continue to test more blocks now next we're gonna test this timeline block and the unfortunate thing is that some of these designs are not reflected on a live page as you can see the background color of the button the title over here as well as this label it looks fine on the wordpress editor but it doesn't look proper on the live page it could be due to some caching issues but as i purge all these caches they still look the same on the live page but anyway let's just test this i feel that the developers need to put more attention and test out some of the blocks because there are some errors going around like for example if i change some of the background elements of the block it passes an error message so i really hope that the developer will fix all these issues but anyway let's check the dom size as you can see this is a little heavy because the more elements you add to this timeline like for example you have a lot of events over here it adds to the total dome elements but from this we have three images some paragraph buttons and all these elements over here it adds about 61 elements to the total dom size but i'm not worried about that because i feel that a timeline is used on pages where a company or a person has a story to tell so normally that page would not have a lot of elements they could probably just focus on using this timeline block and i don't think it will add more than a thousand dome elements let alone a thousand and five so this is a medium weight block and it is definitely usable on a single page where there is a story to tell now let's test the next block so up to this point i'm quite convinced that most of the plus blocks are coded with performance in mind and i really like a lot of their blogs because i don't see them in other blog plugins so if you want to check them out you can use this link with these codes to get exclusive discounts anyway let's continue with the test towards the end of the video i want to show you some of the blocks i can't test on this video because of some technical issues but when those issues are ironed out they're going to be amazing now let's test this data table block and to be honest i think this is the only table plugin that allows you to create mobile responsive table like this i've been searching for solutions but i just couldn't find them until i see it in the plus blog this is amazing but the only thing is that there are still some improvements to be made like for example on the wordpress editor it doesn't look like this it looks like this i've styled the images to be 300 pixels in width and the header text is white but on the live page it just doesn't show that way so this is something that the developers have to iron out but other than that i think it is amazing so based on all this data over here to get the number of the dome elements from the table block we can basically minus off one from each element over here so for example the header counts as one dome element the image is counted as one dome element and each of this data here is considered as one dome element so if we add them up we can basically minus of 13 dome elements from the results so this is the live page let's push the cache and let's test this out the data table block is a little heavy it adds about 91 to the total dom size but if we minus 13 off the total dom size of the data table is 68 which is still manageable to be honest i would say that this data table is considered as medium weight but this is definitely very useful when you're doing comparison tables like this because it does a great job when it comes to the mobile table i did this with custom css and it is a hassle so using this data table block it makes the process a whole lot easier so cool this is an awesome block to use now let's test the next block next let's test this process steps i think this is an amazing blog if your website needs to explain the steps in order to provide a service to your clients so this is the default setting of the process steps block of course there are a lot more customization options but let's just test the default settings of this block and see if it is lightweight and yes it kinda is because it adds 32 elements to the total dome size but let's try to max this out let me turn on every single setting over here and we will test this out again so we have basically turned on every possible setting let us update this and refresh this page as you can see i've added a lot of effects to this so let's test this out and as you can see it has added 39 elements to the blank page and if we compare this to the default settings we have only added seven dome elements so again i think that this process steps block is a borderline lightweight block now let's test the next now i really want to try this logi files animation because it can give a lot of animation effects to your websites for example this this is the default loddy file block if you add it to this page you will see this but what if you don't like this animation all you need to do is just to copy the link of the animation from this lottie files website over here so if you want an animation related to bicycle you can just search for it so for example if i like this i'll click on this and then i'll click on interactivity and then over here under this section all you need to do is just to copy this link from https all the way to json copy this go back to the page paste it here and you will see the animation here that's very cool right so let's test this out let's see how much of a dome it will add to a blank page let's update this let's open this up on another tab and here we go let's copy this link paste it here and analyze so as we can see the dome size is quite a lot i think it has added around 200 plus worth of dome and then it has added 30 to the ciao elements so this is heavy but what if we change the animation to something lighter like for example this let's open this up click on this interactivity let's copy this link paste it here update refresh and let's test this out again and as we can see for this animation it doesn't add much to the dom size it probably adds around 30 to 40 dome elements to the page and it doesn't add any child elements here so for this block how much of a dome it adds to the page really depends on the animation you choose the more complicated the animation is the more dome elements it adds to the page this is awesome i can really see myself using this on the page you can basically search for whatever animations you want for example if you're a car dealer you can just search for car and they have all this cool animation over here a lot of them just copy the link and paste it over to your page and voila you just have to be mindful of the dome elements of the animation so it's cool that the plus blocks allows your website to integrate with lotte files for this block it's a big guess although most of the time it's going to be medium weight so let's test them next now we're going to check this progress bar out because it can be used in a product review page or maybe a survey or sales funnel telling your audience their progress there are a few layouts in this blog and i've created a new page for each layout so let's test them out this is style number one which is reflected over here as you can see this is the progress bar and then we have the pie chart for the pie chart we'll only be testing this style because they kind of look identical so let's first test this style right here let's copy this and let's test this out so over here this adds about 12 dome elements to the page in this sense this is a lightweight block let's test another style which is this this adds 12 elements as well it is the same as style number one now let's test the progress bar it is the same as well so in general this progress bar block is lightweight let's test the next a lot of blog plugins i've come across have some social buttons but they are more for connecting your social profile to your website like for example this i hardly see any blocks that allow you to add social buttons for your site visitors to share your content and this blog from the plus caters for this now this is unlike the usual social sharing plugins where you connect your sites to for example facebook so that each share will be counted and can be displayed on your site but in this block you can control the counter let me show you what i mean over on our wordpress editor we can toggle this to display the counter and as you can see you can manipulate the number of shares here whether it is ethical or not i'll leave it up to you but having a high sharing counter could spark more shares and in this block i don't see any way that you can connect to the social platform to aggregate the number of shares and usually when you need to connect to other platforms it will slow down the page but either way it does the work if you want to be ethical you can turn this off and as for all this share counter here you can just select a design that does not have the counter but one thing is it looks like this on the editor but it looks differently on the live page i really hope that the plus developers can look into all these small little issues and when fixed this block plugin is going to be very powerful anyway let's test this out to see if it's a lightweight or a medium weight block this adds a total of 31 dome elements to the page which basically means this is a borderline lightweight block and a good thing about this is that you don't need to connect to other platforms to get the share count otherwise you'll see a lot of issues over here on the third party usage so there is really a good embed when using this block how you want to use it i'll leave it up to you now let me share with you some cool blocks that i couldn't test in this video now let me show you some blocks i really like but i can't test them on this video because there are some technical issues for example if we go to the wordpress editor and we add this tab tools block and if we want to style the content of this tab let's click on tab one currently the content type is content where you can add some text to it like this but if we want to style this we will select the template option and under block templates as you can see there is nothing here so this block and some of the blocks i'm going to share with you are not usable currently because i think they are doing some performance improvement but let me show you the potential of this block plugin for example this carousel anything this looks common but the vertical scroll is not common and then we have this carousel anything plus the process block just hover to the process and the image will change to match the process this is really amazing it makes the site unique and it is good for user experience and what about using carousel anything with the tabs tour you have this arrow when you click on it the image will change as well as the button over here you can also click on the button and the image will change as well carousel with accordion this is simply awesome we have another blog called tabstool you have seen this on a carousel anything you can have this as well this looks cool this as well and for this you can just hover to these tabs and everything else will change we also have the side menu just imagine using this in the hero section of your website it's going to look so cool and there are many more things that you can do with this blog the advanced hover card there are all these beautiful looking cards that has all these animations the flip box this is quite amazing the info boxes these look basic but what i really like is this this looks really cool i really think there is huge potential for this block plug-in although they have some issues to fix their ideas are spot-on just imagine when those issues are fixed and it becomes a stable plug-in and it's going to add a whole lot of unique gutenberg blocks in your arsenal their blogs are not exactly the most lightweight but i think it is a balance between lightweightness and functionality honestly going through the dome check i think the plus blocks is probably my next favorite blog plugin after get rid is taken down i just think that the developers have to look into the nitty gritty to fix all those issues and i'll probably be working with them to highlight all those issues you can join me as well and hopefully we'll all benefit from this i'll definitely be happy to do tutorials using this blog plugin with some use cases and if you haven't subscribed to the channel do so if you want to learn how to build wordpress sites using gutenberg blogs don't forget to smash that thumbs up button if this video helped all the best to you stay cool and as always stay safe [Music]

Channel: Jack Cao

Views: 2,658

Keywords: the plus addons, the plus addons for gutenberg, the plus blocks, gutenberg blocks plugin, best gutenberg blocks, best gutenberg blocks plugin, animated heading gutenberg, gutenberg wordpress, gutenberg wordpress blocks, wordpress gutenberg blocks, ultimate addons for gutenberg, gutenberg blocks, gutenberg wordpress editor, the plus addons for elementor, wordpress gutenberg 2021, gutenberg wordpress 2021, wordpress gutenberg tutorial 2021, gutenberg wordpress tutorial

Id: e9VTStmKVjc

Length: 24min 2sec (1442 seconds)

Published: Thu Oct 28 2021