beginner-wordpress-user/subtitles/What is the difference between the block editor and site editor.en.srt

1
00:00:00,000 --> 00:00:02,725
We are going to try and answer the question,

2
00:00:02,725 --> 00:00:07,040
what is the difference between the block editor and the site editor?

3
00:00:07,040 --> 00:00:13,897
We will compare the block editor and the site editor as well as explore the site editor tools,

4
00:00:13,897 --> 00:00:20,020
and by the end, we'll feel confident in using both things together to create our entire site layout.

5
00:00:20,020 --> 00:00:23,260
Without further ado, let's begin.

6
00:00:23,260 --> 00:00:29,801
Site editing allows you the freedom to build every aspect of your WordPress site,

7
00:00:29,801 --> 00:00:31,831
from the header all the way down to the footer,

8
00:00:31,831 --> 00:00:35,440
using the power of blocks within the site editor feature.

9
00:00:35,440 --> 00:00:37,400
But what is the site editor?

10
00:00:37,400 --> 00:00:40,860
How does it differ from the block editor that we are used to?

11
00:00:40,860 --> 00:00:46,340
How can we use templates in the site editor to create our overall structure?

12
00:00:46,340 --> 00:00:51,580
To answer these burning questions, let's take a trip through our dashboard and compare the two.

13
00:00:52,860 --> 00:00:56,931
The block editor is the foundation of your site's content,

14
00:00:56,931 --> 00:01:00,460
and is used to add content to pages and posts.

15
00:01:00,460 --> 00:01:04,860
Let's refresh ourselves on how to add page and post content.

16
00:01:04,860 --> 00:01:10,220
In your dashboard, head to pages if you are creating a static page.

17
00:01:10,220 --> 00:01:14,770
Or go to posts for dynamic content, such as a blog post.

18
00:01:14,770 --> 00:01:21,173
When you click on add new, you will create content for that specific page or post.

19
00:01:21,173 --> 00:01:26,980
Compared to this, what does the site editor allow us to do exactly?

20
00:01:28,660 --> 00:01:33,340
The site editor allows us to edit our site cohesively.

21
00:01:33,340 --> 00:01:39,140
Pages and posts are only used to add static or dynamic content using blocks.

22
00:01:39,140 --> 00:01:42,540
On the other hand, the site editor uses blocks to create the overall look and feel of your site using templates.

23
00:01:42,540 --> 00:01:46,620
On the other hand, the site editor uses blocks to create the overall look and feel of your site using templates.

24
00:01:46,620 --> 00:01:52,660
But it also allows us to add and edit pages to ensure a seamless site editing experience.

25
00:01:53,740 --> 00:01:56,894
If you've installed a block theme like 2024, access the site editor by appearance and then click on editor.

26
00:01:56,894 --> 00:02:00,380
If you've installed a block theme like 2024, access the site editor by appearance and then click on editor.

27
00:02:02,860 --> 00:02:06,820
The site editor loads your site's front page for editing.

28
00:02:06,820 --> 00:02:09,620
On the left, there's the site view sidebar.

29
00:02:09,620 --> 00:02:12,940
This tool lets you toggle between the key parts of your site.

30
00:02:12,940 --> 00:02:16,340
Navigation, Styles, Pages, Templates and Patterns.

31
00:02:17,580 --> 00:02:19,660
Let's start with navigation.

32
00:02:19,660 --> 00:02:24,060
Here you can quickly see and tweak all your menus.

33
00:02:24,060 --> 00:02:28,020
You can rename them, rearrange menu items, etc.

34
00:02:32,940 --> 00:02:40,100
When you click on Styles, you have the ability to change the style combination of your theme.

35
00:02:43,620 --> 00:02:50,820
And when you click on Edit Styles, you can change your entire site's typography, colors and layout.

36
00:02:50,820 --> 00:02:52,719
If you look down further below, you also have the option to customize the appearance of specific blocks for your whole site.

37
00:02:52,719 --> 00:02:57,940
If you look down further below, you also have the option to customize the appearance of specific blocks for your whole site.

38
00:02:57,940 --> 00:03:03,260
To see how these blocks will change if you edit them, go to your site's style book.

39
00:03:03,260 --> 00:03:07,260
As mentioned, here you can preview any changes made.

40
00:03:13,940 --> 00:03:18,740
Below Pages, you also have the option to create and edit pages,

41
00:03:18,740 --> 00:03:21,940
the same as when you are in the dashboard.

42
00:03:22,940 --> 00:03:26,779
This feature allows you to stay in the site editor

43
00:03:26,779 --> 00:03:29,940
when editing your site or content on a page.

44
00:03:30,940 --> 00:03:36,940
When working inside a page in the site editor, we add content to the content block.

45
00:03:37,940 --> 00:03:40,940
Next, we'll make our way to Patterns.

46
00:03:41,940 --> 00:03:45,940
Below Patterns, we have access to a library of patterns.

47
00:03:47,940 --> 00:03:50,940
We will be able to create and manage our own patterns.

48
00:03:52,940 --> 00:03:55,940
We can view the patterns provided by our theme.

49
00:03:57,940 --> 00:04:00,940
And then we can also create and manage template parts.

50
00:04:00,940 --> 00:04:03,940
A quick note on template parts.

51
00:04:03,940 --> 00:04:06,485
These are reusable groups of blocks that you can use

52
00:04:06,485 --> 00:04:10,940
to create repeated parts of your template, like the header and footer.

53
00:04:11,940 --> 00:04:14,940
But now, let's focus on templates.

54
00:04:15,940 --> 00:04:19,646
When we open templates, let's take a look at the top menu

55
00:04:19,646 --> 00:04:22,940
and run through what these elements allow you to do.

56
00:04:22,940 --> 00:04:26,714
The plus icon or insertor top left allows you to add any block

57
00:04:26,714 --> 00:04:31,940
or a pattern of blocks to any template.

58
00:04:31,940 --> 00:04:35,940
Next to your insertor, you have the undo and the redo button.

59
00:04:36,940 --> 00:04:38,940
Next is the list view.

60
00:04:38,940 --> 00:04:41,009
This is a super useful tool

61
00:04:41,009 --> 00:04:43,940
that allows you to see a list of all the blocks that are on your page.

62
00:04:43,940 --> 00:04:49,940
This is great for seeing your page's structure, as well as editing, moving and removing blocks.

63
00:04:52,940 --> 00:04:56,940
In the middle at the top is the name of the template.

64
00:04:57,940 --> 00:05:00,440
When you click on the preview button,

65
00:05:00,440 --> 00:05:07,940
you will be able to see what your site will look like with the changes applied on desktop, tablet or mobile.

66
00:05:08,940 --> 00:05:12,940
And then if you click on save, you can save changes.

67
00:05:12,940 --> 00:05:20,940
Next, this settings tab lets you display or hide the template and block setting sidebar.

68
00:05:20,940 --> 00:05:27,940
So when you select the template, you can use the settings sidebar to style the block further.

69
00:05:30,940 --> 00:05:34,234
Next to the settings tab, you've got the styles tab,

70
00:05:34,234 --> 00:05:37,940
which is another place where you can access your styles settings.

71
00:05:37,940 --> 00:05:41,462
And finally, if you click on the three vertical dots,

72
00:05:41,462 --> 00:05:46,304
you've got access to more options, such as selecting the spotlight mode, etc.

73
00:05:46,304 --> 00:05:49,940
Now we've had a brief rundown of the menu options.

74
00:05:49,940 --> 00:05:51,940
Let's take a closer look at templates.

75
00:05:51,940 --> 00:05:56,940
At the top, it says express the layout of your site with templates.

76
00:05:56,940 --> 00:06:00,540
Templates use blocks in order to create the overall design of your site

77
00:06:00,540 --> 00:06:03,940
by adding a header, footer or even sidebar.

78
00:06:03,940 --> 00:06:08,940
We can see all three at play when we open the page with sidebar template.

79
00:06:08,940 --> 00:06:13,940
We can see the structure of your site by adding a header, footer or even sidebar.

80
00:06:13,940 --> 00:06:19,940
We can see the structure being provided by the header, the sidebar and the footer.

81
00:06:21,940 --> 00:06:27,940
Please also note, templates can be applied to a single page or multiple pages.

82
00:06:27,940 --> 00:06:29,755
With that in mind,

83
00:06:29,755 --> 00:06:34,940
let's say we want to add the template that's applied to our pages, for example.

84
00:06:34,940 --> 00:06:37,940
There are a few options provided by our theme here.

85
00:06:37,940 --> 00:06:43,940
For example, the default page template or the page with wide image.

86
00:06:43,940 --> 00:06:46,940
But let's choose the page with no title.

87
00:06:46,940 --> 00:06:53,940
When the template loads, you'll see an example of what this template looks like without any content.

88
00:06:53,940 --> 00:06:56,940
Here is where the list view comes in really handy.

89
00:06:56,940 --> 00:07:01,940
The sidebar on the left will show you how the blocks that make up this template are structured.

90
00:07:01,940 --> 00:07:05,940
Here you can see the components that make up this page template.

91
00:07:05,940 --> 00:07:11,940
The header is clearly marked when you click on it, as is the footer.

92
00:07:11,940 --> 00:07:16,940
In the middle, you'll see a group block that contains a post-content block within it.

93
00:07:16,940 --> 00:07:18,940
This is super important.

94
00:07:18,940 --> 00:07:23,940
The content block is what allows the content of your page or post to appear in this template.

95
00:07:23,940 --> 00:07:29,940
Think of this block as the container for whatever you wrote in your pages or posts section.

96
00:07:29,940 --> 00:07:34,940
Without a container, your page content won't have anywhere to be displayed.

97
00:07:34,940 --> 00:07:38,940
So remember, we don't add content to templates.

98
00:07:38,940 --> 00:07:43,940
We only modify our header and footer or sidebar.

99
00:07:43,940 --> 00:07:50,940
Let's go ahead and replace this header with a different header pattern that comes with our theme.

100
00:07:50,940 --> 00:07:55,182
We can scroll through the available options

101
00:07:55,182 --> 00:08:00,940
and then I will go ahead and select the centered header with logo pattern.

102
00:08:00,940 --> 00:08:08,940
And I will also select one of my existing navigation menus named Lifestyle.

103
00:08:12,940 --> 00:08:16,940
Once selected, we can go ahead and save.

104
00:08:18,940 --> 00:08:21,940
Awesome, the page template is saved.

105
00:08:21,940 --> 00:08:24,940
But how do we add this template to a page?

106
00:08:24,940 --> 00:08:31,940
For that, we can navigate back to our main dashboard and go to pages.

107
00:08:31,940 --> 00:08:35,940
Then click on the page you'd like to apply this template to.

108
00:08:35,940 --> 00:08:39,940
In your sidebar to the right, you'll see a template header.

109
00:08:39,940 --> 00:08:41,940
Go ahead and click on that.

110
00:08:41,940 --> 00:08:46,940
This drop down menu lists all of the templates you currently have saved.

111
00:08:46,940 --> 00:08:50,940
In this case, let's select page with no title.

112
00:08:50,940 --> 00:08:54,940
And then we can update.

113
00:08:54,940 --> 00:08:59,940
Here's how the page looks like with the default page template.

114
00:09:01,940 --> 00:09:05,940
And here it is with the page with no title template applied.

115
00:09:05,940 --> 00:09:09,811
You can repeat this for as many pages as you like

116
00:09:09,811 --> 00:09:11,940
and the same applies to your posts.

117
00:09:11,940 --> 00:09:16,940
As you have seen, the block editor and the site editor work hand in hand.

118
00:09:16,940 --> 00:09:21,940
The block editor only allows us to add content to pages and posts.

119
00:09:21,940 --> 00:09:26,940
But the site editor gives you the ability to edit your site cohesively.

120
00:09:26,940 --> 00:09:30,632
You can edit the look and feel, modify templates

121
00:09:30,632 --> 00:09:32,940
as well as add content to pages.