Block Variation Examples

block-variation-examples

/**
 * Add the following to a theme's functions.php file.
 */

function example_enqueue_block_variations() {
	wp_enqueue_script( 
		'frost-enqueue-block-variations', 
		get_template_directory_uri() . '/assets/js/variations.js', 
		array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ) 
	);
}
add_action( 'enqueue_block_editor_assets', 'example_enqueue_block_variations' );


/**
 * Add the following to a variations.js file located in the theme's assets/js/ folder.
 */

wp.domReady( function() {

    /**
     * A Group block variation with a rounded border and padding.
     */
     wp.blocks.registerBlockVariation( 'core/group', {     
        name: 'group-rounded-border',
        title: 'Group - Rounded Border',
        description: 'A group with a solid shadow',
        isDefault: false,
        attributes: { 
            style: {
                border: {
                    radius: "20px",
                    width: "1px",
                },
                spacing: {
                    padding: {
                        top: "var:preset|spacing|30",
                        right: "var:preset|spacing|30",
                        bottom:"var:preset|spacing|30", 
                        left: "var:preset|spacing|30"
                    }
                }
            },
            borderColor: "contrast"
        },
    } );

    /**
     * Set the default text color on the Quote block.
     */
    wp.blocks.registerBlockVariation(
        'core/quote', 
        {
            name: 'primary-quote',
            title: 'Quote',
            isDefault: true,
            attributes: { 
                textColor: 'primary', 
                className: 'is-style-primary-quote' 
            }
        },
    );

    /**
     * Customize the defauly Media & Text block.
     */
    wp.blocks.registerBlockVariation(
        'core/media-text', 
        {
            name: 'custom-media-text',
            title: 'Media & Text',
            isDefault: true,
            attributes: { 
                mediaPosition: 'right', 
                backgroundColor: 'secondary' 
            },
            innerBlocks: [
                [
                    'core/heading',
                    {
                        level: 3,
                        placeholder: 'Heading'
                    } 
                ],
                [
                    'core/paragraph',
                    {
                        placeholder: 'Start writing your story...'
                    } 
                ],
            ]
        },
    );

    /**
     * Disable the stack variation in the Group block.
     */
    wp.blocks.unregisterBlockVariation( 'core/group', 'group-stack' );

    /**
     * Disable all unused icon variations in the Social Icons block.
     */
    const unusedSocialIcons = [
        'fivehundredpx',
        'amazon',
        'bandcamp',
        'behance',
        'chain',
        'codepen',
        'deviantart',
        'dribbble',
        'dropbox',
        'etsy',
        'feed',
        'flickr',
        'foursquare',
        'goodreads',
        'google',
        'instagram',
        'lastfm',
        'mastodon',
        'meetup',
        'medium',
        'patreon',
        'pinterest',
        'pocket',
        'reddit',
        'skype',
        'snapchat',
        'soundcloud',
        'spotify',
        'telegram',
        'tiktok','tumblr',
        'twitch',
        'vimeo',
        'vk',
        'whatsapp', 
        'yelp', 
        'youtube'
    ];
    unusedSocialIcons.forEach( ( icon ) => wp.blocks.unregisterBlockVariation( 'core/social-link', icon ) );

});

Thanks for the lesson and sharing these tips.
I like the idea of variation with styles to set the sidebar setting defaults rather than just the css directly, so css is last step and not a frustration to user.