How to Create a Post or Page with the WordPress Block Editor

The WordPress Editor uses blocks to transform the way you create content: it turns a single document into a collection of components for adding content.

With blocks, you can quickly add and customize multiple media and visual elements that used to require shortcodes, custom HTML code, and embeds. Blocks make it easier to create media-rich layouts on your Pages and Posts.

Learning outcomes

1. How to name all the Block Editor terms
2. Create the content for a post or page using blocks
3. Design a layout using multiple blocks

Comprehension questions

1. What are the advantages of using the Block Editor?
2. How do you modify and delete blocks?

Transcript

Hi, and welcome to Learn WordPress. My name is Wes Theron. If you’re new to the Block Editor, you are at the right place for a brief summary to set you up for success. The Block Editor has been life-changing for WordPress users. The Editor uses blocks to transform the way you create content, it turns a single document into a collection of components for adding content. With the Block Editor, you will be able to do more with fewer plugins, create modern multimedia heavy layouts, and work across all screen sizes and devices.

Today we will learn how to name all the Block Editor terms, create the content for a Post or Page using blocks, and design a layout using multiple blocks. Let’s start by introducing you to the Block Editor terms. At the top is the Block Toolbar, which you will use to modify text and content. Below the toolbar, you will find your Block Content, and on the right, you’ll be able to edit your settings in the Block Settings Sidebar. When we start a new block, they are a range of options to choose from. For example, ‘Text’, which includes things like paragraphs and headings. ‘Media’, such as images and galleries. ‘Design’ for adding columns or page breaks, for example, ‘Widgets’, like a calendar or social icon, a ‘Theme’ for things like post titles and lists. And lastly, embedding a YouTube or song from Spotify, to name only a few.

As you can see, the Block Editor allows you to quickly add and customise multiple media and visual elements. So the great thing is there are multiple ways to add a block. Firstly, click on the Inserter on the right-hand side of the empty block. I’m going to add a heading and call it the ‘Block Editor’. Secondly, click on the Inserter in the top left corner of the toolbar. And now I will choose an image. I’m going to pick a photo from my Media Library as I’ve already uploaded an image from my computer. You may also wish to add a block by using the Slash Command. I’m going to add another image. Media Library, Select. Please note you may use the arrows to place a block where you want it.

Lastly, you can also click on the three dots to add a new block before or after an existing block. As you will see, I’ve decided to insert a paragraph block after the heading, and you’ll see the more time you spend with the Block Editor, the more comfortable you will feel adding and changing content. So let’s see the Block Editor in action by using a few features to build a Post and a Page. So firstly, let’s add a New Post. Choose a suitable heading for your Post. Mine is ‘Help Protect Our Water Resources”. Now I’m going to add a gallery. Go to the Media Library, choose the photos which you want to use, and create a new gallery. As you will see, I’ve got three columns, but you can change it to two, and then the one will appear bigger. Thereafter I’m going to add another block, and this time, I’m going to choose a quote, and my quote says “If there is magic on this planet, it is contained in water”, and it was written by Laureen Eiseley. Now we are going to embed a video from YouTube. Copy and paste your URL in the block and embed, and now you can also change the width or the alignment, and I’m going to change it to full width.

Next, we are going to insert a design block called Columns, and you can choose how many columns you want to add. Today I’m only going to add two. As you can see, my page is all about water, so I’m going to create a heading and say ‘How to save water’ and then I will insert a paragraph, and I’ve already copied my content, and I will paste it there. On the right-hand side, I will add another heading, and this time I will say ‘Amazing water’ and add eight interesting facts to the paragraph block. And as mentioned, you could have added a third column if you wanted to.

The last thing I want to add to my Post is another image. So go to images, upload it from your Media Library or computer and click Select. If you would like to replace this photo, go to the Replace button next to the three dots, open your Media Library, and click on the photo of your choice. I will also change this image to full width so that you can see it across the whole screen. Now we will move on to create a New Page, go to Pages and click on Add New. Choose the title for your Page. In this case, it will be an About Page. And now I’m going to add a cover photo for my Page.

Upload it from your computer or Media Library and select. I’m going to choose full width, and then I’m going to change the opacity to 0%. Now I’m going to add an image to show viewers or users the person behind the website. So let me introduce you to Geoff, and then I will add a bit of information about him.
Lastly, I’m going to choose social icons so that people can reach him via WordPress, Facebook, or Twitter. And once we’ve published, we can go down to the bottom left and view the Page. All About Geoff. So let’s make our way to the last Post. Now you may decide to move a block wherever you wish to by using the arrows up or down. But you may also decide to delete the block. So go to the three dots on the right and right at the bottom click Remove block.

You are now ready to start your journey with the Block Editor. Visit Learn wordpress.org for more workshops and training material.