What is WordPress full-site editing? Multi-picture demonstration and in-depth explanation!
The WordPress full-site editing function is now turned on by default. When you install the new WordPress, you will find that the appearance of the background has been adjusted a lot, and you can’t even find the widget entry. This is because the default theme that comes with WordPress is already a block theme, no longer a traditional classic theme.
So how much do you know about WordPress full-site editing (now also called site editing)? Today, WordPress University reposted an ultra-detailed tutorial from Smashing. Let’s take a look!
Full-Site Editing is one of the main improvements added to the 5.9 version of WordPress. It allows users to make comprehensive changes to their website design and layout through a graphical interface, bringing WordPress closer to the experience of a page builder. In addition, it provides new ways to create and customize themes.
These drastic changes have a big impact not only on the WordPress user experience, but on large parts of the platform ecosystem. For this reason, in this article, I intend to explore in depthWordPress Editor(or abbreviatedFSE)。
Below, I will first introduce what full-site editing is and provide a tutorial on how to use it to make changes to your website. I will also review the tools it provides for theme development and discuss how the arrival of this feature will affect developers, theme authors, and existing page builder plug-ins.
Let’s get started.
description: Although FSE was first added to WordPress in version 5.9, WordPress 6.0 has since further enhanced it. This article includes the latest changes.
article directories
What is WordPress full-site editing?
In short, site-site editing means that WordPress can now create and edit page templates and elements, such as headers and footers, in a block-based graphical user interface.

This is part of the second phase of the Gutenberg project and the initial climax of development that began with the introduction of the WordPress block editor in WordPress 5.0. Since its original release, block workflows have been expanded to other parts of the WordPress user interface. For example, you can now also use it for widget management.

One of the main goals of site-site editing is to provide users with a single workflow to make changes to their WordPress website. In the past, you often needed to understand several different systems to create new menus, compose pages or publish content, fill sidebars, or adjust color schemes. More complex changes require you to know how to edit page template files or write CSS. With full-site editing, you can now make changes to everything in almost the same way (even though most of the changes still occur in different menus).
For daily users, the benefit is reduced reliance on front-end developers. Website owners can now do many things themselves that in the past required technical stamps or professional help, such as changing page templates. In addition, these changes can now be seen immediately in the editor without having to switch back and forth between the front and back ends of the site or even code files.
At the same time, site-site editing makes it easier for theme developers and designers to create markup and allows templates to be made faster.
main features
The following are the main components of the entire station’s editing:
- Page templates and template sections
The core appeal is two new editor interfaces that allow you to customize page layouts similar to normal content editors. You can move page elements around, change their design (colors, fonts, alignment, etc.), and add or remove them at will. The same is true for individual template sections such as headers and footers. You can even edit them individually. Alternatively, you can export your templates to use and distribute them as themes. - Global styles and
theme.json
A common feature in the WordPress page builder plug-in, site-wide editing allows you to define global styles, such as colors and layout, for the entire site in one central location. In the past, you had to change styles in different places (for example, customizers and block editors). FSE also introduced thistheme.json
File, which serves as a link between different APIs and contains most of the style information in block-based themes. - Model blocks and block models
Full-Site Editing adds new block types to WordPress and WordPress editors. These include static blocks such as site logos, as well as dynamic elements such as navigation blocks, post titles and featured pictures. These change based on settings elsewhere. There is even a fully fledged query block, which is basically a WordPress PHP loop. It allows you to display a list of posts anywhere on the page. Each block also comes with its own design and configuration options.
Sounds exciting? Then let’s explore in depth how to actually use this new WordPress feature.
How to use full-site editing to customize WordPress
Next, I will first introduce how to use full-site editing as a user. Later, we will also look at what makes it a useful feature for developers and theme designers.
Prerequisites for using FSE
In order to take advantage of full-site editing, the most important thing is that you have a WordPress website that runs at least version 5.9. You can also use a lower version, but you need to install the Gutenberg plug-in and keep it up to date.
The second thing you need is a block theme. This is a theme that can take advantage of new features. We will discuss how these themes differ from classic themes later. Currently, a good choice is Twenty-Twenty-Two, which is also launched with WordPress 5.9. I will use it in this full-site editing tutorial. For additional options, see the Resources section at the end.
Finally, if this is your first time trying WordPress full-site editing, I recommend using a temporary site or a local development environment. That way, you can make all the mistakes you want without anyone knowing.
user interface overview
When you log in to your test site, you can check in the appearance editorAccess site-wide editing (also note that widgets and customizer options are missing).

Another method is to manage the “Edit Site link.Both will put you in the main editor interface.

Let’s take a look at all the options available here:
- Upper left corner:Let’s start here, because it’s easy to ignore. Clicking on the WordPress logo opens a menu for editing templates and template sections. It also has a link back to the WordPress dashboard.
- Top column:This should seem familiar to anyone who has used the Gutenberg Editor before. It contains options to add blocks and block modes, switch between editing and selecting blocks, and undo/redo buttons. You can also open the list view of the current page, select different template parts, and then jump directly to them.
- Upper right corner:Contains buttons for saving changes and previewing designs on different screen size. The gear icon opens the entire template and settings for each block. In addition, this is an option to customize global styles. The three-point icon contains display options for the editor, the ability to export templates and template parts, and access to the Welcome Guide.
- Center:In the middle is the main editing screen. You can change page templates and use blocks here. It is also an accurate representation of the look and feel of your design and contains controls for adding blocks and other elements to the page.
Most of them are switchable, so you can only open the options you really need and want.
Global style presets
As mentioned above, you can access this menu by clicking on the half-black and half-white circle in the upper right corner. It offers two types of style options: for the entire site and for individual blocks. What is available here depends on your theme.

For Twenty-Two, you can choose typography, colors and layout. We will discuss the following. Now let’s turn to the most exciting part of the global styles menu-the preset color theme.Click Browse StyleYou can find them.

From this menu, developers can provide style presets for the entire theme. Hover over one of the options to view a preview of its color and font scheme, and then click to take on the look of the entire theme.

I really like this feature because it provides users with different versions of the same theme that they can easily use as a starting point for their own creations. It’s a bit like publishing themes with their own subthemes. You can also click on the top three points and selectReset to defaultsReturn to previous state.

Global Style: Typography
when you click onTypographyWhen, you enter a submenu where you can choose whether to customize the style of general text or links.

Click again and you will go to a section where you can make actual changes.

As you can see, you can customize the font family, size, line height, and appearance, that is, font weight and tilt. The options here also depend on the theme. For example, inFont familyNext, you can only chooseSystem FontandSource Serif Pro, because these are the only options that come with Twenty-Two.

However, this is also because full support for (local) web fonts is only available in WordPress 6.0, and this theme appeared before.
Again,sizeThe numbers under represent the default values set by the theme author. You can also choose to set custom values by clicking the small icon in the upper right corner.

row heightIt should be self-evident.appearanceThe drop-down menu allows you to select a font variant from a list.

If you select any of these options, the changes will be automatically visible on the edit screen.

If you don’t like the changes you made, you can reset to the default values at any time, as described above.
Global colors and layout
inColorsNext, you can change the tone of different elements (er!).

What’s interesting here ispaletteOptions where themes can provide their own color palettes, including gradients. This does not include the default options provided by Gutenberg and the custom colors that users can create.

In addition, just like typography, themes provide different options for elements whose colors can be changed. In 222 Middle School, this isbackground、textandlink。
After selecting any of these, you will move to a screen where you can easily select a color or gradient from available options or create your own color or gradient. When you do this, your choices automatically translate into what you see on the edit screen.

There is even a color selector that lets you set custom hues or enter color codes in RGB, HSL or HEX formats.

Finally, in this theme,layoutOptions only allow you to add padding around the home page.

Change the style of individual blocks
Style defaults not only apply to the entire site, but you can also set them for individual blocks. To do this, you can find an option in Global Styles at the bottomBlocks。

When you click it, you will find a list of all WordPress default blocks.

Click on them in turn to find similar options to customize their design on a per-block basis. For example, below, I set the link color globally to blue, but I set the link color to bluepost titleThe color of the block (which is also a link) is set to orange. As a result, orange overrides the initial value, and the title appears in that color.

If you have ever used CSS, you should be familiar with this principle. Set up some site-wide standards at the top of the style sheet, and then override them with customizations in the cascade. It’s the same here.
moving block
Change the layout in the same way as in the main WordPress block editor. Everything you see on the screen is made up of blocks. Some may be combined into groups or block patterns, but they are still blocks.
So you can move and customize them as needed. For example, the main part of the home page isquery loopBlock, whose function is to provide the latest blog posts. However, it is also composed of different blocks, namelyPost Title、Post Featured Image、Post Excerpt、Post Date、SpacerandPagination。

If you want to change its appearance, you can easily do it. For example, you can click “Featured pictures of the article “Block, and then use the arrows in the toolbar to move it below or above the post title.

Alternatively, hover over the block and use theDragButtons (which look like six dots) move it to another position. if youSaveClick after that and it will translate into a design on your website.
Use Block Options
In addition to being able to move them around, each block also has its own settings. Just like in the Gutenberg Content Editor, you can access this content through the gear icon in the upper right corner. After selecting a block, you will see its customization options here.

What is available in this place depends on the block you are using. For example:
- Article Featured pictures: Options to add margins, fill, and configure image size.
- paging: Controls the alignment and direction of its elements, line wrapping, color, and whether arrows, chevrons, or no indicators are displayed.
- article title: In addition to setting the color, you can also decide whether the title is a link, open in a new tab, or have a
rel=
Attributes. You can also control color and typography (including usingTitle Caseability) and add margins.
You get the point. Please note that more settings are often hidden and you can access them through the plus sign or three-dot icons in each section.

In addition, when a block is selected, there are settings in the toolbar at the top of the block. You shouldn’t forget that because they can be decisive. For example, inarticle titleBlock, you can determine the title order (h1-h6) in it, which is an important factor in SEO.

Add and remove blocks
Of course, you can not only customize the available blocks, but you can also add your own blocks. This works the same way as in the content editor, with different options:
- Hover the mouse over the blank space in the template until the plus button appears, and then click it. Then search or select what you want from the block list.
- Click the existing block and use the Options button in the top column to selectInsert beforeandInsert after。
- Use the plus button in the upper left corner to view and search for a complete list of available blocks, then drag and drop them where you want them.

In some places and in existing blocks, you will also find icons for adding more blocks. In addition, you can add block patterns, but we will discuss them further below.
Leaving questions, what’s the use of that?
Well, this means you can easily add static and dynamic content to your home page.For example, query loopsThe title and paragraph above the block serve as an introduction to your blog.

Of course, you can also easily delete unwanted blocks. Just select one and click on theDelorbackspacebutton, or delete it through the block option.

You can also open the list view at the top (an icon with three interlaced lines) and navigate to blocks from there or choose to delete them now.

This option also gives you a comprehensive understanding of the block structure of any part of the site you are currently editing.
Exchange and edit template parts
Template parts are entire parts within a template that you can exchange as a whole and modify individually. In the case of Twenty-Twenty, that is, headers and footers. You can see it in the template options on the right or when you click the arrow in the top column.

The template sections are just groups of blocks on the page, so you can edit them as described above. However, what’s special about them is that themes can provide variations that allow you to change entire sections with just one click.
For example, when you select a title in the example, it will display aReplacement options.

When you click it, you can see the variations the theme provides for the template section, as well as the appropriate block pattern.

Twenty-Twenty has several default options to choose from. Click any of them, and the entire title will automatically be replaced by the new option for the entire title.

The same goes for footers, of which Twenty-Two also provides some.

Customize and create template parts
To edit the template section separately, click the WordPress logo in the upper left corner to open the following menu.

At the bottom, you’ll find a file calledTemplate Partsmenu items for. Click it to view a list of all available template parts on your site.

Alternatively, you can select a template part and select it from its options to edit.

In “Template parts “In the menu, click the “add newPart “to create other parts. For example, this would be useful if you wanted to make another version of the footer. What’s cool is that when you click on it, in addition to asking for the name, WordPress automatically provides you with header and footer templates, so you don’t have to start from scratch (unless you want to).

In addition, you can also click an existing part in the list to edit it. This works the same way as in the main editor. The only difference between the template parts is that you have handles on the left and right sides that you can use to reduce and increase the size to check their behavior on a smaller screen, i.e. mobile device.

Just like template files, anything you change and save here will be transformed into all pages and templates that use that section.
Finally, if you set up a set of blocks on the home screen, you can also turn them into template parts. Click options on the Home screen or List view, and selectMake template part。

You need to name it and select the area it belongs to. When you save it, it can be used as a template part.
Edit page template
In the WordPress logo menu, there is also a name calledTemplatesproject. Not surprisingly, it contains a list of all page templates available on your site, from 404 pages to archives and single pages to single articles.

Page templates are usually files that control the basic layout of different types of content. If you change the template, everything for that type changes as well. Using site editing, you can edit existing templates and create your own in the user interface, rather than a code editor.
However, please note that the FSE only allows you to passAdd NewCreate standard page templates. There will be more soon.

What is particularly convenient here (and in the template section) is the block template. These are pre-designed layouts made up of several blocks that you can add to your website pages to create the entire section immediately. Examples include newsletter registration forms, pricing tables, and activity lists, but also simple things such as style dividers or images with quotes or titles.

Templates allow you to quickly assemble the entire design. They are also easy to use! When editing a template, just click the plus sign in the upper left corner and go to “Model “Tab.

Filter patterns through the drop-down menu at the top, for example, by pressing a feature template, footer, page, or button. If you find something you like, just drag and drop it onto the page. You can also search for specific content, such as the “title” at the top, which will even display blocks from the WordPress Block catalog.
For a better overview, clickExploreTo access the Block Template Explorer.

This displays block templates in a larger window and enables them to search and filter on the left. Clicking on your favorite template automatically adds it to the template editor, where you can locate and customize it as usual.

By the way, you can click on “Templates“menu and select Clear all customizations you have made for each template.

Add a new block pattern
In addition to using available ones, you can also add external block templates from the template catalog.

Search and filter your needs. If you find something you like, just useCopy PatternA button on the patterned page can place it on your website.

After that, go back to the Full-Site Editing editor and paste it. The template will then be displayed there.

If you like it and may want to use it again, click the three points in the options bar and selectAdd to Reusable blocks。

So, from now on, it will beReusableAvailable in the Block menu under.

Use a stand-alone template editor
There is also a second method of editing and creating page templates, which occurs in the ordinary Gutenberg content editor. It provides a less complex interface than a site editor (for example, no access to other templates), but works in a similar way.
Just create a new post or page, and then in the document settings sidebar, findTemplates below Status and VisibilityPanel.

Here, it lists your current template and provides additional options in the drop-down menu.You can editbutton to edit existing content, or select“New”Create a new template. Each opens up a more limited template editing experience.

Edit and save the template in the same way as in the site editor. Any content you create in this way will also appear in the template list in the entire station editor.

Blocks that can be used for templates
To make templates in FSE possible, developers have added many dynamic blocks that can extract content from the database based on the following:
- Site titles, slogans and logos;
- Post title, featured pictures, content, excerpt, author, avatar, author biography, date, tags, category, next and previous article, read more;
- Post a comment, single comment, comment query cycle, author, date, content, count, comment form, link;
- File title and terminology description;
- Query loop, post list, post template, paging;
- Template section.
These can also be used in regular WordPress editors. There will be more content in future releases that you can access as early as possible through the Gutenberg plug-in.
Preview and save changes
After you have made all the changes you need, you can choose to change the changes by clicking on thepreviewPreview them in different screen size.

If you are satisfied, clickSaveThe changes will be made permanent. WordPress will also list which templates and template parts your changes will affect.

This way, if you want to discard them in one place and put them elsewhere, you can do so. Just deselect those components for which you don’t want to save changes. click againSave, your choices will translate into the front end of your website.

Site-wide editing for developers and designers
Site-wide editing is also a useful tool for developers. You can use this interface to create templates and then export them as files to add to themes and publish as themes.
A quick start to block theme architecture
To take advantage of this, you need to note that the FSE-ready block theme has a different architecture than the classic WordPress theme. First of all, the templates and some template files edited at the site no longer contain PHP, but HTML files with block tags.

oppositestyle.css
, the style is mainly composed oftheme.json
.& nbsp; Here you can set styles for the Block Editor and individual blocks, style presets, and CSS defaults (front-end and back-end editors). In fact,theme.json
It is so powerful that by modifying it, you can change the style of the entire website.
theme.json
This also allows you to switch between different global style sets (i.e. files) in the same theme. This is a feature that only appears in WordPress 6.0.
mainly dependstheme.json
Greatly reduced CSS elsewhere. For example, twenty-twostyle.css
There are only 148 presidents. By comparison, its predecessor, Twenty Twenty1, had nearly 6,000 rows in its stylesheets.
Also,theme.json
Use a completely different token. However, you can write an entire article just about this file, so you’d better start with the documentation for details.
The minimum requirements for a block theme aretemplatesThere is one in the folderindex.php
、style.css
and aindex.html
Documents. The latter marks the theme as a WordPress block theme.
If you want to add template widgets, you will put them in apartsIn the folder. have afunctions.php
andtheme.json
Files are optional. Finally, you can also include astylesFolder.For example, this can include different color schemes for the theme.

In addition to the changed structure, you can create template files in different ways when using block themes. Although you can still do it manually, you can also use the new WordPress interface.
Create theme files using FSE or template editor
If you want to use the page editor to create a template, the first step is to simply set up your template as described in the first part of this article. An important option here is knowing that you can use part of the template blocksseniorSet to change their HTML element types.

When you are satisfied, you can download all theme files at once. this optionMore tools and optionsAvailable in the menu, which you can access by clicking on the three points in the upper right corner of the site-wide editing screen.

Here, findderivedOptions. It automatically downloads all template and template part files as zip. Just unzip them and you can use them for your theme.
Manually create a block theme template
Of course, you can also create template files manually. To do this, you just need to be familiar with block tags.
In most cases, these are just HTML comments that contain the prefix withwp:
.& nbsp; Some of them are independent. For example, here is how to add a website title bar to a template:
<!-- wp:site-title /-->
Others, such as paragraphs, function like brackets:
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.& lt;/p>
<!-- /wp:paragraph -->
you can alsoslug
.& nbsp; Calls, such as calling the footerfooter.html
As follows:
<!-- wp:template-part {"slug":"footer"} /-->
you can evendiv
bytagName
Attribute custom HTML tags (default: ):
<!-- wp:group {"tagName":"main"} -->
<!-- /wp:group -->
Here, you can also use one of the editors above to create a block, and then if you are not sure, just copy the markup. Also, if you save the file and add it to the appropriate location in the theme directory, it will also appear in the FSE editor.
For more information, see the list of resources below.
The impact of WordPress editing on the ecosystem
In addition to providing tutorials on how to use full-site editing, I also wanted to talk about what its arrival means for the WordPress environment and the people working there.
Job opportunities for developers and designers
Unsurprisingly, an important question is whether this feature will eliminate the need for professional developers and designers. Do users still need them when it seems like they can do everything themselves?
The short answer is “yes”.
The emergence of WordPress itself, page builders or page builder plug-ins, or any other technology that makes it easier for laypeople to build their own websites has not eliminated the need for professional help. It won’t happen this time.
Although today, users don’t need help with every small thing, such as changing colors or fonts, there are still many tasks that non-technical website owners cannot do with available tools, and they need someone to do them. Also, if you want unique designs without relying on hundreds or thousands of templates that others may also use, you still need designers and/or developers.
In addition, powerful power also brings great opportunities to screw things up (to quote Spider-Man). Just because everyone can use tools to make a well-designed website, that doesn’t mean everyone can. Design is more than just technical capabilities.
More importantly, not everyone really wants to do this job. They would rather hire skilled people than learn from scratch. Finally, a successful website is more than just “design, such as SEO, performance, security and maintenance.
So even if there are fewer obstacles to building a website, there is no need to think that designers and developers are dying breeds. In contrast, turning to new tools provides plenty of opportunities to build services and products around them.
What does FSE mean for theme markets and theme designers?
So what about the theme creator? Is everyone going to change the theme now?
Here, the first thing to remember is that many themes have not yet switched to the Gutenberg Block Editor, and there are still many users on the Classic Editor. The latter will also continue to work for some time, as the plug-in will still be supported until at least the end of 2022.
In addition, all of the above functions are optional and not mandatory. Therefore, switching does not have to be immediate. You can even build a mixed theme that is not a complete block theme but can use block templates. This option exists by default unless you turn it off specifically.
However, in the long run, it may be a good idea to move existing themes to FSE capabilities. This is something WordPress users are likely to increasingly look forward to, as it gives them greater flexibility and ability to customize their own themes.
At the same time, as mentioned above, you can also use Full-Site Editing to create themes with less code, accelerating development time. In addition, it provides new economic opportunities. In addition to themes, theme authors can now provide extensions such as blocks and block patterns, opening up entirely new business models and opportunities.
Site-wide editing and page builder plug-in
Existing page builder plug-ins may be one of the biggest question marks. Will people like Divi, Elementor, and Co survive when WordPress can do many of the purposes they were created for?
First, it is unlikely that everyone will immediately give up the tools they are accustomed to using, so the page builder plug-in may remain for a while. In addition, many of these features are currently more powerful than Full-Site Editing in its current form. Another reason to stay as it is.
Overall, these types of plug-ins have become so mature over the past few years that they are sometimes packaged with themes. As a result, they are unlikely to suddenly lose all market share. Still, over time, full-site editing may gradually integrate into it, especially for new users who understand it as a normal part of WordPress.
Like everyone else, page builder plug-ins must continue to evolve so that they provide what the FSE cannot provide to remain competitive. One approach is to provide a hybrid plug-in to extend WordPress’s native page editor. Something similar already exists in Gutenberg and Classic Editor.
Editor at the whole station: More resources
If you want to gain a deeper understanding of WordPress’s entire site editing themes, I suggest you start with these resources:
- Block Editor Manual
The Block Editor Manual is often a good place to start anything related to the Gutenberg Editor and project. Don’t miss the primer on block themes, how they work, and how to create them in the Theme Developer Handbook. - Fullsiteediting.com
Dedicated FSE resource site and free online courses created by Carolina Nymark. It contains chapters on every part of the site editing, from basics to how to use it.theme.json
Even the entry block theme generator. In addition, it has a list of available block themes. - WordPress Theme Catalog: Block Themes
Speaking of block themes, the official WordPress directory now has a theme tag that is compatible with editor-wide. This way, you can easily find something to try out with. Keep adding more.
Final thoughts on WordPress editor-in-site
Site-wide editing is an exciting new chapter in the development of WordPress. It makes the design process across the platform simpler and more unified, providing content creators and users with new opportunities to customize pages.
At the same time, FSE presents interesting challenges for developers and theme designers. It changes the architecture of the theme and introduces new markup and workflow. However, the feature also offers rewards in terms of new opportunities, as well as a faster way to prototype and create themes that require less coding.
Above, we have detailed all the content that FSE must provide. My personal impression is that it is a well thought out feature and I am impressed by what it can already do. I definitely recommend adding it to your WordPress skill set.
Of course, there is room for improvement. For example, I couldn’t find options to change the hover or active color of links and other elements. Also, it is not as powerful as existing page builder plug-ins, but I believe the new features will close the gap in the future. However, I really like its modularity and the ability to customize different themed sections in different ways. I will definitely consider using it more in the future. What about you?
What do you think of WordPress full-site editing? How do you think it will affect users, developers and the entire WordPress world? Please share your opinions in the comments!