---
tags:
  - wordpress
  - fse
  - patterns
  - style-variations
title: Advanced FSE: Style Variations and Patterns
---

# 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:**
```text
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.

```json
{
    "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
<?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:
1.  **`theme.json`**: The architectural foundation.
2.  **Presets**: Variables for consistency.
3.  **Styles**: Global and block-specific CSS.
4.  **Templates**: The HTML file structure.
5.  **Patterns**: The reusable UI components.

This concludes the FSE Guide series.