PluginBench
Skill
Official
Review
Audit score 70

wp-block-themes

wordpress/agent-skills

Develop WordPress block themes with theme.json, templates, patterns, and Site Editor debugging.

What is wp-block-themes?

This skill helps you build and maintain WordPress block themes targeting version 6.9+. Use it when working with theme.json configuration, block templates and template parts, patterns, style variations, and troubleshooting why styles don't apply in the editor or frontend.

  • Edit theme.json to configure global settings, presets, typography scales, colors, layout, and per-block styles
  • Create and modify block templates (templates/*.html) and template parts (parts/*.html)
  • Add and manage patterns (patterns/*.php) and control their visibility in the block inserter
  • Create style variations (styles/*.json) for users to switch between theme appearances
  • Debug style hierarchy issues, user customization overrides, and caching problems in the Site Editor
  • Detect block theme roots and validate theme structure across WordPress projects

How to install wp-block-themes

npx skills add https://github.com/wordpress/agent-skills --skill wp-block-themes
Prerequisites
  • WordPress 6.9+ installation (PHP 7.2.24+)
  • Node.js and bash environment for running detection and build scripts
  • WP-CLI for some workflows (optional but recommended)
  • Access to the theme directory in the WordPress installation
Claude Code
Cursor
Windsurf
Cline

How to use wp-block-themes

  1. 1.Run triage to detect your WordPress project: node skills/wp-project-triage/scripts/detect_wp_project.mjs
  2. 2.Detect block theme roots and key folders: node skills/wp-block-themes/scripts/detect_block_themes.mjs
  3. 3.If creating a new theme, read references/creating-new-block-theme.md and scaffold the theme structure
  4. 4.Review references/debugging.md to understand style hierarchy (core defaults → theme.json → child theme → user customizations)
  5. 5.Make theme.json changes for settings (presets, typography, colors) or styles (CSS-like rules) using references/theme-json.md as a guide
  6. 6.Add or modify templates in templates/ and template parts in parts/ following references/templates-and-parts.md
  7. 7.Add filesystem patterns under patterns/ and manage style variations under styles/ using the provided references
  8. 8.Verify changes in the Site Editor and frontend, then run build/lint scripts if assets are involved

Use cases

Good for
  • Converting a classic WordPress theme to a block theme or creating one from scratch
  • Adjusting global typography, color palettes, and spacing presets via theme.json
  • Building custom page templates and reusable template parts for a block theme
  • Creating multiple style variations so users can switch theme appearances without code
  • Troubleshooting why theme.json changes don't appear in the editor or frontend
Who it's for
  • WordPress theme developers
  • Full-stack developers building custom block themes
  • Site builders managing theme customization workflows
  • WordPress agencies deploying consistent block theme designs

wp-block-themes FAQ

Why don't my theme.json changes appear in the editor or frontend?

Check the style hierarchy: user customizations override theme.json defaults. Confirm you're editing the active theme root (not an inactive one), validate theme.json syntax, and clear any caching. See references/debugging.md for the fastest checks.

Can I nest template parts in subdirectories?

No. Template parts must live directly under parts/ and cannot be nested in subdirectories. Templates can be organized in subdirectories under templates/.

What's the difference between settings and styles in theme.json?

Settings define what the UI allows (presets, typography scales, colors, layout options). Styles define how things look by default (CSS-like rules for elements and blocks).

How do style variations work and why don't changes update automatically?

Style variations are JSON files under styles/. Once a user selects a variation, that choice is stored in the database. Changing the file won't automatically update what the user sees—they may need to reselect it.

What WordPress versions does this skill support?

This skill targets WordPress 6.9+ with PHP 7.2.24+. theme.json schema versions and available features vary by core version, so confirm your target version before starting.

Full instructions (SKILL.md)

Source of truth, from wordpress/agent-skills.


name: wp-block-themes description: "Use when developing WordPress block themes: theme.json (global settings/styles), templates and template parts, patterns, style variations, and Site Editor troubleshooting (style hierarchy, overrides, caching)." compatibility: "Targets WordPress 6.9+ (PHP 7.2.24+). Filesystem-based agent with bash + node. Some workflows require WP-CLI."

WP Block Themes

When to use

Use this skill for block theme work such as:

  • editing theme.json (presets, settings, styles, per-block styles)
  • adding or changing templates (templates/*.html) and template parts (parts/*.html)
  • adding patterns (patterns/*.php) and controlling what appears in the inserter
  • adding style variations (styles/*.json)
  • debugging “styles not applying” / “editor doesn’t reflect theme.json”

Inputs required

  • Repo root and which theme is targeted (theme directory if multiple exist).
  • Target WordPress version range (theme.json version and features vary by core version).
  • Where the issue manifests: Site Editor, post editor, frontend, or all.

Procedure

0) Triage and locate block theme roots

  1. Run triage:
    • node skills/wp-project-triage/scripts/detect_wp_project.mjs
  2. Detect theme roots + key folders:
    • node skills/wp-block-themes/scripts/detect_block_themes.mjs

If multiple themes exist, pick one and scope all changes to that theme root.

1) Create a new block theme (if needed)

If you are creating a new block theme from scratch (or converting a classic theme):

  • Prefer starting from a known-good scaffold (or exporting from a WP environment) rather than guessing file layout.
  • Be explicit about the minimum supported WordPress version because theme.json schema versions differ.

Read:

  • references/creating-new-block-theme.md

After creating the theme root, re-run detect_block_themes and continue below.

2) Confirm theme type and override expectations

  • Block theme indicators:
    • theme.json present
    • templates/ and/or parts/ present
  • Remember the style hierarchy:
    • core defaults → theme.json → child theme → user customizations
    • user customizations can make theme.json edits appear “ignored”

Read:

  • references/debugging.md (style hierarchy + fastest checks)

3) Make theme.json changes safely

Decide whether you are changing:

  • settings (what the UI allows): presets, typography scale, colors, layout, spacing
  • styles (how it looks by default): CSS-like rules for elements/blocks

Read:

  • references/theme-json.md

4) Templates and template parts

  • Templates live under templates/ and are HTML.
  • Template parts live under parts/ and must not be nested in subdirectories.

Read:

  • references/templates-and-parts.md

5) Patterns

Prefer filesystem patterns under patterns/ when you want theme-owned patterns.

Read:

  • references/patterns.md

6) Style variations

Style variations are JSON files under styles/. Note: once a user picks a style variation, that selection is stored in the DB, so changing the file may not “update what the user sees” automatically.

Read:

  • references/style-variations.md

Verification

  • Site Editor reflects changes where expected (Styles UI, templates, patterns).
  • Frontend renders with expected styles.
  • If styles aren’t changing, confirm whether user customizations override theme defaults.
  • Run the repo’s build/lint scripts if assets are involved (fonts, custom JS/CSS build).

Failure modes / debugging

Start with:

  • references/debugging.md

Common issues:

  • wrong theme root (editing an inactive theme)
  • user customizations override your defaults
  • invalid theme.json shape/typos prevent application
  • templates/parts in wrong folders (or nested parts)

Escalation

If upstream behavior is unclear, consult canonical docs:

  • Theme Handbook and Block Editor Handbook for theme.json, templates, patterns, and style variations.