Le fichier de styles theme.json permettent au développeur WordPress de configurer l’ensemble des paramètres typographiques des thèmes Full Site Editing, mais aussi de choisir finement les options d’interface disponibles pour l’utilisateur final. Cet article vous propose une revue des principales propriétés de configurations pour gérer la typographie de façon autonome sur un thème WordPress.
La configuration des règles CSS par défaut et des options typographiques disponibles sur l’interface Gutengberg est réalisée dans 3 sections distinctes du fichier :
La section « settings » permette de configurer les options disponibles et les règles par défaut qui exposeront les variables CSS WordPress à la racine « root » du fichier généré. L’activation des options CSS par défaut telles que la hauteur de ligne, la graisse, les styles, etc., est effectuée à la racine de ces réglages.
Nous y définirons aussi les tailles disponibles sur l’éditeur Gutenberg (notamment les tailles fluides), ainsi que les polices de caractères et les éventuels fonts importées.
La section « styles » permet d’utiliser les variables définies dans « settings » pour styliser le selecteur <body>, des blocs spécifiques ou des éléments tels que les titres par niveaux (h1, h2, h3, etc.)
Configuration et gestion des options typographiques de base : la propriété « settings »
Le fichier theme.json, comme son nom l’indique, est défini sur un format JSON pou Javascript Object Notation. Chaque section du fichier est donc une propriété de l’objet définit par le fichier. Sur ce principe c’est dans la section « typography », une sous-propriété de « settings », que nous allons paramétrer les réglages typographiques par défaut.
"settings" : {
"typography": {
"writingMode" : true,
"lineHeight": true,
"fontStyle": true,
"textTransform" : true,
"fontWeight": true,
"dropCap" : true,
"letterSpacing" : true,
"textDecoration" : true,
"fontFamilies" : [],
« fontSizes » : []
}
}Graisse des polices
« fontWeight » : true || falsePar défaut les graisses sont activées sur un thème FSE WordPress. Le réglage des graisses sur l’éditeur Gutenberg est disponible dans la sous-section de sélection « Apparence » du bloc typography.
Passer la propriété « fontWeight » à false supprimera la possibilité d’afficher le menu « Apparence » permettant de présenter une liste des fonts pour la police (fin, léger, gras, normal, etc.).
Styles de police
« fontStyle » : true || falseLa propriété « fontStyle » permet quant à elle de présenter les styles groupés pour les graisses et les styles de caractères.
Passer « fontStyle » à false revient à supprimer les options des italiques du groupe « Apparence » et de le renommer « Graisse » dans l’inspecteur de propriétés.
Hauteur de ligne
Passer « lineHeight » à false permet logiquement de supprimer cette option de réglage dans l’inspecteur de Gutenberg.
Mais cela ne revient pas forcément à réinitialiser la valeur de line-height à 1 sur le sélecteur <body> puisque la propriété reste utilisable dans la section « styles » : { « typography » } du fichier theme.json :
« settings » : {
« typography » : {
« lineHeight » : false
}
},
« styles » : {
« typography” : {
“lineHeight” : 1.6
}
}
N.B. Ici une hauteur de ligne à 1.6em sera paramétrée sur le sélecteur <body>.
Transformation, Espacement et décoration
« textTransform » : true || falseLa règle CSS text-transform permet généralement de passer le texte d’un sélecteur en minuscule, majuscule, de le « capitaliser » ou de lui assigner une « super justification » en le faisant remplir la totalité de la largeur du sélecteur.
La propriété « textTransform » : true permet d’afficher un groupe d’option libellée « Casse » permettant de passer le texte en minuscule, majuscule, de capitaliser ou de le faire repasser à la normale.
« lineHeight » : true || falseDe la même manière que pour la hauteur de ligne, il reste possible d’assigner une casse à un bloc donné tout en supprimant la possibilité donnée à l’utilisateur de la modifier.
« letterSpacing » : true || falseL’espacement des lettres est géré de façon totalement identique grâce à la propriété « letterSpacing ».
« textDecoration » : true || falseLes options de décoration sont activées en passant la propriété « textDecoration » à true.
Les options de décoration proposées par l’éditeur Gutenberg sur une portion de texte sont plus limitées que la spécification CSS.
Là où il est normalement possible d’assigner des soulignements en pointillés ou en « vague », (dotted ou wavy), les options proposées par Gutenberg se limiteront à underline, overline (barré) ou normal.
Là-encore il sera possible de de supprimer la possibilité de gestion via l’interface tout en stylisant des blocs ou éléments donnés dans la section « styles » du fichier.
Des lettrines avec dropCap
« dropCap » : true || false
L’option de lettrine n’est accessible que pour les paraphes et via l’éditeur de texte (vs éditeur de thème).
« dropCap » : true, permettra ainsi d’afficher un bouton toggle dans l’inspecteur de paragraphe pour activer cette option CSS sur le pseudo-sélecteur p:first-letter du paragraphe courant.
Orientation du texte : WritingMode
« writingMode » : true || falseLe réglage permettant de fournir à l’utilisateur une interface d’orientation d’un bloc de texte est « writingMode » : true.
Combinée avec l’option de justification du bloc parent et l’alignement du bloc de texte courant, l’orientation permettra de rapprocher encore un peu plus l’édition de la page web des compositions print standards.
Je vous laisse reparcourir l’article WordPress 6.4.3 – coup d’œil sur Shirley et ses mises à jour pour vous familiariser avec cette configuration somme toute assez intuitive.
Configuration et gestion des polices avec fontFamilies : { fontFace : [] }
La configuration des polices de caractères est logiquement réalisée dans la sections « settings » : { « typography » : « fontFamilies » } du fichier theme.json.
La déclaration de cette sous-section correspond à un tableau d’objets définissant chaque famille police de caractères intégrée au thème.
La propriété « fontFace » le l’objet de police, est utilisée pour intégrer des polices web importées.
N.B. les déclarations de familles systèmes ne nécessitent bien évidemment pas de déclaration de propriété « fontFace ».
La valeur attendue de la sous-propriété « fontFace » : « src » de l’objet, est elle aussi un tableau contant cette fois-ci, les liens pointant vers les fichiers (file :./) des différentes versions de la font :
« fontFamilies » : [
{
« fontFamiliy » : « \ « Frutiger Roman\», sans-serif »,
« slug » : « frutiger-roman »,
« name » : « Frutiger Roman »,
« fontFace » : [
{
« fontFamily » : « Frutiger Roman »,
« fontStyle » : « normal »,
« fontWeight » : normal »,
« fontStrech » : « normal »,
« src » : [
"file:./assets/fonts/frutiger/frutigerltstd-roman-webfont.ttf",
"file:./assets/fonts/frutiger/frutigerltstd-roman-webfont.eot",
"file:./assets/fonts/frutiger/frutigerltstd-roman-webfont.svg",
"file:./assets/fonts/frutiger/frutigerltstd-roman-webfont.woff",
"file:./assets/fonts/frutiger/frutigerltstd-roman-webfont.woff2"
]
}
]
}
]N.B. le chemin spécifié est relatif à la racine du thème courant.
Il ne sera bien sûr pas nécessaire de définir un chemin d’accès pour les polices système.
Une fois définies, les variables WordPress de ces polices seront utilisées pour styliser le document via la section « styles » : { « typography » } du fichier.
Les polices ainsi déclarées seront accessibles via l’éditeur Gutenberg dans la section « Polices de caractères » de l’onglet « Typographie ».
La déclaration des styles du sélecteur body, est effectuée dans la sous-section « styles » : {. « typography » }, alors que les titres seront définis dans la sous-section styles. : { « elements » } et que les autres blocs spécifiques seront configurés séparément dans la sous-section « styles » : { « blocks » } :
« styles » : {
« typography » : {
« fontFamily » : « var(--wp--preset--font-family--frutiger-roman »),
« fontSize » : « var(--wp--preset--font-size--medium »),
“lineHeight” : true,
« dropCap » : true
},
“blocks” : {
“core/quote » : {
« typography » : {…}
}
},
« elements » : {
« h1 » : {
« typography » : {
« fontFamily » : « var(--wp--preset--font-family--inter »)
}
},
« h2 » : {
« typography » : {
« fontFamily » : « var(--wp--preset--font-family--inter »)
}
},
« h3 » : {
« typography » : {
« fontFamily » : « var(--wp--preset--font-family--inter »)
}
},
}Configuration et gestion de la taille des polices de caractères dans theme.json
Si l’éditeur Gutenberg permet d’utiliser une grande variété d’unités pour configurer les tailles de polices de caractères dans un thème Full Site Editing, celles-ci nécessitent d’être homogénéisées au sein des variables CSS définies par WordPress pour autoriser un recours à l’unité « rem » à l’échelle du site.
Votre devis en 48 H chrono !
Demandez à être rappelé !
Nous préciserons ensemble votre projet
de vive voix
Définition des tailles de polices pour un thème FSE
Le rendu des tailles de polices de caractères en unité REM passe par l’homogénéisation des tailles via les variables déclarée de WordPress.
Les tailles de polices souhaitées sont déclarées dans la section « settings » : { « typography » : { « fontSizes » } pour pouvoir être réutilisées dans la section « styles ».
Chaque taille de police prédéfinie correspond à un objet déclaré dans un tableau passé en valeur de « fontSizes ».
La convention des tailles de polices de WordPress respecte le système international. On pourra donc intégrer les tailles suivantes :
- Small
- Medium
- Large
- X Large
- XX Large
Chaque objet de taille de police comprend a minima les propriétés suivantes :
{
« name » : « Small »,
« slug » : « small »,
« size » : « 13px »
}N.B. l’unité dela valeur « size » peut donc être déclarée en px, em, rem, vw et vh.
Cette déclaration générera une variable CSS WordPress préfixée par « –wp-« , permettant de référencer la valeur, tant sur la feuille de style qu’au sein du fichier theme.json lui-même.
var(--wp--preset--font-size--small)
var(--wp--preset--font-size--medium)
var(--wp--preset--font-size--large)
var(--wp--preset--font-size--x-large)
var(--wp--preset--font-size--xx-large)N.B. s’il est possible de déclarer des tailles personnalisées de police, l’éditeur Gutenberg de WordPress conservera les libellés standards en affichant une bulle proposant les noms personnalisés de tailles de police, tant que le nombre de tailles définies ne dépasse pas 5.
Une propriété « fluid » peut aussi être déclarée dans l’objet de taille, je vous en dis plus un peu plus bas dans cet article.
Le respect de la convention de nommage des tailles de police dans WordPress permet aussi de conserver des réglages cohérents en cas de changement de thème par l’utilisateur finale.
Il est donc vivement conseillé d’en rester à cette convention à moins de déclarer davantage de taille pour le thème et de mettre en garde l’utilisateur WordPress lors de la mise en ligne du thème.
Les blocs spécifiques de texte tels que « core/blockquote » ou « core/paragraph » pouront bénéficier de leur propres déclaration « typography » : { « fontSize » } alors que les tailles de polices des différents niveaux de titres devront être définies dans la sous-section « elements ».
N.B. la déclaration de la taille de police dans à la racine de la propriété « styles » : { « typography » } permettra d’assigner une taille de police au sélecteur <body> etde styliser ainsi les blocs de paragraphes sans avoir à leur définir des regègles spécifiques.
Ici, nous définissons les éléments de style typographiques sur le sélecteur body, puis nous définissons les familles et tailles de polices pou 4 niveaux de titres :
"styles": {
"typography" : {
"lineHeight" : 1.6,
"fontSize" : "var(--wp--preset--font-size--medium)",
"fontFamily": "var(--wp--preset--font-family--inter-regular)"
},
"elements":{
"h2" : {
"typography" : {
"fontSize" : "var(--wp--preset--font-size--x-large)",
"fontFamily": "var(--wp--preset--font-family--inter-regular)"
},
"css" : "&.raoul {border-bottom:1px solid #ddd;}"
},
"h3" : {
"typography" : {
"fontSize" : "var(--wp--preset--font-size--large)",
"fontFamily": "var(--wp--preset--font-family--inter-regular)"
}
},
"h4" : {
"typography" : {
"fontSize" : "var(--wp--preset--font-size--medium)",
"fontFamily": "var(--wp--preset--font-family--inter-regular)
}
}
}
}N.B. Il est possible de désactiver l’interface de sélection des polices pour un bloc spécifique.
N.B. il est nécessaire de définir la taille de police du sélecteur <html> à 62.5% si l’on souhaite bénéficier des valeurs « rem » proportionnelles à celles des pixels.
Ainsi la feuille de styles principale du thème ainsi qu’une feuille de style dédiée à l’éditeur pourront intégrer la règle suivante :
html {
font-size : 62.5%;
}
La définition de la valeur globale « fontSize » à 1.6rem permettra alors de bénéficier d’une taille de police de 16px pour l’ensemble du document :
« styles » : {
« typography » : {
« fontSize » : « var(--wp--preset--font-size--medium)”
}
}N.B. au moment de la rédaction de cet article, le support editor-styles couplé à la fonction add_editor_style() semble présenter un bug, ce qui complique la définition de la taille de police à 62.5% sur le sélecteur html.interface-interface-skeleton__html-container
En attendant de bénéficier d’un correctif, la solution de repli consiste donc à inclure la feuille de style dédiée à l’éditeur via le hook admin_enqueue_scripts().
Gestion des tailles de polices de caractères fluides avec Gutenberg
Le design fluide est une technique responsive via laquelle la taille de police ou de tout autre attribut calculé (hauteur de ligne, taille de police, marges, etc.) peut s’adapter de façon continue (linéaire) à la largeur de l’écran.
La section « settings » : « typography » admet une propriété « fluid » : true, permettant de configurer des tailles de polices fluides pour une déclaration donnée.
Au-delà de sa valeur booléenne, « fluid » admet elle-même 3 propriétés permettant de définir une taille minimale, un breakpoint minimal ainsi qu’un breakpoint maximal :
« fluid » : {
« minFontSize : « 14px »,
« minViewportWidth » : « 320px »,
« maxViewportWidth » : « 1024px »
}En tache de fond, WordPress passera ces valeurs recalculée à la fonction clamp() en se basant sur les déclarations de tailles incluant une propriété « fluid » :
« settings » : {
« typography » : {
« fontSizes » : [
{
« slug » : « x-large »
« name » : « X Large »,
« size » : « 3.2rem »
« fluid » : {
« min » : « 2.2rem »,
« max » : « 3.2rem »
}
}N.B. la valeur size correspondra à la valeur préférée de clamp()
Ainsi WordPress définira une variable à la racine du document, correspondant à une taille de police calculée à l’aide de la fonction clamp() :
:root {
--wp--preset--font-size--x-large: clamp(22px, 1.375rem + ((1vw - 3.2px) * 0.862), 32px);
}Le problème avec les valeurs assignées à clamp() par WordPress, est qu’elles couvrent une étendue de viewport arbitraire (peu ou prou définie entre 1280px et 2441px) qui peut ne pas être adaptée à un design basé sur les points de rupture (les breakpoints) que nous utilisons généralement avec les media queries.
Si ce comportement peut convenir à des mises en pages typées, il peut s’avérer bien plus problématique dans le cas d’intégration de design plus complexes ou devant respecter des spécificités précises pour les différents supports (smartphones, tablettes, bureau).
Mais WordPress nous laisse aussi l’opportunité d’utiliser clamp() avec nos propres valeurs de sorte que nous pouvons définir nous tailles de polices fluides afin qu’elles correspondent très précisément aux breakpoints de notre design :
Dans l’exemple suivant, nous assignons à notre taille « large » une valeur fluide allant de 22 à 32px en couvrant un viewport de 768px à 1200px :
N.B. une intégration via media-queries aurait pu s’écrire :
@media only screen and (min-width: 768px) and (max-width: 1200px){
…
}Nous pouvons nous passer de cette déclaration de media queries CSS pour n’utiliser que la fonction clamp() dans notre fichier theme.json :
« settings » : {
« fluid » : false,
« typography» : {
« fontSizes » : [
{
« slug » : « large »,
« name » : « Large »,
« size » : font-size: clamp( 2.2rem, 2.314814vw + 0.4222222rem, 3.2rem);
}
]N.B. vous noterez la propriété « fuid » passée à false afin de conserver la main sur le calcul de taille fluide.
N’hésitez pas à consulter mon article sur l’utilisation de clamp() pour le calcul de valeurs fluides, pour comprendre comment utiliser cette fonction CSS directement dans votre fichier theme.json.
Voilà ! Nous avons fait ici un large tour des options de configuration et de gestion des polices de caractères sur les thèmes Full Site Editing de WordPress.
En complément il pourra toujours être utile de consulter la page dédiée aux réglages de blocs communs de WordPress afin, cette fois-ci, de se familiariser avec l’interface d’édition.
Amusez-vous bien ;-)