WordPress Beginners Guide - Build a website with the Gutenberg Block Editor and Full Site Editing

good morning today you are going to learn how we are all going to be building great looking websites with wordpress full site editing in 2022. so coming on your screen right now is the site i'm going to show you how i built using full site editing and as i take you step by step through this tutorial you will learn to harness the power of full site editing so you'll understand how you can build custom headers using gutenberg blocks i'll show you the completely new wordpress menu system i'll show you how you can create custom footers custom post templates custom page templates landing pages how you can customize the entire design of your website now just using gutenberg blocks so let's get into it so i've just installed wordpress at the site so i'm just starting from a completely blank website all i've got is the default 2021 theme and the hello world post so we're going to start now to build out and there's a few steps i recommend that you do when you're building a site with wordpress we're going to need a few things to start with so we're going to need a full site editing theme so i'm going to jump into themes and i'm just going to add the theme that i want to use which is one called tuva which is a great full site editing theme so at the moment there's only a few full site editing themes out there in the market tufa is a fantastic one it's kind of intended for restaurants and cafes but you can use it for any kind of site to be honest but today i'm going to be building a cafe website you'll see if you just install the theme it also it'll then prompt you say hold on you need the gutenberg plugin because at the moment you need the gutenberg plugin to build a full site editing site the latest version of the gutenberg plug-in now come december you won't need this this will be bundled completely into wordpress core so you won't need to go through these steps that i'm going through today but let me just install gutenberg and then the theme will be happy and you'll see when i install gutenberg i will have a brand new menu over here once i've activated it and we'll see over on the left here we have a brand new menu that says site editor and that's where the full site editing stuff comes in and i'm going to talk you through that fully later but first we need to crack on with building the site so we're going to need some pages to start with so i'm just going to go ahead and create a whole bunch of pages which are going to form the skeleton of my site these are the pages that i'm going to build it's a pretty simple website home about menu then under menu we've got some sub menus which is going to be interesting in the new navigation block fish dishes meat dishes vegan dishes takeaway contact now i'm not even going to put any content in these pages i'm literally going to publish them empty but these are going to create the structure for me that then i can use when i'm creating my navigation so here we go i'm just going to go off and create the pages i'm going to speed this up so you don't have to wait around for me just to create blank pages all i'm going to do is create these pages so go all pages and then i'm just going to go add new page give it a page title home and i'm just going to publish it over here on the right and then on to the next one so all pages yes phew that was quick work so i also decided to create a page called blog because actually we're going to need a blog page because i want to show you how to create custom post layouts so the next step is we just need to get the structure of our site right we do that in two ways really we set the home page and we set the blog page and then we create the menu so let's start with setting the home page on the blog page so we go to settings and then to reading down here this is where you change wordpress from being a blog to a website because at the moment if i visit the website you'll see it's just showing hello world up here which is a post by default wordpress will show your posts on your front page so we actually want to change it here from a blog into a website with a blog and you do that in settings and reading so we go to settings and reading and you'll see at the top my home page is currently set to display my latest posts we don't want that we want to choose a static page so choose that option then in the home page drop down we're going to choose our page called home okay and this is why we have to publish our pages first so we can start to create the structure here and then on our post page we are going to create our um set up page called blog and that means any post that we publish will automatically appear in that blog page which is pretty cool so that's kind of part one of the structure done you'll see the home page is now showing on here we have no content whatsoever on it yet the next stage i want to fix is get our menus working along the top here so how you build your menus and navigation in wordpress next year is going to be completely different this is perhaps probably the biggest change you're going to sense and feel when you're building wordpress websites because we're going to be using full site editing and we're going to be using the navigation block so two huge differences and your old menu system is completely gone so it's completely a completely new interface so this is how you do it so you go to site editor in your dashboard that will load in the site editor and what we want to do is to navigate to the header so i've done a more thorough tutorial on the site on the full site editor which i will put a link to up above if you want to dive into that but these are basically broken down into templates and template parts that's the interesting stuff if i go into templates then we've got things like our single post and our page our page layout templates we've also got cool things like 404 um templates and some other cool stuff as well but what we're interested in is template parts that's where you'll find your header and your footer so we dive in there there we've got headers and here's our header layout this is currently what we're using on our site okay but if we look at the list view here we'll actually see what how this is being built it's all been built using blocks so essentially what we've got here is we've got a columns block we've got two columns there's the left hand column there's the right hand column in the left hand column we've got the site title in the right hand column we've got the navigation block so there's there's a whole bunch of brand new concepts that we're kind of looking at here i want to break it down right to help explain this conceptually to you what i thought i'd do is just delete the existing header the layout that i've got here and rebuild it so you can see it before that i just want to show you the um gutenberg now has a whole bunch of new blocks that you can use to build your headers there's a few of them here so your site like site logo site tagline site title social icons you've also got things like page links which we're going to use in the navigation block but more on those in a little bit there's a whole bunch of new blocks that you can use basically to construct your header layouts but you can use any blocks in those as well which is incredibly exciting so let me just delete the existing one and i'm just going to quickly rebuild it so you can see how easy this is i'm going to use the columns block to start with just to create this sort of layout because i want the site logo on the left eventually and i want my menu on the right so i'm going to choose this option here which is 30 left hand column 70 right hand column and that will just set the grid for me in this column over here i'm going to put my site title so i'm just going to search for it here there it is that will pull in my site title i'm going to swap that out for my site logo later once i've added a logo and in the right-hand block things get really interesting i'm going to use the navigation block which is a really really interesting block it's kind of experimental at the moment i'm going to add it next i'm going to talk you through how to use it when you first add the navigation block to your header you'll have two choices to add all your pages into that menu or to start with an empty menu which one you choose will depend on how many pages you've currently got on your site if you have a hundred pages you don't really want to add all those pages into your menu because then you'll have a ton of editing today i've only got a few pages so i'm going to click add all my pages and if we look over in the list view you'll see that's actually added them using the post list the page list block we need to actually convert that to make it properly editable because at the moment it's just one block so the way you do this is you click onto the navigation block and then you'll see a little edit link in your toolbar click on that and then then it's going to ask you whether you want to convert those to links we do so click convert now they're essentially links and they're all individual blocks here so we can actually uh click into these and use these little left and right arrows here to move them around or the better way is over in the list view here you can actually just drag them up and down so this is kind of similar to the drag and drop old wordpress menu it's not it's quite experimental so it's still a little bit buggy but you can see you can just drag these up and down if you want to delete them you can click into them and remove them as well so we can start to get the order next up i want to show you how you can create sub menus there are two ways also to create sub menus i'm going to show you the most reliable way for now so i want to make uh this menu to have the sub menus of vegan dishes meat dishes fish dishes and take away dishes so you click on it and you'll see this little icon here which is add submenu okay you just click on that and now it'll create this little plus for you um where you can actually just click on there and you can search for the page link here so if i want to search for it i could say take away met dishes and it will add that as a sub menu the other way once you've made it a sub sub menu over in the list view though you can actually just start to drag these around on the left so you see here i'm just dragging my takeaway dishes and everything under there you'll see it's a little bit sometimes they're going as sub sub menus let's try and drag that up but they're appearing over here on the right as well so that's the kind of the way i'd kind of recommend you do it for now is you make the main item a submenu and then you just drag and drop these underneath it okay and again i can drag my menu up here if i want to actually we want meat dishes under there as well let's pop that under there so i'm kind of happy with the order of that now so that's one final thing i recommend you do once you've created the menu layout you want i've got mine here i'm quite happy with that we want to make it its template part in its own right and that means we can use it in other layouts if we decide to change the header layout you'll see why this is important in just a few minutes time but to do it's very simple you just click on it click on these three dots and then you'll see this option here make template part click on that and then this is where you give it a name so i'm going to call it my new navigation let's call it my new nav i'm i'm going to say this lives in the header area okay just click create there and next up i'm going to show you why that's important one of the other big innovations coming with full site editing and themes next year will be block patterns they're already here but they're going to be even more important next year and what's really nice about this theme is it comes with a whole bunch of block patterns they're pre-designed layouts that you can just import into your pages so i'm going to show you this for my header again i'm going to delete what i've done and then i'm going to use a block pattern to basically recreate it so click on the plus sign and then you'll see you've got your blocks here on the left and then patterns here and these are all the patterns that come with tuvra so some really cool stuff some call to actions um footer general header all sorts of cool stuff we want the header these are pre-designed header layouts essentially and here they are but they're fully editable editable still because they're all just built with blocks so let's say i want one of these all i all i need to do is click on it here and that will load it automatically over here on the right and can you see over here it's actually added the navigation block but it will be empty and this is why we saved this is why we saved our navigation block in the um in the first case because what we can actually do is just delete that click on the plus sign and go template part if i could type template part i cannot type template part choose template part and now it's going to say do you want to choose an existing template part and i do and i'm going to say my new nav and that would bring in the navigation that i spent all that time building with my sub menus in that's why we saved the navigation in the first place uh you'll see over here on the left i've got my site title i've got opening hours up here i've got a social icons block up here and i've got a buttons block over here and if we look at the list view you'll see this is how it's being constructed but i could use any of these pattern layouts these header layouts to basically build my header and you're going to see a lot of themes built bundling in these beautiful um block pattern layouts for you so what i'm going to do now is a very quick change i'm going to change my site title to a site logo i've actually uploaded a logo secretly without you seeing it so if i choose site logo um now i can just choose one of my images as my site logo you'll see i've got one here which is kind of cool bring that into my page and that will just load my logo into that space and if i want to resize it i can just resize it right next up i'm going to build out the home page now don't worry too much about the colors of the site at the moment i'll show you where you can change that in full set editing we're going to end up with like a black background with white text and it's going to look very elegant hopefully but let me just add some content to start with now i've already added some images in my media library using a great plugin called instant images so if you want free images check out that plugin but i'm going to start to add some content just using block patterns because to come this theme comes with some amazing block patterns that you can just insert into your pages again block patterns are pre-designed layouts of blocks and these are all the block patterns that come with tuvra there's some really really cool stuff in here it'd be really nice if you could see these more easily than having to dive into each one but i know the one i want is in the restaurant patterns library this is the one i actually want so you just click on it and that's going to import that design into your page you can also jump in here and change all the text it's just built using blocks though that's what's so cool about block patterns so if you want to edit anything everything is editable you can also if you're an agency out there you are going to be able to lock down these as well so you'll be able to build patterns and lock down certain elements of them in a future version of gutenberg which is really exciting this is the pattern though look can you see it's just built using the media and text block and then i've got a heading and i've got a paragraph and then i've got the buttons block i'm going to show you how to change the style of the buttons block later on so i want to replace this image with one of my images so i'm going to hit replace open media library and then you'll see i've got a whole bunch of images here let's just choose one that's portrayed proportions that's quite a cool one click select and that's going to bring that image in i also want to change the background color over here to black and i'm going to change the text over here to let's change that to white and i think the heading needs to be changed as well to white i'm obviously going really really fast but there we go that's looking pretty cool i'll just update that and view the page and we should have a nice funky kind of background thing going on and again don't worry about the background colors we're going to go off and change those in a few minutes the other thing i want to show you quickly though with this page i really don't want the home page title to show here i really don't want comments on my pages but this is again the beauty of uh full site editing we can edit all of this so i'm gonna i'm gonna click on edit site which will dive back into the full site editor and then i wanna find uh the page template so your templates and then you go page and that will load in the page template for all your pages okay and what i'm going to do on this one i'm going to remove the page title block this is just a block again this is all built using blocks this is what's so lovely about this it's actually called the post title but it's post and page it's the same deal i'll remove that and i'm also going to remove the comments block down there as well okay now when i save that and go back to my site we should now have a bit of a cleaner homepage there we go the page title is now gone how cool is that right next up i want to change some of the design of this uh things like the button design and the background and the fonts to make it kind of fit in with the elegance of my of my theme so let's do some designing uh flick back to the site editors here let's open up one of our pages so we can just see what this is going to help us see the design changes kind of real time uh we're not going to edit the template here we're going to customize the design and to do that you'll see over on the right in the top right we've got this styles button this is likely to change this icon potentially but the core concepts of this won't and the core concepts are you've got two types of customizations you've got the site you can customize things like the background color and your fonts which are shown here and you've got typography here but you can also customize specific blocks which is just incredibly exciting so i'll start off by changing the typography and i want a sort of classic serif approach this i'm just going to change that and you can see it changing here and you can also do things like change the font size but i'm okay with that i can also change the colors here so i'm actually going to change the text color to white because we're going to have a background color of the entire site that's black i'll leave the link colors at the moment as blue i might change those later you'll see you've got some other options here okay let me just save that though and now you can see if i refresh the site here we've now got a more elegant looking site we've got an issue with this button because i want this to be styled differently i'd quite like to get rid of these white separators but again we can probably jump into the header uh builder to actually just delete those so we're just left with this i've also needed to get a new logo because my old logo was black so it's no longer showing uh let's start by fixing that button though so all we need to do to do that is to click on the blocks option here and that's going to list all my blogs and now i can customize each individual block let's just see if this works so i want to find the buttons block here which is there sorry the button block itself there and now i can just jump in here and change the colors so for this one i actually want a white background you see it's changing here and i want black text rock and roll you see how that's changed it's just incredibly quick and easy to do let me save that and go back here and you see how that button's changed now as well so next up i just want to add a logo that we can actually see right to replace my logo it's very simple i just go back to site editor template parts and then header and then click on header that's going to load in my header there's my logo you can't see it because it's black logos but i'm just going to replace it so i've actually already added a white one to my media library let's just select that and that's going to bring that logo in the other thing that i think i probably want to do is just change the color of these social icons so again what you need to do here is just to make sure you've selected the top level social icons block and then over on the right you'll see the options to change the color and that can change the color to link these by the way you added the block and then you click on them and then it's going to ask you here to pop in your the link to your you know facebook twitter and instagram pages the other thing actually i might want to do over here is just change the color of that button um because for some reason it hasn't inherited the styles of the um the global stars as i said so i'm just going to set the background to white and the text to black and we should now when we come back here there we go there's our new white logo our new social icons and it's looking kind of like an elegant cafe right next up i want to show you how we can customize the footer right you will not be surprised to hear that we customize footer using gutenberg using the site editor so let's jump into site as editor again and we need to navigate once we're in here to templates template parts here we go let's go template parts and then footers and that will load in our existing footer now we could edit this so these again this is just built using very simple blocks it's using the roadblock which is a cool block that lets you add different blocks in a row which is kind of really cool we've got a paragraph block here we've got a site title and we've got another paragraph so if i don't want the paragraph i could just delete you know delete these as normal and add further blocks but again excitingly tuvra comes with some really cool block patterns that you can add in pre-built design footer layout so let's go patterns let's go where's footer there's footer and here are the pre-built layouts that you can add and there's some really nice stuff in here so choose any of these again they're fully editable let's choose this one here this is quite a complex one and again that's just a basically it's a collection of blocks if we click on the list view here we can see how this has been constructed for us so it's a huge time saver so we don't have to go and build out these now again we can jump in here and change you know all the information in here um as we see fit and we can edit and we can add further blocks in here because this is just using blocks so if i want to change this to me i can just change the text here you know we're just using blocks to build this stuff it's super super cool i'm just going to save that though and now when i go back to my site and reload it we've now got this fully editable and cool footer which is going to appear by default on every single single page just want to show you one more example of block patterns and this is a menu pattern that comes with this theme so i'm going to go edit page this is my menu page which has no content in it whatsoever at the moment you see how it's inheriting the styles that i've created in global styles let's click on the plus sign click on patterns and tuvra comes with these nice uh restaurant pans here which are really cool and this is really cool which is a menu layout essentially again that would take ages if we look at the blog the block list view now take quite a while for you to to create this um it's just using the columns block so if i wanted this to be full width for example i can stretch it out because we're just using basically core wordpress now we're using core wordpress blocks let's load that up and there's my cute little menu block in there right next up i want to show you custom page layouts and custom post layouts right my new cafe has just opened it's not getting a lot of business and so i'm running a mail campaign but i need to create a landing page for that mail campaign but at the moment my pages all have all the navigation on it and they're kind of cluttered up whereas i just want to create a very very simple landing page with no navigation and no footer again this is where full site editing is so cool because you can create your own page template so let me show you the steps you need to get to do this step one we need to go to appearance and templates and we're going to create a brand new template here not all we're going to do here at this point and i think this will get more refined as gutenberg develops is we're going to create a new template here called landing page we're not going to put anything in it we're just this is basically enabling us to create the layout we like in the full site editor then you go to site editor and that template will now be available for us to edit okay so if we go here and we go templates and then you need to go down here to general and you'll see our landing page template now at the moment it's completely blank so it won't show anything whatsoever in it so all we want to do actually to show in here is post content which is the same as page content and that means anything we put into that a page and apply that template to is only going to show the content let me show you this this is this is very exciting so now what i'm going to go off and do is create a brand new page and i'm going to assign it to the landing page template so i'm going to go add new page and again i can call this what i like because the title is not going to show because i didn't put the title in my page template then in here i'm going to use a block pattern for speed today let's see if we've got a call to action pattern that i can put in actually no let's do a what should we do uh hero yeah that's cool um let's do that one there that's kind of funky now the key bit here is i must make sure i click on page and then i go to template and can you see now my landing page template is available for me and if i select that and publish it and when i view that page we should now have on that page no navigation literally just to post content and there it is there's my cool little landing page the same way that we can customize our page layouts we can also customize our blog layer and our post layout so this is the current blog page and actually i'm pretty happy with it it looks pretty cool and this is the um at the moment this is the post layout and again i'm pretty happy with this so i probably wouldn't change this but you can change it again with full site editing so if i go edit site i'm just going to show you this today and load in the full site editor and then go to templates and then go to index so this is going to be my blog page essentially and you'll see how this is constructed and it's bringing in let's look at the list view it's bringing in an incredibly powerful block which is only going to get more and more powerful called the query block now i'm going to do a future video on the query block because it's so important but within that the query the query loop block essentially is bit like a latest post block on steroids it's incredibly powerful it can bring in posts and potentially custom posts at some point in the future and then you can style those however you like and can you see here we've got the query loop block here and again we have some settings to do with the query loop block i'm not going to go into too much detail over on this at the moment but for example if i could change the columns see how i've just changed the columns to two columns for my blog layout like so but you could also do things like change the order of these so if i wanted the uh post title above the featured image i can just do that and that does it for all the posts on that page layout so it's incredibly incredibly powerful likewise for our individual post layouts we can now edit our individual post so this is the individual post layout let me just uh flip back to the website so we can actually take a look at a post as i'm editing the um the layout here so let's go blog and let's just choose one of these posts which is my free copy today so we've got the post title the post date and the featured image can you see here we've got the post title the post date it's saying no date because this is a template and then under here we've got the featured image but for example if i wanted the feature featured image for any reason above the post title i can change it in the template and that will automatically change that on all posts see how it's just jumped above so you can hopefully see the power of foresight editing and that's changed out for all my posts as well by the way so if i go to any of these posts now you'll see the featured image is now above the post title so there we go that's how you can customize your post layouts and also your blog layout so there we go i hope you found that useful and you can start to see the power of what's coming to wordpress i will also put a link to the actual website i built because it's a live website so you can take a look at it if you like uh if you want to see more videos like this then hit the subscribe button because i'm doing lots and lots of guttenberg tutorials and if you liked the video i would be really grateful if you can give it a thumbs up that'd be fantastic and i'll see you soon

Channel: Jamie Marsland

Views: 2,325

Keywords: block editor, gutenberg

Id: b22_5n3oB7s

Length: 27min 45sec (1665 seconds)

Published: Tue Oct 05 2021