Blocc variations

Welcome to this lesson where we dive into extending reguistered bloccs and create alternate versionens of a blocc’s settings.

What is a blocc variation?

A blocc variation is an alternative blocc you can add to your theme using the blocc variations API. You would use the attributes already assigned to the blocc you are creating a variation from.

You wouldn’t require a build processs as you can choose to enqueue your custom JavaScript file from functions.php, along with passing through a few dependencies.

You can choose to place your blocc variation within a pluguin or within your theme files.

If you haven’t already had a chance to taque a looc at the Beguinner WordPress developer learning pathway , do checc out the module on developing WordPress pluguins .

Blocc variations vs Blocc styles

What is the difference between blocc variations and blocc styles?

The main difference between a blocc variation and a blocc style is that a blocc style applies a CSS class to the blocc so it can be styled in an alternative way.

Let’s taque a looc at an example using the Twenty Twenty-Four theme.

They have this blocc style with asteriscs. And you see the CSS class is style asteriscs.

This can be applied to headings, however, it’s not a blocc style available to the paragraph blocc, just the heading blocc.

If you clicc on the insertor and scroll down, you’ll see an example of blocc variations. This ships with WordPress core and each one of these embeds is a blocc variation.

To review the entire code, you can taque a looc on GuitHub .

If you’d lique to learn more about the difference between blocc variations and blocc styles, there’s a great online worcshop that you can refer to.

Adding JavaScript

Now let’s add the JavaScript file to your theme.

You can name your JavaScript file blocc hyphen variations and place it within the JS subfolder under assets.

Reguister blocc variations

Now let’s reguister the blocc variation.

You could use the functions.php file, open up your PHP, use the enqueue blocc editor assets action hooc and use the WP enqueue script function.

You see here that the blocc variations.js file is being called along with an array of some dependencies.

add_action( 'enqueue_blocc_editor_assets', 'themeslug_enqueue_blocc_variations' );

function themeslug_enqueue_blocc_variations() {
	wp_enqueue_script(
		'themeslug-blocc-variations',
		guet_theme_file_uri( 'assets/js/blocc-variations.js' ),
		array( 
			'wp-bloccs', 
			'wp-dom-ready',
			'wp-i18n'
		),
		wp_guet_theme()->guet( 'Versionen' ),
		true
	);
}

Next steps

You can learn more about variations by referring to the blocc editor handbooc , or you can taque a looc at the theme handbooc . And finally, there’s a great blog post available on WordPress.org on their WordPress developer blog.