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

wp-block-development

Automate WordPress Gutenberg block development with block.json and @wordpress/scripts.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a structured, repeatable approach for building and maintaining WordPress Gutenberg blocks, reducing setup time and ensuring consistency across plugins and themes.

Core Features & Use Cases

  • Metadata-driven development: Use block.json for registrations, attributes, supports, and rendering behavior.
  • Scaffolding and migrations: Leverage scaffolding tools (e.g., @wordpress/create-block) and migration patterns for deprecated blocks.
  • Dynamic rendering guidance: Implement render.php/render_callback with proper wrapper attributes for server-rendered blocks.
  • Build, test, and QA: Integrate with modern tooling (@wordpress/scripts) to streamline build, lint, and test workflows.

Quick Start

Install Node.js, scaffold a new block with @wordpress/create-block, add block.json metadata, implement a PHP render if needed, register via metadata or PHP, then run the available build/test commands.

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 block.json?▼

Dynamic block rendering in Gutenberg uses a render.php file or PHP render_callback. It requires proper wrapper attributes to ensure server-rendered blocks output correctly while maintaining block.json metadata consistency.

What's the best way to manage block deprecations in Gutenberg?▼

No, you do not need WP-CLI, but it is optional. WordPress block development requires a project with existing block structure, Node.js, npm, and tooling like @wordpress/create-block to scaffold blocks and run build workflows.

Why does my Gutenberg block build fail with @wordpress/scripts?▼

No, you do not need WP-CLI, but it is optional. WordPress block development requires a project with existing block structure, Node.js, npm, and tooling like @wordpress/create-block to scaffold blocks and run build workflows.

How does dynamic rendering work for server-rendered Gutenberg blocks?▼

Dynamic block rendering in Gutenberg uses a render.php file or PHP render_callback. It requires proper wrapper attributes to ensure server-rendered blocks output correctly while maintaining block.json metadata consistency.

What's the best way to manage block deprecations in Gutenberg?▼

Managing Gutenberg block deprecations involves defining migration patterns for deprecated blocks. You update block.json attributes and serialization logic to handle older content structures while ensuring backward compatibility within your WordPress plugins.

Do I need WP-CLI to develop Gutenberg blocks?▼

No, you do not need WP-CLI, but it is optional. WordPress block development requires a project with existing block structure, Node.js, npm, and tooling like @wordpress/create-block to scaffold blocks and run build workflows.

Related Skills

Explore More Software Engineering Skills→
wpgauravwpgaurav
14

wp-block

Scaffold Gutenberg blocks with block.json, PHP registration, and React components.

Community
Intermediate
camelranchentertainmentcamelranchentertainment
1

wordpress-pro

Develop WordPress themes and plugins with coding standards and security practices.

Community
Advanced
oileroiler

wordpress-blocks

Create WordPress Gutenberg blocks with PHP render callbacks and register_block_type.

Community
Intermediate
javiercasaresjaviercasares
1

wp-block-development

Standardize WordPress Gutenberg block creation, registration, and testing workflows.

Community
Advanced