Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions AGENTS.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,18 @@ 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/<vertical>-*`, 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: `<vertical>/` or `<vertical>-<variant>/` (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.
- 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.
- Patterns: name files with kebab-case slugs (e.g., `hero-two-tone.php`) and match the `title`/`categories` to existing taxonomy.
Expand Down
25 changes: 24 additions & 1 deletion CLAUDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -304,9 +304,32 @@ 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: `<vertical>/` or `<vertical>-<variant>/` (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.
- **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/<vertical>-*` (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`.
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/<vertical>` 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.

Expand Down
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading