Construire une bibliothèque de modèles de blocs Gutenberg

Gutenberg représente un énorme changement vers la conception Web basée sur des modèles. Dans cet article, je vais discuter des approches que nous avons adoptées lors de la création de notre propre bibliothèque flexible de blocs Gutenberg personnalisés.

Arrière-plan

La version de décembre 2018 de Gutenberg a représenté le plus grand changement dans WordPress depuis sa création. La nouvelle interface « glisser-déposer » basée sur des blocs change la façon dont les développeurs créent des thèmes, la façon dont les concepteurs envisagent de diviser les sites en composants et la façon dont les éditeurs de contenu gèrent et planifient la création de contenu.

Il s'agit d'un changement fondamental vers la conception de sites Web basée sur des modèles ; un système d'éléments réutilisables qui peuvent être appliqués de manière cohérente sur un site Web, pour créer la meilleure expérience utilisateur possible et rationaliser le flux de travail. Alors que beaucoup d'entre nous travaillaient déjà avec des modèles, Gutenberg fait avancer ce changement à un rythme accéléré. Étant donné que WordPress alimente un tiers des sites Web dans le monde, l'impact de ce changement ne peut être surestimé.

Cet article met en évidence certains des problèmes auxquels nous avons été confrontés en tant que développeurs lorsque nous avons commencé à planifier et à créer une bibliothèque de modèles, comment nous avons surmonté les limitations inhérentes à Gutenberg et l'approche que nous avons adoptée pour créer notre système flexible de blocs personnalisés.

Notre objectif

En tant que constructeurs spécialisés de sites Web WordPress sur mesure, Gutenberg nous a donné l'opportunité parfaite de créer une bibliothèque unifiée de modèles ; un ensemble de blocs personnalisables à utiliser avec bon nombre de nos créations de sites Web personnalisés.

Non seulement nous voulions adopter cette nouvelle expérience d'édition, mais nous voulions être en mesure d'offrir une solution utilisant notre propre système sans dépendre d'un ensemble limité de blocs Gutenberg de base, ou d'un patchwork de solutions tierces prêtes à l'emploi.

Un ensemble complet de blocs à portée de main signifie également que nous n'avons pas à créer chaque bloc à partir de zéro pour les nouvelles versions de sites Web Gutenberg. Cela nous permettrait de passer encore plus de temps à peaufiner l'esthétique d'un site et d'ajouter le type de finitions et d'optimisations qui aident à séparer un site Web de ses concurrents.

Défis

Flexibilité de conception

Nous avions besoin d'un système de conception polyvalent avec plusieurs modèles qui nous donneraient la possibilité de créer une variété de thèmes sur mesure.

Trouver un bon équilibre entre être capable de maintenir un nombre fini et réaliste de motifs, sans compromettre la conception du thème allait être un défi.

Un changement dans le développement du thème

Avant Gutenberg, nous avons adopté un certain nombre d'approches différentes pour le développement de thèmes. La plus courante consistait à créer des modèles de page individuels pour des parties distinctes d'un site. Les modèles seraient très normatifs et incluraient des champs personnalisés pour chaque section conçue. Un modèle « Etudes de cas », par exemple, peut inclure des champs pour un éditeur de texte, une galerie d'images, des témoignages, etc. Cependant, une fois inclus dans le modèle, ils ne peuvent pas être facilement modifiés.

Non seulement cette approche est restrictive en termes de mise en page, mais signifie généralement que des efforts répétés sont nécessaires pour chaque nouveau site basé sur des modèles ; des champs doivent être créés, des modèles configurés et des composants séparés codés pour l'affichage sur le front-end.

Afin de nous adapter à Gutenberg, nous devions changer notre approche de développement, comprendre comment nous pouvons créer des composants réutilisables et adopter la flexibilité que Gutenberg nous offre maintenant pour les nouvelles constructions de sites Web.

Gutenberg n'est pas si flexible

Prêt à l'emploi, Gutenberg propose plus de 30 blocs de base. Tout, des composants de contenu de base tels que les éléments de paragraphe, d'en-tête et de liste aux widgets et intégrations plus complexes.

Pour bon nombre de nos constructions de sites Web, un bon nombre de ces blocs de base ne sont pas pertinents ou n'ont pas le niveau de fonctionnalité que nos thèmes exigeraient d'eux. Nous avions besoin d'un moyen de créer notre propre ensemble de modèles qui remplissent des fonctions très spécifiques appropriées à la conception du thème.

Un autre problème que nous avons rapidement trouvé avec Gutenberg est qu'il n'est ni facile ni intuitif de créer des mises en page plus complexes à l'aide de blocs de base.

Un modèle pour un bloc « contenu et image » par exemple peut nécessiter qu'un titre, un paragraphe, une liste et un bouton apparaissent à côté d'une image et avec la possibilité d'afficher l'image à gauche ou à droite de ce contenu, et pour que ces éléments soient affiché dans une mise en page cohérente.

Ce niveau de liberté ne vient pas facilement avec Gutenberg. Bien qu'il existe plusieurs blocs pouvant ajouter du texte, des images et des boutons, ceux-ci sont de nature assez atomique et lorsqu'ils sont ajoutés individuellement, ils apparaissent sous forme de blocs empilés séparés. Il est devenu clair très tôt que Gutenberg n'était pas assez flexible et que nous devions être en mesure de créer nos propres blocs personnalisés.

Notre solution

Un système de conception polyvalent

Avant la sortie de Gutenberg, nous avions déjà investi beaucoup de temps dans la recherche et la visualisation de motifs pour notre bibliothèque de motifs.

Cela impliquait d'auditer plusieurs de nos sites Web et prototypes existants pour compiler une bibliothèque filaire d'éléments couramment utilisés.

Nos concepteurs et développeurs ont continué à travailler ensemble pour comprendre comment ces éléments pouvaient être combinés dans des blocs Gutenberg et comment un type de bloc spécifique pouvait être créé afin qu'avec des options de personnalisation limitées, un seul bloc puisse être considérablement différent d'un thème à l'autre.

Une fois que nous avions classé nos modèles en blocs, nous étions prêts à commencer à construire.

Blocs de construction avec des champs personnalisés avancés

Chaque développeur de thème a presque certainement rencontré des champs personnalisés avancés (ACF) à un moment donné. Grâce à une interface intuitive, une multitude de types de champs différents peuvent être créés ; tout, des champs de texte de base et des éditeurs de contenu aux sélecteurs de dates, aux intégrations de cartes et aux champs de galerie. Ceux-ci peuvent facilement être affectés à différentes zones d'un site, telles que les types de publication, les modèles de page, les catégories et les pages utilisateur.

La dernière version d'ACF, les blocs ACF, étend toutes ces fonctionnalités familières à Gutenberg. Des groupes de champs peuvent être créés et affectés à différents blocs basés sur ACF de la même manière qu'avec d'autres zones du site.

Avec quelques lignes de code nécessaires pour enregistrer un bloc et des champs de sortie, il est possible de créer un bloc personnalisé de base en quelques minutes. La facilité avec laquelle les blocs peuvent être créés avec cette approche nous a permis de nous concentrer sur la configuration, la sortie et le style des blocs.

Nous étions maintenant en mesure de créer une suite de blocs personnalisés qui offraient toute la flexibilité de Gutenberg, mais limités à la conception du thème, ce qui aiderait à des mises en page cohérentes.

Plugin de bibliothèque de modèles

Après avoir créé quelques exemples de blocs, nous avons décidé de regrouper nos blocs dans un plugin personnalisé avec l'aide de l'équipe d'ingénierie.

Ce plugin basé sur des blocs permet un déploiement rapide de modèles personnalisés pour les nouvelles versions de sites Web. Ceux-ci sont ensuite personnalisés au niveau du thème.

Notre plugin Pattern Library inclut quelques fonctionnalités utiles :

1. Fichiers de modèle de bloc de base pour nous permettre d'ajouter rapidement de nouveaux blocs ;
2. Fonctions permettant d'initialiser les blocs principaux et les blocs personnalisés et d'être inclus dans des catégories personnalisées ;
3. Un écran de paramètres d'administration où chaque bloc peut être activé ou désactivé ;
4. Possibilité de remplacer la disposition et la structure d'un bloc dans le thème ;
5. La possibilité de remplacer le style de bloc au niveau du thème ;
6. Chargement des feuilles de style au niveau du thème dans Gutenberg afin que la prévisualisation de l'administrateur des blocs ait la même apparence que les blocs frontaux. L'utilisation de la grille CSS nous a aidés à maximiser la flexibilité de l'esthétique et de la mise en page, tout en minimisant les changements structurels ;
7. Des blocs spécifiques peuvent être limités à certains types de publication pour maintenir la cohérence.

Le développement du plugin Pattern Library sera une évolution continue, mais nous avons maintenant plus de 15 blocs qui peuvent être utilisés pour créer une proportion importante de nos conceptions de thèmes flexibles.

Notre suite de blocs comprend des modèles de contenu et d'image, des témoignages, des articles connexes et des blocs d'équipe, ainsi que des modèles de style « présentation », y compris des galeries, des statistiques et des curseurs.

Résumé

Nous sommes vraiment enthousiasmés par les opportunités que Gutenberg et notre bibliothèque de modèles personnalisées ont ouvertes.

Non seulement nous pouvons continuer à développer notre offre de sites Web sur mesure en utilisant la dernière expérience d'édition, mais nous sommes également en mesure de produire des sites Web très flexibles avec une approche de développement unifiée nous aidant à créer des expériences riches pour les utilisateurs finaux.

Cela fait près de 2 mois que nous avons commencé à utiliser notre bibliothèque de modèles de blocs Gutenberg que nous utilisons maintenant sur de nombreuses nouvelles versions de sites. Les clients ont été impatients d'utiliser Gutenberg et les commentaires des clients ont été très positifs jusqu'à présent.

« Matt et Pammy ont livré un tutoriel sur les éléments du site que vous avez créés et ils sont incroyables !! La flexibilité et le professionnalisme sont fantastiques et je suis très reconnaissant pour tout votre travail incroyable jusqu'à présent. Vraiment enthousiasmé par le site Web maintenant. Merci"

– Rachel Smith, YMCA Nottingham

Nous continuerons à étendre notre bibliothèque de modèles de blocs personnalisés et à affiner avec d'autres améliorations au fur et à mesure que nous passerons plus de temps avec Gutenberg. Nous travaillons actuellement sur notre 5ème site basé à Gutenberg, alors ne tardez pas à découvrir une étude de cas !

Si vous avez besoin d'aide pour votre développement WordPress, n'hésitez pas à nous contacter.