WordPress Full-Site Editing Guide for Developers and Designers (2024)

WordPress just rolled out a fresh new feature called Full-Site Editing that promises to streamline the whole development process into one intuitive workflow. In this guide, we’ll discuss how this block-based approach might benefit you. We’ll also show you how to use Full-Site Editing to modify and create page elements like headers and single-post templates.
Published: April 24, 2024
Technical Writer
AI Tools For WordPress Creators
Code, learn, troubleshoot, and secure WordPress sites with the CodeWP platform and our custom AI.
Start for Free

Full-Site Editing is one of the recent and most exciting developments in WordPress, along with the Gutenberg editor. It’s not just another incremental update or new feature – it represents a fundamental shift in how we approach web design and development with the platform.

If you haven’t tried this feature yet, then read on, as we dive a little deeper about Full Site Editing. We’ll cover how it can benefit you overall, regardless of your experience level. We’ll also walk you through using it effectively to customize your website.

What Is WordPress Full-Site Editing?

full-site editing

Full-Site Editing (or FSE) is WordPress’s block-based approach to building and designing websites. What this means is that users can easily add, rearrange, and customize web page elements similar to a page builder.

The FSE feature was the second phase of the Gutenberg project, building upon the initial introduction of the block editor. It was officially introduced in WordPress version 5.9 back in 2022, and since then, it's continued to enhance the website-building experience for users of all skill levels.

Blocks were originally used just for content creation, like writing blog posts. But with the latest updates of Full-Site Editing, blocks can now be represented as site elements like headers and footers. Basically, all the elements you see on the frontend are made of blocks.

One benefit we see with Full-Site Editing is how easy it is to manage a website. In the past, you’ll need to jump between different panels whenever you need to modify a theme or page template. This used to be confusing and intimidating, especially for WordPress newcomers. Full-Site Editing takes away this barrier by making everything accessible within the same location.

The WordPress team has been working hard to continuously improve the capabilities and user-friendliness of this feature. With each update, it becomes more powerful and accessible. This made it possible for non-technical WordPress owners to work on their websites without having to rely on experts all the time.

How FSE Differs From the Traditional Approach

Full-Site Editing introduces a lot of features that are way too different from the traditional design workflow in WordPress. These are some of the key differences we’ve noticed:

1) Block-Based Editing

Full-Site Editing uses a block-based system where each element of a webpage, like text, images, and widgets, is represented as a block. This gives you the flexibility to mix, match, and arrange page components easily. 

However, with the traditional approach, users will have to rely on templates or add custom codes to tweak elements.

2) Templates and Template Parts

Templates and template parts are two powerful features in WordPress that allow users to customize layouts like a regular content editor. You can move different elements, change attributes like colors and fonts, and add or remove an element. This also applies to individual template parts like headers and footers, which can be edited separately. 

3) Singular Workflow

Full-Site Editing grants users full control over every aspect of their website, such as creating menus or content, directly within the WordPress editor. This marks a stark contrast to the traditional approach, which often forces users to navigate disjointed settings or edit code to achieve similar customizations.

4) Real-Time Editing

One of the most satisfying aspects of Full-Site Editing is the ability to see your changes in real time, right there in the editor. You don’t need to toggle back and forth between the admin panel and your live site. This immediate feedback loop allows you to tweak layouts, colors, and other elements until you land on the perfect design. 

This level of responsiveness was sorely missing from the traditional WordPress workflow. In the old way, users had to refresh the webpage or preview the changes on the frontend on a separate tab.

5) Reduced Reliance on Themes and Plugins

With Full-Site Editing, you can customize templates and layouts using native WordPress blocks instead of relying on pre-built themes and third-party plugins. This simply means you can design your site from scratch with greater flexibility and fewer compatibility issues.

6) Unified Theme Configuration with theme.json

Rather than having style settings and customization options scattered across various locations, theme.json centralizes the default styles, APIs, and settings for blocks into a single configuration file. This consolidation simplifies the development and maintenance process. 

Note that if you don’t like touching the theme.json file, you can also modify global styles directly within the editor (which we’ll show in the next sections).

How to Use Full-Site Editing in WordPress

Now that we've looked at the benefits of Full-Site Editing, let's get into the practical side of things. In this section, we’ll show you how to use Full-Site Editing to create headers and templates, access global styles, and package your design as a shareable theme.

Basic Requirements

Before getting started with FSE, there are a few key things you'll want to have in place:

  • WordPress version 5.8 or higher: Have the latest WordPress version installed on your website. Otherwise, If you're on an older version, make sure to install the Gutenberg plugin.
  • Install a block-based theme: Block-based themes are specifically designed for Full-Site Editing. If you're not sure whether your theme is block-based, you can check with your theme provider or review the theme documentation. Some examples of block themes are Twenty Twenty-Two, Bricksy, Blockbase, Blockpress, SeedProd, and Frost.
  • Use a staging site: A staging site is a testing ground where you can safely experiment with changes without affecting your live site. If you’re using Full-Site Editing for the first time, this is the perfect place as it allows you to get comfortable with the new workflow before deploying anything.

Note: If you're unsure where to start with setting up a staging site, we’ve got a great article that reviews the best sandbox sites for WordPress. 

How to Access Full-Site Editing

From your WordPress dashboard, go to Appearance > Editor. For this example, we’ll be using the Bricksy theme.

Once inside the editor, you'll find several tools for customizing your website's elements, from colors and fonts to layouts and widgets.

On the left, you'll notice a handy sidebar with quick access to various menu options: 

  • Navigation: View and manage your site's page hierarchy. 
  • Styles: Tweak global style settings such as typography, colors, and layout.
  • Pages: Browse and customize layouts of different pages within the website.
  • Templates: Access various template options for customizing site-wide elements, such as headers and footers. 
  • Patterns: Explore pre-designed block patterns for page sections like headers, footers, and more. Available options may vary depending on the theme you’re using.
full-site editing editor menu

The main editing screen is where you'll dedicate the majority of your time to creating your templates and blocks. It serves as your canvas for creativity. Add content, adjust settings, and rearrange elements to your liking. Simply click anywhere to reveal the customization options for that specific template or block.

full-site editing main screen

Each element has its own customization settings. The settings may vary depending on the block you choose. For example, if you click on a section, you’ll have access to the layout and styling options.

full-site editing block settings

If you select the header, advanced settings like adding a CSS class, a title, an area, or an HTML element will be shown on the left panel.

WordPress header block settings

At the top center of the screen, you'll see the current page displayed. Clicking on it will open a pop-up window that provides options to duplicate, reorder, or delete elements on the page.

full-site editing current page

From here, you can also search for commands to add a new post or page, as well as access other pages within the editor.

WordPress editor search command

After configuring the settings, you can navigate to the other options located in the top right corner of the page. This area allows you to preview or save your current work. You'll also find the style option (represented by a half-black, half-white circle icon) where you can browse and adjust styles. Additionally, you can customize the blocks for your entire site from this section. 

WordPress editor right panel menu

Beside the style option, you’ll find the three-dot icon that reveals additional functionalities and settings. This includes view options, editor options, plugin settings, tools to export templates, a welcome guide, and various other features.

WordPress editor three-dot settings

Lastly, whenever you select a block on the page, a familiar floating menu bar appears. This provides you quick access to group, move, align, or edit a block. The three-dot icon offers further options like copying styles, pasting styles, and creating a template part. 

WordPress editor floating menu bar

Creating a WordPress Header 

Now, let’s try to create a WordPress header with Full-Site Editing. In the editor, click on Patterns > Manage all template parts, as shown.

full-site editing patterns

You'll be presented with a table displaying all the existing template parts on your website. You can filter the available options to show either the default theme templates or all templates, including any custom ones you've created.

WordPress template parts

You can either select an existing header template to edit or create a new one. For our purposes, let's create a fresh header by clicking on the ‘Add New Template Part.’

In the pop-up window, enter a name for your new template, select ‘Header’ from the area section, and click ‘Create.’ This will take you to the main editing screen, where you can add and customize blocks.

WordPress editor creating template parts

Once you're in the template editing mode, click on the ‘plus’ icon and select the ‘Header’ block. You should see a floating menu with options to edit the header block.

WordPress editor header block
WordPress editor edit header block

Click each element on the header block. As you do so, a floating menu will appear to give you access to the styling options. You can add a parent block, rearrange, select a color, add an image, and many others. Feel free to customize - adjust the text, font, color, and size as needed. You can also add more blocks to create a multi-component header.

WordPress editor add color

For more advanced customization options, you can explore the settings panel on the right side of the interface. Here, you'll find controls for adjusting spacing, alignment, and other layout settings.

WordPress editor layout settings

Once you're satisfied with your header design, click ‘Save.’ This will update your site with the new header design.

WordPress editor save template

Customizing a Single Post Template

Creating and customizing single post templates with Full-Site Editing is straightforward.

Once again, head to Appearance > Editor and select 'Pages' from the left menu. Choose a page you want to modify from the list. Click on the pencil icon to access the editing tools.

WordPress editor pages
WordPress editor edit page

Now, you can reshape your layout using blocks. You can add new blocks, rearrange existing ones, or modify the style to achieve the desired look and functionality.

WordPress editor block settings

Once you're satisfied with the changes, simply save your work. Your new single-post template is now live.

Changing Global Styles

Changing global styles allows you to shape the overall look and feel of your website. You can access this at the top right portion of the editor (it should look like a half-black half-white circle). All the settings for adjusting the color palette, typography, layout, and background can be found here. There’s also an option to change the styles either for the individual blocks or for the entire website.

Note: The available styling options may vary depending on your chosen theme.

Changing the Color Palette:

The color palette sets the tone for your website's visual identity. To modify it, just go to the ‘Styles’ section in the editor. You can explore predefined color options or create your custom palette. You can also go to the ‘Browse styles’ tab and select which best expresses your brand's personality. 

WordPress editor color palette options

If you want to edit the colors, go to Styles > Colors > Palette. Add more colors, select solid or gradient colors - it’s up to you. You can also modify the background color if you don’t like the default one in the palette.

WordPress editor background color options

Choosing a Typography:

Typography enhances readability and adds personality to your website's content. To enhance your font settings, click on the ‘Styles’ panel and select Typography. 

You should find a list of different font styles - choose one that best fits your brand. You can also adjust other attributes like the sizes and line spacing. Experiment with different font combinations to find the perfect balance between aesthetics and legibility.

WordPress editor typography options

Adjusting Spacing and Layout:

Spacing and layout contribute to the overall visual hierarchy and user experience of your content. 

Back to the ‘Styles’ panel, click ‘Layout’ to access the options for adjusting the margin and padding of each element. You can also customize the layout settings to control the arrangement of content on your pages. 

WordPress editor layout options

Exporting Your New Theme

Sometimes you might want to save your customizations and export it as a theme to share with others.

To do so, open the template you want to export on the editor. Click on the three dots located at the top right portion of the page.

Within the dropdown menu, you should find an option to export your current setup as a theme. Click on this option to initiate the download process. 

Note: Before finalizing the export, it's a good idea to test the theme to ensure that all customizations are intact and functioning as expected. Save any changes you’ve made, and then preview the theme on different devices and browsers to verify its compatibility.

WordPress Full-Site Editing - Our Final Thoughts

After exploring the Full Site Editing feature in WordPress, we can confidently say that it outshines the traditional ways of building websites on the platform. True to its promise, the new feature empowers anyone to take customization into their own hands - and it nailed that vision almost perfectly

However, it’s not without growing pains. For example, developers might run into compatibility issues with existing themes and plugins as they adapt to this fresh approach. There's also a learning curve involved, especially for those deeply entrenched in the traditional WordPress workflow.

Despite these challenges, we can't help but appreciate the modular design and boundless flexibility that FSE brings to the table. We're pretty sure that as it continues to evolve, it will only get better and more user-friendly over time.

About The Author
Christy Cañete
Technical Writer
More By Christy Cañete
Christy is a front-end developer and technical writer with expertise in JavaScript, React, Node.js and other web technologies. As a writer for CodeWP, she breaks down complex AI and WordPress concepts into easy-to-understand tutorials so anyone can leverage the platform's advanced capabilities. Christy's experience spanning web development, IoT, and embedded systems enables her to clearly explain technical topics to empower WordPress creators of all levels. Her passion is making the latest innovations accessible through beginner-friendly writing.
WordPress WordPress Workflows

More Reading

Make WordPress Easy With AI
© WPAI, Inc. 2024 | d.b.a CodeWP