Formation « Créer un site WordPress avec le Full Site Editing »

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

Lecture : 4 minutes • 9

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 !

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 :

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

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é !

Attention

Cette technique ne fonctionnera que pour l’utilisateur actuellement connecté. Les autres utilisateurs auront toujours accès à tous les blocs.

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.

PHP
functions.php ou plugin.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).

PHP
functions.php ou plugin.php

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.

À éviter

L’ancien hook allowed_block_types a été déprécié, ne l’utilisez plus !

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 :

PHP
functions.php

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

PHP
plugin.php

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é).

JS
deactivate-blocks.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 ?

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.

Gutenberg est affiché en mode éditeur de code. Dans le HTML, on retrouve le nom des blocs sous forme de commentaire.
Trouver le nom d’un bloc dans 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.


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 !

9

Questions, réponses et commentaires

  1. Bicou

    Le 10 décembre 2018

    Bonjour,
    Il a aussi l’extension
    Disable Gutenberg

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

  2. Mike

    Le 25 janvier 2019

    Sympa ces méthodes ! hop bookmark !

  3. 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 😉

    1. Maxime BJ

      Le 23 mai 2019

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

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

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

  5. Mitch

    Le 28 mai 2024

    Bonjour,
    Voilà des bonnes astuces !
    Par hasard, il n’y aurait pas une solution sans plugin pour retirer un bloc (table des matières en l’occurrence) présent sur presque toutes des pages sans avoir à le faire page par page… galère ;(
    Merci d’avance

    1. Maxime BJ

      Le 28 mai 2024

      Par défaut les pages sont vides. Si les blocs y sont déjà, c’est que le thème ou une extension a configuré ça ainsi. Si tu désactives le bloc dans l’éditeur, le template affichera qu’il contient un bloc inconnu. D’ailleurs, il n’y a pas de bloc « table des matières » par défaut dans WordPress. Il faut déjà que tu trouves qui apporte ce bloc dans ton site.

Laisser un commentaire