WordPress Gutenberg - The Ultimate Guide

hi welcome to this wordpress gutenberg tutorial this tutorial is going to teach you everything you need to know about using the wordpress gutenberg block editor there's two real ways to watch this you can either sit back grab a copy and watch the whole thing but i've also put chapter markers in it so you can either go to the description and see the chapters that i've included or just hover over at the bottom of the youtube video and you can go to each section so thanks very much and i'll see you for a quick chat at the end i want to start with a quick look at the old editor versus the new editor so this is the old editor which is now known as the classic editor and really it's just a simple word processor so you can type in it and like i'm doing here and it's fine for that and a few images perhaps but you can't really do any kind of nice layouts with it let's contrast that with the new block editor which is here and the whole concept behind the block editor is that everything on your page becomes a block and i'm going to turn on the block outline view here this is just using a plugin that lets us show the structure and can you see how everything on my page actually is a block and your pages and your posts now are made up of blocks and you'll see at the top here i have a paragraph block then down here this is a cover block and within that i actually have a paragraph and then down here i have a gallery block and there is a whole library of blocks that you can add into your pages the upshot of this is that you can create much much much nicer looking pages using the block editor than the old classic editor gutenberg actually comes in two flavors it comes included in wordpress but it also comes as a separate plugin now the plugin is always a few steps ahead of what you get included in wordpress so if you want the latest and greatest stuff you can install the plugin however i personally wouldn't recommend it for production sites because sometimes there are bugs in the plugin that haven't been fully ironed out yet before they get included in the core software there are two screen settings that i personally change before i start working in the block editor the first one is to turn off full screen mode and to do that you just click on these three dots here and click on full screen mode that will bring back your menus on the left personally i find that much easier way to work because you don't lose the context of where you're working within your website the second thing i always do is to fix this toolbar here to the top of the page so when you're working within the block editor you get this toolbar sometimes it gets in the way so personally i like to fix that to the top you just click on these three dots up here and click top toolbar and can you see how it's now nicely fixed to the top of my page your post and page settings are now found next to the block tab up here so you just click on post and there's all your post settings as before let's look at the library of blocks that you can now use within your pages they are all accessed by clicking on the blue plus sign they'll be listed on the left here and now they're arranged in logical sections the first section are your text based blocks we have paragraph heading lists quote code and some other ones including tables then if i scroll down this left-hand panel we'll see our media blocks you see a little heading here so we have image galleries audio cover file media and text and video scrolling down further we have our design blocks buttons columns group spaces and uh some other exciting things as well and then further on down we have widgets and then further on down than that we have embeds you will probably find that you spend 80 of your life working in the text media and design blocks you can close down this left-hand panel by clicking on the cross sign up here or open it up by clicking on it again to insert a block within to your within your page you can now drag and drop them from your block library into the page so i'm dragging a heading across here you'll see a blue line that tells me where that block is going to go i just drop it into that area and now i can write my heading there is a quicker way to add blocks within your pages here's how you do it you just type forward slash then you type the name of the block that you want to add so i've hit forward slash heading then you hit return and now i can write my heading every block that you add into your page can be customized and to customize a block you can do it in the block settings panel over on the right hand side of the page here and as i click between the blocks can you see how the options on the right are changing because each block has its own set of options to customize it so if i click in the heading block i can do things like change the font size and i can change the color of that font if i click in the cover block here i can do things like change the focal point of the block and make it a fixed parallax background so each block can be customized but you'll only see the customize options when you click into each block the toolbar will give you extra options for each block that you add into your page and it's found here if it's floating or it might be along the top of the page if you set it up here now the options in there will relate to the block that you're working on now i've clicked on the paragraph block it tells me this over here so the options in my toolbar relate to that paragraph block so i can do things like change the alignment or i can make words bold or italic or i can highlight a word and create the create a hyperlink or i can do things like change the color text color of individual words but if i click on the cover block underneath it can you see how the options in the toolbar have now changed because the the cover block has different options than the paragraph block for example i can make this full width or wide width or align it i can also change the position of my text and i can also replace the background image so the toolbar is very very useful but just bear in mind the options in there will change depending on the block that you're working on there are three ways to navigate to your blocks you can either click into the block with your cursor the second way is to use the list view here these three lines that will show you a list of all the blocks in your page you can drag and drop these up and down like so the third way is to use the breadcrumb trail so here's a columns block and if i click into this section here and then look down here at the bottom of the page it shows me the breadcrumbs within that block so if i wanted to select the top level here i could simply click on columns and that would select the top level columns block there are two main types of blocks simple blocks and container blocks simple blocks are simple you add them to your page and you customize them so this is the paragraph block i've added it to the page and i can customize it container blocks are far more exciting than in many ways because they allow you to nest other blocks within them the result of that is you can do much richer layouts i put a few examples on the screen here for you so you can see so this is a columns block and the columns block allows you to nest other blocks within it and you can see the hierarchy of your blocks by clicking on the list view here and here's my columns block and let me just turn up the opacity so we can actually see the block outline so there's the columns block and within the columns block i have two columns there's column one there's column two there's the paragraph one and there's paragraph two but i could also put other blocks within my columns i can nest blocks within them so let's put an image in this right hand column i'll just choose a photograph there's a photograph and can you now see i've got a column and i've got a paragraph and i've got an image if i want to drag that image to the top i can just drag it to the top so i can achieve much richer layouts with container blocks than i can with just simple blocks another type of container block is your cover block which we've already looked at here's the cover block there's the hierarchy there so there's the top level cover but within that i've got two paragraphs and i've also got the buttons block with one button within it because the buttons block is also an example of a container block because you can have more than one button nested within it okay and the final type of container block i want to show you is the media and text block which again you can have blocks within blocks so the top level container is the media and text block but within that in this right hand column i have a spacer block which is this one here under there i have a paragraph block and under there i have another spacer block so container blocks are really cool because they allow you to nest more than one block within them working with simple blocks is simple i'm going to add an image block into this page and i've turned on the block outline view using the block outline plugin just so we can see what's going on you click on the blue block sign you can either scroll down here to find the image block which is in the media panel or you can also search for blocks so if i search for image that will find the image block now i can just drag and drop it into my page anywhere i like let's pop it there once you drag it there it's going to prompt you to either upload your own image or choose one from your media library let me choose this image here now once it's in place you'll see over on the right here that you've got your options to customize that image block so i can do things like make it rounded i can also change the alt text i can also change the image size here or i can actually change the image size by dragging this up and down here in your toolbar you'll see some extra options to do with that image block so i can do things like make it full width i can also link it using this little link icon here i can crop it and i can also replace it so i could choose another photo to replace it working with container blocks is similar to simple blocks but a little bit more complex so i'm going to add a columns block into this section here and i'm just going to put forward slash and then type columns and then choose the columns block now i get to choose whether which proportion i want to use and i've left the block outline view plugin active so we can see exactly what we're building here and i'm just going to do a two column layout let's choose this one here and that will essentially set my grid now let's look at the hierarchy now click on these three lines and here we go we we've got the top level columns block and then within that i have my two columns and what i'm going to do i'm going to put some text in this left hand column like so and can you see now the hierarchy has changed so i have the columns block which is the top level i still have my two columns but i now have a paragraph within this first column i can see it's within it because it's indented slightly underneath it in this right hand column let me put the image block in here choose media library and insert it okay so now if we look back on the left we have the top level columns block and then we have two columns within the first one the left hand column i have my paragraph block within the second column i have my image block i could though put further blocks within each column so now within the first column i have two paragraphs but i could put any block i like in here just to repeat myself when it's showing these little descriptions over the top that's because i'm using the block outline plugin you wouldn't normally see that it just helps demoing to show the structure now the key bit about working with container blocks is you need to be sure of which element which block you've actually selected to see the right options on the right so for example if i wanted to add a background color to the the entire columns block i would have to make sure i select the top level columns block now there are two ways to do this you can either click on these three lines to show the list view and then click on columns here or you can use the breadcrumbs at the bottom here to navigate to the top so a really great tip here is to click into the click anywhere within the section and then navigate up the breadcrumbs to click on the columns columns block and then over on the right i can now change the background color of the entire columns block so one of the big tricks to working with container blocks is to make sure you understand the hierarchy there are two ways to delete a block you can select the block and then click on these three dots and then hit remove block or you can select the block and hit the backspace key to delete more than one block hold down the shift key and click the blocks you want to delete you'll see they're highlighted once you've highlighted them click on the three dots and hit remove blocks there are three ways to move blocks the first way is to select the block and then you'll see these two arrows up and down here and i can simply move it up or move it down the second way is now in the list view you can drag and drop at the moment this is just available if you're using the gunberg plugin and the third way is to click on these three dots and hit move to you'll see a blue line you hit the up arrow to where you want that block to go and then you just hit return you can copy all the content from your page and use that content in another page to do this click on these three dots in the top right of the screen come down here click copy all content go to your new page and paste that content in [Music] to add social icons into your pages use the social icons block that comes with gutenberg just drag it into your page once it's added you need to click on the little plus sign here and now you add your social icons you can either choose the ones you see here but you can also search for them here so if i want to add a pinterest one i can add that in the icon will appear but now you have to click on it one more time and this is where you put the address of your pinterest page in likewise the same with facebook and twitter and all the other social icons you add the icon then click on it then add the address in two ways that you can add videos into your site you can either upload them directly or embed them from youtube and vimeo this is how you embed them directly just search for the video block drag it into your page now choose your video from your media library or upload a new one click select in the bottom right and your video will appear over on the right you have some video settings to auto play loop to mute it or to include playback controls but your video will now be working on your site the second way that you can add video into your site is to embed it from youtube or vimeo and there are special blocks for both of these so search for youtube drag it into your page it's going to ask you here to enter a url to embed here which you get from your video so you go to the video that you want to embed here's one of mine under your video or any video on the right here you'll see this share link click on share this will give you this link click copy go back to your page and just pop that link in there and click embed if you ever need to paste html into your site from another site like mailchimp in this case there is now an html block so i have some html here from mailchimp just go to your page search for the html block drag it into your page and just simply paste your code in once the code's in there you can also preview here by clicking preview a really common question i get asked a lot is how do you align buttons this is how you do it and the trick here is to make sure you select the right level again so click on these three lines and can you see how the buttons block is actually a container block so we need to collect click the top level here and now with this little icon here we can justify them center but the trick is to make sure you click the top level duplicating blocks can be a real time saver especially when you're working in blocks like the columns block so i want to create a three column layout instead of having to do it every single time i create the first block in the way i want it and then simply what i'm going to do is duplicate it but i need to make sure i'm duplicating at the right level i want to duplicate this entire column which contains a cover block so i must select the column down here and now with my little three dots i can duplicate that twice because i want three columns and now simply i jump into these columns and make sure i've selected the whole column and delete them it's also possible to transform blocks into a different type of block here we have the paragraph block and by clicking on this little icon here i'm able to transform this block into a different type of block in this case i'll change it into a pull quote this is a cool little trick that you can transform text into columns what you do is you select the columns by holding the shift key or the up arrow selecting your columns that you want to uh transform click on the little transform icon and click columns and your text will be magically transformed into those three columns it's also possible to group blocks together how to do this you select the blocks by holding the shift key and then clicking on the blocks click on the little icon here and select this option here now one of the big advantages of doing creating group blocks is that you can apply the same settings whether that's a background color or a css class to the entire group reusable blocks let you save a block design to a library and then reuse it on different pages within your website to create a reusable block is very simple just select your block in this case i'm selecting the entire cover block click on the three dots and click add to reusable blocks give it a name and then that block will now be available in your block library to reuse on different parts of your website let me show you so if i create a new page now and i click on the plus sign up here to add my block you'll see a new section here that says reusable and in there is my reusable block it's also possible to manage your reusable blocks by clicking on the three dots over here coming down to tools and clicking on manage reusable blocks in there you'll see a list of all the reusable blocks and they are also available here to edit to trash or to export patterns are predefined layouts of gutenberg blocks you can access them by clicking on the plus sign here and you'll see in the tab here patterns now these are often related to the theme that you're using so they might be theme specific or they might come with plugins but to add them you just click on them and that's going to bring that collection of blocks in in a predefined layout you can also find block patterns at wordpress.org forward slash patterns there is now a growing directory of patterns here that you you can use on your websites to use these you just hover over the one you like the look of click copy go back to your page that you're building and you literally paste that in and it will automatically bring in that block pattern for you it's now really easy to add jump links into your gutenberg pages a jump link is where you have a link at the top of the page which when a user clicks on it it'll take them down to a portion of the page that's much further down the page this is an example of a very long page but you'll see when i click on the jump link it takes them right down to that section down here automatically they're really easy to set up now in gutenberg this is how you do it so i've got a winter one that i'm going to link up here which is going to take my readers all the way down to this winter section right down here there's just two steps to get this to work let me go to edit page and show you this step one you need to go down to your place where you want that jump link to go to click on the block that you want to link to click on advanced over here and you need to put an html anchor in here so this can be anything you like but we're going to refer to this in a minute the second point is you go back up the top here and this is where you link that word to that anchor so you click on the word click on the little link icon here and then you hit hash and then you need to make use the same word that you used as the anchor let's update that click view page click on the link and there we go it scrolls all the way down [Music] it's also possible to add additional styles using css with the gutenberg block editor here's an extreme example where i put a box shadow around a paragraph block to add your css there's just two steps you click on the block go to advanced and down here this is where you put your additional css class that adds the class to that block then to actually add the css to start it you go customize and then in here you go additional css and this is where you put your css there are two views with the gutenberg block editor the visual view which is the default view or code view to see the code click on the three dots in the top right come down here and select code editor there are lots of keyboard shortcuts that will help speed up your workflow to access them click on the three dots come down here and click on keyboard shortcuts and there are a full list here of all the keyboard shortcuts that you can use when you're editing content [Music] once you're happy with your page you can either save as a draft preview or publish if you preview you get a choice to preview in desktop tablet or mobile or in a new tab if you publish it will then ask you whether you really want to publish you can turn off that pre-published check by clicking on the three dots and then clicking on preferences and then turning off the pre-published checklist it's also possible to hide certain blocks within your block library blocks that maybe you don't use to do that click on the three dots in the top right click on preferences then click on blocks and here you can turn off any blocks that you don't want to show in the block library there are now hundreds of plugins that are block enabled what that means is they'll add blocks extra blocks for you to use in your block library here's just two examples this is the shape divider block which is a block that comes with the caxton plugin which is one of our plugins here's another example which is a maps block which lets you add a google map into your page the plugin just adds this extra block you drag it into your page and it automatically brings a google map into that space it's also now possible to build your woocommerce store using gutenberg blocks so woocommerce now comes with woocommerce blocks which is a whole series of blocks to let you build out your store pages there is also a plugin which we built called rebuilder blocks that lets you customize the individual product page using gutenberg here's an example on the screen there are some really great themes now being built just for the block editor here's three bloxy is a really great one uh cadence as well fantastic theme and one more this is a company and a real design they're called but they're building some beautiful themes specifically now for the wordpress block editor at the moment we're using the gutenberg block editor to build our pages and our posts and now our widgets in the near future though we're going to be building our entire websites with it which means the header including all the navigation and also the footer so everything we build on our sites will be built using blocks [Music] if you want to take gutenberg for a test drive go to wordpress.org forward slash gutenberg and there you will find the latest version of gutenberg that you can have a play with so there we go i hope you found that useful and you made it to the end so thanks so much if you can give it a thumbs up that'd be fantastic because it really helps spread the word about my videos on gutenberg and i'm producing more and more if you do want to see more hit the subscribe button and i'll see you very soon

Channel: Jamie Marsland

Views: 3,640

Keywords: gutenberg, woocommerce, wordpress gutenberg, gutenberg wordpress, kadence theme, block editor wordpress, block editor vs classic editor wordpress, block editor, woocommerce wordpress, blcok, gutenberg wordpress tutorial, gutenberg wordpress editor, block editor tutorial, wordpress, astra theme, kadence block editor, columns block gutenberg, align buttons gutenberg, buttons block gutenberg, block woocommerce, woocommerce blocks, beginners gutenberg, gutenberg for beginners

Id: LkvimS7_WVc

Length: 27min 59sec (1679 seconds)

Published: Tue Sep 14 2021