Si vous avez envie de développer un Block Theme, se lancer directement dans l’éditeur de site n’est pas forcément une bonne idée. Vous allez sûrement beaucoup cafouiller avant d’obtenir quelque chose de satisfaisant et même si l’interface de l’éditeur de site permet de modifier relativement facilement vos modèles et réglages, certaines manipulations restent très pénibles.
Les Block Themes et l’éditeur de site nécessitent une approche de conception assez différente des thèmes classiques, ils nous forcent à travailler d’une façon différente.
Les Block Themes sont plus abstraits que les thèmes classiques. Donc on doit abstraire notre façon de concevoir nos designs. Si vous êtes designer, vous êtes sûrement déjà habitués à travailler de cette façon. Sinon, voici quelques étapes préparatoires pour bien développer un Block Theme.
Définir votre cible
Avant de développer un Block theme, vous devez vous poser une question simple : quel est l’usage ou le public visé par ce thème ?
Selon votre réponse, les besoins du thème peuvent être très différents. Un thème pour les blogs de cuisine n’utilisera pas les mêmes mises en page qu’un site corporate, par exemple.
Si vous travaillez pour un client, alors vous avez déjà une piste. Identifiez son secteur et son audience et vous aurez une bonne idée du type de contenu et de design qui convient.
Si vous voulez développer un thème pour votre site personnel, vous pouvez potentiellement faire selon vos envies. Mais se concentrer sur les utilisateurs de votre site pour pouvoir leur présenter votre contenu de la façon la plus simple et attrayante possible devrait quand même être votre priorité.
Définir votre audience cible va vous permettre de faire les meilleurs choix possibles en termes de mise en page, de typographie, de couleurs, mais aussi de ton et d’approche stratégique. C’est donc une étape cruciale avant de développer votre thème.
Préparer des maquettes
Une fois votre cible définie, rassemblez vos idées. Créer des maquettes ou un prototype vous permettra de donner vie à vos idées et de les tester en contexte. Vous pouvez utiliser Figma, des maquettes HTML/CSS ou tout autre outil avec lequel vous êtes à l’aise.
Le but à ce stade est de sortir vos idées de votre tête et leur donner une forme visuelle, tout en gardant une grande latitude pour expérimenter. Se lancer directement dans du code complexe est une mauvaise idée ici, parce que si vous vous rendez compte à mi chemin que le type de navigation choisi ne convient pas par exemple, alors il vous faudra recoder la navigation entièrement.
L’éditeur de site étant un éditeur visuel, il est assez facile de faire les modifications drastiques et d’expérimenter directement sur votre environnement de développement. Toutefois, cloner un composant dans Figma ou copier-coller un document HTML pour tester une autre variation reste bien plus simple et rapide.
Vous n’avez pas forcément besoin de maquetter toutes les vues possibles. Une vue simple (comme une page simple ou article simple) et une vue liste (comme l’accueil du blog) suffisent pour avoir une idée claire de la mise en page par défaut. Les vues les plus spécifiques comme l’accueil ou certaines autres pages spéciale peuvent être utiles aussi car elles vont permettre de repérer les sections et les compositions à développer plus tard.
Extraire les réglages de typographie et de couleurs
La plupart des designers créent une bibliothèque de composants et un guide de styles en amont ou au fur et à mesure de leur avancée sur les maquettes. Cela leur permet de définir en amont les polices, tailles de textes et graisses, ainsi que les couleurs utilisées sur le site et de les employer facilement dans leurs designs.
Cela restreint les choix, accélère les progrès car cela réduit les décisions et permet de simplifier et d’uniformiser les styles du design. Choisir parmi une palette de quelques nuances de couleurs prédéfinies ou parmi quelques styles de texte prédéfinis simplifie grandement vos décisions.
Si vous ne travaillez pas ainsi, une fois vos maquettes terminées, il faudra extraire de vos maquettes la liste des polices utilisées, leurs tailles, leur graisse, ainsi que les couleurs et nuances utilisées sur le thème.
Dans votre Block Theme, ces éléments seront simplement représentés par des variables et toutes ces variables sont à paramétrer dans le fichier theme.json du thème.
Le fichier theme.json est le fichier de configuration global de votre thème. Il contient tous vos réglages de couleurs, de typographie, les styles de vos blocs, les éléments de modèles du thème et plus encore.
Puisque tout est à déclarer dans ce fichier pour pouvoir rendre vos réglages disponibles pour les blocs de l’éditeur, les Block Themes vous forcent à systématiser votre design et à penser en terme de variables.
Si vous souhaitez en savoir plus sur le fichier theme.json, je vous invite à consulter cet article : Comprendre le fichier theme.json.
C’est peut-être quelque chose qui peut vous sembler contraignant et changer vos habitudes peut être déroutant, mais les bénéfices à adopter cette approche sont réels : vous gagnerez énormément de temps et vous aurez beaucoup moins de décisions à prendre (puisque vous avez décidé et créé vos couleurs et options de typographie en amont). Vos designs seront plus cohérents pour vous et vos utilisateurs.
Faire la liste des modèles et compositions
Une fois vos réglages de base extraits, vous pouvez lister les modèles du site et isoler votre entête (ou les différentes entêtes) que vous souhaitez rendre disponible dans le thème, ainsi que votre (ou vos) pied(s) de page.
Aussi, vous allez pouvoir repérer les modèles spéciaux qu’il faudra créer et déterminer comment ils s’intègrent à la hiérarchie des modèles de WordPress.
Dans vos maquettes, vous allez aussi pouvoir extraire les compositions (groupe de blocs) à construire dans votre thème. Par exemple, si vous avez un pied de page avec un formulaire d’inscription à une newsletter sur plusieurs maquettes, alors vous savez que vous allez devoir créer une composition permettant d’insérer rapidement cette section dans vos modèles de page. De la même façon, si vous avez plusieurs section Hero dans vos maquettes, il vous faudra créer les compositions ou entêtes de site correspondantes.
Encore une fois, les Block Themes nous invitent à découper nos designs en sections et composants et à systématiser notre approche. Et c’est une bonne chose. L’intérêt des compositions est que ce sont des groupes de blocs réutilisables. Donc créer une bibliothèque de compositions vous permettra de gagner beaucoup de temps.
Faire la liste des blocs à développer
Si vos modèles contiennent des composants spéciaux non-standards qui ne sont pas disponibles nativement dans WordPress, il est peut-être possible de les recréer en utilisant les blocs natifs de WordPress. Parfois, un peu de créativité, de CSS et de JavaScript permettent de recréer des composants et fonctionnalités relativement simplement.
Dans le cas contraire, vous allez devoir trouver une extension fournissant un bloc adapté ou créer un bloc personnalisé. Créer un bloc est un développement à part entière qu’il faut prendre en considération lors de l’étude de votre projet, surtout si vous travaillez pour un client. Créer un bloc personnalisé peut être plus ou moins complexe et coûteux.
Mais dans tous les cas, votre prototype va vous permettre d’anticiper ces besoins spécifiques.
Développer votre Block Theme
Créer un Block Theme demande donc d’aborder le design et le développement de façon différente. Même si cette approche peut sembler déroutante et va vous demander de faire un effort d’adaptation conséquent, je vous assure que ça vaut le coup.
En systématisant votre design, vous allez grandement accélérer et simplifier le développement du thème. Idéalement, bien connaitre le fonctionnement des Block Themes va vous permettre d’adapter votre process de design pour cette destination. Autrement dit, quand on connait mieux l’environnement de destination (WordPress et le fonctionnement des Block Themes) on sait ce dont on va avoir besoin, et il est donc plus facile d’adapter notre process pour anticiper ce besoin.
Si vous êtes prêts à développer un Block Theme, je vous invite à jeter un œil à ma formation Développer un Block Theme qui vous aidera à comprendre ces thèmes et développer votre premier thème sereinement.
