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- 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
How to use wp-block-themes
- 1.Run triage to detect your WordPress project: node skills/wp-project-triage/scripts/detect_wp_project.mjs
- 2.Detect block theme roots and key folders: node skills/wp-block-themes/scripts/detect_block_themes.mjs
- 3.If creating a new theme, read references/creating-new-block-theme.md and scaffold the theme structure
- 4.Review references/debugging.md to understand style hierarchy (core defaults → theme.json → child theme → user customizations)
- 5.Make theme.json changes for settings (presets, typography, colors) or styles (CSS-like rules) using references/theme-json.md as a guide
- 6.Add or modify templates in templates/ and template parts in parts/ following references/templates-and-parts.md
- 7.Add filesystem patterns under patterns/ and manage style variations under styles/ using the provided references
- 8.Verify changes in the Site Editor and frontend, then run build/lint scripts if assets are involved
Use cases
- 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
- 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
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.
No. Template parts must live directly under parts/ and cannot be nested in subdirectories. Templates can be organized in subdirectories under templates/.
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).
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.
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
- Run triage:
node skills/wp-project-triage/scripts/detect_wp_project.mjs
- 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.jsonschema 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.jsonpresenttemplates/and/orparts/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.jsonshape/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.
Related skills
More from wordpress/agent-skills and the wider catalog.

wp-plugin-development
Develop WordPress plugins with architecture, hooks, security, and release guidance.

wp-rest-api
Build, extend, and debug WordPress REST API endpoints with schema validation, authentication, and custom fields.

wp-performance
Diagnose and optimize WordPress performance using WP-CLI profiling, Query Monitor, and targeted fixes.

wp-block-development
Develop WordPress Gutenberg blocks with block.json, registration, rendering, and deprecation workflows.

wordpress-router
Classify WordPress codebases and route to the correct workflow for plugins, themes, blocks, and core.

wp-project-triage
Deterministic inspection of WordPress repositories with structured JSON reports for workflow guidance.