Désactiver des blocs natifs de Gutenberg avec et sans code

Gutenberg s’est montré plutôt généreux concernant les blocs de l’éditeur, mais tous ne sont pas utiles.

Vous allez donc vouloir en désactiver certains afin d’alléger l’interface, ce qui permettra une meilleure expérience utilisateur pour vos clients.

Et en plus, vous vous assurez qu’ils ne font pas n’importe quoi avec des blocs que vous n’avez pas prévu dans votre design.

On va donc voir 3 méthodes différentes, même si je vous recommande d’utiliser la méthode PHP qui est la plus pratique.

Méthode 1 : Rapide et sans code

La solution « no code » est de désactiver les blocs directement à partir de l’interface de l’éditeur, mais le réglage sera à refaire pour chacun des utilisateurs du site.

Pour cela, cliquez sur les 3 points en haut à droite de l’éditeur, puis Préférences > Blocs :

Tous les blocs sont listés, les natifs comme ceux ajoutés par des extensions. Un moteur de recherche vous permettra de les trouver plus facilement, car la liste est devenue très longue depuis l’ajout des blocs de sites, avec l’arrivée du Full Site Editing dans WP 5.9.

Sélectionnez ceux que vous ne désirez plus voir apparaitre dans la bibliothèque de blocs. Et le tour est joué !

Méthode 2 : la méthode PHP — recommandée

Il est également possible de désactiver les blocs directement grâce à du PHP, ce qui va s’avérer être plus efficace. C’est la méthode que je vous recommande.

Et on va avoir 2 approches différentes à notre disposition :

• La méthode par exclusion : on retire les blocs que l’on ne veut pas ;
• Et la méthode par inclusion : on indique uniquement les blocs qu’on veut.

À vous de choisir si vous souhaitez juste supprimer quelques blocs embêtants, ou si vous voulez un contrôle total sur les blocs proposés par WordPress.

Les deux méthodes vont consister à utiliser le hook allowed_block_types_all prévu à cet effet.

Exclusion : retirer seulement certains blocs

Dans cette fonction, on va indiquer la liste des blocs que l’on souhaite désactiver, sous forme de tableau PHP.

Le souci, c’est que le paramètre $allowed_block_types renvoie juste true, pour indiquer que tous les blocs seront disponibles.

La première fois, je pensais qu’on aurait la liste des blocs. Mais ce n’est pas grave puisqu’on va pouvoir aller la chercher via la classe PHP WP_Block_Type_Registry.

On va ensuite appliquer array_values et array_diff pour créer une liste de tous les blocs à l’exception de ceux que j’ai listés.

À l’avenir, vous n’aurez qu’à modifier la liste $blocks_to_disable.

Utilisez ce code soit dans le functions.php de votre thème, soit au sein de votre plugin.

Inclusion : autoriser uniquement certains blocs

Mais on pourrait très bien faire le contraire, et n’autoriser que certains blocs, histoire d’être hyper exclusif.

On peut même utiliser le second paramètre $editor_context pour définir les blocs à afficher en fonction d’un type de publication (ou custom post type).

Dans cet exemple, j’autorise seulement quelques blocs lorsqu’on est dans le custom post type « Portfolio ».

À noter que si on renvoie $allowed_block_types avec la true, tous les blocs seront autorisés, et s’il on indique false, aucun ne le sera.

Méthode 3 : via Javascript

Et enfin, cette dernière méthode est surtout historique puisque jadis, c’était la seule méthode pour désactiver des blocs.

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) :

Si vous êtes dans le cadre d’un thème :

Et si vous êtes dans le cadre d’un plugin :

Si vous avez suivi la formation « Développer des blocs sur-mesure », 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 deactivate-blocks.js on va simplement utiliser la fonction wp.blocks.unregisterBlockType (sachant que wp est un objet global déjà déclaré).

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.

Comment trouver les noms des blocs natifs ?

Pour connaitre la liste complète de tous les blocs disponibles dans WordPress, il existe désormais une documentation à ce sujet :

Liste de tous les blocs Gutenberg

Vous pouvez également afficher le code HTML du bloc depuis l’éditeur, via le bouton menu 3 points en haut à droite de l’écran.

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.

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