How to use the Wordpress Gutenberg Block Editor (full tutorial)

hello in this video i'm going to teach you everything you need to know about how to use the gutenberg block editor you'll learn how to insert and modify the most useful block types how to move and rearrange your blocks throughout your post and how to group blocks together for reusable custom layouts like this all right let's dive in so let's get started adding a block so there's a couple different ways you can add a block one way if you're not sure if you want to browse like the entire library of blocks that are installed you can click this icon over here and go through all the available blocks and we mostly have a default install of wordpress so these are all the blocks that come with wordpress so that's one option the other option is you can click add block here and if you can't find the block you want you can search for it by name so maybe we want a pull quote or you can click browse all which will take you over here again and then the third option uh to create blocks you can just hit the forward slash icon and you can either browse this list or you can again start searching for the one you want and hit enter when it gets selected so we'll move that block for now and i'm just going to take you through the basic blocks probably in the order that you would use them in terms of most frequent so the default block is a paragraph block and every block automatically defaults to paragraphs so we're we can start typing some text okay so that's a paragraph and then if you hit enter it will create a new line here and move to a new block and again this is another paragraph block by default you have a couple styling options with paragraph block and to access the settings for any block you just select that block and if you look over here we have some settings so basically you just get color settings and some size settings uh generally i like to let my text settings be determined by theme but you could create some larger medium text if you wanted we're just going to go with the default text and you can change the text color choose a custom color and you can set a background color if you want to make your paragraph element pop a little bit you can also add a drop cap but we're not going to do that so we'll just see how this looks and basically the back end of your site for most themes is going to look pretty much the same as the front end now but we can just go preview and you can see we have our paragraph block and it looks exactly the same on the front end so the next type of block you would create very frequently be a list block and you can just click add block and then type list but a shortcut way to add the blocks you want is to go asterisk space for a bulleted block or you can go number one space and it'll automatically create a number list and then if you choose it from the list block you can choose numbered list or bulleted list just like so and so this is a list item another list item and you can indent your list just like this and you can go back to the base level of lists okay and then just to get out of your list you can once you have a blank list item open you can just hit enter and that will take you to the next block and there's not a ton of settings for this block but i'll show you if you go to numbered lists you can choose the start value for your list so we could start our list at five or you could reverse the list numbering so you can go from high to low if you want and you can add a custom css class as you can with any block if you just put a class like my list class that will just add a css class to your list elements so if we inspect our list item here in chrome inspector tools you can see that it's an ordered list ol element of my list class which is what we just assigned to it and we're not going to style it here but in my next video i'm going to show you how you can style all your gutenberg block elements using css all right so let's go back to the post here and another type of uh block you're going to use a lot is the heading block and you can choose any heading level from h1 down to h6 now you're probably not going to want to use the h1 element very often because your theme will usually put an h1 element at the top and you only want one of those per page so gutenberg 101 by default is an h1 and then we're just going to go with an h2 level which is um major heading level and then of course you can do subheadings so we could create an h3 level heading so okay and then you do get some styling options again so if we click on the block we can go over to color settings again you could do background color or you could do text color generally i like to again let my theme determine the text settings for my heading but one little thing you might want to use sometimes if you want to maybe emphasize a word in your heading is you can just uh uh you can highlight the word and then if you go to this little drop down here for rich text controls you can choose text color and choose a color and it will apply it just to that word and again uh with any element including headings you could add a css class so the next element that you'll use frequently will be uh images and uh you can upload it directly from your computer or you can get one from your media libraries we'll pick one from our media library and you can add the alt text here but you don't have to add the alt text when you insert it you can also go to the block settings and add your alternative text here so okay and you can choose from the default image sizes defined by your theme or you can set a custom size so we just make it with 400 pixels and you can choose your alignment left right center full width all these are typically defined by your theme or you can apply custom css uh to to tell um to tell your theme what to do with these different image classes so we'll try a full width image for now and if we go preview it you can see that the image stretches the full width of the page now if we go back and we just make it align center and we refresh now it's the same width as your paragraph blocks and everything else so that's a neat low trick and if you use a theme like i'm using generate press pro it defines these these image classes which will stretch the image to the full width of your post which is nice and then of course you can also create a caption so this the image caption you can set a title which is what you see see when you hover the image and if we refresh there's the caption and there's the image title just from the hover another image type you might use a lot would be maybe a block quote so and you can choose from themes that are defined by your by your theme or you can apply custom css to these again um and there's not very many styling settings you can't choose the color or anything so you have to define that all right next up is the shortcode block uh and of course you can write your own short codes or a lot of plugins will come with short codes and um we're gonna be using shortcodes ultimate which is a free wordpress plugin so you can just click the shortcode code uh elements and you could for example type your shortcode text if you know it so my shortcode here okay and then that would execute in the page um but if you have a plug-in that has shortcodes it might give you a little add-on to your block editor here so this is the shortcode's ultimate puts this right here and we can click that and we can add any one of their built-in shortcodes so let's say we want to create maybe an icon list so we can choose our icon and maybe choose our icon color and then this is what's can be inserted so we can do the live preview insert shortcode and if we look there it is on the front end now what if you want to put some other blocks inside the short code so unfortunately the shortcode uh block is not nestable itself but there is a little trick you can do so let's say we want to put so let's say we want to make like a shortcode styled box so we'll go shortcuts ultimate and we'll go to the note shortcode so by default this is how it looks basically just adds a border and some background color and we're going to insert the shortcut and then in order to get more blocks inside of it we're going to duplicate and we'll delete the front half here and we'll keep the back half and this one okay and then you can drag any blocks in between these two shortcodes to put them inside of it so we can put the image down here and we can drag the list down and we'll click update and as you can see they're both inside the short code no note block all right uh another block that is handy is the classic block and this is if you're just used to the classic editor and there's just some feature that you miss that you feel like you don't know how to do in the gutenberg editor and you're still learning so you can bring up the it basically gives you every feature of the classic wordpress text editor right inside a block and you can do whatever you want you can type shortcodes uh and get the classic tiny mce controls that you have so that's that block and let's uh maybe try some more advanced blocks so we've got a video block is something you're gonna use a lot and there's just uh there's like a default bit video block or a youtube block let's see we can go with the embed block is what we want so embed and you can embed basically anything so we'll get a youtube video okay so i've got a youtube video that i want to embed here so i've got the embed code which is click embed and it automatically detects uh what type of embed it is and you can see the block has now switched to a youtube video and that's it um and the only real setting you get for your embeds is uh you can choose whether to make it responsive or not and it's always a good idea to leave that on and that makes it so that the width of the video is never wider than the screen uh if somebody's using a mobile device oh so one more useful feature if you're browsing for blocks is that if you hover over the block type it'll give you a preview of what that looks like so what to expect and so for example if you want to see what the cover block is basically it's some text over an image so let's go create a cover block and you can select uh select it as like basically a big background color or you can or you can make it a gradient use some of the default ones or use your own uh but we're going to delete this one and create a new cover with an image so cover we'll choose from the media library we'll use this as our cover image and you just start typing okay and you can actually add blocks inside the cover image so this is a nestable block so you can put like a heading or a paragraph and then you can put a list inside your cover image and if we click update you can just preview it on the front end okay hey if you're enjoying this video could you please take a quick second to hit that like button and make sure you subscribe to get all the latest tips and tutorials whenever they come out thanks okay so another couple blocks you'll find useful let's see we've got the uh columns block and this is great anytime you want to split uh your post into two columns so say we want to have like uh maybe maybe just a list that's split into two sections so we'll go and then we can duplicate this so duplicate the list and then we can actually drag it over to the other column here so we could have like a pros and cons list or something and if we go to the front end okay you can see it's easily split into two columns and if you resize the browser here you'll notice it's uh responsive for mobile users and the columns will stack on top of each other if the browser gets narrower enough then there's the table block and you probably only want to use this for very simple tables uh just like a little bit of data that's organized but you can quickly add headings so you have to choose to turn on the header so and then you can uh edit your table items and you can't drag blocks into these um basically all you can add is you can put like an inline image in so if you want to put like a really small image and we'll make edit the image and make it like 50 pixels okay and we'll just fill out this table real quick and go see how it looks on the front end all right so that's it very quick way uh just to create a very simple table and again you can apply css rules to this table if you want and your theme may have like some default styles so you can just add stripes to the table and generate press if you choose the stripes version and you can choose a background color for the other rows all right another useful block is the divider or separator block so i usually use this to divide sections maybe you've got like a list of different products or something and you want to add a separator so we'll add a separator and there's the default version of the wide line version you can add colors to your separator if you want so you can make it a colored separator pretty easy or there's the button block so anytime you have a call to action you might want a button and you can just type the link text now one of the tricks with buttons is if i click right in the button there's no controls to center the button but really the button is inside another bigger block which is the buttons group so if we go here we can change the alignment to right or center and then uh if you click in the button itself you can choose uh to make it like a ghost outline button um or a bordered button or an or just a fill button and you can change the color settings so we can change the text color or we could change the background color or make it a gradient and change the border radius stuff like that and you set your link rel here so if you want to make it a nofollow [Music] button you could do that uh choose whether to open the new tab and then for the link itself you click the link item here and most click make it uh target this page but now it's a clickable button and if we go to the front end there's our button there's one more block i want to show you and that's the group block so let's say you want to organize some content together maybe you want to make a little box that has like a heading some text and a call to action button so and maybe we can add some features okay and we'll just use this button and we'll drag it down all right up i see what i did wrong there you actually have to grab the i was grabbing the button but you got to grab the group so the buttons actually get a little bit tricky like that and then now if we want to put them in a group together because right now if you try to move an element around they're they're not joined together and you could just shift-click and select them all and then move them as one but if you want to style them together that's not really that useful so what we're going to do is while they're selected we're going to click the three dots here and we're going to click group together and now you can see that they've put in their been put in their own box and you can add extra stuff to the group for example if i just hit the uh plus button here i could add a new block i could put an image or something in here inside my group okay so if we go to the front end of our site and we can just use chrome inspector tools again to get the the classes for styling but we have a wp block group class of my group so let's go to our customize and we'll add some css the right way so additional css and let's go back down okay so we'll make the rule wp block group which is also of class my group so there's no space between them and there we go and we'll say background color light gray border one mix solid gray we can add a border radius just to put some curve on the corners like so and maybe we don't want it quite so wide so maybe we'll go max width 600 pixels and we want to align it in the center so we'll say margin maybe like 40 picks on the top and bottom and auto on the sides so there you go we can just click publish and we have ourselves a nice little style box and it took you know 30 seconds all right now what you can do with this uh group that's really useful is let's say you want to put this this advertisement or this call to action on multiple posts or even every post so instead of having to recreate it every time you write a new post what you can do is we can add this to the reusable blocks so we'll call it my call to action and we'll save and then now if we go to a new post so we can uh we'll update it and add a new post and we can create this blog so you can either search for reusable blocks and you'll see it here or you can just type start typing the name of your reusable block and you can see we added it instantly if you're starting a website for the first time or looking to upgrade your hosting you should check out cloudways it's the most affordable wordpress vps hosting i've found and i use it for almost all of my high traffic sites it's powerful fast scalable and actually cheaper than most shared web hosting you can spin up your own private server with a single click and start building your site within minutes there are no long-term contracts or promotional pricing gimmicks and since they offer hourly billing you can literally try it for less than two cents to get the best advertised price and support our channel make sure you use my link which is cwdeal.com all right thanks for watching this video i hope it gave you a better understanding of how to get the most out of the wordpress block editor and make sure you check out my next video where i will teach you how to style all these blocks using css to add a unique style to your website this is a brand new channel and i want to teach what you want to learn so please leave a comment with a suggestion for future videos and make sure you like it subscribe and in the meantime go build that website

Channel: Build That Website

Views: 9,331

Keywords: Wordpress, pagebuilders, Gutenberg Tutorial, Gutenberg tutorial 2020, wpcrafter, wordpress tutorial, wordpress website, wordpress for beginners, gutenberg 101, how to use gutenberg, wordpress page builder, wordpress block builder, paragraph block, group block, Gutenberg 2021, gutenberg wordpress tutorial 2020, wordpress block editor, wordpress block editor tutorial, gutenberg blocks, gutenberg button, gutenberg editor, wordpress tutorial for beginners

Id: m0ayd1D_TXE

Length: 22min 50sec (1370 seconds)

Published: Wed Nov 18 2020