Utilisation d'un système de conception avec l'éditeur de blocs WordPress Pt. 1 : thème.json

Publié: 2022-12-15

Dans notre précédent article de blog, nous avons montré comment vous pouvez importer votre système de conception de Figma dans le theme.json d'un thème WordPress. Ce faisant, vous pouvez assurer une cohérence continue entre vos propriétés numériques.

Notre nouvelle série en deux parties s'appuie sur cette base en vous montrant comment vous pouvez utiliser des jetons de conception importés de theme.json dans l'éditeur de blocs. Cela vous permettra de mieux organiser votre site WordPress pour refléter votre système de conception. Il y a deux objectifs principaux :

  • Comprendre les parties de theme.json pertinentes pour les systèmes de conception
  • Modifier et étendre theme.json afin d'utiliser le système de conception importé

Comprendre theme.json

theme.json est un fichier de configuration qui vous permet de configurer et de thématiser l'éditeur de blocs, de modifier les paramètres de bloc et de jeter les bases pour développer un thème de bloc complet.

Il est destiné à vous permettre de contrôler les paramètres et les styles globaux de votre site WordPress. Chaque nouveau site WordPress VIP est livré par défaut avec le thème Twenty Twenty-Three, un thème de bloc. Ce thème est un excellent point de départ pour expérimenter un thème de bloc léger et comprendre certains des puissants contrôles disponibles dans theme.json.

Modification de theme.json

Commençons par le theme.json utilisé dans notre article de blog précédent. Remarquez la section personnalisée, où notre outil de pont peut insérer et mettre à jour un système de conception de Figma. Il s'agit de la section clé où vous référencez les différents composants de votre système de conception (jetons de conception) pour utiliser efficacement le theme.json.

Ci-dessous, nous passons en revue des conseils et des stratégies afin que vous puissiez profiter de tout ce que theme.json a à offrir.

Stockage des jetons de conception

Bien que l'emplacement de vos jetons de conception puisse être personnalisé à l'aide de l'outil de pont, ils doivent toujours être conservés dans la section personnalisée des paramètres. Il s'agit de l'emplacement par défaut de l'outil de pont et ne doit pas être modifié. Cela les maintient correctement organisés dans un seul emplacement et peut aider à éviter les conflits avec les sections de thème personnalisées existantes.

Utiliser des jetons de conception

Voyons un exemple d'utilisation de la section personnalisée de theme.json. Ici, nous avons un extrait dans lequel nous avons défini une couleur de texte primaire verte et un arrière-plan noir :

 "settings": { "custom": { "text": { "primary": "#00FF00", “background”: “000000” } } } }

Cela nous permet de référencer ces deux couleurs n'importe où dans le theme.json en utilisant :

 var(--wp--custom--text--primary) and var(--wp--custom--text--background)

L'extrait de code suivant garantit que, par défaut, sauf indication contraire, chaque bloc aura un arrière-plan noir avec du texte vert dessus :

 "styles": { "color": { "text": "var(--wp--custom--text--primary)", “background”: “var(--wp--custom--text--background)” } }

Le schéma de toute clé que vous souhaitez référencer à partir de vos paramètres personnalisés est :

 var(--wp--custom–<location to the value with -- as a separator between each key>)

L'avantage est que vous pouvez référencer tous vos jetons de conception à l'aide de ces clés tout en ayant un emplacement central où la valeur réelle est gérée.

Les meilleures pratiques

  • Utilisez les variables de jeton de conception générées par WordPress (par exemple, var(--wp--custom--text--primary) ) pour référencer les jetons partout. Notez l'extrait fourni ci-dessus, où nous faisons référence à la couleur personnalisée principale et d'arrière-plan, plutôt que d'utiliser la valeur réelle elle-même. Cela garantit que lorsque vous souhaitez mettre à jour des propriétés telles que la couleur du texte, vous ne devez modifier qu'un seul emplacement, car les autres emplacements sont simplement des références.
  • Les jetons de conception insérés dans le theme.json sont également accessibles avec CSS en dehors du theme.json, en utilisant le même référencement de clé indiqué ci-dessus. Cela s'applique au développement de blocs et aux autres composants utilisés dans un thème. Ils ne sont pas destinés à être utilisés uniquement dans le theme.json et doivent être réutilisés dans n'importe quel CSS personnalisé.

Nous vous recommandons de suivre ces deux bonnes pratiques pour conserver theme.json comme source unique de vérité. Cela vous permettra de mettre à jour facilement les jetons de conception, en particulier lorsque vous utilisez des outils automatisés comme l'outil de pont de WordPress VIP qui se connecte à Figma.

Modifier les styles d'éditeur et de bloc

Les extraits ci-dessus sont un excellent moyen de se plonger dans la personnalisation du style des blocs. Par exemple, vous pouvez modifier le style par défaut d'un bloc ainsi que les préréglages disponibles dans l'éditeur de blocs. Ceci est utile lorsque vous souhaitez être plus précis et dicter exactement à quoi ressembleront les blocs intégrés utilisés dans votre site.

Il existe deux emplacements clés dans le theme.json :

  • Paramètres et settings.blocks—permet la personnalisation des paramètres généralement disponibles dans l'éditeur de blocs et des paramètres personnalisés pour les types de blocs individuels.
  • Styles et styles.blocks—permet de définir un style prédéfini pour l'ensemble de l'éditeur de blocs et des personnalisations par bloc.

Par exemple, voici comment vous assurer que tous les titres ont une couleur verte (principale) par défaut et une option de couleur secondaire :

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }, "styles": { "blocks": { “core/heading”: { “color”: { "text": "var(--wp--custom--text--primary)" } } } }

Cela configure chaque bloc d'en-tête pour avoir une couleur de texte verte primaire et ajoute une deuxième option d'éditeur de bloc pour changer la couleur en couleur secondaire rouge. Remarque : Cela nécessite quelques répétitions. Le style spécifie la couleur primaire par défaut et la palette combine la même couleur avec une couleur secondaire pour fournir les deux options dans l'éditeur de blocs.

Avertissement de style

Utilisez uniquement les sections styles et styles.blocks de theme.json pour styliser vos blocs dans la mesure du possible. N'utilisez pas le style CSS pour remplacer les styles de bloc de base, sauf si cela est absolument nécessaire. Les remplacements CSS pour les styles de bloc ne sont généralement pas stables - les mises à jour de l'éditeur de bloc peuvent modifier le style et la structure, provoquant la rupture de ces styles.

Personnalisation par bloc

Bien que l'exemple ci-dessus montre comment personnaliser les paramètres et le style d'un bloc, il est également possible de désactiver entièrement la personnalisation et de limiter les options de l'éditeur de blocs à des blocs spécifiques. Ceci est utile pour contrôler strictement les options disponibles pour créer du contenu, en conservant l'aspect et la convivialité du système de conception.

Continuons avec un autre exemple de paramètres de couleur où les mêmes principes s'appliquent à d'autres propriétés configurables comme la couleur, la typographie et l'espacement. Pour désactiver la possibilité de changer la couleur du texte par défaut partout sauf pour les blocs d'en-tête, voici comment theme.json peut être configuré :

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “color”: { “text”: false }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }

Cet exemple montre la configuration des paramètres globaux via les paramètres et des paramètres spécifiques aux blocs via la section des blocs sous les paramètres. Cela s'applique également au style global (disponible sous la propriété styles racine) et au style spécifique au bloc (sous styles.blocks).

Modèle prédéfini simple

Un bon moyen de commencer à créer le système de conception consiste à verrouiller globalement les paramètres de l'éditeur de blocs. Après cela, vous pouvez activer progressivement les paramètres pour des blocs individuels et contrôler l'apparence de votre système de conception sans être submergé par les options de personnalisation. Pour commencer, voici un ensemble simple de paramètres que le système de conception de WordPress VIP utilise pour désactiver globalement toutes les bordures, couleurs , la typographie et les contrôles d'espacement par défaut dans l'éditeur :

 { "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "settings": { "appearanceTools": true, "border": { "color": false, "radius": false, "style": false, "width": false }, "color": { "text": false, "background": false, "link": false, "custom": false, "defaultPalette": false, "defaultGradients": false, "defaultDuotone": false, "customGradient": false, "customDuotone": false, "palette": [ // Design system palette colors... ], "gradients": [ // Design system gradients... ] }, "spacing": { "margin": false, "padding": false, "units": ["rem", "%"] }, "typography": { "customFontSize": false, "fontStyle": false, "fontWeight": false, "letterSpacing": false, "lineHeight": false, "textDecoration": false, "textTransform": false, "dropCap": false, "fontFamilies": [], "fontSizes": [] } } }

Avec ces valeurs par défaut verrouillées, vous pouvez ensuite utiliser settings.blocks pour exposer des options pour des blocs spécifiques dans l'éditeur et limiter la personnalisation à des paramètres bien définis.

En conclusion

Theme.json est un outil puissant pour organiser les jetons de conception globaux, définir des styles de thème globaux et personnaliser des blocs individuels. En tirant parti de toutes les fonctionnalités que l'éditeur de blocs expose pour la personnalisation, la mise en œuvre du système de conception est centralisée et compatible avec l'éditeur de blocs intégré.

Dans la partie 2 de notre série, nous couvrirons des conseils plus avancés en dehors de theme.json pour gérer les types et styles de blocs intégrés dans un système de conception.

Liens utiles

  • Qu'est-ce que Theme.json ?
  • Paramètres et styles globaux (theme.json)

Auteurs

Alec Geatches, développeur logiciel senior chez Automattic

Développeur WordPress d'entreprise et passionné de systèmes de conception vivant à Taipei, Taiwan.

Gopal Krishnan, développeur logiciel senior chez Automattic

Gopal travaille sur l'offre WordPress découplée de WordPress VIP, avec un intérêt pour les systèmes de conception et Gutenberg. Il est basé à Sydney, en Australie et a récemment déménagé du Canada.