Cette nouveauté vous aura peut-être échappée, mais juste avant de partir à notre premier WordCamp Europe à Porto en juin dernier, nous avons sorti la toute dernière version du site de l’agence !
Si on en est aussi fier aujourd’hui, c’est parce qu’il s’agit d’un thème WordPress entièrement construit avec des blocs Gutenberg et l’éditeur de site, aussi connu sous le nom “Full Site Editing” ou FSE pour les intimes.
Si vous n’en avez jamais entendu parler ou si vous doutez encore des capacités de cette nouvelle façon de concevoir les sites, voilà comment on a relevé le défi de l’utiliser pour créer le nouveau site de l’agence.
Dites bonjour à Infini, le nouveau thème BSA Web !
Dites bonjour à Infini. Son style est dans l’air du temps, aux bords arrondis, modernes et rassurants. Sa palette se décline en plusieurs nuances… le bleu primaire du logo, auquel on a ajouté un orange complémentaire pour accentuer certains éléments. Sa mise en page se veut épurée, concise pour laisser place aux contenus.
L’objectif avec ce projet et ce thème était à la fois de concevoir et de présenter une nouvelle identité à l’agence, mais aussi et surtout de faire la démonstration des possibilités qu’offre aujourd’hui WordPress avec Gutenberg et l’éditeur de site FSE.
Dans Infini, tous les modèles (archive, page…) et parties de modèles (en-tête, pied de page…) sont basés sur des blocs Gutenberg et la grande majorité du style est uniquement généré par le nouveau framework CSS intégré à WordPress. Toute la variété de composants (bannière, grilles…) est couverte grâce aux compositions et aux styles de blocs. La palette de couleur, les échelles de typographie et d’espacements, le style global et celui des blocs est géré le plus possible à l’aide des réglages de l’éditeur.
Vous l’aurez compris, tout a été pensé pour et avec Gutenberg, du design au développement. Cette philosophie de conception est un pré-requis à l’utilisation de l’éditeur de site et elle est indispensable à tous les niveaux de production. Rapidement, on s’aperçoit qu’une bonne compréhension et utilisation des fonctionnalités natives permet d’obtenir un thème qui répond aux objectifs. Ensuite, si on veut aller plus loin, vient le temps des développements personnalisés.
Gutenberg, vers l’infini et au-delà…
Éditer entièrement son site avec Gutenberg ce n’est pas vraiment faire du… no-code ? Et oui même si Gutenberg et l’éditeur sont des outils vraiment flexibles il reste des tâches de personnalisation à effectuer.
Par exemple, contrairement aux constructeurs de page et de site comme Elementor, il ne propose pas nativement de bloc de “frise chronologique” et encore moins de réglages pour ajouter des effets ou des animations sur les blocs. Sur ce dernier point, nous ne sommes pourtant pas de grands défenseurs des animations sur le web — question de performance, d’accessibilité et de sobriété — mais il y avait un petit besoin et un défi technique à relever.
Gutenberg s’inscrit dans ce qui a fait la force de WordPress et dispose de nombreux crochets qui permettent d’étendre facilement ses fonctionnalités. De cette idée, est alors née une extension qui ajoute la possibilité, sur tous les blocs, de choisir un effet d’apparition dans la page. Bien sûr, on prend soin de respecter le choix des utilisateurs de ne pas jouer les animations sur leurs navigateurs. Et finalement, si l’option est activée sur un bloc, un petit script JS basé sur l’API Intersection Observer vient lui ajouter une classe lorsqu’il devient visible dans le viewport et le CSS se charge de jouer l’animation.
Le site supporte aussi un bloc personnalisé “frise chronologique” et un type de contenu personnalisé pour les offres d’emplois, avec un modèle d’archive et de page entièrement construits avec Gutenberg eux aussi.
Pourquoi choisir l’éditeur de site ?
Utiliser l’éditeur de site a été l’occasion de repenser notre façon de travailler avec WordPress. Gutenberg a apporté en 2018 la conception construction éditoriale avec les blocs. L’éditeur de site, introduit officiellement dans le cœur en 2022, c’est la suite logique de cette révolution.
Il existe tout de même une certaine courbe d’apprentissage, mais les avantages en valent la peine (cohérence d’édition, performance natives, écosystème WP riche pour aller au-delà des limites actuelles, occasion d’apprendre des nouveaux langages…).
Cela ne nous empêche pas (nous développeurs de thèmes) d’écrire du code (blocs/modèles sauvegardés en HTML, en blocs React, et toujours un peu de PHP, de JS et de CSS).
Finalement, en respectant WordPress, son éditeur, les bonnes pratiques Web en général, on a un thème qui déchire et un site avec les confettis Google Lighthouse et ça c’est classe quand même !