Creating Content

The WordPress Block Editor

The WordPress block editor, which is called Gutenberg allows you to add content to a page or post. Content is entered as series of blocks and each block will contain a certain type of content, such as headings, images and normal paragraphs of text.

Adding a Title

When you first go into the content editor, it will look a bit like this:

WordPress Gutenberg.

You will see there's an Add title field at the top. This, rather obviously, is for the title of your page or post, so you can type some text in there to add a tile, as I've done here:

WordPress Gutenberg.

The title field is fixed and always present. It is not one of the WordPress editor's normal blocks.

Adding Some Paragraph Text

WordPress Gutenberg.

You will note that WordPress has created a blank block to get you started. If you type some text into that block you are creating your first paragraph. When you've finished entering that paragraph you can hit Enter and WordPress will automatically create a block for your second paragraph.

This is what it might look like after entering two paragraphs of text:

WordPress Gutenberg.

Adding Other Types of Block

Of course you may want to enter other types of data too. In this section I'll just cover a couple of the commonly used types of block.

Adding a Heading

WordPress Gutenberg.

There are a few ways you can insert different types of block into WordPress. The way to see the full selection of blocks available is to look at the top left of the admin section and find the + symbol.

If you press that plus, a panel will open on the left showing you all the block types, like this:

WordPress Gutenberg.

To add a heading, you need to click on the heading block (1, on the diagram below). You will see that it will then insert a heading (2). You can dismiss the block selection panel by pressing the X at the top (3), although it will automatically disappear when you start typing text.

WordPress Gutenberg.

Now you can go over and enter the text for your heading, and it should look a bit like this afterwards:

WordPress Gutenberg.

Adding an Image

Another type of block you might want to enter is an image block. We'll bring up the blocks panel again and this time we'll select the image block (1, on the diagram below) and you will see it insert the image block to the right (2).

WordPress Gutenberg.

Now that we have the image block in place, we have to tell it which image to use. You have three options here:

  1. Use an image from the WordPress media library. Any images you upload are stored in the WordPress media library and here you can select one you previously uploaded.
  2. Upload a new image now. It will upload that image to the WordPress media library and use it here.
  3. Enter the URL web address of an image that exists somewhere online.

WordPress Gutenberg.

I'll use option 1 in this instance. I first click on the Media Library link (see image on the right) and that opens the media library panel (see below). I then click on the image I want to use (1) and then hit the Select button at the bottom right (2).

WordPress Gutenberg.

You will see it has inserted my image, as follows:

WordPress Gutenberg.

Moving Blocks

Oops, the image I inserted is in the wrong place. I really wanted it after the heading I'd previously inserted. No worries, though - I can move it.

WordPress Gutenberg.

To move a block, first click on the block you want to move. This will bring up a little pabel from which you can do many things. In this instance we want the icon with six dots in it (see right).

Click and hold that six dots icon and drag it to where you want the image. In my case I've moved it below the heading. The end result looks like this.

WordPress Gutenberg.