Modifier les variantes de blocs Gutenberg

Modifier les blocs existants dans Gutenberg peut sembler complexe, mais avec WordPress, il existe différentes fonctions JavaScript pour ajuster les supports, les styles, ajouter des classes HTML, et plus encore. Dans cet article, nous allons vous montrer comment désactiver certains supports de blocs pour rendre votre site encore plus personnalisé.

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);
});

Ce code assure que le fichier editor.js est chargé dans l’éditeur de blocs de WordPress, vous permettant ainsi de modifier les blocs existants.

Supprimer des styles existantes

Il est possible de supprimer les styles de chaque bloc en utilisant le code suivant dans votre fichier editor.js :

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

Dans cet exemple, on supprime les styles pour les boutons (core/button). Cela peut être utile si vous souhaitez simplifier les options disponibles pour les utilisateurs ou imposer un style plus cohérent sur votre site.

Ajouter des styles de blocs

Il est possible d’ajouter des styles pour chaque bloc en utilisant le code suivant dans votre fichier editor.js :

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'

Dans cet exemple, nous ajoutons trois nouveaux styles pour les boutons (core/button). Le style par défaut sera le bouton bleu (primary-button), et nous ajoutons également des styles pour les boutons orange (secondary-button) et blanc (white-button).

Ajouter du code CSS pour personnaliser chaque style

Ces règles CSS définissent l’apparence des boutons selon les styles que nous avons enregistrés précédemment. Vous pouvez personnaliser les styles selon vos besoins pour correspondre à l’esthétique de votre 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

Modifier les variantes de blocs dans Gutenberg est un moyen puissant de personnaliser l’éditeur de blocs pour répondre aux besoins spécifiques de votre site. En suivant ces étapes, vous pouvez supprimer les styles indésirables et ajouter vos propres styles, créant ainsi une expérience plus cohérente et esthétique pour les utilisateurs de votre site WordPress. Essayez ces modifications et voyez comment elles peuvent améliorer la présentation et la fonctionnalité de vos blocs!

Gutenberg : Modifier les variantes de bloc

Supprimer des styles existantes

Ajouter des styles de blocs

Ajouter du code CSS pour personnaliser chaque style

Conclusion