studio
4cfcf09a97
Sources: video-subtitle-pipeline artifacts/beginner-wordpress-user/ - subtitles/: en, zh, bilingual SRT/ASS (100 files) - platform/: youtube SRT + bilibili BCC per video (75 files) - manifests/: per-video manifest.json (25 files) - quality/: quality reports (50 files)
327 lines
8.3 KiB
Text
327 lines
8.3 KiB
Text
1
|
|
00:00:00,000 --> 00:00:04,600
|
|
Creating posts and pages with the WordPress Block Editor.
|
|
|
|
2
|
|
00:00:04,600 --> 00:00:11,360
|
|
Today, we're diving into the heart of content creation using the powerful WordPress Block Editor.
|
|
|
|
3
|
|
00:00:11,360 --> 00:00:22,160
|
|
The learning outcomes for this lesson are defining the Block Editor, navigating the Block Editor interface, differentiating between the content editing area and the settings sidebar,
|
|
|
|
4
|
|
00:00:22,160 --> 00:00:29,360
|
|
creating a page and post, and lastly, using blocks, patterns, and the list view.
|
|
|
|
5
|
|
00:00:30,000 --> 00:00:37,000
|
|
The WordPress Block Editor allows you to build your site with blocks, no code required.
|
|
|
|
6
|
|
00:00:38,000 --> 00:00:43,600
|
|
As seen before, to create a post or page, log into your WordPress dashboard.
|
|
|
|
7
|
|
00:00:43,600 --> 00:00:49,200
|
|
From the dashboard, navigate to either posts or pages in the left-hand menu.
|
|
|
|
8
|
|
00:00:49,200 --> 00:00:55,400
|
|
Let's create a new page to take a closer look at the Block Editor interface.
|
|
|
|
9
|
|
00:00:55,400 --> 00:01:00,800
|
|
Once we add a new page, we can also provide a suitable title for the page.
|
|
|
|
10
|
|
00:01:03,400 --> 00:01:05,200
|
|
When you click on the Inserter,
|
|
|
|
11
|
|
00:01:05,200 --> 00:01:09,600
|
|
you will be able to add a range of different blocks to build your page.
|
|
|
|
12
|
|
00:01:09,600 --> 00:01:16,600
|
|
Blocks can be anything from paragraphs, images, columns, galleries, pricing tables, and more.
|
|
|
|
13
|
|
00:01:16,600 --> 00:01:19,600
|
|
Block Patterns is another great feature.
|
|
|
|
14
|
|
00:01:19,600 --> 00:01:26,200
|
|
These are set groups of blocks or pre-designed blocks that you can quickly add to build entire sections
|
|
|
|
15
|
|
00:01:26,200 --> 00:01:28,800
|
|
and then modify it to meet your needs.
|
|
|
|
16
|
|
00:01:28,800 --> 00:01:33,800
|
|
And on the right, next to Patterns, we can add media.
|
|
|
|
17
|
|
00:01:33,800 --> 00:01:39,800
|
|
Firstly, from our media library, or from Openverse.
|
|
|
|
18
|
|
00:01:39,800 --> 00:01:45,800
|
|
They provide openly licensed media that is available to use for free.
|
|
|
|
19
|
|
00:01:46,800 --> 00:01:49,800
|
|
There are multiple ways to add a block.
|
|
|
|
20
|
|
00:01:50,000 --> 00:01:56,000
|
|
Firstly, you can click on the Inserter top left or on the Inserter within the page.
|
|
|
|
21
|
|
00:01:56,000 --> 00:02:01,000
|
|
The six blocks that appear below Search will be your most recently used blocks.
|
|
|
|
22
|
|
00:02:01,000 --> 00:02:04,000
|
|
Or you can use the forward slash command.
|
|
|
|
23
|
|
00:02:04,000 --> 00:02:10,000
|
|
So let's say forward slash image and add an image from our media library, which I've already uploaded.
|
|
|
|
24
|
|
00:02:14,000 --> 00:02:19,000
|
|
Next, I will press Enter and then add some text to my paragraph block.
|
|
|
|
25
|
|
00:02:20,000 --> 00:02:23,000
|
|
And then add another paragraph.
|
|
|
|
26
|
|
00:02:26,000 --> 00:02:29,000
|
|
The interface is divided into three main sections.
|
|
|
|
27
|
|
00:02:29,000 --> 00:02:34,884
|
|
The content editing area, the left sidebar for selecting blocks or the list view,
|
|
|
|
28
|
|
00:02:34,884 --> 00:02:40,000
|
|
which we will talk about in a moment, and the settings sidebar on the right.
|
|
|
|
29
|
|
00:02:42,000 --> 00:02:48,410
|
|
The settings sidebar on the right provides additional settings and options for the selected block,
|
|
|
|
30
|
|
00:02:48,410 --> 00:02:52,000
|
|
allowing you to style the block further.
|
|
|
|
31
|
|
00:02:52,000 --> 00:02:55,000
|
|
Each block, of course, will have different settings available.
|
|
|
|
32
|
|
00:02:59,000 --> 00:03:06,000
|
|
When you select a block, you will also see the block toolbar related to the specific block.
|
|
|
|
33
|
|
00:03:06,000 --> 00:03:09,000
|
|
In this case, the paragraph block.
|
|
|
|
34
|
|
00:03:09,000 --> 00:03:18,921
|
|
And starting from the left, the block toolbar allows you to transform this block to a different type of block,
|
|
|
|
35
|
|
00:03:18,921 --> 00:03:26,105
|
|
drag and drop a block to a new location or use arrows to relocate a block,
|
|
|
|
36
|
|
00:03:26,105 --> 00:03:35,000
|
|
change the alignment of the text, select bold, italics, or allow you to add a link.
|
|
|
|
37
|
|
00:03:35,000 --> 00:03:42,000
|
|
The dropdown arrow allows highlighting, adding footnotes and other styling options.
|
|
|
|
38
|
|
00:03:42,000 --> 00:03:48,000
|
|
And when you click on the three vertical dots, you will see more options.
|
|
|
|
39
|
|
00:03:49,000 --> 00:03:53,000
|
|
Next, it is also important to highlight the list view.
|
|
|
|
40
|
|
00:03:53,000 --> 00:04:00,000
|
|
In this example, you will notice that I have built an entire page using a variety of blocks.
|
|
|
|
41
|
|
00:04:06,000 --> 00:04:13,000
|
|
And if we scroll up, we can open up the list view top left.
|
|
|
|
42
|
|
00:04:13,000 --> 00:04:18,000
|
|
The list view helps you navigate between layers of content and nested blocks.
|
|
|
|
43
|
|
00:04:18,000 --> 00:04:22,278
|
|
It is an indispensable feature of the WordPress editor
|
|
|
|
44
|
|
00:04:22,278 --> 00:04:25,000
|
|
that makes it easy for you to work with the blocks on your site.
|
|
|
|
45
|
|
00:04:25,000 --> 00:04:29,541
|
|
You can view the exact order and structure of every block on the page,
|
|
|
|
46
|
|
00:04:29,541 --> 00:04:33,000
|
|
which is especially helpful if you have a page with a lot of content.
|
|
|
|
47
|
|
00:04:33,000 --> 00:04:37,000
|
|
You can select blocks that have other blocks nested inside them.
|
|
|
|
48
|
|
00:04:37,000 --> 00:04:41,000
|
|
You can click and drag blocks to move them to a different part of the page.
|
|
|
|
49
|
|
00:04:41,000 --> 00:04:46,684
|
|
And when you click on the ellipsis, the three dots next to any block in the list view,
|
|
|
|
50
|
|
00:04:46,684 --> 00:04:49,000
|
|
there are a variety of helpful options.
|
|
|
|
51
|
|
00:04:50,000 --> 00:04:54,889
|
|
Let's return to our original page and continue building the page using blocks
|
|
|
|
52
|
|
00:04:54,889 --> 00:04:58,000
|
|
to see the block editor in action.
|
|
|
|
53
|
|
00:04:58,000 --> 00:05:06,000
|
|
Firstly, let's add a gallery block and then select three images from our media library.
|
|
|
|
54
|
|
00:05:12,000 --> 00:05:19,000
|
|
Once inserted, I'll select the gallery block, click on the three vertical dots and select add after.
|
|
|
|
55
|
|
00:05:19,000 --> 00:05:27,000
|
|
Then I will click on the insert top left and add a pattern, a pre-designed group of blocks.
|
|
|
|
56
|
|
00:05:29,000 --> 00:05:35,000
|
|
And I will select one of the featured patterns to schedule a visit.
|
|
|
|
57
|
|
00:05:35,000 --> 00:05:40,161
|
|
Then I will open up my list view, select the group block
|
|
|
|
58
|
|
00:05:40,161 --> 00:05:43,000
|
|
and change the alignment of the text.
|
|
|
|
59
|
|
00:05:44,000 --> 00:05:48,000
|
|
Next, let's look at the sidebar settings.
|
|
|
|
60
|
|
00:05:49,000 --> 00:05:55,000
|
|
Once we select a block, we can use the sidebar settings to style the block further.
|
|
|
|
61
|
|
00:05:55,000 --> 00:05:59,000
|
|
In this case, we can add a rounded effect to our image.
|
|
|
|
62
|
|
00:05:59,000 --> 00:06:06,000
|
|
I'll select my second paragraph and use the block toolbar to change the text to bold.
|
|
|
|
63
|
|
00:06:09,000 --> 00:06:15,600
|
|
Then I will select my list view to ensure that I select my parent gallery block
|
|
|
|
64
|
|
00:06:15,600 --> 00:06:20,000
|
|
and in the sidebar settings, I will change it from having three columns to two.
|
|
|
|
65
|
|
00:06:22,000 --> 00:06:30,000
|
|
And then finally, I will select my buttons block and change the background color to green.
|
|
|
|
66
|
|
00:06:31,000 --> 00:06:37,000
|
|
I trust you now see how the puzzle pieces of the block editor fit together.
|
|
|
|
67
|
|
00:06:37,000 --> 00:06:44,071
|
|
Using blocks to add content, using the setting sidebar to style and edit your content
|
|
|
|
68
|
|
00:06:44,071 --> 00:06:48,000
|
|
and using the list view to navigate your content.
|
|
|
|
69
|
|
00:06:49,000 --> 00:06:54,000
|
|
Please note, you can also create and edit pages in the site editor.
|
|
|
|
70
|
|
00:06:54,000 --> 00:06:58,000
|
|
So let's make our way to parents and click on editor.
|
|
|
|
71
|
|
00:06:58,000 --> 00:07:01,000
|
|
And this will of course take us into the site editor.
|
|
|
|
72
|
|
00:07:01,000 --> 00:07:07,250
|
|
Then we can select pages and I will open up the using the block editor page
|
|
|
|
73
|
|
00:07:07,250 --> 00:07:09,000
|
|
and then select edit.
|
|
|
|
74
|
|
00:07:10,000 --> 00:07:13,780
|
|
In the site editor, we add content to the content block
|
|
|
|
75
|
|
00:07:13,780 --> 00:07:19,000
|
|
and then it works exactly the same and we can keep building our page using blocks.
|
|
|
|
76
|
|
00:07:19,000 --> 00:07:23,000
|
|
In this case, I will add an embed YouTube block.
|
|
|
|
77
|
|
00:07:23,000 --> 00:07:28,000
|
|
Add my URL and then embed the video into my page.
|
|
|
|
78
|
|
00:07:31,000 --> 00:07:37,000
|
|
To end off, creating a post is exactly the same as creating a page.
|
|
|
|
79
|
|
00:07:37,000 --> 00:07:41,000
|
|
We use blocks to build the structure of our content.
|
|
|
|
80
|
|
00:07:41,000 --> 00:07:48,000
|
|
And please note, we cover adding categories, tags and a featured image in a different lesson.
|
|
|
|
81
|
|
00:07:49,000 --> 00:07:53,400
|
|
I trust you now have a better understanding of navigating the block editor
|
|
|
|
82
|
|
00:07:53,400 --> 00:08:00,000
|
|
as well as using blocks, the setting sidebar and the list view.
|
