wp-block-themes

작성자: wordpress

WordPress 블록 테마 개발: theme.json, 템플릿, 패턴 및 사이트 편집기 문제 해결. theme.json 편집(프리셋, 설정, 블록별 스타일), 템플릿 및 템플릿 부분, 패턴, WordPress 6.9+에서의 스타일 변형을 다룹니다. 테마 루트와 블록 테마 구조를 감지하는 트라이지 스크립트와 새 테마 생성 또는 클래식 테마 변환을 위한 안내 절차를 포함합니다. 스타일 계층 문제, 사용자 맞춤 재정의 및 사이트 편집기 관련 디버깅 워크플로우를 제공합니다.

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.

wordpress의 다른 스킬

blueprint
wordpress
WordPress Playground blueprint JSON 파일을 생성, 편집 또는 검토할 때 사용합니다. blueprint, Playground 구성 또는 요청에 대한 언급 시 트리거됩니다.
official
wordpress-router
wordpress
We need to translate the given text from English to Korean. The text describes a skill called "wordpress-router" but the instruction says not to include the name unless it appears in the source text. The name does appear in the source? Actually the source text starts with "Classify WordPress codebases..." and does not include "wordpress-router" in the provided text. The instruction says "Do not include the name unless it appears in the source text." So we should not add "wordpress-router" in the translation. The text is a description of the skill. We need to preserve product names like WordPress, WP-CLI, PHP, etc. Also preserve technical terms like "repo type", "plugin", "theme", "block theme", "Gutenberg blocks", "WP core", "bash/Node filesystem operations", "WP-CLI", "PHP 7.2.24+", "WordPress 6.9+". Also preserve numbers and URLs (none here). Translate the rest naturally into Korean. The text: "Classify WordPress codebases and
official
wp-abilities-api
wordpress
WordPress Abilities API 등록, REST 노출, WordPress 6.9+용 클라이언트 측 사용. PHP에서 wp_register_ability() 및 wp_register_ability_category()를 사용하여 안정적인 ID, 레이블, 메타데이터로 능력과 카테고리를 등록합니다. meta.show_in_rest: true를 설정하여 /wp-json/wp-abilities/v1/ REST 엔드포인트를 통해 클라이언트에 능력을 노출합니다. @wordpress/abilities 패키지를 사용하여 JavaScript에서 능력을 사용하고 클라이언트 측 접근 및 권한 확인을 수행합니다. WordPress 6.9+ 필요...
official
wp-abilities-audit
wordpress
WordPress 플러그인의 REST 표면을 감사하고 Abilities API 등록을 제안하는 표준화된 감사 문서를 생성합니다. YAML이 포함된 마크다운 문서를 산출합니다…
official
wp-abilities-verify
wordpress
WordPress 플러그인의 Abilities API 등록을 검증합니다: 능력을 열거하고, 콜백 동작이 각 주석의 주장(적대적…)과 일치하는지 확인합니다.
official
wp-block-development
wordpress
WordPress 블록 개발 for Gutenberg: 메타데이터, 등록, 렌더링 및 빌드 워크플로우. 블록 생성, block.json 구성, 정적 vs 동적 렌더링, register_block_type_from_metadata()를 사용한 서버 측 PHP 등록을 다룹니다. WordPress 6.9+ 호환성을 위해 apiVersion: 3을 적용하며, iframe 편집기 지원 및 스타일 격리를 포함합니다. 속성 직렬화, "잘못된 블록" 오류를 방지하기 위한 폐기/마이그레이션, 내부 블록 구성을 처리합니다. 포함...
official
wp-interactivity-api
wordpress
WordPress Interactivity API 기능(데이터-wp-* 지시문, @wordpress/interactivity 스토어/상태/액션, 블록 viewScriptModule…)을 구축하거나 디버깅할 때 사용합니다.
official
wp-patterns
wordpress
기술적으로 정확하고 디자인이 독특한 WordPress 블록 패턴을 생성합니다. 블록 패턴, 시작 페이지 패턴, 템플릿 패턴, 템플릿을 만들 때 사용하세요…
official