Gutenberg:The WordPress Block Editor Explained

From organising content to using the tool

In the previous step, you learned about pages and posts in WordPress: what they are, how they differ and how they are organised. You already know which type of content you are going to create.

Now you are entering the place where all that content is written and assembled. This is one of the steps in the second phase of the journey for building your WordPress website with AI, and it is the one that will remain most useful in the long term.

What you need this step for, and what you do not

It is worth making this clear before you begin because it is easy to become confused.

• You are not here to learn how to build your entire website manually. Artificial intelligence will perform that operational work later, in the step dedicated to building your website with AI.
• You are here to understand how the tool works. On the day you need to update a detail on your website, you should know exactly where to make the change: recognise what you are looking at, select the correct element, change it and save without fear.

That is the difference between having a website and having control over your website.

What is Gutenberg?

You have already seen the name twice: when choosing your theme, as the editor where the parts of a page are placed, and in the previous step, as the tool you will work with. Now you will get to know it.

Think of a page as a construction set: every block is one piece. You can move a piece, replace it with another one or remove it while all the other pieces remain where they were. You do not need to dismantle everything to change one piece.

Get to know the Gutenberg interface

To see the editor from the inside, open the left-hand menu in WordPress and go to Pages or Posts. These are the two ways of working with the content created in Gutenberg.

Once there, click Add. The editor will open.

Think of the screen as a workbench. It is always divided into the same four areas:

• Top bar: the editor’s general tools for adding, undoing, previewing, saving and publishing.
• Centre, the canvas: this is where you enter the page or post title and assemble the content block by block. What you see is almost what your visitor will see.
• Right, the settings panel: the options for the page, post or block selected at that moment.
• Left, the tools area: this is where the block inserter and List View open. List View shows how the page is organised.

1

Toolbar

2

Editing area

3

Settings panel

4

List and blocks panel

Top bar: your control panel

You will find a series of buttons. We will look closely at four of them. The others are straightforward and do not need an explanation.

First, locate Save and Publish in the top-right corner. While you are working on a draft, you can save it without making it public. When it is ready, click Publish. If you are editing content that is already published, the button becomes Save.

Content is built with elements called blocks. The + button in the bar opens the inserter, which has three tabs:

• Blocks: individual elements organised into categories such as Text (paragraph, heading, list, table), Media (image, gallery, video), Design and others.
• Patterns: layouts already assembled from several blocks. You insert one as a starting point, then adapt its content and, if necessary, its design.
• Media: the images and files you have already uploaded to your website.

The six blocks you will use most at first are Paragraph, Heading, Image, List, Button and Columns.

Open it from the Document Overview button in the top bar. It shows the page structure as an outline: everything it contains, in order.

It has two uses:

• Select a specific block when it is nested inside others, such as a column inside a group inside a section.
• Reorder blocks by dragging them in the list, without touching the canvas.

Use it as your reference point. It allows you to know where you are and what you are about to change at all times, without getting lost.

Adjust: the panel on the right

This panel has two tabs, and confusing them is the most common beginner mistake:

• Page or Post: affects the whole document, including whether it is a draft or published, its web address, featured image and template. These are settings you change once and then forget.
• Block: affects only the selected element, such as an image or paragraph. If nothing is selected, this tab appears empty.

The rule that keeps you oriented is simple: Page is the complete document. Block is only one element in the page, such as an image, text, table or list.

Check: see the real result

This option allows you to view your page at different screen sizes: desktop, tablet and mobile.

Before publishing, check at least desktop and mobile. A design that works on a large screen may need adjustments on a smaller one. Mobile is also where most of your audience reads your content.

Let us put it into practice

How to insert a block

The insertion process is the same for every block. What changes from one block to another is its design options, not the way you add it to the page.

There are three methods. The one you use depends on whether you know what you are looking for.

1. The / command, when you already know which block you want. Press Enter to create a new line, type / and then the block name: /image, /list, /button. A list appears and filters itself as you type. Select the block you want and it will be inserted at that position. This is the fastest method and the one you will end up using most often.
2. The + button on the line, when you know what you need but not what it is called. A blue + appears at the end of an empty line and between two blocks when you move the pointer over them. Click it to open a short list of common blocks and a search field.
3. The + button in the top bar, when you want to see everything that is available. The + in the top-left corner opens the complete panel, with all blocks grouped by category. This is where to go when you do not yet know what exists.

How to edit a block

Editing varies slightly according to the block, but less than you might expect.

For an image, insert it and that is all. Because your media library is still empty, the most practical option is to upload it directly from your computer. You do not upload it every time: once uploaded, the image remains stored in WordPress, so next time you can select it from the library.

For a block containing text, such as a paragraph, heading or button, simply type over the existing content. It works like any other document.

If you want to change something about that block’s design, use the settings panel on the right. Select the block, open the Block tab and you will find its style, colour and size. Remember that these settings affect only that block, not the entire website.

How to add a link to text

This is one of the things you will do most often, and it takes five seconds:

• Select the word or phrase you want to turn into a link.
• In the floating toolbar that appears above it, click the link icon. The Ctrl + K shortcut also works.
• Paste the destination address, or type the name of a page on your own website and choose it from the list WordPress suggests.
• Press Enter.

To remove a link, select the text and click the same icon, which will now be shown as active.

The floating toolbar: move, duplicate, transform and delete

Every block displays a small toolbar above it when selected. Its controls vary slightly according to the block, but four actions cover almost everything.

• The first icon shows the block type. Click it to transform the block into another type.
• The six dots allow you to drag the block to another position.
• The arrows move it one position up or down.
• The three dots open the remaining actions, including Duplicate and Delete.

Move a block

Select the block and use the up and down arrows in the floating toolbar. You can also drag it using the six-dot icon, but this becomes imprecise with nested blocks. Moving it in List View is safer.

Duplicate a block

In the floating toolbar, open the three-dot menu and select Duplicate. An identical copy is created immediately below, including all its design settings. This is the quickest way to add a fourth card to a row of three: duplicate one card, then change its content.

Transform a block into another type

This action deserves more attention because it saves the most time and almost nobody knows about it. It is in the first icon in the floating toolbar, the one that shows the type of the selected block. Click it to open the Transform to list, which contains every available conversion: Heading, List, Quote, Group, Buttons, Code, Columns and other options depending on the starting block.

Delete a block

Open the three-dot menu and select Delete. If you change your mind, Ctrl + Z undoes the last change, just as it does in any other program. Until you save, everything is reversible.

The three containers: Group, Row and Columns

These are the three containers you will use most. The quick way to distinguish them is to think about what they do, not what they are called.

• Group. Places several blocks inside one container. Use it when one part of the page needs to share something, such as a background colour, width or spacing. A common example is a heading, paragraph and button placed together on a light background. Put all three inside a group and apply the colour to the group, not to each element.
• Row. Places blocks beside one another horizontally, with each occupying the space it needs. A common example is an icon beside a short piece of text, or two consecutive buttons. A row does not divide the width into equal parts; it simply aligns its elements.
• Columns. Divides the page width into several parts and places content in each one. A common example is three service cards side by side, each with its own image and text. On mobile, they automatically stack one below another.

The practical rule is this: if you want to wrap several elements, use Group. If you want to align small elements on one line, use Row. If you want to divide the width into several parts, use Columns.

The essentials so far

You now know how to orient yourself in the editor and work with blocks. Keep one important point in mind: this is only one part of website design. Customisation, which determines the appearance of the whole website, still remains, as does your website navigation with its main menu and footer.

Next step

You now know how to move around Gutenberg: you recognise a block and know how to select, edit, move and transform it.

What remains is to understand where design characteristics, colours, typefaces and sizes are defined, and where your website navigation is located.

In the next step, you will configure your website’s global styles and navigation: one place where you define the appearance of the whole website and can change it whenever you want without reviewing every page.

Frequently asked questions