skills.rest
jnealey88
jnealey88COMMUNITY
Explore all skills by this author →
GitHub

wp-block-development

Streamline Gutenberg block development workflows for WordPress with @wordpress/scripts and wp-env.

12|9|Updated Oct 23, 2025
Search Tags:#wordpress#build-tools#registration#gutenberg#block-development#block.json#wp-scripts
One-click install
npx skills add https://github.com/jnealey88/designsetgo --skill wp-block-development-jnealey88
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wp-block-development
Source: https://github.com/jnealey88/designsetgo/tree/main/.claude/skills/wp-block-development
Command: npx skills add https://github.com/jnealey88/designsetgo --skill wp-block-development-jnealey88

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Gutenberg block development is complex, covering block.json metadata, registration, attributes/serialization, supports, dynamic rendering, deprecations, migrations, and the full build/test workflow with WordPress scripts.

Core Features & Use Cases

  • Handles block metadata and registration patterns for WordPress blocks.
  • Guides dynamic rendering, deprecations/migrations, and compatibility with @wordpress/scripts and wp-env.
  • Use cases include creating new blocks, updating existing ones, adjusting block.json fields, and debugging invalid blocks.

Quick Start

Run the triage script to locate blocks, then list blocks to identify the target root and start scaffolding or updating the chosen block.

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 custom Gutenberg block and configure block.json?▼

To scaffold a Gutenberg block, you run a triage script to locate blocks, identify the target root, and generate the block.json metadata and registration patterns using @wordpress/scripts for WordPress 6.9+ compatibility.

How does dynamic rendering work for WordPress blocks?▼

Dynamic rendering for WordPress blocks uses server-side PHP render functions to generate block HTML on output. This Skill guides configuring block.json and dynamic render functions to handle content that updates independently of the editor.

How do I handle block deprecations and migrations in Gutenberg?▼

Handling block deprecations and migrations in Gutenberg requires defining deprecated block versions to maintain compatibility with older content. This workflow guides adjusting block.json attributes and serialization to prevent invalid content errors.

Can I use @wordpress/scripts and wp-env for local block development?▼

Yes, you can use @wordpress/scripts and wp-env for local Gutenberg block development. This workflow guides the full build, test, and environment setup process, enforcing WordPress 6.9+ compatibility and apiVersion 3 block standards.

Why is my Gutenberg block showing as invalid in the editor?▼

A Gutenberg block shows as invalid when its saved HTML does not match the expected output from block.json attributes. Debugging this involves adjusting deprecations, migrations, and serialization rules to align with the current block structure.

Related Skills

Explore More Software Engineering Skills→
HungNthHungNth

wp-block-development

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

Community
Intermediate
ihatesea69ihatesea69
3

wp-block-development

Guide WordPress Gutenberg block development with block.json configuration and registration.

Community
Advanced
oileroiler

wordpress-blocks

Create WordPress Gutenberg blocks with PHP render callbacks and register_block_type.

Community
Intermediate
MrGKanevMrGKanev

wp-block-development

Guide WordPress Gutenberg block metadata, registration, and migration workflows.

Community
Intermediate