Comment contrôler les blocs Gutenberg pour les publications dans WordPress : désactiver les blocs et les modèles de blocs

Le nouvel éditeur de WordPress, Gutenberg, donne à l’auteur une grande flexibilité pour créer un contenu riche. Mais dans certains cas, vous devrez peut-être limiter un peu cela, soit en tant que webmaster de site, soit en tant que développeur de thème. Dans cet article, nous verrons comment nous pouvons fournir des limitations de bloc dans Gutenberg en utilisant PHP.

Il existe des fonctionnalités intégrées pour définir certaines limitations dans les blocs que beaucoup ne connaissent pas encore. Cela peut être utile lorsque vous avez besoin que certains articles suivent la même conception ou le même contenu, ou si vous souhaitez aider les auteurs non techniques à ne pas être submergés par le nombre de blocs dans Gutenberg. Un autre exemple consiste à ajouter automatiquement les blocs d’annonces nécessaires (si vous avez un plug-in d’annonces) entre les textes des publications. Vous pouvez soit forcer cela, soit utiliser ces techniques pour aider les auteurs à se rappeler de les ajouter.

Dans cet article, nous examinerons deux manières de contrôler les blocs dans WordPress Gutenberg. Une façon consiste à limiter le type de blocs pouvant être ajoutés. En d’autres termes, supprimez certains types de blocs que vous ne souhaitez pas voir disponibles. Nous pouvons le faire spécifiquement par type de publication ou globalement. L’autre méthode consiste à utiliser des modèles de blocs. WordPress vous propose de décider d’un ensemble de blocs prédéfinis lorsque vous créez un nouveau message. Ceci est fait par type de poste. Avec les modèles de blocs, vous pouvez offrir à l’auteur les blocs initiaux pour l’aider à rédiger le message, ou vous pouvez verrouiller les blocs en place afin que l’auteur ne puisse pas modifier leur position ou en ajouter de nouveaux.

Vous pouvez faire les deux avec PHP ou Javascript. Ce guide couvrira la méthode PHP.

Supprimer les types de blocs

Liste noire

Il existe un filtre PHP dans WordPress appelé allowed_block_types. Ce filtre vous donne deux paramètres ; un tableau de tous les blocs et l’objet post. Tout ce que nous avons à faire est de gérer le tableau avant de le retourner. Et parce que nous obtenons également l’objet de publication dans le filtre, nous pouvons également ajouter des règles par type de publication ou d’autres méta-informations de publication.

Le tableau de blocs se compose de chaînes de noms d’espace de noms du bloc. Tous les blocs de WordPress nécessitent un espace de noms préfixé avant le nom du bloc. Pour les blocs principaux de WordPress, l’espace de noms est " core/" et pour les blocs d’intégration WordPress, l’espace de noms est " core-embed/". Par exemple, le bloc d’en-tête porte le nom " core/heading" dans ce tableau. J’ai créé un aperçu complet de tous les noms de types de blocs dans mon article sur Comment pour accéder et analyser les blocs d’un article.

Voici un exemple rapide d’utilisation du filtre pour supprimer tous les blocs sauf le paragraphe. Cela s’appliquera à tous les types de messages.

add_filter('allowed_block_types', function($block_types, $post) {
    return ['core/paragraph'];
}, 10, 2);

Si vous ajoutez ce code dans le fichier de votre thème functions.phpou de votre plugin, le résultat est que Gutenberg interdit complètement tout autre bloc que le paragraphe. Vous ne pourrez même pas voir d’autres blocs, vous ne pouvez pas non plus essayer de les attirer en tapant «/» dans le message (raccourci de bloc) ou en les recherchant.

Nous pouvons définir les blocs que nous voulons conserver ou supprimer par type de publication. Nous vérifions simplement la propriété post_typesur l’objet post. Dans l’exemple de code ci-dessous, nous définissons un nouveau tableau des blocs que nous voulons autoriser et ajoutons cette règle uniquement pour le type de publication personnalisé ‘ book‘.

Avec le code ci-dessus, vous obtenez tous les blocs lors de la modification des publications et des pages, mais lors de la modification du type de publication personnalisé " book", vous ne pouvez ajouter que des paragraphes, des titres et des images uniques.

Utilisez votre imagination pour ajouter vos propres règles. Parce que nous avons l’objet post, nous pouvons accéder à la plupart des informations dont nous aurions besoin. Peut-être avez-vous besoin de limiter les choix de blocs par une post meta value? Par exemple, par le modèle de page choisi, la catégorie de publication choisie ou autre chose.

Liste blanche

Autant que je sache, vous ne pouvez mettre en liste blanche (décider lesquels supprimer, par opposition à décider lequel conserver) les blocs qu’en désenregistrant les blocs à un certain point. Et vous devez le faire avec Javascript et non PHP.

Je n’entrerai pas dans les détails à ce sujet, mais vous devrez mettre en file d’attente un fichier Javascript chargé dans initou enqueue_block_editor_assetshook, avec wp-dom-readyet wp-blockscomme dépendance. Dans le script, vous pouvez configurer une variable de celle(s) que vous souhaitez supprimer, en suivant les mêmes règles pour les espaces de noms et les noms de blocs ci-dessus. Et pour chaque nom de bloc, vous appelez la fonction unregisterBlockType()du wp.blockspackage. Habituellement, vous devez le faire à l’intérieur d’une fonction wp.domReady()pour vous assurer que l’ordre de chargement du script est correct.

Quelque chose comme ça:

var removeBlocks = [
    'core/paragraph',
    'core/heading',
    'core/image'
];
 
wp.domReady(function() {
    removeBlocks.forEach(function(blockName) {
        wp.blocks.unregisterBlockType(blockName);
    });
});

La suppression des types de blocs est un moyen de contrôler les blocs dans Gutenberg. Regardons l’autre façon, peut-être plus amusante, de contrôler les blocs: les modèles de blocs.

Modèles de bloc

Une autre façon de contrôler les blocs Gutenberg dans WordPress consiste à utiliser des modèles de blocs. WordPress a une fonctionnalité qui vous permet de remplir de nouveaux messages avec un ensemble de blocs prédéfinis. Cela peut être utile pour aider les auteurs en leur montrant une suggestion de structure de bloc. Vous pouvez également choisir de verrouiller ces blocs préremplis, empêchant ainsi les auteurs de réorganiser ou d’ajouter d’autres blocs. Ceci est utile lorsque vous souhaitez que les publications aient une structure et une conception spécifiques – par exemple, assurez-vous que toutes les publications de ce type de publication ont leurs informations structurées exactement de la même manière.

Nous pouvons ajouter des modèles de bloc avec un nouveau paramètre à la [register_post_type](https://developer.wordpress.org/reference/functions/register_post_type/)()fonction utilisée pour enregistrer les types de publication personnalisés (remarque : le nouveau paramètre n’a pas encore été ajouté à la documentation). Vous pouvez également ajouter ou ajuster les paramètres sur les types de publication existants tels que les publications et les pages – voir ci-dessous comment.

Le nouveau paramètre à register_post_type()est ‘ template‘. Comme valeur pour ‘ template‘, vous devez fournir un tableau de blocs. Chaque bloc doit également être un tableau. Au minimum, vous devez fournir le premier élément du tableau ; le nom du bloc (par exemple core/paragraph). Vous pouvez éventuellement ajouter un deuxième élément de tableau pour les attributs et un troisième élément de tableau pour les blocs imbriqués (par exemple, les blocs Cover, Columns). Cela deviendra plus clair lorsque vous verrez le code.

Commençons simple. Supposons que nous ayons un register_post_type()appel de fonction pour enregistrer un type de publication personnalisé ‘ book‘. Nous voulons pré-remplir tous les nouveaux articles de ce type d’article avec un bloc de paragraphe avec un espace réservé indiquant à l’auteur ce qu’il ou elle doit écrire.

Notez que le tableau d’attributs (avec ‘placeholder’ dedans) est facultatif. Maintenant, avec ce paramètre ‘template’ chaque fois que nous créons de nouveaux articles, il sera créé avec un bloc de paragraphe qui a l’espace réservé "Ecrivez votre intro ici…".

Prenons un exemple plus compliqué: les blocs imbriqués. Supposons que nous voulions ajouter un bloc de couverture contenant un bloc de titre, un paragraphe et un bouton à l’intérieur, alignés au centre. Le titre et le paragraphe auront un espace réservé :

L’image ci-dessous montre ce que nous obtiendrons lorsque nous créerons de nouveaux articles de livre. Cela a l’air moins intimidant qu’une toile vierge, n’est-ce pas ?

Gardez à l’esprit que les attributs sont différents dans chaque type de bloc et peuvent également différer dans votre configuration. Dans l’exemple de code ci-dessus, j’ajoute deux attributs au bloc Cover ; bloquer l’alignement sur "pleine largeur" ​​et superposer la couleur sur une couleur prédéfinie à partir d’une palette de couleurs personnalisée.

Les alignements de blocs « large largeur » et « pleine largeur » doivent être spécifiquement pris en charge dans votre thème. J’ai un article qui explique comment ajouter la prise en charge dans votre thème pour des alignements de blocs supplémentaires si vous n’êtes pas familier avec cela. Deuxièmement, mon thème fournit une palette de couleurs Gutenberg personnalisée dans laquelle l’une des couleurs de la palette est nommée "profil bleu". Cela n’existera probablement pas dans votre code. Le lien ci-dessus explique également cela si vous n’êtes pas familier avec la palette Gutenberg personnalisée.

La raison pour laquelle j’ai choisi de fournir une couleur de superposition en tant qu’attribut est due au comportement du bloc Couverture. Lorsque vous créez un bloc de couverture, il commence par vous demander de choisir entre définir une image d’arrière-plan ou choisir une couleur d’arrière-plan. Jusqu’à ce que l’auteur en choisisse activement un, le bloc Couverture masque tout son contenu (le titre, le paragraphe et le bouton que nous avons ajoutés) ! Ils apparaîtront soudainement après avoir choisi une image ou une couleur. Par conséquent, pour éviter toute confusion, j’ai présélectionné une couleur d’arrière-plan afin que l’auteur voie immédiatement tous les blocs à l’intérieur. De toute façon, la couleur peut toujours être modifiée dans l’inspecteur (barre latérale).

Verrouiller le modèle de bloc

Avec le modèle de bloc fourni, l’auteur peut réorganiser et supprimer n’importe lequel des blocs préremplis, ainsi qu’ajouter de nouveaux blocs où il le souhaite. Si vous voulez éviter cela, il y a un autre paramètre à register_post_type(): ‘ template_lock‘.

Le template_lockparamètre ‘ ‘ accepte deux valeurs ; ‘ all‘ ou ‘ insert‘.

Définir ‘ template_lock‘ sur ‘ all‘ empêche complètement les auteurs de réorganiser, supprimer ou ajouter de nouveaux blocs à votre modèle de bloc. Ils peuvent uniquement modifier le contenu et les paramètres des blocs définis comme modèle de bloc. Ceci est utile dans les cas où vous souhaitez que tous les types de publication soient constitués des mêmes blocs dans le même ordre – ni plus ni moins.

L’utilisation de ‘ insert‘ pour ‘ template_lock‘ permet aux auteurs de réorganiser les blocs dans le modèle de bloc. Mais les auteurs ne peuvent toujours pas ajouter de nouveaux blocs ou supprimer l’un des blocs.

Voici comment verrouiller complètement le modèle de bloc pour le type de message personnalisé " book" :

L’utilisation d’un modèle de bloc verrouillé dans Gutenberg ressemblera à ci-dessous. Notez que les icônes d’action pour réorganiser les blocs sont manquantes ainsi que la suppression des liens de bloc dans le menu. Il n’y a pas non plus d’icônes d’action pour ajouter de nouveaux blocs (le petit "+") n’importe où.

Ajustement des modèles de bloc pour les types de publication existants

Si vous souhaitez utiliser des modèles de blocs sur des publications ou des pages, vous pouvez également le faire. Accrochez une fonction initet utilisez [get_post_type_object](https://developer.wordpress.org/reference/functions/get_post_type_object/)(). Fournissez le type de message que vous voulez comme paramètre (soit ‘ post‘ ou ‘ page‘). Cela renvoie un objet auquel vous pouvez affecter la propriété ‘ template‘ et ‘ template_lock‘.

Voici un exemple d’ajout du même modèle de bloc et de la même propriété de verrouillage que ci-dessus sur les pages :

Conclusion

Dans cet article, nous avons appris comment obtenir un meilleur contrôle des blocs dans l’éditeur WordPress Gutenberg. Cela présente de nombreux avantages, en particulier en combinaison avec des types de publication personnalisés qui doivent suivre une structure spécifique. L’utilisation des techniques ci-dessus vous aidera à rationaliser davantage votre processus, à la fois en tant que webmaster (aider les gens à rédiger de meilleurs articles) et en tant que développeur de thèmes (garantir une conception commune). Les modèles de blocs verrouillés peuvent être une solution différente des modèles de publication personnalisés et des méta de publication.

La personnalisation des modèles de blocs est encore une fonctionnalité assez cachée de Gutenberg pour le moment. Mais je m’attends à ce que cela change au fur et à mesure que Gutenberg se développe et obtient une place plus familière dans WordPress.