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 3 méthodes, avec et sans code !
Sommaire du cours
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 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
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 :
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.
Méthode 3 : via Javascript
Et enfin, cette dernière méthode ne va pas nous nécessiter beaucoup de code mais risque de ne plus fonctionner à l’avenir !
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) :
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é).
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 ?
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.
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 !
Bicou
Le 10 décembre 2018
Bonjour,
Il a aussi l’extension
Disable Gutenberg
Maxime BJ
Le 12 décembre 2018
Oui mais je pense que c’est plus fiable de passer par classic editor comme c’est une solution officielle.
Mike
Le 25 janvier 2019
Sympa ces méthodes ! hop bookmark !
Andrew
Le 23 mai 2019
Bonjour,
Est-il possible de choisir les types de blocs à afficher dans l’admin selon le modèle choisi en back office ?
Merci d’avance pour ton retrour 😉
Maxime BJ
Le 23 mai 2019
C’est possible nativement depuis la 5.2 dans le menu supérieur puis outils > gestionnaires de blocs !
sebastien.chandonay
Le 21 février 2020
Bonjour Maxime et merci pour tes tutos. Une question, quelle est la meilleure solution pour désactiver un bloc en fonction du type de contenu (post-type) sans avoir, pour la part PHP, à écrire à la main tous les slugs de blocs à laisser actif ?
Merci
Maxime BJ
Le 23 mars 2021
Grâce à la méthode 3 du PHP, tu vérifies le type de publication au début de la fonction. Tu pourrais donc créer des cas spéciaux en fonction via des if/else.