Menu
Create a block variation with preset configurations
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Create a new Gutenberg block with scaffolding
Use when working with the WordPress Abilities API (wp_register_ability, wp_register_ability_category, /wp-json/wp-abilities/v1/*, @wordpress/abilities) including defining abilities, categories, meta, REST exposure, and permissions checks for clients.
Prepare plugin for WordPress.org deployment
Use when generating responses containing factual claims, API details, configuration specifics, version compatibility, or recalled knowledge that could be hallucinated - especially when not working directly from source code or command output
Use when executing implementation plans with independent tasks in the current session
Create a block extension to enhance core WordPress blocks
| name | add-variation |
| description | Create a block variation with preset configurations |
| argument-hint | ["block-name"] |
| allowed-tools | Read, Write, Edit, Glob, Grep, Bash(mkdir *), Bash(npm run *) |
Create a new block variation for a WordPress core block.
src/variations/[block-name]-variations/ (if doesn't exist)index.js with new variationsrc/index.js (if new file)import { registerBlockVariation } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
registerBlockVariation('core/group', {
name: 'hero-section',
title: __('Hero Section', 'designsetgo'),
description: __('Full-width hero section with centered content', 'designsetgo'),
icon: 'cover-image',
scope: ['inserter'],
attributes: {
layout: {
type: 'constrained',
contentSize: '800px',
},
style: {
spacing: {
padding: {
top: 'var(--wp--preset--spacing--70)',
bottom: 'var(--wp--preset--spacing--70)',
},
},
},
},
innerBlocks: [
['core/heading', { level: 1, content: __('Hero Title', 'designsetgo') }],
['core/paragraph', { content: __('Hero description', 'designsetgo') }],
],
});
For Grid:
layout: { type: 'grid', columnCount: 3 }
For Flex:
layout: { type: 'flex', orientation: 'horizontal' }
For Constrained (default):
layout: { type: 'constrained', contentSize: '800px' }
Always:
var(--wp--preset--spacing--50)innerBlocks examplesVariation Scope:
['inserter'] - Appears in block inserter['block'] - Appears in block transforms['inserter', 'block'] - Appears in bothBuild the plugin:
npm run build
Variations will appear in the block inserter under the parent block.