WordPress 6.9 Block Themes & Full Site Editing: Complete Tutorial 2026
🎨 Master Full Site Editing in WordPress 6.9. Create block themes, use theme.json, build custom blocks, and design dynamic templates without writing code. Perfect for beginners!
Blogs Team
WordPress Experts • Updated for 2026
📌 Jump to section (click to navigate):
✨ Why Full Site Editing Changes Everything
WordPress 6.9 brings the most mature version of Full Site Editing (FSE) yet. Now you can:
- ✓ Design everything visually - Headers, footers, sidebars, and content all in one place
- ✓ Use theme.json for styling - One file controls colors, typography, and layout globally
- ✓ Create block themes - Build themes using only HTML and JSON, no PHP required
- ✓ Save time with patterns - Reusable block layouts for consistent design
of new WordPress sites use block themes in 2026
🔰 What is Full Site Editing? (Simple Explanation)
WordPress 6.9 Site Editor
Full Site Editing (FSE) lets you design your entire website using blocks - just like editing a post!
Before FSE (Old Way):
- PHP files for header.php, footer.php, sidebar.php
- CSS for styling everything
- functions.php for theme features
- Had to code or use page builders
With FSE (New Way):
- HTML block markup for templates
- theme.json for all styling
- Visual Site Editor for customization
- No coding required!
What You Can Do with FSE:
Design Headers
Create custom headers with logos, navigation, and buttons
Build Footers
Add widgets, copyright, and menu to footer visually
Post Templates
Design single post, page, and archive layouts
🎨 Understanding Block Themes
Block themes are WordPress themes built for the Site Editor. They contain only HTML, CSS, and JSON - no PHP templates!
Block Theme vs Classic Theme
| Feature | Classic Theme | Block Theme |
|---|---|---|
| Templates | PHP files (header.php, footer.php) | HTML files (header.html, footer.html) |
| Styling | style.css + custom CSS | theme.json + global styles |
| Customization | Customizer (limited) | Site Editor (visual) |
| Learning Curve | PHP, WordPress hooks | HTML, JSON (easier!) |
Minimal Block Theme Structure:
my-block-theme/
├── style.css # Theme header (required)
├── theme.json # Global settings & styles
├── index.php # Minimal (just loads block templates)
├── functions.php # Optional (for advanced features)
├── parts/ # Template parts
│ ├── header.html
│ └── footer.html
└── templates/ # Page templates
├── index.html
├── single.html
├── page.html
└── archive.html
Pro Tip: Start with the default Twenty Twenty-Six theme and modify it - fastest way to learn!
⚙️ Complete theme.json Guide (Step by Step)
theme.json is the most important file in block themes. It controls colors, typography, spacing, and block settings globally.
Basic theme.json Structure:
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#1e40af"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#7c3aed"
}
],
"link": true,
"button": true
},
"typography": {
"fontFamilies": [
{
"name": "Inter",
"slug": "inter",
"fontFamily": "Inter, sans-serif"
}
],
"fontSizes": [...]
}
},
"styles": {
"color": {
"background": "#ffffff",
"text": "#1a1a1a"
},
"typography": {
"fontFamily": "var:preset|font-family|inter",
"fontSize": "1rem",
"lineHeight": "1.6"
},
"blocks": {
"core/heading": {
"typography": {
"fontWeight": "700"
}
}
}
}
}
Step-by-Step theme.json Tutorial:
Set Color Palette
Define your brand colors that users can choose from in the editor.
"palette": [{"slug": "primary", "color": "#1e40af"}]
Configure Typography
Add Google Fonts or system fonts with proper fallbacks.
"fontFamilies": [{"fontFamily": "Inter, sans-serif"}]
Set Global Styles
Apply default styles to the entire site.
"styles": {"color": {"background": "#fff"}}
Customize Blocks
Style specific blocks differently.
"blocks": {"core/heading": {"color": {"text": "#333"}}}
Pro Tip: Use the theme.json generator to create your file visually!
📄 Building Block Templates (HTML + Block Markup)
Templates are HTML files with special block comments. WordPress converts them to editable blocks in the Site Editor.
Example: index.html (Blog Homepage)
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post"}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-featured-image {"isLink":true} /-->
<!-- wp:post-excerpt /-->
<!-- wp:template-part {"slug":"post-meta"} /-->
</div>
<!-- /wp:group -->
<!-- /wp:post-template -->
<!-- wp:query-pagination -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
Key Template Files You Need:
- index.html - Blog homepage / fallback
- single.html - Single post view
- page.html - Static pages
- archive.html - Category, tag, author archives
- search.html - Search results
- 404.html - 404 error page
Tip: Create templates in the Site Editor first, then export them to HTML files!
🧩 Creating Reusable Template Parts
Template parts are reusable sections like headers, footers, and sidebars that you can use across multiple templates.
Example: header.html
<!-- wp:group {"tagName":"header","style":{"spacing":{"padding":{"top":"1rem","bottom":"1rem"}}}} -->
<header class="wp-block-group">
<!-- wp:columns {"isStackedOnMobile":true} -->
<div class="wp-block-columns">
<!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%">
<!-- wp:site-logo {"width":60} /-->
<!-- wp:site-title /-->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":"75%"} -->
<div class="wp-block-column" style="flex-basis:75%">
<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"right"}} -->
<!-- wp:navigation-link {"label":"Home","url":"/"} /-->
<!-- wp:navigation-link {"label":"About","url":"/about"} /-->
<!-- wp:navigation-link {"label":"Blog","url":"/blog"} /-->
<!-- wp:navigation-link {"label":"Contact","url":"/contact"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</header>
<!-- /wp:group -->
How to Use Template Parts:
<!-- wp:template-part {"slug":"header"} /-->
Insert in any template to include the header
<!-- wp:template-part {"slug":"sidebar","area":"sidebar"} /-->
Include sidebar with area designation
🔷 Creating Block Patterns (Pre-designed Layouts)
Block patterns are pre-designed block layouts that users can insert with one click.
Register Pattern in theme.json:
{
"version": 2,
"patterns": {
"my-theme/hero-section": {
"title": "Hero Section with Image",
"content": "<!-- wp:group -->\n<div class=\"wp-block-group\">\n <!-- wp:columns -->\n <div class=\"wp-block-columns\">\n <!-- wp:column -->\n <div class=\"wp-block-column\">\n <!-- wp:heading {\"level\":1} -->\n <h1>Welcome to Our Site</h1>\n <!-- /wp:heading -->\n <!-- wp:paragraph -->\n <p>Amazing content here</p>\n <!-- /wp:paragraph -->\n <!-- wp:buttons -->\n <div class=\"wp-block-buttons\">\n <!-- wp:button -->\n <div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Get Started</a></div>\n <!-- /wp:button -->\n </div>\n <!-- /wp:buttons -->\n </div>\n <!-- /wp:column -->\n <!-- wp:column -->\n <div class=\"wp-block-column\">\n <!-- wp:image -->\n <figure class=\"wp-block-image\"><img src=\"hero.jpg\" alt=\"Hero\"/></figure>\n <!-- /wp:image -->\n </div>\n <!-- /wp:column -->\n </div>\n</div>\n<!-- /wp:group -->"
}
}
}
Popular Pattern Categories:
🧱 Creating Custom Blocks (Without Code!)
WordPress 6.9 makes it easier to create custom blocks using block variations and styles - no JavaScript required!
Method 1: Block Styles (CSS-only variations)
// functions.php
register_block_style('core/button', [
'name' => 'rounded-button',
'label' => 'Rounded Button',
'inline_style' => '.wp-block-button.is-style-rounded-button .wp-block-button__link {
border-radius: 9999px;
}'
]);
Method 2: Block Variations (Pre-configured blocks)
// functions.php
register_block_pattern(
'my-theme/feature-card',
[
'title' => 'Feature Card',
'description' => 'A card with icon, title, and description',
'content' => '<!-- wp:group {"className":"feature-card"} -->
<div class="wp-block-group feature-card">
<!-- wp:image {"width":50} -->
<figure class="wp-block-image is-resized"><img src="icon.svg" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":3} -->
<h3>Feature Title</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Feature description goes here.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->',
'categories' => ['feature'],
]
);
🎯 Global Styles Interface (User Customization)
The Global Styles interface lets users customize colors, typography, and layout without touching code.
What Users Can Change:
- 🎨 Color palette (primary, secondary, accent)
- 📝 Typography (fonts, sizes, line height)
- 📏 Layout (content width, padding)
- 🖼️ Block-specific styles
- ⚡ Dark mode toggle
Enable Global Styles in theme.json:
"settings": {
"color": {
"palette": true,
"gradients": true,
"link": true,
"button": true
},
"typography": {
"fontFamilies": true,
"fontSizes": true,
"lineHeight": true
},
"layout": {
"contentSize": "800px",
"wideSize": "1200px"
}
}
💡 Real Block Theme Examples
Business Site
Custom header with navigation, hero section, services grid, team members, and footer with widgets.
templates/index.html + parts/header.html
Blog / Magazine
Post grid layout, featured posts, sidebar with recent posts, author bio, and comments section.
templates/single.html + parts/sidebar.html
Portfolio
Masonry gallery, project details template, lightbox integration, and contact form pattern.
patterns/portfolio-grid.html
🔧 Common FSE Issues & Solutions
- Make sure you're using a block theme
- Go to Appearance → Themes → Activate block theme
- Check WordPress version (6.0+ required)
- Deactivate conflicting plugins
- Validate JSON syntax (no trailing commas)
- Clear browser cache
- Check file location (theme root folder)
- Use correct version number
- Clear WordPress cache
- Check file permissions
- Save again in Site Editor
- Deactivate caching plugin temporarily
❓ Frequently Asked Questions (20+ Questions)
Can I use FSE with my existing theme?
No, Full Site Editing requires a block theme. Classic themes cannot use the Site Editor.
Do I need to know PHP for block themes?
No! Block themes use HTML and JSON only. PHP is optional for advanced features.
Are block themes slower?
No, block themes can be faster because they load only what's needed. theme.json optimizes CSS delivery.
Can I convert classic theme to block?
Yes, but it's better to create a new block theme. You can reuse CSS in theme.json.
What's the difference between patterns and templates?
Patterns are reusable design elements. Templates define page structure (like header/footer).
Can I use Google Fonts in theme.json?
Yes, add Google Fonts in the fontFamilies section and enqueue them via functions.php.
How do I add a sidebar in FSE?
Create a template part for sidebar and insert it in templates using wp:template-part.
Is FSE ready for production?
Yes, WordPress 6.9 has mature FSE. Major sites use it including WordPress.org itself.
Have more questions? Check the comments below or ask in our community!
📬 Get Weekly WordPress Tutorials
Join 50,000+ subscribers. No spam, unsubscribe anytime.
📢 Found this helpful? Share with others!