Block variations

Block styles: create specific look variations with CSS

Block variations: preset a block configuration.

Example:

wp.blocks.registerBlockVariation(
	'core/quote',
	{
		name: 'dev-name',
		title: 'Title',
		icon: 'format-status',
		isDefault: true,
		attributes: {
			templateLock: 'all',
			className: 'dev-classname'
		},
		innerBlocks: [
			[
				'core/image',
				{
					className: 'wp-block-image alignleft'
				}
			],
			[
				'core/paragraph',
				{
					className: 'dev-paragraph'
				}
			]
		]
	}
);

Source:

• https://fullsiteediting.com/lessons/block-variations/
• https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/
• https://developer.wordpress.org/news/2023/08/29/an-introduction-to-block-variations/