The Best WordPress Gutenberg Blocks

good morning today i'm going to take you through the most exciting best blocks of the best block libraries that do things like this [Music] so as ever chapter markers along the bottom of the video if you want to skip to specific sections all the plugins that i mentioned today news today i will put links to in the description as well these are all completely free plugins which is cool we're going to start with number 10 the stackable video pop-up there are two things i love about this block the first is you can have a video pop-up so you just click on this icon and i'll show you in a second it pops up the second thing is you can create this lovely shape for your videos right follow these steps to get your video popping up first you need to add the video pop-up block so you can click on the blue plus sign here search for video so you've got two things really think of them a bit like layers this will help you get this work the first is you want to choose the image so i'm going to click on here and i'm just going to choose you know one of my images that i want to pop up let's choose this one here okay and that'll bring the image in now you can actually set the the blobbiness of your image because we've got the image focused again these three lines up here will show you the list view of your blocks which is really important when you're working with blocks like that have these layers working you'll see we've got a video pop-up layer and the image layer if we want to set the blob we need to make sure we've selected the image layer and now just go down here so i go to style over here on the right all the way down go to image shape and just choose one of your blob shapes you can play with those i think that's so cool and now we just need to choose the video we want to use so again make sure you've got the video pop-up block selected and now over on the right here you'll see the option to upload your video so upload your video which i've done you can also customize the icon you see the little icon here and you can change things like the color and the size so i'm going to make it as big as possible and that's it just update it let's go and have a look at it see how cool it looks there's my cool looking video click on that and the video pops up and auto plays so i think it's super cool so that's the stackable video pop-up right next up is the image comparison block by cubely this is what it does it lets you add to it unless you add two images and then your users can slide across like this so these work great where you've got a before and after which i clearly don't have in this video you can also this is also great for things like products where you've got products and you want to show before and after or you've got some kind of conversions going on it's another free block let me show you how it works very very simple again all the links will be below you just click on the blue sign search for image comparison there it is from cubely add it and it's pretty simple you've got two columns here you add an image from your media library in it from each column so let me just add wilson and pootle here on the left hand one and on the right hand one let's add a mountain scope now again i'm not using anything like images that kind of make sense but you see as you drag across here it unveils something in between so fantastic for things like garden conversions and stuff like that i also want to quickly give an honorable mention to the cubely video pop-up block because they also have a video pop-up block what one really nice feature of this is they have this really nice button that kind of does this so it really entices your customers or readers to click on the button it's almost irresistible right this next one is one of my favorite ones it's an image hot spot block by get with i think that's how you pronounce it it sounds like i'm saying get rid with a slight lisp so apologies i've got it wrong but you add an image and then you can add these cool little hot spots and you can add a title and text over them and you can link them as well it's a free block i just think it's really cool so this is an advert for we're looking for writers at the moment so this is how it works it's pretty straightforward just search for image hotspot up here add the image hotspot block that's step one step two choose your photograph that you wanna hotspot i'm gonna choose the same one add that to your page and now you basically add your little hotspots and you do that by this little icon here click on that little icon and then you just kind of draw around the image where you roughly want it to go if i just put in free coffee here and i'll just grab some dummy text you can see here you can also enter a url so you can link it which i'm not going to do for this one you've got some position style things as well here which i'm not going to go into just save it now sometimes what i've noticed is the actual hotspot doesn't go in quite the right place but you can drag them you can drag them around once they're in situ so you can put them whenever you want so there's my free coffee one click off and then just repeat the process to add the next one same deal again one of the cool things about the get wid plug-in it comes with an instagram block which is a common request i get for easy to set up you just add the instagram blog you add it into your page it will ask you at this point i've already configured mine basically to link your wordpress website to your instagram account which only takes a few minutes but then it just brings in your instagram photos dynamically so every time you post on instagram it pulls them into your pages you have a few options over here on the right where you can choose the number of items that you want to bring in and you can also set the number of columns that you want to bring in as well so you can create these lovely gallery layouts we've now reached halfway and if you are enjoying the video if you could hit the like button now that'd be amazing because every single like really really helps spread the word of the channel and also every time you hit like our cats get a little treat [Applause] [Applause] thank you for that pickle cat certainly enjoyed her treat next up is the accordion block from atomic blocks it lets you do this so you have a list on the page essentially and you click on one of the items and it grows out like a classic accordion so this is great when you have lots of information but you want to show in a more concise way it's very simple to set up brand new one from scratch and you click on the blue plus sign search for accordion add the accordion then you just pop in your title i'm putting in how to boil an egg for some reason and then this is where you put your text in there but the nice thing is you can put any kind of block in here so if you wanted to add a gallery in your accordion you could certainly do that the one thing to note with the accordion block is that you have to add the block every for every single thing that's going to expand out so if you want to add one underneath it you add another basically accordion block each time and then just repeat the process and if you look at the list view you can see here i've actually got two accordion blocks so you just carry on adding each block each time you want something to expand out you add a unique accordion block into it and there we go there's my how to boil an egg with my nice gallery in right next up is the tabs block from cadence again i will link to below but it does these lovely tabs so you can tab across here and a different information within each tab and you can put any blocks within the tab so you could have a video in a tab or a timeline or image like i've got here super easy to use let me show you how it works dead simple so let me just add the tabs block so just search for tabs find the tabs block add it into your page now what's nice about cadence is you've got different styles tabs you've got the horizontal ones along here which is the one i demoed you then you've got different colors along here for your kind of horizontal tabs you've got this vertical tabs which is pretty sweet as well slightly different style i'm going to choose let's do this one actually let's chose the vertical one then your tab headings along here and you just basically type over so it's very simple to use type over these names and within this column here you put your content and as you can see you can put any blocks in here so if you want to put a gallery block in you can do that anything at all i'm working very very quickly and then just add the gallery in here and then the tab two again same deal just type over the text here rugby and then again you can put any blocks in here you like so let's just stick an image block in here from my library that is not exactly a rugby picture but there you go that's how it works so it's incredibly simple to get these cool little tabs up and running quite quickly right this is a cool one especially if you're about to run a black friday sale it's a countdown block from cadence and i've got an example of it here now what i've done is put a cover block behind it and i've added the countdown block within it looks pretty cool i think so let me just show you how this works so it just comes as a block again you just find the countdown block there it is you add it into your page you see i've added this one down here over on the right here this is where where you set the date and you can also set the font colors all sorts of configuration options with it you can align it you can increase the size of it but i think you want to put it in the cover block because i think it looks really gorgeous right the next one is called the shape divider block by it's by us poodle press so this is a plug-in we built and this is an example of it here you can have these fantastic shapes so who better to explain it than matt mullenweg from his keynote in nashville a few years ago here we go we've also seen the design aspects of gutenberg started to be really taken advantage of this is one of my other favorite ones i've seen so far it's called the caction caxton shape divider block from poodle press i hope i'm pronouncing that right so as you can see what they're doing is sort of choosing different kind of shapes that can go in between the blocks matching the colors of the blocks that came before and after it so i think we got some waves in there i think we're also going to show a cloud one which i really like because sometimes i get asked whether wordpress runs in the cloud i love that preview animation can watch it all day thank you matt so finally at number one we have not actually a block but it's from stackable blocks and it's the ability to have dynamic content now you will actually need the pro version of stackable to use their dynamic content functionality but it was so important i thought i'd sneak it in there at the end this is incredibly useful if you are a sort of pro level user and you're using things like advanced custom fields to create custom post types i will put a link in the description below to how you can do that so there we go there's my top ten i hope you enjoyed that and found that useful if you have any of your own favorite blocks please put them in the comments below if you want to see more videos like this hit the subscribe button thanks for watching and i'll see you soon you

Channel: Jamie Marsland

Views: 1,478

Keywords: gutenberg, gutenberg wordpress, gutenberg wordpress editor

Id: fL3BmgKp5Jo

Length: 10min 18sec (618 seconds)

Published: Fri Nov 19 2021