WordPress Gutenberg Tutorial For Content Writers & Editors



in this tutorial I'm gonna show content writers how to use the new content editing experience in WordPress if you've used WordPress before this is what it looked like and here let's take a closer look you had a spot for your title and you had this big area where you could just type away and you had your standard editing options right there well that's different now because this is the new WordPress content editing experience it's nicknamed Gutenberg and this is going to be pretty much on every WordPress website so you as a Content writer need to get used to this new editor and I want to help you do that in this video tutorial hi my name is Adam from WP crafter comm where I make wordpress tutorial videos for non-techies if you're new here consider clicking on the subscribe button and if you don't want to miss a thing click on the notification Bell and YouTube will let you know when I upload new videos so let's just go ahead and jump right on into it now before we get started really digging into the interface I want to set your mind at ease sure it looks different it's a different experience but it's a better experience if you ask me from someone who has written a lot of content in WordPress it's a much better experience so let's just go ahead and jump on into it so the first thing I want to let you know is that the way it looks as far as the font right here and the fonts use throughout and the colors of the fonts it might be different based upon the website that you're working on because what happens is it's trying to recreate what it's going to look like when this content is on the front end of the website what happens when you click on publish and so what happens is the editor now is gonna pull in the fonts from your theme the website that this is on and that you're working on and it's gonna pull in the font colors as well from the website so it's probably gonna look a little different for each person so before all of the content you would add would be in this one box right here now what happens is each bit of content is going to be in its own container which is also called a block and so let's go through the navigate up here first and then we'll start adding blocks to this page so we have this plus right here and when you click on it it's going to show you a list of blocks at the top here it's going to show your most used blocks and then as you scroll down it'll be common blocks and these are the blocks that you would most likely use in content which is paragraphs headings lists images galleries quotes and stuff like that but there's also some really nice advanced things that you couldn't really easily do before so when we look at formatting we've got one really interesting option table is very difficult to do a table in WordPress normally but not anymore we also have layout elements so it's super easy to add buttons and columns to the content that you're creating as we scroll down we have just a few widgets but we have also the different content and meds that you would bring in from other places such as Twitter Facebook YouTube and the like now all of these blocks can be a little difficult to manage that's where you have this most used panel and you can also search for a block right here next we have these options to go back in time to undo this is something we didn't have before with WordPress now you can undo and redo in it is very useful this I'll show you in a moment this I essentially what it's going to do is give you some stats on the content that you've already put in it's going to let you know how many words how many blocks you've used and also it's going to have these kind of jump navigation links to the headlines that you've used in your content I'll be showing you that in a moment and then right here is just a block navigation it's a list of the blocks I don't personally find this that useful but it is a nice overview you're gonna mostly be using this option here and jumping from title to title headline the headline in your content and I'll be showing that you that in a moment next we have the preview and publish button we have this option Settings panel right here and when we click on it all this is going to do is hide this panel right there so now it's not showing and you have more space for your content I personally prefer to have that open now one of the most important areas of settings for Gutenberg is right here where it says more and when you click on it we some options versus the toolbar placement do you want it to be where your content is or do you want to have it here at the top let me add a title and a little bit of content so I can show you this okay so I've gone ahead and added a title and the first paragraph to this article so when I click right here on the first paragraph we have the editing options right here which is your alignment bold italics and all of that but see when I am in the options here if I didn't want it there I can click right here it says unified toolbar and it moves it up here to the top so now when I click in my content I can just start editing my content and here are those options so this is gonna boil down to a personal preference the one thing to keep in mind is when they are above the actual content block it's kind of blocking what's above it so you can see that an example of that right here how it's kind of blocking it so you might not want that you might want to go with the unified toolbar option the next option is spotlight mode I don't personally like this it kind of Gray's everything out and then only when you're clicked into something do you see it come to life and everything just kind of fades out into the background and we can uncheck that because I'm not a real big fan of that but then we have this really neat option called full-screen mode so when I click on this I am literally in a full-screen editing mode and then if I hide this toolbar here by clicking on the settings wheel now I'm literally have a clean canvas so I can focus solely on the content and then if you were to add the unified toolbar here it is it's as clean as it gets you could focus on creating fantastic content now the first bit of advice I want to give you when it comes to using this new content editor is just to use it like you normally would so if you're at the end of a paragraph and you want to start a new paragraph you could just hit the enter key and then go down and you're in a new paragraph and you can start typing away so here I am I've written a second paragraph so let's just say I want to add an image underneath this so I will do the same thing I'll click the enter key now if I look all the way to the right there's an option here that says add image I can click on that and we get a new image block so I can choose media library or upload or insert from URL I'm gonna click on media library I'm gonna go ahead and choose this image right here and then click on select and that's all there is and I still can format my image now I've got the formatting options right here so if I wanted it centered I can click right here and it will align that centered when we're viewing the content in its normal container on the front end of the website and we also have an option here to put a caption in now I'm gonna return this editor to the default view it's quite simple to do I'll click on the three dots on the top right uncheck unified toolbar click on the three dots uncheck full screen mode and then I'll click on the settings wheel and now I am back to where I was so what I can do next is just go ahead and click on enter and there I am I've just gone down a new line now obviously by going down a new line I've created another block so let me fill something out here now when you click into any of the blocks you're gonna see some options here so obviously I can go back to the document options or I can click on block to see the options for the block that I'm in so I'll click the settings right here and I'm in this block and here I can change my font size if I wanted to I could do the drop cap I can change the colors which includes the background and the color of the text so if I wanted this to be red and I wanted my text to be white it's that simple now that would be a little hard to read so I'm going to take advantage of the undo option that we now have so I'll click it once to change the font color I'll click it again to remove the background color and I'm back to normal this is something that was very difficult to do before in the old editing experience now when you have your options right here you can see there's more options right here we can click on that and here are some additional things we can do we can hide the block settings we can duplicate this particular block we can insert a block before or after edit it as HTML and we can even add this to be reusable over and over again or we can click here to remove the block entirely let me show you how to remove a block if I was to click on the backspace or the Delete key right here you can see I'm editing the text but if I click just above it and you can see the cursor isn't flashing and now I hit the backspace key it's gonna remove the entire block for me so I hope you're starting to see that editing in in this new content editor experience isn't really that much different than any other tool that you already are using so let's go ahead and start a new block and what's nice is you could easily turn a block into different types of content so let me add something here so I've added another line of text and we have this option here that will allow you to change the block type so you can click on that and you can change this to a heading by clicking right there and you can choose the H tag for this heading and it will again a pull in the style from the theme that you're using and if you wanted to change it again we can click here we can turn it back into a paragraph if we wanted to a quote so let's turn this back into a paragraph now let's go back in we could also turn this into a list so if I did that we would have the dot there and I can click right here to turn it into a numbered list if I wanted to so now when I click on enter its gonna go to number two and keep going down in the list so I hope you're starting to see how easy it is to work with Gutenberg now before if I wanted to say move this list up here it would be a little tricky sometimes with the formatting but with Gutenberg I can click right here on the side and I can move this wherever I want you see where I have the blue line right there well if I was to let go that is where my list now is and now another nice thing about this new content editing experience is I can if I wanted to insert content in between this list and this paragraph I can click on this little plus right here and it just separates it out a little bit and I can start typing away now let's take a quick look at the content structure which was this eye right here now when I click on it it's going to show that this article so far has 34 words three paragraphs and five blocks in total those additional blocks are the image and the list so at this point you can go here and we have options to save this as a draft or we can publish it now let's first go back though and take a look at the document settings and this should look familiar to you if you've used the WordPress editor before we have our visibility options right here we can choose right here to enter categories tags we can select a featured image we can add an excerpt right there and depending on the theme and the plugins you're using on this particular website that you're on you might have some additional options so for me I have the theme options right here where it says Astro settings let's go ahead scroll on up and click on publish and then it reveals this option right here so I can change it from the visibility to what I want it to be and can change the publish date if I wanted to and it's even making a suggestion to add some tags I'll go ahead and click on publish it says publishing and then right here it gives us the link to jump to but also over here on the right is the link as well you can copy it and send that on out if you did want to change that link the text in it you can click into the title right here it shows you the full link right here you can click on edit and you can change this to be whatever you want just a quick SEO tip shorter is better here so now I want to show you a real article and right here is a real article and it's got a lot of content blocks a lot of content and let me show you now what it looks like when you click on the content structure icon for a full article you can see the words – over 1200 words and the amount of headings and paragraphs and all that but what I really wanted to show you is something I really like about this new content editing experience which is this document outline so if I know I need to adjust something in this section right here I can go ahead and click on it like that and it takes me right there immediately in the editor this makes it easy to jump around for longer content posts and I can click right here where it says title and it's going to jump me right back up to the top now here is that block navigation like I said I don't see myself using this that much because all these paragraphs it doesn't have meaning but if it did if I did click on it it would take me straight on over to that paragraph now I wanted to show you what this looks like on the front end and we can decide if it looks similar so here let me go ahead and put this in full-screen mode so you can see how it looks right here inside the editor and now what I'm gonna do is I'm gonna go ahead and click right here where it says preview to see how it looks on the front end and here it is the front end of the website and I have got to say it looks pretty much the same thing and that is the big benefit of using this new content editor is you're gonna get a really good idea as you're editing it how it's going to look on the front end as long as the theme on the website is Gutenberg compatible and that's pretty much all there is to using the new content editor that's in WordPress and I hope you saw from this video that it's not that hard to use it can seem a little bit more complicated but you just have to remember jump in there and use it as you would any other tool as you would use Google Docs or a word document or the old content editor and the editor will take care of the rest for you and then you have all those benefits of being able to change what a blocks type is rearrange your blocks jump around and get that snapshot overview of the content that you're writing now for this video I used the Astra theme which is one of the very first themes to be fully Gutenberg integrated and as you saw you get to see the fonts and the colors and the spacing and everything just as it's going to look on the front end so I'll make sure to add a link to the Astra theme down below or you can visit WP crafter comm slash Astra if you want to check that out now on the channel I have many videos on Gutenberg and I'm gonna keep releasing videos on Gutenberg to make sure everybody knows how to get the most out of this new content editing experience and in the short future you're gonna be able to use it to build entire pages that you would normally do in a page builder but you're gonna be able to do it with Gutenberg no extra software required so that's all that I have for you in this video I want to thank you for taking your time to watch it if you found some value in it consider giving it a thumbs up if you know somebody that's using Gutenberg and they are new to it this video might help them go ahead and send them a link to this video so that they can watch it and learn how to use this new content editor remember to subscribe and click on the notification bell so that you don't miss a thing on this channel hey thanks for watching and I'll see you in the next video

28 thoughts on “WordPress Gutenberg Tutorial For Content Writers & Editors

  1. One thing I've noticed since using Gutenberg is that despite changing font sizes on my posts the published version still shows small fonts. The whole appearance is "squashed". Any ideas as to what I should do to change this?

  2. Great video! I was wondering whether Gutenberg allowed changing font size and color and you have cleared that up for me. My flexsqueeze theme also allowed using multiple fonts and a selction of google fonts but it doesn't appear gutenberg handles this – may be in the future someone will make a plug-in. Thanks again. Subscribed.

  3. Hi, I updated my site now when I click on (go back to WordPress editor) I get this message: Back to WordPress editor
    Please note that you are switching to WordPress default editor. Your current layout design and content might break.
    Any advice?

  4. Thank you for providing this introduction to WP Gutenberg. It helped relieve my worry about the switch. Kind regards, Jeff

  5. Not a huge fan at all. I am sure once I get used to it, it will be fine. My work has a functions code we put in all our sites right now to block this because it is so difficult for our clients to understand. It is not very intuitive and some of the options (albeit handy) are overwhelming. They took a simple "Microsoft Word" style and made it into this compartmentalized confusing mess. By the way, the old WordPress had an undo button, and it works about the same. Just sayin'. Good vid, enjoyed it! Thank you!

  6. Thank you! I've watched several other Gutenberg tutorials and yours was the best with the most tips to make things easier.

    Is it possible to put 2 or 3 images in a row horizontally? I tried the 3 column icon but it will only let me do text. I tried the media block but I get 1 image or an image with text.

    Thanks for your help. Teresa

  7. I'm using the free Kale theme, but unfortunately the actual post fonts and font sizes in the published posts look completely different from what Gutenberg is looking like. Googled it and there is supposed to be a place where you can click on Customize > Typography and change things, but there nothing there. This is really frustrating, cuz the look of the published page formatting of the writing looks like crap.

  8. Would you consider doing a video on how to format block widths? What in the world…

  9. 7:14 – Since this video was published, the name of the 'Unified Toolbar' has been changed to 'Top Toolbar'. Just mentioning it in case any newbie gets confused.

    8:55 – The "click above and press backspace to delete a block" seems to have changed. Now you have to click on either the right or left edge of the block. Clicking the top and pressing backspace doesn't do anything.

  10. Would you say at this point in time we still need to use Elementor for the look and feel of a site? Have the content styling handled by Gutenberg? Can we use both without jeopardizing the site building process?

  11. This new version is completely rubbish. I tried to use Gutenburg and it slowed me down too much. I cannot copy an image and paste it in directly and I cannot locate all of my categories in order to highlight what I am posting.

  12. Adam i must say your videos are really educative.you are very good in getting the viewer to understand what you are trying to put accross.so i have a service website that am creating.how do i use guttenberg to create a search.ie i want visitors to be able to search for a type of service using thier location.this is an example of what am trying to do (www.goodcontracterslist.com) in this website you see where is says choose service and location and then find contrator that is exactly what i want to be able to do.thank you

  13. Thank you for your contributions! Your way of showing and explaining is great and has helped me a lot. 🙂
    Can you help me understand how Gutenberg and page builders like Beaver Builder work together?
    Do I still need Beaver Builder now that Gutenberg is out? I saw Astra came out with Ultimate Add-ons for Gutenberg? Do I need that when I'm also using Beaver Builder? My biggest question is when to use Beaver Builder and when to use Gutenberg for overlapping features. It's the thing that's the most confusing to me. I know I asked a lot of questions. I hope you're willing to create a video that answers this for me and others who might have the same questions. Thank you in advance!

  14. Gutenberg is going to be a great thing for WordPress. It is in both the .org and the .com versions of WordPress.
    One thing I hope Gutenberg may do is blocks inside of blocks. Also a fullwidth picture option.
    Right now the columns block when you color the background it only colors one column. Not the whole section with the two columns.

Leave a Reply

Your email address will not be published. Required fields are marked *