skills.rest
j7-dev
j7-devCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

wp-block-development

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

1|Updated Apr 20, 2025
Search Tags:#frontend#php#javascript#block development#wordpress#gutenberg
One-click install
npx skills add https://github.com/j7-dev/wp-power-checkout --skill wp-block-development-j7-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wp-block-development
Source: https://github.com/j7-dev/wp-power-checkout/tree/main/.github/skills/wp-block-development
Command: npx skills add https://github.com/j7-dev/wp-power-checkout --skill wp-block-development-j7-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the process of developing, debugging, and maintaining WordPress Gutenberg blocks, ensuring compatibility and adherence to best practices.

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 rendering.
  • Compatibility & Migration: Addresses issues like apiVersion requirements and block deprecations to prevent "Invalid block" errors.
  • Use Case: You need to add a new custom block to a WordPress theme. This Skill will guide you through scaffolding the block, defining its attributes, setting up its editor and frontend scripts, and ensuring it registers correctly with WordPress.

Quick Start

Use the wp-block-development skill to create a new WordPress block named 'my-custom-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 new WordPress Gutenberg block from scratch?▼

Scaffold a WordPress Gutenberg block using `@wordpress/create-block` to generate the initial project structure, then configure `block.json` to define attributes and register editor scripts and frontend styles.

Why does my custom block show an "Invalid block" error in the editor?▼

An "Invalid block" error occurs when attribute serialization or `apiVersion` settings mismatch. Resolve block deprecation issues and update `apiVersion` requirements to ensure compatibility with modern WordPress versions.

What is the best way to configure block.json for dynamic rendering?▼

Configuring `block.json` for dynamic rendering involves defining the `render` property and properly mapping attribute serialization, ensuring the block registers correctly and outputs HTML server-side rather than relying solely on JavaScript.

Does this block development workflow support modern WordPress versions?▼

Yes, the block development workflow supports modern WordPress versions (6.9+) and adheres to best practices for scaffolding, metadata management, and dynamic rendering to ensure full compatibility with the Gutenberg editor.

How do I add a custom block to a WordPress theme using JavaScript and PHP?▼

Add a custom block by scaffolding it with JavaScript, defining its attributes in `block.json`, and registering it with PHP. Ensure editor and frontend scripts are properly enqueued for seamless integration into the WordPress theme.

Related Skills

Explore More Software Engineering Skills→
HungNthHungNth

wp-block-development

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

Community
Intermediate
briglebbrigleb
2

wp-block-development

Develop and refine WordPress Gutenberg blocks with block.json and dynamic rendering.

Community
Advanced
timequitytimequity
6

frontend-react

Automate React frontend development with TypeScript, Tailwind CSS, Vite, Zustand, and TanStack Query.

Official
Advanced
oileroiler

wordpress-blocks

Create WordPress Gutenberg blocks with PHP render callbacks and register_block_type.

Community
Intermediate