+
+
+The key directories to know right now:
+
+| Directory | Purpose |
+|-----------|---------|
+| `templates/` | HTML template files (block markup) following the WordPress template hierarchy |
+| `parts/` | Reusable template parts (header, footer, navigation areas) |
+| `patterns/` | PHP-based block patterns |
+| `theme.json` | Design tokens, settings, and layout configuration |
+| `assets/css/` | CSS source files, organized by purpose |
+| `assets/js/` | JS entry points for frontend and editor |
+| `blocks/` | Custom block source files (auto-registered) |
+| `src/` | PHP modules (auto-discovered via the 10up WP Framework) |
+| `styles/` | Style variation JSON files |
+
+We'll dig into each of these as we work with them in upcoming lessons.
+
+## Task: Verify the build pipeline
+
+Let's do one quick exercise to prove the build pipeline works.
+
+The 10up Block Theme contains an opinionated modification to the block editor Post Title text input wrapper. Typically this appears as part of the content area of the post, however this can often times feel undesirable when using Page Header or Hero type blocks that display the title as it does on the frontend. Our theme modification makes this appear as part of the standard editor UI, providing a bit more visual clarity.
+
+
+*The unmodified Post Title wrapper*
+
+
+*The 10up Block Theme modified Post Title wrapper*
+
+1. Open `assets/css/editor-canvas-style-overrides.css`.
+
+2. Find the `background-color` declaration and change it from `#fff` to `pink`:
+
+```css
+.editor-styles-wrapper .editor-post-title {
+ background-color: pink;
+}
+```
+
+3. Run the build:
+
+```bash
+npm run build
+```
+
+4. Open any post in the editor. The title area should now have a pink background.
+
+
+
+5. Revert the change back to `#fff` and rebuild.
+
+That's it. The build pipeline compiles CSS and JS from `assets/` into `dist/`, and WordPress loads the output. We'll explore how that enqueuing works in [Lesson 5](./05-styles.md) when we dive into the CSS architecture.
+
+## Takeaways
+
+- The 10up scaffold provides a build pipeline, CSS architecture, PHP module system, and auto-registration for blocks and block CSS out of the box.
+- We'll explore each of these systems in depth as we use them in later lessons.
diff --git a/training/Block-Based-Themes/03-site-editor.md b/training/Block-Based-Themes/03-site-editor.md
new file mode 100644
index 0000000..c09a9c6
--- /dev/null
+++ b/training/Block-Based-Themes/03-site-editor.md
@@ -0,0 +1,177 @@
+---
+sidebar_label: 3. The Site Editor
+sidebar_position: 3
+---
+
+# 3. The Site Editor
+
+This is your first truly hands-on lesson. You'll use the Site Editor to update the site's navigation and footer, then export the changes back to your theme files.
+
+## Learning Outcomes
+
+1. Know how to navigate the Site Editor UI: Templates, Parts, Styles, and Navigation panels.
+2. Be able to edit a template part visually and export the result to the theme.
+3. Understand the "Copy All Blocks" workflow for getting markup out of the editor and into `.html` files.
+4. Know when to use a template vs. a template part vs. a pattern.
+
+## Context
+
+The `10up-block-theme` ships with a header, footer, and two navigation area parts. The header references a navigation area part, and the footer has a multi-column layout. We'll simplify both to match our movie theme.
+
+```bash
+parts/
+├── footer.html
+├── header.html
+├── site-footer-legal-navigation-area.html
+└── site-header-navigation-area.html
+```
+
+## Tasks
+
+### 1. Tour the Site Editor
+
+Open the Site Editor via **Appearance > Editor**.
+
+
+
+Explore the main panels:
+
+- **Styles** - Global Styles panel for design tokens _(colors, typography, spacing)_ as well as managing the appearance of specific blocks throughout the whole of the site
+- **Navigation** - manage navigation menus
+- **Pages** - create or edit Pages
+- **Templates** - lists all templates in your theme (`index.html`, `single.html`, `404.html`, etc.)
+- **Patterns** - reusable sections and template parts
+
+:::info
+Note that the Site Editor lists no patterns currently even though the theme contains a `card.php` file in the `/patterns` directory. This is due to `Inserter: false` property in the files metadata. Set it `true` for the card to see it display it the editor and revert back to `false` when done.
+
+
+:::
+
+### 2. Edit the header navigation
+
+1. Open the **Navigation** tab in the Site Editor sidebar.
+2. Click the three dots next to **Navigation** and select **Edit**.
+3. Open the Document Overview along the top left side and select the **Navigation** block.
+4. You can delete the "Page List" block within and then click the plus sign in the content area to **Add block**.
+5. From there choose **Add block** again and select **Custom Link**.
+6. Type `/movies` and hit **Enter**. Use the **Edit link** button to change the text to Movies.
+7. Follow the same process to create a `/people` custom link.
+8. Hit Save.
+
+
+
+If you view the frontend of your site, you should see the new items in both your header and footer.
+
+
+*Frontend header navigation*
+
+
+*Frontend footer navigation*
+
+### 3. Edit the footer
+
+1. Open **Patterns > Template Parts > Footer** in the Site Editor.
+2. Replace the existing footer with a different layout. You could modify or delete the Columns block entirely, change the separator style to "Dots", add additional blocks, etc.
+3. Have fun playing around, Save your changes, and view the frontend to see it applied.
+
+### 4. Export changes to theme files
+
+Once you're happy with your changes in the Site Editor, you need to get them back into your theme's `.html` files:
+
+From the template part in the Site Editor:
+
+1. Click the Options dropdown (three dots) in the upper right near the Save button.
+2. Choose **Copy all blocks**.
+ 1. Alternatively, you can open the **Code Editor** view (three dots > Code editor, or `Ctrl/Cmd + Shift + Alt + M`) and select all of the block markup and copy it. This is a nice view to be aware of when you wish to make small manual block attribute adjustments.
+3. Paste this into the corresponding file in your theme at `parts/footer.html`.
+4. **Reset the template part** in the Site Editor sidebar under **Settings > Template Part > Actions (three dots) > Reset**
+
+:::tip
+That last step is pretty important, this clears the database customization so the editor reads from the theme file again.
+ After pasting markup into a theme file, always reset the template part in the Site Editor. Without resetting, the Site Editor continues to use the database version (your customization), not the theme file. Resetting ensures the editor and the theme file are in sync.
+:::
+
+:::info
+[Create Bock Theme](https://wordpress.org/plugins/create-block-theme/) is a very handy plugin that can help to manage these steps as well. We went with the manual approach for this training but it is worth checking out.
+:::
+
+
+*The Options dropdown with relevant items in bold*
+
+
+*The template part Reset button*
+
+:::warning
+To keep our training in sync with the finished theme, please use this command to copy the completed version into the 10up Block Theme.
+
+```bash
+cp themes/fueled-movies/parts/footer.html themes/10up-block-theme/parts/footer.html
+```
+:::
+
+## Templates, parts, and patterns: when to use what
+
+| Concept | Lives in | Shared? | Use when |
+| ------- | -------- | ------- | -------- |
+| **Template** | `templates/` | N/A | Defining a full page layout |
+| **Template part** | `parts/` | Yes, across templates | Reusable sections (header, footer) |
+| **Pattern** | `patterns/` | Depends on usage | Starter content or template composition |
+
+The key distinction: template parts always maintain a live link. When you edit a part, every template that references it gets the update.
+
+Patterns have two modes. When an editor **inserts** a pattern into a post, the markup is copied and detached. But when a template **references** a pattern via ``, the pattern re-executes on every page load. We'll use patterns this way in [Lesson 9](./09-archive-templates-and-cards.md).
+
+## Registering custom templates
+
+When you need templates for custom post types, add them to the `customTemplates` array in `theme.json`. This is how the editor discovers them in the template picker:
+
+```json title="theme.json (partial)"
+{
+ "customTemplates": [
+ {
+ "name": "archive-tenup-movie",
+ "title": "Movie Archives",
+ "postTypes": []
+ },
+ {
+ "name": "single-tenup-movie",
+ "title": "Single Movie",
+ "postTypes": ["tenup-movie"]
+ }
+ ]
+}
+```
+
+The `postTypes` array tells the editor which post types can use this template. Archive templates use an empty array because they match based on the template hierarchy (`archive-{post-type}.html`), not by assignment to individual posts.
+
+We'll add these custom templates in [Lesson 4](./04-theme-json.md) when we configure `theme.json`.
+
+## Files changed (fueled-movies delta)
+
+| File | Change type | What changes |
+| ---- | ----------- | ------------ |
+| `parts/header.html` | Modified | Formatting, compact single-line block markup (whitespace only) |
+| `parts/footer.html` | Modified | Replaced multi-column layout with copyright line + legal nav |
+| `parts/site-header-navigation-area.html` | Modified | Added `align:"wide"` and `justifyContent:"left"` to navigation layout |
+
+## Ship it checkpoint
+
+- Navigation includes Movies and People links that resolve to `/movies/` and `/people/`
+- Footer is simplified to a single copyright line with legal navigation
+- Changes exist in `parts/*.html` files (exported from Site Editor)
+
+TODO_SUGGEST_SCREENSHOT
+
+## Takeaways
+
+- The Site Editor is your visual IDE for building templates and parts. Author templates here, not by hand.
+- After exporting changes to theme files, reset the template part in the Site Editor so it reads from the file again.
+- Template parts maintain a live link across templates. Patterns can be either detached (inserted) or live (referenced via ``).
+- Register custom templates in `theme.json` under `customTemplates` so the editor knows they exist.
+
+## Further reading
+
+- [Block Patterns](/reference/Patterns/overview)
+- [Block Based Templates](/reference/Themes/block-based-templates)
+- [Block Template Parts](/reference/Themes/block-template-parts)
diff --git a/training/Block-Based-Themes/04-theme-json.md b/training/Block-Based-Themes/04-theme-json.md
new file mode 100644
index 0000000..66f67e0
--- /dev/null
+++ b/training/Block-Based-Themes/04-theme-json.md
@@ -0,0 +1,270 @@
+---
+sidebar_label: "4. theme.json: Design Tokens and Settings"
+sidebar_position: 4
+---
+
+# 4. theme.json: Design Tokens and Settings
+
+There's a misconception that block themes put all their styles in `theme.json`. This is not the case, and fighting core stylesheet specificity is a losing battle.
+
+The rule of thumb: **`theme.json` is the source of truth for design tokens and settings. Actual styles belong in CSS files.**
+
+## Learning Outcomes
+
+1. Know what belongs in `theme.json` (tokens, settings, layout constraints) and what doesn't (actual CSS).
+2. Understand the cascade: default → theme → user.
+3. Be able to add a new color, spacing size, or typography preset and use it in a template.
+4. Know how `theme.json` values become CSS custom properties.
+
+## The cascade
+
+WordPress resolves `theme.json` values in three layers:
+
+1. **Default** — WordPress core ships built-in presets (default palette, default spacing, etc.)
+2. **Theme** — Your `theme.json` overrides or extends the defaults
+3. **User** — Changes made in the Site Editor's Global Styles panel override the theme
+
+This means an editor can always override your theme's tokens via the Site Editor. That's by design — the theme establishes sensible defaults, and editors customize from there.
+
+## Comparing the two themes
+
+The `10up-block-theme` ships a minimal `theme.json`: spacing presets, layout widths, a system font stack, and some viewport-aware calculations. The color palette is intentionally empty.
+
+The `fueled-movies` theme builds on that foundation significantly. Let's walk through what it adds.
+
+### Color palette
+
+```json title="theme.json (fueled-movies, partial)"
+{
+ "settings": {
+ "color": {
+ "defaultPalette": false,
+ "palette": [
+ {
+ "slug": "yellow",
+ "color": "var(--wp--custom--color--yellow--primary)",
+ "name": "Yellow"
+ },
+ {
+ "slug": "text-primary",
+ "color": "var(--wp--custom--color--text--primary)",
+ "name": "Text Primary"
+ },
+ {
+ "slug": "background-primary",
+ "color": "var(--wp--custom--color--background--primary)",
+ "name": "Background Primary"
+ }
+ ]
+ }
+ }
+}
+```
+
+Notice the indirection: palette colors reference `--wp--custom--*` variables rather than hardcoded hex values. This keeps the actual values in one place — the `settings.custom` block — and lets the palette entries act as aliases. Change the custom property, and every palette usage updates automatically.
+
+Setting `defaultPalette: false` removes WordPress's built-in colors from the editor picker. This ensures editors can only use your intentional palette.
+
+### Custom properties (`settings.custom`)
+
+The `settings.custom` block is where you define arbitrary CSS custom properties. WordPress generates `--wp--custom--*` variables from the nested structure:
+
+```json title="theme.json (fueled-movies, partial)"
+{
+ "settings": {
+ "custom": {
+ "color": {
+ "yellow": {
+ "primary": "#F5C518",
+ "secondary": "#D8C882"
+ },
+ "text": {
+ "primary": "#C3C3C3",
+ "secondary": "#a3a3a3"
+ },
+ "background": {
+ "primary": "#0E0E0E",
+ "secondary": "#1A1A1A",
+ "nav": "#080808aa"
+ }
+ }
+ }
+ }
+}
+```
+
+This generates CSS custom properties like:
+
+- `--wp--custom--color--yellow--primary` → `#F5C518`
+- `--wp--custom--color--text--primary` → `#C3C3C3`
+- `--wp--custom--color--background--primary` → `#0E0E0E`
+
+You can use these anywhere — in CSS files, in `theme.json` style declarations, or via the editor's color controls.
+
+### Custom aspect ratios
+
+```json title="theme.json (fueled-movies, partial)"
+{
+ "settings": {
+ "dimensions": {
+ "aspectRatios": [
+ {
+ "name": "Movie Poster - 2:3",
+ "ratio": "2:3",
+ "slug": "movie-poster"
+ }
+ ]
+ }
+ }
+}
+```
+
+This adds a "Movie Poster" option to the aspect ratio picker when configuring Image or Featured Image blocks. It sits alongside the built-in ratios (16:9, 4:3, etc.).
+
+### Element-level styles
+
+The `fueled-movies` theme defines default button and link styles at the element level:
+
+```json title="theme.json (fueled-movies, partial)"
+{
+ "styles": {
+ "elements": {
+ "button": {
+ "color": {
+ "background": "var(--wp--custom--color--action--primary, #f5c518)",
+ "text": "#121212"
+ },
+ "border": {
+ "radius": "10px"
+ },
+ "shadow": "0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset",
+ ":hover": {
+ "color": {
+ "background": "#ffe99a"
+ }
+ }
+ },
+ "link": {
+ "color": {
+ "text": "var(--wp--custom--color--action--secondary)"
+ }
+ }
+ }
+ }
+}
+```
+
+These provide consistent defaults across all buttons and links in the theme. Individual blocks can still override them.
+
+Notice the link element intentionally has **no `:hover` `textDecoration: none`** override. In [Lesson 5](./05-styles.md) we'll use a CSS `text-decoration-color` transition (transparent to `currentcolor`) for a smooth underline reveal on clickable cards. Setting `textDecoration: none` globally in theme.json would fight that approach.
+
+:::caution
+Avoid putting layout or visual styles in `theme.json` `styles` beyond element-level defaults. For anything more specific, use CSS. Core stylesheet specificity will fight you otherwise.
+:::
+
+### Spacing units
+
+```json title="theme.json (fueled-movies, partial)"
+{
+ "settings": {
+ "spacing": {
+ "units": ["px", "em", "rem", "vh", "vw", "%"]
+ }
+ }
+}
+```
+
+This controls which spacing units appear in the editor's dimension controls. The scaffold already includes fluid spacing presets using `clamp()` — these generate responsive values that scale between viewport widths.
+
+### Layout width
+
+Update `layout.wideSize` from the scaffold's default to `1219px`:
+
+```json title="theme.json (fueled-movies, partial)"
+{
+ "settings": {
+ "layout": {
+ "wideSize": "1219px"
+ }
+ }
+}
+```
+
+### Custom templates
+
+Register the four CPT-specific templates so the editor discovers them in the template picker:
+
+```json title="theme.json (fueled-movies, partial)"
+{
+ "customTemplates": [
+ { "name": "archive-tenup-movie", "title": "Movie Archives", "postTypes": [] },
+ { "name": "single-tenup-movie", "title": "Single Movie", "postTypes": ["tenup-movie"] },
+ { "name": "archive-tenup-person", "title": "Person Archives", "postTypes": [] },
+ { "name": "single-tenup-person", "title": "Single Person", "postTypes": ["tenup-person"] }
+ ]
+}
+```
+
+Archive templates use an empty `postTypes` array because they match based on the template hierarchy (`archive-{post-type}.html`), not by assignment to individual posts.
+
+## How tokens become CSS
+
+Every preset in `theme.json` generates a CSS custom property following a naming convention:
+
+| Setting | CSS variable pattern | Example |
+|---------|---------------------|---------|
+| `settings.color.palette` | `--wp--preset--color--{slug}` | `--wp--preset--color--yellow` |
+| `settings.spacing.spacingSizes` | `--wp--preset--spacing--{slug}` | `--wp--preset--spacing--24` |
+| `settings.typography.fontFamilies` | `--wp--preset--font-family--{slug}` | `--wp--preset--font-family--system-font` |
+| `settings.custom.*` | `--wp--custom--{path}` | `--wp--custom--color--yellow--primary` |
+
+The key difference: `preset` variables come from defined presets (palette, spacing sizes, font families). `custom` variables come from the `settings.custom` block. Both are equally usable in CSS, but presets also power the editor's UI controls (color picker, spacing controls, etc.).
+
+## Tasks
+
+1. **Add the `settings.custom` block** with the semantic color tokens shown above (yellow, text, background, transparent backgrounds, action colors, spacing tokens).
+
+2. **Add the 8-color palette** referencing custom properties (set `defaultPalette: false`).
+
+3. **Add the custom aspect ratio** for Movie Poster 2:3.
+
+4. **Add `styles.elements.button` and `styles.elements.link`** defaults as shown above.
+
+5. **Add `spacing.units`** array and update `layout.wideSize` to `1219px`.
+
+6. **Add the `customTemplates` array** for the 4 CPT templates.
+
+7. **Verify.** No build needed: `theme.json` changes are read directly by WordPress. Refresh the editor and confirm colors appear in the picker and the site is dark.
+
+TODO_SUGGEST_SCREENSHOT
+
+8. **Test the cascade.** Override one of your theme's colors in the Site Editor's Global Styles panel. Refresh and verify the user override wins. Reset it and verify the theme default returns.
+
+## Takeaways
+
+- `theme.json` is for tokens and settings. CSS is for styles.
+- Every preset generates a CSS custom property you can use anywhere.
+- `settings.custom` creates `--wp--custom--*` variables for anything you need.
+- The cascade is default → theme → user. User overrides in the Site Editor win.
+- Setting `defaultPalette: false` (and similar `default*: false` flags) removes core presets so only your intentional choices appear.
+- Palette colors can reference custom properties for a single source of truth.
+
+## Files changed (fueled-movies delta)
+
+| File | Change type | What changes |
+| ---- | ----------- | ------------ |
+| `theme.json` | Modified | Added: 8-color palette, `settings.custom` with semantic tokens, `dimensions.aspectRatios` (Movie Poster 2:3), `styles.elements.button` and `styles.elements.link`, `spacing.units`, `customTemplates` (4 CPT templates), `layout.wideSize` 1200px to 1219px |
+
+## Ship it checkpoint
+
+- Site is dark with yellow accents
+- Color picker shows the custom palette (no default WordPress colors)
+- "Movie Poster 2:3" appears in the aspect ratio picker
+- Buttons are yellow with inset shadow
+
+TODO_SUGGEST_SCREENSHOT
+
+## Further reading
+
+- [Theme.json Reference](/reference/Themes/theme-json)
+- [Styles Reference](/reference/Themes/styles)
diff --git a/training/Block-Based-Themes/05-styles.md b/training/Block-Based-Themes/05-styles.md
new file mode 100644
index 0000000..c8398de
--- /dev/null
+++ b/training/Block-Based-Themes/05-styles.md
@@ -0,0 +1,312 @@
+---
+sidebar_label: "5. Styles: CSS Architecture and Style Variations"
+sidebar_position: 5
+---
+
+# 5. Styles: CSS Architecture and Style Variations
+
+This lesson combines two related topics: how the scaffold organizes and code-splits CSS, and how style variations give editors controlled design choices.
+
+## Learning Outcomes
+
+1. Understand the autoenqueue pipeline: `assets/css/blocks/{namespace}/{block-name}.css` loads only when the block is present.
+2. Know the difference between block CSS, component CSS, and base CSS.
+3. Know what style variations are (`styles/{block-type}/{slug}.json`) and how they differ from JS-registered block styles.
+4. Be able to create a style variation and a code-split block stylesheet.
+
+## Part A: Copy CSS from the finished theme
+
+Most of the CSS in this lesson is straightforward styling. Rather than writing every file from scratch, copy the CSS files from the `fueled-movies` answer-key theme and review the file table below to understand what each file does.
+
+### The CSS architecture
+
+The scaffold organizes CSS into purpose-specific directories:
+
+| Directory | Loads | When to use | Example |
+| --------- | ----- | ----------- | ------- |
+| `blocks/core/` | Per-block (autoenqueue) | Styling a core block | `separator.css`, `post-terms.css` |
+| `blocks/{namespace}/` | Per-block (autoenqueue) | Styling a third-party block | `jetpack/contact-form.css` |
+| `components/` | Globally via `frontend.css` | Styles that span multiple blocks | `card.css`, `header.css` |
+| `base/` | Globally via `frontend.css` | Foundational resets and layout | `reset.css`, `layout.css` |
+| `utilities/` | Globally via `frontend.css` | Single-purpose utility classes | `visually-hidden.css` |
+| `templates/` | Globally via `frontend.css` | Template-specific styles | `index.css` |
+| `globals/` | Not output directly | PostCSS variables available everywhere | `media-queries.css` |
+| `mixins/` | Not output directly | PostCSS mixins available everywhere | `visually-hidden.css` |
+
+**Block-scoped vs global**: if a style only matters when a specific block is on the page, put it in `blocks/`. If it affects multiple blocks or the overall page, it belongs in `components/` or `base/`.
+
+### How autoenqueue works
+
+1. You create a CSS file at `assets/css/blocks/core/separator.css`
+2. `10up-toolkit` compiles it to `dist/blocks/autoenqueue/core/separator.css`
+3. `src/Blocks.php` globs `dist/blocks/autoenqueue/` and registers each file with `wp_enqueue_block_style()`
+4. WordPress only loads it on pages where the corresponding block is present
+
+The `path` parameter in `wp_enqueue_block_style()` tells WordPress the local filesystem path so it can inline the stylesheet directly in the HTML `` as critical CSS (for stylesheets under 20KB).
+
+### Editor and frontend CSS scopes
+
+The CSS files directly in `assets/css/` provide the main theme style entry and some editor adjustments:
+
+| File | Scope | Loaded via | Purpose |
+| ---- | ----- | ---------- | ------- |
+| `frontend.css` | Frontend (and editor canvas) | `wp_enqueue_scripts` + `add_editor_style()` | Main theme styles, imports base/components/utilities/templates |
+| `editor-frame-style-overrides.css` | Editor frame only | `enqueue_block_editor_assets` | Styles for the editor chrome outside the editing canvas (toolbar, sidebar) |
+| `editor-canvas-style-overrides.css` | Editor canvas only | `enqueue_block_assets` (admin only) | Styles inside the canvas iframe, e.g. making the post title look like part of the editor UI |
+
+:::tip
+The editor has **two CSS scopes**. The "frame" is everything outside the editing area. The "canvas" is the iframe where blocks render. `frontend.css` is loaded in the canvas via `add_editor_style()` so blocks look the same in the editor as they do on the frontend. The frame and canvas override files are separate.
+:::
+
+### Files to copy from fueled-movies
+
+Copy these files into your `10up-block-theme`:
+
+- `assets/css/base/html.css` (new)
+- `assets/css/base/layout.css` (modified, adds `accent-color`, `@view-transition`)
+- `assets/css/base/index.css` (modified, adds `@import url("html.css")`)
+- `assets/css/components/header.css`, `card.css`, `button.css` (new)
+- `assets/css/components/index.css` (modified, adds imports)
+- `assets/css/mixins/is-clickable-card.css` (new)
+- `assets/css/blocks/core/separator.css`, `post-featured-image.css`, `post-terms.css`, `group.css` (new)
+- `assets/css/utilities/layout.css` (new)
+- `assets/css/utilities/visually-hidden.css` (modified, adds `.is-hidden`)
+- `assets/css/utilities/index.css` (modified, adds import)
+- `assets/js/clickable-cards.js` (new)
+- `assets/js/frontend.js` (modified, adds `import './clickable-cards'`)
+
+:::info
+`is-style-single-movie-backdrop` styles in `post-featured-image.css` won't be visually testable until we build the single templates in [Lesson 10](./10-block-bindings.md). The `.has-separator` styles in `group.css` won't have a toggle until [Lesson 11](./11-block-extensions.md). Both are harmless CSS that we're placing now.
+:::
+
+After copying, run `npm run build` and verify the site looks styled.
+
+### Key CSS patterns
+
+**Sticky header** (`assets/css/components/header.css`):
+
+```css
+header:where(.wp-block-template-part) {
+ backdrop-filter: saturate(180%) blur(20px);
+ background-color: var(--wp--custom--color--background--nav);
+ inset-block-start: var(--wp-admin--admin-bar--height, 0);
+ isolation: isolate;
+ position: sticky;
+ z-index: 1000;
+
+ & .wp-block-site-title {
+ font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 21px;
+ font-weight: 600;
+ letter-spacing: 0.011em;
+ line-height: 1.1428;
+ }
+}
+```
+
+**Genre pill styling** (`assets/css/blocks/core/post-terms.css`):
+
+```css
+.wp-block-post-terms {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--wp--custom--spacing--12);
+
+ & .wp-block-post-terms__separator { display: none; }
+
+ & [rel="tag"] {
+ background: var(--wp--custom--color--background--light-transparent-10);
+ border-radius: 45px;
+ color: var(--wp--custom--color--text--primary);
+ padding: 8px 18px;
+ text-decoration: none;
+ transition: background-color 0.2s ease;
+
+ &:hover { background: var(--wp--custom--color--background--light-transparent-20); }
+ }
+}
+```
+
+**Has-separator dots** (`assets/css/blocks/core/group.css`):
+
+```css
+.wp-block-group.has-separator {
+ gap: 0;
+
+ & > * {
+ align-items: center;
+ display: flex;
+ }
+
+ & > *:not(:first-child)::before {
+ background-color: currentcolor;
+ block-size: 4px;
+ border-radius: 999px;
+ content: "";
+ display: inline-flex;
+ inline-size: 4px;
+ margin-inline: var(--wp--custom--spacing--8);
+ }
+}
+```
+
+### Clickable cards
+
+The `assets/js/clickable-cards.js` file is an accessibility-focused pattern based on [Inclusive Components](https://inclusive-components.design/cards/#theredundantclickevent). Add the `is-clickable-card` class to the card's wrapping Group in the pattern, and the JS makes the entire card clickable by forwarding clicks to the primary link (the post title heading link). It handles text selection, scroll detection, and Ctrl/Cmd+click. Students just need to copy the files.
+
+The heading link provides good screen reader context since it contains the post title. The `is-clickable-card` class is added via the "Additional CSS class(es)" panel in the block editor. This is fine because the card pattern is code-only (`Inserter: false`), so editors never interact with it. **If this were an editor-facing block, a block extension with a toggle control would be better** since classes added via the Additional CSS panel can be accidentally deleted with no way for editors to know how to restore them.
+
+Card hover CSS (`assets/css/components/card.css`) uses the mixin from `assets/css/mixins/is-clickable-card.css` to apply hover feedback. The title starts with a transparent underline and transitions to `currentcolor` on card hover (smooth underline reveal). The secondary button gets its hover state. This is why `theme.json` doesn't set `textDecoration: none` on link hover, as that would fight the CSS transition.
+
+```css title="assets/css/components/card.css"
+.is-clickable-card .wp-block-post-title {
+ text-decoration: underline;
+ text-decoration-color: transparent;
+ transition: text-decoration-color 0.2s ease;
+}
+
+.is-clickable-card {
+
+ @mixin is-clickable-card-hover {
+
+ [data-is-clickable-card-primary] {
+ text-decoration-color: currentcolor;
+ }
+
+ .wp-block-button [data-is-clickable-card-secondary] {
+ background-color: var(--wp--custom--color--background--light-transparent-20, rgba(163, 163, 163, 0.3));
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25) inset;
+ }
+ }
+}
+```
+
+The `@mixin is-clickable-card-hover` is defined in `assets/css/mixins/is-clickable-card.css` and encapsulates the `:has()` hover selector, excluding secondary interactive elements from triggering the card hover:
+
+```css title="assets/css/mixins/is-clickable-card.css"
+@define-mixin is-clickable-card-hover {
+ &:where(:hover:not(:has([data-is-clickable-card-secondary]:hover, [data-is-clickable-card-secondary]:focus))) {
+ @mixin-content;
+ }
+}
+```
+
+## Part B: Style variations
+
+### What are style variations?
+
+Style variations are JSON files in the `styles/` directory that give editors selectable design options in the block inspector's Styles panel. They use the `theme.json` schema and can target the full range of design tokens: colors, spacing, borders, shadows, and nested elements.
+
+### Hands-on: create style variations
+
+The `10up-block-theme` ships three global "surface" variations for the Group block. We'll replace these with targeted per-block variations.
+
+1. **Delete** `styles/surface-primary.json`, `styles/surface-secondary.json`, and `styles/surface-tertiary.json`.
+
+2. **Create `styles/button/secondary.json`**: transparent background, primary text, inset shadow:
+
+```json title="styles/button/secondary.json"
+{
+ "$schema": "https://schemas.wp.org/wp/6.9/theme.json",
+ "version": 3,
+ "title": "Secondary",
+ "slug": "secondary",
+ "blockTypes": ["core/button"],
+ "styles": {
+ "elements": {
+ "button": {
+ "color": {
+ "background": "var(--wp--custom--color--background--light-transparent-10, rgba(163, 163, 163, 0.15))",
+ "text": "var(--wp--custom--color--text--primary)"
+ },
+ "shadow": "0 1px 2px 0 rgba(255, 255, 255, 0.08) inset",
+ ":hover": {
+ "color": {
+ "background": "var(--wp--custom--color--background--light-transparent-20, rgba(163, 163, 163, 0.3))"
+ },
+ "shadow": "0 2px 2px 0 rgba(0, 0, 0, 0.25) inset"
+ },
+ ":focus": {
+ "color": {
+ "background": "var(--wp--custom--color--background--light-transparent-20, rgba(163, 163, 163, 0.3))"
+ },
+ "shadow": "0 2px 2px 0 rgba(0, 0, 0, 0.25) inset"
+ }
+ }
+ }
+ }
+}
+```
+
+Explain the JSON structure: `$schema`, `version`, `title`, `slug`, `blockTypes`, and `styles.elements.button`.
+
+3. **Create `styles/group/secondary.json`**: 10px radius, transparent background, 32px padding.
+
+4. **Rebuild and verify**: "Secondary" style appears for Button and Group blocks in the editor.
+
+TODO_SUGGEST_SCREENSHOT
+
+### Style variations vs JS block styles
+
+Both show up in the editor's Styles panel, but they work very differently:
+
+| Feature | Style variations (JSON) | Block styles (JS) |
+| ------- | ---------------------- | ----------------- |
+| Format | JSON file in `styles/` | `registerBlockStyle()` in JS |
+| What it does | Applies `theme.json`-style design tokens | Adds a CSS class name |
+| Can target nested elements | Yes (`elements.button`, `elements.link`) | No |
+| Can set spacing, borders, shadows | Yes | No, only via the added class in CSS |
+| Registration | Automatic from file system | Manual via JS |
+
+:::caution
+Button style variations are a known pain point. The `core/button` block renders differently in the editor vs the frontend (the editor uses an `` element inside `.wp-block-button` while the frontend may use a `