wp-block-themes

WordPress block theme development: theme.json, templates, patterns, and Site Editor troubleshooting. Covers theme.json editing (presets, settings, per-block styles), templates and template parts, patterns, and style variations across WordPress 6.9+ Includes triage scripts to detect theme roots and block theme structure, plus guided procedures for creating new themes or converting classic themes Provides debugging workflows for style hierarchy issues, user customization overrides, and Site...

npx skills add https://github.com/wordpress/agent-skills --skill wp-block-themes

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.

More skills from wordpress

blueprint
wordpress
Use when creating, editing, or reviewing WordPress Playground blueprint JSON files. Triggers on mentions of blueprints, playground configuration, or requests…
official
wordpress-router
wordpress
Classify WordPress codebases and route to the correct workflow for plugins, themes, blocks, and core checkouts. Runs automated project triage to identify repo type (plugin, theme, block theme, Gutenberg blocks, WP core) and available tooling Outputs classification results and decision tree routing to domain-specific skills based on user intent and project kind Requires repo root access and bash/Node filesystem operations; some workflows need WP-CLI Targets WordPress 6.9+ with PHP 7.2.24+;...
official
wp-abilities-api
wordpress
WordPress Abilities API registration, REST exposure, and client-side consumption for WordPress 6.9+. Register abilities and categories in PHP using wp_register_ability() and wp_register_ability_category() with stable IDs, labels, and metadata Expose abilities to clients via the /wp-json/wp-abilities/v1/ REST endpoints by setting meta.show_in_rest: true Consume abilities in JavaScript using the @wordpress/abilities package for client-side access and permission checks Requires WordPress 6.9+...
official
wp-abilities-audit
wordpress
Audit a WordPress plugin's REST surface and produce a standardized audit document proposing Abilities API registrations. Produces a markdown doc with a YAML…
official
wp-abilities-verify
wordpress
Verify a WordPress plugin's Abilities API registrations: enumerate abilities, check that callback behavior matches each annotation's claim (the adversarial…
official
wp-block-development
wordpress
WordPress block development for Gutenberg: metadata, registration, rendering, and build workflows. Covers block creation, block.json configuration, static vs. dynamic rendering, and server-side PHP registration with register_block_type_from_metadata() Enforces apiVersion: 3 for WordPress 6.9+ compatibility, including iframe editor support and style isolation Handles attribute serialization, deprecations/migrations to prevent "Invalid block" errors, and inner blocks composition Includes...
official
wp-interactivity-api
wordpress
Use when building or debugging WordPress Interactivity API features (data-wp-* directives, @wordpress/interactivity store/state/actions, block viewScriptModule…
official
wp-patterns
wordpress
Generate technically correct, design-distinctive WordPress block patterns. Use when creating block patterns, starter page patterns, template patterns, template…
official