[Feb 6, 2019] Extending Gutenberg with FREE WordPress plugins

[Feb 6, 2019] Extending Gutenberg with FREE WordPress plugins


hey YouTube it’s Marcus from heading2 happy 2019 I know it’s February we’re a little late out of the gates but we’re getting this thing going as you might know WordPress recently went to version 5 which included Gutenberg as the new editor so we figured to get things started off we would look at some ways to extend the gutenberg plugin with some other blocks so let’s take a look [Music] all right the first plug-in that we’re going to take a look at is called advanced Gutenberg so I’m gonna head over to our plugins where I’ve already got these added and activate advanced Gutenberg will head to posts and we’ll just take the default post that comes with WordPress and we’ll look at that so the first thing that you’ll notice about advanced Gutenberg blocks is that they’re in this kind of purple color mixed in with all the rest and we’re gonna start with one called advanced image and there’s a few things that make this an advanced image over the normal Gutenberg image but we’ll add this photo here and I’ll give it a title of Cocoa Beach and then subtitle which is the first thing that makes it an advanced image we’ll just add the pier from my drone which is a picture that I took from my drum and Cocoa Beach and we’ll slide over here to these settings and take a peek and see first off you can see that you can link to the image you can change the width to the full width of the block and adjust the height a little bit so that we can see some more these color settings are for the title and for the subtitle so we can change those to make that a little bit more visible and then there’s an overlay when you hover so we’ll change that to white and we’ll close that up and you can also change the alignment of the text so maybe we can slide it to the bottom left and now of course you can’t see the text anymore so let’s hop back to the color settings and we’ll change that to white change the subtitle to white and maybe the overlay to a darker color instead so now when you hover you see a dark grey color so let’s close that up let’s update the post and go take a look and see what we ended up with and just like Gutenberg promises we kind of see what what it was that we saw in the back end so let’s go ahead and edit this post again and we’ll we’ll clear this advanced image block out go ahead and add a different block let’s go with advance list down here so right off the bat it’s mostly the same as a normal list I’ll go ahead and add a couple of items real quick so that we have a list you could change the list to an ordered list if you wanted to or leave an unordered list I think we’re going to go ahead and leave it an unordered list for now and we’ll slide over here to the settings to see what makes an advance list first thing is changing the icon as you can see on the left over there changing the icon gives us whatever we want out to the side so let’s buff the size up a little bit so we can see what we’re doing and we’ll slide down to icon size we can change that to whatever we want change the line height of the items themselves change the margin for the icons or the padding for the icons and the and the items themselves and then lastly what we can do is we can also change the color of these icons to whatever color we want so maybe kind of this red pinkish color and we’ll update the posts and let’s go take a look and see what that looks like again looks just on the front end the same as you would expect based on it looking that way in the backend editor’ so let’s hop back in here we’ll get rid of this and we’ll take a peek yet maybe one more block from advanced Gutenberg the one I want I don’t see right up in the common elements you can go ahead and click through the tabs to try and find all the different ones but I know which one I’m looking for so I’ll go ahead and just search for it and we’ll add this social links block and maybe for this first one we’ll add facebook and that’s the icon there and we’ll go ahead and put in our facebook URL facebook.com slash adding to and we’ll click over to the second icon and make that Twitter link and we’ll do twitter.com slash heading two and for this last one let’s do Instagram and same deal instagram.com slash heading to and let’s go ahead and save that and look at the post and well we have some tiny icons so let’s go maybe make those a bit more noticeable let’s hop back to our block you know we can change the icon size so maybe we’ll bump that up to about 40 or so we’ll change the spacing a little bit to give them some breathing room and then let’s change the color maybe we’ll do our heading to branding red so we’ll do that and you do have to switch the icon colors individually which is actually a good thing if you want it to make you know the Facebook Facebook blue and the Twitter the Twitter blue and Instagram whatever instagrams color is and we’ll go ahead and update that and go ahead and look at our post and there we go we have some bigger red icons and if we click on the Twitter one it’ll pop open a new tab and you can see the Twitter page the next plug-in that we’re going to take a look at is called Co blocks or Co blocks so let’s hop over to plugins and activate that one and then we’ll head back to posts posts and our posts that we’ve been working with and let’s take a look at I’m going to call them Co blocks now they’re here in this kind of purple color maybe that’s blue but they also have their own tab as well so you can see all the blocks in one place that belonged to coke blocks and we’re gonna start with kind of a fun one let’s go with click two tweets so here in this box I’m just going to go ahead and type something that somebody would surely want to tweet from my blog don’t want to tweet and let’s just go ahead and save this and see what we get just with that you know a view post and kind of as you’d expect you see the Twitter block and we have this little tweet button down here when you click that it goes ahead and fills in the quote and the link to the site where the quote came from very cool so let’s edit this post one of the other interesting things about this is that you can add your username for Twitter in there as well when you update and save that and go to the post and now when we hit the tweet button it’ll actually add via and your user handle to the end which is really cool that way you get notified when somebody mentions that quote on Twitter so that’s a very cool one let’s let’s edit this let’s go ahead and kill this block and take a look at another fun one that KO blocks has a slide down here this tab and we’ll pick this one for gifts this is actually straight from giffy they’ll look it up so you type in a search and you can pick one of the animations there you can you know make it the wide width or even all the way full width from edge to edge which is a bit much so we’ll stick with centered I’ll update this block and we’ll view the post and there you go that the animation is loaded right into the page right from giffy and that’s very cool you hit the little trash can icon to remove it and you can search for something else let’s go ahead and remove that block and we’ll take it look at something a little bit more helpful well more useful let’s do this media card so this is probably a layout that you’ve seen you’ve got a large image on one side and then some text on the other and a bit of an overlap you pick one of these images from my media library this is an image that I shot in Disneyland last summer so we’ll just go ahead and put his Neil and it’s one word California if I can spell it correctly and I’ll write a little bit of text to go with this this is Flo’s v-eight café and you get the idea you can add some more text you know what let’s add some lorem ipsum text here just to kind of show that you can put as much text as you’d like next to this and it’ll still work maybe that’s a little bit too much let’s cut it off here all right let’s update this post and go take a look and there you go nice and easy you’ve got this media card with the image on the left and some text on the right that looks really good let’s go back in here and look at some of the settings you can change the the container padding to something larger or smaller we’ll stick with none I think here you can change the max width of the container if we hop down here we can actually add a shadow drop shadow to the card which is cool I into the image I think I’m gonna leave the image went off we’ll leave the card one on and we can also change the background color for the container itself maybe we’ll go with a light gray and let’s just go ahead and save that and go see what that looks like well if you post and kind of as you’d expect it’s the same card we’ve got our drop shadow and our gray background well let’s go see if there’s anything else we can do with that pick the block here and we can flip-flop the card image and text we can also make the entire thing full width and they’ll take the take up the span of the whole width which leads to our last block that I’m gonna look at so we’ll just go ahead and add it right above here and that’s a really cool design element called the shape divider now we’ll go ahead and match up the background color so that this looks like it’s one continuous section don’t use the same gray color and then we’ll have two styles and you can see that we have all these different kind of styles that we can use to divide our section from the top there let’s just maybe go with wavy and you can also drag these little handles to adjust the height of both the space and the wave itself maybe just for fun we’ll go ahead and add another divider here at the bottom so it doesn’t just cut off a straight line let’s flip it vertically so that it butts up to our section hop into our our Styles maybe it will do a pointed divider you know up maybe we’ll go with waves suggest the height here make it a bit smaller maybe we’ll go taller for the waves themselves and let’s match up our color so that it looks like one section get our gray lined up there and if we go ahead and save that and view the post and you’ll see that edge to edge on the browser here we’ve got a nice wavy divider on the top and we’ve got our section with our photo and underneath that we’ve got our waves which makes a really cool section and you can mix and match all the different types of blocks there with the background colors and and that to make some really cool sections well that’s not it for Co blocks if you look under the tab there’s a whole bunch more you know maybe a dozen and a half here different things so definitely play around with Kobach’s and see what other kinds of layouts or elements you can add to the page okay the last one we’re gonna look at is called block galleries so let’s head to our plugins and will activate block gallery and this one is fairly simple but does some really powerful things with blocks or imagery image galleries so let’s go take a look so add a block and you’ll see that block gallery also has its own tab and if you twirl that open there’s only gonna be three blocks so we’ll start with the carousel and we’ll look at the other two in just a minute the further carousel hops the meaty gallery and go ahead and add all of the images that I have uploaded and you can edit the gallery here but we’ll just go ahead and insert that for now and right off the bat what you end up with is this real easy carousel of your images that you can flip through with arrows you can change the to full width or back to the regular width you can edit your add a background image we won’t do that right now you can edit your gallery well let’s slide over here to the side and tweak some of these settings so as you can see you can change the gutter in between the images you can change the height we’ll make it a little bit taller I think and you can round the corners of your images if you’d like if we look at the slider settings there’s a couple little toggles in here you could auto play turn on or off the draggable turn on or off Aero navigation which does show still in the backend but will be gone in the front end when you preview and you can turn on off dot navigation which is a little hard to see right now but it is down there so we’ll turn that back off for now let’s go ahead and update and just take a look at what we have just looking at a couple of the settings so we scroll down here a little bit you can see that we’ve got this beautiful carousel that you can flip back and forth with the arrows you can drag on a mobile device I’d be helpful to be able to drag them back and forth so let’s edit this and look at what other settings are in here let’s close that up some color settings so we can change the background color of the container block where the caption takes color let’s see let’s make this a darker colour maybe a dark grey we can change the padding let’s make it a little smaller I think too small there we go you can round the corner of the container itself maybe we’ll leave that alone for now and it’ll turn the navigation on and let’s see let’s go ahead and update you know let’s make it full width and make it a little taller let’s update that again and go take a look and see what that looks like I’ve got this beautiful edge to edge gallery we can drag it’s got the dot navigation down at the bottom to show us where we are and it’s just really fluid really nice easy carousel nothing really to do other than load your images in and change some settings so let’s take that block and we’ll let’s bring it back in and we’ll change it to a different one of these we’ll switch it to a masonry gallery so you can see that it used the same images and just went ahead really with the same settings and created this nice grid for us this masonry grid where the images are different heights we can drag them around here and put them in a different order if we’d like you know just creates this beautiful gallery that we didn’t have to do any coding to make happen let’s just tweak some of these settings here so the column size we can change the number of columns we can mess with the gutter also do the rounded corner thing again we can turn captions on and off I’m not using any here so I’ll turn them off and link to the file itself or the attachment page we’ll just stick with none let’s close these up under the background settings we can change the padding for the overall container you can change the color we’ll just switch the color of the background back to white here for now we’re not using captions so we’ll close that up let’s just update and we’ll view the post again and there you go without any coding any extra drivers care plugins or anything we have this beautiful masonry grid kind of out of the box just with SEO blocks and nice thing if we go ahead and toggle on some responsive tools here you can see that as we change the width of the browser that block gallery goes ahead and does all the responsive work for us as well so on a wide screen we have these nice columns and as we start to narrow the screen and you can see that it reflows and drops down to two columns as we continue it continues to reflow and then when we get even narrower it drops all the way down to the single column for you know as a smaller mobile device so it’s really awesome that it comes with all the responsiveness built in let’s hop back in here and we’ll just swap this over to the the last kind of block in block gallery and that’s just the simple stacked as you might expect that just stacks all of the images on top of each other in a single column there are a couple of settings that we can look at we can toggle off full width images which just means if the images don’t span the full width that they’ll drop down to their normal size and continue to be in the stack we can tinker with gutter here and we scroll down you can see how the gutter changes the distance between the images we can mess with the round corners again we can do drop shadowing on these images as well small medium or large drop shadow just to kind of separate them from the background a little bit we can link them to the image file itself and then we can do our normal padding and rounded corner background container settings here then close these up you can see like we can change the background color of the container as well so maybe we’ll do a blue color here on these and we’ll go ahead and update the posts and we’ll view the post and as you would expect we have our block galleries stacked container with our images inside drop shadow and the blue background alright that’s it for today if you liked the video go ahead and hit that thumbs up subscribe to our channel to get notified when there are new videos and until next time see you later answer this how come


One thought on “[Feb 6, 2019] Extending Gutenberg with FREE WordPress plugins

Leave a Reply

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