From 7d412f769684cdc3aa1a87921185e6e6b8ebaf30 Mon Sep 17 00:00:00 2001
From: Fellyph Cintra <fellyph.cintra@gmail.com>
Date: Wed, 11 Feb 2026 12:47:37 +0000
Subject: [PATCH 1/7] Add wp-patterns documentation

Introduces a new SKILL.md file detailing the purpose, guidelines, and procedures for creating WordPress block patterns. The document emphasizes technical correctness, design distinctiveness, accessibility, and theme compatibility, providing a comprehensive framework for developers to follow when designing patterns.

This addition aims to enhance the quality and consistency of block patterns within the WordPress ecosystem.
---
 skills/wp-patterns/SKILL.md | 215 ++++++++++++++++++++++++++++++++++++
 1 file changed, 215 insertions(+)
 create mode 100644 skills/wp-patterns/SKILL.md

diff --git a/skills/wp-patterns/SKILL.md b/skills/wp-patterns/SKILL.md
new file mode 100644
index 0000000..fab526b
--- /dev/null
+++ b/skills/wp-patterns/SKILL.md
@@ -0,0 +1,215 @@
+---
+name: wp-patterns
+description: "Generate technically correct, design-distinctive WordPress block patterns. Use when creating block patterns, starter page patterns, template patterns, template part patterns, or improving pattern design quality. Covers pattern registration (PHP headers, auto/manual), block markup syntax, theme.json design tokens, categories, template types, accessibility, and i18n/escaping."
+compatibility: "WordPress 6.0+ for auto-registration, 6.7+ for full preset support. Patterns use block markup (HTML comments with JSON), PHP file headers, and theme.json presets."
+---
+
+# WordPress Block Patterns
+
+## Purpose
+
+Generate production-grade WordPress block patterns that are:
+1. **Technically correct** — valid block markup, proper PHP escaping and i18n, correct file headers
+2. **Design-distinctive** — avoid generic AI aesthetics through intentional layout, color, and typography choices
+3. **Theme-compatible** — use preset slugs that adapt across themes and style variations
+4. **Accessible** — sequential heading levels, descriptive alt text, sufficient contrast, meaningful button labels
+
+## Guardrails
+
+Before writing any pattern, internalize these constraints:
+
+1. **Block markup only** — all visual design is expressed through block comment attributes and theme.json presets. No inline `<style>` tags, no custom CSS classes, no arbitrary HTML outside of block wrappers.
+
+2. **No JavaScript** — patterns are static block markup. For interactivity, use blocks that natively support it (Navigation, Search, Query Loop). Never inject `<script>` tags.
+
+3. **PHP runs at `init`, not render** — pattern files execute PHP once during registration. Never use query-dependent functions (`get_posts()`, `the_title()`, `wp_get_current_user()`). Safe: `esc_html_e()`, `get_theme_file_uri()`.
+
+4. **Always escape** — every PHP output must use `esc_html__()`, `esc_attr__()`, or `esc_url()`. No raw `echo` of user-facing strings.
+
+5. **Always i18n** — every user-visible string must be wrapped in a translation function with the theme/plugin text domain. Use `esc_html_e()` (echo + escape + translate) or `esc_html__()` (return + escape + translate).
+
+6. **Prefer presets over hardcoded values** — use `"backgroundColor":"primary"` not `"style":{"color":{"background":"#0073aa"}}`. Presets adapt to theme changes and style variations.
+
+7. **Valid nesting** — every opening `<!-- wp:block -->` must have a matching `<!-- /wp:block -->`. Nesting must be properly ordered. Self-closing blocks use `<!-- wp:block /-->`.
+
+Reference: `references/block-markup-reference.md` for syntax, `references/anti-patterns.md` for what to avoid.
+
+## Procedure
+
+### 1) Clarify the Pattern Brief
+
+Gather from the user (or infer from context):
+- **Pattern type**: section pattern, starter page pattern, template pattern, or template part pattern?
+- **Target theme**: specific theme (use its presets) or generic (use default WP presets)?
+- **Content purpose**: what does this pattern communicate? (hero, testimonials, pricing, etc.)
+- **Design direction**: any aesthetic preferences? (bold, minimal, editorial, playful, corporate)
+- **Technical scope**: does it need PHP (theme assets, i18n) or pure block markup (plugin distribution)?
+
+### 2) Design Thinking
+
+Before writing markup, make **5 deliberate design decisions**. This is what separates distinctive patterns from generic AI output.
+
+Reference: `references/design-with-tokens.md` for translating decisions to block attributes.
+
+#### Decision 1: Purpose
+What does this pattern achieve for the end user? A hero converts visitors. A testimonial grid builds trust. A pricing table drives comparison. Let purpose drive every subsequent choice.
+
+#### Decision 2: Tone
+Choose a clear direction and map it to block attributes:
+
+| Tone | Color Strategy | Typography | Layout |
+|------|---------------|------------|--------|
+| **Bold/energetic** | High contrast, accent backgrounds, gradients | XX-large headings, tight letter-spacing, uppercase accents | Full-width, asymmetric columns, large padding |
+| **Minimal/refined** | Base + contrast only, subtle tertiary sections | Restrained sizes, generous line-height | Constrained width, generous whitespace, centered |
+| **Editorial/magazine** | Dark sections alternating with light | Mixed font families, varied heading scales | Asymmetric splits (66/33), media-text blocks |
+| **Playful/creative** | Multiple accent colors, bright backgrounds | Large display sizes, varied weights | Grid layouts, unexpected column ratios, rounded corners |
+| **Corporate/professional** | Neutral palette, primary for CTAs only | Consistent scale, body font dominant | Equal columns, structured grid, minimal decoration |
+
+#### Decision 3: Spatial Composition
+Choose your primary layout strategy:
+- **Constrained centered** — classic content width with wide breakouts
+- **Full-width sections** — alternating background bands
+- **Asymmetric split** — 60/40 or 70/30 columns with content + media
+- **Grid** — CSS grid for cards, team members, portfolio items
+- **Stacked vertical** — flex column with varied spacing for editorial feel
+
+Vary spacing intentionally:
+- Tight `blockGap` (spacing|20-30) for related elements within a card
+- Standard `blockGap` (spacing|40) for flowing content
+- Generous padding (spacing|60-80) on section wrappers for breathing room
+
+#### Decision 4: Typography Hierarchy
+Plan your type scale before writing markup:
+- **Hero heading**: `fontSize:"xx-large"` + `fontFamily:"heading"` + tight `lineHeight`
+- **Section heading**: `fontSize:"x-large"` + `fontFamily:"heading"`
+- **Subtitle/lead**: `fontSize:"large"` + `textColor:"secondary"` or `fontFamily:"body"`
+- **Body**: `fontSize:"medium"` or default
+- **Caption/meta**: `fontSize:"small"` + `textColor:"secondary"`
+
+Add at least one typographic accent:
+- Uppercase + letter-spacing for labels
+- Tight letter-spacing on display headings
+- Italic for pull quotes
+- Monospace for technical/code content
+
+#### Decision 5: Color Strategy
+Plan section-by-section color flow:
+- **Light section**: `base` background, `contrast` text (default)
+- **Dark section**: `contrast` background, `base` text (inverted)
+- **Accent section**: `primary` or `tertiary` background
+- **Gradient section**: cover block with gradient overlay
+
+A pattern with multiple sections should vary backgrounds — don't use the same background for every section.
+
+### 3) Plan Block Structure
+
+Sketch the nesting tree before writing markup. Example for a hero pattern:
+
+```
+Group (full-width, constrained layout, dark bg, vertical padding 80)
+  Group (constrained inner, flex vertical, center align)
+    Paragraph (uppercase label, small, letter-spacing, accent color)
+    Heading (h1, xx-large, heading font, tight line-height)
+    Paragraph (lead text, large, secondary color)
+    Buttons (flex, center)
+      Button (primary bg, base text)
+      Button (outline style)
+```
+
+This step catches nesting errors and ensures intentional hierarchy before you write a single comment tag.
+
+### 4) Write the Pattern File
+
+Assemble the PHP header and block markup.
+
+**File header** (for theme auto-registration):
+```php
+<?php
+/**
+ * Title: [Descriptive Name]
+ * Slug: theme-slug/pattern-name
+ * Categories: [comma-separated slugs]
+ * Keywords: [search terms]
+ * Viewport Width: 1400
+ * Block Types: [if starter/template part pattern]
+ * Template Types: [if template pattern]
+ */
+?>
+```
+
+Reference: `references/pattern-registration.md` for all header fields and PHP rules.
+Reference: `references/pattern-categories-and-types.md` for category selection and template types.
+
+**Block markup body:**
+- Follow the nesting tree from step 3
+- Use preset slugs for colors, font sizes, spacing
+- Include `esc_html_e()` for all visible text
+- Include `esc_url( get_theme_file_uri() )` for theme images
+- Use placeholder text that reflects real content (not "Lorem ipsum" — use realistic example text appropriate to the pattern's purpose)
+
+### 5) Design Quality Check
+
+Review against anti-patterns (`references/anti-patterns.md`):
+
+- [ ] **Not generic**: pattern makes at least 3 distinctive design choices
+- [ ] **Layout variety**: not defaulting to 3 equal columns or uniform symmetric layouts
+- [ ] **Color rhythm**: sections alternate or vary backgrounds — not all the same
+- [ ] **Typography contrast**: headings clearly distinct from body (size, family, or weight)
+- [ ] **Spatial intention**: padding and gaps vary by context, not uniform everywhere
+- [ ] **Meaningful content**: placeholder text reflects real use, buttons describe actions
+
+### 6) Technical Validation
+
+- [ ] Every `<!-- wp:block -->` has matching `<!-- /wp:block -->`
+- [ ] JSON in block comments is valid (no trailing commas, strings double-quoted)
+- [ ] All user-visible strings use `esc_html_e()` or `esc_html__()`
+- [ ] All URLs use `esc_url()`
+- [ ] All attribute values with translatable text use `esc_attr_e()` or `esc_attr__()`
+- [ ] Image alt text is descriptive (not empty for informational images)
+- [ ] Heading levels are sequential (h2 → h3 → h4, never skip)
+- [ ] Preset slugs are valid defaults or documented as theme-specific
+- [ ] `Slug` in header uses correct namespace: `theme-slug/pattern-name`
+- [ ] No inline `<style>`, no `<script>`, no custom CSS classes
+- [ ] No query-dependent PHP functions
+
+### 7) Verification
+
+Test the pattern in a real WordPress environment:
+
+**Using WordPress Playground (recommended):**
+```bash
+npx @wp-playground/cli@latest server --auto-mount
+```
+Mount the theme directory and verify:
+- Pattern appears in inserter under specified categories
+- Pattern inserts without block validation errors
+- Layout renders correctly at desktop and mobile widths
+- Content is editable (text, images, buttons)
+- If `templateLock` is used, locked elements resist editing
+
+**Manual check:**
+- Paste block markup into the Code Editor view in WordPress
+- Switch to Visual Editor — blocks should parse without "Attempt Block Recovery" prompts
+- If recovery is needed, the markup has syntax errors
+
+## Example Prompts
+
+### Hero Section
+> "Create a bold hero pattern with a large heading, subtitle, and two CTA buttons. Dark background, full-width, for a creative agency theme."
+
+Expected: Cover or Group block with contrast bg, constrained inner, heading with xx-large + heading font, paragraph with secondary color, Buttons with primary + outline styles.
+
+### Testimonial Grid
+> "Create a 3-column testimonial grid with avatar, quote, name, and role. Alternating card backgrounds."
+
+Expected: Group wrapper, CSS grid (3 columns, responsive), inner Group cards with varied tertiary/base backgrounds, Image block for avatar (rounded border-radius), Paragraph for quote (italic), Heading h3 for name, Paragraph small for role.
+
+### Blog Post Listing
+> "Create a starter page pattern for a blog index with featured post hero and 3-column grid of recent posts below."
+
+Expected: `Block Types: core/post-content` header, Query Loop for featured post (perPage 1, large layout), second Query Loop for grid (perPage 3, grid layout with post-template), clear visual separation between sections.
+
+### Footer with Columns
+> "Create a 4-column footer pattern with logo, navigation links, contact info, and social icons. Dark background."
+
+Expected: `Block Types: core/template-part/footer` header, Group full-width with contrast bg, Columns (4), Site Logo block, Navigation or list blocks, Paragraph blocks for contact, Social Icons block. `Inserter: no`.

From 25f0454e2d6e22f4677005c0e4a09fec8af155af Mon Sep 17 00:00:00 2001
From: Fellyph Cintra <fellyph.cintra@gmail.com>
Date: Wed, 11 Feb 2026 12:47:45 +0000
Subject: [PATCH 2/7] Add anti-patterns documentation for WordPress block
 patterns

Introduces a new markdown file detailing common mistakes in design and development of WordPress block patterns. The document covers generic aesthetic markers, technical anti-patterns, and accessibility failures, providing guidelines for improvement. This addition aims to enhance the quality and usability of block patterns within the WordPress ecosystem.
---
 .../wp-patterns/references/anti-patterns.md   | 151 ++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100644 skills/wp-patterns/references/anti-patterns.md

diff --git a/skills/wp-patterns/references/anti-patterns.md b/skills/wp-patterns/references/anti-patterns.md
new file mode 100644
index 0000000..0ab9afc
--- /dev/null
+++ b/skills/wp-patterns/references/anti-patterns.md
@@ -0,0 +1,151 @@
+# Anti-Patterns
+
+Common mistakes that produce generic, broken, or inaccessible patterns.
+
+## Generic AI Aesthetic Markers
+
+These indicate lazy generation — patterns that look like every other AI output:
+
+**Layout monotony:**
+- Three equal-width columns for everything (services, team, features)
+- Identical padding on every section (`spacing|50` everywhere)
+- Symmetric layouts with no visual hierarchy variation
+- Every section centered, no left-aligned or asymmetric compositions
+
+**Color flatness:**
+- Only using `base` and `contrast` — no accent colors, no dark sections
+- All sections have the same background — no rhythm of light/dark/accent
+- Buttons all the same color with no primary/secondary distinction
+
+**Typography sameness:**
+- All headings the same size — no scale contrast between hero and section heads
+- No use of `fontFamily` for heading/body distinction
+- Missing typographic details: no letter-spacing, no line-height tuning
+- All text the same color — no use of `secondary` or muted tones for supporting text
+
+**How to fix:** Make at least 3 distinctive design choices per pattern:
+1. One unexpected layout decision (asymmetric split, wide/narrow alternation, grid)
+2. One bold color move (dark section, accent background, gradient)
+3. One typographic contrast (display size, letter-spacing, font family switch)
+
+## Technical Anti-Patterns
+
+### Inline Styles and Custom CSS
+```html
+<!-- WRONG: inline <style> tag -->
+<style>.my-custom-hero { background: linear-gradient(...); }</style>
+
+<!-- WRONG: custom CSS class not from blocks -->
+<div class="my-custom-card">
+
+<!-- CORRECT: use block attributes -->
+<!-- wp:group {"style":{"color":{"gradient":"linear-gradient(...)"}}} -->
+```
+
+### Hardcoded Colors
+```json
+// WRONG: hardcoded hex when a preset exists
+{"style":{"color":{"background":"#000000","text":"#ffffff"}}}
+
+// CORRECT: use theme presets for theme compatibility
+{"backgroundColor":"contrast","textColor":"base"}
+```
+
+Use hardcoded values only when no suitable preset exists and the design requires a specific color. Always prefer presets — they adapt to theme changes and style variations.
+
+### Missing Escaping and i18n
+```php
+// WRONG: raw text, not translatable, not escaped
+<h2>Our Services</h2>
+
+// WRONG: translatable but not escaped
+<h2><?php _e( 'Our Services', 'theme-slug' ); ?></h2>
+
+// CORRECT: escaped and translatable
+<h2><?php esc_html_e( 'Our Services', 'theme-slug' ); ?></h2>
+```
+
+### Query-Dependent PHP
+```php
+// WRONG: runs at registration time, not render time
+<?php $recent = get_posts( array( 'numberposts' => 3 ) ); ?>
+
+// CORRECT: use Query Loop block for dynamic content
+<!-- wp:query {"query":{"perPage":3,"postType":"post"}} -->
+```
+
+### Unclosed or Mismatched Blocks
+```html
+<!-- WRONG: missing closing comment -->
+<!-- wp:group -->
+<div class="wp-block-group">
+  <!-- wp:heading -->
+  <h2>Title</h2>
+  <!-- /wp:heading -->
+<!-- Missing: /wp:group -->
+
+<!-- WRONG: mismatched nesting -->
+<!-- wp:group -->
+  <!-- wp:columns -->
+<!-- /wp:group -->
+  <!-- /wp:columns -->
+```
+
+Every `<!-- wp:block -->` must have a matching `<!-- /wp:block -->` and nesting must be properly ordered.
+
+### Placeholder Image URLs
+```html
+<!-- WRONG: external placeholder service -->
+<img src="https://via.placeholder.com/800x400" alt=""/>
+
+<!-- CORRECT: use theme assets or descriptive placeholder -->
+<img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.webp' ) ); ?>"
+     alt="<?php esc_attr_e( 'Featured image', 'theme-slug' ); ?>"/>
+```
+
+## Accessibility Failures
+
+### Missing Alt Text
+```html
+<!-- WRONG -->
+<!-- wp:image -->
+<figure class="wp-block-image"><img src="photo.jpg" alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- CORRECT: descriptive alt for informational images -->
+<!-- wp:image {"alt":"Team members collaborating around a whiteboard"} -->
+```
+
+Decorative images (backgrounds, dividers) can use empty alt, but informational images must describe content.
+
+### Skipped Heading Levels
+```html
+<!-- WRONG: jumps from h2 to h5 -->
+<!-- wp:heading {"level":2} --> Section Title
+<!-- wp:heading {"level":5} --> Subsection
+
+<!-- CORRECT: sequential levels -->
+<!-- wp:heading {"level":2} --> Section Title
+<!-- wp:heading {"level":3} --> Subsection
+```
+
+Patterns should use `h2` as the top level (h1 is the page title). Descend sequentially: h2 → h3 → h4.
+
+### Insufficient Color Contrast
+When using dark backgrounds, verify text presets provide adequate contrast:
+- `{"backgroundColor":"contrast","textColor":"base"}` — typically safe (dark bg, light text)
+- Custom color combinations must meet WCAG 2.1 AA (4.5:1 for body text, 3:1 for large text)
+
+### Non-Descriptive Button Text
+```html
+<!-- WRONG -->
+<a class="wp-block-button__link">Click Here</a>
+<a class="wp-block-button__link">Read More</a>
+
+<!-- CORRECT: describes the action or destination -->
+<a class="wp-block-button__link"><?php esc_html_e( 'View Our Services', 'theme-slug' ); ?></a>
+<a class="wp-block-button__link"><?php esc_html_e( 'Download the Report', 'theme-slug' ); ?></a>
+```
+
+### Missing ARIA on Decorative Elements
+Spacer blocks should include `aria-hidden="true"` (WordPress adds this automatically). If generating custom separator patterns, ensure decorative elements don't announce to screen readers.

From e5ead262291361dacf2e5a56d4cf860d432f5414 Mon Sep 17 00:00:00 2001
From: Fellyph Cintra <fellyph.cintra@gmail.com>
Date: Wed, 11 Feb 2026 12:47:54 +0000
Subject: [PATCH 3/7] Add block markup reference documentation

Introduces a new markdown file that serves as a comprehensive reference for WordPress block markup. The document outlines comment syntax, most-used blocks in patterns, style attribute structure, preset class naming conventions, block locking, and alignment options. This addition aims to provide developers with clear guidelines and examples for effectively utilizing block patterns in WordPress.
---
 .../references/block-markup-reference.md      | 220 ++++++++++++++++++
 1 file changed, 220 insertions(+)
 create mode 100644 skills/wp-patterns/references/block-markup-reference.md

diff --git a/skills/wp-patterns/references/block-markup-reference.md b/skills/wp-patterns/references/block-markup-reference.md
new file mode 100644
index 0000000..e582fa0
--- /dev/null
+++ b/skills/wp-patterns/references/block-markup-reference.md
@@ -0,0 +1,220 @@
+# Block Markup Reference
+
+## Comment Syntax
+
+WordPress blocks are serialized as HTML comments with JSON attributes.
+
+```html
+<!-- wp:block-name {"attr":"value"} -->
+<div class="wp-block-block-name">Inner content</div>
+<!-- /wp:block-name -->
+
+<!-- wp:block-name {"attr":"value"} /-->  (self-closing, no inner content)
+```
+
+Rules:
+- Opening tag: `<!-- wp:namespace/name {JSON} -->`
+- Core blocks omit namespace: `<!-- wp:heading -->` (not `core/heading`)
+- JSON must be valid — no trailing commas, strings double-quoted
+- Self-closing blocks (spacer, separator, image with no caption): end with `/-->`
+- Every opening comment **must** have a matching closing comment
+
+## Most-Used Blocks in Patterns
+
+### Layout Blocks
+
+**Group** — primary container, supports all layout types:
+```html
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group">
+  <!-- inner blocks -->
+</div>
+<!-- /wp:group -->
+```
+
+Layout types:
+- `{"type":"constrained"}` — centered with max-width (default for sections)
+- `{"type":"constrained","contentSize":"800px","wideSize":"1200px"}` — custom widths
+- `{"type":"flex","flexWrap":"nowrap"}` — horizontal row
+- `{"type":"flex","orientation":"vertical"}` — vertical stack
+- `{"type":"grid","columnCount":3}` — CSS grid with fixed columns
+- `{"type":"grid","minimumColumnWidth":"250px"}` — responsive auto-fill grid
+
+Tag name override: `{"tagName":"section"}`, `{"tagName":"header"}`, `{"tagName":"footer"}`
+
+**Columns / Column:**
+```html
+<!-- wp:columns -->
+<div class="wp-block-columns">
+  <!-- wp:column {"width":"66.66%"} -->
+  <div class="wp-block-column" style="flex-basis:66.66%">
+    <!-- inner blocks -->
+  </div>
+  <!-- /wp:column -->
+  <!-- wp:column {"width":"33.33%"} -->
+  <div class="wp-block-column" style="flex-basis:33.33%">
+    <!-- inner blocks -->
+  </div>
+  <!-- /wp:column -->
+</div>
+<!-- /wp:columns -->
+```
+
+### Content Blocks
+
+**Heading:**
+```html
+<!-- wp:heading {"level":2,"fontSize":"x-large"} -->
+<h2 class="wp-block-heading has-x-large-font-size">Heading text</h2>
+<!-- /wp:heading -->
+```
+
+**Paragraph:**
+```html
+<!-- wp:paragraph {"fontSize":"medium","textColor":"contrast"} -->
+<p class="has-contrast-color has-text-color has-medium-font-size">Body text</p>
+<!-- /wp:paragraph -->
+```
+
+**Image:**
+```html
+<!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full">
+  <img src="https://example.com/image.jpg" alt="Descriptive alt text"/>
+</figure>
+<!-- /wp:image -->
+```
+
+**Cover:**
+```html
+<!-- wp:cover {"url":"https://example.com/bg.jpg","dimRatio":60,"overlayColor":"contrast","minHeight":500,"minHeightUnit":"px","layout":{"type":"constrained"}} -->
+<div class="wp-block-cover" style="min-height:500px">
+  <span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-60 has-background-dim"></span>
+  <img class="wp-block-cover__image-background" alt="" src="https://example.com/bg.jpg" data-object-fit="cover"/>
+  <div class="wp-block-cover__inner-container">
+    <!-- inner blocks -->
+  </div>
+</div>
+<!-- /wp:cover -->
+```
+
+**Buttons / Button:**
+```html
+<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-buttons">
+  <!-- wp:button {"backgroundColor":"primary","textColor":"base"} -->
+  <div class="wp-block-button"><a class="wp-block-button__link has-base-color has-primary-background-color has-text-color has-background wp-element-button">Click me</a></div>
+  <!-- /wp:button -->
+  <!-- wp:button {"className":"is-style-outline"} -->
+  <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Secondary</a></div>
+  <!-- /wp:button -->
+</div>
+<!-- /wp:buttons -->
+```
+
+**Spacer:**
+```html
+<!-- wp:spacer {"height":"var:preset|spacing|50"} -->
+<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+```
+
+**Separator:**
+```html
+<!-- wp:separator {"backgroundColor":"contrast","className":"is-style-wide"} -->
+<hr class="wp-block-separator has-text-color has-contrast-color has-alpha-channel-opacity has-contrast-background-color has-background is-style-wide"/>
+<!-- /wp:separator -->
+```
+
+**Media & Text:**
+```html
+<!-- wp:media-text {"mediaPosition":"right","mediaType":"image","mediaWidth":40} -->
+<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile" style="grid-template-columns:auto 40%">
+  <div class="wp-block-media-text__content">
+    <!-- inner blocks -->
+  </div>
+  <figure class="wp-block-media-text__media">
+    <img src="https://example.com/image.jpg" alt="Description"/>
+  </figure>
+</div>
+<!-- /wp:media-text -->
+```
+
+**Query Loop (post listing):**
+```html
+<!-- wp:query {"queryId":0,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","inherit":false}} -->
+<div class="wp-block-query">
+  <!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
+    <!-- wp:post-featured-image {"isLink":true} /-->
+    <!-- wp:post-title {"isLink":true,"fontSize":"large"} /-->
+    <!-- wp:post-excerpt {"excerptLength":20} /-->
+  <!-- /wp:post-template -->
+</div>
+<!-- /wp:query -->
+```
+
+## Style Attribute Structure
+
+The `style` attribute holds custom values (not preset slugs):
+
+```json
+{
+  "style": {
+    "spacing": {
+      "padding": {"top":"var:preset|spacing|50","right":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50"},
+      "margin": {"top":"0","bottom":"0"},
+      "blockGap": "var:preset|spacing|30"
+    },
+    "border": {
+      "radius": "8px",
+      "width": "1px",
+      "color": "var:preset|color|contrast",
+      "style": "solid"
+    },
+    "color": {
+      "background": "#1a1a2e",
+      "text": "#ffffff",
+      "gradient": "linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)"
+    },
+    "typography": {
+      "fontSize": "clamp(1rem, 2vw, 1.5rem)",
+      "lineHeight": "1.4",
+      "letterSpacing": "-0.02em"
+    }
+  }
+}
+```
+
+Preset reference syntax in style values: `var:preset|{type}|{slug}` (not CSS `var()`)
+
+## Preset Class Naming Convention
+
+When using preset slugs (not inline style), blocks get CSS classes:
+- `"backgroundColor":"primary"` → `has-primary-background-color has-background`
+- `"textColor":"contrast"` → `has-contrast-color has-text-color`
+- `"fontSize":"large"` → `has-large-font-size`
+- `"fontFamily":"heading"` → `has-heading-font-family`
+- `"gradient":"vivid-cyan-blue-to-vivid-purple"` → `has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background`
+
+## Block Locking
+
+Prevent users from modifying pattern structure:
+
+```json
+{
+  "lock": {"move": true, "remove": true}
+}
+```
+
+On container blocks, `templateLock` constrains children:
+- `"templateLock":"all"` — no insert, move, or remove
+- `"templateLock":"insert"` — no adding/removing, can move
+- `"templateLock":"contentOnly"` — only text/media editable, structure locked
+
+## Block Alignment
+
+Use `align` attribute for wide/full-width:
+```json
+{"align":"wide"}   <!-- respects wideSize -->
+{"align":"full"}   <!-- breaks out to viewport edge -->
+```

From 7570c57e0a07e2f30b7c5ce9d690cdf1df037cf6 Mon Sep 17 00:00:00 2001
From: Fellyph Cintra <fellyph.cintra@gmail.com>
Date: Wed, 11 Feb 2026 12:48:03 +0000
Subject: [PATCH 4/7] Add design with tokens documentation

Introduces a new markdown file that provides comprehensive guidelines on translating design intent into WordPress block attributes using theme.json presets. The document covers core principles, preset mapping for colors, font sizes, font families, spacing scales, and techniques for spatial rhythm, typography pairing, and visual weight. This addition aims to enhance the design consistency and usability of block patterns within the WordPress ecosystem.
---
 .../references/design-with-tokens.md          | 152 ++++++++++++++++++
 1 file changed, 152 insertions(+)
 create mode 100644 skills/wp-patterns/references/design-with-tokens.md

diff --git a/skills/wp-patterns/references/design-with-tokens.md b/skills/wp-patterns/references/design-with-tokens.md
new file mode 100644
index 0000000..c926ad6
--- /dev/null
+++ b/skills/wp-patterns/references/design-with-tokens.md
@@ -0,0 +1,152 @@
+# Design with Tokens
+
+How to translate design intent into WordPress block attributes using theme.json presets.
+
+## Core Principle
+
+In block patterns, **all visual design** is expressed through:
+1. **Preset slugs** — reference theme.json values by name (preferred)
+2. **Style attributes** — inline custom values in block JSON (fallback)
+3. **Block nesting** — layout and composition via container blocks
+
+Never use inline `<style>` tags, custom CSS classes not generated by blocks, or arbitrary HTML.
+
+## theme.json Preset Mapping
+
+### Color Palette (Default WP 6.7+ Presets)
+
+| Slug | Typical Use | Design Role |
+|------|-------------|-------------|
+| `base` | Background | Page/section background |
+| `contrast` | Text on base | Primary text, dark sections |
+| `primary` | Brand accent | CTAs, links, highlights |
+| `secondary` | Supporting accent | Tags, secondary buttons |
+| `tertiary` | Subtle background | Cards, alternating sections |
+
+Usage in block attributes:
+```json
+{"backgroundColor":"tertiary","textColor":"contrast"}
+```
+
+Custom themes define their own slugs. Patterns for distribution should use generic slugs above or provide fallback hex values.
+
+### Font Size Presets
+
+| Slug | CSS Variable | Typical Use |
+|------|-------------|-------------|
+| `small` | `--wp--preset--font-size--small` | Captions, metadata |
+| `medium` | `--wp--preset--font-size--medium` | Body text emphasis |
+| `large` | `--wp--preset--font-size--large` | Subheadings, intro text |
+| `x-large` | `--wp--preset--font-size--x-large` | Section headings |
+| `xx-large` | `--wp--preset--font-size--xx-large` | Hero headings, display |
+
+Usage: `{"fontSize":"xx-large"}` on heading/paragraph blocks.
+
+For custom fluid sizes in style attribute:
+```json
+{"style":{"typography":{"fontSize":"clamp(2rem, 4vw, 4.5rem)"}}}
+```
+
+### Font Family Presets
+
+Common theme slugs:
+- `"fontFamily":"heading"` — display/heading typeface
+- `"fontFamily":"body"` — body text typeface
+- `"fontFamily":"system-sans-serif"` — system fallback
+- `"fontFamily":"monospace"` — code/technical
+
+### Spacing Scale
+
+Default spacing presets use numeric slugs `20` through `80`:
+
+| Slug | CSS Variable | Scale Position |
+|------|-------------|----------------|
+| `20` | `--wp--preset--spacing--20` | Extra small |
+| `30` | `--wp--preset--spacing--30` | Small |
+| `40` | `--wp--preset--spacing--40` | Medium (default) |
+| `50` | `--wp--preset--spacing--50` | Large |
+| `60` | `--wp--preset--spacing--60` | Extra large |
+| `70` | `--wp--preset--spacing--70` | 2X large |
+| `80` | `--wp--preset--spacing--80` | 3X large |
+
+Reference in style attributes: `"var:preset|spacing|50"`
+
+## Design-to-Attribute Translation
+
+| Design Intent | Block Attribute |
+|---------------|----------------|
+| Large hero heading | `{"level":1,"fontSize":"xx-large","fontFamily":"heading"}` on `wp:heading` |
+| Muted subtitle | `{"fontSize":"medium","textColor":"secondary"}` on `wp:paragraph` |
+| Section background | `{"backgroundColor":"tertiary"}` on outer `wp:group` |
+| Dark section | `{"backgroundColor":"contrast","textColor":"base"}` on `wp:group` |
+| Card with padding | `{"style":{"spacing":{"padding":{"top":"var:preset|spacing|50",...}}}}` on `wp:group` |
+| Accent border left | `{"style":{"border":{"left":{"width":"4px","color":"var:preset|color|primary"}}}}` |
+| Rounded corners | `{"style":{"border":{"radius":"12px"}}}` on `wp:group` or `wp:image` |
+| Primary CTA button | `{"backgroundColor":"primary","textColor":"base"}` on `wp:button` |
+| Outline button | `{"className":"is-style-outline"}` on `wp:button` |
+| Centered section | `{"layout":{"type":"constrained"},"align":"full"}` on `wp:group` |
+
+## Spatial Rhythm Techniques
+
+### Vertical Rhythm
+Use consistent spacing presets on section groups:
+```json
+{"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}}}
+```
+
+Vary `blockGap` between inner elements for hierarchy:
+- Tight grouping (related items): `"blockGap":"var:preset|spacing|20"`
+- Standard flow: `"blockGap":"var:preset|spacing|40"`
+- Generous breathing room: `"blockGap":"var:preset|spacing|60"`
+
+### Horizontal Composition
+- **Asymmetric columns**: `{"width":"66.66%"}` + `{"width":"33.33%"}` — avoid always using equal splits
+- **Offset content**: Use constrained layout with custom `contentSize` narrower than `wideSize`
+- **Grid with varied spans**: CSS grid on Group with `columnCount` and child `columnSpan`
+
+### Creating Visual Weight
+- **Large padding** on groups creates breathing room and perceived importance
+- **Contrast inversion** (dark bg + light text) draws attention to sections
+- **Border accents** (left border, bottom border) create hierarchy without heaviness
+- **Spacer blocks** between sections: use preset spacing, not arbitrary pixel values
+
+## Typography Pairing
+
+Combine `fontFamily` with `fontSize` for hierarchy:
+
+```
+Hero:      fontFamily:"heading" + fontSize:"xx-large" + letterSpacing:"-0.02em"
+Subtitle:  fontFamily:"body" + fontSize:"large" + textColor:"secondary"
+Body:      fontFamily:"body" + fontSize:"medium"
+Caption:   fontFamily:"body" + fontSize:"small" + textColor:"secondary"
+```
+
+Emphasis techniques:
+- **All caps**: `{"style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.1em"}}}`
+- **Tight leading**: `{"style":{"typography":{"lineHeight":"1.1"}}}` (headings only)
+- **Generous leading**: `{"style":{"typography":{"lineHeight":"1.8"}}}` (body for readability)
+
+## Gradient and Shadow Presets
+
+Gradients in attributes:
+```json
+{"gradient":"vivid-cyan-blue-to-vivid-purple"}
+```
+Or custom in style:
+```json
+{"style":{"color":{"gradient":"linear-gradient(135deg,#1a1a2e 0%,#16213e 100%)"}}}
+```
+
+Shadow presets (WP 6.7+):
+```json
+{"shadow":"var:preset|shadow|natural"}
+```
+Common: `natural`, `deep`, `sharp`, `outlined`, `crisp`
+
+## Duotone on Images
+
+Apply duotone filter to images and covers:
+```json
+{"style":{"color":{"duotone":["#000000","#ffffff"]}}}
+```
+Or use preset: `{"style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}}}`

From 48e67e298991b198207125af390cbfe53e65fc7e Mon Sep 17 00:00:00 2001
From: Fellyph Cintra <fellyph.cintra@gmail.com>
Date: Wed, 11 Feb 2026 12:48:11 +0000
Subject: [PATCH 5/7] Add pattern categories and types documentation

Introduces a new markdown file that outlines the default pattern categories and types in WordPress. The document includes guidance on category selection, starter patterns, template patterns, and block type connections. This addition aims to provide developers with a comprehensive reference for effectively utilizing and categorizing block patterns within the WordPress ecosystem.
---
 .../pattern-categories-and-types.md           | 130 ++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 skills/wp-patterns/references/pattern-categories-and-types.md

diff --git a/skills/wp-patterns/references/pattern-categories-and-types.md b/skills/wp-patterns/references/pattern-categories-and-types.md
new file mode 100644
index 0000000..abd5eef
--- /dev/null
+++ b/skills/wp-patterns/references/pattern-categories-and-types.md
@@ -0,0 +1,130 @@
+# Pattern Categories and Types
+
+## Default Pattern Categories
+
+WordPress registers these categories by default:
+
+| Slug | Label | Typical Content |
+|------|-------|-----------------|
+| `banner` | Banner | Hero sections, full-width announcements |
+| `buttons` | Buttons | Button groups and CTA layouts |
+| `call-to-action` | Call to Action | Conversion-focused sections |
+| `columns` | Columns | Multi-column layouts |
+| `contact` | Contact | Contact forms, info, maps |
+| `featured` | Featured | Highlighted content sections |
+| `footer` | Footer | Site footer layouts |
+| `gallery` | Gallery | Image galleries and grids |
+| `header` | Header | Site header/navigation layouts |
+| `media` | Media | Image/video showcase sections |
+| `posts` | Posts | Blog post listing layouts |
+| `pricing` | Pricing | Pricing tables and comparison |
+| `services` | Services | Service/feature showcases |
+| `team` | Team | Team member displays |
+| `testimonials` | Testimonials | Reviews, quotes, social proof |
+| `text` | Text | Text-focused sections and articles |
+| `about` | About | About page sections |
+| `portfolio` | Portfolio | Portfolio/work showcases |
+| `newsletter` | Newsletter | Email signup sections |
+| `query` | Query | Custom post queries/loops |
+
+### Category Selection Guidance
+
+- Use **multiple categories** when a pattern fits more than one (e.g., `banner, call-to-action`)
+- A hero section with signup form → `banner, call-to-action, newsletter`
+- A team grid with bios → `team, about`
+- A blog layout → `posts, query`
+
+## Starter Patterns (Page Patterns)
+
+Starter patterns appear when a user creates a new page, offering full-page layout starting points.
+
+Register by setting `Block Types` to `core/post-content`:
+
+```php
+<?php
+/**
+ * Title: About Page
+ * Slug: theme-slug/page-about
+ * Categories: about, featured
+ * Block Types: core/post-content
+ * Post Types: page
+ */
+?>
+```
+
+Starter patterns should be **complete page layouts** — not partial sections.
+
+## Template Patterns
+
+Patterns that suggest themselves when editing a specific template type in the Site Editor.
+
+Register with `Template Types`:
+
+```php
+<?php
+/**
+ * Title: Blog Home Template
+ * Slug: theme-slug/template-home
+ * Categories: posts
+ * Template Types: home, front-page
+ * Inserter: no
+ */
+?>
+```
+
+### Supported Template Types
+
+| Type | Description |
+|------|-------------|
+| `404` | 404 error page |
+| `archive` | Archive (category, tag, date) |
+| `author` | Author archive |
+| `category` | Category archive |
+| `date` | Date-based archive |
+| `front-page` | Static front page |
+| `home` | Blog home / posts page |
+| `index` | Default fallback template |
+| `page` | Single page |
+| `search` | Search results |
+| `single` | Single post |
+| `singular` | Single post or page |
+| `tag` | Tag archive |
+| `taxonomy` | Custom taxonomy archive |
+| `attachment` | Attachment page |
+| `comments` | Comments template section |
+
+## Block Type Connections
+
+Connect patterns to specific block types so they appear as options for those blocks:
+
+| Block Type | Use Case |
+|------------|----------|
+| `core/post-content` | Starter page patterns |
+| `core/template-part/header` | Header template part patterns |
+| `core/template-part/footer` | Footer template part patterns |
+| `core/query` | Query loop layout variations |
+| `core/columns` | Column layout starting points |
+
+Example — header template part pattern:
+```php
+<?php
+/**
+ * Title: Header with Navigation
+ * Slug: theme-slug/header-nav
+ * Categories: header
+ * Block Types: core/template-part/header
+ * Inserter: no
+ */
+?>
+```
+
+Setting `Inserter: no` hides these from the general pattern inserter — they only appear in context (e.g., when choosing a header template part design).
+
+## Hiding Patterns from Inserter
+
+Use `Inserter: no` for:
+- Template patterns (shown only in Site Editor template selection)
+- Template part patterns (shown only when choosing template part designs)
+- Internal patterns used by other patterns or theme code
+
+These patterns are still registered and usable — just not browsable in the general inserter.

From a246856dcbae90cbbfb14221a2f6afd14d2a34fe Mon Sep 17 00:00:00 2001
From: Fellyph Cintra <fellyph.cintra@gmail.com>
Date: Wed, 11 Feb 2026 12:48:18 +0000
Subject: [PATCH 6/7] Add pattern registration documentation

Introduces a new markdown file that outlines the process for registering block patterns in WordPress. The document covers auto-registration via the `/patterns/` directory, required file headers, PHP execution guidelines, manual registration methods, and best practices for pattern categorization. This addition aims to provide developers with a comprehensive reference for effectively creating and managing block patterns within the WordPress ecosystem.
---
 .../references/pattern-registration.md        | 169 ++++++++++++++++++
 1 file changed, 169 insertions(+)
 create mode 100644 skills/wp-patterns/references/pattern-registration.md

diff --git a/skills/wp-patterns/references/pattern-registration.md b/skills/wp-patterns/references/pattern-registration.md
new file mode 100644
index 0000000..d7598ab
--- /dev/null
+++ b/skills/wp-patterns/references/pattern-registration.md
@@ -0,0 +1,169 @@
+# Pattern Registration
+
+## Auto-Registration via `/patterns/` Directory
+
+WordPress 6.0+ automatically registers patterns from `.php` files in the theme's `patterns/` directory.
+
+### File Header (Required Fields)
+
+```php
+<?php
+/**
+ * Title: Hero with Call to Action
+ * Slug: theme-slug/hero-cta
+ * Categories: banner, call-to-action
+ */
+?>
+<!-- wp:group ... -->
+```
+
+### All Header Fields
+
+| Field | Required | Description | Example |
+|-------|----------|-------------|---------|
+| `Title` | Yes | Display name in inserter | `Hero with Call to Action` |
+| `Slug` | Yes | Unique identifier (`namespace/name`) | `theme-slug/hero-cta` |
+| `Categories` | Yes | Comma-separated category slugs | `banner, call-to-action` |
+| `Description` | No | Tooltip/help text in inserter | `A full-width hero section` |
+| `Viewport Width` | No | Preview width in inserter (px) | `1400` |
+| `Inserter` | No | Show in inserter (`yes`/`no`) | `no` (hides from inserter) |
+| `Keywords` | No | Comma-separated search keywords | `hero, header, banner` |
+| `Block Types` | No | Blocks this pattern replaces | `core/post-content` |
+| `Post Types` | No | Restrict to post types | `page, wp_template` |
+| `Template Types` | No | Template types this pattern suggests for | `home, front-page` |
+
+### File Structure
+
+```
+my-theme/
+  patterns/
+    hero-cta.php
+    testimonial-grid.php
+    footer-columns.php
+  theme.json
+  style.css
+  ...
+```
+
+File names are descriptive but don't affect registration — the `Slug` header is the identifier.
+
+## PHP in Pattern Files
+
+Pattern files execute PHP at registration time (not render time). This is critical:
+
+### Safe Functions
+
+```php
+<?php esc_html_e( 'Read More', 'theme-textdomain' ); ?>
+<?php esc_attr_e( 'Submit', 'theme-textdomain' ); ?>
+<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.webp' ) ); ?>
+<?php echo esc_attr( get_theme_file_uri( 'assets/images/bg.jpg' ) ); ?>
+```
+
+Always use:
+- `esc_html_e()` / `esc_html__()` for visible text (i18n + escape)
+- `esc_attr_e()` / `esc_attr__()` for attribute values (i18n + escape)
+- `esc_url()` for URLs
+- `get_theme_file_uri()` for theme asset paths
+
+### Unsafe — Do NOT Use
+
+```php
+// WRONG: query-dependent — runs at init, not render
+<?php $posts = get_posts(); ?>
+<?php the_title(); ?>
+<?php wp_get_current_user(); ?>
+<?php is_admin(); ?>
+```
+
+Pattern PHP executes once when the pattern is registered (during `init`), not when the page renders. Any dynamic runtime data will be stale or unavailable.
+
+### i18n Requirements
+
+All user-visible strings must be translatable:
+
+```php
+<!-- wp:heading -->
+<h2 class="wp-block-heading"><?php esc_html_e( 'Our Services', 'theme-textdomain' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Get Started', 'theme-textdomain' ); ?></a></div>
+<!-- /wp:button -->
+```
+
+For block attribute values containing translatable text, escape appropriately:
+```php
+<!-- wp:image {"alt":"<?php esc_attr_e( 'Team photo', 'theme-textdomain' ); ?>"} -->
+```
+
+## Manual Registration
+
+For plugins or conditional patterns, use `register_block_pattern()`:
+
+```php
+register_block_pattern(
+    'my-plugin/testimonial-card',
+    array(
+        'title'       => __( 'Testimonial Card', 'my-plugin' ),
+        'description' => __( 'A single testimonial with avatar and quote.', 'my-plugin' ),
+        'categories'  => array( 'testimonials' ),
+        'content'     => '<!-- wp:group ... --> ... <!-- /wp:group -->',
+        'keywords'    => array( 'quote', 'review' ),
+    )
+);
+```
+
+Hook into `init`:
+```php
+add_action( 'init', function() {
+    register_block_pattern( ... );
+});
+```
+
+## Custom Categories
+
+Register before patterns:
+
+```php
+add_action( 'init', function() {
+    register_block_pattern_category(
+        'theme-slug-portfolio',
+        array( 'label' => __( 'Portfolio', 'theme-textdomain' ) )
+    );
+});
+```
+
+For themes, categories can also be registered via `theme.json`:
+```json
+{
+    "patterns": {
+        "categories": [
+            { "name": "theme-slug-portfolio", "label": "Portfolio" }
+        ]
+    }
+}
+```
+
+## Unregistering Patterns
+
+Remove core or plugin patterns:
+
+```php
+add_action( 'init', function() {
+    unregister_block_pattern( 'core/query-standard-posts' );
+});
+```
+
+Remove an entire category:
+```php
+unregister_block_pattern_category( 'banner' );
+```
+
+## Namespace Conventions
+
+- **Themes**: `theme-slug/pattern-name` (e.g., `twentytwentyfive/hero-banner`)
+- **Plugins**: `plugin-slug/pattern-name` (e.g., `woocommerce/product-grid`)
+- **Core**: `core/pattern-name`
+
+Always prefix with your theme/plugin slug to avoid collisions.

From 599c5f80362cd6c26ffddc4dd4cfe4e277112395 Mon Sep 17 00:00:00 2001
From: Fellyph Cintra <fellyph.cintra@gmail.com>
Date: Wed, 11 Feb 2026 13:19:58 +0000
Subject: [PATCH 7/7] Update compatibility information in wp-patterns
 documentation

Revised the compatibility section to specify that WordPress 6.9 and PHP 7.2.24 or later are required, while maintaining previous requirements for auto-registration and full preset support. This update ensures developers have accurate information regarding system requirements for utilizing block patterns effectively.
---
 skills/wp-patterns/SKILL.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/skills/wp-patterns/SKILL.md b/skills/wp-patterns/SKILL.md
index fab526b..cc87213 100644
--- a/skills/wp-patterns/SKILL.md
+++ b/skills/wp-patterns/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: wp-patterns
 description: "Generate technically correct, design-distinctive WordPress block patterns. Use when creating block patterns, starter page patterns, template patterns, template part patterns, or improving pattern design quality. Covers pattern registration (PHP headers, auto/manual), block markup syntax, theme.json design tokens, categories, template types, accessibility, and i18n/escaping."
-compatibility: "WordPress 6.0+ for auto-registration, 6.7+ for full preset support. Patterns use block markup (HTML comments with JSON), PHP file headers, and theme.json presets."
+compatibility: "WordPress 6.9 with PHP 7.2.24 or later. Requires 6.0+ for auto-registration, 6.7+ for full preset support. Patterns use block markup (HTML comments with JSON), PHP file headers, and theme.json presets."
 ---
 
 # WordPress Block Patterns