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.
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.
The WordPress block editor allows you to build your site with blocks, no code required.
As seen before, to create a post or page, log into your WordPress dashboard.
From the dashboard, navigate to either posts or pages in the left-hand menu.
Let's create a new page to take a closer look at the block editor interface.
Once we add a new page, we can also provide a suitable title for the page.
When you click on the Inserter, you will be able to add a range of different 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.
And on the right, next to patterns, we can add media.
Firstly, from our Media Library, or from Openverse,
they provide openly licensed media that is available to use for free.
There are multiple ways to add a block.
Firstly, you can click on the Inserter 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.
And then add another paragraph.
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.
And 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.
And when you click on the three vertical dots, you will see more options.
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.
And if we scroll up, we can open up the List View, 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.
Let's return to our original page and continue building the page using blocks to see the block editor in action.
Firstly, let's add a Gallery block and then 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.
And in the sidebar settings, I will change it from having three columns to two.
And then 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,
using the Settings sidebar to style and edit your content and using the List View to navigate your content.
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 into 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.
And then it works exactly the same 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.
To end off, creating a post is exactly the same as creating a page.
We use blocks to build the structure of our content.
And please note, we cover adding categories, tags and a featured image in a different lesson.
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.