Ajout d'un support de typographie fluide aux thèmes de blocs WordPress

La typographie fluide ajuste dynamiquement les propriétés de police (taille, hauteur de ligne) en fonction de la taille de la fenêtre, améliorant la réactivité. Également appelée typographie réactive, type flexible ou typographie de la taille d'une fenêtre, il offre une expérience utilisateur supérieure. Cet article se concentre sur la mise en œuvre de la typographie des fluides dans WordPress 6.1, en tirant parti de ses fonctionnalités de l'éditeur de blocs intégré.

Tout en ajoutant une fonction clamp() à style.css crée du texte fluide, l'intégration de l'éditeur de blocs vrai nécessite une approche différente.

Soutien de la typographie fluides de Gutenberg

De nombreux développeurs de thèmes WordPress ont utilisé clamp() dans leurs thèmes, y compris des thèmes de bloc comme vingt-deux et vingt-trois. Cependant, Gutenberg (l'éditeur de blocs de WordPress) a introduit la prise en charge de la typographie fluide dans la version 13.8, permettant une implémentation au niveau du thème pour l'application directe dans l'éditeur de blocs. Cette fonctionnalité est devenue une partie de WordPress Core dans la version 6.1.

Rich Tabor, un contributeur clé, met en évidence la puissance et la simplicité de la fonctionnalité. L'approche se concentre sur la prise en charge au niveau du bloc, en appliquant dynamiquement les tailles de polices fluides par défaut. Les avantages comprennent:

• Implémentation de l'auteur du thème simplifié.
• application maintenable et réutilisable à des éléments / blocs spécifiques.
• Flexibilité dans les unités de taille de police (PX, REM, EM,%).

WordPress 6.1 permet aux auteurs du thème d'implémenter une typographie fluide cohérente sans code personnalisé.

Blocs avec typographie et paramètres d'espacement

Gutenberg 14.1 (16 septembre 2022) Ajout des paramètres typographiques à de nombreux blocs, fournissant des commandes de police et d'espacement directement dans l'éditeur de blocs. Cette fonctionnalité élargie est intégrée à WordPress 6.1.

Implémentation de la typographie fluide dans un thème de bloc WordPress

La typographie fluide est implémentée via theme.json, un fichier de configuration de thème de bloc. Considérez une grande police, avec contentSize: 768px et widesize: 1600px. Une fonction clamp() dans CSS pourrait être:

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}</code>

WordPress 6.1 prend en charge les unités REM, EM et PX. Cependant, la nouvelle fonctionnalité de type fluide offre une approche plus simple. Activer la typographie fluide:

<code>"settings": {
  "typography": {
    "fluid": true
  }
}</code>

Spécifiez ensuite fontSizes avec fluidSize pour les valeurs min et max:

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}</code>

Cela ajoute un type de fluide à la "grande" taille de police (2.25rem à 3rem). La police "grande" peut ensuite être appliquée à n'importe quel bloc avec paramètres de police.

WordPress convertit theme.json Propriétés en CSS:

<code>.has-large-font-size {
  font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}</code>

appliqué à des éléments comme <code><p></p> Tags. Les calculatrices en ligne peuvent aider à déterminer les valeurs clamp().

Exemples

Des instructions de test détaillées sont disponibles dans la demande de traction GitHub pertinente.

Exemple 1: Définition d'un nouveau réglage de police fluide

Assurez-vous que Gutenberg (13.8) ou WordPress 6.1 est utilisé. Activer le type de fluide dans theme.json:

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}</code>

Ajouter des paramètres de taille de police:

<code>"settings": {
  "typography": {
    "fluid": true
  }
}</code>

Appliquer "Normal" dans l'éditeur de blocs et vérifier le balisage frontal et CSS.

Exemple 2: excluant un réglage de police à partir de type de fluide

Activer le type de fluide comme avant. Définissez les tailles de police, désactivant le type de fluide pour un:

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}</code>

WordPress génère CSS en conséquence, à l'exclusion du réglage "Extra Large" à partir des ajustements de type fluide. Vérifiez le balisage frontal et CSS.

Bloquer les thèmes avec support de typographie fluide

De nombreux thèmes utilisent clamp() pour le type de fluide. Plusieurs thèmes récemment publiés prennent en charge la nouvelle fonctionnalité de typographie fluidienne.

Commentaires de la communauté

La fonction de typographie des fluides WordPress a reçu des commentaires positifs de la communauté des développeurs, mettant en évidence ses avantages pour les développeurs et les consommateurs de contenu. Certains développeurs suggèrent de faire en sorte que certains aspects se déshabillent plutôt que par défaut.

Conclusion

La fonction de typographie du fluide WordPress est développée activement. Bien que actuellement utilisables, les auteurs de thème devraient procéder à la prudence, surveillant les problèmes de github pertinents. De nombreuses ressources fournissent plus d'informations sur la typographie des fluides et sa mise en œuvre dans WordPress.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!