wp-block-development

Organize WordPress Gutenberg block development with triage and scaffolding workflows.

9|1|Updated Sep 10, 2022
One-click install
npx skills add https://github.com/WPdoaction/animal-shelter --skill wp-block-development
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wp-block-development
Source: https://github.com/WPdoaction/animal-shelter/tree/main/.claude/skills/wp-block-development
Command: npx skills add https://github.com/WPdoaction/animal-shelter --skill wp-block-development

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill consolidates best practices for WordPress Gutenberg block development, providing triage workflows, scaffolding guidance, and a standardized process to manage block lifecycles from creation to deprecation.

Core Features & Use Cases

  • Triage & discovery: Detect WordPress block projects within a repo and identify root block directories.
  • Block scaffolding: Use scaffolding tools like @wordpress/create-block to rapidly generate modern blocks and ensure apiVersion 3 compatibility.
  • Registration & rendering guidance: Align block metadata, dynamic rendering strategies, and deprecation/migration plans across plugins/themes.
  • Use Case: When starting a new block, run triage to locate the block root, scaffold a new block, and register it with metadata-driven registration.

Quick Start

Run the triage script to locate WordPress block projects:

  • node skills/wp-block-development/scripts/detect_wp_project.mjs Then list blocks in the discovered project:
  • node skills/wp-block-development/scripts/list_blocks.mjs

Frequently Asked Questions about wp-block-development

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

FAQPage Schema
How do I scaffold a new WordPress Gutenberg block with apiVersion 3?

Scaffold new Gutenberg blocks using @wordpress/create-block to generate modern block structures and ensure apiVersion 3 compatibility. The Skill guides this process by locating the block root directory and applying metadata-driven registration.

What is the best way to register WordPress blocks across plugins and themes?

Register WordPress blocks across plugins and themes using a metadata-driven approach via block.json. The Skill aligns registration with block metadata, dynamic rendering strategies, and deprecation plans to manage block lifecycles.

How do I locate WordPress block projects within my repository?

Locate WordPress block projects by running the triage script detect_wp_project.mjs to identify root block directories. Then use list_blocks.mjs to enumerate the discovered blocks within the project.

Can I use @wordpress/create-block to upgrade existing blocks to apiVersion 3?

Yes, you can upgrade existing blocks to apiVersion 3. The Skill provides workflows for upgrading apiVersion and managing block deprecation or migration plans to maintain compatibility.

How does dynamic rendering work for WordPress Gutenberg blocks?

Dynamic rendering for Gutenberg blocks uses server-side PHP callbacks defined in block.json metadata instead of static markup. The Skill aligns block metadata with these rendering strategies for proper lifecycle management.

What should I do when my WordPress block registration is not working?

Debug WordPress block registration by verifying block.json metadata and running triage scripts to locate the block root. The Skill provides debugging steps to ensure proper registration across plugins and themes.