add-variation
Create a block variation with preset configurations
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Menú
Create a block variation with preset configurations
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
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.