Wp Block Development

This is a comprehensive workflow for building and maintaining WordPress Gutenberg blocks, covering everything from scaffolding with @wordpress/create-block to handling the tricky parts like attribute serialization, deprecations, and dynamic rendering. It enforces apiVersion 3 for WordPress 6.9+ compatibility and walks you through block.json metadata, registration patterns, and the differences between static versus dynamic blocks. The procedure is opinionated about using filesystem detection scripts and metadata-based PHP registration. Most valuable when you're dealing with "invalid block" errors after markup changes or need to add viewScriptModule support without breaking existing blocks. It assumes you have bash, node, and optionally WP-CLI available in your environment.

skills.sh installs: 454
GitHub stars: 211
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add automattic/agent-skills --skill wp-block-development --agent claude-code

Installs into .claude/skills of the current project.

Files

WP Block Development

When to use

Use this skill for block work such as:

creating a new block, or updating an existing one
changing block.json (scripts/styles/supports/attributes/render/viewScriptModule)
fixing “block invalid / not saving / attributes not persisting”
adding dynamic rendering (render.php / render_callback)
block deprecations and migrations (deprecated versions)
build tooling for blocks (@wordpress/scripts, @wordpress/create-block, wp-env)

Inputs required

Repo root and target (plugin vs theme vs full site).
The block name/namespace and where it lives (path to block.json if known).
Target WordPress version range (especially if using modules / viewScriptModule).

Procedure

0) Triage and locate blocks

Run triage:
- node skills/wp-project-triage/scripts/detect_wp_project.mjs
List blocks (deterministic scan):
- node skills/wp-block-development/scripts/list_blocks.mjs
Identify the block root (directory containing block.json) you’re changing.

If this repo is a full site (wp-content/ present), be explicit about which plugin/theme contains the block.