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”.
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.
First, click in the field displaying “Add Title“, and type whatever you want your page title to be.
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. Click below the Title field, in the area displaying “Start writing or type / to choose a block“, and start typing.
While working with text content, 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 and create a new one. Note each paragraph occupies what is known as a paragraph block.
The paragraph block is the most basic type of WordPress content block. There are plenty of other block types, but paragraphs will normally be the bread-and-butter of your web content.
Adding New Blocks
While the adding of paragraph blocks is normally achieved by simply pressing the ‘Enter’ key while typing adding other block types must be handled differently. There are several places in the editor where you will see the “Add Block” button, a round button with a plus sign (+). The first is in the top toolbar, just below the quickbar.
Two other locations only appear when you hover the cursor over them:
- Above any content block you are not currently editing. (Using this button will add the new block before whichever block is attached to the button.)
- To the left side of an empty content block.
Click on the “Add Block” to bring up a menu of available block types. As you can see, there are quite a few! Fortunately, WordPress organises them into groups, to make them easier to find. For now, click on the “Common Blocks” section to expand it.
Realistically, most page content will only require blocks in this section. However, you can certainly look around at the other groups, and experiment with different block types to create the content you want! The Blocks editor gives you plenty of control over the layout and appearance of your content.
As you continue to work in the editor, blocks you use often will start to show up in the “Most Used” group, which is open by default. This should help you quickly add the blocks you use most frequently.
Finally, we can also change the order of existing blocks, without needing to cut-and-paste content. Hover your cursor over a block, and you should see a bar appear to its left, showing two arrows and a handle. These controls let you change the order of blocks you’ve created.
Handle: By clicking and holding the central “handle” button, you can drag the block to a new position anywhere in your content. While you hold the block over a valid position, a thick horizontal line will appear to indicate where the block will be placed. Release the button to drop the block into the previewed 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.
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.