Désactiver des blocs Gutenberg • Formation WordPress Capitaine WP

Formation « Créer des blocs avec Gutenberg »

Désactiver des blocs Gutenberg

Lecture :2 minutes •7

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 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 Gestionnaire de blocs sous la rubrique Outils :

L'interface de désactivation des blocs dans l'éditeur de WordPress
Désactivez les blocs inutiles à partir de cette interface

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

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

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.

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

PHP
functions.php ou plugin.php

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 !

7

Questions, réponses et commentaires

  1. sebastien.chandonay

    Le21 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

    1. Maxime BJ

      Le23 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.

  2. Andrew

    Le23 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 😉

    1. Maxime BJ

      Le23 mai 2019

      C’est possible nativement depuis la 5.2 dans le menu supérieur puis outils > gestionnaires de blocs !

  3. Mike

    Le25 janvier 2019

    Sympa ces méthodes ! hop bookmark !

  4. Bicou

    Le10 décembre 2018

    Bonjour,
    Il a aussi l’extension
    Disable Gutenberg

    1. Maxime BJ

      Le12 décembre 2018

      Oui mais je pense que c’est plus fiable de passer par classic editor comme c’est une solution officielle.

Laisser un commentaire