add-variation

Generate WordPress core block variation scaffolding with registerBlockVariation code patterns.

12|9|Updated Oct 23, 2025
One-click install
npx skills add https://github.com/jnealey88/designsetgo --skill add-variation
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: add-variation
Source: https://github.com/jnealey88/designsetgo/tree/main/.claude/skills/add-variation
Command: npx skills add https://github.com/jnealey88/designsetgo --skill add-variation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the creation of WordPress core block variations by scaffolding a consistent variation structure, reducing manual setup time and ensuring best practices.

Core Features & Use Cases

  • Guides users to specify core block, variation name, description, default layout, and icon
  • Generates variation skeleton using registerBlockVariation with name, title, description, icon, and attributes
  • Updates project wiring by placing files under src/variations/[block-name]-variations/ and importing in src/index.js for activation

Quick Start

Ask for the core block, the variation name and description, the default layout and attributes, and the icon to generate a ready-to-use variation.

Frequently Asked Questions about add-variation

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

FAQPage Schema
How do I create a WordPress block variation with registerBlockVariation?

To create a WordPress block variation, use registerBlockVariation to define preset attributes, innerBlocks, and icons. The tool scaffolds the variation files under src/variations/[block-name]-variations and updates index.js for activation.

What is a WordPress Gutenberg block variation and when do I need one?

A WordPress Gutenberg block variation is a pre-configured version of an existing core block with preset attributes, innerBlocks, and icons. You need one to provide reusable block setups without building entirely new blocks from scratch.

How do I set up the folder structure for a Gutenberg block variation?

The correct folder structure for a Gutenberg block variation requires placing files under src/variations/[block-name]-variations/. You must also add an import in src/index.js to activate the variation within your project wiring.

Can I add preset attributes and innerBlocks to a core block variation?

Yes, you can add preset attributes and innerBlocks to a core block variation. The scaffolding process guides you to specify the core block, variation name, description, default layout, attributes, and icon to generate the configuration.

What do I need to provide to scaffold a WordPress block variation?

You need to provide the target core block, the variation name, a description, the default layout and attributes, and an icon. This input generates a ready-to-use variation skeleton with proper project wiring.

Why are my WordPress block variations not showing up in the block editor?

Block variations may not appear if the project wiring is incomplete. Ensure the variation is placed under src/variations/[block-name]-variations and that src/index.js contains the required import statement to activate the variation.