Introduction to FSE and Site Editor

Summary: Learning about FSE and Site Editor in WordPress.

Full Site Editing (FSE)

Full Site Editing (FSE) is a revolutionary feature introduced in WordPress, starting with version 5.8 and evolving significantly in WordPress 5.9 and beyond. FSE allows users to design and customize all parts of their website directly from the WordPress admin interface, using the Block Editor (formerly known as Gutenberg). This means we can now build entire sites with the flexibility and ease of blocks, without needing to touch code unless we want to.

Before FSE, WordPress themes controlled most aspects of our site’s appearance, with users being limited to specific theme customizations, widget areas, and menus. FSE takes this further by allowing us to customize everything using blocks: headers, footers, sidebars, templates, and template parts.

  1. Block Themes: Themes built specifically to support FSE, where everything is made of blocks.
  2. Template Editor: A feature that lets us create and edit site-wide templates using the Block Editor.
  3. Global Styles: A system for controlling the look and feel of our site (colors, typography, spacing) globally.
  4. Site Editor: A unified interface where we can modify all templates and parts of our site without needing a separate Customizer.

Block-Based Themes

Block themes are the backbone of Full Site Editing. They are different from traditional themes because instead of using PHP files to define how our site looks, block themes use a combination of HTML and JSON to control everything via the Block Editor. This means all parts of the site—headers, footers, templates—are built and customized using blocks.

Theme.json

The theme.json file is where we define settings for a block-based theme. It allows us to set default styles, control block settings, and create global styles for our entire site.

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#0073aa",
          "name": "Primary"
        },
        {
          "slug": "secondary",
          "color": "#111",
          "name": "Secondary"
        }
      ]
    },
    "typography": {
      "fontSizes": [
        {
          "slug": "small",
          "size": "12px",
          "name": "Small"
        },
        {
          "slug": "large",
          "size": "36px",
          "name": "Large"
        }
      ]
    },
    "spacing": {
      "blockGap": "1.5em"
    }
  },
  "styles": {
    "color": {
      "background": "#ffffff",
      "text": "#333333"
    },
    "typography": {
      "fontSize": "16px"
    }
  }
}
  • Color palette: Defines the primary and secondary colors available for the site.
  • Typography: Defines small and large font sizes.
  • Block Gap: Specifies the default spacing between blocks.

Template Editor

The Template Editor allows us to create and edit site-wide templates using blocks. For example, we can build templates for our homepage, blog posts, or custom post types.

In a block-based theme, we would have a templates folder that includes HTML files like index.html, single.html, or archive.html. Each template can be built using the Block Editor and can include any block we want (post title, post content, query loop, etc.).

single.html

<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:post-title /-->
<!-- wp:post-content /-->

<!-- wp:template-part {"slug":"footer"} /-->
  1. Header (which can be created and customized as a separate template part).
  2. Post Title and Post Content blocks, which automatically pull the relevant information for each individual post.
  3. Footer, another reusable template part.

Global Styles and the Styles Interface

Global styles allow us to apply consistent design settings across our entire site. These settings control colors, typography, and layout for all blocks and can be customized from the Site Editor (Appearance > Editor > Styles).

We can manage both the global styles for the entire site and individual block styles. In WordPress, global styles can be configured in theme.json, or users can modify them in the Editor.

{
  "version": 2,
  "styles": {
    "color": {
      "background": "#f0f0f0",
      "text": "#333333"
    },
    "typography": {
      "fontSize": "16px",
      "fontFamily": "Arial, sans-serif"
    }
  }
}

Template Parts

Template parts are reusable block structures like headers, footers, or sidebars that we can create once and use in multiple templates. We can edit these template parts individually and update all pages that use them simultaneously.

header.html Template Part

<!-- wp:group {"tagName":"header"} -->
<div class="wp-block-group">
  <!-- wp:site-title /-->
  <!-- wp:navigation /-->
</div>
<!-- /wp:group -->

Query Loop Block

One of the most powerful blocks introduced with FSE is the Query Loop Block. It allows us to display a list of posts or other content types using dynamic queries. We can define how posts are displayed, filter by categories or tags, and even create custom loops for displaying specific types of content.

<!-- wp:query {"queryId":1,"query":{"perPage":3,"postType":"post"}} -->
  <!-- wp:post-template -->
    <!-- wp:post-title /-->
    <!-- wp:post-excerpt /-->
  <!-- /wp:post-template -->
<!-- /wp:query -->

Site Editor in WordPress

The Site Editor is one of the core components of WordPress’s Full Site Editing (FSE) system. It offers a user-friendly, block-based interface for customizing every aspect of our website, from headers and footers to specific page templates. The Site Editor moves WordPress further away from the need for PHP files or coding knowledge, empowering users to build and modify their sites with greater ease and flexibility.

The Site Editor is a visual, drag-and-drop interface that allows users to design and edit all parts of a WordPress website. Unlike the traditional WordPress Customizer that had limited functionality for editing global styles, menus, and widgets, the Site Editor allows us to modify our site’s templates, template parts (headers, footers), and global styles—all using blocks.

The Site Editor is only available in Block Themes, which are built specifically for FSE. If we are using a traditional PHP-based theme, we won’t see the Site Editor options. To access the Site Editor, we must be using a block theme like Twenty Twenty-Two, Twenty Twenty-Three, or any custom block theme.

Templates and Template Parts

In the Site Editor, we can create, edit, and manage both Templates and Template Parts. Templates control the layout for specific types of pages (e.g., homepage, blog posts, archives), while template parts are reusable block groups like headers, footers, or sidebars.

Templates

Templates define the structure for individual post types or specific pages on our website. For example, we might have separate templates for:

  • Homepage: Controls how the main landing page looks.
  • Single Post: Defines the layout for individual blog posts.
  • Archive: Defines the layout for category and tag pages.
<!-- wp:group -->
<div class="wp-block-group">
  <!-- wp:post-title /-->
  <!-- wp:post-content /-->
</div>
<!-- /wp:group -->

Template Parts

Template parts are reusable block-based structures like headers and footers. We can create these once and use them in multiple templates, ensuring consistency across the site.

htmlCopy code<code><!-- wp:group {"tagName":"header"} -->
<div class="wp-block-group">
  <!-- wp:site-title /-->
  <!-- wp:navigation /-->
</div>
<!-- /wp:group -->

Block-Based Design

The Site Editor is entirely block-based, allowing us to build complex layouts using modular blocks. Any part of our website, from the header to the footer, can be designed using blocks like Paragraphs, Images, Buttons, Query Loops, and more.

  • Site Title: Displays our website’s title.
  • Navigation: Displays our site’s menu with full customization.
  • Post Content: Outputs the content of a post or page.
  • Query Loop: Displays a list of posts based on a query (e.g., most recent posts).
  • Group Block: Allows us to group multiple blocks together for easier layout control.
  • Columns Block: Create multi-column layouts with different blocks in each column.
<!-- wp:navigation {"orientation":"horizontal"} -->
<ul class="wp-block-navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>
<!-- /wp:navigation -->

Global Styles Interface

The Global Styles feature in the Site Editor allows us to control the appearance of our entire website from a single interface. This includes colors, typography, and block-specific settings (like spacing and block margins). Global Styles affect every block on our site, ensuring a consistent look and feel.

{
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#0073aa", "name": "Primary" },
        { "slug": "secondary", "color": "#111111", "name": "Secondary" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "slug": "small", "size": "12px", "name": "Small" },
        { "slug": "large", "size": "36px", "name": "Large" }
      ]
    }
  },
  "styles": {
    "color": {
      "text": "#333333"
    },
    "typography": {
      "fontSize": "16px"
    }
  }
}

Block Patterns

The Site Editor supports Block Patterns, which are pre-designed block layouts that can be inserted into any part of a template or page. These patterns can include complex combinations of blocks that we can reuse across our site.

Managing and Editing Menus

The Site Editor makes it easy to add and customize navigation menus with the Navigation Block. We can create multiple menus, add them to various parts of our templates, and update them visually.

<!-- wp:navigation {"orientation":"vertical"} -->
<ul class="wp-block-navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/services">Services</a></li>
  <li><a href="/blog">Blog</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>
<!-- /wp:navigation -->
«
»

Leave a Reply

Your email address will not be published. Required fields are marked *