Comment nous avons créé notre site Web à l'aide de l'éditeur de blocs

Au cas où vous ne l'auriez pas remarqué, l'apparence de notre site Web a légèrement changé . Nous avons relooké notre site Web, en mettant à jour les polices, les styles, la palette de couleurs… en partant de ceci :

pour ça:

Mais ce qui est le plus intéressant à propos de ces changements, ce n'est pas leur apparence : nous avons décidé de reconstruire notre site Web à partir de zéro afin qu'il puisse devenir un site entièrement basé sur des blocs. Aujourd'hui j'aimerais vous expliquer comment on passe d'un thème sur-mesure basé sur des modèles de page à un autre thème totalement personnalisé qui s'appuie sur des blocs WordPress pour tout .

D'où nous venons

Lorsque nous avons lancé Nelio Content il y a trois ans, nous avons décidé de réorganiser complètement tous nos sites Web et de centraliser notre présence en ligne sous un seul domaine et une seule marque : neliosoftware.com . Logiquement, l'une des tâches que nous avons effectuées a été de contacter Silo Creativo pour nous aider à concevoir l'image de notre nouveau site Web. Ici vous pouvez voir l'une des premières propositions qu'ils ont faites :

Lorsque nous avons donné l'approbation à cette conception initiale, et suite à nos demandes, Ricardo et Veronica se sont mis au travail et ont mis en place un thème sur mesure avec tous les modèles nécessaires pour les différentes parties de notre site Web : page principale, blog , articles, aide pages, … Ils ont tout conçu et chaque conception a été implémentée dans un modèle de page. Nous avions une page rapide et lourde à modifier.

Et puis Gutenberg est arrivé.

Comprendre le contenu de notre site Web

Le nouvel éditeur de blocs WordPress , Gutenberg , est un changement de paradigme pour la création de contenu dans un WordPress . Jusqu'à présent, la création de pages était un processus fastidieux et peu convivial pour les utilisateurs, à moins que vous n'utilisiez un constructeur de pages. Mais Gutenberg est venu avec une promesse sous le bras : créer du contenu visuellement attrayant dans WordPress devrait être à la portée de tous . Et nous voulions tester cette affirmation et voir si nous pouvions vraiment créer un beau site Web reposant uniquement sur Gutenberg.

Si vous aviez vu le site Web que nous avions précédemment, vous saurez qu'il avait un design simple et élégant , comprenant des éléments tels que :

• Pages avec une image sélectionnée qui a pris le premier pli
• Blocs avec texte descriptif et images et/ou vidéo
• Formulaires de contact
• Pages légales
• Tableaux des prix
• Témoignages de nos utilisateurs
• Listes de fonctionnalités

Rien d'extraordinaire, mais intéressant quand même. Pourrait-on créer tout cela à Gutenberg ? Nous l'avons pensé et nous avons essayé. C'est ce que nous avons fait et ce que nous avons trouvé.

Notre nouveau thème

La première chose que nous avons faite pour concevoir le nouveau site Web a été de créer un thème à partir de zéro. Pour cela, nous avons décidé de partir du thème de démarrage bien connu « underscores ». C'est un thème super basique qui vient avec les modèles minimaux et nécessaires pour avoir un thème WordPress opérationnel, et il est bien documenté et bien organisé.

Adapter les traits de soulignement

Chaque thème WordPress a un ensemble de pages qui sont communes à toutes les installations WordPress et indépendantes du contenu que vous finissez par générer sur votre site Web. Je parle par exemple de la page de blog où apparaissent les derniers articles, de la mise en page d'un seul article, de la page d'erreur 404, de la page de résultats de recherche, etc. Ainsi, la première étape pour créer notre thème à l'aide de blocs WordPress consiste à adapter les traits de soulignement à notre propre style afin que ces "génériques" aient l'aspect et la sensation que nous souhaitons. Et c'est ce que nous avons fait.

Si vous regardez la capture d'écran précédente, vous verrez que nous avons téléchargé le thème avec le _sassify ! option activée, de sorte que le thème est téléchargé avec des styles au format SASS, organisés en plusieurs fichiers et le rendant extrêmement facile à modifier. Cela nous a pris quelques heures d'écriture CSS et quelques personnalisations PHP dans functions.php , mais nous avons réussi à obtenir le thème parfait :

Blocs WordPress en tant que blocs de construction

Une fois que nous avons un thème initial avec lequel nous nous sentons à l'aise (dans notre cas, le thème que nous avons créé à partir des traits de soulignement, mais dans votre cas, il pourrait s'agir d'un thème que vous avez trouvé dans wordpress.org , un thème premium que vous avez acheté un certain temps il y a, ou même un thème sur mesure comme le nôtre), il est temps de mettre en page toutes nos pages en utilisant les blocs WordPress .

Alors, sans plus tarder, examinons tous les "défis" auxquels nous avons été confrontés au cours de cette étape et comment nous avons tout implémenté à l'aide de blocs WordPress.

Blocs par défaut

Les blocs que WordPress inclut par défaut sont un peu limités : paragraphes, images, galeries… Rien d'extraordinaire, ils semblent tous plus axés sur la création d'articles de blog que sur la mise en page.

Mais ça va.

Ce n'est pas grave car, pour commencer, il y a beaucoup de pages sur un site Web qui ressemblent à des articles de blog. Par exemple, les pages contenant des informations légales ou une politique de confidentialité et des cookies sont plus proches d'un article de blog que vous ne l'auriez pensé.

Mais c'est aussi OK parce qu'on peut construire de belles pages avec des composants extrêmement simples. Par exemple, nous pouvons combiner du texte et des vidéos. C'est quelque chose que nous pouvons facilement réaliser avec les blocs Media & Text :

Assez proche, hein ?

Combinaison de blocs par défaut

Des blocs simples peuvent être extrêmement puissants lorsqu'ils sont combinés. Par exemple, considérez la capture d'écran suivante, où nous avons une liste de fonctionnalités :

Comment s'y prendre ? Eh bien, si vous l'examinez attentivement et logiquement, vous verrez que chaque fonctionnalité est une combinaison d'une image et d'un texte (cela vous semble-t-il familier ?). Ensuite, vous verrez que nous avons clairement trois colonnes alors… et si nous combinions des blocs Média & Texte avec un bloc Colonnes ?

Pas mal, nous sommes assez proches ! Lorsque vous combinez des blocs, vous devez être intelligent. L'utilisation d'un seul bloc Colonnes signifie que les entités peuvent ne pas être correctement alignées horizontalement, car chaque colonne est organisée indépendamment de l'autre. Pour résoudre ce problème, vous devez être un peu rusé : au lieu d'ajouter un seul bloc Columns avec plusieurs fonctionnalités dans chaque colonne, créons plusieurs blocs Columns pour nous assurer qu'il n'y a qu'une seule fonctionnalité dans chaque colonne :

Et BOUM ! Nous avons maintenant trois colonnes d'entités avec des lignes correctement alignées.

Blocs par défaut avec des stéroïdes

Il y a des cas dans lesquels les blocs par défaut sont suffisamment proches de ce que nous voulons, mais ne semblent pas corrects. Si nous sommes confrontés à un problème visuel, il est très probable que nous puissions le résoudre en utilisant CSS, et la meilleure partie est que Gutenberg fonctionne extrêmement bien avec les classes CSS.

Par exemple, si nous voulons que nos blocs d'image aient une ombre (optionnelle), nous pouvons créer une classe CSS simple qui ajoute l'ombre à l'image, puis appliquer ladite classe à l'aide de la section Avancé du bloc d'image :

Le problème avec cette solution est que nous mélangeons l'interface utilisateur avec des détails d'implémentation (le nom d'une classe CSS). Pourquoi diable devrais-je savoir qu'il existe une classe appelée shadow qui ajoute une ombre à une image ? Eh bien, cela a aussi une solution simple.

L'interface de programmation de l'éditeur de blocs WordPress expose une fonction appelée registerBlockStyle pour, comme son nom l'indique, enregistrer les styles de blocs. Quelque chose d'aussi simple que :

 registerBlockStyle ( 'core/image', { name: 'image-with-shadow', label: __( 'Shadow', 'nelio' ), } );

nous permet d'enregistrer un nouveau style pour le bloc d'image ( core/image ) appelé Shadow qui, lorsqu'il est appliqué, donne au bloc d'image la classe has-style-image-with-shadow :

Blocs personnalisés

Enfin, pour les cas où aucun bloc par défaut ne le coupe, vous pouvez créer votre propre bloc (ou utiliser un bloc tiers déjà existant). Nous avons implémenté cette solution dans plusieurs cas : dans les grilles tarifaires Nelio Content et Nelio A/B Testing, la carte qui apparaît sur notre page de contact (qui, d'ailleurs, a été détaillée dans notre article sur la création d'un bloc), et les résultats en termes d'ergonomie sont impressionnants :

si vous ne savez pas ou ne voulez pas créer vos propres blocs, je vous laisse avec quelques plugins qui incluent des blocs supplémentaires pour beaucoup de choses :

• GhostKit
• Blocs atomiques
• CoBlocs
• Blocs Kadence

Notre expérience

Il y a quelques mois, nous avons décidé de rénover un peu notre site Web et de le mettre en œuvre à l'aide de Gutenberg. Notre objectif était double : d'une part, nous voulions mettre à jour un peu le site et lui donner un air plus frais. D'autre part, nous voulions en savoir plus sur Gutenberg, tant au niveau utilisateur qu'au niveau développeur. Au final, nous avons réussi à migrer tout le web vers Gutenberg et le résultat a été un succès absolu. Nous vous encourageons à le faire aussi et, si vous avez des questions, n'hésitez pas à les laisser dans les commentaires.

Au fait, le post d'aujourd'hui a été inspiré par la conférence que j'ai donnée au WordCamp Lisbon 2019. Voici mes diapositives :

Image sélectionnée par Samuel Zeller sur Unsplash .