From 15b5e9b6cbfd70a7b0a6deb5fc31848d532ac713 Mon Sep 17 00:00:00 2001 From: Jasper Frumau Date: Sat, 24 Oct 2026 11:35:43 +0700 Subject: [PATCH 1/3] Document elayne-content prototype repo --- AGENTS.md | 8 ++++++++ CLAUDE.md | 12 +++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/AGENTS.md b/AGENTS.md index 542e6b8..09c27a5 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -120,6 +120,14 @@ All design tokens live in `theme.json` — never hardcode colors, sizes, or spac **Pill/badge shrink-wrap rule (CRITICAL — prevents full-column-width pills):** WordPress `is-layout-flow` columns are internally `flex-direction: column` flex containers. Any child is a flex item and gets its `display` blockified — `inline-block`/`inline-flex` both compute to `block` regardless of inline styles or CSS. The default `align-items: normal` acts as `stretch`, making every child span the full column width. To shrink-wrap a pill/badge inside a `wp:column`, add `align-self: flex-start` and `width: fit-content` to its **CSS rule** (not inline). `is-style-status-pill` works in the editorial header only because that header is a `flex-direction: row` container (cross-axis vertical → width is content-driven); inside a `wp:column` it would need the same fix. +## Content & Design Prototypes (private `elayne-content` repo) +Design prototypes and demo content for verticals live in a separate **private** repo, `~/Documents/elayne-content` ([imagewize/elayne-content](https://github.com/imagewize/elayne-content)), kept out of the theme repo. +- One self-contained folder per design: `/` or `-/` (e.g. `legal/`, `legal-corporate/`) with `index.html`, `style.css`, `CREDITS.md`, `images/`. Open `index.html` in a browser; no build. +- Its `style.css` mirrors `theme.json` tokens and flags prototype-only deviations (extra fonts, custom palette) — map them to theme slugs or drop them when porting. +- Start new vertical/variant work there: read the prototype, then port to block patterns (see `elayne-pattern-generator` skill and `docs/elayne/VERTICAL-WORKFLOW.md`). Do not copy prototype CSS/images verbatim. +- Prototype images are Unsplash and **not shippable** — WP.org rejects them. Replace with CC0/GPL WebP images in `patterns/images/` and document in `readme.txt`. +- Never commit `elayne-content` files here or hotlink its images. + ## Coding Style & Naming Conventions - PHP: follow WordPress coding standards (tab indent, snake_case functions); keep logic minimal and filter-based. Use text domain `elayne` in translatable strings. - Patterns: name files with kebab-case slugs (e.g., `hero-two-tone.php`) and match the `title`/`categories` to existing taxonomy. diff --git a/CLAUDE.md b/CLAUDE.md index fb80480..69b8b3c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -304,9 +304,19 @@ WooCommerce core plugin includes official patterns in `wp-content/plugins/woocom > Full details with code examples: `docs/elayne/PATTERN-GUIDELINES.md` +## Content & Design Prototypes (private `elayne-content` repo) + +Design prototypes and demo content for verticals live in a **separate private repo**, not in this theme: `~/Documents/elayne-content` ([imagewize/elayne-content](https://github.com/imagewize/elayne-content)). It keeps the theme clean and keeps Unsplash prototype photos out of anything that ships to WP.org. + +- One self-contained folder per design: `/` or `-/` (e.g. `legal/`, `legal-corporate/`), each with `index.html` + `style.css` + `CREDITS.md` + `images/`. Open `index.html` directly in a browser; there is no build. +- Each `style.css` mirrors `theme.json` tokens at the top and flags prototype-only deviations (extra fonts, custom palette). Check these before porting — they must be mapped to theme slugs or dropped. +- **Start new vertical/variant work from here**: read the prototype, then port it to block patterns (via the `elayne-pattern-generator` skill and the pt-cli scaffolding below). Do not copy prototype CSS or images into the theme verbatim. +- **Prototype images are NOT shippable.** Unsplash is rejected by WP.org; replace with CC0/GPL images (WebP, <200KB, in `patterns/images/`) and document them in `readme.txt` before porting. +- Never commit `elayne-content` files into this repo, and never hotlink its images. + ## New Vertical Development -When creating a new industry vertical (home-improvement, legal, fintech, etc.), follow the full workflow in `docs/elayne/VERTICAL-WORKFLOW.md`. +When creating a new industry vertical (home-improvement, legal, fintech, etc.), follow the full workflow in `docs/elayne/VERTICAL-WORKFLOW.md`. Check `elayne-content` first for an existing prototype of the vertical, and decide whether the design is a **variant of an existing vertical** (new style variation + patterns, same `elayne/` category) or a genuinely new one. > **Naming note:** The Home Improvement vertical uses `plumbing` as its internal slug throughout (files, CSS classes, style JSON, pattern slugs). The display label was changed to "Home Improvement" in May 2026 but internal identifiers were not renamed to avoid a database migration. Do not "fix" the plumbing naming — it is intentional. From 883e3465e6b73e28db90ae4c68c759b4d2866501 Mon Sep 17 00:00:00 2001 From: Jasper Frumau Date: Sun, 25 Oct 2026 07:24:03 +0700 Subject: [PATCH 2/3] Point legal vertical work to the elayne-legal child theme --- AGENTS.md | 1 + CLAUDE.md | 1 + 2 files changed, 2 insertions(+) diff --git a/AGENTS.md b/AGENTS.md index 09c27a5..33f1456 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -127,6 +127,7 @@ Design prototypes and demo content for verticals live in a separate **private** - Start new vertical/variant work there: read the prototype, then port to block patterns (see `elayne-pattern-generator` skill and `docs/elayne/VERTICAL-WORKFLOW.md`). Do not copy prototype CSS/images verbatim. - Prototype images are Unsplash and **not shippable** — WP.org rejects them. Replace with CC0/GPL WebP images in `patterns/images/` and document in `readme.txt`. - Never commit `elayne-content` files here or hotlink its images. +- Legal vertical work happens in the `elayne-legal` child theme (`~/code/elayne-legal`), not here. The bundled `legal-*` patterns are slated for deprecation after the child's v1.0.0; do not add new legal patterns here. ## Coding Style & Naming Conventions - PHP: follow WordPress coding standards (tab indent, snake_case functions); keep logic minimal and filter-based. Use text domain `elayne` in translatable strings. diff --git a/CLAUDE.md b/CLAUDE.md index 69b8b3c..fdd000f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -313,6 +313,7 @@ Design prototypes and demo content for verticals live in a **separate private re - **Start new vertical/variant work from here**: read the prototype, then port it to block patterns (via the `elayne-pattern-generator` skill and the pt-cli scaffolding below). Do not copy prototype CSS or images into the theme verbatim. - **Prototype images are NOT shippable.** Unsplash is rejected by WP.org; replace with CC0/GPL images (WebP, <200KB, in `patterns/images/`) and document them in `readme.txt` before porting. - Never commit `elayne-content` files into this repo, and never hotlink its images. +- **Legal vertical work happens in the `elayne-legal` child theme** (`~/code/elayne-legal`, `imagewize/elayne-legal`), not here. The `legal-*` patterns and legal style variations still bundled in this theme are slated for deprecation once the child theme reaches v1.0.0; do not add new legal patterns here. ## New Vertical Development From 7aea9415dd1d2d4c540d0cd8c41630aee609fb47 Mon Sep 17 00:00:00 2001 From: Jasper Frumau Date: Sun, 25 Oct 2026 07:24:49 +0700 Subject: [PATCH 3/3] Document the vertical child theme setup in CLAUDE.md, AGENTS.md and README --- AGENTS.md | 3 +++ CLAUDE.md | 12 ++++++++++++ README.md | 2 ++ 3 files changed, 17 insertions(+) diff --git a/AGENTS.md b/AGENTS.md index 33f1456..136dbee 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -120,6 +120,9 @@ All design tokens live in `theme.json` — never hardcode colors, sizes, or spac **Pill/badge shrink-wrap rule (CRITICAL — prevents full-column-width pills):** WordPress `is-layout-flow` columns are internally `flex-direction: column` flex containers. Any child is a flex item and gets its `display` blockified — `inline-block`/`inline-flex` both compute to `block` regardless of inline styles or CSS. The default `align-items: normal` acts as `stretch`, making every child span the full column width. To shrink-wrap a pill/badge inside a `wp:column`, add `align-self: flex-start` and `width: fit-content` to its **CSS rule** (not inline). `is-style-status-pill` works in the editorial header only because that header is a `flex-direction: row` container (cross-axis vertical → width is content-driven); inside a `wp:column` it would need the same fix. +## Vertical child themes +Verticals are moving out of this theme into child themes that require Elayne (pilot: `elayne-legal`, `~/code/elayne-legal`, pre-v1.0.0). Slugs stay `elayne/-*`, the child's patterns win over the parent's while both exist, and each child has its own `CHANGELOG.md` and text domain. Child-only images use `get_stylesheet_directory_uri()`; shared images stay here. This theme's template patterns hard-code `"theme":"elayne"` on template-part blocks, so a child retargets that attribute in its own `functions.php`; keep the attribute here. Do not add new vertical pattern sets to this theme; the bundled `legal-*` patterns stay until a deprecation release. See `CLAUDE.md` for the full setup. + ## Content & Design Prototypes (private `elayne-content` repo) Design prototypes and demo content for verticals live in a separate **private** repo, `~/Documents/elayne-content` ([imagewize/elayne-content](https://github.com/imagewize/elayne-content)), kept out of the theme repo. - One self-contained folder per design: `/` or `-/` (e.g. `legal/`, `legal-corporate/`) with `index.html`, `style.css`, `CREDITS.md`, `images/`. Open `index.html` in a browser; no build. diff --git a/CLAUDE.md b/CLAUDE.md index fdd000f..5768103 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -315,6 +315,18 @@ Design prototypes and demo content for verticals live in a **separate private re - Never commit `elayne-content` files into this repo, and never hotlink its images. - **Legal vertical work happens in the `elayne-legal` child theme** (`~/code/elayne-legal`, `imagewize/elayne-legal`), not here. The `legal-*` patterns and legal style variations still bundled in this theme are slated for deprecation once the child theme reaches v1.0.0; do not add new legal patterns here. +## Vertical Child Themes (`elayne-legal` and later) + +Elayne is getting lighter by moving verticals into **child themes** that require Elayne as the parent, instead of bundling every vertical here. + +- **Pilot:** `elayne-legal` (`~/code/elayne-legal`, `imagewize/elayne-legal`). It holds the `legal-*` patterns, the Legal Corporate and Legal Blue variations, the Source Serif 4 font, the header and footer, and its own `CHANGELOG.md`. Not yet released (pre-v1.0.0); the `legal-*` patterns stay in this theme until a deprecation release removes them. +- **Child anatomy:** `style.css` with `Template: elayne`, `patterns/`, `styles/`, `parts/header.html` and `parts/footer.html`, `assets/` (fonts, block-style CSS, JS), `functions.php`. Pattern slugs stay `elayne/-*` (the child's copy wins over the parent's while both exist); the text domain is the child's own (`elayne-legal`). +- **Asset URLs:** vertical-only images use `get_stylesheet_directory_uri()`; images shared across verticals (avatars, icons) stay in this theme and use `get_template_directory_uri()`. A variation's `file:./assets/fonts/...` paths resolve against the child, so it must bundle every font its variation declares, including Open Sans and Mona Sans. +- **Template parts:** this theme's template patterns hard-code `"theme":"elayne"` on `wp:template-part` blocks (the compliance checker requires it), so a child's own parts are never reached by default. The child's `functions.php` retargets that attribute on `render_block_data`. Keep the attribute here. +- **Validators and tooling:** run `pt-cli check ... --theme=elayne` and `npx sentinel` from this repo against the child's `patterns/` path; run `wp pattern validate` against the copy synced to the demo site. Sync the child with `wp-ops rsync-package-to-site theme elayne-legal ~/code/elayne-legal` (create the target folder first). +- **Distribution:** public child themes go on Packagist; private or paid ones live in private GitHub repos installed via a `vcs` repository and a token. +- **New verticals:** decide public (child theme repo) vs. private early. Do not add new vertical pattern sets to this theme. + ## New Vertical Development When creating a new industry vertical (home-improvement, legal, fintech, etc.), follow the full workflow in `docs/elayne/VERTICAL-WORKFLOW.md`. Check `elayne-content` first for an existing prototype of the vertical, and decide whether the design is a **variant of an existing vertical** (new style variation + patterns, same `elayne/` category) or a genuinely new one. diff --git a/README.md b/README.md index 73e5b21..6eab5f3 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,8 @@ For developer installation and setup, see [CONTRIBUTING.md](CONTRIBUTING.md) **Industry verticals** with complete, ready-to-use pattern sets: Food & Beverage • Legal Services • Home Improvement • Spa & Wellness • Nail Salon • WooCommerce Store +**Vertical child themes:** Elayne is moving industry verticals into separate child themes that require Elayne as the parent, starting with a legal child theme (`elayne-legal`, in development). The legal patterns bundled here will be deprecated once it is released. + **8 style variations** — switch your entire site's look with one click in **Appearance → Editor → Styles** **32+ CSS block styles** — interactive animations and effects with zero JavaScript, applied via the Styles panel in the block editor