Beginning with the Block Editor

Previously published as “Writing with Gutenberg”

When you add a new post or page, you will see the Block Editor screen, ready for you to enter content. A “Welcome” help dialogue may be shown, on first using the editor. If you wish to see this again at any time, you can redisplay the Welcome guide.

After being invited to add a title, you can start typing text straight away.

WordPress Block editor welcome screen

Paragraphs, headings, etc are all separate blocks. While typing, when you hit the Enter key, a new paragraph block is displayed as default, ready for typing, which is quite convenient. 

Choosing a Block

The default block is a paragraph, but there are many types of blocks to choose from, eg Heading, Image, List, etc.

To choose a block type, click on the (add new block) icon. The most commonly used blocks appear in a popup; to find a different block, you can enter the name of the block in the search box, or choose Browse all, to open the Block Inserter sidebar and browse through the list of available blocks.

WordPress block editor add a block popup
Choosing a block to add

Once you are familiar with some blocks, instead of clicking the plus icon, you can just type / followed by the name of the block.

WordPress block editor add a block by typing / and block name

Block Controls

WordPress block editor block control bar

Most blocks offer editing options such as left, centre or right alignment, via a fairly intuitive interface called the Block Controls Bar. This interface appears when you click into the block, either initially, or if you return to edit that block later. 

You can also move blocks up and down, using the arrows in the block controls bar or thedrag icon.  And there are further handling options available via the Options menuoptions icon 3 dots(3 dots on the right of the block), which allow you to duplicate or delete blocks, plus a few more advanced options.

WordPress block editor transform a block

Clicking on the block’s own icon, on the left of the block control bar, you see options for transforming your block into a different block type. You can transform the paragraph block into a:-

  • heading
  • list
  • quote
  • or other options…

For blocks which are nested inside other blocks (a list item, for example), you can click on the parent block’s icon in the block control bar, to select the parent block. This makes it relatively easy to navigate around your content, selecting any block you want to move or edit.

WordPress block editor select parent block
Click here to select the parent block

The Block Editor Top Menu Bar

WordPress block editor top menu bar

The top bar of the block editor screen contains some important controls to become familiar with.

In the top left, click the site icon (which may show the WordPress icon, or may be a unique icon for your site), in order to leave the editing screen and return to the admin menu.

The blue block inserter icon opens and closes the list of available blocks.

Also in the top left are the standard undo and redo icons, which allow you to undo (or redo) recent edits.

An important control in the top right is the settings icon, which opens and closes the settings sidebar, where you can set options for each block and for the page or post itself.

Also in the top right are the blue Publish (or update) button – obviously essential – and the Save draft link, to save your draft when you are not yet ready to publish.

Settings Sidebar

The Settings sidebar, which opens up on the right of the editor screen, shows additional options for each block, such as colour, font-size, margin or padding and other block-specific settings. For the layout blocks – group, columns, etc – the settings can be very useful in managing the appearance of the content on the page.

Themes can control which settings are available, so the settings shown may be different on your site.

WordPress block editor settings sidebar showing block settings

Post or Page Settings

Choosing the Post or Page tab in the Settings sidebar shows essential settings for the page or post, including Featured Image, Categories and Tags, Excerpt (for use on Archive pages), date of publication, URL and others. It is always valuable to visit the post or page sidebar prior to publication, to check that these settings match your intention for the page.

WordPress block editor settings sidebar showing post or page settings

Additional Help

Welcome Guide

To redisplay the Block Editor Welcome Guide at any time, click on the options iconoptions icon 3 dotsin the top right of the Block Editor window, then choose Welcome Guide from the menu.

WordPress block editor show the welcome guide again

Other Help Links