skills.rest
artisanworkshop
artisanworkshopOFFICIAL
Explore all skills by this author →
WebsiteGitHub

wp-block-development

Develops WordPress Gutenberg blocks with correct block.json metadata, registration, serialization, and rendering across editor and frontend contexts.

3|2|Updated Jun 9, 2021
Search Tags:#serialization#wordpress#wp-env#deprecations#block.json#dynamic rendering#gutenberg blocks
One-click install
npx skills add https://github.com/artisanworkshop/Japanized-for-WooCommerce --skill wp-block-development-artisanworkshop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wp-block-development
Source: https://github.com/artisanworkshop/Japanized-for-WooCommerce/tree/main/.claude/skills/wp-block-development
Command: npx skills add https://github.com/artisanworkshop/Japanized-for-WooCommerce --skill wp-block-development-artisanworkshop

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires wp-env, wp-cli, node, npm, and includes references (resource) components.

What problem does it solve?

It helps you correctly develop and maintain WordPress (Gutenberg) blocks when metadata, serialization, or rendering mismatches cause blocks to not save, show as invalid, or misbehave in the editor.

Core Features & Use Cases

  • Block discovery and triage: Locate the correct block root and enumerate block.json files in the repo to target changes precisely.
  • Standards-compliant block metadata: Update block.json fields safely, including apiVersion 3 compatibility requirements for modern (iframe) editors.
  • Static, dynamic, and interactive rendering: Implement render via render.php/render_callback, choose correct view scripts (viewScript vs viewScriptModule), and handle deprecations and migrations to prevent “Invalid block”.
  • Attribute serialization and debugging: Diagnose why attributes aren’t persisting by aligning attribute sources with actual saved markup and recommended patterns.

Quick Start

Use this skill to update a specific block by first running block triage to find its block.json, then change the required metadata and re-verify inserter + save/reload behavior to eliminate invalid blocks.

Frequently Asked Questions about wp-block-development

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

FAQPage Schema
Why does my WordPress block show as invalid in the editor after updating attributes?▼

WordPress blocks show as invalid when attribute serialization sources don't align with saved markup. Implementing deprecations and migrations for updated blocks prevents this mismatch and restores proper save/reload behavior.

How do I set up dynamic rendering for a Gutenberg block using block.json?▼

Dynamic rendering in Gutenberg blocks is set up by specifying render.php or render_callback in block.json. This allows the block to render server-side content across editor and frontend contexts without relying on static save markup.

What is apiVersion 3 and how does it affect WordPress block development?▼

apiVersion 3 is the metadata standard for modern WordPress blocks using iframe-based editors. It requires specific block.json fields to ensure compatibility and proper isolation within the Gutenberg editor environment.

How do I debug block attributes that aren't persisting in Gutenberg?▼

Debugging non-persisting Gutenberg block attributes involves aligning attribute sources in block.json with the actual saved markup. Diagnosing mismatches between source definitions and DOM structure ensures attributes serialize correctly.

Do I need wp-env and Node to develop and test WordPress blocks locally?▼

Yes, local WordPress block development requires Node, npm, and wp-env. These dependencies provide the necessary JavaScript runtime and local environment to build, register, and verify block.json metadata and rendering behavior.

What is the best way to migrate old Gutenberg blocks to apiVersion 3?▼

Migrating old Gutenberg blocks to apiVersion 3 involves updating block.json metadata and implementing deprecations. This ensures old saved markup is recognized and updated while maintaining backwards compatibility and preventing invalid blocks.

Related Skills

Explore More Software Engineering Skills→
obenlandobenland

wp-env

Automate Docker-based WordPress local environments with wp-env.

Community
Advanced
WordPressBugBountyWordPressBugBounty

wp-block-development

Fix broken Gutenberg block workflows by updating block.json metadata and rendering.

Official
Advanced
ebinnionebinnion
5

wp-env-cli

Manage WordPress environments and execute wp-cli commands via wp-env.

Community
Intermediate
HungNthHungNth

wp-block-development

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

Community
Intermediate