skills.rest
HungNth
HungNthCOMMUNITY
Explore all skills by this author →
GitHub

wp-block-themes

Automates WordPress block theme development and debugging via bash and Node.js.

Updated Jan 29, 2026
Search Tags:#templates#debugging#patterns#wordpress#theme.json#block-themes#site-editor
One-click install
npx skills add https://github.com/HungNth/wordpress-notify-nth --skill wp-block-themes-hungnth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wp-block-themes
Source: https://github.com/HungNth/wordpress-notify-nth/tree/main/.opencode/skills/wp-block-themes
Command: npx skills add https://github.com/HungNth/wordpress-notify-nth --skill wp-block-themes-hungnth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps WordPress developers streamline block-theme creation and debugging by guiding how to configure theme.json, manage templates and template parts, create patterns, and handle style variations, while addressing Site Editor challenges such as style hierarchy and caching.

Core Features & Use Cases

  • Theme.json configuration: control global styles and per-block settings to ensure consistency across editor and frontend.
  • Templates and template parts: manage templates/.html and parts/.html to drive Site Editor experiences.
  • Patterns and style variations: create patterns in patterns/* and variations in styles/* to offer design options and maintain consistency.
  • Troubleshooting: diagnose style inheritance and caching issues across core defaults, theme.json, and user customizations.
  • Use Case: A developer prototyped a new block theme, wired up editor controls, and validated rendering in Site Editor and frontend.

Quick Start

Start by identifying the theme root using node skills/wp-project-triage/scripts/detect_wp_project.mjs, then locate block-theme roots with node skills/wp-block-themes/scripts/detect_block_themes.mjs. If multiple themes exist, pick one and scope all changes to that theme root. Then edit theme.json, templates, parts, patterns, and styles as guided by this skill.

Frequently Asked Questions about wp-block-themes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure theme.json for a WordPress block theme?▼

To configure theme.json for a WordPress block theme, define global styles and per-block settings to ensure consistent rendering across the Site Editor and frontend. This controls typography, colors, and layout options programmatically.

What is the best way to manage WordPress templates and template parts?▼

The best way to manage WordPress templates and template parts is by editing the templates/*.html and parts/*.html files directly. This filesystem-based workflow drives the Site Editor experiences without relying on database storage.

Why are my WordPress block theme styles not applying correctly in the Site Editor?▼

Block theme styles may not apply correctly due to style inheritance conflicts or caching issues across core defaults, theme.json, and user customizations. Diagnosing the style hierarchy helps isolate where the rendering breakdown occurs.

Do I need Node.js to develop WordPress block themes?▼

You need Node.js to use this specific block theme development workflow because it relies on filesystem-based bash and Node.js tooling to detect theme roots and automate configuration tasks.

How do I create patterns and style variations for a block theme?▼

To create patterns and style variations for a block theme, add files to the patterns/* and styles/* directories. This provides distinct design options while maintaining global style consistency across the theme.

Does this block theme workflow work with older WordPress versions?▼

This block theme workflow is compatible with WordPress 6.9 and newer versions. It requires a filesystem-based workflow to manage templates, patterns, and theme.json configurations effectively.

Related Skills

Explore More Software Engineering Skills→
HungNthHungNth

wp-interactivity-api

Diagnose and implement WordPress Interactivity API directives and store integration.

Community
Advanced
shankurshankur

update-cursor-settings

Customize VSCode editor preferences, theme, font size, tab size, and keybindings via JSON settings files.

Community
Basic
wpgauravwpgaurav
14

wp-block-themes

Triage WordPress block theme roots and validate theme.json structure.

Community
Advanced
ihatesea69ihatesea69
3

wp-block-themes

Manage theme.json configurations and debug WordPress block themes.

Community
Intermediate