Formation « Créer des blocs avec Gutenberg »

Désactiver des blocs Gutenberg

Lecture : 3 minutes • 0

Gutenberg fournit trop de blocs par défaut ? Vous voulez en désactiver pour alléger l'interface, ou éviter que votre client fasse des siennes ? Je vous propose dans cet article 2 méthodes, une avec et une autre sans code !

Il y a pleins de raisons à vouloir désactiver des blocs Gutenberg, la principale étant de vouloir alléger l’interface et limiter les possibilités à nos utilisateurs.

Méthode 1 : rapide et sans code

La solution « sans code » est d’installer une extension comme Advanced Gutenberg Blocks, qui propose un tableau de bord permettant de lister tous les blocs natifs, et les désactiver au besoin d’un seul clic :

Désactiver les blocs Gutenbergs
Désactivation des blocs en un clic !

Méthode 2 : via JavaScript

L’autre méthode ne va pas nous nécessiter beaucoup de code !

Il va nous falloir un simple bout de JS qu’il faudra charger au bon moment : après l’éditeur et après la déclaration des blocs natifs.

Pour cela on va utiliser le hook PHP enqueue_block_editor_assets et ne pas oublier de déclarer la bonne dépendance (les fichiers JS à charger avant nous) :

PHP
functions.php
<?php 

function my_plugin_editor_assets() {
  
    wp_enqueue_script(
        'gutenblocks-block-deactivator',
        plugins_url( 'js/deactivator.js'),
        [ 'wp-edit-post' ], // Dépendance obligatoire
        '1.0'
    );
  
}
add_action( 'enqueue_block_editor_assets', 'my_plugin_editor_assets' );

D’ailleurs on a déjà utilisé ce hook pour déclarer les styles et scripts nécessaires au bon fonctionnement de Gutenberg.

Et dans le fichier deactivator.js on va simplement utiliser la fonction wp.blocks.unregisterBlockType (sachant que wp est un objet global déjà déclaré).

JS
js/deactivator.js
_wpLoadBlockEditor.then( function() {
  
  wp.blocks.unregisterBlockType('core/image');
  wp.blocks.unregisterBlockType('core/button');
  wp.blocks.unregisterBlockType('core/gallery');

  wp.blocks.unregisterBlockType('woocommerce/products');

});

Le tout est empaqueté dans une « promesse » Javascript, ce qui permet d’attendre que tous les blocs soient déclarés dans l’éditeur avant de les désactiver. Sans ça, on aurait une erreur undefined dans la console.

Ce code ne nécessite pas de compilation via Webpack. Il est utilisable en l’état.

À éviter

N'essayez pas de mettre ces instructions dans le JS standard de vos blocks Gutenberg, sous prétexte d'économiser une requête HTTP : l'autre script est lancé trop tôt et ce code n'aura donc aucun effet.

Comment trouver les noms des blocs natifs ?

Le plus simple est d’afficher le code HTML du bloc depuis l’éditeur, via le bouton menu 3 petits points en haut à droite de l’écran.

Trouver le nom des blocs Gutenberg

Ensuite, dans le commentaire, vous aurez le nom du bloc. Pour les blocs natifs il faudra ajouter core/ avant le nom, par exemple core/button pour le bouton.

Vous pouvez du coup très bien désactiver également les blocs d’extensions tierces, par exemple woocommerce/products.

Méthode 3 : via PHP

Il est également possible de désactiver les blocs directement grâce à du PHP, d’après le Handbook Gutenberg. Pour cela, un filtre vous permet de définir la liste des blocs autorisés :

PHP
plugin.php ou functions.php
<?php 

function my_plugin_allowed_block_types( $allowed_block_types, $post ) {
    if ( $post->post_type !== 'post' ) { // Test du type de publication (facultatif)
        return $allowed_block_types;
    }
    
  	return array( 'core/paragraph', 'core/image' ); // ici on n'autorise que le paragraphe et l'image
}

add_filter( 'allowed_block_types', 'my_plugin_allowed_block_types', 10, 2 );

Cette méthode est d’autant plus efficace que vous pourrez définir des cas spécifiques en fonction du type de publication (Post Type).

À noter que si $allowed_block_types est à true, tous les blocs seront autorisés, et s’il est à false, aucun ne le sera.


Voilà, libre à vous de faire du tri, et de vous approprier cet éditeur visuel afin qu’il corresponde entièrement à vos besoins !

0

Questions, réponses et commentaires

    Laisser un commentaire