wp-block-development

Guide WordPress 6.9+ Gutenberg block development with block.json and render.php.

27|1|Updated Feb 16, 2026
One-click install
npx skills add https://github.com/dr-robert-li/cowork-wordpress-expert --skill wp-block-development-dr-robert-li
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wp-block-development
Source: https://github.com/dr-robert-li/cowork-wordpress-expert/tree/main/references/wp-block-development
Command: npx skills add https://github.com/dr-robert-li/cowork-wordpress-expert --skill wp-block-development-dr-robert-li

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @wordpress/scripts, @wordpress/create-block, wp-env, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of developing and maintaining WordPress (Gutenberg) blocks, addressing common issues related to block registration, attributes, rendering, and tooling.

Core Features & Use Cases

  • Block Scaffolding: Guides you through creating new blocks using @wordpress/create-block.
  • Metadata Management: Helps update block.json for attributes, scripts, styles, and supports.
  • Dynamic Rendering: Assists in implementing server-side rendering with render.php or render_callback.
  • Attribute Handling: Ensures correct serialization and saving of block attributes.
  • Deprecations & Migrations: Provides a framework for handling changes to block structure over time.
  • Use Case: You need to add a new custom block to a WordPress theme that displays recent posts with specific styling. This skill will guide you through creating the block, defining its attributes, implementing the editor and frontend views, and ensuring it saves correctly.

Quick Start

Use the wp-block-development skill to create a new block for a WordPress theme.

Frequently Asked Questions about wp-block-development

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

FAQPage Schema
How do I create a custom WordPress Gutenberg block using create-block?

To create a custom WordPress Gutenberg block, you can use the @wordpress/create-block scaffolding tool to generate the necessary files and structure. This skill guides you through the setup process and block.json metadata configuration.

How do I handle attribute serialization and dynamic rendering in block development?

Attribute serialization and dynamic rendering in block development are handled by defining attributes in block.json and implementing server-side rendering via render.php or render_callback. This ensures correct data saving and frontend display.

Do I need node.js and WP-CLI to develop WordPress blocks?

You need a filesystem-based environment with bash and node.js to use the block development tooling workflows. WP-CLI integration is optional but supported for advanced tasks like automation and management.

What is the best way to manage block.json metadata for a custom block?

The best way to manage block.json metadata is to update the file directly to define attributes, scripts, styles, and supports. This skill assists in ensuring the metadata is correctly configured for WordPress 6.9+.

How do I manage block deprecations and migrations in WordPress?

Managing block deprecations and migrations involves providing a framework to handle changes to block structure over time. This ensures backward compatibility when updating custom Gutenberg blocks.

Why is my dynamic block not rendering correctly on the frontend?

Dynamic block rendering issues on the frontend often stem from incorrect attribute serialization or misconfigured render_callback functions. This skill helps ensure correct server-side rendering and attribute handling.