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 檔案時使用。當提及 blueprints、playground 設定或相關請求時觸發。
official
wordpress-router
wordpress
分類WordPress程式碼庫,並將外掛、主題、區塊及核心檢出導向正確的工作流程。執行自動化專案分類,識別儲存庫類型(外掛、主題、區塊主題、Gutenberg區塊、WP核心)及可用工具。根據使用者意圖與專案類型,輸出分類結果與決策樹路由至特定領域技能。需要儲存庫根目錄存取權限及bash/Node檔案系統操作;部分工作流程需使用WP-CLI。目標為WordPress 6.9+搭配PHP 7.2.24+;...
official
wp-abilities-api
wordpress
WordPress Abilities API 註冊、REST 公開及客戶端使用,適用於 WordPress 6.9+。使用 wp_register_ability() 和 wp_register_ability_category() 在 PHP 中註冊能力與類別,需包含穩定的 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… 的 markdown 文件。
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 區塊開發(Gutenberg):元資料、註冊、渲染與建置流程。涵蓋區塊建立、block.json 設定、靜態與動態渲染,以及使用 register_block_type_from_metadata() 進行伺服器端 PHP 註冊。強制使用 apiVersion: 3 以相容 WordPress 6.9+,包含 iframe 編輯器支援與樣式隔離。處理屬性序列化、棄用/遷移以避免「無效區塊」錯誤,以及內部區塊組合。包含…
official
wp-interactivity-api
wordpress
用於建置或除錯 WordPress Interactivity API 功能(data-wp-* 指令、@wordpress/interactivity store/state/actions、區塊 viewScriptModule…)
official
wp-patterns
wordpress
生成技術上正確、設計獨特的WordPress區塊模式。用於建立區塊模式、起始頁面模式、模板模式、模板…
official