How To Use Gutenberg for WordPress - Beginners Tutorial - 2021

now in this beginner's guide to gutenberg for wordpress i'll show you how to get started with the interface using blocks editing blocks as well as what free and premium block add-ons i personally recommend to help you get more out of gutenberg i'll also be recommending some great free and premium themes ready to get started then let's just open up wordpress and take a look at gutenberg [Music] so we'll start this off by taking a quick overview of the interface itself for gutenberg now just to make sure you understand i am using the cadence theme this is the free theme and we'll cover themes a little later in this video ones i'd suggest and recommend for working with gutenberg to get great results so first up we have this large blue button that allows us to toggle the block inserter now the block insert just basically lists all the blocks that are currently available inside gutenberg but these are basically where you can find all the blocks in other words the widgets elements whatever you want to kind of call them paragraphs headings things like that and then you have patterns which are basically just predefined templates using various different block components so things like columns gallery layouts headers those kinds of things next along there we have the option to switch between edit and select mode this is great if you want to quickly and easily start editing an item or if you just simply want to select something to move it reposition it delete it those kinds of things we've got undo and redo we've got an information or details icon which will give us information about the document that we're currently working on characters paragraphs words and so on and then one of the more useful options which is the list view and this will show us the hierarchy of the page that we're working on now at the moment we simply have a paragraph block inserted into our design brushes designs become more complex more structured maybe even working with patterns where you have multiple different blocks grouped together this becomes incredibly useful to see exactly what's going on and again we'll come back to that as we start to work through gutenberg okay so if we take a look now over on the right hand side you can see we've got this large cog icon and this is the settings now you can switch between your page view which is what you normally see in previous versions of wordpress which gives us the status your permalink and those kinds of things featured image and so on and then the block which is all the settings for the specific block that you currently have selected and or working on so this will change based upon the type of block that you have and again we'll see more of this as we start to work through things finally we have the three dots which opens up the options for this particular page and for our editor here we can switch between different views so currently we use in full screen mode but you could use spotlight mode which just focuses on the block that you're currently working with and you can enable and disable the top toolbar instead of having a floating toolbar up to you which you prefer i'll leave the top toolbar switched on so you can see this and you can always see the settings that i have as we go through you can also switch between various different modes for the editor so we can have visual editor or code editor so if you're moving over from the previous classic editor where you can switch between code view and the normal view this is kind of the same thing you've got your page settings your block manager which allows you to enable or disable the blocks so if you have items inside you you just don't use you can disable those to streamline everything inside the block viewer you then have some additional options for working with reusable blocks which will allow us to import reusable blocks if you wanted to save these export them and then load them into another site use these as kind of templates you can do that from here a little bit beyond what i want to cover in this particular video your keyboard shortcuts you want to find out what shortcuts you can use for working more effectively with gutenberg we have a welcome guide that allows us to go through what you normally see whenever you open up gutenberg for the first time so we'll close that down if you want to go back through that you can do that and then copy your content which is incredibly useful if you want to copy everything on your page without having to select everything and then use that on another page as a starting point pretty cool your help and your preferences if you open your preferences this is where you can kind of fine-tune the interface of gutenberg itself so you can include your pre-published checklist which i personally find a little annoying but you can control things like your appearance your blocks your panels and so on so feel free to get stuck in and have a little play about with those now if you're wondering why i didn't cover this middle icon that's because that's specific to the cadence theme so depending on what theme you install you may see options inside the gutenberg editor panel and that is specific to the theme so i don't want to cover that because you're probably using a different theme to me [Music] now we've had a quick tour around the gutenberg interface let's move on to getting started with blocks so we're now ready to start adding some blocked in and seeing the options that we have to work with blocks now there's a couple of ways in which you can insert a block into your page your post whatever you're working on you can use the plus in the top left hand corner to insert any one you want and we can search for things like for example heading and then we can simply just click on that and it inserts it in for us that's one way of doing things let's just remove this the next way of doing things is to use the keyboard shortcut which is simply the forward slash once you do that you can see that will pull up the most common things that you may want to do or you can just start typing in if you want something different so for example we might want to put an image in i can start typing image and you see that will filter things down first for everything to do with images so once you become more accustomed to working with things this is probably one of the quickest ways of working next up we've also got the option over on the right hand side whenever we click and there's nothing inserted to add directly from here you can see this little plus symbol we can click on that and we can then do the same thing again we can search for the block that we want or we can select it from the recently used or we can choose to browse all which will open up the left hand panel for us so various different ways in which you can insert content into you now you can also just go ahead and start typing so i'll just say this is a heading and that's basically being suited now as a paragraph because by default a paragraph is what it's going to use but you can change that all you need to do is make sure you've got it selected and if you're using the option to keep the toolbar open at the top you can see we can come up we can change this so the very first option says we're working with a paragraph but we can click on there and we can transform this so we can say we actually want this to be a heading we select it now it becomes a heading and the options that are available to us now are specific to headings so we can change the heading from one through six so you can see we can simply choose whatever's relevant we'll say this is a h3 you can adjust things like your alignment so we can set this to be centered we can set it to be around to the right or we can put it back to a line to the left we can make a bold you can make italic you can make it a link and you also have options with more and we can do things like make this inline code inline image keyboard input strike through and so on so to do that we simply need to highlight the text click on the more options and we'll say we want to put a strike through on this and there you go pretty simple we can undo that we can use the keyboard shortcut of control or command z as well and you can see that we can easily make changes we also have these three dots which are options for this particular block let's click on that and you can see we now have the ability to copy duplicate insert before and so on edit this html we can group things together and we can also show more settings if they're not already showing up and the more settings is basically what you see on the block options on the right hand side so if you don't have this open it might be default into page you can simply click on block and then whichever block you have selected this will now give you more options over on this right hand side so we can do things like we can change the typography set the custom sizing the line height we can adjust the color scheme that's being used on there for the text and the background and you also have the option for some additional advanced options so things like html anchor and additional css classes great if you want to customize things through your own css you can just apply a class to this particular heading or whatever block you've got selected and then add that information in directly into there so let's just go ahead change the color of the text and the typography we'll set it to this dark blue color and we'll change the font size and we'll set this to be something like medium and if you want to you can customize this directly inside you now there's one thing you're going to find when it comes to working with gutenberg at this point in time you don't have a lot of control over things like the typography things like the fonts you want to use and more advanced features this is where some of the free plugins i'm going to show you a little later open up a lot more possibilities and why you may want to consider using those right from the beginning when you're working with gutenberg just to give you a more page builder like experience with more control okay so let's go ahead now and start including some more items so we can see some of the different options that we actually have to work with this time let's just simply pop in a little bit of ordinary text just a bit of placeholder text now because we've inserted two separate paragraphs even though we copied and pasted this in as one it creates two separate blocks for us now we can take a look at this by using the list view you can see there's our heading there's our first paragraph and there's our second paragraph so we can use this to easily select paragraphs headings highlight those see exactly where they are within the structure of our entire design so let's go back and select one of these paragraphs and if we take a look on the right hand side you can see we've got basically the same kind of information but we also have some extra things like the text settings people put drop copy and if we want to so there's context based options based upon whatever kind of block you have selected and what you're editing at any given time because these are two separate blocks what we can also do is we can come in between these and you see we get the little plus in this line to tell us that we are intersecting these two blocks and if we want to we can add something else in so let's do that let's click and we're going to just and insert an image now when we do that we have the option to upload a new image choose it from our media library or insert it directly from a url you'll also notice on the left hand side now with our list view that the image has now been inserted in between these two paragraph blocks you also notice that the options at the top or if you're using the sort of floating toolbar they will change as well because the context item the element that we're currently working with is different so it gives us a different set of options so let's choose an image first of all from our media library we select this option and we'll select it you can see that now inserts that directly into our page and now gives us different options on the right hand side for the block section so if we take a look over here we've got some basic options we can leave this set as default which will show it exactly as it's intended to be you can also put rounded corners on it which obviously looks a little bit terrible but you can also set your default style between those two options so these are kind of minimal options you can drop in an alt text you can adjust the image size so if you're only using a sort of small preview or you have a massive image uploaded you can choose from the main styles that wordpress provides us with to make sure you have an optimally sort of like loading page you can also manually insert the dimensions you want for the width and height or you can just use a percentage so 2550 and so on so we have some options there if we take a look at the context toolbar though you can see we've got even more options we've got the option to change this to a different block style like we've seen previously if you want to reposition your actual image itself you can use these up and down arrows so we might want to move this down you can see that now adjusts the positioning inside our list view and if we take a look at the page itself you can see that's now positioned right at the bottom however what you can't do at this point in time is use this list view to reposition things there's no drag and drop feature available inside you which is a little bit strange and hopefully this is something that will be added later but there are some free plugins that allow you to do the same kind of thing and still have that drag and drop feature you also then have options to change the alignment so you can see we can set this to a line left center right wide width or full width and this will kind of be depend upon the theme that you're using so you may not have the exact same results that you normally would expect if you're used to coming from a page builder like elementor or brizzy something so we'll just set that to be wide width so now fills the container area and you can also do things make this a link you can crop it you can go ahead and you can add text over your image if you want to which is quite a cool feature so you can use this as a sort of separator and drop some text inside there and you see this now type it as a normal block so you might want to put a heading inside just this kind of sets it like a background so you can see we put a heading inside there and we can just say this is cover image pretty cool so that then opens up the options for this text so we can make this a little larger if we want to we can change the alignment to set this to be centered we can make it bold italic underline whatever you kind of want to do with this and you can change the colors and so on so we might want to change this to a lighter gray or pale blue or something we can do all those kinds of things and that you also notice now if we take a look at the list view that's now been indented so if you're coming from working with wordpress and you're used to working with the menu structure you're probably used to this like indenting option and this is kind of doing the same thing you can see the cover now it's been renamed so in other words where it was just an image before it's now been set to cover because we've modified this and the heading sits inside it so it's indented slightly it's kind of intuitive once you get used to it now when you're ready to take a look at what this looks like on the front end of your site we can preview this so let's choose the preview option in the top and we'll say preview in a new tab and now you can see this what this looks like now like i say this is using the cadence theme with no real changes made to it so this looks a bit ugly but it kind of shows you what's going on there is a difference between the front end of the back end because what you currently look at in the back end is just the content you don't see the headers and the footers and again actually if you're coming over from a page builder like elementor or brizzy you're probably used to working in that way so this can be a little bit strange and jarring when you don't get to see all those extra elements and how your page is interacting with those elements [Music] but what about if you get a bit more creative you want to have some columns from left and right hand information image to the left those kinds of things well we can actually do that let's click to add a new option and we're going to search inside you for column and here we go we can now insert a column and we can choose from any of the predefined options so let's say we want this 50 50 we'll select that and we now get as you'd expect two columns if we take a look at our list view you can see there's our parent and inside there we've got our two columns so now we can go ahead and just insert what we want so let's say in this example we want to put an image inside here there's our image and we can go ahead now in the right hand side insert inside there and we'll drop a paragraph in we'll paste a little bit of text inside there and you can see now we've created a two column layout to add something else in let's add a button use the keyboard shortcut we'll do a search for button and there's our button and you can see there we can type inside you and we'll just say click to download my guide okay so we've now created a more advanced layout but it still doesn't look particularly great what if we want the things to be centered can we do that we can we can use this list to view on the left hand side we'll select our parent which is the columns in this example and now our context options at the top allow us to make changes to the layout of the actual column setup so at the moment you can see we've got things all aligned to the top we can change the vertical alignments we can say we want to align this to the middle and that already looks considerably better but you can also align this to the bottom if you want to to the top to the middle however you want we've also got the options then for wide width or full width so we can say we want to set this to wide width gives us a bit more control over the design so you can see you can quickly and easily configure this however you want if you want to add extra columns in you can do that by using the block options on the right hand side you might want to put a third column in there we could select three set it back to two whatever you kind of want to do so it's really quite simple to do you've also got color options inside here and the same kind of thing goes for your buttons you can select your button and now we can go ahead and we can style our button from the right-hand set of options and we can also set things up in the top so you can see we've got options for how the button is going to look whether you want to be filled or simply an outline button so while it's not incredibly advanced you do still have at least the key features that you need and when we look at adding in some of these extra plugins they'll open up even more options for these kinds of things so we've created our column layout how do we go about setting something up to make this reusable we might like this look and design and we want to make this reusable in the future without having to go through the hassle of creating it every time let's select our columns now let's go to those three little dots again choose options and we can say add this to your reusable blocks we'll select this we'll give it a name and we'll just call this feature and we'll click save so now we've added that to our reusable blocks so now when we want to use that we can simply scroll to where we want to place this in our design click and all we need to do is go and close this down and we're going to just choose the plus option and use the new reusable option inside there there's our feature we can click and that's now being inserted into our design exactly the same as the first one now we can go ahead and make changes to this so we can select it we can change the image just use the option to replace this open our media library and choose something different let's say for example this one hit select and you can see now there's our updated version of it so pretty cool a really quick and easy way to create reusable elements so we can use anywhere [Music] designs block add-ons we'll be looking at open up a lot more than just new blocks they provide a lot of great functionality that makes gutenberg much more usable for designing entire websites so let's start off with stackable and then we'll take a look at moving on to cadence blocks so let's start off with the design library now the design library is basically some predefined layouts we can choose from now this is just the free version of stackable that's installed so it gives us a good starting point but if you want access to all of the options and all of these design library items then the premium version is probably gonna be the better option link in the description for both versions so let's just take a look at some of the things we've got inside here we've got ui kits and we've got block designs now the principal difference between these is the ui kits are effectively blocks that all have a consistent look and feel same color palette same typography same buttons those kinds of things whereas the block designs are individual blocks that you can use and they kind of just been pulled from the same location anyway when it comes to stackable so if you want to use these ui kits as a good starting point so you don't have to worry too much about everything having a different look and feel you can use that so you can see inside here we've got a selection of different kind of blocks these are broken down into different kinds of styles you can see we've got these various differences like elevate heights they're just kind of naming conventions with the block designs we can take a look at the free and inside there we've got nearly 90 93 blocks we can use as a starting point so if we wanted to create a great looking header to start off with we can simply choose a predefined style so let's say i like the look of this elevate header i'll select that that now inserts that directly into our design and we can start making changes to this we can start editing it now what's worth noting at this point is that we have a lot more options to play around with if we look on the right hand side you can see now we have tons of different options now this is going to be again dependent upon what kind of layout what design items you insert into your design and so on you can see these have various different elements like the buttons the text the background image those kinds of things and these are all editable inside here so these are great starting points so you can do things like adjust the alignment you can adjust the spacing inside here you can see your padding your title your subtitle your button and so on so we want to increase the spacing or decrease the spacing to tighten things up we can do just that under general we've got to make this full height for example you've got tons of options inside you and this is one of the key reasons why i suggest using a tool like cadence blocks or stackable blocks or any of these all these options are available inside we've also got more starting options so you can see we can choose between basic for example and plain and these are dependent upon the kind of thing that you're inserting into your design and also you've got more designs available underneath so you can edit these if you want you can just simply change them over to any of the options that are available to you obviously anything that's premium that you don't have the premium version you can't access those but this is a really simple quick way of being able to make changes to this and then we can just simply come into the style option and we can say we want to change things like the background so you block background we can open that up we can change the image inside here and it's full help and we'll say we want to use this image for example we'll select it and boom there's our background image change you want to change your text you can simply type inside you there we go really simple to do and again all the same options so we can select the button for example we can choose what happens with this we can also go ahead and change the color scheme of this go to a button one for example open that up and you can change it between the various different kinds of buttons you can change your colors so we can say we want to set this to be something like this white color really really quick and easy so let's just remove this we'll select it and we'll just remove the block okay so we've also got extra blocks as opposed to just working with these kind of designs so if we open up and choose the options inside here you can see anything that has this kind of gradient color effect is going to be a a stackable block cadis is going to have a different set of way of working inside you as well probably any other block that you work with any kind of block plugins so you can set this up as you want if you've got duplicate items inside you and you don't like certain ones then you can always come over to the options and you can come into your blog manager and enable and disable anything that you just don't want you don't want to use for example so you might want to get rid of everything inside you and only use the options for stackable well you could do that if you wanted to now this is where i really like what you can do let's go ahead and insert something inside here so you can see we've got things like notifications advanced text video pop-ups and so on we've also got things like posts advanced columns so this is where i kind of like this we can drop a container in and this now places a container into our design we can now go ahead and add other things in so we say we click and we want to search for columns and we'll use the advanced columns and grids and this is now all stackable options so you can see if we open up our container element our list view we can select our container and our options then on the right hand side are to do with the container and now we can style the container itself with more options so at the moment this is using the basic styling but we can set this to be plain so there's no kind of outer effects on it we can jump in the style and you can adjust the height the content width the alignment your spacing your text colors you can apply a background color and these are all switchable so you can see if it's not enabled this little switch is just in a black color if we enable it it'll go blue and then we open up the options for that where we can set things inside here so we might want to put a background color in boom we've got a background color inside there we'll put a custom color in you want to adjust the opacity you want to put a background image in there choose this option for example we can select it give it a second to install and download and all that kind of stuff and there we go so we can really create more kind of page builder-esque designs inside here and again we can go ahead we can select our advanced columns and grids and now we've got control over exactly how all of this works again we've got our layout i just have a columns inside there we can adjust the size of the columns and all this can be done after the fact so it gives us a much more flexible way of working styles again we can adjust the number of columns inside you the type of columns the height the alignment vertically you can come into advanced then you've got options inside here for your block spacing and you can control the margins the paddings independently or grouped together percentages m's pixel values so many more options that actually makes working with gutenberg considerably more useful and then we've got advanced features so for example let's just say we wanted to insert something like a video we've got a video pop-up we can select that it inserts it into it we can see in our list view exactly where this is inserted and now we can go ahead and we can use some of the predefined layouts if we want to or we can completely and at least start from scratch by using just the styles and you can insert your background video image you can insert a video url you can control the container the play button so let's just go ahead drop a video link inside this we can see exactly how this works i'll drop our video link and we're kind of done with it so now we can go ahead we can preview this and see exactly how it's going to work couldn't be simpler thanks it all looks a little bit rubbish at the moment but the whole point is i want to show you how gutenberg works as opposed to creating some beautiful design [Music] now add-ons like stackable provide us with some very useful global styling options so this makes changing fonts colors and typography far simpler and much quicker across your entire design so if we open up the stackable panel on the right hand side you can see we've got the global color palette and global typography and this is super useful when you want to use this in your designs you also have a global typography setting so you can change your heading one through six and your body text and then you can choose whether you want to apply this to stackable and native blocks just stack other blocks are stackable and any other blocks so this is a great way of having that sort of globalized way of changing things so for example let's try changing the body text let's scroll down to somewhere we can see that body text and if we change this we'll change this like pop-ins choose that from there change our weight and you can see that now updates in real time anyway that's used so we can adjust the size of this so let's just set that as like 16 there we go pretty cool really simple way of doing it the same kind of thing goes for your colors if you want to you can click to add additional colors inside you and then you can reference those anywhere on your site using that additional color palette or you can if you want to disable all those standard global colors and apply build your own kind of color palette from there if you want to as well so these are just some of the things that speed up the whole process of making global changes to your entire site using a stackable blocks alongside gutenberg and again like i say just opens up a ton more options for what you can do with gutenberg now i'm not going to go too heavily into cadence blocks because there's a lot of similarities with stackable blocks what i do want to show you though is inside the design library if we open this up we have the usual starter packs and sections and so on broken down in a very similar fashion and again you can see summer free summer pro it's got your hero images and all those kinds of things and starter packs are basically websites so if you open this up kind of thing you can see inside there there's all the pages for a typical website of a particular kind of variety in this case like an app or something but what i'm more interested in is the wireframe options and this is as its name would suggest a set of wireframes now for me wireframes are incredibly useful because they're a quick and easy way of being able to prototype something get a client's feedback and if you want to sort of visualize what it's going to look like you can do that without all the clutter of dropping in the relevant images and so on so this is a really quick and easy way of being able to build up great looking designs using this great selection of starter wireframes now at the moment there's probably about 50 or 60 inside you but that's still a really solid starting point to get you up and running so you've got things like your header your footer those kinds of things so you can drop in header section footer section your designs lots of different things so coupon for example prepare your content bank it's now inserted directly in here this time we've got a cadence set of options on the right hand side so you've got your global colors inside here as well you can set up block defaults for the various different kinds of blocks you've got there's more options for your layouts if we take a look you've also got a lot of cadence options inside here so things like posts table of contents and so on lots of things that are very similar between the two of these different sort of add-ons you can kind of take your choice both are very very similar some nice features you can visually interact with the design and the layout inside here so this is a great way of being able to tweak and adjust things without the need to go into the right hand panel and manually input values and so on so i really appreciate how useful this can be and how quick and easy this can be to speed up your whole workflow and fully editable so really quick and easy way so i just wanted to show you that inside cadence block so i don't think you can go wrong with either stackable or cadence blocks get started with the free versions and if you want to show up to the pro version sell the premium versions you can do that if you want those extra features personally i really think they're worth it if you want to go down the gutenberg route links will be in the description if you want to check more information about those [Music] now while gutenberg has the list view panel it's really limited as we saw in the first part of this video to open up many more possibilities i would suggest downloading and installing the free block navigation plugin i'm going to take you through what it does right now now i've already go ahead install and activated the block navigation plugin and we've got a new entry now on the right hand side for block navigation and if we open that up that now shows us a hierarchy of our design inside our page anything that's nested inside sections for example all the things inside there you can see everything is nested so it's very similar to what you can see inside the list view that ships with gutenberg itself but it's actually usable so for example if we want to move this button we can just simply drag that to the position we want inside the stacking order and boom there you go updates you can see it updates visually over on the left hand side we still can't move anything around inside there so that's a bit rubbish we'll close that down for now so this just makes the whole process of moving things around considerably easier and a lot more intuitive especially when you're coming over from a page builder like elementor for example so i would highly recommend installing this free plugin because it is just super useful [Music] the first of my recommendations would be bloxy it has an incredibly fully featured free version that includes a header and footer builder global colors support for custom post types and way more next on the list will be generate press which also has a selection of free and premium blocks available under the name generate blocks you could easily combine these two and have a solid platform to use alongside gutenberg now while the free theme isn't as feature-rich as bloxy it is a well-coded fast loading a well-respected theme in the wordpress community and then finally we have the cadence theme now as you've already seen there's also a cadence blocks which works alongside the theme to give you a solid platform on which to build a website also like bloxy cadence offers a full header and footer builder along with many other useful features but whatever you choose gutenberg should be compatible with most themes out there right now now if you want to learn how to make gutenberg even more usable check out this video next and if you got value from this video then why not hit that thumbs up button but if you didn't get value well feel free to hit the thumbs down button twice as that works pretty well too my name is paul c this is wp tested until next time take care

Channel: WPTuts

Views: 8,715

Keywords: gutenberg wordpress tutorial, gutenberg wordpress tutorial 2021, gutenberg wordpress, wordpress tutorial, gutenberg wordpress blocks, gutenberg wordpress demo, gutenberg wordpress editor, gutenberg blocks, gutenberg blocks tutorial, gutenberg demo, gutenberg editor, gutenberg tutorial, wordpress block editor, wordpress block editor tutorial, wordpress gutenberg demo, wordpress gutenberg editor, wordpress gutenberg project, wordpress gutenberg tutorial, wp editor, WPTuts

Id: te7aHH7trts

Length: 30min 23sec (1823 seconds)

Published: Mon Sep 06 2021