Wordpress Pro
Scaffold and implement Gutenberg blocks (static, dynamic, interactive) for WordPress 6.4+ sites and plugins with @wordpress/create-block and wp-scripts.
Overview
wordpress-pro is an agent skill for the Build phase that implements WordPress Gutenberg blocks using create-block scaffolding and wp-scripts.
Install
npx skills add https://github.com/jeffallan/claude-skills --skill wordpress-proWhat is this skill?
- Covers static, dynamic, and interactive block types with clear use-case table
- Documents npx @wordpress/create-block with namespace, interactive template, and dynamic variant flags
- Maps standard plugin layout: block.json, edit.js, save.js, index.js, editor/style SCSS, build output
- Includes wp-scripts build/start/format/lint scripts via package.json
- Targets WordPress 6.4+ Block Editor (Gutenberg) as primary editing surface
- 3 block types documented: static, dynamic, interactive
- WordPress 6.4+ Block Editor target
Adoption & trust: 5.4k installs on skills.sh; 9.7k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need custom editor blocks but lack a consistent create-block layout, block type choice, and wp-scripts toolchain your agent can repeat.
Who is it for?
Indie WordPress developers adding block plugins or interactive editor experiences on 6.4+.
Skip if: Headless Next.js frontends with no block editor, or legacy shortcode-only sites you are not migrating.
When should I use this skill?
User is building or extending Gutenberg blocks, block plugins, or @wordpress/create-block projects.
What do I get? / Deliverables
You get a block plugin skeleton with edit/save components, metadata, styles, and npm scripts ready to implement and ship.
- Scaffolded block plugin directory with block.json and src components
- Documented npm scripts for build, start, format, and lint
Recommended Skills
Journey fit
How it compares
Block-plugin procedural skill, not a hosted page builder or generic React component generator.
Common Questions / FAQ
Who is wordpress-pro for?
Solo builders and freelancers shipping Gutenberg blocks inside WordPress plugins or client sites.
When should I use wordpress-pro?
Use it in Build while creating static, dynamic, or interactive blocks, wiring block.json, and running wp-scripts build/start.
Is wordpress-pro safe to install?
It documents standard OSS WordPress tooling; review the Security Audits panel on this page before running npx and npm install in your repo.
SKILL.md
READMESKILL.md - Wordpress Pro
# Gutenberg Blocks --- ## Block Development Overview WordPress 6.4+ uses the Block Editor (Gutenberg) as the primary editing experience. Blocks are the fundamental building units. ### Block Types | Type | Description | Use Case | |------|-------------|----------| | Static | Fixed HTML output | Simple content, images | | Dynamic | Server-rendered | Posts list, dynamic data | | Interactive | Client-side JS | Accordions, tabs, carousels | --- ## Project Setup ### Using @wordpress/create-block ```bash # Create a new block plugin npx @wordpress/create-block my-block --namespace my-plugin # Create with specific template npx @wordpress/create-block my-block --template @wordpress/create-block-interactive-template # Create dynamic block npx @wordpress/create-block my-block --variant dynamic ``` ### Generated Structure ``` my-block/ ├── my-block.php # Plugin file ├── package.json # NPM dependencies ├── src/ │ ├── block.json # Block metadata │ ├── edit.js # Editor component │ ├── save.js # Frontend save │ ├── index.js # Block registration │ ├── editor.scss # Editor styles │ └── style.scss # Frontend styles ├── build/ # Compiled assets └── readme.txt ``` ### package.json Scripts ```json { "name": "my-block", "version": "1.0.0", "scripts": { "build": "wp-scripts build", "start": "wp-scripts start", "format": "wp-scripts format", "lint:js": "wp-scripts lint-js", "lint:css": "wp-scripts lint-style", "packages-update": "wp-scripts packages-update" }, "devDependencies": { "@wordpress/scripts": "^27.0.0" } } ``` --- ## Block Registration ### block.json (WordPress 6.4+) ```json { "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "my-plugin/my-block", "version": "1.0.0", "title": "My Block", "category": "widgets", "icon": "smiley", "description": "A custom block for displaying content.", "keywords": ["custom", "content", "block"], "supports": { "html": false, "align": ["wide", "full"], "anchor": true, "color": { "background": true, "text": true, "link": true, "gradients": true }, "spacing": { "margin": true, "padding": true, "blockGap": true }, "typography": { "fontSize": true, "lineHeight": true }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true } }, "attributes": { "content": { "type": "string", "source": "html", "selector": "p" }, "alignment": { "type": "string", "default": "left" }, "showBorder": { "type": "boolean", "default": false }, "items": { "type": "array", "default": [] }, "selectedPostId": { "type": "number" } }, "example": { "attributes": { "content": "Example content for the block preview." } }, "textdomain": "my-plugin", "editorScript": "file:./index.js", "editorStyle": "file:./index.css", "style": "file:./style-index.css", "viewScript": "file:./view.js", "render": "file:./render.php" } ``` ### PHP Registration ```php <?php declare(strict_types=1); /** * Register all blocks */ function my_plugin_register_blocks(): void { // Auto-register from block.json register_block_type(__DIR__ . '/build/my-block'); // Or with additional arguments register_block_type(__DIR__ . '/build/another-block', [ 'render_callback' => 'my_plugin_render_another_block', ]); } add_action('init', 'my_plugin_register_b