Master the Gutenberg Editor | Alexander O. | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Gutenberg Promo


    • 2.

      Introduction to Gutenberg Editor


    • 3.

      Adding our Video Block


    • 4.

      Adding a 2 Column Section


    • 5.

      Adding a Cover Block


    • 6.

      Adding Header and Text Blocks


    • 7.

      Adding the Media Gallery


    • 8.

      Block Editing and Manipulation


    • 9.

      Using the Reusable Block


    • 10.

      Using the Spacing Block


    • 11.

      Additional Gutenberg Blocks


    • 12.

      Tools and Additional Gutenberg Features


    • 13.

      Gutenberg Conclusion


  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

This is a short class designed to teach you how to properly use the new WordPress Gutenberg editor to create and publish content on your WordPress website.

In this course I am going to show you how to

  • Configure the Gutenberg editor
  • Create content using the Gutenberg blocks
  • Add videos, image galleries, columns, text blocks and much more
  • Create and use reusable blocks

I will be building a sample 'About Me' page to demonstrate how to use the new editor.

Meet Your Teacher

Teacher Profile Image

Alexander O.

Web Developer & Cyber Security Expert


My passion is teaching people through online courses in a fun and entertaining manner.  I have been teaching online for about 3 years now and during this period, I have created over 25 different courses on different platforms including my own personal platform - The Web Monkey Academy.

What would you like to learn?

Would you like to learn how to build and manage your WordPress website? Would you like to learn advanced skills that will make you a true WordPress developer? Would you like to learn how you can establish a successful career as a web developer? Would you like to learn the basics of information and cyber security?

 If you want to do any of these things, just enroll in the course. I'm always improving my courses so that they stay up to dat... See full profile

Level: All Levels

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Gutenberg Promo: Well, hello and welcome to this very special course on how to use the guten book. What press? A little. My name is Alex, a k a. The monkey, and I will be your instructor now. Gutenberg was an editor that was released. Fire. What press? Late last year. 2018. And it was meant to replace the classic Ed. It'll now I know fully well that ever since it came out, Rosenberg has gotten lots of hate. A lot of people who don't like the editor they preferred the old classic little and all fairness when compared with, or the moist how this page builders like a mantle build up. Gutenberg is certainly in ferial. But in my humble opinion, Gutenberg is actually better than the old classic. And it'll and this course I'm going to show you exactly what you can do with this new editor. That what this has introduced. I'm gonna show you how you can work with columns blocks how you can add content and also how you can save and renews your blocks over and over again. So, basically, by the end off this course, you would have learned how you can use Gutenberg to create pages or posts on your war purse website. Well, I hope in ruling the course today and I hope to see an inside by. 2. Introduction to Gutenberg Editor: before we begin, I need to ensure that I do have the Gutenberg edit all activated on my WordPress website. Now. Earlier on, when I was building this particular site, I installed a plug in, which is the classic it'll plug in. And I chose to disable the goods and book editor say if you've done something like this, then it is important to with just the process. So I'm going to do to make sure that Gutenberg is actually activist to go to my settings, go to lights in, and then over here, I'm gonna change the default little from classic to block. And I can also decide to allow users to switch any tools to Yes, So anyone who wets content on my site can they use the classic aided tool or simply use the goods and book editors? I'm going to do this. So let's go ahead now and save changes. And now let's go over to our pages. I would like to edit an existing page, which is the blue, which is the about page. So I'm gonna click on block and it's all right there and over here right now is the Gutenberg editor. This is exactly how the goods and book editor looks like. You've got your title section in here and also go to your main content. Every great bacon add your blocks will talk about that a bit later. But with the title area right now, you can choose to actually hide the title. So if for some reason you didn't want to display the texel of your page opposed to consider click on the eye right here and the title we no longer be displayed over here at the top. When you click on your link title, you also the paneling show up so you can click on edit right here and simply change the Pima link if you want it to. Over here, to the left, this is deploys button, awaken at blocks and then you have the ability to undo your actions or just be do your actions. You have your content structure block which will take a look at a bit late up and then we also have the block navigation, which again, as we begin to add content, you will see how you can make use off this future. Now, over here, to the right, you've got your preview button, your update button. You've got this gear sentence, which basically hides all the settings for this particular page of post. So you click in there, you can display all the settings and and finally at the extreme right. You've got these three buttons, which will show you more tools such as your visual editorial called a Little You can compel . The content will take a look at this feature a bit later and then on the ego settings. You got access to either the document as a whole or a specific block off content that you currently working on. We'll take a look at that a bit later, but with documents, you can change the visibility the public states gente author. You can change your promoting structure right here. And just like with the classic editor, you can add your future image over here. If you want it to a new feature, you can change discussion sentence directly here. You can allow comments or choose to just disable comments by default. It got your page attributes and then finally, because we do have the classic it it's a plug in installed. I can decide to switch to the classic aided toe are over here. So this is just a very quick introduction to the Gutenberg platform jumping over next video well, but will not begin to add content. Teoh about Paige. 3. Adding our Video Block: all right. So as it stands right now, this is my about page. We don't have any content. So let's start by adding a video to our page. Let's do this. I'm going to go over to edit page, and what I'm gonna do right now is I'm going to add my very first block. Now. It is very important that you pay very close attention to what I'm doing because it can get quite confusing. Gutenberg doesn't necessarily have the best layout over here right now. You can see I've got this plus button. I can use it to add a block. I also have the exact same button right up here as well. Back and add. Ah, block. So you can go either way with this two over here to the right. By default, you're given three blocks that you can immediately add can add an image. You can add a heading. Oh, you can simply add a gallery, right? I'm gonna go ahead and click on the plus button to add a block. Now, over here you have six categories off blocks. You have the most used, which basically will change as you begin to build out your page. When you use a certain block for the very first time, it will get added to the most used. So that's typically how the most used category artworks you've got. The common blocks disappear. You have your content, your gallery or the old video and so on. Pretty basic, you've got your formatting where you can add your code custom HTM mail and so on. Then you got your layouts. The most important one here would be the columns. You can add columns and maybe add three columns, four columns alway, then one particular vote. And then you've got access to widgets. Dependent on the plug is that you have installed. You might have additional our widgets in here. I do have the happy forms plugged in and stole. That's why I have access to the happy forms, a widget. And then finally you got the embeds. This is actually quite cool. You can embed from different platforms from social media to YouTube to Spotify. So, as an example, you could this set to embed a video directly from YouTube back and click on YouTube right now, clicking there. Now, over here, I will have to add the u R l I would like to embed. I'm on YouTube right now. And I do have a sample video from Sony Pictures of the trailer for Spider Man, the upcoming Spiderman movies. I'm going to copy the I will. Right here. Let's copy that. Let's go back in here. And now let's paste the u of l and I'm gonna click on embed Now, note that not every video from YouTube you be able to embed. I'm not exactly sure what the criteria is, but sometimes you may be able to embed if certain video all the times you may not be able to embed that video. So Okay, cool. So we've got the video, and you can add a caption so I can just come in here right now and see Ah, Spider Man trailer. Uh, okay. I'm gonna go ahead now and updates and let's go ahead now and preview the page and see what this looks like. And Ah, OK, so that you haven't You've got the video. You've got your caption right there. Let me make some very quick changes. I'm gonna remove the sidebar. Let's go with content. No sidebars. Let's cool to the top. I'm gonna hide the title. Let's updates now, my new updates your actual If you have an actual window that's opened with your our page until object itself automatically. So that's why right now, I didn't have to refresh this page. It's been updated, so this looks much better. I like this. Cool. That's how you can embed from YouTube. But what if you wanted to embed a video directly from Media Library? Well, it's simple. We're gonna go back in here. No, what I'm gonna do here is this. I want to remove this block that I've just done. I can use the on do button to remove first. Er the caption. Let's click in there. Now, let's see. Okay, that the captain has been removed. Let's undo again. Okay, so there you have it. The block has now been removed, so you might have to click that a few times. Okay. To remove the particular block, let's go ahead and add the video block now. So I'm gonna click on the plus button here again, and I'm going to scroll down here to you where you have your common blocks, and with common blocks, I'm gonna have access to the video. Bloke, a light here. I'm gonna click on the video. Now. I'm gonna go head to my media library because I have the video right here and it's this one . I'm going to go ahead now and select that video now with the If you're adding a video directly from the media library using the video block, you're gonna have access to more options. So over here, right now on the block, we have access to different settings. We can decide to auto play the video. You can look the video say please on over and over again. You can also met the video and you can choose to show the playback controls out just to hide their playback controls instead. And then the pre load. I'm going to simply go with all tojust, automatically preload the video, and then you can choose a poster image for your video and and finally, you have access to the advanced average you will find in just about every single block. Typically in here is we can add your CSS class specific to this particular kind off block. Okay, so again, decorated caption I'm not gonna write a caption this time. I'm just gonna go ahead now and update this and let's see our change. Let's go over here. And there you have it. We now have our video plane, and you can see right now it loops every dividends. Potentially, I think maybe five seconds in length. So you can see right now they explain automatically. It will stop, but then it's looked over and over again. So this is exactly how you can add a video block to your gluten book page. Thank you for watching the video, and Jim Inexpressible will add a second block. 4. Adding a 2 Column Section: Now, let's take a look at how we can add multiple columns to a section with the Gutenberg ed. It'll So what I'm gonna do here is I'm simply going to click on the plus button right here , and I'm going to go over to the layout elements, and I'm gonna add columns. All right, so by default, you're going to get two columns if you use two column block. But how do you know? Add three columns for columns. Well, you'll have to click on the right click on the six buttons right there and then now you'll have access to the sentence for the columns block. And in here, you can now increase the number of blocks you want, and, ah, the maximum is six. You cannot go be on six. But in all honesty, I don't think you would ever need six columns within warned our particular section. So I'm going to go back to two columns, known it for three or four, and I like that. So for the very first column here, you'll have the PLO's bottom to its right, where you can add the particular content for the very first column, and then for the second column, you have the plus button there as well. So for the very 1st 1 let's go in it ahead and add an image. And I'm gonna go to my immediate library and let's see, I'm gonna go ahead and add Batman. Yeah, let's use Batman as the image. So with an image block, you can add alternative text, which is grateful CEO. So I'm going to say the Batman will be my old text. I can change your image, signs the image dimensions. And you can also add the links right here today. You'd like to link the image to Ah, for the second. I'm just gonna go ahead and paste some text in here and for the fun size. I'm going to go with 25 pixels. Let's go ahead and update this and let's see how this looks like. Let's go down and ah, okay, that's actually not too bad. Yep, I like it now. You can actually choose to change the size of your image by clicking on the image, and then you'll see the blue circles on the right and then at the bottom, taken simple, just click and angels drag and make the image as big or as small as you want to, and then they want to go back to the original dimensions. Just click on the reset button over here, and everything will go back to its original our size. So that's exactly how you can add columns and add media specifically images with the Goodson book. Read it all. Thank you for watching and I will see you in the next class. 5. Adding a Cover Block: already. So the page is moving along just fine. With added on video, we have a head out. We've got some text. Now, before I begin to show you how you can manipulate blocks and columns, let's go ahead and add one more piece of content. And that's going to be the cova block. So over here and I'm gonna click on the plus button. All right? And let's look for the cova block. It should be on the come on blocks. And yet there you go. That's the cover. I'm gonna go ahead now and add the cover. So what I'm gonna do is I'm gonna choose an image I can use for Mike over. I'm gonna click on me the library and I do have this very futuristic image that looks like some sort of ah, safe I war taking place. I'm gonna use that image I'll click on select. So we've got the image, and then I can add some text which have really copied previously I'm gonna paste that text right there. Now, the one little annoying thing about this particular block is the fact that you cannot extend Ah, the set with off your text you can. You can decide to go all the way to the left online into the left. But then you can choose to stretch out the actual with of your Texas coffers, the entire image. You cannot do that so you can only choose the elements, which kind of sucks. But, hey, what you gonna do? I'll just stick with the center alignment now, all here because we're working with the cover. Our block we have access to new settings are we can go with a fixed background, which I'm going to choose. So what happens right now is when you begin to scroll down the actual image itself will not school down. Ah, with you, the image will just stay there. Statically. That's what the fixed background does. You can add your overlay color so you can go, Let's say, ah, I'm gonna go. Maybe with black like black, that's the CBO's. And then you can choose the opacity, make it like really dark. Or maybe not too dark. Let's go all the way to 60 maybe and making 65. Yeah, I think since the first should be just about light, and, um, of course you have access to advanced tab, you can add. You'll ceases class. Let's go ahead and update this and let's see. Ah, let's see what this looks like. What's come over here? Let's go down. Well, look at that. It did not refresh automatically. I'm not sure what happened there. Look what the problem was. Just refresh manually ourselves. And ah, what's happening? Let's go back in here. It looks like this did not update for some reason. Okay, Now it seems to build dates. And let's just do this dates and Okay, so now it should be updated. Let him just come over here and do a hard refresh. Let's go down and Okay. Okay. So there you go. Let's just do this again. It took a while for the image to Lord. I think it's a little bit heavy. Let's go down. And, uh Okay. Well, not too bad. Although this is and little bit to Doc's, What I'm gonna do is I'm going to change the overly Let's go down to 50. I think that's better. Let's updates again and let's go back in here. Let's do Ah, hard refresh. And OK, so this looks much better now, but I can see. That's how to add your cover with a static image and some text that will scroll down or up with you. So that's it. Thank you so much for watching the video German Avonex Video Bell will now begin to many people eat the blocks that have currently added I'll see You then. 6. Adding Header and Text Blocks: all right is in a previous video is successfully added, Ah, video with the project toe. But now we're gonna go ahead and add a Hedda and some text so out if I've covered some text already from the limits on Generate Ole website. If you have real text, you're more than welcome to use your real text. I'm going to go to the edit page and here's exactly what I am going to do. So right now, just underneath the video block itself, I'm gonna go over here and you can see right now I've got access to the head and block just right there. I'm gonna click on the head in, and now I'm gonna type in. The words are welcome, Teoh. The movie cava CTA's okay now because this is a head and block. The settings on the block here has now changed over here. We can now add the level. Are we going with an H one? And H two is gonna be h two. I can change the alignments to make it go to the center. And then, just like with the video block, you have your advanced habit. You can add your sister's class but with a header, you can add your each team ill ankle If you wanted to. Over here, just above the head and block itself. You have access to a few more features. You can make the text bold, which in fact we will do. Let's make it bold. It could make it a Talic. You can add a link, and then you can also do your strike through if you wanted to. And now in here you have access to the more options you can click in there. And this will give you access to additional things you can do with this particle out block . We will take a look at this a bit later. All right, so we've got the movie characters heading Great. And for some reason, characters was highlighted in Red Wise is highlighted in red, huh? Correct as this is how you spell characters, right? I don't know. I don't know why this is on the line in mid anyway, I'm going to ignore that. We're gonna add some text now, just underneath the welcome to the movie cactus head out. So, by default, I don't even need to add any block, and I can just click inside right there. You can just click inside and they can Typing some text if I wanted to. All I can just go ahead now and paste that takes that I've already copied previously. So that's basically how Gutenberg works. When you want to add paragraphs or text, you don't need to going there. Add a paragraph block. You can just type in underneath the people's block you've walked on and just paste whatever takes that you wanted to walk with. All right, so this is our text. And because this is a paragraph block, we have access to new settings. Right now, we can change the phone size from normal. We can go with ah medium, which would make it a little bit bigger. And then in here you can change the actual font size itself. You can add a drop cap, which I will do kind of like the drop capital. Add that so that's for the text sections. We have access to the call of settings, or you can change it back on Kahlo, or maybe even change the text color. And then again, you have access to your advanced block where you can add a CSS class specifically for your paragraph. I'm gonna go ahead now and update this and let's just see what is looks like. Let's cool down here and there you have it. Welcome to the movie characters. And then we've got our text. And then we have the big ale drop cap. So that's how you can have headers and some text to your good book page. If you have any questions about what we don't so far, please reach out to me. Thank you, Fortunate video. And of course I will see you in the next class. 7. Adding the Media Gallery: let's go ahead and add one more block, which would be our gallery. But before we do that, I forgot to mention one thing in the people's video, and that is changing the with off your individual columns. Well, good, but claimed that you should be able to change the with by simply clicking and then dragon the edges off the column. But then it doesn't work. After Edison Krumov traded on Firefox, it doesn't work. So at the moment your columns are gonna have the exact same with you cannot make one column bigger than the order. Hopefully, they might change this next few weeks, so I just want to let you know that, right. Let's go ahead and add gallery. And I want you to be very careful whenever you add in blood, because it's very easy to just come in here and you'll see the plus button right hand, and then and then just click on the close button to add a gallery. However, if you do it this way, your galleries gonna fall on the this section containing the Batman image and then the paragraph on the white you can see the blue are square right there telling you the area which this particular section occupies. So if you want to add your gallery in a separate section, you have to school all the way down here. And then over here outside this big blue box, you cannot click on the plus button and then add your gallery. But okay, so you can see again. It's still fell inside this main section and I don't like this. Let's remove that. Let's do this again. I'm going to click in here. Okay, Click on the plus button at the gallery. Our case. And now you can see it's now outside. It has fallen completely below the Batman image. And our paragraph Texas up tells you that the gallery you add right now will show up on the neath the previous section containing the Batman image and the paragraph. So be very careful about this. Good number can be able to be tricky sometimes. All right, I'm gonna go ahead now and click on my media library. And let's choose a quiet place and in the Jones determinate ah t 1000 and a command. So I've got five images I'm gonna click on, create new Galati, click on instead Gallery. So over here right now, with a gallery, you can choose the number of columns you want to go with. The default is three. I like that you can choose to crop your images or not. I would recommend that you quit your images on this. Of course, they're the exact same with and height. If not, I'll advice. You crop them so it will look much better. And then you can link your images to either an attachment page or maybe even a media file, even access to advanced. Ever. You can add your CSS class. Let's go ahead and or dates and ah, let's take a look at what we have. Let's go all the way down here. And while Wow, we have successfully added our gallery with guten book. Thank you for watching the video. I will see you in the next class. 8. Block Editing and Manipulation: so far, so good. With added about four different blocks with edit our video head in paragraph and now the cover block. Now I want to show you how you can manipulate the blocks that you've been working with. One little trick here is you see, whenever you try clicking to the left of a particular block, you will see this six buttons right here. This will give you the actual set ins for the particular block that you're walking with. Now, over here at the top. These are the options available for this particular video block. You've got your more options, which is actually for the column itself will take a look at this in just a moment. But in here right now, you can edit your video if you wanted to. And then over here you can change the with. You can decide to go full with or wide with. I'm gonna go full with this time around. Now you can see it's changed. So right now the video will spend the entire with off our page. However, not every book group of idea with the option of going full with over right now if I click on the headed. I don't have the option to go full with with my head out. I have a click on the six buttons for the paragraph block. I don't have the options of going full with Eve, either. With the paragraph are Block, however, with the cover block. If I click on the six buttons right here, I can go full with, as you can see. So let's do that. Have gone full with with the video and the cover all blocks. Let's see how this would actually look like. Now let's refresh this page and there you go. And I think this looks actually much better right now whenever you're video goes for with like this, So let's school down. So we still have the heading and text as it is. But now our cover goes full with which is actually pretty cool. So this is how you can go are full with with some of your blocks again. If you can't even want to go full with you, do have the option of going are wide with If you want todo just make it make your are blocked go a little bit wider than normal. Okay, cool. Awesome Let's go back to go all the way back up in here. All right? Just call all the way up here. All right? So one other thing you can do is once you've gone full with with setting canceled blocks, you will no longer be able to access the settings on the left of it. You will be able to accept the settings right there at the top, so you can see right now that you have now have access in here by simply clicking on the six buttons. And in here you can change. Ah, the settings. For every block that you have, you will have access to the move down or the move up hours, or maybe even both, depending on the position off that particular block on your page. So, as an example right now with the header block, I can move it up, all right. And then this should go just above the video. And as you can see, all I can simply move it down, and it goes back to its original position. So this is one way how you can choose the position off your blocks. You can also click on the six buttons right, a click and hold and then simply drag. And then you'll have to wait for this blue line. You can see it sets in blue line that appears that is the blue line. That means if you release your mouse right now, it will appear just beneath the actual are paragraph block itself again. Let me show you. I'm gonna click on the six buttons. Try to move it up Wait for the blue land to appear just above the paragraph And there you go Now it's appeared I came a list and there you go. So now the header is back to its original position. So that's how you can change the positions off your blocks. Now every block will provide you with the more options sets in right here, the three buttons you can click in there on. What you can do right now is you can hide the block settings. You can go ahead and duplicate. You can click on duplicates and then you'll have the exact same block with exacts obsess ins them just on do that. Go back to my three buttons right here. You can choose to insert a block just before the actual block sick and click on and said before and now in here you will be able to add a block of appear just above the heading block again. Let me on do this with control Z, click on my six buttons right here. Go back to three buttons and then you have the insert after which would just be the opposite where you can now add a block after doing it currently walking with and then you can edit as h T m l. This will offers to be if you are experienced working with HTML. You have that option right there. And and finally Alan, just on do that. Oh, I'm sorry. I seem to have confused myself. All allowed them. Just control Z. Okay, let's click back in here. Ah, and visually. Okay, I apologize. Even I get confused sometimes whenever I'm working with Gutenberg. So just a quick tip here. If you have decided to switch to edit as its Tamil apparently control Z If you tried to undo a middle walk properly, what you want to do is just simply go back and just added visually. And so just use the edit visually options so that's how to go back to the visual editing. All right, So finally you have access to the ad to usable blocks. This is very useful. When you've created it sets in blow, quit sitting kind of content and edit something kind of set in anyone who used a block elsewhere. You can come in here and simply choose add to usable blocks, and then you can add a name for the result books. I'm going to say head in block and I'm going to go ahead now and save that. So I will show you later on how we can actually make use off this reusable block. But that's how you can manipulate our blocks with the good book editor option you how you can change your positions. Hey, King, goal. Full way of how you can insert blocks before and after and how you can save or create a reusable blocks. So thank you for watching if you have any questions. I know this can be a bit confuses police. If you have any questions about what I've done so far, please do Let me know. Thank you for watching video and I will see you in the next class. 9. Using the Reusable Block: let's add one final piece of text, and that would be a heading, thanking the user for visit the about us page. Now recall that we've already created a reusable block out off a header, and it's so I here will come to movie characters. So how can we just we use this exact same block? It's very easy. I'm gonna go all the way down here, click on the plus button, and now, because we haven't least one reusable block, you'll find a very special category of blocks known as reusable Down hear clicking there and there you go. We have the head and block and that is it. Welcome to the movie characters, right? I can click on edits. I can come in here right now and change the text to Let's say thank you and save right now . He might think everything is fine with what I've just done. However, if I go all the way back up, take a look at this Now. The very first week reusable book now has the exact same text. Thank you. So this is one limitation that you might find with the reusable blocks. If you save one block as reusable, and you make any sort of change, whether it's to the text, the content, this style in whatever it's going to affect that exact same block everywhere else on your website. Basically, your changes are global. So how can you actually make use off reusable blocks where you can just copy the block pasted on a new location and then simply make whatever custom changes you want to make to that new block without effecting the old one? Well, it's actually quite easy. Little shake exactly how you would do this. Let's go back in here, Caleb, just edit this click on the thank you letters. Go back with the original Welcome to the movie characters. Welcome to will come to the movie characters. Okay, let's go ahead and save this. Okay, let's go back in here. So it's his Welcome to the movie characters or some I'm gonna go ahead and just remove this block altogether removed block. So now how can I actually make good use off the usable block? I'm going to go back in here, click on the plus button. Let's go all the way back to usable. I'm going to click on the same header again. So now I have the exact same text welcomes movie characters. But if I want to make a change here and make it on Lee to this particular block, I'm going to have to convert these reusable block to a regular block. And how would I do that? Are click on the three buttons right here and now you can see the convert to Regula Block, but a clicking there Now it's regular block, and I can say, Ah, let's just say thank you for stopping by. Thank you for stopping by. I cannot go ahead and update my page. Let's called it. It's up and see And there you go. We still have the original reusable block with the exact same text. Welcome to the movie characters. So this is exactly how you can make proper use off your you see able block letters go over to the page. Well, first of page and let's just make sure everything looks as it should. Thank you for stopping by and awesome. There you go. So that's how you can make use off the usual blocks with the good book editor. All 10. Using the Spacing Block: one more block I'd like us to walk with would be the space and block. Now, by default. Get about. There's a pretty decent job off separating or giving enough space between the blocks on your page. But in certain instances you might. You might want to have more space between one block and another. So an example. Right now I want more space between the cover block that we have here and in our two column section. I wanted to be most paste and also wanted to be more space between article, um, section and our image gallery. So how can we do this? Well, thankfully, Gutenberg does have a block, and it's known as the space in this place and block. So I'm gonna come over here right at the very top notice that the plus button and adding right here is the one in the center. It's not the one directly above the image off Batman. It's not the one directly above our text. It's the one in the middle indicates in the yes, this particular new book I'm going to add will span across both columns. OK, very important. So I'm gonna click on Adblock white now Just do that again, Ed Block. Okay, so it's going to be on the lay out. There is. It is called spacer, actually, so that it is called spacer. I'm gonna click on it. And now in here, you can add your space and in high pixels. So I'm gonna gold way down to 50. I think maybe this is a bit too much set of pixels. Seems to be fine. Them go ahead now and updates. Let's go back, Teoh Page, Let's see the new space in. And there you go much better like that. Now, I'm gonna do the exact same thing between two column section and our image gallery. So let's go back in here. Let's cool down. Okay? So once again, the plus button in the middle, I'm gonna click on it. And I'm not gonna go ahead now and add spacer, and I'll just go with the exact same 30 update. Let's get back in here all the way down here. And there you go. Much more space between Sick Lem section and our image gallery. So that's how you can add spacing most based in between your blocks on your page, like a fortune. I will see you in the next class 11. Additional Gutenberg Blocks: just to give you a very quick recap over the blocks that you have available with Gutenberg . So far, I believe we used about nine or 10 different blocks while building our about page. But you obviously have access to a lot more are difficult of blocks, so you've got access to additional blocks like file. You've got cold list audio on the formatting you have Maura's Well, you've got stuff like code, your classic editorial pull cold pre formatted. You can also add tables with Gutenberg, which I think is actually quite awesome, because you can do that with the old classic A little so for space, and you can add buttons as well. You can add your page breaks. You can add your separate all and then widgets. Of course, you have access to your archives. Let us post with his comments categories and then, of course, embeds. But don't make too much use of this particular area. But you've got access to different kinds off APS that you can embed onto your page with goods and look so I guess what I'm trying to say here is don't limit yourself to exactly the same blocks that have used in creating my about me page a distant experimentation. Try walking with the other blocks that you have available for you. Of course, this will depend on whether or not you actually need to make use off those particular blocks. So that's pretty much it for the blocks that good Gutenberg provides us. Thank you so much for watching and I will see in the next class. 12. Tools and Additional Gutenberg Features: Well, well, well. Welcome to the very final video for Goodson Book tutorial. And what I want to do here is just to walk you through a few additional features that you might find useful when working with Gutenberg. So over here, toothy extreme writer, you have three buttons, you can click on it, and it's a very with some additional features. So you've got the spotlight mode, which allows you to focus on one block at a time. What is those is it will simply gray out all the blocks on your page. And then if you decide to work specifically on one particular block, let's if example, the Bettmann image. Now you can see the bad men images. It's no longer grayed out, which means I'm basically walking on Lee on this particular block, while every other block remains are great out. So I guess it's the best uses. It just lets you know a toll. Times are which particular block you're walking on, so it is kind of useful actually. Let's go back in here. Let's turn off the spotlight mode. You also have access to the full screen mode, which is basically kind of like a phone page editor at this point. So you're no longer will see the war press back end. You can just make a changes in here. And it's kind of like you're walking on your phone page editor. That's kind of like its main use. Let me tone that back to the original view. All right, So, editor, you got your visual aid 12. But we've also got your cord editor as well. And then you've got the manage all reusable blocks by clicking here. Let's see what this does. This will take us to a special page where we can manage every single reusable blocks have created, so in has an example right now. Got the head in block. So I can simply go ahead now and edit the block and come in here and make my change. And that would be that. Now you can also export and import your blocks from Morn Gutin book editor to the other. So, in this case, your just export as your Jason, you get the file, you go to the new site and then you simply import the Jason for you've created from your very first website. That's how you can export and import blocks. Now, at the moment of recording this particular video, which is actually February 1st of 2000 and 19 If I click on add a new block with Gutenberg , all I get is a blank light screen. So I do believe this is some sort of bug that's currently happening. So I'm hoping by the time you watch this video, maybe they made have fixed the issue. I don't know. I hope so. But let's just keep our fingers crossed coming back to a page. If I go back. Teoh tools. You also have the options button where you can choose to either show or hide setting kinds of features on your page. And finally, you've got to your eye button here, which is kind of like kind of like your content structure. You click in there and this will tell you just how your content is laid out. How many words you have headings, paragraphs and blocks. This is actually very, very useful for S e. O, especially when you're trying to optimize your content so this could be very, very useful. And then you also have your block navigation where you can very quickly jumped a particle out block that you wanted to walk on. So in this case, for example, right now I could click on the columns and it will take me straight to our columns, block work and now makes it and edit. So this is very useful. Especially when you're walking with pages that have a lot of blocks. End them so that is basically it full. Gutenberg. Thank you so much for watching. And if you have any questions, of course. Do you let me know? And I will see in the very next video. 13. Gutenberg Conclusion: Well, there you have it. We've come to the end off this special close on how to use the guten book a little. As you can see right now. It's not as bad as a lot of people say it is. It's certainly inferior tomb or established page buildup. Plug ins like a man talk with buildup, but it certainly provides a lot more features than the old classic editor. So I sincerely hope and believe that you have now acquired the necessary skills used Goodson book to build out Your pages are opposed on your WordPress. Worksite has been a pleasure or teaching you this course and enjoyed it. Please do leave a review. That would really help me a lot. Thank you so much. My name is Alex of pleasure. And I will see you next time. Bye bye.