Modify Gutenberg block variants

Modifying existing blocks in Gutenberg may seem complex, but with WordPress, there are various JavaScript functions for adjusting supports, styles, adding HTML classes, and more. In this article, we’ll show you how to disable certain block supports to make your site even more personalized.

Pour commencer, vous devez créer un fichier editor.js à la racine de votre thème. Ce fichier contiendra le code JavaScript nécessaire pour modifier les supports des blocs. Ensuite, vous devez inclure ce fichier dans votre thème en ajoutant le code suivant à votre fichier functions.php :

PHP

add_action('enqueue_block_editor_assets',function(){
	wp_enqueue_script('custom-blocks-editor',get_stylesheet_directory_uri().'/editor.js',array('wp-blocks','wp-dom'),"1",true);
});

This code ensures that the editor.js file is loaded into the WordPress block editor, allowing you to modify existing blocks.

Delete existing styles

You can delete the styles for each block using the following code in your editor.js file:

wp.domReady(()=>{
	wp.blocks.unregisterBlockStyle('core/button','outline');
	wp.blocks.unregisterBlockStyle('core/button','fill');
});

In this example, we remove the styles for core/buttons. This can be useful if you want to simplify the options available to users or impose a more consistent style on your site.

Adding block styles

You can add styles for each block using the following code in your editor.js file:

wp.domReady(()=>{
	wp.blocks.registerBlockStyle('core/button', {
    	name: 'primary-button',
    	label: 'Blue',
    	isDefault: true
  	});
  	wp.blocks.registerBlockStyle('core/button', {
    	name: 'secondary-button',
    	label: 'Orange'
  	});
  	wp.blocks.registerBlockStyle('core/button', {
    	name: 'white-button',
    	label: 'White'

In this example, we’re adding three new button styles (core/button). The default style will be the blue button (primary-button), and we’re also adding styles for the orange button (secondary-button) and the white button (white-button).

Add CSS code to customize each style

These CSS rules define the appearance of the buttons according to the styles we saved earlier. You can customize the styles to suit the aesthetics of your site.

CSS

.wp-block-buttons .wp-block-button .wp-element-button {
  background: blue;
}

.wp-block-buttons .wp-block-button.is-style-secondary-button .wp-element-button {
  background: red;
}

.wp-block-buttons .wp-block-button.is-style-white-button .wp-element-button {
  background: white;
}

Conclusion

Editing block variants in Gutenberg is a powerful way to customize the block editor to meet your site’s specific needs. By following these steps, you can remove unwanted styles and add your own, creating a more consistent and aesthetically pleasing experience for users of your WordPress site. Try out these modifications and see how they can improve the presentation and functionality of your blocks!

Gutenberg: Modifying block variants

Delete existing styles

Adding block styles

Add CSS code to customize each style

Conclusion