wp-block-themes

โดย wordpress

การพัฒนา WordPress block theme: theme.json, templates, patterns, และการแก้ไขปัญหา Site Editor ครอบคลุมการแก้ไข theme.json (presets, settings, per-block styles), templates และ template parts, patterns, และ style variations ใน WordPress 6.9+ รวมถึงสคริปต์ triage เพื่อตรวจจับ theme roots และโครงสร้าง block theme พร้อมขั้นตอนแนะนำสำหรับการสร้างธีมใหม่หรือแปลงธีมแบบคลาสสิก ให้เวิร์กโฟลว์การดีบักสำหรับปัญหาเกี่ยวกับลำดับชั้นของสไตล์ การแทนที่การปรับแต่งของผู้ใช้ และ 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.

Skills เพิ่มเติมจาก wordpress

blueprint
wordpress
ใช้เมื่อสร้าง แก้ไข หรือตรวจสอบไฟล์ JSON blueprint ของ WordPress Playground ทำงานเมื่อมีการกล่าวถึง 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 ขึ้นไป ลงทะเบียนความสามารถและหมวดหมู่ใน PHP โดยใช้ wp_register_ability() และ wp_register_ability_category() พร้อม ID, ป้ายกำกับ, และข้อมูลเมตาที่เสถียร เปิดเผยความสามารถให้กับไคลเอ็นต์ผ่าน REST endpoints /wp-json/wp-abilities/v1/ โดยตั้งค่า meta.show_in_rest: true ใช้งานความสามารถใน JavaScript โดยใช้แพ็คเกจ @wordpress/abilities สำหรับการเข้าถึงฝั่งไคลเอ็นต์และการตรวจสอบสิทธิ์ ต้องใช้ WordPress 6.9 ขึ้นไป...
official
wp-abilities-audit
wordpress
ตรวจสอบส่วนติดต่อ REST ของปลั๊กอิน WordPress และสร้างเอกสารการตรวจสอบมาตรฐานที่เสนอการลงทะเบียน Abilities API สร้างเอกสาร markdown พร้อม YAML…
official
wp-abilities-verify
wordpress
ตรวจสอบการลงทะเบียน Abilities API ของปลั๊กอิน WordPress: แจกแจงความสามารถ ตรวจสอบว่าพฤติกรรมของ callback ตรงกับข้อความอ้างอิงของแต่ละคำอธิบายประกอบ (การโจมตีแบบ adversarial…)
official
wp-block-development
wordpress
การพัฒนา WordPress block สำหรับ Gutenberg: metadata, การลงทะเบียน, การเรนเดอร์ และขั้นตอนการสร้าง ครอบคลุมการสร้าง block, การกำหนดค่า block.json, การเรนเดอร์แบบ static vs dynamic และการลงทะเบียน PHP ฝั่งเซิร์ฟเวอร์ด้วย register_block_type_from_metadata() บังคับใช้ apiVersion: 3 เพื่อความเข้ากันได้กับ WordPress 6.9+ รวมถึงการรองรับ iframe editor และการแยกสไตล์ จัดการการจัดลำดับ attribute, deprecations/migrations เพื่อป้องกันข้อผิดพลาด "Invalid block" และการประกอบ inner blocks รวมถึง...
official
wp-interactivity-api
wordpress
ใช้เมื่อสร้างหรือดีบักฟีเจอร์ของ WordPress Interactivity API (data-wp-* directives, @wordpress/interactivity store/state/actions, block viewScriptModule…)
official
wp-patterns
wordpress
สร้างบล็อกแพตเทิร์น WordPress ที่ถูกต้องตามหลักเทคนิคและมีความโดดเด่นด้านการออกแบบ ใช้เมื่อสร้างบล็อกแพตเทิร์น แพตเทิร์นหน้าเริ่มต้น แพตเทิร์นเทมเพลต เทมเพลต…
official