WordPress Full Site Editing: An In-Depth Guide (2024)

WordPress 5.8 first teased full site editing with the template editor. And now, the latest version delivers a complete experience of this significant update.

FSE brought visual editing capabilities and user-friendly features, making working on different parts of your site easier. It lets users easily adjust their website design and layout using a graphic interface, making WordPress feel almost like a user-friendly page builder.

In this blog, I’ll guide you through everything you need to know about WordPress full site editing and show you how to use it to make site changes.

Let’s get started…

Before we look at all the latest changes introduced with full-site editing, let’s take a moment to understand what WordPress full site editing is all about.

What Is WordPress Full Site Editing?

Full site editing is a set of new WordPress features focusing on using blocks for all parts of a website, not just the content area.

It lets you effortlessly create page layouts, design site headers, and reuse block patterns. The new blocks cover essential elements like the site title, featured image, comments form, and user login/logout.

You can style blocks using site-wide defaults, adjust them individually in the editor, or configure them with the new theme.json file.

To use full site editing, update your WordPress version to the latest version, i.e., 6.4 (FSE works on 5.9 & newer versions), and activate a compatible theme, such as Twenty Twenty-Four. Once set up, you can build an entire website using the intuitive Gutenberg blocks.

Upgrade to Latest WordPress Version in 1-Click on Cloudways

Give your websites the boost they deserve with Cloudways performance-optimized WordPress hosting.

3-Days Free Trial

Advantages of WordPress Full Site Editing

Here are just some of the advantages of using full site editing for building your WordPress site:

1. Efficient Design Process

FSE streamlines design by allowing users to customize elements like the header, typography, and page templates in one place, reducing the need for constant navigation.

2. Unified Editing Experience

Unlike traditional workflows that require switching between the Customizer and Site Editor, FSE consolidates customization tools in one place. This integration enhances efficiency by eliminating the need for constant navigation between different interfaces.

3. Minimal Custom Code Dependency

The extensive customization options in FSE mean less reliance on custom code, making website design more accessible to users with varying coding expertise.

4. Block-Based Customization

Also, full site editing lets you customize your website using blocks, making customization more intuitive and visual.

5. Global Editing

Users can apply global changes across the entire website, ensuring consistency in design elements like button styling without the need to edit each element individually.

How to Access Full Site Editing on WordPress?

Full site editing is a default feature in WordPress versions 5.9 and above. If your WordPress version is older than 5.9, update it first. Then, activate an FSE theme to access full site editing.

As the image above shows, I’m using the latest version of WordPress (6.4.3) and the Twenty Twenty-Four” them.

To access full site editing, follow these steps:

• Navigate to your site’s dashboard.
• Locate “Appearance” on the left sidebar.
• Click on “Editor.

If you don’t see “Editor,” your theme doesn’t support the Site Editor. To access the latest WordPress editing features, consider switching to a supported theme.

How to Use Full Site Editing in WordPress (Step-by-Step Guide)

Now that you understand what WordPress full site editing is, let’s explore how you can use it to customize your WordPress site. Before we get started, let’s first look at the WordPress site editor’s basic requirements and key concepts.

Basic Requirements for WordPress Full Site Editing

Key Concepts in the Site Editor

How to Create a Custom WordPress Header With Full Site Editing

Customizing your site’s header is a fundamental step in establishing a unique and cohesive design. A custom header often includes elements like the site logo, title, and navigation, providing visitors with a branded and visually appealing experience.

Here’s how to create a custom header with full site editing:

1. Open the Site Editor and Edit Header

• Go to Appearance → Editor.
• Click on the Template Parts list. Now, you can either change an existing header or make a new one by clicking “Add New Template Part“

Note: In The Twenty-Four theme, you’d find “Template Parts” in “Patterns.”

2. Design Your Header Content with Blocks

• Now, use blocks like Site Logo, Site Title, and Navigation to set up your header.
• Drag these blocks and change their looks in the sidebar settings.

3. Customize Your Navigation

The Navigation block lets you handle menus on your site. To use the navigation block:

• Click on the Navigation block.

• Add new page links using the ‘+‘ add block button and enter the name, post title, or external URL.

• You can also create dropdown menus easily.

4. Save Your Header

• Once you’re satisfied with your header, save your changes by clicking the ‘Save’ button in the top right corner.

How to Customize Your Single Post Template With Full Site Editing

By default, the full site editor displays your theme’s home template. To customize the design of a specific post, follow these steps:

• Navigate to the left-hand menu and select ‘Pages.’

• Locate the desired post within the list of pages on your WordPress website.
• Click on the chosen post to initiate the customization process.
• WordPress will present a preview of the design. To make modifications, click on the small pencil icon.

• Use the full-site editor tools to adjust the layout. For instance, use the blue ‘+‘ button to add new blocks or click to select any block for customization.
• Once satisfied with the changes, click the ‘Save’ button.

• Upon visiting the updated page on your website, witness the new and customized design in action.

Managed WordPress Hosting for Faster Speed & Enhanced Performance

Host your WordPress site on a managed cloud platform to get speed & performance boosts with added security. Quick 1-click solutions to get rid of all hosting complexities.

Start Free

How to Change Global Styles in WordPress Full Site Editor

The “Styles” feature in WordPress Full Site Editor (FSE) helps you make any global design changes.

So, for example, you can improve brand consistency by adjusting the color palette, typography, and layout for a unified and professional look across all pages.

Browse “Styles” Options

• On the Styles page, you’ll find all predefined style options with different colors, typography, and layouts.
• You can access the Style Book by clicking the eye icon next to ‘Styles,’ previewing typography styles across different text blocks.

Editing Typography

• Look for the Styles sidebar in your website editing interface.
• Within the Styles sidebar, locate the option for typography or text styles.
• Find the settings for the Text element. This is where you’ll make changes that affect all text on your website.
• Once you’re in the Text element settings, you can adjust various aspects of the typography:

• Font: Choose a different font or modify the existing one.
• Size: Adjust the text size to make it larger or smaller.
• Appearance: This includes options like bold, italic, or underline, depending on your platform.
• Line Height: Set the spacing between lines of text to improve readability.

Save the changes after making adjustments. Any modifications made here will be reflected across all text-containing blocks on your website.

Customizing Color Palette

Now, let’s set the color scheme for your website. Click on ‘Colors’ within the Styles panel, where you’ll find two sections:

• Palette
• Color

First, let’s adjust the overall color palette of your website. In the WordPress Full Site Editor’s Styles panel, click ‘Colors,’ and you’ll find the ‘Palette’ section.

Here, you can customize the Theme, Default, and Custom colors.

Theme Colors:

• These colors affect the overall color scheme of your entire website. Modify them to establish a cohesive and branded look.

Default Colors:

• These colors specifically impact blocks with color settings. Note that not all themes may include this feature.

Custom Colors:

• Add your unique colors to the theme by clicking the ‘+ Add color’ button. Use the color picker tool to choose your preferred color.

If you need to change any of these colors, simply select a color and use the color picker tool to switch to a different option.

Now, let’s explore the ‘Gradient‘ tab to add dynamic color variations.

Gradient Colors:

• Click on the ‘Gradient’ tab in the Styles panel to access gradient options.
• The Theme section offers pre-defined gradient options, while the Default section allows you to customize block gradients.
• To create a custom gradient, click ‘+ Add color,’ choose Linear or Radial gradient type, and adjust the gradient’s direction by changing the Angle.
• You can add more colors to the gradient mix by clicking on a spot in the slider and selecting a color with the color picker.

Next, let’s customize specific color settings for different elements on your website.

Text, Background, Link, Captions, Button, and Heading Colors:

• In the ‘Colors’ tab, select the element you want to customize (e.g., Text, Background, Link, Captions, Button, Heading).
• Choose a Solid or Gradient color to change the color of that element.
• Use the color picker tool to select your desired color.

Remember to preview the changes and ensure your chosen colors create a visually appealing and harmonious design. Lastly, simply hit save, and you’ll be good to go.

There’s a lot more you can do when it comes to customizing your WordPress site with full site editing. Explore more options and preview live changes to see your changes in real-time.

How to Build Themes Using the Full Site Editor

Building themes with the full site editor has become easier than ever before. Using different blocks and patterns in the site editor, you can create layouts of your choice.

Once you have finalized your design, for example, the edits we made earlier,  you can export it as a .zip file.

Follow the steps below to edit and export your theme.

• Go to your WordPress Dashboard
• Click Appearance > Editor
• Edit the theme as per your needs
• Click the three vertical dots on the top right side of your screen
• Click Export to export your theme as a zipped file

Note: The zipped file contains a theme folder and two subfolders named templates and parts.

Instant Speed & Performance Boosts with Fastest WordPress Hosting

Cloudways’ managed WordPress hosting is specially optimized to break you free from annoying loading times and performance issues. Try it free today, and experience the magic yourself.

3-Days Free Trial

What Does the WordPress Community Think of FSE?

This major update comprises some big changes, as you can see. We contacted various WordPress experts to get their opinions on full site editing, and here’s what they have to say:

Robert Jacobi – Director, WordPress at Cloudways

Since the launch of Gutenberg, there has been a steady improvement in abstracting the complexities of web development. More and more users can now easily jump into WordPress to create and publish amazing content. The culmination of this attention to user experience is Full Site Editing (FSE). As long last FSE has been launched as part of core WordPress.

I’ve been experimenting with FSE during betas, release candidates, and now “final” FSE. Why “final” in quotes, because this is just the first step that will allow theme providers and other plugins to grow a whole new FSE ecosystem.

As for my initial experiences, on the whole, FSE is an amazing upgrade to the blocks we have been used to for the last few years. Being able to manage the components of a theme without a typical page builder has been a liberating experience. Switching themes, for the most part, works as expected, and your work with one of them can cross over surprisingly well.

But not always, as with many features that are in their first release, there is the occasional pulling of hair and hiccups. Block spaces don’t always clear and can make the editing experience confusing even though everything works as expected on the front end. Of course, these issues will steadily decrease, and more robust functionality will follow.

While there may be concerns about how this ease of use will affect developers, I feel the concern is overstated. Technology must strive to be more connected to how most humans work and understand technology. This abstraction of basic functionality is expected and needed. Third-party providers will absolutely find ways to embrace and extend this first step.

Milana Cap – XWP Expert

Not sure if I should be called an expert, but I always have an opinion.

I think it’s about time for the broader community to realize that Gutenberg and FSE are here to stay. All of the huffing and puffing in the world will not change that fact or help you achieve your goals.

We have passed the point of “who asked me if I’m OK with this and who gets to decide about what gets adopted to the core and why.” Now it’s just about your own survival in a WordPress business world.

On the other hand, if all of us try to figure out how to use Gutenberg (it’s not too late, it’s still in beta) and learn how to implement the advantages it offers under appropriate settings (because it’s still not mandatory to use in all occasions, not yet at least) there will be multiple benefits:

• Some bugs and flaws will reveal themselves sooner and get fixed
• The list of the desirable functionalities will be compiled sooner
• The documentation process will get speedy
• Quality courses and other content will get out sooner
• All of us will be ready for the FSE transition on time
• We will not repeat the mistake we made with Gutenberg by being unprepared for the launch

Also, in retrospect, Gutenberg was the first case in the history of open source where PHP and React got bundled up in one CMS. And a CMS which runs 40% of the whole of the internet, to be precise.

If anyone expected such a huge task to go down without any mishaps, I would like to remind you how smoothly your last attempt at combining PHP and Javascript went down.

Aleksandar Predic – Technical Consultant: Blexr | WordPress Expert

I was asked to rewrite the entire code for a huge website in the past. I realized the following points while working on the task:

• Gutenberg is stable enough to be used without any significant challenges
• I found almost everything I needed to complete the task in the documentation (bravo to the documentation team) or digging through the Gutenberg code
• The site performance results were top tier, and Gutenberg contributed to that result by engaging fewer scripts

Block patterns are fantastic. Really useful. Instead of developing black by blood from the list that the content team compiled, I saved the patterns in a file, ready to be used. This has saved me tons of development hours and maintenance hours. Block patterns are something the core team maintains, not the developers.

Additionally, the patterns let you develop complex designs in modules, which you can later put together with block patterns. This is particularly important because it simplifies the modules (individual blocks) and reduces the number of potential bugs, thus making the modules easier for testing and maintenance.

I also worked on a hybrid design for a review template page. The requirements were set up so that 4 different sections in the backend were needed to add the planned content. The layout included 4 different content tabs with entirely different types of content.

I researched potential ways of implementing FSE in the execution of the tasks. However, I could not execute my idea because, at that time, the infrastructure was not ready for FSE, and the documentation was not completed.

FSE would be an ideal solution for that particular case. Without FSE, I had to construct a hybrid solution using blocks in one admin content section. Gutenberg helped out a lot because, in the end, I managed to get a workflow where the user could fill out the entire page with the data REST API had gathered, all with one click.

As a developer, I see instances where FSE would not be ideal. Many companies are not excited about the fact that one user (a content editor, for example) can click through the website and edit every component, thus negating a lot of work done by the design and the development team.

Companies with virtual assistants that have no technical education are especially exposed to the ‘a few clients until catastrophe strikes’ issues. Such companies prefer to have the biggest chunk of the website coded and not in the website’s database.

A quick summary: FSE is awesome. It makes the work easier. The current wp theme concept is changing in front of our eyes. Clients are getting more freedom. But the need for old-school development will always be present because FSE is not for everyone.

A little disclaimer at the end: this is just my current opinion, based on a few times I played with FSE.

Nikola Štulić – Certified WordPress Expert Developer at Codeable

The long-awaited Full Site Editing feature is finally here. This opens up many new opportunities because now we will be able to provide a better editing experience for site owners who like to publish new or edit existing things without our help.

Many developers (including me) are always skeptical of “radical” changes, mainly when customers can ruin something we’ve built for days, weeks, or even months.

FSE allows editors to control styles, header, footer, or sidebars. We still need to see the final outcome, but at the moment, FSE is more than a good feature.

It opens an entirely new way to moving forward. I firmly believe that WordPress will grow bigger with this new feature because new users will come, those who love the DIY approach.

Nick Diego – Developer Advocate | WP Engine

Admittedly I am biased, but Full Site Editing (FSE) is the most exciting thing to come to WordPress in the last decade aside from the Block Editor itself. FSE promises a virtually no-code solution with the power and flexibility of WordPress. With a bit of training, a user with no knowledge of web development can choose a block-based theme and set up their entire website from a single interface. Simply magic!

Now it’s important to remember that FSE is a collection of features, including the Site Editor, theme blocks, template editing, global styles, and more. WordPress 5.9 was just the initial debut of this feature suite. Many iterations are planned with additional enhancements and fine-tuning yet to be done.

At this time, I encourage every WordPress developer to begin exploring block-based themes and block development if you haven’t already. Use the Gutenberg plugin alongside any new projects because it includes all the latest FSE features and is a preview of WordPress 6.0. You may find issues and bugs. You may even find development decisions that you disagree with. That’s ok!

One of the beauties of WordPress is its flexibility. Many FSE features are opt-in, but not all. This has been a sticking point, especially for agencies, and more controls are planned for the future. There have also been community concerns surrounding accessibility, user permissions, and more. These concerns are valid and need to be addressed. We must be candid about any shortcomings so that improvement can be made.

If you do find issues, I implore you to open an issue on GitHub or reach out to me and another Developer Advocates in the WordPress space. We are passionate about making WordPress the best it can be for all users.

I firmly believe that FSE is the future of WordPress, but we have only just begun this exciting journey. If you are looking to learn more, check out WordPress Social Learning for weekly educational sessions, many of which are centered around FSE topics. I hope to see you.

Final Thoughts

That’s all! We hope this beginner’s guide has made it easier for you to understand and use WordPress Full Site Editing (FSE).

Full site editing saves you from dealing with the coding complexities, as everything is managed via blocks.

In this guide, we covered why FSE is useful, how to access it, and the basics of getting started. We explored creating custom headers, customizing a single post, and making changes to globals.

If you have any questions, feel free to drop them in the comments section.