WordPress Tutorial: Basic Editing Concepts

This tutorial is the first in our series about creating & editing pages using the WordPress Blocks editor.

Part one aims to introduce you to the basic concepts of page content and the Blocks editor. We will create a new page with a title and paragraph text, then learn to add new blocks and order them as we wish.

Adding a New Page

To begin our work, we must first create our new page. After logging in to your WordPress site and landing on your dashboard, hover your cursor over the “Pages” item in the left-hand sidebar menu. This will bring up a small sub-menu, where we want to click “Add New”.

Adding a new WordPress Page from the dashboard
Adding a new Page from the dashboard

When we first create a new page, WordPress takes us to the editing interface. The basic skeleton of a new Page is loaded for us, ready for us to add a Title and some content Blocks.

A new, blank page in the WordPress Blocks editor
A new, blank page in the WordPress Blocks editor

First, click in the field displaying “Add Title“, and type whatever you want your page title to be.

Adding a title to our WordPress Page
Adding a title to our WordPress Page

This will be the main heading on the page, and the first thing a visitor will see—so choose something strong, that immediately communicates the purpose of the page. For example, there’s no value in giving your homepage the title “Home”. Instead, try something that includes the main focus of your business, the area you’re based in, and so forth.

Our First Paragraph Block

Once we have a title, we want to add some text content to our page. Below the Title field is an empty block, which currently displays “Start writing or type / to choose a block“. Place the the cursor in this empty block (the placeholder text will disappear).

Adding a text paragraph to our WordPress page
Adding a text paragraph to our WordPress page

Now, simply start typing. When you add text, the empty block will automatically become a paragraph block. This simple text content is the the most basic type of WordPress block, and is the bread-and-butter of any page or post content.

When you’re typing in paragraph blocks, editing in WordPress is a lot like any word processor you might use on your computer. Just type the text you want, and press the ‘Enter’ key to complete each paragraph. Just keep typing to add as many paragraphs as you like!

Adding Other Blocks

You can add paragraph blocks just by typing. However, other blocks types can also be added, and for this we use the “Add Block” button. This button looks like a plus sign (+), and you’ll see it in few different places within the editor.

  1. In the top toolbar, just below the quickbar. Clicking the button here will add a new block to the bottom of your current content.
The "Add Block" button in the top toolbar
The “Add Block” button in the top toolbar
  1. When you select (click on or move the cursor into) an empty content block, the “Add Block” button appears to the right side of the empty section. Clicking the button here will fill the selected empty block.
The "Add Block" button alongside the content
The “Add Block” button alongside the content
  1. Hovering the cursor between content blocks which are not currently selected will also display the button. Clicking the button here will insert a new block between the blocks above and below it.
The "Add Block" button in between content blocks
The “Add Block” button in between content blocks

Clicking on the “Add Block” brings up a menu of available block types. There are quite a lot, and many plugins expand the blocks you can choose! However, by default WordPress only shows the blocks you use most often. (On a brand new site, this will default to the most common overall.)

The "Add Block" menu showing commonly used block types
The “Add Block” menu showing commonly used block types

You can also see a large “Browse all” button below the listed blocks. If you want to see all the available blocks for your WordPress installation, click this button to reveal the Blocks pane. The available blocks are divided into groups to help you find what you’re looking for.

Clicking on "browse all" reveals the blocks pane
Clicking on “browse all” reveals the blocks pane

We won’t add any other block types right now, but we will definitely do so in future tutorials. Realistically, most page content will only require the most common blocks; however, you can certainly experiment with different block types to create the content you want! The Blocks editor gives you plenty of control over content layout and appearance.

Tip: You can also bring up a small menu of recent block types by typing “/” into an empty block.

Reordering Blocks

Finally, we can also change the order of existing blocks, without needing to cut-and-paste content. When you click on a block to select it, you should see a bar appear above the block with various control buttons.

The exact buttons displayed here will change depending on what type of block you’re working with, which is indicated by the first icon in the bar (in our example, the paragraph symbol ¶). However, every block has a handle indicated by a grid of dots, and a pair of up and down arrows. These controls let you change the order of blocks you’ve created.

Using the arrows to reorder blocks
Using the arrows to reorder blocks

Handle: By clicking and holding the “handle” control, you can drag the block to a new position anywhere in your content. While you hold the block over a valid position, a highlighted horizontal line will appear to indicate where the block will be placed. (In our example it’s highlighted in blue.) Release the button to drop the block into the previewed position.

Dragging a block to a new position
Dragging a block to a new position

Arrow buttons: The up and down arrow buttons move the block only one position at a time. As you might expect, you can click again to continue moving one step at a time. This is slower if you need to drastically change the position of a block, but useful if you find the drag-and-drop method a bit fiddly.

Using the arrows to reorder blocks
Using the arrows to reorder blocks

What’s Next?

This concludes our tutorial on basic editing concepts with the WordPress Blocks editor. If you’re ready to learn more about creating and editing text content, the tutorial continues in Part 2: Working with Text Blocks.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.