WordPress Beginner: Blocks/Editing

Transcript of the free preview lesson. Remaining lessons unlock with the full course.

Hello, my name is Chrissy Ray, and in these lessons, you will learn how to edit posts and pages using blocks and the classic editor. We're gonna start off by editing a page using the block editor, and that's the default editor for both posts and pages. You can see right now I'm in a page and I'm in the editor. And the easiest way to add a block, you can see right here it says Type slash to choose a block. So I could do that. I could just type slash in that space. And I can choose from one of these commonly-used blocks. If you don't find the block that you want to add from that list, you can just press Backspace and then move your mouse over here until you see the plus sign. And you can click on the plus sign to add a block. That's gonna give you a search bar where you can then search for the block that you want to add. So right now I'm going to add an image. So I'm just gonna choose image. If you don't see image there, you can just type the word image and it'll come up. When you go to add an image, you have the option to upload it if you want to. If you already uploaded it, you can go into the media library or you can insert it from a URL. So I already uploaded an image that I want to use, so I'm gonna click on media library and I'm going to choose the image that I want, verify that it has some alt text there, and then click Select. Now some of the settings that you're going to manage for a block are going to be in this panel on the right side of the screen, and some of them are gonna be in the bar that's above the block. So you can see here, for example, for the bar, I can use filters. I can align it. I can add a link. I can do some other things there. And in the panel on the right side, I can change some other settings. So just I do want to point out a few settings about images that are important. Number one is, again, this alt text. You always want to make sure that your images have alt text, alternative text. It's very important. And if you change the alternative text on an image that's been added to a poster or page, it doesn't update the alternative text that was in the media library. So you want to make sure you change it in the media library and then add it to the page if you want it to be reflected on any new instances of that particular image. It doesn't change any existing instances. Another thing about the image settings is the size. So you can see right now it's set to large. These sizes are determined by the theme that I'm using. Some themes have more sizes. Some themes have less sizes. So it just depends on the theme that you're using for your website. The other thing is these image dimensions, I typically try not to change those because it changes the dimensions of the image on the screen, but it doesn't actually change the file size. So if you make this like 50%, they still gotta download that entire larger image to view that smaller version of it. If you need to use a different image size, then I recommend making that image size before you upload it. All right, one more thing about the image is that you can give it a caption. I wanna just reset that and give it a caption. So I'm gonna type that in. And in the caption you have some text editing tools as well. So just like you did for paragraph. Now when you're ready to add a new block, you can just press Enter and that'll give you a new block. And again, you can type slash or you can click on the plus sign. If you wanna see all of the blocks that are available, you can click on Browse all, and that's gonna show you all of the blocks that are currently installed for your website. Many of these are installed by default. Some of them, if I scroll down here, are installed because of plugins that I've got. So I'm going to add another block that I think is pretty useful and one that you should know about. And that's gonna be the heading block. Headings are really important for breaking up the content on your page. You wanna use headings correctly, though. Sometimes I see people using headings where they just like the way that it looks so that's why they use the heading. You wanna make sure that you're using the right level of heading. So you can see here right now I've got an H2, which is correct. The title of the page is usually going to be a level-one heading. That's gonna be the main heading for the page. You should typically only have one H1 or one level-one heading for an entire page. Any subheadings should be H2 or lower. But you wanna make sure that you structure your page correctly. So don't use an H3, unless it's a subheading of an H2. Don't use an H4 unless it's a subheading of an H3. So you shouldn't have an H2 followed by an H4 because you need an H3 in between. So I'm gonna add a heading here and I'm gonna type in Cakes from Around the World. So you can see here I've got this heading selected and I've got some settings that I can change in the bar just like I did with the image. And then I've got some settings that I can change over in the panel. And you can see, I just wanna point out one is I can change the case. So if I want that to be all caps or all lowercase or mixed case, I can do that. When I made it capitalized, it capitalized every single word. So if I wanna remove that, I can just click on None. Another block that I think is useful to know about, I'm gonna just press Enter here to add a new block, is going to be the buttons block. So I'm just gonna type in slash buttons and I'm gonna add some buttons here. And I'm gonna type in cake one. And I'm gonna press Enter to add another button. This is gonna be cake two and Enter to add a third button. So cake one, cake two, cake three. Now with these buttons, you can see here if I click on cake one, I actually have the settings just for that one button. So for example, I can change the background color for just that one button. And you can see that didn't affect the other ones. If I select another button, I can then change the text color for that one. And it only affects that particular button. If you want to apply settings for all of the buttons. So oops, let me change the text back to something you can see. There we go. If you wanted to change the buttons as a whole, then you would select any one of the buttons and then you can click on this buttons button. It's hard to say. And that's gonna give you the properties for all of the buttons. But notice that you can't change things like the background color. That's because that's a button-specific property. And what I'm trying to show you here is that each of the blocks that you use has different settings and it's going to be a matter of using the blocks to learn the settings and get some practice with them. So you can see, for example, I can center align the buttons or I can right align them. I've got some options there. Or I can change the orientation and I can play around with this. One more block that I wanna show you, so I'm gonna click on plus, and that is going to be a list. So a list is going to by default be an unordered or bulleted list. This is a list. And you can see as I press Enter, it adds items to it. If you want the entire list to be a numbered list, you need to select the entire list. So you can see right now I have a list item as the block that's currently selected. If I wanna select all of the list items, I need to click on this select list button. And you can see there, I can change it to a numbered list or a bulleted list. This is unordered or ordered. You can also click on an individual list item and you can indent it, which is going to make it a sublist, or you can then outdent it if you need to. So once you make any changes to your page or your post and the blocks that I'm showing you are available in both posts and pages. So anything that you see here, you can also do in the posts as well. But once you're done with that, you're gonna just click on update for your page and that's gonna update it. So one more thing I wanna show you about these blocks and this is something that I really like about blocks. If you need to change the order of your blocks, you can just select a block and then you can either drag, using this little drag icon here to drag it up or down. So I can move that. Or if that's a little too difficult for you, you can click on the arrow to move it up or down within the page. You also for each of these blocks have these three dots on the right. Those are options, and you can use that to copy or duplicate a block. You can insert blocks. And if you love HTML, you're a programmer, you can also edit them as HTML. If you get in there, you can then edit visually to change it. And you can see that you've got some additional features here. One of the features that I use very frequently is the remove feature. So if you add a block and then you decide you don't need it, you can select the block and then click on remove image to remove it. So that's about it for blocks right now. Thanks for watching. And stay tuned for the next lesson where I will show you how to add new blocks using plugins.