Complete WordPress Site Editing: Everything You Need to Know in 2023

Full WordPress Site Editing (FSE) has changed how users can customize their websites. It has introduced a plethora of new features to make website design more accessible and efficient. However, you may feel a little overwhelmed by all the different components of this new editor.

Luckily, if you’re already familiar with the block editor, you’ll find the new site editor pretty easy to use. Once you get the hang of it, you can start creating layouts and reusable templates to save time and effort.

🔎 In this post we take a closer look WordPress full site editing and its benefits. Then we’ll discuss five main features of this new editor and show you how to use them. Let’s begin!

An overview of full WordPress site editing

Full Site Editing (FSE) is a comprehensive feature introduced with WordPress 5.9. It includes various tools to simplify the design process for website owners. This includes the site editor, which works similarly to the block editor (aka the Gutenberg editor).

The site editor allows you to create and customize layouts with blocks. You can also edit and create templates and make design changes to your theme.

💡 The idea of ​​FSE is to allow website owners to customize every area of ​​their websites from one place. This feature also introduces new blocks and customization options, minimizing the need for third-party plugins or additional code.

The benefits of full page editing

Full site editing can help speed up your design process. You can customize various elements of your website, including the header, typography, and page templates, all from the same place.

This facility means you don’t have to switch between the customizer and the site editor to make changes to your website. Additionally, given the number of customization options available, you may no longer need to add custom code to your theme files.

👉 FSE allows you to fully customize your website using blocks. You can also apply global changes to your site.

For example, you can customize a button’s design and apply those changes to all buttons on your site. This way you don’t have to edit the elements individually. Overall, FSE can speed up and simplify your website design process.

How to Use WordPress Full Site Editing (5 Main Features)

As we have seen, WordPress Full Site Editing can help you save time and effort in designing your website. You don’t even have to touch a line of code!

Now let’s look at five of the main features of FSE and how to use them. 😎

📚 Table of contents:

1. Choose a block theme
2. Experiment with templates and template parts
3. Use global styles
4. Discover new subject blocks
5. Use block patterns

1. Choose a block theme

It is important to note that FSE only works with block-based themes. This means you may need to change your current theme to access the new editor.

Since FSE is a fairly new feature, there isn’t a huge range of block-based themes yet. The first one created is Twenty Twenty-Two which we will use for this tutorial:

To search for block-based themes, you can browse the Full website editing filter at WordPress.org:

As the name suggests, block themes are made up of individual blocks. For example, elements like page titles, menus, logos, and buttons are blocks that can be moved and adjusted on the page.

Note that you cannot access FSE until you have a block-based theme on your site. Once you activate your block theme, the old customizer will be replaced with the new site editor.

2. Experiment with templates and template parts

To get started with FSE, navigate to Appearance → Editor in your WordPress dashboard. This will launch the new site editor:

By default, the editor calls the home page. However, you can edit various page templates and template parts.

Page templates are layouts available with your theme. This can include your archive page, a single post, the 404 page, and more.

Template parts, on the other hand, are elements that you can use in your page templates. This usually includes your header and footer sections.

You can access your templates and template parts from the same place. In the site editor, click the WordPress Logo in the upper-left corner, and then select templates:

Here you will see a list of available templates for your theme. If you click on one of them (ex. 404), you will be taken to the site editor where you can customize your template:

All you have to do is select a block and adjust it using the settings on the right:

You can also add new blocks to your template. When you’re done, click Save on computer.

To view your template parts, go back to editor menu and select template parts:

You can then select an item to edit, e.g headers:

As you can see, you can customize individual components of the template part. For example, if you edit the header, you can change the page title, customize the menu, and more:

You can also create a new template or template part. All you have to do is go back to the editor menu and select the Add new button in the top right corner.

For example, let’s create one front page Template to replace the current homepage:

You can also create new template parts for your header and footer:

You can then create your template from scratch or use the available block patterns (which we cover later in this post).

3. Use global styles

Another useful feature of FSE is global styles. This setting gives you more control over the appearance of your website.

Global styles allow you to customize the look of your theme and apply those changes to your website. Alternatively, you can apply the styling to a specific page or element only.

For example, you can style a specific button on your page, edit all buttons on that page, or apply tweaks to all buttons on your site.

As you can see, this feature can save you a lot of time. If you want to edit the color or typography of an element that’s used across multiple pages, you can easily make those changes from one place. Then they will be applied to that element wherever it appears on your website.

First, open a template in the site editor and click on the styles Icon in the upper right corner:

This opens the styles Panel where you’ll see options to customize typography, colors, and layout. For example when you click Colours, You can change the palette of your theme:

You can also customize the color of the background, text, and links. These changes will be applied to all your pages, not just the current template.

In addition, you can customize the appearance of specific blocks across the site:

For example, if you select the Button Block allows you to customize typography, colors and layout of this element:

There are several other blocks that you can apply global styles to. This includes headlines, social icons, navigation, post excerpts, and other elements.

4. Discover new subject blocks

As we have seen, the new site editor is very similar to the block editor. It includes blocks that you are already familiar with and likely use on a regular basis.

However, Full Site Editing has introduced a group of new elements known as Theme Blocks. This includes Navigation, Site Logo, Site Title, and Site Tagline Blocks, which you’ll likely use in your headers.

Let’s look at some other interesting blocks of topics. We’ll use those archive Template.

When you click the plus (+) icon near the top left corner, you will see a box with a list of available blocks. Scroll down until you find it Theme Blocks:

One of these blocks is the query loop:

This element is an essential feature on any archive page as it allows you to view posts by various parameters. For example, if you want to have a category page on your blog, you should display a list of relevant posts.

In the block settings on the right you can change the colors of the query loop and the breadth of its elements. You might also notice that the query loop contains other subject blocks, such as post excerpt and By date:

You can click on these blocks to access their settings and customization options. Note that you don’t have to edit every instance of this block on your page.

For example, if you change the format of the post data, that change will apply to all By date block within the query loop.

5. Use block patterns

Finally we have block patterns. These are pre-made designs that you can customize to suit your needs.

To access these designs, just click the plus (+) icon in the site editor and select sample. You can then choose a type of design, e.g. B. Headers, buttons, galleries or entire pages:

For example, you can choose a pricing table for your homepage:

You can then click on each element in the block pattern to edit its text and appearance. There are also blocking patterns for feature posts, subscriber callouts, calls-to-action, and more.

Start full WordPress site editing today

In this post, we looked at five main ways to use FSE:

1. Choose a block theme like Twenty Twenty-Two.
2. Experiment with available templates and template parts, or create your own.
3. Use global styles to apply changes across the site.
4. Discover new subject blocks, such as query loop.
5. Use block patterns for calls to action, pricing tables, headlines, and more.

If you want to learn more about the Gutenberg project in general, read our Introduction to Gutenberg or our Guide to Gutenberg Blocks.