Advanced FSE: Style Variations and Patterns
To make a block theme truly premium, you need to offer users choices. In the past, this meant a complex "Theme Options" page. In FSE, we use standard native features: Style Variations and Block Patterns.
1. Style Variations (The "Skins")
Style Variations allow you to bundle multiple design personalities (e.g., "Dark Mode", "High Contrast", "Pastel") inside a single theme. Users can switch between them in the Site Editor with one click.
How it Works
You create a styles/ folder in your theme root. Inside, you place JSON files. Each file represents a variation and merges with your main theme.json.
Directory Structure:
my-theme/
├── theme.json (The Master Config)
└── styles/
├── dark.json (Variation 1)
└── swiss.json (Variation 2)Example: styles/dark.json
You don't need to copy the entire schema. Just include what changes.
{
"version": 3,
"title": "Midnight Dark",
"settings": {
"color": {
"palette": [
{
"slug": "background",
"color": "#000000",
"name": "Black"
},
{
"slug": "text",
"color": "#ffffff",
"name": "White"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--background)",
"text": "var(--wp--preset--color--text)"
}
}
}2. Block Patterns (The "Sections")
Patterns are pre-designed groups of blocks (e.g., a "Pricing Table" or "Hero Section"). Users insert them, but unlike Template Parts, once inserted, the blocks are independent and can be edited freely.
The Modern Way: The patterns/ Directory
In WordPress 6.0+, you don't need PHP to register patterns. You can just drop PHP files with a specific header into the patterns/ folder.
File: patterns/hero-banner.php
<?php
/**
* Title: Hero Banner with Image
* Slug: my-theme/hero-banner
* Categories: featured, banner
* Viewport Width: 1200
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)">
<!-- wp:heading {"textAlign":"center","level":1} -->
<h1 class="has-text-align-center">Welcome to the Future</h1>
<!-- /wp:heading -->
</div>
<!-- /wp:group -->Pro Tip: Build the layout in the WordPress Editor first, "Copy Block," and paste the code into your PHP file.
3. Patterns vs. Template Parts
This is a common confusion point.
| Feature | Scope | Updates | Use Case |
|---|---|---|---|
| Template Part | Global | Changing the file updates every instance on the site. | Headers, Footers, Sidebars. |
| Pattern | Local | Changing the file does not affect instances already inserted. | Hero sections, Pricing tables, Testimonials. |
4. Conclusion
You now have a complete roadmap for building a Full Site Editing theme:
theme.json: The architectural foundation.- Presets: Variables for consistency.
- Styles: Global and block-specific CSS.
- Templates: The HTML file structure.
- Patterns: The reusable UI components.
This concludes the FSE Guide series.