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

add-block

Scaffold new Gutenberg blocks with block.json and source files.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create a new Gutenberg block following WordPress best practices to streamline block development and ensure consistency across projects.

Core Features & Use Cases

  • Automates scaffolding of a block directory structure including block.json, src/blocks/[block-name], index.js, edit.js, save.js, style.scss, editor.scss, frontend.js, and optional render.php for dynamic rendering
  • Enforces WordPress coding standards and common patterns such as useBlockProps and editor controls scaffolding
  • Provides prompts to gather essential block metadata (name, category, frontend needs, dynamic rendering) and outputs a ready-to-use boilerplate for quick iteration

Quick Start

Follow prompts to specify the block name and category, then run the scaffold to generate the complete block boilerplate.

Frequently Asked Questions about add-block

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

FAQPage Schema
How do I scaffold a Gutenberg block with block.json and edit.js?▼

To scaffold a Gutenberg block, this tool generates a complete directory structure including block.json, edit.js, save.js, and SCSS files following WordPress best practices for quick iteration.

What's the best way to create a dynamic Gutenberg block in WordPress?▼

Creating a dynamic Gutenberg block involves generating a standard block structure with an optional render.php file for server-side rendering, ensuring proper useBlockProps usage and WordPress coding standards.

Do I need to manually register scripts when adding a new WordPress block?▼

No, you do not need to manually register scripts when adding a WordPress block. The scaffolding process automatically handles the block directory structure and register scripts.

What files are included in a scaffolded WordPress block boilerplate?▼

A scaffolded WordPress block boilerplate includes block.json, index.js, edit.js, save.js, style.scss, editor.scss, frontend.js, and an optional render.php file for dynamic rendering.

Can I use this scaffolding tool for block development without prior WordPress setup?▼

Block development requires an existing WordPress environment. The scaffolding generates the block source files within your project, but you need a WordPress installation to run and test the blocks.

Why does my custom Gutenberg block need a render.php file?▼

A render.php file is needed for dynamic rendering when your block requires server-side data fetching or PHP logic. Static blocks use save.js, while dynamic blocks rely on render.php to generate content.

Related Skills

Explore More Software Engineering Skills→
HungNthHungNth

wp-block-development

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

Community
Intermediate
respira-pressrespira-press
40

migrate-wpbakery-to-gutenberg

Convert WPBakery shortcodes into native Gutenberg blocks with a migration plan.

Official
Advanced
WesleySmitsWesleySmits

block-editor-components

Provides reusable React components for WordPress block editor UIs in TypeScript.

Community
Intermediate
jnealey88jnealey88
12

add-variation

Generate WordPress core block variation scaffolding with registerBlockVariation code patterns.

Community
Intermediate