Modèles de blocs de Gutenberg : regard d’un développeur

Un aperçu des nouveaux modèles de blocs de WordPress Gutenberg, dans les yeux d’un développeur. Nous examinerons ce qu’ils sont, à quoi ils peuvent être utilisés et nous verrons plus en détail comment écrire du code pour eux.

Modèles de bloc et leur utilisation

Les modèles de blocs ont été introduits dans WordPress 5.5 (11 août 2020). Il s’agit d’une nouvelle fonctionnalité de l’outil d’insertion de blocs pour insérer plus facilement une configuration prédéfinie de plusieurs blocs. Les développeurs de thèmes ou de plugins peuvent définir un groupe de blocs, leur mode d’imbrication, leur contenu et leurs attributs, et les utilisateurs finaux peuvent l’insérer en un simple clic. L’idée est que les utilisateurs finaux n’ont plus besoin de créer manuellement des mises en page complexes et tous leurs paramètres personnalisés, et de les imbriquer dans des conteneurs appropriés pour les blocs qu’ils utilisent souvent.

Une fois qu’un motif de bloc est ajouté à l’éditeur, les blocs ne savent pas qu’ils ont été ajoutés via un motif de bloc. Ils sont ajoutés en tant que blocs normaux permettant aux utilisateurs de modifier leur contenu et leurs paramètres. C’est essentiellement un raccourci pour ajouter une configuration de plusieurs blocs.

L’idée est bonne! Tous les utilisateurs finaux ne sont pas à l’aise pour créer une grande structure de blocs imbriqués dans l’éditeur afin de lui donner un aspect parfait. Cependant, jusqu’à présent, cette fonctionnalité est principalement un avantage pour les développeurs, car les utilisateurs finaux ne peuvent pas créer leurs propres modèles. Pour les propres blocs personnalisés des utilisateurs, ils doivent s’en tenir à l’utilisation de blocs réutilisables. Mais surtout pour les développeurs de thèmes, les modèles de blocs leur permettent de vraiment montrer aux utilisateurs finaux la meilleure configuration de blocs qui fonctionne bien dans le thème.

WordPress a ajouté un nouveau support de thème pour les modèles de blocs: 'core-block-patterns'. Depuis la version 5.5.0, Core exécutera automatiquement un add_theme_support('core-block-patterns')afin que vous n’ayez pas besoin de le faire dans votre thème.

Étant donné que toutes les fonctions de modèle de bloc n’existent que dans une toute nouvelle version de WordPress, c’est une bonne idée de vérifier d’abord son existence, afin de ne pas casser les sites avec des versions plus anciennes de WordPress. Dans tous les exemples de code ci-dessous, j’ai fait exactement cela.

WordPress 5.5 est livré avec 9 modèles de blocs prédéfinis (voir la liste ci-dessous). Les modèles de blocs sont affichés dans les catégories de modèles (le noyau ajoute 5 catégories). Les catégories de modèle de bloc fonctionnent comme les catégories de publication ; vous pouvez mettre un motif de bloc dans plusieurs catégories. Les développeurs de thèmes et de plugins peuvent enregistrer leurs propres modèles de blocs et catégories de modèles de blocs, ainsi que désenregistrer ceux du noyau. Alors regardons de plus près comment !

Modèles de blocs et catégories de modèles de blocs inclus dans WordPress 5.5

Les modèles de bloc livrés dans WordPress 5.5 sont les suivants (l’espace de noms et l’ID de slug de chaque modèle sont affichés entre parenthèses) :

• Deux boutons (‘ core/two-buttons‘)
• Trois boutons (‘ core/three-buttons‘)
• Deux colonnes de texte (‘ core/text-two-columns‘)
• Deux colonnes de texte avec des images (‘ core/text-two-columns-with-images‘)
• Trois colonnes de texte avec des boutons (‘ core/text-three-columns-buttons‘)
• Deux images côte à côte (‘ core/two-images‘)
• Grand en-tête avec un titre (‘ core/large-header‘)
• Grand en-tête avec un titre et un bouton (‘ core/large-header-button‘)
• Citation (‘ core/quote‘)

Les catégories ajoutées dans WordPress 5.5 sont (leurs identifiants de slug sont affichés entre parenthèses) :

• Boutons (‘ buttons‘)
• Colonnes (‘ columns‘)
• Galerie (‘ gallery‘)
• En-têtes (‘ header‘ – notez pas de ‘s’ à la fin)
• Texte (‘ text‘)

Désenregistrement des modèles de bloc

Vous pouvez désenregistrer des motifs de bloc à l’aide de la fonction [unregister_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern)(). Fournissez simplement une chaîne avec le modèle de bloc à supprimer en tant que paramètre. Reportez-vous à la vue d’ensemble ci-dessus pour les modèles de blocs de base. Exécutez cette fonction dans une fonction liée à l’ initaction.

Un exemple de désenregistrement des motifs de bloc de base "Deux boutons" et "Trois boutons":

add_action('init', function() {
    if (!function_exists('unregister_block_pattern')) {
        return;
    }
    unregister_block_pattern('core/two-buttons');
    unregister_block_pattern('core/three-buttons');
});

Enregistrement de motifs de bloc

L’enregistrement d’un nouveau motif de bloc s’effectue à l’aide de la fonction [register_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern)(). Il accepte deux paramètres ; le premier est une chaîne d’un nom unique pour votre modèle, y compris l’espace de noms. Le second est un tableau de paramètres pour votre modèle de bloc.

Astuce: La définition d’un modèle de bloc nécessite que vous fournissiez un contenu HTML brut pour votre configuration de bloc. Je ne recommande pas de taper ceci manuellement car cela entraînera facilement des conflits de blocs invalides. Au lieu de cela, allez dans l’éditeur et configurez les blocs comme vous le souhaitez dans votre modèle. Cliquez ensuite sur le "menu point" dans la barre d’outils du bloc parental et cliquez sur "Copier". Après cela, vous pouvez retourner dans votre éditeur de code et coller (Ctrl+V). Cela vous donne le code HTML brut de la configuration que vous avez copiée. Utilisez la fonctionnalité de l’éditeur de code pour remplacer toutes les nouvelles lignes net assurez-vous d’échapper correctement les guillemets.

Les propriétés de votre modèle de bloc sont les suivantes (deuxième tableau d’arguments) :

• title(obligatoire) : le nom affichable de votre modèle de bloc
• **content**(obligatoire): HTML RAW de la configuration du bloc
• description: Description de votre modèle de bloc. Est visuellement caché
• categories: Un tableau de catégories dans lesquelles ajouter ce modèle de bloc. Si vous ne fournissez pas cette propriété, le bloc sera placé dans une catégorie de modèle de bloc "Non catégorisé".
• keywords: Un tableau de mots-clés qui peuvent aider les utilisateurs à trouver votre modèle lors de la recherche
• viewportWidth: Indiquez un entier de la largeur du motif de bloc dans l’inséreuse. Affecte uniquement l’aperçu dans l’inséreuse.

Voici un exemple d’enregistrement d’un modèle de bloc qui se compose d’un bloc Couverture pleine largeur avec une couleur d’arrière-plan, qui contient un bloc Titre aligné au centre avec une couleur de texte spécifique et un paragraphe aligné au centre d’une couleur de texte spécifique :

Enregistrement de catégories de motifs de bloc

Les développeurs peuvent également enregistrer des catégories de modèles de blocs personnalisés. Cela se fait avec la fonction [register_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern_category)(). Il accepte deux paramètres ; d’abord une chaîne de la catégorie slug, et ensuite un tableau de propriétés. À l’heure actuelle, une seule propriété est prise en charge dans le deuxième argument ; labelpour le nom lisible de la catégorie.

Vous trouverez ci-dessous un exemple d’enregistrement d’une catégorie de modèle de bloc personnalisé :

Avec cela, vous pouvez ajouter ‘awp-patterns’ à l’ categoriesargument ‘ ‘ de register_block_pattern(). Gardez à l’esprit que si une catégorie n’a pas de motifs de blocs enregistrés, la catégorie ne sera pas affichée dans l’outil d’insertion de blocs. Vous devrez ajouter au moins un motif de bloc dans cette catégorie pour le faire apparaître.

Désenregistrement des catégories de modèles de blocs

Enfin, il existe une fonction [unregister_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern_category)()pour désenregistrer une catégorie de modèle de bloc. Fournissez le slug de catégorie comme paramètre. Reportez-vous à l’aperçu des catégories de modèles de blocs ci-dessus pour les catégories de base et leurs slugs.

N’oubliez pas que les catégories de modèles de bloc sans aucun modèle de bloc qui lui est attribué ne seront pas visibles dans l’outil d’insertion de bloc. Ainsi, si vous désenregistrez tous les motifs de bloc affectés à une catégorie, la catégorie elle-même ne sera plus visible et vous n’aurez pas nécessairement besoin de désenregistrer la catégorie. Tous les motifs de bloc qui ne sont affectés qu’à la catégorie que vous supprimez seront déplacés dans une catégorie "Non catégorisé".

Voici un exemple de désenregistrement de la catégorie « boutons » de modèle de bloc principal :

add_action('init', function() {
    if (!function_exists('unregister_block_pattern_category')) {
        return;
    }
    unregister_block_pattern_category('buttons');
});

Conclusion

La nouvelle fonctionnalité de modèle de bloc dans WordPress Gutenberg est définitivement un pas de plus vers le fait que l’éditeur de blocs fonctionne davantage comme un constructeur de pages. À mon avis, l’inconvénient est que les utilisateurs finaux ne peuvent pas créer leurs propres modèles. Mais c’est une bonne fonction pour les développeurs de thèmes car elle permet aux utilisateurs finaux de configurer facilement des configurations de blocs et des mises en page qui fonctionnent bien dans le thème. Il s’agit d’une toute nouvelle fonctionnalité et elle évoluera et sera probablement améliorée dans un futur proche ! Pour ma part, j’ai hâte !