WordPress Gutenberg Full Site Editing (FSE) - A beginners guide

good morning full site editing is in my opinion the second most important change that's ever happened to wordpress i'll tell you the most important change at the end of the video uh it has massive implications for themes like divi and for page builders like elementor so i want to give you a beginner's guide to full site editing so you come at the end with an understanding of how it's going to work and i'm going to explain the most important concepts that full site editing uses and those are templates template parts and global stars so let's get into it right basically the whole idea behind full site editing is that you're going to edit your entire site with gutenberg blocks now whereas in the past we've just been using gutenberg for posts and pages now we're going to use it for the entire site so the header the footer for everything and that opens up a world of opportunities in terms of fingertip control to customize the design of everything so here is an example of a site that's using a full site editing theme and the top bit up here is the header this is the navigation this is the page title dynamically brought in and uh this is content but i can design this any way i like so if i want to change this or get rid of remove a page title for my template i can just remove it there and when i reload this page you'll see the page title is gone but i don't have to stop there for example if this was a landing page and i didn't want to show the header at the top there i could if i wanted to i could just delete the header save it okay and now on this page when i go back and reload it you'll see the header's gone so hopefully that gives you an idea that we're actually editing the whole site the header the content and the footer we've got complete control for the first time in wordpress let's go on to a few of the key concepts behind this let's start so a couple of things to say the first is if you want to have a play with this today you're going to need a full site editing theme there's a great one called duva i think i pronounced that right you're also going to need the latest version of the gutenberg plug-in okay so the first key concept i want to talk about is extra blocks so site building blocks so when you when you install the gutenberg plugin and a full site editing theme you will get some extra blocks that you can use to build your your pages with so let me just create a new page and i'll show you what those are in fact let's just go here and go edit page and these are the blocks the building blocks that you need to build your site with and if i click on the plus sign here let's have a look at them if i scroll down in this one you'll see them in theme and these are all the blocks here that we're going to need to build a site with these are extra blocks that you don't normally use when you're using gutenberg so we've got the query loop that basically is like a very very powerful latest post blue block we'll come on to that later on uh post title post content post date these are all dynamic blocks that will dynamically bring these things into your templates post featured image login logout navigation which is your menu so your menus are now created using blocks template parts explain about those later post author post comment post comments post links posts comments form term description post list header previous next so you can sort of imagine these are all the kind of building blocks that you need to build your theme with right so that's the first key concept that when you install a full site editing theme and the gutenberg plug-in you get these extra blocks the second big consideration is that you will lose your customizer so you no longer use the customizer you'll see up here there's no customizer that goes completely because basically we're now going to be editing everything within gutenberg so let's go on to the first key concept today which is templates right there are two ways to get to the site editor the full site editor if you're in your dashboard like i am here you'll see a brand new menu over here on the left that says site site editor if you're viewing your website like i am here you'll see a link in the admin toolbar to edit the site so let's click onto that here they both take you to the same place and that's going to open up the site editor and now we're actually editing the design of the entire site here we go and to access your templates which is the first thing we want to look at you click on the navigation thing up here so the key concept to understand really is in terms of the how this works you have templates which are things like your pages and your posts you have one page template and one post template your single post template but within those you also have template parts and your template parts might be like the header okay which you bring into those into those templates that's kind of the general way of thinking about this but let's start at the top level which is your templates and that's what it's going to show us here so we can you see down the left here we've got our template so we've got single post and this will load in the single post template so this template will apply to all my posts now you can create different templates for different posts if you want to but we're going to keep things simple today so currently this is what my individual post will look like this is just a template and you'll see at the moment there's no header on here because i've deleted it so if i want to add a header which is your navigation in fact let me just show you this if i go to the site so i can show you this real time and prove that i'm not cheating um in fact this is not a post let's go to a post go to any of my posts and let's go to hello world that seems appropriate and we'll see when this when this loads up can you see we don't have any navigation at the top here we've just got the post title and some stuff so if i jump back to this one here if i did want to add the header along here which i've deleted i can literally click on a block here and go header okay and there's my header that it's going to add in now it's going to ask me to choose an existing header or i could create a different header just for this particular template but i'm going to choose my existing header and that's going to bring that in you'll see i've got a date block up here so let's just pop that underneath and that's it it's so cool and i'm going to go back to hello world now remember this is applying to all my posts not just that particular post can you see how that header has now come in automatically but that's the idea right so you've got these you've got this template this is a single post template but you've also got other templates so i've got a search template how to display your search results you've got your page you've got your index which is the template that's used if there's no other template applied to it this is my page template at the moment okay i've just clicked on page and so if i go to any of my pages sample page there we go can you see again i've deleted my uh header on my pages so i could add that back in and you'll also see that there's no page title so let's say i wanted to add a page title uh in fact let's click on the plus sign here i can just search in any of my um blocks here in fact this is a post title it's the same thing i can chuck it wherever i want i can just because we're just using guttenberg you know i can move these around let's use the move to for speed i can just chuck that to the top of the page and of course because it's gutenberg i can now start to style it which is super cool so if i want that aligned for whatever peculiar reason over to the right i can do it and now when i go back to my sample page and reload it i'll have a peculiar title over here on the right okay but i'm editing the page template so all my ten all my pages um will follow this style so it's amazingly powerful you can start to think this is like having you know your own version of indesign for wordpress it's incredibly powerful so that's templates i want to quickly look at template parts which kind of fill parts of your template right let's have a quick look at template parts which populate your templates if you want them to you'll find template parts under templates here this is the one we've got here and in this theme we've got two we've got headers and footers let's go into headers and then click on header that's going to load in that template part which is basically my the header which is going to come into all my pages and but again this is this is using gutenberg to build it so it's like having an incredibly powerful header builder now just built straight into wordpress and you'll see here all i've done here is use the columns block and then within the left hand column i've got the site logo block which is just a block now and within the right hand column i've got the navigation block which is again just another block i will dive into more detail on these blocks in another video but for today i just want to get these key concepts across and i've also got the social icons block so i've added two little social icons which again is just a gutenberg block okay but let's say for whatever reason i wanted to have the layout different i can just swap them around or i can do anything in here because i'm now using gutenberg basically to build the header if i save that that's going to save that and wherever that's been used so when i reload this now it's switched all around so it's kind of like mind-blowingly powerful this stuff so that's template parts they populate your templates let's move on to look at global styles next right the final key concept we're going to look at today are global styles think of these a bit like a supercharged customizer they are found by clicking on the three dots up here in the top right and then clicking on global styles so these are styles that apply to your entire site things like typography and link color all the normal stuff you'd see in the customizer but they're also styles that apply to all your blocks let me show you this this is this is really cool so you can also this is the route here this tab here you've got two tabs root and by block type the router just kind of things like the text color and the background color of the site um and stuff like that yours it's kind of your theme customizer stuff and you've got your color palettes here but you've also got by block type so you've got all your blocks here this is so powerful uh so if i go to into the button block now i can actually style all every time every occurrence of the button used throughout my site i can actually create style for it so let's say i want the text color to be um let's go extreme let's go blue text color and let's go pink in fact let's go white background and blue text color and that now every time i create a button on my site what should happen in fact let's do this just create a button to see how that works it's going to automatically apply those styles so you're setting global styles here for all your blocks which is just like again absolutely fantastic so let's add the button block and there we go there's my new style just automatically applied throughout my site so it's incredibly powerful that's global so there we go there's a beginner's look at um poolside editing i think as i said it's the second most important thing to happen to wordpress it's going to have huge implications when you start looking at the stuff you think where does divi fit in where does elementor fit in if um if this is the way wordpress is going so that's for another video i did mention at the start the most important thing that's ever happened to wordpress for me that's plugins when plugins first got um introduced into the concept of wordpress that's when wordpress really exploded so there we go i hope you enjoyed that if you did if you can give it a thumbs up that'd be incredible and if you want to see more guttenberg videos hit the subscribe button and i'll see you very soon you

Channel: Jamie Marsland

Views: 4,363

Keywords: fse, gutenberg, wordpress, full site editing wordpress, full site editing, wordpress gutenberg fse, fse gutenberg, elementor vs gutenberg 2021, elementor wordpress, gutenberg vs divi, block editor, fse blocks, full site editing blocks, theme building blocks, header builder gutenberg, footer builder gutenberg, astra header builder

Id: AYFkcOkGymU

Length: 11min 35sec (695 seconds)

Published: Wed Sep 22 2021