WordPress Development

WordPress Full Site Editing: Block Themes and the Site Editor Explained

WordPress 5.9 (January 2022) delivered Full Site Editing (FSE) — the most significant change to WordPress theming since the Customizer arrived in 2012. FSE moves template editing out of PHP files and into the block editor, giving site owners unprecedented control over every part of their site’s layout without touching code.

Block Themes vs Classic Themes

Classic themes use PHP template files (header.php, footer.php, single.php) and the Customizer for settings. Block themes replace these with HTML template files containing block markup, and a theme.json file for global styles. The Site Editor (Appearance → Editor) lets users visually edit headers, footers, templates, and template parts.

The Minimum Block Theme

A block theme requires style.css, templates/index.html, and theme.json:

my-block-theme/
├── style.css
├── theme.json
├── templates/
│   ├── index.html
│   ├── single.html
│   ├── page.html
│   └── 404.html
└── parts/
    ├── header.html
    └── footer.html

theme.json: Global Styles

theme.json is the new CSS Custom Properties system for block themes. Define your colour palette, typography, spacing, and layout in JSON and WordPress generates CSS variables automatically:

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                { "name": "Primary", "slug": "primary", "color": "#7c3aed" },
                { "name": "Surface", "slug": "surface", "color": "#ffffff" }
            ]
        },
        "typography": {
            "fontSizes": [
                { "name": "Small", "slug": "small", "size": "0.875rem" },
                { "name": "Large", "slug": "large", "size": "2rem" }
            ]
        }
    }
}

Template Parts

Template parts (header, footer) are reusable block-markup fragments stored in /parts/. They replace get_header() and get_footer() PHP calls. Editors can customise them visually in the Site Editor without touching any files.

Block Patterns in Block Themes

Register patterns in /patterns/ as PHP files (WordPress 6.0+) or via register_block_pattern(). FSE sites use patterns extensively as pre-built layout sections.

Should You Convert Your Theme?

For new projects in 2022, consider building a block theme from the start. For existing classic themes with complex PHP logic, a hybrid approach — using add_theme_support('block-templates') — allows you to opt into FSE features incrementally without a full rewrite.

Full Site Editing changes WordPress from a developer-controlled platform to a user-editable design system. The learning curve is real, but the end result — users who can customise any part of their site without code — is exactly what WordPress has been building toward for years.

Share this post:
Copied!

Leave a Comment

Your email will not be published.

READY TO BUILD?

Let's Build Something
Amazing Together

Tell us about your project. We'll have a proposal in your inbox within 24 hours.

Free Consultation
NDA Available
Fixed-price Options
Dedicated PM