The Beginner's Guide to WordPress Gutenberg | John Morris | Skillshare

The Beginner's Guide to WordPress Gutenberg

John Morris, I help freelancers get clients.

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
16 Lessons (1h 38m)
    • 1. Introduction to Gutenberg

      1:25
    • 2. What Is Gutenberg?

      7:02
    • 3. How to Install Gutenberg

      1:21
    • 4. How to Uninstall Gutenberg

      2:08
    • 5. How to Create a Blog Post With Gutenberg

      4:19
    • 6. Advanced Layouts

      11:17
    • 7. The Columns Block

      8:44
    • 8. Reusable Blocks

      5:13
    • 9. Choosing the Right Theme

      3:45
    • 10. Demo Site Setup

      2:44
    • 11. Building the Home Page

      12:51
    • 12. Building the About Page

      9:54
    • 13. Building the Portfolio Page

      12:13
    • 14. Building the Contact Form

      6:37
    • 15. Building the Blog Page

      4:00
    • 16. The Future of Gutenberg

      3:59

About This Class

If you don't know, Gutenberg is the new editing experience for WordPress 5.0 and beyond.

And, it is a drastic shift in how post and page creation works in WordPress... moving from one large block of text in the Classic Editor to small, individual blocks of text and media in Gutenberg.

And, the big thing is... this is only the beginning.

Gutenberg will continue to become more and more apart of WordPress moving into full-site layouts and theming and even, eventually, into the WordPress admin area.

So, if you're using WordPress and haven't yet...

It's time to learn Gutenberg.

Which is why I created this new course.

The goal is to get you up to speed with Gutenberg.

What it is and how to use it...

So, if you're a content creator, you're not just prepared for the change, but can push Gutenberg to its limits to create rich content and layouts on our site.

Or, if you're a WordPress developer, you can get familiar with the concept of "blocks" and how your clients' editing experience will change so YOU can help prepare and educate them.

In the course, you'll learn all about the new WordPress "blocks", creating rich content, the convenience of "reusable blocks" and more.

Plus, we'll build an entire site from scratch using WordPress Gutenberg.

I really hope you enjoy the course.

So, with that said... let's get started!

Transcripts

1. Introduction to Gutenberg: Hello and welcome to the Beginner's Guide to WordPress Gutenberg. I'm John Morris, not be instructor for this course. Now, if you don't know, Gutenberg is the new post and page editing experience for WordPress. 5.0, and beyond your looking at an example of it right here. And if you're familiar with WORDPRESS, you'll notice that this is a drastic shift in how Post and page creation works in WordPress . Moving from one large block of text in the classic editor to small individual blocks of text and media and layout in Gutenberg. And the big thing is, this is only the beginning. Gutenberg will continue to become more and more part of WordPress moving into full site layouts and teeming and even eventually into the WordPress admin area. So the goal of this course is to get you up to speed with Gutenberg, what it is and how to use it. So if you're a content creator, you're not just prepared for the change. But you can push Gutenberg to its limits to create rich content and layouts on your site, or if your WordPress developer you get familiar with the concept of blocks and how your clients. Editing experience will change so you can help prepare and educate them. When this course you'll learn all about the WordPress blocks, creating rich content, the convert usable blocks and a whole lot more plus, we will build an entire site from scratch using WordPress Gutenberg. I really hope you enjoy the course on With That said. There will be a joint button somewhere on this page. Click that and let's get started. 2. What Is Gutenberg?: This is WordPress Gutenberg, which if you've used WordPress or you're familiar with it, you'll notice that this is quite a departure from the Wood. All refer to going forward as the classic editor, the curtain editor. So this is what we're gonna sort of dive into and learn all the ins and outs of and how to use. Now probably the big thing to understand about Gutenberg and what it is is that it is the new default editor in WordPress. Five point. Oh, and this is one of things I see a little bit of confusion on, but it is going to be the default experience after WordPress. Five point. Oh, so it's not gonna be a thing where you have sort of this classic editor and go into or you can go into Gutenberg by default. You will go into Gutenberg, and I would imagine that WordPress is going to sort of continue to push down that path as things continue along. Now I'll show you different ways that you can get access to the old classic editor if you just prefer it. But again, this is the default experience in WordPress. 5.0, and really The main idea here is if we we sort of compare this to the current classic editor and what we might call the problem with the current classic editor, um, is that this editor here? The classic editor is really one block of. So if you were to sort of break this down or try and break it down into blocks, it's really one big block of text. You have really only one thing that you can sort of create here, and then you have to sort in bed all of the different content that you want inside of it, and the big change that Gutenberg is trying to make a switch, switching from that experience to this experience where you have many different kinds of blocks that you can create. So it's a switch from one block, one big block of text, too many blocks of different kinds of things that you can add from images on and so forth. So if we kind of take a quick overview of this, you'll notice you still have your title here. So you just write something like my title, and then when you come down into this section here to start writing. You noticed this plus sign here. You almost a plus. Sign up here. You noticed some options over here. These are all pointing you towards adding new blocks. So if we click this plus button just to get a sense of what we're talking about with blocks you can see we have apparent we can have paragraph text, weaken added image, heading quotes some of the things that you're used to using inside of WordPress there's some maybe newer stuff or stuff That's not is obvious. Like audio. You do a cover, you can do a file. We come down here, we have in line elements like an in line image, common blocks. Ah, this category, which is some of the ones that we just saw. But we also have video in here. We have a formatting sections. We can add code. Here's where one of the places where you can get access to the classic editor So this will actually insert a block for Click that and you'll see it looks a lot like the old classic editor. Okay, so you can you can do that. Let's go ahead and hit the plus button here again, and we'll scroll down here. We were in formatting. So you have custom. HTML ah, if we come down here and a lay out elements buttons, columns, median text page breaks, the more tag. If you're looking for that, any widgets that Ah, if you have plug ins or by default, WordPress has some some widgets that are Gutenberg compatible. You'll see in here also embeds for Twitter and YouTube and so forth they can still paste the link, and WordPress will will automatically convert a in an embed herbal link to the proper embed . But this sort of gives you a list of that you can see of different sites now that you can embed into into WordPress here. So that's pretty handy. So again, not necessarily to get too much into the detail of each block, but to give you an idea. When we're talking about blocks, we're talking about different types of content that you can add to your post without having to embed everything into sort of an in line paragraph. That's the whole idea of Gutenberg. And so then the one of the things that you'll notice if we remove this block by default, Gutenberg defaults to a paragraph block. So if we just start writing in here, this is going to be a paragraph block. So it's sort of defaults to the experience of you going into WordPress and just sort of writing your block post. That's kind of going to be the default experience. If you want to do that, you can hit, enter. And one thing to keep in mind is, every time you hit enter, it's essentially creating a new block. So this is a block. That's a paragraph text. Then we will hit Enter in this new Barrett paragraph, it defaults to a paragraph block, but it is a new block. Okay, so it's going to do that for you. But these are all new blocks that we're creating here, and so we can come down here. And now let's say we want to add an image here. We can hit this plus button, we can do image, and now it gives us an interface that makes it easy for us to add images, toe style, those images differently, depending on how we want it to look and so forth. So again, that's when we're talking about what is Gutenberg? This is what it is now. One thing you'll notice over here is that depending on what block you have, the context of this menu will change. When you have a paragraph block, you see we have text settings. We can change the font size weaken. Do drop caps if we want. We have color settings. Here we have an advanced section, etcetera. We come down here and select the image. You'll notice that it changes. So let's go ahead and just go to the media library. Let's insert this guy here and now you'll see we can do all text. We can do a full size image. If we want. We could do a thumb. Now. We have all different options that are specific to this block, so and we can also change you. Here. We can do the image in different layouts and so forth. So it really is trying to give you a much more advanced experience and advanced tools for creating your content. So that's ultimately what wordpress Gutenberg is. One less thing. You noticed some options up here clicked the gear button. It'll actually hide the context menu on the right so that just so you know, that. And if you click this mawr button here, you'll see some different options in terms of the views of top toolbar spotlight mode, full screen mode. You can also go right to the code editor. So if you're looking for that, were a default in the visual editor. But you can click the code editor and you'll notice that now you can see all the code. Ah, in here and again, just a number of different options that you'll see in here. You know, manage, reuse the blocks. We'll talk about those later keyboard shortcuts, etcetera. So that's a menu where you can find a number of other different options. And then, of course, the publish and preview buttons are up here. So again, that is WordPress, Gutenberg, A quick overview of what it is and a little bit of how the inner Freese works and so forth 3. How to Install Gutenberg: Let's talk about how to install Gutenberg. Now, if you're on WordPress five point over, greater Gutenberg will be installed by default, so there's nothing for you to do may also have seen when you come to your dashboard page after updating WordPress, there may be a big block here that talks about Gutenberg and installing it and so forth, so you can go ahead and and hit that and in solid, if you'd like otherwise, let's talk about how to do it explicitly. So we'll just go to plug ins and we'll go toe add new, and then we'll just come up into the search bar and we will hit Gutenberg. Or you may see it right down here as well already showing up here. Either way, I'll go ahead and type in Gutenberg, just in. Case is not showing up for you, but we can do a search and then you'll see Gutenberg. Go ahead and hit, install and then we'll go ahead and hit. Activate now, The thing to keep in mind when you do that is if we come over here to post that once you install it, then Gutenberg will be the be the default experience and so you can see this. Page says Draft and Gutenberg. It's a good Gutenberg page, you know? So you have the option for the classic editor here. Um, but if we click into this just by default again, it is the Gutenberg experience. So this is the default experience. So that is how to install Gutenberg. 4. How to Uninstall Gutenberg: Let's talk about how to uninstall Gutenberg, and this is a little bit tricky because after WordPress 5.0, Gutenberg is the default editor and it's not a plug in. It sort of baked into WordPress. So you're not going to have a plug in that you can install and uninstall, and so it's a little bit more tricky. But what WORDPRESS is done is giving, given us a way that we can sort of revert back to using the old editor. So if we go to plug ins and we go to add new again, you may see it right here this classic classic editor option or weaken, just search for it up here. But this classic editor plug in. So just to get position this properly for you, Gutenberg will be baked into WordPress. It will be the default experience, and there will be no plug in for you. Toe, uh, activate, deactivate. It will just be there. Whoever you can install, then this classic editor plug in. So if we install this and you can see what it says here restores the classic editor an old style and it post screen layout. So if we activate this, and now we go to our posts and we click through. First off, you'll notice that no longer says Gutenberg here. And if we click through to this post, we are now into the default editor. So essentially this classic editor plug in reverts. It sort of hides Gutenberg altogether. It makes the classic editor your default experience. So that's something that you want to do. Then that's the plug in that you'll need. Ah, in order to do this, of course, I'm gonna encourage you to use Gutenberg because personally, I believe it's a better editing experience. I think once you get used to it, it takes a little bit to get used to. But I think once you get used to it, you'll actually enjoy it more, and you'll see that you can create much more advanced, sort of nice looking, nuanced layouts for your posts. Ah, then you can with the classic editor, but ultimately it's up to you what you want to do with your own site. So if you want the classic editor back, you want to just kind of get rid of Gutenberg. That's how to do it. 5. How to Create a Blog Post With Gutenberg: Now let's talk about how to create a block post with WordPress Gutenberg. So we'll go over here to posts and we'll select add new. And because Gutenberg is a full editing experience, you will go right into the word the Gutenberg editor and sort of the shortened suite of it is is that you just sort of start writing your content and adding your blocks as you see fit here. But I want to cover a couple things that you might not know about how this editor works and working with existing content and so forth. So the first thing is is that where press Gutenberg has a pretty advanced copy and paste sort of mechanism in it. So to show you that I'll come over here to an existing post of mine and I'm just gonna copy This will come down here. You can see I have a video. I have different formatting, some links and so forth. So will come in here. I will copy all of this from sort of an old WordPress page built with the classic editor, and we'll pace that in. And when you do, Gutenberg is going to convert this into blocks and it's a pretty smart mechanism that it has in place for doing that. So you can see our paragraph tags. Here are paragraphs you can see our headings are actual heading blocks. Um, our lists and so forth there they're all pretty much preserved. So does a pretty good job of keeping the content the way that that you'd like it. So if you want to No, you have another site there. You have a post that you sort of want toe to convert to Gutenberg again. It does a pretty good job of that. You'll notice a few things like this, so you may want to mess with that and change how that works and so forth. You also noticed with the YouTube video that it has a figure in an eye frame. This is actually more about how I embedded it on this old old bog post than it is about actual Gutenberg. If this if I'd bet it embedded this normally, um, it would have showed up just fine as a video in here. But ah, you can of course, easily find or convert this U R l here Ah and paste that that video in here if you'd like. But again, as you can see, it does a pretty good job of copying over the content and putting it into the correct blocks that it needs. Now, another thing, If we come over here to all posts, this this post right here was created before Gutenberg was installed. So all of your content that was created before Gutenberg was installed before WordPress 5.0 , rolled out. It's not going to be affected by Gutenberg. It all you'll notice his post does not say Gutenberg, and if I click into this, you will see that we have the Gutenberg experience. But it is inside of this classic block right here. So that's essentially how all of your old posts on your site but that were created before Gutenberg was installed on your site. That's how they're going toe work. And so if you want to leave him like this, you certainly can, and nothing will be affected. The work just like ah, they always have. You don't need to go back and convert them or anything like that. However, if you would like to, then when you're in this classic editor here, you can hit this more button and you'll see it has this option to convert two blocks. So if we hit convert toe blocks now, it converts it to an actual Gutenberg paragraph paragraph block, and now you can edit it just how you would inside of Gutenberg. So that's kind of two different ways that you can work with existing content. Either you can copy it from another blogger, an existing blogger, or wherever you're copying it from, and paste it into Gutenberg. Gutenberg will do a pretty good job of converting it to the proper blocks. Or you can simply open it once Gutenberg is installed and you can hit, convert two blocks and it'll convert all of of the elements in that that post two blocks for you. So it's sort of like copying pasting, but you don't actually have to copy and paste. So that and then, of course, if you're just starting off new with a brand new post, you would just come in and you would edit it right in Gutenberg from the very beginning and write your book block post. So those are some options for creating block posts inside of WordPress, Gutenberg 6. Advanced Layouts: in this lesson. We're gonna create a mawr advanced layout using Gutenberg. Now, the before I get into it, I wanna sort of set the context for this properly. I'm gonna be pushing it to to its limits. And what you'll find as I do that is, Gutenberg does have its limits. But the thing to keep in mind is that this is within the context of Gutenberg as a post editor and the default experience inside of WordPress. So I'm gonna be I'm gonna be creating what would be a more advanced page layout that you might create with an advanced page builder but and trying to do that in in Gutenberg and you'll see some of the limitations of that. But keep in mind, this is actually about Gutenberg's about creating posts. Ah, and you'll see what you're gonna be able to do and how powerful really is in terms of actually creating posts and sort of regular block content. A lot of things that I'm gonna do here he probably wouldn't do with a regular post. So let's keep that in mind as we go through this. So to get started, we'll just come over here and we'll hit, Add new and I'm just gonna call this about So I was thinking at about page here, and the first block that I'm gonna create is I'm gonna actually create a cover image, so we'll type and cover. Man will select that, and I'm gonna go into the media library. I pre uploaded all the images just because some of these air really big images and would take a little bit to upload. So I'm gonna use this one here, will hit, select, and then I'm going to use the full width here. And then I'm just gonna write about me here. Now, This is one of the first limitation to you'll see this text here in the cover image bottle I can do is bold and italics eyes it. I can't change the size of the text. I can't do any of that. So again, right off the bat, we hit one. The limitations. You could add a custom class and then go into your CSS file and style that class accordingly. We also noticed when we actually start to look at the front front end of this when we actually view the post on the front end. This text is not a small as it appears here. So there is some back and forth in terms of that when it comes to Gutenberg and some of that theme dependent How? Well, your theme supports Gutenberg. Ah, and so forth. But I imagine all that stuff is going to get a lot better as Gutenberg becomes more and more used. I'm gonna also hit this overlay color. Kind of like the pinker them. You stay with the pink. It kind of like that one. All right, so that's sort of our cover image. Pretty simple and straightforward. Next, I'm going to come here, and I'm going to do media, so we'll do media and text. So this is for, like, an image right next to some text like this. I'm gonna get go to the media library and will select this guy here and for the content. I'm gonna start off. I'm going to say hi. I'm Joe and you notice this Defaults to paragraph actually want to change this to heading. So I'm gonna just change that to heading like that and pretty straightforward there. And then if I hit enter, it'll re default to a new paragraph, and I'm gonna just paste in some lower MEPs, um, some dummy text here. You see, that was pretty quick and easy to create their Now, One thing with this media element here is it It defaults to this wide. Ah, wide with here. I don't really like the wide with, So I'm gonna go ahead and turn that off, and that will keep it normal. You can also flip which side? The images on pretty easily like that. So that's that. The next thing I'm gonna insert is a spacer, so we'll do our space or element, and I'm gonna do about 35 pixels here. All right, so that's gonna give us a little space. And now you noticed over here, this ad heading section here, we can go ahead and click that, and it'll automatically change that from a paragraph into a heading tag. And so we're going to write my portfolio and we will center that text. And of course, you can change what level heading you want here. I'm gonna just keep it like this. And then the next thing that we have here, what I want to do is I want to insert a gallery now. Ah, I can come in here. I hit Adblock and I can select a gallery and then I can go to Media Library and I can select the images that I want for my gallery and that works. Or you can have a folder. Let me bring over a folder here real quick. You can have a folder of images like this and you can drag them in here and we're Gutenberg will automatically so you could select all of these. Gutenberg will automatically create the gallery element for you. Now again, I uploaded these beforehand just because they're big images. So I'm gonna just come into the media library and I'm going to select the ones that I want . I want these ones here. I'll hit, create new gallery. It's gonna ask me if I want to capture in any of these. I'm going to say no, and I'll just hit insert gallery like this. And so it will insert those images. It can sometimes take a little bit when you're working with images, especially if they're bigger. But now you'll see with this gallery element, we have a few options. We can have the images cropped and they will be cropped to align. We could also change the number off, um, columns that we want here. So I want four, cause I have eight. I have eight portfolio items here. Then this. When I am getting changed to the full width here and you'll see it changes it to that full with which I like. All right, so that's the portfolio element. And then, uh, I'll come over down here again and I'm just going to add my space. Or again you'll see as you use elements, they start to show up here under the most used. Some do my spacer. I'll do 35 pixels again and then I'll do heading again in here. I'll do my clients, and we will again. We'll center this and then the next thing that I want to do is I want to. I want to create a sort of a a side by side of my clients here. So 33 pictures with some testimonials and so forth. And so the thing that will need to do that is actually our columns and you'll see columns here. Otherwise it should be under layout elements. You'll see columns here. So we click that and add that it will start off with two columns by default. Here, Um, Now you have to sort of select the column because you've created columns and then you're gonna put stuff inside the columns. So when you want to edit to call him, you have to kind of make sure and select it. Ah, it could be a little tricky to get a hold of it, but usually if you come to the side right here, you can get a hold of it. Then you'll see. I can change the number of columns actually going to do three here and then what I want to start off with now you can see we have this. Plus here I can hit, Plus, and then I want to insert an image. And I'm just going to do that on all three of these before I actually select the image. And it let me do that here, and we will That will delete this one because we don't want that one, all right? And then I'm going to go to the media library again, and I'll just select the image that I want here. Okay, So I'm gonna select this image here, and we'll insert that and then I'm gonna do it's 300 by 300 by default. It's probably a little bigger than what I want, although this will sort of size to the column. So, actually, let me just go ahead and leave it. Um, And then one of the things that I want to do is I want to center it. So I'm gonna line center. You could also do full with like this. It will be the full with, um, I'm just going to stick with a line center. And they would just kind of keep doing that for all of these. So I'll insert this next one and this next one. All right, so get the three images in there. Gin will come in and align this center. All right. And then down below Here again, you can keep adding blocks, So this is kind of the nice thing here. Now I'm going to do a paragraph on, uh, undo that. I'm gonna do a paragraph. I'm just gonna pace in the lower MIPS, um, from before, But I'm gonna kind of cut this off pretty short, right about here, So and then we'll actually Well, uh, at some quotes to this. All right. I met. Went to select on. That's so that's another thing. When you hit control, a just sort of selects the whole page even when you're inside of a block. So keep that in mind, and then we'll line text center here, and then I'm gonna just paste this over in these other spots here for brevity sake and well aligned those center. And then I'll come down here and I'll just say, Jane Doe, line the center. I'm gonna select it all and bold it. Then we'll do John Dome bold and centered and to say, Jenny No! All right, And we'll select it and bold and centered Okay. And then we'll go ahead and hit Publish up here and again. You know, keep in mind when we go to view this, it's not gonna be 100% perfect because, ah, just to sort this is a post editor and we're doing sort of a more advanced kind of page layout here. But you'll see that we can do or probably have seen at this point, you could do quite a bit with Gutenberg right out of the box. We'll go ahead and view this post and no, you see, we have our about me thing up here. We kind of have it laid out How we we did inside of Gutenberg and some of this stuff doesn't look exactly how I would prefer it. Toe look, But for what we're doing inside of a post, I mean, this is this is pretty good. And I imagine, as Gutenberg is developed in, you know, kind of moves along. A lot of this stuff is gonna get better, theme supported, get better on and so forth. So it's it's it's pretty advanced what you can do with Gutenberg right out of the box inside of a post. So that's a little bit of creating a mawr. More advanced sort of page layout will continue to go through some of this and learn more about about Gutenberg, but that's kind of a hot and heavy example of the kind of things that you could do with it . 7. The Columns Block: In our last lesson, we built a more advanced layout with Gutenberg and one of the things that we use when the blocks we used was the columns block. So in this lesson, I want to go a little bit more in depth with the columns, buck, because I think it's something that you probably use on a fairly regular basis. So I'm going to get started. We'll go to posts and then add new, and I'll just give this a title of columns like this. And then we'll come down here to our first block here and we'll hit the plus button. And for me, it's actually listed in my most used section here, which will kind of constantly update as you use different blocks. Or you can just search for it up here. But we'll go ahead and hit that, and by default, it's going to you'll see here. It creates a to call on layout again. Clicking on the actual column item to get it selected could be a little bit tricky, but you just kind of come to the side and you can usually get it, and then you'll see the one option we have over on the right hand side. Here's how many columns we want you can go from to all the way up to six. I would generally recommend for most layouts 3 to 4 is probably gonna be the most the that you want. Otherwise it gets pretty tight in there. So for this one, I'm actually gonna keep it down. Ah, at two. You also notice Weaken. Select this to be wide with or we constructed to be full screen. Or if you click this off, then it will be normal with OK, so by default, it's normal with If you want a whiter with you, click that if you want full screen, you click that if you want it to go back to normal, you just you have tow unclip the one that you have clicked there. So just a little bit of nuance toe how that works there. All right, so what we're going to do here is we're gonna build, just sort of we're gonna We did some testimonials with our columns in the last lesson. So we just kind of do that same thing but will do him a little bit different here. So what? I'm gonna actually adhere. On the left hand side is an image block. And in here I'm gonna go into my media library and I'm going to select this image and we'll drop that in there. One thing is important with the images you do want to make sure and so select a size here. Otherwise, it will scale depending on the theme and so forth. If this block Ah, the actual column here it ends up being really wide. It'll Spitaels upscale the image to the size of the column. So you wanna, at the very least click this 100% option so the image doesn't go any bigger than its a max size. Otherwise, the image will look all blown out and on, sort of funky looking. So we'll do that here. Um, you can also come in here and you could do full with like this, and I'll do the full width of the column again. That will blow it out. If you have the block, it's really big based off the screen size that's viewing it. So just keep that in mind as your ah sort of messing with all this and over here on the great hand side I'm gonna do. John, is the ball home diggity like this. So this is gonna be kind of a town now, you could do a title, but actually, I'm gonna leave this Ah, at the the normal paragraph text. I'm gonna bold it because one thing that's nice is you can actually with this come in here and you can specify specific size like that. Ah, are like this or whatever, so Ah, a lot of times you'll find yourself one. Use the paragraph tags. We can select a specific font size. I'm gonna just go back to normal on this and then we'll come down here. I won't paste in some lower MIPS. I'm here for the testimonial. Put this in quotes and then for the citation, like who it's from. You know, you could just do a paragraph text, but actually, if you use this quote option here, it has a nice little kind of set up here so you can say John Doe. And if you want to include, you know their position and website. You do like CEO Ah, my website dot com like that, and so has a nice little sort of layout for that. All right, so that's sort of a basic look at, Ah, two column layout will hit. Publish on here and we'll hit publish again and then we'll just go ahead and view the post . Now, the thing to keep in mind with columns is that it is gonna be very, very theme dependent. And this is the atomic blocks team, which is a Gutenberg ready theme, but they're probably all gonna do these. Ah, a little bit different here, and this doesn't look bad. It's no doesn't look horrible or anything like that. But depending on how you set it up, you could run into some some issues. So, for example, if I come and grab the calm here, and I hit the wide wit on this and we update it and will view the post again, you can see now the images way over here and the contents way over here. And that's because Gutenberg creates essentially 50% with calm. So it's a two column layout. It creates 50% with columns, and there's really no way to change that. So this image is clear over here in this Texas clover. Here, I couldn't move the image over here. Maybe it look a little bit better, but again. And the theme will affect how the theme chooses to style. This will affect that as well. Another thing to keep in mind if we come into the customizer here and we look at this in different screen sizes. So we come into the tablet view here. No, it does a top to bottom here, and it's not bad, but there's a bunch of white space over here on, and then if we go to the really small and this one actually doesn't look too bad, But again, that's gonna sort of depend on the theme, Um, and and how you've set it up and and so forth. So again, this is This is not the super advanced page builder like you might see with some other plug ins and so forth. But for a Post editor Ah, it's still is is pretty good, right? So we'll go back into the post here. Ah, and just take a look at our columns and we'll set this back to sort of the normal with here . And if you're one of the other things that we've we've talked about, is the additional CSS class. So if you're one toe kind of style this a little bit more. What I recommend is using this. If you're familiar with CSS at all, um, and use the additional CSS class here. We'll update on that now, What that allows us to do is if we go to view post and we go to the customizer, you'll see down here we have additional CSS now weaken Target are I've thrown in some CSS here already, but we can target that CSS class that we added. And so I've acted a background Ah, just a sort of light gray color. Ah added patting 30 pixels on the top 30 pixels on the right zero on the bottom because it already has a lot of padding on the bottom by default. And so, if you add even more, just pushes it way down and then 30 on the left, And that added a border of one pixel solid and sort of this light gray color here. Okay, so you know, uh, you may not be 100% familiar with CSS and all that, but this is some pretty basic CSS ing and see, when we do that at that. It actually does make it a little bit look a little bit better. And then now that you've out of the CSS class, whenever you create want to create a testimonial in your site, you can just add that you can create the columns in Gutenberg just like this. And then you can add that class to it and it will be applied to it. And the CSS styling will be applied to it. I mean, I think that's probably the big thing. To sort of understand with Gutenberg is that Gutenberg is helping you create the layout, and it's it's adding some very, very basic styling. But a lot of the styling is going to come down to the theme, Um, and any sort of custom CSS. Or maybe there's some plug ins that use that adds certain styling, toe, different blocks and so forth. But Gutenberg is really about building the blocks and not necessarily super styling them in a super advanced way. You kind of have to rely on your theme or custom CSS to do that. But Gutenberg makes building the actual blocks the the actual elements, the layout on the page, simple so that then you can come in with CSS. Ah, and stolid accordingly. So anyway, that is Ah, bit more on the columns element and how to use that in your Gutenberg layouts. 8. Reusable Blocks: reasonable blocks might be one of the handiest parts of Gutenberg so far, because they're gonna I think, as you'll see you as we go through this, they're gonna make it easier for you to produce certain pieces of content on a regular basis without having to constantly rewrite things. So in order to use a Riebe usable block, we're gonna go ahead and head on over to our posts, and we're gonna go back into the testimonials that we created in the last lesson. And let's say that we want to put this testimonial on multiple pages. There's multiple places. Or maybe you want to insert at the bottom of a post or something along those lines. We want to reuse. It will weaken. Do that now. There is a way to use this also as a template board, and I'll cover that here in just a little bit. But what I'm talking about specifically is copying this verbatim. So what we need to do in order to do that is go ahead and select the column. And then when we're in the column here under the options, you can see there's an option to add it to reusable blocks. So if we go ahead and click that now, we have the option to give it a name here. So we'll just we'll say, John Doe testimonial like this and will hit. We'll hit the save button over here, and so that's going to save it. As reviews block now, you notice when I do that, I no longer can edit this in here without hitting the edit button. And so this is one of the first things that I want to make sure and make clear about reusable blocks is that when you create a usable block and we go to another page and we insert this, if I come in and edit this, it's going to edit it in all of the reusable blocks. Wherever I've used that, that particular reusable block. So that's why it does this. You need to specifically edit it, and when I change something in here, it will change across every time this block has been used. So keep that in mind again. We'll cover how to create a template that you can then edit for specific pages, but I'll go ahead and hit update on this page and then we'll go to add new and add a new page here and we will come down to our section here and we will just search for John and you'll see under reusable. We have our John Doe testimonial. So we'll hit that and boom it. It puts it all in there. Now again, if I edit when I come in here and let's just say, um, we spoke bomb wrong, right? And I hit Save that is going to save it across again the entire site. So if I go back to all posts, um, actually, let me publish this real quick. I go back to all posts and then I go to columns. You'll see that over here it's been updated. So again, that's it. Changes it across the entire tire site. Now let's go back to our our new post here. Let's say you want to create a template. So if we come in here tour of reusable block and select it and then we go to our options here, you'll see that you have a number of options. So you have duplicate. So what duplicate will do? Will it will duplicate this reusable block, but it'll still be a reusable blocks. So if we edited, it will still change all the instances of that particular block. Another thing you can do is remove from reusable blocks, ALF, you hit removed from reusable blocks. It will delete that, and it will delete them across the entire site anywhere that you've used this reusable block so that will basically nuke them across the entire site. So keep that in mind. The thing we're looking for here is convert to regular block. So if I hit, convert to regular block, you'll now see that I can edit it again. And if I put my be back here right and then I come down here and I again insert my John Doe testimonial, you'll see this one is still the original reusable block. So if you want to create templates for testimonials or different things, maybe forms or subscribe boxes or different things across your site, you can create a reusable block. And then when you had inserted into a specific page, if you want to change something about it for that particular page, just hit that convert to block ah convert to regular block option and it will. That will make it So then you can then edit it on that page and won't change the block across your site. Of course, if you want to change the change, the box across your site, you'd come down here and you would hit at it. And that will change all instances. So those air reusable blocks and they are very, very handy. Maybe one of the most unique and handy things about WordPress Gutenberg. 9. Choosing the Right Theme: So far, we've spent a lot of time looking at what Gutenberg is, how it works, some of its features and so forth. Now what I want to do is take you through, actually use Gutenberg to build out a full site. And of course, the big caveat here is as I've mentioned several times now is that Gutenberg really is in a full page builder. A full site builder. At least yet it's actually more of an in content, sort of in a post type builder. So we're not necessarily gonna be able to do some of the things that you might want to do with a full page builder with Gutenberg. But we can still build some nice looking pages. And so I'm gonna walk through and just sort of give you an example of how to do that so you can get more familiar with using it as a page builder. But given that it is not a full cider full page builder, we still have to pick a theme. And the theme is going to sort of control the navigation bar across the top. The sidebar. It's gonna have the thing in terms of picking page templates. We're gonna have a full with template or if it will include a sidebar. Ah, the footer. All those sorts of things are still gonna be controlled by the theme. And so it's important to pick the right theme and specifically pick a theme that is compatible with Gutenberg and is as flexible as possible to allow you to do as much as you can with Gutenberg. And so that's what we're going to take a look at in this lesson. So to get started, we'll head over to appearance and we'll go to themes. And then, from there we will select add new. Now this is going to bring up all of the themes in the WordPress theme repository. Ah, and of course, you could look through these and so forth to get a sense. But what we want to do is we want to find the one specifically that are that work with Gutenberg. So the way to do that is just to come up here and to search themes in type in the word Gutenberg. And so this the themes that are listed here that come up for the search will have to mention Gutenberg in their in their description somewhere, which means they are likely going to be mentioning that they're compatible with Gutenberg. If we click through some of these, just click the details and preview Megan. I know what chromium control F and then just search for Gutenberg. You'll see there's Gutenberg right there. So it says, Never, never assume works with perfectly with Gutenberg and most popular page builders. Okay, so you can sort of look through these and then when you click on one, just make sure and check for Gutenberg. So 100% Gutenberg ready now, just because something it says it's Gutenberg ready doesn't mean that it's going to 100% work great and per perfectly with Gutenberg. So you kind of have. You probably will have to try a few out here and there and get one. Ah, that you really like. And that works well with with what you want to do now, just to give you a sense, the one that we've been working with, we've been working with this one called Atomic Blocks seems to work pretty well with Gutenberg. I already have this installed, um, but once you have it and want to search for whatever theme you want. You can hit, install, and then you'll hit. Activate, and that will activate the theme on your site. And then you can sort of go through. Ah, and you can play with it and see how well it does actually work with Gutenberg. So it's just important to make sure and pick the right theme to work with Gutenberg s so that you're able to do as much as possible, get sort of the full ah, the full functionality out of Gutenberg and be able to do as much as you want to do. So, Anyway, that's how to go through and pick the right theme for what we're going to do here. Ah, going forward. 10. Demo Site Setup: Now that we've got our theme picked out, we're gonna go ahead and do some quick sights set up here. So get started with that. We'll head over to the pages section, and I went ahead and pre created these just because Ah, so you want to sit and watch me create all these? These are all just blank pages, so you can just quickly go through and hit, add new and create about John Doe or whatever name you want to use blawg contact. This will be the home page. So I gave this the name John Doe freelance developer, because that's what I want to show up in sort of the title of that particular page. But this is the home page, and then a portfolio paid so again they're all blank. But these air the pages that we're gonna be ah, creating. Then you'll notice one says post page, and one says front page will go over to settings. I will go over to reading, and here you will set the home page as John Doe, freelance developer here, and you'll said the post page as blawg. And so that'll make those pages. This page will show up on the home page and then they'll turn this into a blocked page. So have that set up. And then the last thing that we'll do is we'll come over here to appearance and we'll go to menus and we're gonna create a menu. And so we're gonna just call this primary menu like this and hit create menu and then down to the bottom, you'll see it says display location. So we're gonna click Primary menu, and then we're gonna add all of our pages. So I usually just click, view all and will do home about blawg content and portfolio. So we'll hit, add to menu and then I come through here and just sort of changed the titles or labels here . So I'm gonna just call this home Will do about here, actually going to move contact up on top of blawg and portfolio on top of contact. So and then we'll come down here to our contact page and we will call. Just get rid of contact John Doe. All right, so we'll hit save menu. And now we will have our menu for a page home about portfolio contact and blawg. That's the structure that I prefer. It kind of is a natural progression for sort of a freelancer type site. And if we just take a quick look at the front or the front of the site will see, we now have home about portfolio contact and blawg. We have a blank page here because that's what we created. Ah, in our home page. So that's a little bit of, ah, quick site set up to kind of get everything set up, and then we're gonna go through, and we're just gonna build these individual pages inside of Gutenberg. 11. Building the Home Page: in this lesson, we're now going to build or home page. And one thing that's different from some of the stuff we did earlier is we're actually going to use pages here because pages give us a few more options in terms of how we can set up our page and so forth. So I'll show you that. So we're gonna head on over to our pages that we created and our John Doe freelance developer. Pages are home page is set to our front page. So we're just gonna click into that to edit it, and then we'll go through this inside of Gutenberg and edit this. Now the first thing that will want to set here is with the atomic blocks theme. We have a few different page templates that we can use here. So we have the default template, which is gonna be sort of your default page with the sidebar and all that sort of thing. Then have one called page builder and we have one called fold with. The main difference here is Page Builder is going to remove the title so the title of the page won't show up. It all wears full with its full both of full with but full. It still shows the title. So we're gonna go ahead and select Page Builder because of what? The layout that we're going to build here. So we've done that. And now that we've done that, we can sort of go over and start building our page and again, our title here now is not going to show up on that page. So the first thing that I'm going to do here is I'm going to actually insert a media block here, So just search for media and we'll go media and text and I'm going. I've uploaded all of the images already and all of that, so you don't have to wait for that. So I'm gonna go to the media library, and I am going to select this picture here, and we'll drop that in here and then for the content I'm going to start off with. Hey, I'm John. And then I have pre written some content here just to drop in a course for you and whatever project you're building this for, whatever. Ah, you'll put in the appropriate text, but we'll go ahead and pace that in you can see. It just says I'm a freelance developer. This is sort of like a portfolio page type of of site that we're building here. So we're we're talking about our services and so forth. So underneath the actual column here, then one thing you want to make sure is that this is set toe wide With a little bit later, I'll talk about some things that we're gonna do specifically for that. But when Ah, when we selected this page template here for page builder, it's sort of defaults to being full with. And I personally don't like the way that it looks when it's full with. And so if you select wide with instead of expanding it because the page template actually defaults to being full with the wide with actually brings it in a little bit and makes a little bit more narrow, and I think it looks better. So that's again why we want to make sure and turn that on. It should be on by default, But just make sure that that is on there. So we've got our picture. We've got our text gonna go ahead and go into color settings, and I'm actually gonna add this sort of background color here. Now, it looks a little funny like this, but when we actually go to view the page, you'll see the other thing I'm going to do is turn on this stack on a mobile eso that stacks on top of each other, makes a little bit more responsive. And then last thing I'm actually going to do here, which I should have done before I created that block is create a spacer. And then we'll just move that up. And I'm gonna set this to about 50 pixels like this because again with the page builder template, if we don't do that, add the space or this will be pushed right up against the menu bar. That looks kind of funny. So we'll go ahead and update that. Ah, try that again update and now will view the page. And if we take a look over here and we have a decent looking sort of start or header to our site here, so and then you can see the space rats a little space here, and then you can see when it's like this. Having this background color creates a nice sort of side by side. Ah, effect there. So Ah, that's the first thing that that we're doing here. And then what I want to do here is I want to add a button, so we'll search for button, and we're going toe ex. Oops. Looks like it put up there will move that down. And we're going to link this to our contact page while their buttons were gonna link to our contact page. And then our contact page will be where someone will go to get sort of a quote requests. And so I'm just going to say, get a free quote like this, and then we'll center that and we're gonna change the color in here. And I kind of like this. There's, ah, sort of a teal ish bluish color slide. This I think a little more towards the green somewhere in there. Ah, right about there. And I'm just gonna copy this so that I have that for later. This is the hex color for that. So we can drop it in for other buttons as well. All right. So that that sort of gives us our header section with the button links to our contact page . Now here, I'm going to insert a divider, separator and style wise. Actually, like the three dots once we're gonna do three dots, one like this and then below that, we're going to put in a title section here and so will say my portfolio and will center that and then below that, we're going to do a gallery. This for our portfolios will do gallery, and then we'll go to their media. Leiber and again, I've uploaded all of these. These will just be the images from your portfolio and will select all of these portfolio images and will hit, create new gallery. And then you can add captions here, if you would like. So you could say this is for this website dot This person or this website or whatever he could add those captions I'm not going to I'm just gonna hit insert gallery. And then again, just make sure that we select the wide width here, okay? Because there's so that it it shows up properly, and then you can adjust the number of columns. Three is what I I want sold only that set to three. One thing about Gutenberg here we can do a link to a lot of times with the portfolio. It would be nice what you could click the image and would pop up in a light box, and you could sign a kind of scroll through them. That's not Ah, supported by default in Gutenberg. There are plug ins that will allow you to do that. I'm not going to do that here because I want to stick strictly to Gutenberg. But you do. You could link to the attachment page, or you could link to the media file. If you link to the media file actually takes you to the image. It looks somewhat like a light box, but it's not, actually, so you can't sort of click through them and you have to hit the browser back button. So it's a little No, it's not exactly perfect. But again, if you installed a plug in that that ah takes gallery images and word president automatically puts them into ah lightbox than that would sort of solve that problem. So anyway, I'm gonna leave this set to none because I don't really like any of the other options that are there. So we're gonna update that, and then come back and we will view our page. Right. So we got her button. We've got our three dots. We've got our portfolio. Now we've got our portfolio images You could really add as many of these as you want to your gallery. All right, so it's not looking too bad, given that, you know, this is sort of a basic kind of page editor with Gutenberg. All right, so now let's go back into, ah, into our editor here. And so the next thing we're gonna do again is we're going to do ah, divider. And we're gonna do the three dots again, and then we'll do a title again, and we're going to do my clients, and we will center that and then below that, we're actually going to do columns so we'll do columns and get that selected is always a little tricky to select columns. And let's set this to three columns. So we're gonna have three columns across that I'm gonna build this outro quick. So I'm gonna do add an image and here will at an image. And here we will add an image. Right. So we're gonna have three images, then we're gonna have sort of these. Ah, heading blocks will do heading there and then we just tab down. We're gonna have a paragraph under that, and it automatically creates that paragraph tagged for us. So do plus and will do heading and tab and then plus heading and tab. So we have an image, we have a heading, and then we have some paragraph text here. So for our first image will go to the media library. We're going to use this one here and we'll call him Craig Doh, and I want to center that, and I'm gonna do an H street to make it just a little bit smaller here, Um, and we'll come back to the actual testimonials here in a second. So this next one do this one and we'll call her Sandy dough and again centered and h three . And then last one in the media library here. And we'll go with this one, and we'll call her Jenny Dough. Oops. And again, centered and h three. All right, so now for a test, most I'll just copy these over these air. Obviously gonna be whatever the actual testimonial are. Um, won't make it watch me type them out, but they're they're pretty straightforward sort of testimonials. But this is just paragraph text that we're pasting in here. Nothing too tricky. And then the last thing that we want to do here's you again. We want to make sure that we set this to that wide. Ah, with So we want to get the column again, which can always be a little tricky. There's a calm, and we set that to that wide with Then we'll update that and we'll come back over here and take a look at our page. So if we scroll down now, we got three dots, my clients and we've got our three pictures with our testimonials and so forth. So really doesn't look too bad here again. Given what we've were, we have available to us with Gutenberg. All right, so then the last thing that we're gonna do is we're gonna create a a final sort of button so we'll come over here and we will do a separator again and will do the three dots. No will come in here and put in a title. Be a little funny here, but this is basically our title for our get quote button. Obviously, already, you're ready to hire me now, but and actually will center that real quick and I won't come back over here and we'll put in a button again and we will link to our contact page and you can just search right in here. So contact, And then we will say, Get a free quote and we will center that I lost my color from my button up here. So just come back up here and will come in here and we'll copy that and will come down to our button here. And we'll drop that in to give us our color and we will hit update. And once it's done updating, then we will go and view our page. All right, so we'll take a look at our page and you see, we have our button in here, and if we click, either one of these buttons will be taken to our contact page. We haven't built that page at all out yet, but you can see both those buttons link to our contact page, so I mean, that's not necessarily the most advanced home page or anything like that, but it's pretty handy to be able to do this right inside of WordPress. And it's a decent enough looking page and home page that this would certainly work for for a lot of scenarios. And obviously, you know, as Gutenberg advances and you probably being more creative than I am will be ableto figure out ways to build, ah, even Mawr. No complex or involved there, nice looking sort of layouts. But that's our That's our home page, and we'll just continue building the site as we go through the rest of the course here. 12. Building the About Page: in this lesson, We're now going to build or about Page. So we're gonna go over two pages and we will open up our about John Doe page. Now, this is one of the sort of tricky things with Gutenberg in its current state is, for example, this this title right here. This is the title of the post on most page templates or you're you're sort of post view or post template. You're going to see this. And as we saw before, you can come into this since, like the Page builder and get rid of that. The problem with that, then, is that you you are defaulting to completely full with and all of your blocks. And if you look at, say, for example, this paragraph ah, block, there's really no options in terms of a wide width or ah full with or narrow with or anything like that with the paragraph block. So what happens is if you select this page builder template and you want to use paragraph blocks, you know, either have toe, insert columns and and go from there, or you have to ah, you're gonna have this this text be all the way up against the edge of the browser here, so you kind of have to choose among some less desirable options. What I'm gonna do here is I'm gonna show you how to do this. Um ah. Just using the regular page templates. So we're not going to select the page builder template for this one. We to use the regular page template and I'll show you a little bit later. Some ways you can work around some of the issues there. So this about John does is going to show up on our pages is going to be the first thing that people sort of see. So we'll start with that. And then And of course, you could change that. Whatever you want. Next, we're going to add in an image. So I'm going to add in our profile pictures sort of image from our media library here, and we'll use this one here with select, and I want to center that and then I'm going to do about 50% on that. Or maybe actually put this up to 300 like this. So we'll do a height, then went of 300 like that. Um, the image here I'm gonna use the medium size thumbnail so it doesn't loads a little bit smaller image there. We're going to start off with that. Next, we're gonna come in here and we'll do a title, and we'll sort of use the same sort of, Ah, the same sort of text and approach that we used on the home page with, Hey, m John. And then we'll come down here into some paragraph text. Now, I'm gonna paste in sort of the rest of this text just because I don't feel the need for you Toe watch me type it out. But it's pretty standard stuff. Actually, Part of it is copied from the home page. We just got rid of a little bit of it here. Let's go ahead and remove this, and so you can see it's his ham, John. I'm a freelance web developer specializing building press. Gutenberg cites, etcetera, etcetera. So this talks about I'm married with three boys, etcetera. So it's just some text in here. This would be whatever you're about, text is for you. I'm gonna put my little smiley back down here again like this. And so some pretty straightforward text there the one thing that I did do here is come in here and I bowled ID this. Otherwise the rest of this is sort of standard paragraph text. So from there then will come down and we're gonna insert another image. So we'll do, Ah, image here and again from our media library. We're going just like this image. Now you can see this is 1920 by 7 82 So it's sort of a wide view sort of picture. No, that's not my family and I, but Ah, we're just sort of putting in a picture here that would represent, you know, I've talked about my family, So I'm putting in a picture here that kind of look like, Hey, that's that's my family. Okay, so that's do you hear nominees said this toe wide with like this? Let's update that. Let's just take a real quick look at our page up to this point. So you see, you have about John Doe now by default. This isn't centered. I've added some custom CSS, and I'll show you how to what that is and how to do that. Ah, when we get to the end of this and that's what? One of the workarounds that we had to do for this. Otherwise, the Texas sort of left aligned over here. I don't really like the way that that looks. You may not mind it so much, and so it's not a big deal, but we'll talk about that here in a second sitting. Then again, you can see it's his ham, John, you know, goes through all the Texan has our picture here up to that point. So that doesn't look too bad again. The these air sort of simple layouts. But, you know, they're pretty clean, and they don't look too bad, given what this is. All right, So next I'm gonna ah, insert another heading tag. And I'm gonna say I've been ah, developer for the 14 years. This is kind of the transition into talking about my services, doing h three on this And then again, I'll just, you know, there's a chunk of text here that I ah well, drop in here so we'll come here, we'll drop that in, says I've worked on all types of projects from customer Prescott plug ins, membership sites, eccentric sessions, was talking about my services and then thes days. Word breast. Gutenberg is my jam is not really true, but I'm just sort of have been tongue and cheek saying that. And throughout this Slovenia prolific point click bubble on that says, getting touched by clicking the button below. So that's the next thing that will want to do. We want to come down here and we'll want to insert a button. And again we're gonna link to our contact page so we'll search for contact. And that should bring up our contact page and then get a free quote like this and we will center that and then for our color, I just sort of happened. Have this saved in my color picker up here. It's our color from before, so we'll won't grab that. And we'll drop that in here and again. You could use whatever color you like. You may not like this particular color. I happen to like it. All right, so we'll update that and we'll come back over to our about page here and you see about John Doe ham. John, you can see ah again our image And down here are button. We click our button and we'll get taken to our contact page, which we're gonna build later. So a decent about page you can make This is long as you want a short as you want. But you know, you can kind of get the idea of how you start to use word Gutenberg toe Put this stuff together. Now let me talk about the CSS real quick. And I actually failed to mention in the last video another piece of CSS that I ah used. So if we come, if we hit the customizer button and we come to additional CSS, see, you have a few chunks in here one is this Align wide. Now it's not going Teoh affect this page because we didn't use that align wide. But remember, on the home page we're using, we're setting all of our blocks to align wide now by default. The width of that is ah, the 60 VW VW stands for Vieux Port with So the view port with is it's depends on the device you're using. But every device, whether it's a computer, browser or phone or a tablet or whatever, has sort of a a visual area where all the things that you're actually going to see are displayed within That, um, referred to that is a view port. And so what this is saying is saying What this does is it takes this the view port in terms of the width and slices it into 100 slices. So, for example, if the View port on a particular vice is, ah 1000 pixels wide than each one of these VW's these Vieux port wits is going to be 100 uh , or 10 pixels because it's going to slice it into 100 slices. Okay? And it does the same thing top to bottom. So when you say 60 it's essentially the same thing is saying 60% with, but it's just done a little bit differently, and this is sort of a new way that things were done Anyway, This is the width by default was 75 in this particular theme, so I didn't like that. It's too wide for my taste, so I changed it to 60 and then I have to change this margin thing right here to 60 VW divided by two. It was 75 so I had to override that. So I'll include this the CSS for you to just drop in in the in the downloads and stuff. So you don't have to worry about rewriting this if you want it to look exactly like what I'm doing here. But I'm just showing you that CSS and then you'll see down here I have ah, page I D 81. So in WordPress, every page is given a class with its I D. So this is essentially the record number that's stored in the database. So it's given a class on the body tag, and then we have the entry title. So I'm able to essentially what that means is I'm able to target this specific page and this entry title. I want that centered. So that's what I have done here, because when we get into other pages, we may or may not want to center them. If we do, we can simply add those pages to the CSS very easily. So again, any custom CSS all clued with download so that you could drop in and make this look exactly how I'm doing it here. But this is one of the things about Gutenberg at this particular stage. That's somewhat unfortunate, but I'm sure we'll get there is that there are still things that if you want to make it look exactly how you want, there's still a little bit of of CSS that's required here. So it's just one of those things, um, that that we have to deal with any way that is the about page in our sort of freelancer site here. 13. Building the Portfolio Page: next page up to build is our portfolio page. But before we do that, we're actually going to create a reusable block that we've been using quite a bit throughout this and so well, first is will go to pages and we will go to our home page and you'll remember the get quote button. We've used that on several pages. And when you start doing something like that, that's when, ah, that becomes a good candidate for a reusable blocks. So that's what we're going to do here and then that way we don't have toe keep customizer, adding that manually to our site. So you can see here. I've come in here and I've actually already turned this into a reusable block. If you remember to do that Ah, you just select a block. And then in the three dots, you hit add to reusable blocks and will ask you to name it. Ah, and then you name it. No, I'm not going to do this one. I'm gonna go ahead and um um not gonna make that a reusable block will just go ahead and reload this since I sort of mess that up. But that's what I did to turn this into a reusable block, and so you can see that's why when the page load, it takes a minute for it to reload because it's sort of pulling that information. Ah, if anything's been updated on another page or anything like that and now it's putting it in here. So then what I did down here is I also ah, got rid of the block that we had here before and I used ah, there were usable block from up there. So those two buttons are exactly the same. And then also just show you how I did that. If we go into our about page, I haven't changed that one. So now that we've created the use reusable block, we can come into our page of the school of the bottom. Here. I can just click in here and I can remove this block, and then we'll go ahead and hit enter to create a new section here. And then we'll come in here and we scroll down to reusable, and we I named it Button get quote so we'll just go ahead and click that and we'll hit update. And even though it looks like it's left aligned here if we view the page, So just go ahead view that we scroll down, we'll see that we have this and it's got the color. It's got the league in and all that, so we don't have to constantly keep doing that. Okay, so that's the first thing Ah, that we've done here and well, now you were going to use that on our port further page as well. So we'll go to all pages again, and now we will go into our portfolio page. Now, I'm gonna show you a different way of sort of manipulating the talent here. This works here because we're not using any standalone paragraph blocks, so we can do that this way. So under document, we've set the tank page template to Page builder, which again is good by default. Gonna make everything full width. If I just type some text in here and I hit update and we view page, you'll see that this text is clear over to the left here. Okay, so that's why depending on what you're building on a page, you may not always be able to say, uh, set that page template but for here were we have We're not gonna be using any standalone paragraph text so we can do that. So the first thing we're gonna do is we're gonna create a heading, and we're going to say my my port folio. It looks like that got changed back to paragraphs. So let's change that toe heading and we're gonna do it, H one and we're gonna center that and then actually come down here and we're gonna do a spacer and spacer, and we'll move that up above to create some distance between the menu and the title here, and we'll set this toe will do 50 pixels to start out and see how that looks. So if we update that because we have that page template of page builders review this page portfolio doesn't show up. But arm now are my My portfolio title does here. Okay, so that's another way that you can sort of get around doing the titling on the page inside of Gutenberg and with the atomic blocks. Ah, theme here. Now what we're going to do is we are going to create a sort of portfolio section here, so I'm going to start off by actually gonna create a subtitle here. So here's Ah, here's a showcase of my recent work and we'll do is we'll go ahead and just align that center and then below that, we are going to put a divider. So our separator and we're going to do a style of three dots like this. So that's kind of what we've been doing all along here. Now we're going to create another title section, and we're going to call this Bob's Auto So this is gonna be the start of our sort of portfolio items. And we're going to set that to each three and we're gonna center that and then below that, we're going to create some columns and we're gonna do a to call him set up here and on the right side. I'm just going to put in Ah, testimonial. So I have some text I've already written up here. I'll just drop in on this right side here and, you know, just the standard. Ah, testimonial. Bob Smith CEO. Now, one thing here, right here. You notice these air sort of back to back here. If you hit shift and then enter, it will put that just one line below. It doesn't actually create a new block. And then I came in here and you could see I bowled ID that. Okay, so this rest of this is standard sort of paragraph text. Okay, so that's the right side. And then on the left side, we're going to add a gallery, and we'll go into our media library, and I'll just choose these 1st 4 portfolio items rolling and put two items in here. I think you sort of get the gist of it at that point, Um and then I'm gonna make this a two column lay out here so that they look like this. So if we update that and we actually want last thing we want to do is we want to come over to our calling block and try and get that selected. Could be a little tough sometimes to get just the column. Blocks selected and we're gonna hit are wide with here again because we're on the page, builder. Everything by default be full with so selecting wide with actually brings it in. Ah, and makes a narrower. So that's a little sort of tricky, but that's just sort of the way it works here, right? So we'll view our page here. Let's make sure it got updated here and now view our page and you can see this doesn't look too bad here. Now, one thing that I did is if we come over into the customizer, I added a little bit of custom CSS just to make it look a little bit better. So added this cast called B G Dash light grey Again. I'll give you all this in the downloads and I said the background to sort of this light gray color. And then I added the padding 50 pixels on top on the right is zero in the bottom because it already has a decent amount of padding in this columns layout. So we don't want to add any more looks funny. And then 50 pixels on the left here. So I created this class and then we're going to once we've created that class. Now we can apply that to this block. So if I hit at it here and I again, I go back to the column here, I can go to advanced and I can add B g dash light gray like this and hit update. And then now, when we view, our page will see that we have sort of this light, gray shadow thing here, which makes it stand out a little bit more. Okay, so that is that's sort of our portfolio set up. We got our gallery here with our portfolio items. You have a testimonial from the company. I mean, you could sort of lay these out How you want now again, Because we're gonna be just be creating this over and over. What you can do is turn this into a reusable block and I've actually done that. So what I'm gonna dio is I'm going to remove this block and right here, I'm going to select down in our reusable blocks. I have template portfolio item. So it's a template for portfolio items. I'll just hit that. And then that one. I'm gonna leave how it is because you know that there's not really any need to change it, although I guess if we wanted to, what we can do is we can just say, convert to regular block, and now it's pretty. It's pre built and and we can just come in here and edit this. We're not going to because that one's going to stay the way it is, and that makes it easy to build these portfolio them. So now what I'll do is all hit this plus button, do a separator again, all due three dots and then below that. I'm going to do a heading and let's just do Gotham Defense Services and we'll do H three and centered again. And then we'll enter to create a new block and here will come down, actually can see are reusable. Block here is showing up in our most used again. They're down here into reusable. If you don't have that happen, we'll do portfolio item. And then again, we'll do comfort to regular block. And now we can sort of change this up. So I again have, um, just some text over here for this so we'll come to the right side and all. I'll just sort of get all this and it paste and looks like it. Ah duplicated it. Sold. Just coming here and remove block and remove block. Okay, so that gives us our new testimonial from our new person here. And then we can come in here to the gallery and we can hit. Edit. Well, actually, remove all of these from here, and we'll have add to gallery, and we will select the last four. So these four right here as our new gallery items for a new portfolio item again, because I I made a reusable block. But then I hit convert to regular park. I can change this without it editing the template. The template is remaining the same. Um, because I haven't I didn't I converted this to a regular block. All right, so next will then come in here and we'll do a separator again and we will do our three dots and looks like that got added to, um are you got to get outside of our columns here and do our separator. All right, there's a three dots and then let's do another title and say, Let's do this. No again will center that and then it enter here and in here will come back and we'll go back into our reusable blocks and we'll get our button that we created before and that will drop in our quote button, and we'll just leave that how that is because where we don't need to edit that for any reason. All right, so that's our portfolio pages. Go ahead and view the page here, see my portfolio? Here's a showcase. My recent work, The Three dots and then we have Bob's Auto little separator. We have Gotham Defense Services, and then we have our little button here. If we click that, that again takes us to our contact page, which we have not yet built. So again, not bad for for ah, Portfolio Page allows you to showcase this sort of thing. And we did use a lot of reusable blocks on this one, so we can hopefully see the power of those with They make things, you know, if you're using the same thing over and over again, it makes it really, really easy. Just click the button, drop it in and and away you go. And if you need to edit it, you can just convert it to a regular Bach and then makes a minutes so you can create templates for your site and then edit those on an individual basis and individual pages. So anyway, there you go. That's your portfolio page 14. Building the Contact Form: this lesson, we're going to build our contact page that we've been leaking to on our other pages. Now, if you want to do this sort of Gutenberg, only then we could go into our contact page here and you could do something really simple, like email me at and then your email address or whatever. So I've been. I've been trying to avoid using extra plug ins in this and trying to use Gutenberg solely here. But this is, ah, particular thing that is, it's not really visual display, which is what Gutenberg does. This is more functionality, and that's where you ultimately. That's what plug ins air for. And there happens to be a really good plug in that we can use here so we'll go to plug ins and we're gonna hit. Add new in order to create a contact form here, and the one that we're looking for is called Ninja Forms. And if you just type in ninja and injured forms, you'll see it's here. One million plus active installations 4.5 star rating. Last updated four days ago. It's a really good plug in its constantly updated its from one of the more popular ones in the WordPress repository. So I don't have a problem using this, and it's free. Had some, um, you know, had some pro upgrades that you can buy if you want, but the majority of the functionality is free, so we'll hit. Install now And that's just gonna insult to our site again, Depending on your server, this may take a little bit longer than or shorter than mind. Then we'll hit, activate, and this is gonna sort of drop us right into. Actually, that didn't drop us into ninja forms when you first install it. I've already installed this because I was playing around a little bit putting first in solid, it actually drops you right into ninja forms. But we'll go ahead and go into ninja forms and will hit add new, and this is going to help us create a new form here. Now, one of things that's nice about ninja forms that already has sort of these templates here that we can use and we have a quote. We're crust one here, so we can just use that one to create our quote, request or if you have, you know, any of these others that match what you're trying to do for a particular page. You can click those and you'll see here. All right, we have. Ah, we have most of fields that we would maybe want here. Now, some of the alternate ones that you may not want This one is. Tell us about your project. This is just sort of a label. So you may or may not want this one showing up. It's sort of like a justice separators on an actual field. It's ah, section sort of header. So then these two things are underneath of it. Same with this one here, This tell us about you so you can sort of decide what fields you want to keep here for me. I don't really need these address one. So I'm just gonna come through ah, and delete all of these address ones because I don't see a reason Toe have these? Never something I ever really asked for When I when I worked with people, but email, phone, You know, you may want the phone number, all that sort of thing. All right, So once you've done that, you can hit, publish, and then just a couple other things that you'll want toe to take a look at here. Um, once the saves, here's we go over the email in actions, you can edit the success message so this meshes they see after they Smith the form. You can edit the admin email so the email template. Just click this here and you can edit who it's sent to of what it says, etcetera. So you can edit that and then store submission. This is if it's gonna stored in the database. There's some settings that you can sit here in terms of storing it. So, um, you can you can turn those on and off. You can edit the templates and all that sort of thing so you can hit. Publish here. And then there's also this advanced section, So display settings, for example, display form title. I really don't like that so we can turn that off clear. Successfully completed forum hide successfully completed form, etcetera. So there's some other advanced. It gets really sort of, uh, advance in here administration, etcetera. So I just wanted to show you those and this one in particular, cause I I don't like the form title, so I like to turn that off. All right, so once you're done setting this up, how you want, make sure hit the publish button, and then we can x out of ninja forms here and ninja forms, then gives us an actual short code here that we can use. So we'll go ahead and copy this. Now I've seen, um no, I've seen that. Ninja Forms also has Gutenberg sort of Ah, um, integration. So that that actually you have ninja form blocks with ninja forms. I'm thinking because of the version of WordPress I'm running here. Ah, those aren't showing up. Maybe ninja forms detects that. Um, but I'm gonna show you how to put this in there. Regardless, we go to contact John Doe, and we'll open up and edit this page in Gutenberg. And we could do something like this to get a free quote, fill out the form below. Now, if ah, once everything. The blocks with ninja forms, everything is working. You just type in ninja like this. Um, and it would that would come up here and you'd be able to see the actual ninja form block and just select from your forms. But again, I think because of the version of WordPress I'm running that's not necessary working at. So I'll just go ahead and hit Plus and we'll do short code and we can use the short code that we got. So we'll hit short code here, dropped that in here. And now that's gonna insert our form there. So we go ahead and hit update, and then we can take a look at this page. So if we do view page and so we see our contact John Doe to get a free quote felt form below and then you could see this is that section had their was talking about maybe something you want to get rid of. You can see the different fields that we have here. Describe your project. Tell us about you, etcetera in our submit button. So it drops that form in there, and it works. Really? Handle. Send the admin email would also sort in our database, and you'll be able to view submissions inside of a ninja form. So if we go back to our dashboard page here, if you look at ninja forms, you can see submissions. So this is going to then when someone submits the form, you'll be able to see the submission so you can select the form quote request form here, and all of the submissions will show up in here when someone submits it and you'll be able to look through it here. Plus, you'll have the emails that you also get to your admin email. So that's the contact form of that plug, and it makes it really, really sort of simple. There's not a lot that you have to sort of figure out or do, or necessarily doing Gutenberg with that, but that is your contact page. 15. Building the Blog Page: this lesson. We're gonna finish up our site by talking about the block page. So I'm gonna show you how to ah, how your blood page actually is already set up. And then we'll add a block post. I'll show you a few Ah ah, unique things about creating block posts that we haven't really covered yet. So if we start off when we just go to our page is here, and we can go and take a look and just view will just view in a new tab or block post page . So this is what if we click this blawg link up here? This is the page that you will go to, You can see it has are one post that we have called columns that we created earlier. We can click through into that, and that will give us sort of the full block post with the comments and so forth kind of a standard thing that you would be used to seeing. So what will do then? Here, Now that we've seen, that will go into posts and we'll just do add new and this is going to create a new ah new post with Will be adding in Gutenberg's, we'll just say l my new post, and I'm gonna use just some lower MIPS. I'm here to not get too bogged down on the content. This is just some dummy text. It's a generator. Just search for alarm if some, if you want to find it and want to use it. But we'll grab that will go into the post and then I'll just pace that in here. You can see it drops out in their nice Now one of the things that ah you can do with Gutenberg is you may, with WordPress, been familiar with what's called the more tag. Well, now it's the more blocks. So if we put, I don't remember if I've covered this yet. But one way you can shortcut to getting the blocks is just to do ah, backslash like that and then start typing the name of the block so you could doom or and you'll see the more tag here, the more block we insert that and it's inserts this more text or this more tag here. Now what that's going to do is it basically tells WordPress and really more your theme that hey, if you're gonna display part of a post or if you're displaying Excerpt. This is what we want you to use to generate that. Okay, so we will kind of want to cut it off here. So that's what this does. Another thing that you can do is with Gutenberg, is you can easily create multi page post. So if we can do or slash and we do page, you see page break here and we insert that that creates a page break. And there may be multiple reasons why you want to do that. Do you have a long post that you want to break up or whatever the case may be? But if we come here and we hit, publish on that and now once that's published, we can click into view our post, and I'll show you a couple sort of unique things here. Click that again. All right, so now we have our block post here. If we were not going to see the more tag but you see down here we have this pages thing and so it automatically breaks us up into a multi page post. If we click the two here, then we come back here and we're We come to the next page and we see that we have the rest of the post, so you can sort of flip back and forth here. So if you wanna create multi page post, that's a really simple way to do that. If we come to our blawg page here than that we created, you also see that the pages air listed down here and you'll see that for excerpt. It puts in the more tag right where we told it to. So the more tag and the page break tagger two more blocks that allow you to do some things with your post that we hadn't necessarily covered yet. And then again because we have selected we we created this page. We didn't do anything. We just told WordPress that this is our post page WordPress sort of automatically makes us a list of posts, and then it uses sort of the template that the theme, the theme sort of determined how all of this stuff shows up here. So again, that's eso. Creating the actual blocked page post itself is actually just a matter of setting that in the settings like we did earlier. And then again, you have those blocks that you could do some some more things with your posts. So that is the blawg page. 16. The Future of Gutenberg: in this lesson. We're gonna talk a little bit about the future of Gutenberg just to give you some sense of where things are headed and why. Ultimately, I don't want to believe it is too much. But why ultimately, um, trying to ignore Gutenberg or get away without using Gutenberg, I think, ultimately going to be few tile once you sort of see where this the thing is kind of projected to be headed. So this is actually the make WordPress make dot where press dot org's pages is where sort of the developers and the contributors talk about Gutenberg and you can see ah, this reference to Gutenberg face to. And I just want to read this to you real quick. And this is from Matt Mullen. Leg himself says Phase one of Gutenberg has been about upgrading the writing and editing experience of WordPress across Pote posts, pages and delightful things people do with post types. The block framework will allow us to drastically simplify the various concepts and user interfaces a crowd across WordPress, including widgets, tiny EMC magic sections and short coats. Right, so that's all Phase one. That's what WordPress 5.0, is that sort of what, um you're going through right now. Phase two is about thinking outside the box, namely the post and page box. To allow outside of those is what he means to allow Gutenberg to handle entire site layouts will place widgets with blocks so any block will be able to be used in registered any register sideboard for legacy themes. And we will upgrade menus to a navigation block. And then he talks about who will be led by and then he'll say, I'll propose and discuss phases three and four of Gutenberg at word camp yo u s in December . So Phase two is about creating entire site layouts, Right? So Phase one is the Post editor, the page editor. Then we're going into entire site layouts. And then you can only imagine what three or 43 faces three and four about. I've seen other stuff from that where basically, essentially, he envisions all of WordPress, including the admin back end and so forth operating off of this sort of box paradigm. So ultimately, Gutenberg is more than just a page builder. It's more than a post editor, right? The idea is to fundamentally rework all of WordPress. Now, Will they go that route? Is that how everything's going to shake out? Who knows? But that that's sort of the goal or the long term vision of is all of WordPress. To be based off of this blocks paradigm, you'll be able to create entire site layouts. I sort of imagine, You know, when you go to create a theme for WordPress, you'll be less about writing code code, necessarily, maybe writing some custom blocks and so forth. But it's more about configuring blocks in a certain way, and it almost be sort of like a style that you import into a site. And it it sort of changes the way the site looks based off of the blocks on a particular page and so forth. So I don't know exactly what it's gonna look like. But again, just to give you some sense of where this all is headed. All of WordPress at some point is envisioned to be operating off of Gutenberg. Entire sites, themes, back ends, probably option pages in the back end, I would imagine, and so forth. So you know you can't really avoid getting away from Gutenberg, and that's why ultimately I decided to create this course is I think it's important to start getting used to Gutenberg now and understanding how it works both as a user and is a developer, and start getting your mind around that paradigm if you want to work with WordPress because that's the way it's going. And oh, Matt, Matt Mullen Leg has been pretty adamant about the fact that he believes that this is the right way forward and there's been a lot of criticism of Gutenberg and he sort of just said , I get it, I hear you, but we're moving this sort of direction so we'll see where it goes ultimately but just wanted to send kind of give you that, that I towards the future and hopefully encourage you to really dig into this on and really understand Gutenberg because that really is the future of WordPress.