Notions de base du constructeur : explorer les modèles de blocs

La dernière version de WordPress arrivera à la fin du mois le 25 janvier. Peut-être qu'au moment où vous lisez ceci, la version 5.9 a déjà été publiée dans le monde. Je ne pourrais pas être plus excité. Il existe d'innombrables améliorations et nouvelles fonctionnalités, dont beaucoup seront couvertes dans de futurs articles, mais le sujet d'aujourd'hui est le bloc "modèles".

Bien qu'ils ne soient pas nouveaux sur WordPress, les modèles reçoivent beaucoup d'attention en raison des fonctionnalités activées par la version 5.9, notamment les thèmes basés sur des blocs. Les modèles deviennent rapidement un élément fondamental de WordPress lui-même et semblent sur le point de remodeler la façon dont nous concevons et construisons des sites Web. Alors quel meilleur moment pour explorer ce que sont vraiment les modèles de blocs et comment vous pouvez les utiliser ?

Les bases

Avant de plonger dans les modèles de blocs, commençons par les bases et établissons une terminologie. WordPress a beaucoup changé ces dernières années. C'est bien de s'assurer que nous sommes tous sur la même page.

Bloc

Un bloc est l'« unité » fondamentale de contenu dans WordPress. D'un paragraphe de texte à une galerie d'images, un bloc peut prendre presque n'importe quelle forme. J'aime imaginer un seul morceau de LEGO . Bien que chaque bloc puisse sembler différent ou remplir une fonction unique, ils s'intègrent tous parfaitement ensemble pour créer le contenu d'une page Web.

Modèle

Un modèle de bloc est simplement une collection prédéfinie de blocs qui forme une mise en page spécifique. Un modèle peut être un bloc unique ou composé de plusieurs. Comme nous le verrons plus tard, les modèles rendent la création de mises en page complexes facile et amusante.

Éditeur

L' éditeur est l'interface utilisateur que nous utilisons pour créer des pages et des publications à partir de blocs. Depuis son introduction dans WordPress 5.0 jusqu'en 2018, l'éditeur a été appelé par de nombreux noms. Ceux-ci incluent Gutenberg, Gutenberg Editor, Block Editor et autres. Pour les besoins de cet article, nous utiliserons simplement le terme « Éditeur ».

Inserteur

Dans l'Éditeur, l' Inserteur est utilisé pour ajouter des blocs et des motifs à la page. Vous pouvez accéder à l'Inserteur en cliquant sur le signe bleu (+) dans le coin supérieur gauche de l'Éditeur.

La capture d'écran ci-dessous illustre nos termes définis.

Pourquoi bloquer les modèles ?

L'éditeur nous permet de créer pratiquement n'importe quelle conception à partir de blocs, qu'il s'agisse d'un simple article de blog ou d'une page de destination élaborée. Prenons cet article même comme exemple. Ce que vous lisez en ce moment est un bloc Paragraphe. L'en-tête ci-dessus est un bloc d'en-tête et la capture d'écran est juste un bloc d'image. L'ajout de ces éléments de contenu à la page était facile. J'ai ouvert l'Inserteur, trouvé le bloc approprié et cliqué pour insérer.

Astuce : saviez-vous que les blocs peuvent également être insérés à l'aide de la commande barre oblique ? Commencez un nouveau paragraphe avec la touche "/" et une liste des blocs disponibles apparaîtra. La saisie de lettres supplémentaires affinera les résultats de la recherche. Essaie!

Qu'en est-il de quelque chose d'un peu plus compliqué ? Considérez le tableau de prix suivant, une conception couramment utilisée pour présenter des produits ou des services sur un site Web.

Regardez attentivement et vous pourrez peut-être reconnaître les blocs individuels qui ont été utilisés pour créer cette mise en page. La base est un bloc Colonnes avec trois colonnes équidistantes. À l'intérieur de chaque bloc de colonne se trouve un bloc de séparateur, d'en-tête, de paragraphe, de boutons et d'espacement. Combien avez-vous pu en repérer ?

En fait, ce tableau de prix est composé de 25 blocs individuels. Quel que soit votre niveau de compétence avec WordPress, reproduire cette mise en page à partir de zéro serait à la fois fastidieux et un peu difficile.

Imaginez maintenant si ce groupe de 25 blocs était déjà configuré pour vous. En un seul clic, vous pouvez insérer le tableau complet des prix et le modifier en fonction de vos besoins individuels. Encore mieux, et s'il y avait une vaste collection de designs à portée de main, chacun correspondant à l'esthétique de votre thème ? Pensez à des mises en page créatives d'images et de texte, des incitations à l'action, des en-têtes, des pieds de page et même des mises en page complètes. Avoir ce type de "contenu de démarrage" permettrait de gagner beaucoup de temps et même de rendre l'éditeur plus accessible aux nouveaux utilisateurs de WordPress.

C'est là qu'interviennent les modèles de blocs. Le tableau des prix ci-dessus est en fait un modèle inclus dans le prochain thème Twenty Twenty-Two, qui sera publié avec WordPress 5.9 !

J'espère que ce petit exercice a illustré pourquoi je suis si enthousiasmé par le potentiel des modèles de blocs, mais comment les utilisons-nous réellement ?

Comment utiliser les motifs

Tout comme les blocs, les motifs peuvent être ajoutés à une page à l'aide de l'Inserteur. Avec l'inséreuse ouverte, accédez à l'onglet "Modèles" qui révèle tous les modèles disponibles segmentés par catégories. Sélectionnez la mise en page qui vous convient et cliquez pour l'insérer. Vous pouvez ensuite modifier les blocs individuels qui composent le motif, comme vous le feriez pour n'importe quel autre bloc. Il n'y a pas de limite au nombre de motifs que vous pouvez insérer. Mélangez et assortissez pour créer des conceptions de page uniques.

Bien que l'Inserteur offre un accès facile aux motifs de bloc, vous remarquerez que l'aperçu de chaque motif est assez petit et qu'ils sont tous empilés dans une seule colonne. Il peut être difficile de visualiser et de comparer les mises en page, ce qui rend difficile le choix de la bonne.

Pour résoudre ce problème, WordPress 5.9 inclut le Pattern Explorer. Cette nouvelle fonctionnalité passionnante est accessible en cliquant sur le bouton "Explorer" à côté du menu déroulant des catégories dans l'onglet "Modèles".

L'explorateur ouvre une fenêtre modale qui offre une expérience de navigation améliorée avec les modèles affichés dans une grille. Ils peuvent également être facilement recherchés ou filtrés par catégorie.

La capture d'écran ci-dessus est la première itération de l'explorateur de modèles. Les futures versions de WordPress devraient étendre les fonctionnalités de l'explorateur. Les expériences actuelles ajoutent des aperçus mobiles/tablettes et la possibilité de faire des démonstrations de modèles individuellement par opposition à la disposition en grille. Bien que rien ne soit confirmé, gardez un œil sur les améliorations supplémentaires de WordPress 6.0 vers le milieu de 2022.

Avec toute cette discussion sur les modèles, vous vous demandez peut-être d'où viennent-ils réellement ?

Où les trouver

Les modèles doivent être enregistrés de l'une des trois manières suivantes, soit via votre thème actuel, un plugin tiers ou WordPress lui-même via le répertoire de modèles. Explorons chaque méthode.

Thème

Votre thème sera probablement le moyen le plus direct de rendre les modèles disponibles sur votre site Web. Comme nous l'avons vu avec le tableau des prix ci-dessus, de nombreux thèmes basés sur des blocs incluent leurs propres collections de modèles sur mesure. C'est juste une autre façon pour les thèmes de se différencier et un ensemble robuste d'options de mise en page sera un énorme avantage pour les utilisateurs. Au moment d'écrire ces lignes, le thème Twenty Twenty-Two sera livré avec plus de 60 !

Répertoire de modèles (WordPress)

À partir de la sortie de WordPress 5.9, WordPress fournira ses propres modèles via le répertoire de modèles.

Le répertoire de modèles est un référentiel de modèles piloté par la communauté, un peu comme les référentiels de plugins et de thèmes WordPress, et sera ouvert aux soumissions publiques d'ici la version 5.9. Tous les modèles soumis et approuvés seront facilement disponibles pour que vous puissiez les parcourir et les insérer directement à partir de l'explorateur de modèles. Cela signifie que les utilisateurs de WordPress auront accès à des centaines, voire des milliers, de modèles de blocs.

Astuce rapide : Certains thèmes peuvent désactiver les modèles inclus par WordPress à partir du répertoire de modèles. Cela se fait souvent lorsque les développeurs de thèmes incluent leurs propres collections de modèles et souhaitent offrir une expérience utilisateur plus organisée.

Plugins tiers

Enfin, nous avons des plugins. Étant donné que les modèles existent depuis un certain nombre d'années, de nombreux plugins tiers, tels que Genesis Blocks et Redux, ont créé de vastes bibliothèques de modèles. Souvent, ces bibliothèques ne sont pas directement intégrées à des fonctionnalités telles que l'explorateur de modèles et comportent des blocs personnalisés introuvables dans le noyau de WordPress. Ils ont également tendance à utiliser leurs propres méthodes d'insertion de modèles, mais avec le temps, je m'attends à ce que beaucoup commencent à se conformer à la nouvelle approche standardisée de WordPress.

Si vous recherchez des blocs de niche et des mises en page pendant que le répertoire de modèles continue de mûrir, ou si vous n'utilisez pas un thème avec ses propres modèles, je vous recommande vivement d'explorer ce que les plugins tiers ont à offrir.

L'avenir des motifs

WordPress 5.9 apportera de nombreuses améliorations aux modèles de blocs. Comme nous en avons discuté, l'explorateur de modèles facilitera le choix du bon design pour votre site Web. Le répertoire de modèles vous donnera accès à une vaste collection de modèles créés par la communauté qui s'intégreront parfaitement à votre thème.

Bien que vous puissiez toujours créer des designs uniques à partir de blocs individuels, je pense que la plupart d'entre nous se dirigeront directement vers l'explorateur de modèles. Nous choisirons une mise en page, soit celle fournie par notre thème, soit celle de l'annuaire, puis nous la modifierons au besoin. Je sais je vais.

De plus, nous pouvons nous attendre à ce que les nouveaux thèmes basés sur des blocs soient jugés en fonction de l'étendue de leur collection de modèles de blocs intégrés. Les thèmes avec plus d'une centaine de modèles, tous soigneusement classés et couvrant un large éventail de cas d'utilisation, deviendront probablement la norme. Bien que l'esthétique d'un thème soit importante, il est primordial de fournir aux utilisateurs les outils dont ils ont besoin pour créer sans effort de belles pages Web.

Les modèles sont l'avenir de WordPress, et l'avenir est prometteur.

Emballer

Dans cet article, nous avons examiné ce que sont les modèles de blocs, comment vous pouvez les utiliser et pourquoi ils changeront fondamentalement la façon dont nous construisons des sites Web WordPress. Dans le prochain article Builder Basics, nous allons plonger un peu plus en profondeur et vous apprendre à créer vos propres modèles !

Alors que pensez-vous des motifs ? Les utilisez-vous sur votre site Web ? Vous avez des questions qui n'ont pas été abordées dans cet article ? Faites le nous savoir dans les commentaires.