Migrate theme to Full Site Editing architecture

.gitattributes

@@ -1,10 +1,13 @@
-sass/ export-ignore
 .DS_Store export-ignore
 .editorconfig export-ignore
 .gitattributes export-ignore
 .gitignore export-ignore
+.wp-env.json export-ignore
+build-scripts/ export-ignore
 docker-compose.yml export-ignore
-Gruntfile.js export-ignore
+node_modules/ export-ignore
 package.json export-ignore
 phpcs.xml export-ignore
 readme.md export-ignore
+src/ export-ignore
+webpack.config.js export-ignore

.gitignore

@@ -3,5 +3,8 @@
 /vendor/
 .DS_Store
 _build
+build/*
+!build/post-format/
+!build/post-format/**
 composer.lock
 package-lock.json

.wp-env.json

@@ -0,0 +1,15 @@
+{
+	"core": "WordPress/WordPress#master",
+	"phpVersion": "8.1",
+	"themes": [
+		"."
+	],
+	"config": {
+		"WP_DEBUG": true,
+		"WP_DEBUG_LOG": true,
+		"WP_DEBUG_DISPLAY": false,
+		"SCRIPT_DEBUG": true
+	},
+	"port": 8887,
+	"testsPort": 8890
+}

CLAUDE.md

@@ -0,0 +1,112 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Overview
+
+Autonomie is a WordPress **Full Site Editing (FSE) block theme** (v2.0.0) focused on semantic HTML — microformats, microformats2, and Schema.org microdata. It is fully IndieWeb-compatible. Recently migrated from a classic PHP theme to the FSE architecture (branch: `fse`).
+
+Requires WordPress 6.4+, PHP 7.4+, Node.js 18.0+.
+
+## Roadmap / Current Status
+
+We are on the `fse` branch. The work is in two phases:
+
+- **Phase 1 (complete):** Design foundation cleanup — removed Grunt remnants, deleted AI-generated migration docs, added missing spacing presets to `theme.json`, deduplicated colors, added missing block styles (footnotes, comments, gallery, image, separator), ported missing CSS from classic theme (tables, forms, comments, typography, dark mode fixes), replaced hardcoded pixel values with spacing preset variables.
+- **Phase 2 (next):** Social-media-inspired post format templates — status posts styled like toots/tweets, image posts like Pixelfed/Instagram, link posts like bookmarks, etc. Uses `single_template_hierarchy` filter for format-specific templates.
+
+## Commands
+
+```bash
+# Build the custom block (src/post-format → build/post-format)
+npm run build
+
+# Watch mode for development
+npm run dev
+
+# Local WordPress environment (port 8887, WP 6.7, PHP 8.1)
+npm run start       # Start wp-env
+npm run stop        # Stop wp-env
+
+# Linting
+npm run lint:php    # PHP CodeSniffer (WordPress-Core ruleset)
+npm run lint:md     # Markdown linting
+npm run format      # Prettier for JSON/MD files
+```
+
+No test suite is configured yet.
+
+## Development Workflow
+
+1. `npm run start` boots wp-env at http://localhost:8887 (admin: admin/password)
+2. `npm run dev` watches `src/post-format/` and rebuilds on change
+3. Edit `theme.json` for design tokens, block styles, and layout — changes are live-reloaded
+4. Edit `style.css` for styles that can't be expressed in theme.json (pseudo-elements, complex selectors, dark mode)
+5. Edit `templates/` and `parts/` for block template markup
+6. Test dark mode by toggling system appearance preferences
+7. Validate microformats at https://indiewebify.me/
+
+## Architecture
+
+### FSE Block Theme Structure
+
+- **`theme.json`** — Primary design system (version 3): colors, typography, spacing, layout (700px content / 900px wide), per-block styles. Most styling lives here, not in CSS files.
+- **`templates/`** — 6 HTML block templates (index, single, page, archive, search, 404)
+- **`parts/`** — 3 template parts (header, footer, post-meta)
+- **`patterns/`** — 10 block patterns, one per post format (standard, aside, quote, link, image, gallery, video, audio, status, chat). Note: pattern registration is currently disabled in functions.php due to inconsistent return formats — `post-aside.php` returns differently from the rest. This needs fixing before Phase 2.
+- **`style.css`** — Only styles that can't be expressed in theme.json: pseudo-elements, complex selectors, dark mode (`prefers-color-scheme: dark`), tables, forms, comments, accessibility helpers.
+
+### Custom Block: `autonomie/post-format`
+
+Single custom block in `src/post-format/` displaying the post format icon and archive link.
+
+- `src/post-format/index.js` — Editor component (React/JSX)
+- `src/post-format/render.php` — Server-side render
+- `src/post-format/icon-paths.php` — Auto-generated by `build-scripts/extract-icons.js` (runs as prebuild/predev)
+- Built via `@wordpress/scripts` (webpack) to `build/post-format/`
+- `webpack.config.js` extends `@wordpress/scripts` default config with CopyWebpackPlugin for PHP files
+
+### PHP Includes
+
+- **`includes/semantics.php`** — Core file (~630 lines). Adds microformats2 classes and Schema.org microdata to block output via `render_block` filters for core blocks (post-template, post-title, post-content, post-date, post-author, etc.) and classic WordPress filters (body_class, post_class, etc.).
+- **`includes/feed.php`** — Feed discovery links, per-format feed URLs
+- **`includes/compat.php`** — Backward compatibility: comment form enhancements, "standard" post format archive support, lazy loading
+- **`includes/webactions.php`** — IndieWeb webaction wrappers for comment links
+
+### Architecture Decisions
+
+- **Semantic markup via render_block filters** — microformats2 + Schema.org is injected by filtering rendered block output in `semantics.php`, not by modifying templates directly. This keeps templates clean and portable.
+- **Dark mode via CSS variable overrides** — `@media (prefers-color-scheme: dark)` in `style.css` overrides the theme.json color CSS custom properties. This is the only reliable approach until theme.json supports color-scheme natively.
+- **Self-hosted fonts** — Lato, Merriweather, and OpenWeb Icons are declared in `theme.json` fontFace entries. No external font CDNs.
+- **Spacing presets for consistency** — Hardcoded pixel values in block styles have been replaced with `var(--wp--preset--spacing--XX)` references. New presets were added for 15px (slug 35), 30px (slug 55), 50px (slug 75), and 60px (slug 78) to complement existing presets.
+- **CSS vs theme.json boundary** — theme.json handles colors, typography, spacing, border, and layout. CSS handles pseudo-elements (::before, ::after), complex selectors (nth-child, descendant combinators), box-shadow, width constraints, and `@media` queries.
+
+## What's Next (Phase 2)
+
+### Post Format Templates
+
+The plan is to create social-media-inspired templates for each post format:
+
+- **Status** → Toot/tweet style (avatar, short text, timestamp)
+- **Image** → Pixelfed/Instagram style (image-first, minimal chrome)
+- **Link** → Bookmark card (URL preview, title, description)
+- **Quote** → Large typographic quote
+- **Video/Audio** → Embedded player focus
+- **Gallery** → Grid/masonry layout
+- **Aside** → Note/microblog style
+- **Chat** → Conversation thread
+
+Implementation approach:
+1. Fix pattern registration (inconsistent format in `post-aside.php` vs others)
+2. Use `single_template_hierarchy` filter to load format-specific templates from `templates/single-format-{format}.html`
+3. Create format-specific template parts in `parts/`
+
+### Classic Theme Reference
+
+The `master` branch still has the classic theme for visual reference. The old SCSS partials in `assets/sass/` (`_base.scss`, `_post.scss`, `_comment.scss`, `_table.scss`, `_form.scss`, etc.) are the source of truth for what the theme should look like.
+
+## Coding Standards
+
+- PHP: WordPress-Core ruleset (phpcs.xml)
+- Indentation: tabs (size 4) for PHP/CSS/HTML; spaces (size 2) for JS/JSON (.editorconfig)
+- LF line endings, UTF-8