Block variations create alternative versions of a block with pre-configured attributes and settings.<\/p>
Define in block.json:<\/p>
{\n "variations": [\n {\n "name": "blue",\n "title": "Blue Card",\n "attributes": {\n "backgroundColor": "blue",\n "textColor": "white"\n }\n }\n ]\n}<\/code><\/pre><\/div>Variation Properties<\/h2>Property<\/th>Type<\/th>Description<\/th><\/tr><\/thead>name<\/code><\/td>string<\/td>Unique identifier (required)<\/td><\/tr>title<\/code><\/td>string<\/td>Display name (required)<\/td><\/tr>description<\/code><\/td>string<\/td>Variation description<\/td><\/tr>attributes<\/code><\/td>object<\/td>Pre-set attribute values<\/td><\/tr>innerBlocks<\/code><\/td>array<\/td>Pre-set inner blocks<\/td><\/tr>icon<\/code><\/td>string\/object<\/td>Custom icon<\/td><\/tr>category<\/code><\/td>string<\/td>Block category override<\/td><\/tr>keywords<\/code><\/td>array<\/td>Additional search terms<\/td><\/tr>isDefault<\/code><\/td>boolean<\/td>Is this the default variation?<\/td><\/tr>isActive<\/code><\/td>function\/array<\/td>Determine if variation is active<\/td><\/tr>scope<\/code><\/td>array<\/td>Where variation appears<\/td><\/tr>example<\/code><\/td>object<\/td>Preview content<\/td><\/tr><\/tbody><\/table><\/figure>Defining Variations in JavaScript<\/h2>For complex variations, define in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
name<\/code><\/td>string<\/td>Unique identifier (required)<\/td><\/tr>title<\/code><\/td>string<\/td>Display name (required)<\/td><\/tr>description<\/code><\/td>string<\/td>Variation description<\/td><\/tr>attributes<\/code><\/td>object<\/td>Pre-set attribute values<\/td><\/tr>innerBlocks<\/code><\/td>array<\/td>Pre-set inner blocks<\/td><\/tr>icon<\/code><\/td>string\/object<\/td>Custom icon<\/td><\/tr>category<\/code><\/td>string<\/td>Block category override<\/td><\/tr>keywords<\/code><\/td>array<\/td>Additional search terms<\/td><\/tr>isDefault<\/code><\/td>boolean<\/td>Is this the default variation?<\/td><\/tr>isActive<\/code><\/td>function\/array<\/td>Determine if variation is active<\/td><\/tr>scope<\/code><\/td>array<\/td>Where variation appears<\/td><\/tr>example<\/code><\/td>object<\/td>Preview content<\/td><\/tr><\/tbody><\/table><\/figure>Defining Variations in JavaScript<\/h2>For complex variations, define in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
title<\/code><\/td>string<\/td>Display name (required)<\/td><\/tr>description<\/code><\/td>string<\/td>Variation description<\/td><\/tr>attributes<\/code><\/td>object<\/td>Pre-set attribute values<\/td><\/tr>innerBlocks<\/code><\/td>array<\/td>Pre-set inner blocks<\/td><\/tr>icon<\/code><\/td>string\/object<\/td>Custom icon<\/td><\/tr>category<\/code><\/td>string<\/td>Block category override<\/td><\/tr>keywords<\/code><\/td>array<\/td>Additional search terms<\/td><\/tr>isDefault<\/code><\/td>boolean<\/td>Is this the default variation?<\/td><\/tr>isActive<\/code><\/td>function\/array<\/td>Determine if variation is active<\/td><\/tr>scope<\/code><\/td>array<\/td>Where variation appears<\/td><\/tr>example<\/code><\/td>object<\/td>Preview content<\/td><\/tr><\/tbody><\/table><\/figure>Defining Variations in JavaScript<\/h2>For complex variations, define in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
description<\/code><\/td>string<\/td>Variation description<\/td><\/tr>attributes<\/code><\/td>object<\/td>Pre-set attribute values<\/td><\/tr>innerBlocks<\/code><\/td>array<\/td>Pre-set inner blocks<\/td><\/tr>icon<\/code><\/td>string\/object<\/td>Custom icon<\/td><\/tr>category<\/code><\/td>string<\/td>Block category override<\/td><\/tr>keywords<\/code><\/td>array<\/td>Additional search terms<\/td><\/tr>isDefault<\/code><\/td>boolean<\/td>Is this the default variation?<\/td><\/tr>isActive<\/code><\/td>function\/array<\/td>Determine if variation is active<\/td><\/tr>scope<\/code><\/td>array<\/td>Where variation appears<\/td><\/tr>example<\/code><\/td>object<\/td>Preview content<\/td><\/tr><\/tbody><\/table><\/figure>Defining Variations in JavaScript<\/h2>For complex variations, define in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
attributes<\/code><\/td>object<\/td>Pre-set attribute values<\/td><\/tr>innerBlocks<\/code><\/td>array<\/td>Pre-set inner blocks<\/td><\/tr>icon<\/code><\/td>string\/object<\/td>Custom icon<\/td><\/tr>category<\/code><\/td>string<\/td>Block category override<\/td><\/tr>keywords<\/code><\/td>array<\/td>Additional search terms<\/td><\/tr>isDefault<\/code><\/td>boolean<\/td>Is this the default variation?<\/td><\/tr>isActive<\/code><\/td>function\/array<\/td>Determine if variation is active<\/td><\/tr>scope<\/code><\/td>array<\/td>Where variation appears<\/td><\/tr>example<\/code><\/td>object<\/td>Preview content<\/td><\/tr><\/tbody><\/table><\/figure>Defining Variations in JavaScript<\/h2>For complex variations, define in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
innerBlocks<\/code><\/td>array<\/td>Pre-set inner blocks<\/td><\/tr>icon<\/code><\/td>string\/object<\/td>Custom icon<\/td><\/tr>category<\/code><\/td>string<\/td>Block category override<\/td><\/tr>keywords<\/code><\/td>array<\/td>Additional search terms<\/td><\/tr>isDefault<\/code><\/td>boolean<\/td>Is this the default variation?<\/td><\/tr>isActive<\/code><\/td>function\/array<\/td>Determine if variation is active<\/td><\/tr>scope<\/code><\/td>array<\/td>Where variation appears<\/td><\/tr>example<\/code><\/td>object<\/td>Preview content<\/td><\/tr><\/tbody><\/table><\/figure>Defining Variations in JavaScript<\/h2>For complex variations, define in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
icon<\/code><\/td>string\/object<\/td>Custom icon<\/td><\/tr>category<\/code><\/td>string<\/td>Block category override<\/td><\/tr>keywords<\/code><\/td>array<\/td>Additional search terms<\/td><\/tr>isDefault<\/code><\/td>boolean<\/td>Is this the default variation?<\/td><\/tr>isActive<\/code><\/td>function\/array<\/td>Determine if variation is active<\/td><\/tr>scope<\/code><\/td>array<\/td>Where variation appears<\/td><\/tr>example<\/code><\/td>object<\/td>Preview content<\/td><\/tr><\/tbody><\/table><\/figure>Defining Variations in JavaScript<\/h2>For complex variations, define in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
category<\/code><\/td>string<\/td>Block category override<\/td><\/tr>keywords<\/code><\/td>array<\/td>Additional search terms<\/td><\/tr>isDefault<\/code><\/td>boolean<\/td>Is this the default variation?<\/td><\/tr>isActive<\/code><\/td>function\/array<\/td>Determine if variation is active<\/td><\/tr>scope<\/code><\/td>array<\/td>Where variation appears<\/td><\/tr>example<\/code><\/td>object<\/td>Preview content<\/td><\/tr><\/tbody><\/table><\/figure>Defining Variations in JavaScript<\/h2>For complex variations, define in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
keywords<\/code><\/td>array<\/td>Additional search terms<\/td><\/tr>isDefault<\/code><\/td>boolean<\/td>Is this the default variation?<\/td><\/tr>isActive<\/code><\/td>function\/array<\/td>Determine if variation is active<\/td><\/tr>scope<\/code><\/td>array<\/td>Where variation appears<\/td><\/tr>example<\/code><\/td>object<\/td>Preview content<\/td><\/tr><\/tbody><\/table><\/figure>Defining Variations in JavaScript<\/h2>For complex variations, define in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
isDefault<\/code><\/td>boolean<\/td>Is this the default variation?<\/td><\/tr>isActive<\/code><\/td>function\/array<\/td>Determine if variation is active<\/td><\/tr>scope<\/code><\/td>array<\/td>Where variation appears<\/td><\/tr>example<\/code><\/td>object<\/td>Preview content<\/td><\/tr><\/tbody><\/table><\/figure>Defining Variations in JavaScript<\/h2>For complex variations, define in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
isActive<\/code><\/td>function\/array<\/td>Determine if variation is active<\/td><\/tr>scope<\/code><\/td>array<\/td>Where variation appears<\/td><\/tr>example<\/code><\/td>object<\/td>Preview content<\/td><\/tr><\/tbody><\/table><\/figure>Defining Variations in JavaScript<\/h2>For complex variations, define in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
scope<\/code><\/td>array<\/td>Where variation appears<\/td><\/tr>example<\/code><\/td>object<\/td>Preview content<\/td><\/tr><\/tbody><\/table><\/figure>Defining Variations in JavaScript<\/h2>For complex variations, define in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
example<\/code><\/td>object<\/td>Preview content<\/td><\/tr><\/tbody><\/table><\/figure>Defining Variations in JavaScript<\/h2>For complex variations, define in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
For complex variations, define in JavaScript:<\/p>
import { registerBlockVariation } from '@wordpress\/blocks';\n\nregisterBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n icon: 'video-alt3',\n keywords: [ 'video', 'youtube' ],\n description: 'Embed a YouTube video.',\n attributes: {\n providerNameSlug: 'youtube',\n responsive: true,\n },\n isActive: ( blockAttributes, variationAttributes ) =>\n blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n} );<\/code><\/pre><\/div>Variation Scope<\/h2>Control where variations appear:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Control where variations appear:<\/p>
registerBlockVariation( 'my-plugin\/card', {\n name: 'featured-card',\n title: 'Featured Card',\n scope: [ 'inserter', 'block', 'transform' ],\n attributes: {\n isFeatured: true,\n },\n} );<\/code><\/pre><\/div>Scope values:<\/p>inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Scope values:<\/p>
inserter<\/code> – Show in block inserter<\/li>block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
block<\/code> – Show in block toolbar’s transform options<\/li>transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
transform<\/code> – Available via block transforms<\/li><\/ul>isActive<\/h2>Determines which variation a block instance matches.<\/p>Array Form (Simple)<\/h3>Match by attribute values:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Determines which variation a block instance matches.<\/p>
Match by attribute values:<\/p>
{\n "variations": [\n {\n "name": "youtube",\n "title": "YouTube",\n "attributes": {\n "providerNameSlug": "youtube"\n },\n "isActive": [ "providerNameSlug" ]\n }\n ]\n}<\/code><\/pre><\/div>Function Form (Complex)<\/h3>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
registerBlockVariation( 'core\/embed', {\n name: 'youtube',\n title: 'YouTube',\n attributes: {\n providerNameSlug: 'youtube',\n },\n isActive: ( blockAttributes, variationAttributes ) => {\n return blockAttributes.providerNameSlug === 'youtube';\n },\n} );<\/code><\/pre><\/div>Multiple conditions:<\/p>js<\/span><\/use><\/svg><\/button><\/div>isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Multiple conditions:<\/p>
isActive: ( blockAttributes ) => {\n return (\n blockAttributes.providerNameSlug === 'youtube' &&\n blockAttributes.responsive === true\n );\n},<\/code><\/pre><\/div>Inner Blocks in Variations<\/h2>Pre-configure nested blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Pre-configure nested blocks:<\/p>
registerBlockVariation( 'core\/columns', {\n name: 'two-columns-equal',\n title: 'Two Columns (Equal)',\n innerBlocks: [\n [ 'core\/column', { width: '50%' } ],\n [ 'core\/column', { width: '50%' } ],\n ],\n scope: [ 'inserter' ],\n} );\n\nregisterBlockVariation( 'core\/columns', {\n name: 'two-columns-sidebar',\n title: 'Two Columns (Sidebar)',\n innerBlocks: [\n [ 'core\/column', { width: '66.66%' } ],\n [ 'core\/column', { width: '33.33%' } ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>With content in inner blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
With content in inner blocks:<\/p>
registerBlockVariation( 'core\/group', {\n name: 'hero-section',\n title: 'Hero Section',\n attributes: {\n align: 'full',\n style: {\n spacing: {\n padding: {\n top: 'var:preset|spacing|80',\n bottom: 'var:preset|spacing|80',\n },\n },\n },\n },\n innerBlocks: [\n [ 'core\/heading', { \n level: 1, \n placeholder: 'Hero Title',\n textAlign: 'center',\n } ],\n [ 'core\/paragraph', { \n placeholder: 'Hero subtitle or description',\n align: 'center',\n } ],\n [ 'core\/buttons', { layout: { justifyContent: 'center' } }, [\n [ 'core\/button', { placeholder: 'Call to Action' } ],\n ] ],\n ],\n scope: [ 'inserter' ],\n} );<\/code><\/pre><\/div>Variation Icons<\/h2>Custom icons per variation:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Custom icons per variation:<\/p>
registerBlockVariation( 'my-plugin\/card', {\n name: 'horizontal-card',\n title: 'Horizontal Card',\n icon: 'align-left',\n attributes: {\n layout: 'horizontal',\n },\n} );\n\n\/\/ Or with custom SVG\nregisterBlockVariation( 'my-plugin\/card', {\n name: 'vertical-card',\n title: 'Vertical Card',\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M4 4h16v16H4z" \/>\n <\/svg>\n ),\n attributes: {\n layout: 'vertical',\n },\n} );<\/code><\/pre><\/div>Setting Default Variation<\/h2>Mark one variation as default:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Mark one variation as default:<\/p>
registerBlockVariation( 'my-plugin\/container', {\n name: 'standard',\n title: 'Standard Container',\n isDefault: true,\n attributes: {\n padding: 'medium',\n },\n} );<\/code><\/pre><\/div>Unregistering Variations<\/h2>Remove existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Remove existing variations:<\/p>
import { unregisterBlockVariation } from '@wordpress\/blocks';\n\n\/\/ Remove the YouTube embed variation\nwp.domReady( () => {\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n} );<\/code><\/pre><\/div>Overriding Core Variations<\/h2>Modify existing variations:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Modify existing variations:<\/p>
import { getBlockVariations, unregisterBlockVariation, registerBlockVariation } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Get existing variation\n const variations = getBlockVariations( 'core\/embed' );\n const youtube = variations.find( v => v.name === 'youtube' );\n \n if ( youtube ) {\n \/\/ Unregister original\n unregisterBlockVariation( 'core\/embed', 'youtube' );\n \n \/\/ Register modified version\n registerBlockVariation( 'core\/embed', {\n ...youtube,\n title: 'Custom YouTube',\n keywords: [ ...youtube.keywords, 'custom' ],\n } );\n }\n} );<\/code><\/pre><\/div>Variation Example Content<\/h2>Provide preview in inserter:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Provide preview in inserter:<\/p>
registerBlockVariation( 'my-plugin\/testimonial', {\n name: 'customer-review',\n title: 'Customer Review',\n attributes: {\n style: 'card',\n },\n example: {\n attributes: {\n quote: 'This product exceeded my expectations!',\n author: 'Jane Smith',\n rating: 5,\n },\n },\n} );<\/code><\/pre><\/div>Complete Example: Social Links Variations<\/h2>js<\/span><\/use><\/svg><\/button><\/div>const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
const socialVariations = [\n {\n name: 'facebook',\n title: 'Facebook',\n icon: 'facebook',\n attributes: {\n service: 'facebook',\n url: 'https:\/\/facebook.com\/',\n },\n },\n {\n name: 'twitter',\n title: 'Twitter',\n icon: 'twitter',\n attributes: {\n service: 'twitter',\n url: 'https:\/\/twitter.com\/',\n },\n },\n {\n name: 'instagram',\n title: 'Instagram',\n attributes: {\n service: 'instagram',\n url: 'https:\/\/instagram.com\/',\n },\n icon: (\n <svg viewBox="0 0 24 24">\n <path d="M12 2c2.717 0 3.056.01 4.122.06..." \/>\n <\/svg>\n ),\n },\n];\n\nsocialVariations.forEach( ( variation ) => {\n registerBlockVariation( 'core\/social-link', {\n ...variation,\n isActive: ( blockAttributes ) => \n blockAttributes.service === variation.attributes.service,\n } );\n} );<\/code><\/pre><\/div>Query Loop Variations<\/h2>Create custom query patterns:<\/p>js<\/span><\/use><\/svg><\/button><\/div>registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Create custom query patterns:<\/p>
registerBlockVariation( 'core\/query', {\n name: 'recent-posts-grid',\n title: 'Recent Posts Grid',\n description: 'Display recent posts in a grid layout',\n attributes: {\n query: {\n perPage: 6,\n postType: 'post',\n orderBy: 'date',\n order: 'desc',\n },\n displayLayout: {\n type: 'flex',\n columns: 3,\n },\n },\n innerBlocks: [\n [ 'core\/post-template', {}, [\n [ 'core\/post-featured-image' ],\n [ 'core\/post-title' ],\n [ 'core\/post-excerpt' ],\n ] ],\n [ 'core\/query-pagination' ],\n ],\n scope: [ 'inserter' ],\n isActive: ( { query } ) => query.perPage === 6 && query.orderBy === 'date',\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register variations from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Register variations from PHP:<\/p>
add_action( 'init', function() {\n $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core\/group' );\n \n if ( $block_type ) {\n $block_type->variations = array_merge(\n $block_type->variations ?? [],\n [\n [\n 'name' => 'full-width-section',\n 'title' => __( 'Full Width Section', 'my-plugin' ),\n 'attributes' => [\n 'align' => 'full',\n 'layout' => [\n 'type' => 'constrained',\n ],\n ],\n 'scope' => [ 'inserter' ],\n ],\n ]\n );\n }\n} );<\/code><\/pre><\/div>Or use the filter:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Or use the filter:<\/p>
add_filter( 'get_block_type_variations', function( $variations, $block_type ) {\n if ( $block_type->name === 'core\/columns' ) {\n $variations[] = [\n 'name' => 'three-equal',\n 'title' => __( 'Three Equal Columns', 'my-plugin' ),\n 'innerBlocks' => [\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n [ 'core\/column', [ 'width' => '33.33%' ] ],\n ],\n 'scope' => [ 'inserter' ],\n ];\n }\n return $variations;\n}, 10, 2 );<\/code><\/pre><\/div>Best Practices<\/h2>Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Use meaningful names:<\/strong> Variation names should clearly indicate their purpose.<\/p><\/li>Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Set isActive correctly:<\/strong> Ensure variations are properly identified when editing.<\/p><\/li>Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Provide good descriptions:<\/strong> Help users understand what each variation does.<\/p><\/li>Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Use appropriate scope:<\/strong> Don’t clutter the inserter with every variation.<\/p><\/li>Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Include example content:<\/strong> Makes variations easier to understand in the inserter.<\/p><\/li>Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Group related variations:<\/strong> Keep variations for the same block together.<\/p><\/li>Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Consider transforms:<\/strong> Enable variations in transform scope when switching makes sense.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Block variations create alternative versions of a block with pre-configured attributes and settings. Basic Variation Define in block.json: { "variations": [ { "name": "blue", "title": "Blue Card", "attributes": { "backgroundColor":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5522","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions"}],"predecessor-version":[{"id":8995,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5522\/revisions\/8995"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5522"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5522"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5522"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}