FREELessons: 6Length: 37 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.1 Advanced Block Editing

In this lesson, I'll show you how to edit the code for blocks directly and also how to change block settings.

1.Introduction
1 lesson, 00:41

1.1
Introduction
00:41

2.Working With Gutenberg Blocks
2 lessons, 16:23

2.1
Adding Text Blocks
06:29

2.2
Adding Image Blocks
09:54

3.Going Further With Blocks
2 lessons, 17:53

3.1
Advanced Block Editing
10:07

3.2
Creating and Using Shared Blocks
07:46

4.Conclusion
1 lesson, 02:29

4.1
Conclusion
02:29


3.1 Advanced Block Editing

Hello, and welcome back to this Tuts+ course on WordPress Gutenberg. In this part of the course, I'm gonna show you some more advanced tips for editing your blocks. So I'm back in this post that I created for the first two parts of the course. I've added some text blocks, I have an image and a gallery. And I'm gonna move this line a little bit further up, so that the image and the gallery are right next to each other. Move it up one more, here we go, right. So this is my post at the moment which at the moment is draft. And firstly I want to publish this post before I start editing it. So I click on Publish up here, which is in much the same place as it would be without Gutenberg, but you also get a check before you publish it. So instead of just clicking on the Publish button and it goes live, you get the chance to check its visibility, and also to check its date. So you could schedule it for the future, or you could put in a date that's in the past. And this gives you a date picker that you can use to pick a date and time. And I'm gonna stick with today's date. So I click on Publish once more, and then my post goes live. So I can copy that link now if I want to, if I wanted to share it, or I could view the post. But I'm just gonna click the cross up there to get rid of that view, and to be able to edit my post. So now I have my post with some content in it. Let's have a look at some of the more advanced editing options. So over here on the right-hand side, you have two panes that you can open, the Document or the Block. These will let you edit the settings and the content for each of your blocks, or for the document as a whole. So if we go back to the Document, you'll see that this looks quite familiar. It's basically the meta boxes that you're used to seeing without Gutenberg, but rendered in a way that will remind you of a customizer. So you can select Categories here, you can select Tags, you can have a Featured Image, set your Excerpt and the Discussion settings. Now I really like that excerpt is nice and visible here over the right-hand side. Because a really annoying habit of mine is that I often forget to write the excerpt when I publish a post, and on my blog the excerpt appears on all of the archive pages. And I want to be able to add a custom excerpt for that. So those are the options for editing the document itself, all nice and familiar. Let's have a look at some of the more advanced block editing options. Now I haven't got a block selected at the moment, so there's nothing here, just says no block selected. So let's start by selecting, and you'll see if I select the post title, there's no options there because it's not actually a block as such. It's the post title. So let's select this first paragraph block. Now over here, we've got some text settings. So you can change the size of the text, are we using small, medium, large, or extra large, or are you using a custom size? You can change the background color, the text color, and you can also use this Advance tab to add your own CSS classes that you could then target in your themed style sheet. Now it may seem great that you can make all these changes over here in the editor. And you can do a lot of that in what we used to call the kitchen sink over here, which was above the whole pane for the post editing. Now I would warn against doing this. You have selected a theme that looks great, that makes your content look elegant and in line with your brand, and that uses the colors and fonts and text sizes that work for your website. If you start messing around with this, it could make you posts look very messy. So for me, I would ignore all of these, apart from possibly the Advanced tab. Because the great thing here is you can add a class to this box, which then you can target in your CSS. So for example, if you want to turn your box into a button, you could add a CSS class of button, and then in your style sheet, you can style that button class. And you can see when I did that, it changed the way that my paragraph looked here. And that's because this theme has styling built into it for a button. Let's go back into that paragraph and remove that so it looks more like a normal paragraph. But that's something that's worth bearing in mind with the additional CSS classes. Subheadings here again, you have the heading tag you can change, that's fine. Because that will just use whatever's in your theme, and you can change the alignment. Again, I would caution against doing this because you don't want it all to look scrappy. But what can be quite useful is that you can link directly to a section on the page. So for your subheading, you can add an anchor to it, that you can then link to elsewhere. So that becomes something you can link to. If you've got a long post, you can link to all your headings right at the top if you want to. And again, you got the CSS class option, so that's quite useful. Now let's have a look at my list. In list there's less, all you can do is add a CSS class in the same way you can with paragraphs. And then we quote, again, you've just got the CSS class option, and then finally we've got our last paragraph with all those potentially messy options. Another thing you can do is edit the code. So if you click on the ellipsis over on the right-hand side of your block, you can see some options. You can hide the block settings, which hides this pane over here that we were looking at. Let's show that again. You can duplicate if you want, which I'll show you in a later part of the course. You can convert it to a shared block. Again, I'll show you that later in the course, or you can edit the HTML. Now I really like this because I often have to go into the code behind my posts and say, for example, I need to add a code tag when I want to highlight an individual part of the content as being code. And it can be quite difficult to find the exact piece of text that you want to work within HTML. But because you're only working with one block here, it's really easy to find the exact thing that you want to edit the HTML for. So in here, if I wanted to, I could add strong tags around fairly boring. And then I go back to editing visually and you can see that that's made that bold. So it's automatically grayed out the Bold button, and I can undo it if I want to. So that gives you the exact same effect as if I hit the Bold button there. Lets take a look at the HTML again, and you can see we've got this strong tag added. So let's edit it visually again, get rid of that Bold tag, and that's my paragraph. So those are some of the advanced settings that you can use for text blocks. Now let's have a look at image blocks. So over here, in Block Settings you can see that you can add the alt text here, I've just got lion. It should be more descriptive. So you can add that right here while you're editing your post, without having to click on Edit here and go into the media editor. You can select the source being the full size, the large, medium, or whatever is relevant to your theme. And note that it uses source type here. That's not about the display because the display size is changed by just resizing it with your mouse. But the source will determine which version of the image is being brought in. And you need to make that that's bigger than it will be displayed in the page. And then the other alternative you've got here, and this will help you with any problems that you have if you're resizing them maybe to wrap text around them and you want to make sure that's consistent. Instead of doing that using the mouse, down here you'll see when I did that, the width and height change here. So I can either manually edit that width and height, or I can simply click 50%, hold on one moment. Because it's 50% of the full size, so let's change this to Medium. No, let's change it to Medium-Large, and then I'm gonna say 50% of that. If I was to do that with every single image, use medium-large, and then select 50% here, that would mean that every single image that I did that with would be consistently sized. So as long as you can remember what your process is and what you use, you can make sure that they look consistent. Alternatively, I could change that to 350, and the height will automatically change with it to constrain the proportions. So this gives you a much better way to control the size of your images. Now I'm going to go back to 100% there, and that's my nice wide image. Now let's have a look at the gallery. So here again I've got the option of linking to the media page. I can change the columns, which I've already showed you in the previous past course, and I can also add a CSS class. And that gives me the option of styling specific galleries using targeted CSS. So those are some of the more advanced options you've got for editing your blocks in Gutenberg. In the next part of the course, I'll show you how to create content in Gutenberg that you can use again and again, using duplicate blocks and shared blocks. See you next time, and thanks for watching.

Back to the top