Gutenberg, à la recherche de l’utilisation optimale d’un bloc face aux exigences de vos métiers - Parlotte WordCamp Paris 2023
Slides de la parlotte donnée au WordCamp Paris 2023 en co-présentation avec Florian Truchot (@floriantruchot), dans laquelle on se questionne sur l'utilisation optimale d'un bloc Gutenberg dans le cadre de certains scenarios avancés.
Préambule * ✅ Ce dont on va parler — Quelle stratégie de bloc employer selon le contexte ? — Comment s’adapter aux besoins métiers — Comment établir un langage commun ? Nous exposons des réflexions issues de nos expériences respectives, il n’y a aucune vérité derrière nos propos. * ⛔ Ce dont on ne parlera pas — Quel est le meilleur page builder ? — Comment créer des blocs Gutenberg ?
Contraintes des différents métiers Commanditaire Avoir un site à l’image de son organisation qui reflète sa marque Design Comprendre et retranscrire visuellement un parcours métier Éditeur Avoir un contenu facile à éditer au plus proche du rendu (front) Technique Rationaliser les comportements et mettre en production des versions fonctionnelles stables (rapidement) Internaute Consommer l’information sur différents supports
Problématique Comment coordonner tout ça ? — Création / refonte d’un thème — Intégrer un Design System — Industrialiser la création de sites — WordPress en mode headless
Problématique — aux designers d’imaginer un rendu graphique — de respecter la charte du client pour que l’internaute s’identifie à la marque — aux développeurs de produire rapidement — aux éditeurs d’administrer facilement du contenu qui soit proche du rendu final Est-ce que Gutenberg permet :
Création / refonte d’un thème Problème — Pas de synchronisation des éléments statiques (natif, patterns, blocs statiques) — Nécessite de repasser sur son contenu pour resauvegarder — Nécessite de coder des variations de dépréciations Contraintes métiers ✅ Commanditaire ⚠ Design ⛔ Technique ⛔ Éditeur ✅ Internaute
Création / refonte d’un thème Conclusion Si vous identifiez des éléments sujets à évolution, attention aux contraintes de synchronisation des éléments statiques! La phase de conception est importante pour limiter les allers/retours, mettez-vous d’accord sur les attributs des blocs.
Intégrer un Design System Problème ServerSideRender may also be used when a legacy block is provided as a backward compatibility measure, rather than needing to re-write the deprecated code that the block may depend on. ServerSideRender should be regarded as a fallback or legacy mechanism, it is not appropriate for developing new features against. “ ” — Soit @wordpress/server-side-render — Soit double rendu avec import des assets Contraintes métiers ✅ Commanditaire ✅ Design ⛔ Technique ⛔ Éditeur ✅ Internaute
Intégrer un Design System Conclusion Si vous employez des blocs dynamiques, mais que vous souhaitez garder une belle expérience d’édition, un effort supplémentaire de double rendu sera demandé
Industrialiser la création de sites Contexte Je suis missionné sur un nouveau projet, je souhaite réutiliser les blocs déjà codés, pour faciliter la création de nouveaux thèmes.
Industrialiser la création de sites Problème Comment générer le rendu alors qu’on ne connaît pas le thème utilisé ? Contraintes métiers ✅ Commanditaire ⛔ Design ⛔ Technique ✅ Éditeur ✅ Internaute
Industrialiser la création de sites Conclusion Permettre aux devs du thème de surcharger le rendu grâce aux filtres, locate_template(), injection de dépendances ou autres… Scinder les blocs de “rendu” et ceux “fonctionnels”. Le plugin fournit l’aspect fonctionnel. (avec pourquoi pas un rendu par défaut)
WordPress en mode headless Contexte Mon commanditaire a développé une application mobile à côté de son site, mais souhaiterait mutualiser l’administration de ses contenus.
WordPress en mode headless Problème Ce n’est pas le rendu du bloc qui nous intéresse, mais sa définition, sa donnée, et l’API REST nous renvoie du rendu. Contraintes métiers ⛔ Commanditaire ✅ Design ⛔ Technique ⛔ Éditeur ✅ Internaute
WordPress en mode headless Conclusion Renvoyer de la data brute (attributs, valeurs) en lieu et place du markup. Chaque client interprète le rendu selon la technologie utilisée, seule la configuration du bloc fait foi. https://github.com/Automattic/vip-block-data-api
— Bien définir les attributs de chaque bloc. Attributs = ADN — Anticiper les évolutions éditoriales ou graphiques et choisir la typologie de bloc en conséquence — Choisir la responsabilité du plugin ou du thème pour gérer chacun des bloc — Découpler le rendu (l’aspect du bloc) et le fonctionnel (son expérience d’édition au sein de Gutenberg) L’utilisation optimale d’un bloc face aux enjeux métiers Memento
jdmweb
shioyama
beberlei
77web
manfredsteyer
dunglas
satoshi7190
totto2727
tomokusaba
umizaru
koba04
xblood
searls
tammielis
sachag
kneath
holman
tmm1
bryan
destraynor
paulrobertlloyd
jlugia