How To Use The New Gutenberg Editor For WordPress

How To Use The New Gutenberg Editor For WordPress

Are you wondering how to use the new Gutenberg editor in your blog or website? If you have just updated to WordPress 5.0 or you have just created a brand new site, chances are it has been loaded with the Gutenberg editing system rather than the old classic one that you may have been used to.

This post is going to explain the differences and how to make the most of this new and updated way of creating posts and pages.

Gutenberg is designed to work on a block basis. In other words, you create a block and then put what you want into the block. For example, this is a text block where I am just typing text. Below you will see an image block where I have inserted an image.

Are you scared of Gutenberg?

You might think that this isn't so different so why mess about with our old and trusted way of editing? Well here's what it can also do that is making all the difference to how posts and pages are being created.

Beautiful Art

A great day out

Fun for all

You can also see that I have added text (or captions) to the images. This was easily done too as I just overtyped where it said add caption.


Gutenberg will also keep a track of the types of blocks that you use the most and highlight them on the top left of the new block so that you can quickly add your blocks as you create your content.

How To Add Sub-headings And Change Colours

To create a heading like the one above, just create a new paragraph block. Type in your heading. Now look at the side panel on the right of the screen. You will see "Text Settings" Change the font size from normal to medium. This will now open further size options for you. To change the colour just choose the colour settings and click the drop down arrow. You can now choose the colour that you want your text to be.

To get your subheading to be shown as bold text you will need to click on the block, highlight the text and then click on the bold icon pretty much as you did in the old classic editor.

How To Add Hyperlinks To Your Text

This is pretty much the same as it has always been. First you need to type the text that you want the hyperlink to be added to. You then just go and highlight the text and the toolbox will open with the option to add the hyperlink.
Note, if you want the hyperlink to appear in a different colour to the rest of your text, you will have to put it into a box of it's own, at least for now until WordPress figure something else out. You will see that whatever you do in the box will be applied to ALL text in the box.

How To Add A Bullet List

  • Open a new block
  • Choose lists from the block type
  • Choose how you want your bullets to show
  • Like this
  1. or like this
  2. where numbers are used instead of dots

You can simply change your block type every time you hit the return button. This makes it very easy to toggle between paragraphs, images and lists type blocks

You can preview your post whenever you want to by hitting the preview button on the top right of your screen. This will show you what your viewers will see, much like the old preview did. To publish the post or page you simply hit the publish button.

How To Add A Featured Image, Categories, Tags etc.

To add a featured image to your post you will need to click on the document tag top right of the page (next to where it says block). This will then give you options such as adding tags, categories, featured images etc to your posts and pages.

How To Schedule A post

If you want to schedule a post to go out some time in the future, you will again have to use the document tab. Scroll down to where you see it says publish. Click where it says publish (not where it says publish immediately). This will open a calendar for you to be able to choose your publishing date and time.

How To Add A Background Colour To Your Text Block

Can you see how your blog is starting to look a little more individual? You can start to make it stand out from a crowd a little more now, without having to pay for fancy themes, or learn a whole lot of coding.

For those who do know a bit about coding, you can still had your additional CSS by clicking on the advanced tab on the side panel and adding into the box that opens.



About the author

Lynne Thomas administrator

Leave a Reply