La typographie fluide arrive dans WordPress 6.1.
L’intérêt me direz-vous ? Et bien avoir une police/font qui change de taille en fonction de la largeur de l’écran.
C’est un mode de rendu de font totalement responsive qui permet de s’affranchir l’obligation d’écrire du CSS avec des media-queries pour ajuster la taille de la police.
La propriété Clamp()
Je vous rappelle que le but du fichier theme.json est de générer des variables CSS afin d’être utilisées dans Gutenberg et d’avoir une cohérence entre le front et l’éditeur.
Le système de typographie fluid est basé sur la propriété CSS « clamp() ».
La fonction CSS clamp()
permet de ramener (d’écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale.
clamp(MIN, VAL, MAX)
Définir une typographie fluide
Vous pouvez définir vos différentes tailles de police dans le fichier theme.json et indiquer si elles sont fluides ou non.
Il faut ajouter la propriété « fluid » et la passer à true.
Ensuite sur une taille qui doit être fluide, il lui faut en plus de la propriété « size », une propriété « fluid » avec à l’intérieur un « max » et un « min ».
Attention si vous souhaitez avoir une taille non fluide, n’oubliez pas de passer « fluid » à false.
"typography": {
"fluid": true,
{
"size": "1.125rem",
"fluid": {
"min": "1.1rem",
"max": "1.125rem"
},
"slug": "large",
"name": "Large"
},
{
"size": "1rem",
"slug": "base",
"name": "Base",
"fluid": false
}
}
...
Et donc ce code utilisé dans le theme.json va générer des variables CSS :
--wp--preset--font-size--large: clamp(1.1rem, 1.1rem + ((1vw - 0.48rem) * 0.048), 1.125rem);
--wp--preset--font-size--base: 1rem;
Comme vous pouvez le constater, la valeur dans la fonction clamp est un calcul dont le résultat change avec la largeur d’écran (vw = viewport width)
Petit rappel, si vous voulez tester une version de WordPress en avance, il faut ajouter le plugin « WordPress Beta Tester » et « Gutenberg« .