Merge pull request #1 from imagewize/feature/v2-absorb-elayne-cli

Feature/v2 Absorb Elayne Cli

Author: jasperf

CHANGELOG.md

@@ -0,0 +1,163 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [2.0.0] - 2026-05-08
+
+### Added
+
+**Scaffolding Commands (Phase 5 - absorbed from elayne-cli):**
+
+- `pattern:create` command (`src/Commands/Scaffold/PatternCreateCommand.php`) — Scaffold new Elayne block patterns from templates with interactive prompts:
+  - Supports 23 pattern templates (see below)
+  - Supports 18 pattern categories (header, footer, elayne/hero, elayne/features, etc.)
+  - Options: `--title`, `--slug`, `--template`, `--category`, `--keywords`, `--output-dir`, `--with-style`, `--style-dir`, `--shell-only`
+  - Automatically generates CSS file when `--with-style` flag is used
+  - Shell-only mode for editor-first workflow (generates PHP header + paste marker)
+
+- `layout:create` command (`src/Commands/Scaffold/LayoutCreateCommand.php`) — Scaffold new Elayne block layout patterns:
+  - Supports 8 layout skeletons (full-width, two-column, three-column, sidebar-left, sidebar-right, hero-image-left, hero-image-right, landing-page)
+  - Options: `--title`, `--slug`, `--layout`, `--category`, `--keywords`, `--output-dir`, `--shell-only`
+
+- `style:create` command (`src/Commands/Scaffold/StyleCreateCommand.php`) — Scaffold WordPress theme style variation JSON:
+  - Supports 5 preset color palettes (custom, legal, plumbing, spa, food-beverage)
+  - Generates full theme.json with color palette, gradients, and duotone presets
+  - Interactive color picker with validation
+  - Options: `--name`, `--vertical`, `--output-dir`
+
+- `pattern:list` command (`src/Commands/Scaffold/PatternListCommand.php`) — List all available resources:
+  - Lists all 23 templates with descriptions
+  - Lists all 13 snippets with descriptions
+  - Lists all 5 style variations with descriptions
+  - Lists all 18 pattern categories
+  - Set as default command (replaces `check` as default)
+
+**Template Files (23 patterns in `templates/` directory):**
+
+- `blank.php` — Empty pattern with header only
+- `hero-cover.php` — Full-bleed wp:cover with bottom-center content
+- `cta-fullwidth.php` — Full-width call-to-action band
+- `feature-grid-3col.php` — Full-width section with 3 feature cards
+- `stats-bar-fullwidth.php` — Dark full-width stats/numbers bar
+- `two-column-text-image.php` — Text left, image right two-column layout
+- `header-standard.php` — Standard header with logo, navigation, social links
+- `footer-standard.php` — Standard footer with brand blurb, nav columns, subnav
+- `testimonials-grid.php` — Responsive testimonial card grid with reviewer info
+- `pricing-comparison.php` — Three-tier pricing table with elevated recommended card
+- `blog-post-columns.php` — wp:query-driven 3-column post grid (portrait images)
+- `team-grid.php` — Team member profile grid with photo, name, title, bio
+- `woo-hero.php` — WooCommerce two-column hero
+- `woo-ticker.php` — WooCommerce server-rendered marquee ticker bar
+- `woo-shop-categories.php` — WooCommerce CSS bento grid layout
+- `woo-featured-products.php` — WooCommerce section header with View All + product-collection grid
+- `woo-our-story.php` — WooCommerce two-column brand story
+- `woo-testimonials.php` — WooCommerce three-column testimonial cards with ratings
+- `woo-newsletter.php` — WooCommerce full-bleed newsletter signup
+- `woo-shop-landing.php` — WooCommerce store homepage shell
+- `woo-cart.php` — WooCommerce cart page wrapper
+- `woo-checkout.php` — WooCommerce checkout page wrapper
+- `woo-filters-sidebar.php` — WooCommerce sticky sidebar with filters
+- `woo-product-grid.php` — WooCommerce filter-aware product-collection grid
+
+**Layout Files (8 layouts in `layouts/` directory):**
+
+- `full-width.php` — Single column, constrained
+- `two-column.php` — 50/50 columns block
+- `three-column.php` — Grid with 3 equal groups
+- `sidebar-left.php` — Narrow left sidebar (33%) + wide content area (66%)
+- `sidebar-right.php` — Wide content area (66%) + narrow right sidebar (33%)
+- `hero-image-left.php` — Cover image left + heading, text, CTA right
+- `hero-image-right.php` — Heading, text, CTA left + cover image right
+- `landing-page.php` — Hero + 3-column features + CTA
+
+**CSS Stubs (8 files in `css/` directory):**
+
+- `cta-fullwidth.css` — Styles for CTA full-width pattern
+- `feature-grid-3col.css` — Styles for 3-column feature grid
+- `generic.css` — Generic fallback CSS stub
+- `hero-cover.css` — Styles for hero cover pattern
+- `stats-bar-fullwidth.css` — Styles for stats bar pattern
+- `team-grid.css` — Styles for team grid pattern
+- `testimonials-grid.css` — Styles for testimonials grid pattern
+- `woo-filters-sidebar.css` — Comprehensive styles for WooCommerce filters sidebar
+
+**Code Snippets (13 files in `snippets/` directory):**
+
+- `eyebrow-heading-body.txt` — Eyebrow label + heading + body paragraph
+- `3col-grid-wrapper.txt` — Responsive 3-column grid wrapper
+- `stat-item.txt` — Number + label stat card (dark background)
+- `testimonial-card.txt` — Testimonial with stars, quote, author
+- `two-button-group.txt` — Primary + outline button pair
+- `overlay-grid-cover-card.txt` — Portrait cover image card + floating badge
+- `valid-cover.txt` — wp:cover with all required attributes
+- `valid-columns-wp66.txt` — wp:columns without inline gap/margin
+- `responsive-grid-min-width.txt` — wp:group grid layout with minimumColumnWidth
+- `valid-button-attr-order.txt` — wp:button with proper attribute order
+- `valid-fullwidth-section.txt` — alignfull outer group + margin reset
+- `valid-heading-with-preset.txt` — wp:heading with fontSize slug and matching utility class
+
+### Changed
+
+- **Application version**: Bumped from `1.0.0` to `2.0.0` in `bin/pt-cli`
+- **Package description**: Updated from "Pattern compliance checker" to "Pattern scaffolding and compliance checker for WordPress FSE block themes" in `composer.json`
+- **Default command**: Changed from `check` to `list` in `bin/pt-cli`
+- **Namespace migration**: All scaffold commands now under `Imagewize\PtCli\Commands\Scaffold\` namespace (previously `Imagewize\ElaynePatternCli\Commands` in elayne-cli)
+
+### Deprecated
+
+- `imagewize/elayne-cli` package — All scaffold functionality has been absorbed into pt-cli v2.0.0 (Phase 6)
+
+---
+
+## [1.0.0] - 2026-05-08
+
+Initial release — pattern compliance checker for WordPress FSE block themes.
+
+### Added
+
+- `bin/pt-cli` entry point with Symfony Console application
+- `check` command with `--theme` and `--autofix` flags
+- `src/Commands/CheckCommand.php` — CLI entry point for compliance checking
+- `src/Compliance/ComplianceChecker.php` — orchestrates rule sets per file and directory
+- `src/Compliance/Rules/RuleSetInterface.php` and `AbstractRuleSet.php` — rule set contract
+- `src/Compliance/Rules/BaseRules.php` — 19 compliance checks for any FSE theme:
+  - No hardcoded CSS font sizes (px/rem/em)
+  - No spacer blocks (use blockGap instead)
+  - Margin reset required on alignfull patterns
+  - Warn on `wp:columns` for 3+ columns (use responsive grid with `minimumColumnWidth`)
+  - No hardcoded media IDs
+  - Translated strings required (HTML tags + alt attributes)
+  - Proper `patternName` in outermost block metadata
+  - No HTML comments between opening tags and block comments
+  - No custom-domain emails (use `example@example.com`)
+  - No hardcoded external URLs in `src` attributes
+  - `wp:button` root `fontSize` must use `style.typography`
+  - `wp:button` `className` must come before `style` in JSON
+  - Cover block `minHeight` must have root-level units
+  - No empty border side objects `{}` in block JSON
+  - `wp:buttons` must have `<div class="wp-block-buttons">` wrapper
+  - No `overflow:hidden` as inline style on group blocks
+  - No `opacity` as inline style on HTML elements
+  - Font preset classes must match root-level `fontSize`/`fontFamily`
+  - No stale inline `blockGap`/`gap`/`margin` on group/column wrappers
+- `src/Compliance/Rules/WooCommerceRules.php` — 5 WooCommerce-specific checks:
+  - `product-title` inside `product-template` must use `post-title` + `__woocommerceNamespace`
+  - WC native blocks must not have `__woocommerceNamespace`
+  - `product-collection` must have `query` metadata
+  - `product-collection` must have `<div class="wp-block-woocommerce-product-collection">` wrapper
+  - `product-collection` must not have both `layout` and `displayLayout`
+- `src/Compliance/Config/ConfigLoader.php` — loads and merges JSON config with project-level override support
+- `src/Compliance/Config/ThemeConfig.php` — typed config accessor
+- `config/base.json` — default rules for any FSE theme
+- `config/elayne.json` — Elayne-specific rules (extends base): theme attribute, `elayne/` prefix, emoji check, WooCommerce rules, template exceptions
+- Five autofixable rules applied by `--autofix`:
+  - Strip inline `gap:` from group/column wrappers
+  - Strip inline `margin:` from flex group/column wrappers
+  - Reorder `wp:button` JSON keys (`className` before `style`)
+  - Migrate `wp:button` root `fontSize` to `style.typography`
+  - Inject `has-{slug}-font-size` class on heading/paragraph elements
+- Project-level config override: `.pt-cli/{theme}.json` in project root
+- `README.md` with full usage, configuration, and rule reference
+- `LICENSE` (MIT)

README.md

@@ -1,8 +1,8 @@
 # pt-cli
 
-Pattern compliance checker for WordPress FSE block themes.
+Pattern scaffolding and compliance checker for WordPress FSE block themes.
 
-Checks pattern `.php` files for structural and naming rule violations — no WordPress context required. Runs on the host machine as a standalone PHP CLI tool.
+Generates block pattern PHP files, layout patterns, and style variations. Checks pattern `.php` files for structural and naming rule violations — no WordPress context required. Runs on the host machine as a standalone PHP CLI tool.
 
 ## Installation
 
@@ -22,6 +22,27 @@ Requires PHP 8.1+.
 
 ## Usage
 
+### Scaffolding Commands
+
+```bash
+# List available templates, snippets, categories, and style variations
+pt-cli list
+
+# Scaffold a new pattern from a template
+pt-cli pattern:create --title="My Hero" --slug=my-hero --template=hero-cover --category=elayne/hero
+
+# Scaffold a layout pattern
+pt-cli layout:create --title="Landing Page" --slug=landing --layout=landing-page --category=elayne/pages
+
+# Scaffold a theme style variation
+pt-cli style:create --name="Ocean Legal" --vertical=legal
+
+# Full interactive mode (no options = prompts)
+pt-cli pattern:create
+```
+
+### Compliance Checking
+
 ```bash
 # Check all patterns in a directory
 pt-cli check /path/to/patterns
@@ -36,15 +57,119 @@ pt-cli check /path/to/patterns/header-default.php --theme=elayne
 pt-cli check /path/to/patterns --theme=elayne --autofix
 ```
 
+## Commands Reference
+
+| Command | Description |
+|---------|-------------|
+| `list` (default) | List available templates, snippets, categories, and style variations |
+| `pattern:create` | Scaffold a new Elayne block pattern from a template |
+| `layout:create` | Scaffold a new Elayne block layout pattern |
+| `style:create` | Scaffold a WordPress theme style variation JSON |
+| `check` | Check pattern files for compliance violations |
+
 ## Workflow
 
-`pt-cli` is one tool in a three-step pattern workflow:
+`pt-cli` is an all-in-one tool for WordPress FSE block theme development:
+
+### Scaffolding Workflow
+
+| Step | Tool | Purpose | Where |
+|------|------|---------|-------|
+| 1 | `pt-cli pattern:create` or `pt-cli layout:create` | Generate pattern/layout scaffolding | Host |
+| 2 | Build in WP editor | Create pattern content | VM |
+| 3 | Copy blocks | Copy all blocks from editor | VM |
+| 4 | `pt-cli pattern:create --shell-only` | Create PHP file with paste marker | Host |
+| 5 | Replace marker | Paste blocks into pattern file | Host |
+
+### Compliance Workflow
 
 | Step | Tool | Purpose | Where |
 |------|------|---------|-------|
-| 1 | `elayne scaffold` | Generate pattern scaffolding | Host |
+| 1 | `pt-cli check` | Generate pattern scaffolding | Host |
 | 2 | `wp pattern validate` | Structural validation (WordPress parser) | VM |
-| 3 | `pt-cli check` | Compliance checking | Host |
+| 3 | `pt-cli check --autofix` | Compliance checking with fixes | Host |
+
+## Templates
+
+**23 pre-built pattern templates** covering common use cases:
+
+| Template | Description |
+|----------|-------------|
+| `blank` | Empty pattern with header only |
+| `hero-cover` | Full-bleed wp:cover with bottom-center content |
+| `cta-fullwidth` | Full-width call-to-action band |
+| `feature-grid-3col` | Full-width section with 3 feature cards |
+| `stats-bar-fullwidth` | Dark full-width stats/numbers bar |
+| `two-column-text-image` | Text left, image right two-column layout |
+| `header-standard` | Standard header — logo, navigation, social links |
+| `footer-standard` | Standard footer — brand blurb, nav columns, subnav |
+| `testimonials-grid` | Responsive testimonial card grid with reviewer info |
+| `pricing-comparison` | Three-tier pricing table with elevated recommended card |
+| `blog-post-columns` | wp:query-driven 3-column post grid (portrait images) |
+| `team-grid` | Team member profile grid — photo, name, title, bio |
+
+**WooCommerce templates:**
+
+| Template | Description |
+|----------|-------------|
+| `woo-hero` | Two-column hero: text + CTA left, decorative cover right |
+| `woo-ticker` | Server-rendered marquee ticker bar (needs render_block filter) |
+| `woo-shop-categories` | CSS bento grid: one large featured card + four smaller cards |
+| `woo-featured-products` | Section header with View All + product-collection 4-col grid |
+| `woo-our-story` | Two-column brand story: monogram watermark left, text + stats right |
+| `woo-testimonials` | Three-column testimonial cards with star ratings and avatar circles |
+| `woo-newsletter` | Full-bleed newsletter signup with decorative eyebrow |
+| `woo-shop-landing` | Store homepage shell that composes sub-patterns in sequence |
+| `woo-cart` | Full-width cart page wrapper (Inserter: false) |
+| `woo-checkout` | Full-width checkout page wrapper (Inserter: false) |
+| `woo-filters-sidebar` | Sticky sidebar: price slider + colour-chip attribute + two checkbox-list attributes |
+| `woo-product-grid` | Filter-aware product-collection grid with sort toolbar + pagination |
+
+## Layouts
+
+**8 layout skeletons** for rapid page construction:
+
+| Layout | Description |
+|--------|-------------|
+| `full-width` | Single column, constrained — simplest starting point |
+| `two-column` | 50/50 columns block |
+| `three-column` | Grid with 3 equal groups |
+| `sidebar-left` | Narrow left sidebar (33%) + wide content area (66%) |
+| `sidebar-right` | Wide content area (66%) + narrow right sidebar (33%) |
+| `hero-image-left` | Cover image left + heading, text, CTA right |
+| `hero-image-right` | Heading, text, CTA left + cover image right |
+| `landing-page` | Hero + 3-column features + CTA — no header/footer wrapper |
+
+## Style Variations
+
+**5 preset color palettes** for common business verticals:
+
+| Vertical | Color Scheme |
+|----------|--------------|
+| `custom` | Enter your own hex color values |
+| `legal` | Navy blue + gold |
+| `plumbing` | Dark blue + orange |
+| `spa` | Sage green + sand |
+| `food-beverage` | Burgundy + gold |
+
+## Snippets
+
+**13 reusable code snippets** for common pattern components:
+
+| Snippet | Description |
+|---------|-------------|
+| `eyebrow-heading-body.txt` | Eyebrow label + heading + body paragraph |
+| `3col-grid-wrapper.txt` | Responsive 3-column grid wrapper |
+| `stat-item.txt` | Number + label stat card (dark background) |
+| `testimonial-card.txt` | Testimonial with stars, quote, author |
+| `two-button-group.txt` | Primary + outline button pair |
+| `overlay-grid-cover-card.txt` | Portrait cover image card + floating badge (use wp:cover, NOT wp:image) |
+| `valid-cover.txt` | wp:cover with all required attrs: dimRatio, backgroundColor/customGradient, minHeight (root integer) + minHeightUnit |
+| `valid-columns-wp66.txt` | wp:columns without inline gap/margin; isStackedOnMobile:false → is-not-stacked-on-mobile class |
+| `responsive-grid-min-width.txt` | wp:group grid layout with minimumColumnWidth — preferred over wp:columns for 3+ columns |
+| `valid-button-attr-order.txt` | wp:button with className/colors before style; font size via style.typography.fontSize |
+| `valid-fullwidth-section.txt` | alignfull outer group + margin reset (top/bottom:"0" no units) + constrained inner group |
+| `valid-heading-with-preset.txt` | wp:heading with fontSize slug in JSON and matching has-{slug}-font-size utility class in HTML |
 
 ## Configuration
 
@@ -130,6 +255,7 @@ Config lookup order:
 git clone https://github.com/imagewize/pt-cli
 cd pt-cli
 composer install
+bin/pt-cli list
 bin/pt-cli check --help
 ```
 

bin/pt-cli

@@ -14,9 +14,17 @@ foreach ($autoloadPaths as $path) {
 }
 
 use Imagewize\PtCli\Commands\CheckCommand;
+use Imagewize\PtCli\Commands\Scaffold\LayoutCreateCommand;
+use Imagewize\PtCli\Commands\Scaffold\PatternCreateCommand;
+use Imagewize\PtCli\Commands\Scaffold\PatternListCommand;
+use Imagewize\PtCli\Commands\Scaffold\StyleCreateCommand;
 use Symfony\Component\Console\Application;
 
-$application = new Application('pt-cli', '1.0.0');
+$application = new Application('pt-cli', '2.0.0');
 $application->add(new CheckCommand());
-$application->setDefaultCommand('check');
+$application->add(new PatternCreateCommand());
+$application->add(new LayoutCreateCommand());
+$application->add(new StyleCreateCommand());
+$application->add(new PatternListCommand());
+$application->setDefaultCommand('list');
 $application->run();

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "imagewize/pt-cli",
-    "description": "Pattern compliance checker for WordPress FSE block themes",
+    "description": "Pattern scaffolding and compliance checker for WordPress FSE block themes",
     "type": "project",
     "license": "MIT",
     "require": {

css/cta-fullwidth.css

@@ -0,0 +1,20 @@
+/* ── Elayne TODO-title ── */
+
+.elayne-TODO-slug {
+}
+
+.elayne-TODO-slug .wp-block-buttons {
+	justify-content: center;
+}
+
+@media (max-width: 600px) {
+	.elayne-TODO-slug .wp-block-buttons {
+		flex-direction: column;
+		align-items: stretch;
+	}
+	.elayne-TODO-slug .wp-block-button,
+	.elayne-TODO-slug .wp-block-button__link {
+		width: 100%;
+		text-align: center;
+	}
+}