WordPress Full Site Editing (FSE) Theme Development

Developing Full Site Editing (FSE) WordPress Themes

Full Site Editing is a WordPress architecture where the entire site—header, footer, sidebars, page templates—is assembled from blocks in a visual editor instead of through PHP templates. An FSE theme eliminates files like header.php, footer.php, sidebar.php and replaces them with HTML files containing block markup. The approach is radically different from classic themes; transitioning from an old theme to FSE takes 5 to 15 working days depending on design complexity.

FSE Theme Structure

wp-content/themes/my-fse-theme/
├── style.css                    # Theme header
├── functions.php                # Minimal (theme supports, enqueue)
├── theme.json                   # Design tokens and global styles
├── templates/
│   ├── index.html               # Default template
│   ├── single.html              # Single post
│   ├── single-project.html      # CPT project
│   ├── archive.html             # Archive
│   ├── page.html                # Page
│   ├── page-no-title.html       # Custom page template
│   └── 404.html                 # 404 page
└── parts/
    ├── header.html              # Header
    ├── footer.html              # Footer
    └── sidebar.html             # Sidebar

Instead of get_header() in a template, now use a core/template-part block:

<!-- wp:template-part {"slug":"header","theme":"my-fse-theme","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
  <!-- wp:post-content /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","theme":"my-fse-theme","tagName":"footer"} /-->

theme.json — The Heart of FSE Theme

theme.json defines the design system: colors, typography, spacing, sizes—everything that used to be in CSS:

{
  "$schema": "https://schemas.wp.org/wp/6.5/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary",   "color": "#1a1a2e", "name": "Primary"   },
        { "slug": "secondary", "color": "#e94560", "name": "Secondary" },
        { "slug": "neutral",   "color": "#f5f5f5", "name": "Neutral"   }
      ],
      "custom": true,
      "customDuotone": false
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "slug": "inter",
          "name": "Inter",
          "fontFace": [
            {
              "fontFamily": "Inter",
              "fontWeight": "400 700",
              "fontStyle": "normal",
              "src": ["file:./assets/fonts/Inter-Variable.woff2"]
            }
          ]
        }
      ],
      "fontSizes": [
        { "slug": "sm",  "size": "0.875rem", "name": "Small"  },
        { "slug": "md",  "size": "1rem",     "name": "Base"   },
        { "slug": "lg",  "size": "1.25rem",  "name": "Large"  },
        { "slug": "xl",  "size": "1.5rem",   "name": "XL"     },
        { "slug": "2xl", "size": "2rem",     "name": "2XL"    },
        { "slug": "3xl", "size": "3rem",     "name": "3XL"    }
      ],
      "fluid": true
    },
    "spacing": {
      "spacingSizes": [
        { "slug": "sm",  "size": "1rem",  "name": "Small"  },
        { "slug": "md",  "size": "2rem",  "name": "Medium" },
        { "slug": "lg",  "size": "4rem",  "name": "Large"  },
        { "slug": "xl",  "size": "8rem",  "name": "XL"     }
      ],
      "customSpacingSize": true
    },
    "layout": {
      "contentSize": "768px",
      "wideSize": "1280px"
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--neutral)",
      "text": "var(--wp--preset--color--primary)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--inter)",
      "fontSize": "var(--wp--preset--font-size--md)",
      "lineHeight": "1.6"
    },
    "elements": {
      "h1": { "typography": { "fontSize": "var(--wp--preset--font-size--3xl)", "fontWeight": "700" } },
      "h2": { "typography": { "fontSize": "var(--wp--preset--font-size--2xl)", "fontWeight": "600" } },
      "link": {
        "color": { "text": "var(--wp--preset--color--secondary)" },
        ":hover": { "color": { "text": "var(--wp--preset--color--primary)" } }
      }
    }
  }
}

All values from theme.json become CSS variables like --wp--preset--color--primary. This is the "design tokens" for the block editor.

Custom Post Type Archive Template

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

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"var:preset|spacing|lg","bottom":"var:preset|spacing|lg"}}}} -->
<main class="wp-block-group">

  <!-- wp:query {"queryId":1,"query":{"postType":"project","perPage":12,"inherit":true}} -->
  <div class="wp-block-query">

    <!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
      <!-- wp:post-featured-image {"isLink":true,"aspectRatio":"4/3"} /-->
      <!-- wp:post-title {"isLink":true,"level":3} /-->
      <!-- wp:post-excerpt {"moreText":"Read More"} /-->
    <!-- /wp:post-template -->

    <!-- wp:query-pagination -->
      <!-- wp:query-pagination-previous /-->
      <!-- wp:query-pagination-numbers /-->
      <!-- wp:query-pagination-next /-->
    <!-- /wp:query-pagination -->

    <!-- wp:query-no-results -->
      <!-- wp:paragraph -->
      <p>No projects found.</p>
      <!-- /wp:paragraph -->
    <!-- /wp:query-no-results -->

  </div>
  <!-- /wp:query -->

</main>
<!-- /wp:group -->

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

Custom Block Patterns

Patterns are ready-made block combinations that editors insert with one click:

register_block_pattern('my-theme/hero-section', [
    'title'       => 'Hero section',
    'description' => 'Full-width banner with heading and button',
    'categories'  => ['featured'],
    'content'     => '<!-- wp:cover {"url":"' . get_template_directory_uri() . '/assets/img/hero.jpg","dimRatio":50,"align":"full"} -->
<div class="wp-block-cover alignfull">
  <!-- wp:heading {"level":1,"textColor":"white"} --><h1 class="wp-block-heading has-white-color">Website Title</h1><!-- /wp:heading -->
  <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
    <div class="wp-block-buttons">
      <!-- wp:button {"backgroundColor":"secondary"} --><div class="wp-block-button"><a class="wp-block-button__link has-secondary-background-color">Learn More</a></div><!-- /wp:button -->
    </div>
  <!-- /wp:buttons -->
</div>
<!-- /wp:cover -->',
]);

Disabling Unneeded in Editor

FSE gives editors too much freedom—they can break the layout. Restrictions via theme.json:

"settings": {
  "color": {
    "custom": false,
    "customGradient": false
  },
  "typography": {
    "customFontSize": false,
    "dropCap": false
  }
}

And via PHP—allow only needed blocks:

add_filter('allowed_block_types_all', function (array|bool $allowed, WP_Block_Editor_Context $context): array {
    return [
        'core/paragraph', 'core/heading', 'core/image', 'core/list',
        'core/quote', 'core/table', 'core/buttons', 'core/button',
        'core/group', 'core/columns', 'core/column', 'core/spacer',
        'my-plugin/project-card', 'my-plugin/cta-section',
    ];
}, 10, 2);

Differences from Classic Theme

Typical Timelines

Minimal FSE theme (5–7 templates, theme without design system)—3–5 days. Theme with full design system via theme.json, patterns, and editor restrictions—8–12 days. Porting complex classic theme to FSE preserving all functionality—from 15 days.