Introduction to Full Site Editing (FSE)

Full Site Editing (FSE) is a set of features in WordPress that enables editing of the entire website using the Block Editor. Instead of limiting blocks to post/page content, FSE extends block-based editing to headers, footers, templates, and global styles.

It unifies the editing experience and reduces reliance on PHP templates for layout control.

Core Components of FSE

1. Site Editor

The Site Editor is the central interface for managing the entire site structure.

Capabilities:

• Edit templates and template parts
• Configure global styles
• Navigate between different site elements (pages, templates, patterns)

Access:

Dashboard → Appearance → Editor

2. Template Editing

Templates define the structure of different content types.

• Templates: Full-page layouts (e.g., Single Post, Archive)
• Template Parts: Reusable sections (Header, Footer, Sidebar)

Example: Template Structure

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

<!-- wp:group -->
<div class="wp-block-group">
    <!-- wp:post-title /-->
    <!-- wp:post-content /-->
</div>
<!-- /wp:group -->

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

3. Block Themes

A Block Theme is built entirely using blocks and JSON configuration instead of traditional PHP templates.

Key Files in a Block Theme:

theme/
├── style.css
├── theme.json
├── templates/
│   ├── index.html
│   ├── single.html
├── parts/
│   ├── header.html
│   ├── footer.html

theme.json Example:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "Primary", "slug": "primary", "color": "#0073aa" }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontSize": "16px"
    }
  }
}

4. Styling System

FSE provides styling at three levels:

• Block-level: Individual block customization
• Theme-level: Defaults via theme.json
• Global styles: Site-wide visual control

Example: Global Styles in theme.json

{
  "styles": {
    "elements": {
      "heading": {
        "typography": {
          "fontWeight": "700"
        }
      }
    }
  }
}

5. Theme Blocks

Theme blocks replace traditional PHP template tags.

Common Theme Blocks:

• Navigation
• Site Logo
• Query Loop
• Template Part

Example: Query Loop Block

<!-- wp:query {"perPage":5} -->
<div class="wp-block-query">
    <!-- wp:post-template -->
        <!-- wp:post-title /-->
        <!-- wp:post-excerpt /-->
    <!-- /wp:post-template -->
</div>
<!-- /wp:query -->

6. Block Patterns

Predefined layouts made of blocks.

Example: Pattern Registration (PHP)

register_block_pattern(
    'mytheme/hero-section',
    array(
        'title' => 'Hero Section',
        'content' => '
            <!-- wp:cover -->
            <div class="wp-block-cover">
                <!-- wp:heading -->Hero Title<!-- /wp:heading -->
            </div>
            <!-- /wp:cover -->
        '
    )
);

7. Block Bindings API

Allows blocks to connect with dynamic data sources.

Example (Conceptual):

wp.blocks.registerBlockType('my-plugin/dynamic-block', {
    attributes: {
        content: {
            type: 'string',
            source: 'meta',
            meta: 'custom_field'
        }
    }
});

8. Browsing in Site Editor

Provides navigation between:

• Templates
• Template Parts
• Pages

Without leaving the editor interface.

Advantages of FSE

For Users

• No coding required for layout changes
• Unified editing experience
• High design flexibility

For Developers

• Faster prototyping using blocks
• Reusable templates and patterns
• Reduced dependency on PHP templates

Disadvantages of FSE

• Requires a shift from PHP-based theming to block-based architecture
• Increased complexity in advanced customization
• Potential inconsistency in design if not managed properly
• Learning curve for traditional theme developers
• Reduced reliance on Customizer may affect existing workflows

Current State of FSE

FSE is production-ready and continues to evolve actively within the WordPress ecosystem. It is best suited for:

• New projects using block themes
• Projects requiring high design flexibility
• Custom block-based development

Site Editor in FSE

The Site Editor enables full control over the layout and design of a website.

Requirements

• Must use a Block Theme
• Available in WordPress 5.9+

Example Workflow

1. Open Site Editor
2. Select Template (e.g., Single Post)
3. Modify layout using blocks
4. Save changes globally

Template Editor vs Site Editor

Styles Interface

Introduced in WordPress 5.9.

Capabilities:

• Typography control
• Color palettes
• Block-specific styling

Theme Blocks in Detail

Theme blocks are used to dynamically render site content.

Structural Blocks

• Navigation
• Template Part

Site Identity Blocks

• Site Logo
• Site Title
• Site Tagline

Query & Post Blocks

• Query Loop
• Post Title
• Post Content
• Post Featured Image

Metadata Blocks

• Post Author
• Post Date
• Categories
• Tags

Interaction Blocks

• Comments
• Login/Logout
• Read More

Example: Single Post Template Using Theme Blocks

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

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

<!-- wp:comments /-->

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