Modifier les supports 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.

Désactiver des supports de blocs existants

Vous pouvez désactiver les supports de chaque bloc en ajoutant le code suivant dans votre fichier editor.js :

function disableBlockSupports(settings,name){
  if(name==='core/buttons'){
    settings.supports.spacing = false;
    if ( settings.innerBlocks ) {
      settings.innerBlocks = settings.innerBlocks.map( block => {
        if ( block.name === 'core/button' ) { // Désactive les dimensions pour le sous-bloc "core/button"
          return {
            …block,
            supports: {
              …block.supports,
              spacing: false
            }
          };
        }
        return block;
      } );
    }
  }else if(name==='core/button'){
    if(settings.supports){
      settings.supports.spacing = false;
    }
  }
  return settings;
}
wp.hooks.addFilter('blocks.registerBlockType','habefast/disableBlockSupports',disableBlockSupports);

Ce script JavaScript modifie les paramètres des blocs pour désactiver le support des propriétés de dimensionnement (padding, margin et gap) pour les boutons (core/buttons pour le parent et core/button pour les sous-blocs).

Explications détaillées du code

Fonction disableBlockSupports : Cette fonction prend deux arguments, settings et name. settings contient les paramètres du bloc, et name est le nom du bloc.
Désactivation des dimensions : Si le nom du bloc est core/buttons, nous désactivons le support de l’espacement (spacing). Si le bloc contient des sous-blocs (innerBlocks), nous parcourons chaque sous-bloc pour désactiver également l’espacement pour les blocs de type core/button.
Filtre de registre des blocs : Nous ajoutons un filtre à blocks.registerBlockType qui applique notre fonction disableBlockSupports chaque fois qu’un bloc est enregistré. Cela assure que notre modification est appliquée à tous les blocs de type core/buttons et core/button.

Avec ces ajustements, vous pouvez personnaliser les supports des blocs Gutenberg pour mieux répondre aux besoins de votre site WordPress. Testez ces modifications pour voir comment elles peuvent améliorer l’apparence et la fonctionnalité de vos blocs!

Gutenberg : Modifier les supports de bloc

Désactiver des supports de blocs existants