wp-block-themes

작성자: automattic

WordPress 블록 테마 개발 시 사용: theme.json(전역 설정/스타일), 템플릿 및 템플릿 부분, 패턴, 스타일 변형, 사이트 편집기…

npx skills add https://github.com/automattic/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.

automattic의 다른 스킬

wp-phpstan
automattic
WordPress 프로젝트(플러그인/테마/사이트)에서 PHPStan 정적 분석을 설정, 실행 또는 수정할 때 사용: phpstan.neon 설정, 기준선,…
official
wp-playground
automattic
WordPress Playground 워크플로우에 사용: 브라우저 또는 @wp-playground/cli(서버, run-blueprint, build-snapshot)를 통해 로컬에서 빠르게 일회용 WP 인스턴스를 실행합니다.
official
wp-plugin-development
automattic
WordPress 플러그인 개발 시 사용: 아키텍처 및 훅, 활성화/비활성화/제거, 관리자 UI 및 설정 API, 데이터 저장, 크론/작업, 보안…
official
wp-project-triage
automattic
WordPress 저장소(플러그인/테마/블록 테마/WP 코어/Gutenberg/전체 사이트)의 도구/테스트/버전 등을 포함한 결정론적 검사가 필요할 때 사용합니다.
official
wp-rest-api
automattic
WordPress REST API 엔드포인트/라우트를 구축, 확장 또는 디버깅할 때 사용: register_rest_route, WP_REST_Controller/컨트롤러 클래스, 스키마/인수…
official
wp-wpcli-and-ops
automattic
WP-CLI(wp)를 사용하여 WordPress 작업을 수행할 때 사용: 안전한 검색-바꾸기, DB 내보내기/가져오기, 플러그인/테마/사용자/콘텐츠 관리, 크론, 캐시 플러싱 등
official
wpds
automattic
WordPress 디자인 시스템(WPDS)과 그 컴포넌트, 토큰, 패턴 등을 활용하여 UI를 구축할 때 사용합니다.
official
woocommerce-finalize
automattic
WooCommerce 플러그인을 위한 사전 릴리스 코드 건강 및 추적성 감사. 코드 리뷰 후 실행되며, 죽은 코드, 중복, 구조적 복잡성 등을 중점적으로 확인합니다…
official