Top 10 tips for Editing with the Gutenberg Block Editor (2021)

hi there here are 10 uh pro gutenberg tips for editing with the block editor i hope you find them really useful if you have any comments stick them in the comments below but here we go right this one is a cool way that you can move blocks easily it's not the most intuitive thing but once you know how to do it it's super useful so you just click on the block you want to move then you click on these three dots up here which says more options and then just select move to once you select that you'll get this blue line here you simply hit the up arrow or the down arrow on your keyboard to move that blue line up and down you get to the point where you want it to go to within the page and you simply hit return and like magic the block moves all the way to that position so that's a really simple way that you can move a block up or down the page right this next one is one i see all the time on the forums uh it's a really common problem that how do you wrap your text around an image which was incredibly easy to do to do in the old editor this is how you do it in the block editor so you put your text in like i've done here then you add your image above where the text so i'm just going to add the image block as you normally would i'm going to choose one from my library let's choose that one okay there it is now you have to size it so the text can wrap so you just size it to approximately the size you want and the key bit here is you have to align it so if i align that to the right then the text will naturally wrap around to the left likewise if i change the alignment here the text will wrap around to the right so that's how you can align text around your images just like just like we used to do in the old days of the old editor one of the most common problems i see people having is with these buttons where they put them into like a cover block here and they can't fathom out uh how to align them because there's no options over here on the right to align them there's no options up here to align them the secret is thinking about hierarchy because these buttons are part of a bigger block and so you have to choose the top level buttons block and you can see the hierarchy by clicking on the outline view up here so that's the secret to this click on that and that will show you actually where where you're editing so this is really useful in all sorts of situations and it can tell us here we've actually just highlighted this button here which is this one hence we can do things like change the radius of that one and we can change the background color but we can't change the alignment because we have to be at the top level this level here if we want to align these these two little buttons so just select the top level by clicking on it and now you'll see up here we have the alignment option okay and we can align it center just as simple as that so the secret source of this is make sure you're selecting the top level because if you're down at this level you're just editing this in particular button okay so just make sure you click on these three lines click the top level now you can align them [Music] this next one's really cool this lets you create these beautiful links uh within your pages that when you click on them your users can go right down the page to a specific point so they're called anchor anchor points within the page that's really easy to do now in the block editor so here's how you do it right this is how you do it so the first thing you need to do is you need to create the anchor um so we go down here and you go to the the heading that you want the anchor to go into that could be a paragraph it can be an image and it can be any block but i'm going to do it to this heading and this is where you create your anchor so you can you can put call this what you like but this is what you're going to refer to in a minute so just make sure you remember it i'm going to call mine scrolls that's the anchor so that's now anchored to that now i'm going to create the link to that anchor and i'm going to do it right at the top of the page you can also do them anywhere and i'm just going to put some words in and then i'm going to link it now this is the key bit to remember you just create the create the little link click the little link and here's what you do you do hash which is not that you do hash and then you put the name of your anchor okay so you have to get the name right otherwise it just won't work and that will now be linked to that anchor point so when we view the page and click on the link up here it should now scroll all the way down to that point and you see how it has now you see how um in my demo here it did a really nice smooth scroll so that is using an additional plugin which is really cool it's a free plugin that can give you that nice smooth scroll effect and it's this one here just make this bigger for you it's that one there page scroll to id so if you just it's a free plugin so you can add that to your site it's got some nice settings in there as well add that to the to your site and you'll get that lovely if you do create anchors you'll get a lovely smooth scroll effect within your pages so this next one's really cool this is a free chrome extension that you can install on chrome and it's called detective wapu and it will tell you you can go to any site after you've installed it and it appears there's a little icon like this up here and you can go to any site and then you can click on that icon and it will then tell you it'll do its best to tell you anyway what blocks that site is using on that particular page so you can see on this page it tells me here this is the cover block this is the quote block it doesn't seem to work on the list block at the moment that's an image block this is a gallery block so it's really useful if you want to look at somebody's site and work out just how they've constructed the page and it's called let me just refresh your memory it's called detective wapu it's a free chrome extension so you can just download it for free add it to chrome and it's really cool right this next one is really useful if you're building more complex layouts with the block editor where you've got container blocks and you've got nested blocks within container blocks it's called edit modes you can access it in two ways either by clicking on this pencil here and then if you select the select option here you can then just click on these blocks and rather than editing them it will tell you what they are and you can select them so as you click around here you can easily see what the blocks are the other way to do this is to just click on the block and hit escape so that's a quicker way it's a keyboard shortcut just click on the block when you're in edit mode and click escape and it'll highlight that block for you so it's a great way that you can just go around your page quickly and just look at the actual um the hierarchy of your blocks and also you know just making sure you're editing the right blocks if you want to edit a particular block that you clicked on you just hit return and then you'll be focused on that block so that's called edit modes really useful not not very well much used my guesses but a real useful addition to the editor if you like grids i love grids then this next one's cool this shows you is going to show you how you can use the standard media and text block that comes with the block editor to create these nice grid layouts uh no plug-ins needed at all so this is how you do that see let's show you how this works so i'm just going to add the media and text block over here like so i'm going to add it into the page then i'm going to choose a photo from my library let's choose this one here okay and then my content is going to go here so i'm just going to grab some dummy content and stick it over here like so so at the moment we don't have any kind of background so that's the next thing to do so we need to select the whole block to change the background so i'm just going to select the top level here and over here on the right i'm gonna set the background color like so i can choose any of these colors uh let's go for that one actually that's quite cool so you see how we're kind of almost there and all i did for this i added the heading block above like so and then i added a block underneath by hitting return forward slash and then buttons to find the buttons block i can't see anything because of the color so i just need to change the color setting background to white that's fine okay now the other thing you actually need to do which is really important is can you see how we've got the image isn't quite literally covering here so we need to select the top level here and the key setting is this option here crop image to fill entire column select that and then you will get that nice um sort of grid layout you can obviously change them just by dragging them like this so you can change the proportions which is really cool uh i'm kind of gonna go for that i think so i'm going to create another one underneath a really good tip on this is to duplicate the one you've done so you just click on these three dots duplicate it there's the new one and you can swap over the image or you if you want to that looks quite cool but i'm going to swap over the image like so and then you can change the image by clicking on it and hit replace here to open up your media library so just choose a different image and then really it's just a question of going in here and changing the text to suit okay and that's that's how you can create that really lovely grid layout and again you can change the proportions or all of these to suit what you want to do but that's just using the standard media and text block with a few little tweaks to it i think it's a really cool effect you can create some lovely grid layouts very very quickly with it when wordpress5 came out they introduced a new thing which was called full screen mode so when you're in editor mode like i am here you lose all your normal wordpress menus on the left which confused the heck out of many people and lots of people wanted them back and complained and i sort of agree with that and it's just a setting though it's easy to get back to get your menus back you just go to the top right of your screen click on these three lines here and just make sure full screen mode is deselected and your lovely normal navigation menus your wordpress friends over here come back straight away so just click on these three lines uh three dots rather make sure full screen mode isn't selected and you will have your dashboard looking like it should [Music] this next one i've creatively called how to fix the toolbar because that's what it does so you'll see this uh when you're working this is especially useful actually when you're working in container blocks where you've got blocks within blocks within blocks the normal toolbar can often just get in the way so you know if i wanted to edit this title i have to faff around here um but there is a way of fixing this uh to the top and it just makes the editing experience for me much much uh simpler and cleaner so i do it um whenever i'm using the block editor these days very simple to do all you do is you click on these three dots up here and it's the top option here top toolbar select that and that will now be fixed to the top of the browser so when you're clicking in these various blocks it's just always up here and doesn't get in the way of your editing experience this one's really useful it's reusable blocks and this allows you to reuse a block that you've created in multiple pages on your site so it's very very useful if you've spent quite a bit of time you know designing something but you want to maybe use it in multiple places in multiple pages it's very simple to do so i'm going to show you how to do it with this block here you just select the whole block so just make sure you select the top level of especially if you're using container blocks which is likely to be the case if you're creating reusable blocks probably so select the top level and then click on these three dots here and it's this option here just select add to reusable blocks and then it's going to prompt you to save that block and give it a name so i'm going to call it what we do and that will save it to a library and then if i create a brand new page we will see that i can use that block within any page so i just click on the blue add block sign up here and can you see here we've got reusable that's where all your reusable blocks will be just click on it and that's going to bring it into the page now if you want to edit that block um you can up here can you see that you've got this option to convert to regular blocks so i'm going to do that and now you're back in edit mode so you could change it i mean you you could keep it how it was but you can change it here if you want to now changing it here after you've converted it to a reusable block won't affect the original block that you created you're just editing this one here so that's reusable blocks there is also a place where you can manage your and see your reusable blocks and to see that uh you click on these three dots up here and it's this option down here where it says manage all reusable blocks click onto that and that's going to show you your reusable blocks where you can edit them you can also export them so if you want to use them on other sites you can export them from one site and import it into another site so reusable blocks very cool we like them a lot

Channel: Jamie Marsland

Views: 10,275

Keywords: acf, align buttons, block editor, elementor versus gutenberg, fullscreen mode, gutenberg, gutenberg full screen mode, gutenberg page builder, gutenberg wordpress tutorial 2021, how to create reusable blocks, kadence blocks, kadence blocks tutorial, kadence theme, make gutenberg easier to use, woocommerce blocks, wordpress, wordpress gutenberg tutorial 2021, wrap text around an image wordpress

Id: elx5kCxTqYo

Length: 13min 7sec (787 seconds)

Published: Wed Feb 24 2021