Transcript

Introduction

Creating posts and pages with the WordPress block editor. Today, we’re diving into the heart of content creation, using the powerful WordPress block editor.

Learning outcomes

The learning outcomes for this lesson are defining the block editor, navigating the block editor interface, differentiating between the content editing area and the setting sidebar, creating a page and post, and lastly, using blocks, patterns, and the List View.

Introduction to the Block Editor

The WordPress block editor allows you to build your site with blocks, no code required. As seen before, log into your WordPress dashboard to create a post or page. From the dashboard, navigate to either posts or pages in the left-hand menu. Let’s create a new page to examine the block editor interface closely. Once we add a new page, we can also provide a suitable title for the page. When you click on the Inserter, you can add a range of blocks to build your page.

Blocks can be anything from paragraphs, images, columns, galleries, pricing tables, and more. Block patterns is another great feature. These are set groups of blocks or pre-designed blocks that you can quickly add to build entire sections and then modify it to meet your needs.

On the right, next to patterns, we can add media. Firstly, from our Media Library, or from Openverse. Openverse provides openly licensed media that is available to use for free.

Adding blocks

There are multiple ways to add a block. Firstly, you can click on the Inserter on the top left or on the Inserter within the page. The six blocks that appear below Search will be your most recently used blocks. Or you can use the forward slash command. So let’s say forward slash image and add an image from our Media Library, which I’ve already uploaded. Next, I will press Enter and then add some text to my Paragraph block. Then, add another paragraph.

Block editor interface: Content creation area, Settings Sidebar, and List View

The interface is divided into three main sections. The Content Editing Area, the left sidebar for selecting blocks or the List View, which we will talk about in a moment, and the Settings sidebar on the right. The Settings sidebar on the right provides additional settings and options for the selected block, allowing you to style the block further. Each block, of course, will have different settings available.

When you select a block, you will also see the block toolbar related to the specific block. In this case, the Paragraph block. Starting from the left, the block toolbar allows you to transform this block to a different type of block, drag and drop a block to a new location, or use arrows to relocate a block, change the alignment of the text, select bold, italics, or allow you to add a link. The drop-down arrow allows highlighting, adding footnotes, and other styling options. You will see more options when you click on the three vertical dots.

Next, it is also important to highlight the List View. In this example, you will notice that I have built an entire page using a variety of blocks. Scrolling up, we can open the List View on the top left. The List View helps you navigate between layers of content and nested blocks. It is an indispensable feature of the WordPress editor that makes it easy for you to work with the blocks on your site. You can view the exact order and structure of every block on the page, which is especially helpful if you have a page with a lot of content. You can select blocks that have other blocks nested inside them. You can click and drag blocks to move them to a different part of the page. And when you click on the ellipsis, the three dots next to any block in the List View, there are a variety of helpful options.

Building a page

Let’s return to our original page and continue building the page using blocks to see the block editor in action. First, let’s add a Gallery block and select three images from our Media Library. Once inserted, I’ll select the Gallery block, click on the three vertical dots, and select Add after. Then, I will click on the Inserter top left and add a pattern, a pre-designed group of blocks. And I will select one of the featured patterns to schedule a visit. Then, I will open up my List View, select the Group block, and change the alignment of the text. Next, let’s look at the sidebar settings. Once we select a block, we can use the sidebar settings to style the block further. In this case, we can add a rounded effect to our image. I’ll select my second paragraph and use the block toolbar to change the text to bold. Then, I will select my List View to ensure that I select my parent Gallery block. In the sidebar settings, I will change it from having three columns to two. Finally, I will select my Buttons block and change the background color to green.

I trust you now see how the puzzle pieces of the block editor fit together, using blocks to add content, the Settings sidebar to style and edit your content, and the List View to navigate your content.

Creating and editing pages in the Site Editor

Please note you can also create and edit pages in the Site Editor. So let’s make our way to Appearance and click on Editor. And this will, of course, take us to the Site Editor. Then we can select pages, and I will open up the Using the block editor page and then select Edit. In the Site Editor, we add content to the Content block. Then, it works exactly the same way, and we can keep building our page using blocks. In this case, I will add an Embed YouTube block, add my URL, and then embed the video into my page.

Creating and editing posts

To end, creating a post is the same as creating a page. We use blocks to build the structure of our content. Please note we cover adding categories, tags, and a featured image in a different lesson.

Conclusion

I trust you now have a better understanding of navigating the block editor as well as using blocks, the Settings sidebar, and the List View.