Le guide complet des modèles de blocs de Gutenberg (III)

Il s'agit de la troisième et dernière partie du guide complet sur les modèles de blocs qui comprend les rubriques suivantes :

1. Introduction aux modèles de blocs
2. Insérer un motif sur une page
3. Modèles prédéfinis et autres disponibles dans les répertoires
4. Ajouter des modèles disponibles dans les répertoires à votre site
5. Comment créer un motif à partir de zéro
6. Comment créer un modèle si vous n'êtes pas développeur
7. Comment transformer des blocs réutilisables en motifs de blocs
8. Thèmes utilisant des modèles de blocs
9. Documents officiels.

Dans la première partie, nous avons vu les 4 premiers points de tous les sujets abordés dans le guide : qu'est-ce qu'un modèle de bloc, comment insérer des modèles prédéfinis dans vos pages et où trouver et comment copier des modèles qui sont disponibles dans certains répertoires . Dans la deuxième partie, nous avons vu le point 5 en détail : comment créer un modèle à partir de zéro en utilisant du code. Et dans ce dernier post, on va voir les 4 derniers points : comment on peut créer un pattern sans être développeur, comment on peut convertir des blocs réutilisables en block patterns, quels thèmes utilisent des block patterns et, enfin, où trouver documentation officielle sur les modèles.

6. Comment créer un modèle si vous n'êtes pas développeur

Bien que nous ayons déjà vu dans le post précédent les étapes que vous deviez suivre pour créer un pattern avec du code, nous verrons à ce stade que vous pouvez créer des patterns sans être développeur. Et oui, nous le ferons avec un plugin. En fait, il existe plus d'un plugin pour créer des motifs :

• Block Patter Builder par Justin Tadlock,
• BlockMeister - Block Patter Builder par BlockMeister,
• Générateur de pages Blocs Gutenberg - CoBlocks par GoDaddy

Tous les trois fonctionnent de la même manière, avec quelques différences mineures. Après avoir installé l'un d'entre eux, de nouvelles options apparaissent dans le menu d'administration de WordPress afin que vous puissiez créer un nouveau motif et gérer la liste des motifs créés.

Dans le cas du plugin Block Patterns Builder (c'est-à-dire l'image de gauche), le menu Block Patterns apparaît avec deux options : une pour créer un nouveau modèle et une autre pour lister et modifier les modèles existants. Dans le cas du plugin BlockMeister (représenté dans l'image du milieu), il ajoute également une troisième option pour gérer les catégories des modèles. Et dans le cas de CoBlock (montré dans la dernière image), son menu apparaît sous Apparence .

Dans les trois plugins, la création d'un nouveau modèle ouvre le même éditeur que vous utilisez pour modifier n'importe quelle page ou publication. Donnez simplement un nom au motif et définissez les blocs que vous voulez qu'il ait. Lorsque votre modèle est prêt, enregistrez-le simplement.

La capture d'écran précédente montre l'éditeur de modèle de bloc tel que fourni par le plugin BlockMeister. Comme vous pouvez le voir, il propose un tas de propriétés supplémentaires dans la barre latérale droite : nom, slug, description, largeur du motif et catégories. Le plugin Justin Tadlock, en revanche, ne vous permet pas d'ajouter la catégorie. Et CoBlocks vous permet également d'ajouter les propriétés supplémentaires des modèles.

Avec l'un des trois plugins, après avoir enregistré votre modèle, il deviendra disponible en cliquant sur le bouton + dans l'éditeur de publication et de page afin que vous puissiez l'insérer lorsque vous en aurez besoin.

Comme vous pouvez le voir, il est très facile de créer les modèles que vous souhaitez avoir dans vos conceptions de page, à condition que vous utilisiez le bon plugin pour cela.

7. Comment transformer des blocs réutilisables en motifs de blocs

Si vous utilisez Gutenberg depuis un certain temps et que vous avez conçu des pages avec, je parie que vous avez également créé des blocs réutilisables pour reproduire un certain design sur plusieurs pages. Au moins je l'ai fait ! Je me souviens que la première fois que j'ai entendu parler de motifs, je pensais que c'était à peu près la même chose que des blocs réutilisables… mais ce n'est pas le cas : il existe des différences pertinentes entre les deux concepts.

Un bloc réutilisable est un bloc (ou groupe de blocs) qui peut être inséré sur différentes pages, son contenu étant le même sur toutes. Autrement dit, si vous le modifiez ultérieurement, toutes ses instances doivent être mises à jour. Par conséquent, si vous souhaitez qu'un bloc réutilisable soit différent des autres, vous devez d'abord le convertir en bloc normal.

Un motif de bloc, d'autre part, est conçu pour être personnalisé - il sert de conception de base que vous êtes censé modifier après l'avoir inséré. Les options sont illimitées, bien sûr. L'idée du motif est de fournir un point de départ sur la façon dont vous pouvez combiner des blocs pour les rendre attrayants.

Si vous aviez créé des blocs réutilisables avec l'idée de les convertir en blocs normaux, puis de les personnaliser de manière pratique, il est plus logique de convertir ces blocs en modèles de blocs. Comment peut-on le faire?

Le plugin Reusable Block Extended de JB Audras nous fournit cette fonctionnalité. Voyons comment nous le faisons.

Après avoir installé le plugin, une option de menu apparaîtra pour gérer les blocs réutilisables. Si vous cliquez sur Tous les blocs réutilisables , vous verrez la liste des blocs que vous avez définis.

Comme vous pouvez le voir dans l'image ci-dessus, la liste des blocs réutilisables montre deux blocs et, pour chacun d'eux, elle vous indique où ils sont utilisés, le shortcode et la fonction PHP pour que vous puissiez les utiliser, et un bouton pour vous pouvez le convertir en un motif de bloc.

Après avoir cliqué sur le bouton Convertir en modèle de bloc , le modèle aura été créé pour vous et sera disponible dans votre éditeur dans la catégorie Converti à partir de blocs réutilisables .

8. Thèmes utilisant des modèles de blocs

Au moment d'écrire ces lignes, il existe déjà 14 thèmes avec des modèles de blocs personnalisés dans le répertoire de thèmes WordPress.org, et la liste s'allonge rapidement.

• Twenty Twenty-One Version 1.0 par WordPress.org
• C9 Starter Version 2.4.4 par covertnine
• C9 Work Version 2.3.1 par covertnine
• Seedlet Version 1.1.2 par Automattic
• ExS Version 0.9.0 par exstheme
• Cordero Version 1.2.2 par uxl
• Bigwigs Version 0.7.1 par Dinev Dmitry
• émulsion Version 1.6.9 par nobita
• Twenty Twenty Version 1.6 par WordPress.org
• VW Health Coaching Version 0.6.5 par VW THEMES
• Twenty Nineteen Version 4.9.6 par WordPress.org
• Écrits Version 1.3.0 par Dinev Dmitry
• Twenty Seventeen Version 2.5 par WordPress.org
• Twenty Sixteen Version 2.3 par WordPress.org

J'en profite pour mentionner que si vous êtes un développeur de thèmes et que vous souhaitez éliminer les blocs prédéfinis (modèles de blocs de base) qui viennent dans WordPress 5.5, vous pouvez le faire avec le code suivant :

 remove_theme_support( 'core-block-patterns' );

9. Documents officiels

Enfin, voici quelques liens utiles sur les modèles de blocs :

• Pour l'utilisateur final - Vidéo d'introduction pour bloquer les modèles pour comprendre ce que sont les modèles, comment y accéder, comment les ajouter dans les publications et les pages et comprendre comment les personnaliser pour votre contenu. Cette vidéo est un atelier publié par la WordPress Training Team.
• Pour l'utilisateur final - Documentation sur les modèles de blocs créée par l'équipe de documentation.
• For Developers – Block Patterns page dans la documentation de l'API Block, publiée par la Gutenberg Team et dont je vous ai déjà parlé dans le post précédent.

Et c'est tout! J'espère que vous avez trouvé ce guide utile. Si vous pensez qu'il manque des informations, n'hésitez pas à me le dire dans la section commentaires ci-dessous.

Image sélectionnée par Patrick Hendry sur Unsplash .