Ondersteuning voor vloeiende typografie toevoegen aan WordPress-blokthema's

Vloeiende typografie is een mooie manier van "het beschrijven van lettertype-eigenschappen, zoals grootte of lijnhoogte, die vloeiend schalen volgens de grootte van de viewport". Zijn ook bekend onder andere namen, zoals responsieve typografie, flexibel type, vloeiend type, typografie op viewport-formaat, vloeiende typografie en zelfs responsieve displaytekst.

Hier is een voorbeeld van vloeiende typografie die je live kunt spelen (met dank aan MDN-documentatie). CSS-Tricks heeft vloeiende typografie behandeld ook uitgebreid. Maar het punt hier is niet om u kennis te laten maken met vloeiende typografie, maar hoe u deze kunt gebruiken. Meer specifiek wil ik u laten zien hoe u vloeiende typografie implementeert in WordPress 6.1, dat onlangs een functie voor vloeiend type rechtstreeks in de WordPress Block Editor heeft geïntroduceerd.

Open je style.css bestand, sla een stijlregel in met fancy clamp()-ing op de font-size eigendom, en goed om te gaan, toch? Natuurlijk, dat geeft je vloeiende tekst, maar om Block Editor-besturingselementen te krijgen die het mogelijk maken om vloeiende tekst overal op je WordPress-site toe te passen? Dat vraagt ​​in deze geblokkeerde dagen om een ​​andere aanpak.

Ondersteuning voor vloeiende typografie in Gutenberg

Sommige ontwikkelaars van WordPress-thema's gebruiken de clamp() functie om een ​​vloeistof te definiëren font-size, in hun WordPress-thema's, zelfs in nieuwere "blok" -thema's zoals Twintig Tweeëntwintig, Twintig Drieëntwintig, En anderen.

Maar de Gutenberg-plug-in - degene die experimentele ontwikkeling voor WordPress Block en Site Editor-functies bevat - introduceerde ondersteuning voor vloeiende typografie vanaf versie 13.8. Dat opende de deur voor implementatie op themaniveau, zodat vloeistoftype direct in de Block Editor kan worden toegepast op specifieke elementen en blokken. CSS-Tricks kreeg zelfs een shout-out in de Pull Request die de functie samenvoegde.

Dat werk werd onderdeel van WordPress Core in WordPress6.1. Rich Tabor, een van de eerdere voorstanders van vloeiende typografie in de Block Editor, zegt:

[Vloeiende typografie] maakt ook deel uit van het krachtiger maken van WordPress, maar niet ingewikkelder (waarvan we allemaal weten dat het een hele uitdaging is). […] Vloeiende typografie werkt gewoon. Eigenlijk vind ik het geweldig werken.

Deze Hoogtepunten van WordPress-berichten maken de aanpak om de functie op blokniveau te ondersteunen, zodat standaard een vloeiende lettergrootte dynamisch op blokken wordt toegepast. Er zijn enkele voordelen hierbij natuurlijk:

• Het biedt thema-auteurs een manier om vloeiende typografie te activeren zonder zich zorgen te hoeven maken over de implementatie ervan in code.
• Het past vloeiende typografie toe op specifieke typografische entiteiten, zoals elementen of blokken op een onderhoudbare en herbruikbare manier.
• Het biedt flexibiliteit in termen van lettergrootte-eenheden (bijv px, rem, em en %).

Nu deze nieuwe functie standaard beschikbaar is in de WordPress Block Editor, kunnen thema-auteurs uniforme vloeiende typografie toepassen zonder extra code te schrijven.

Blokken die typografie en spatiëringsinstellingen ondersteunen

Gutenberg 14.1 uitgebracht op 16 september 2022, en introduceerde typografische instellingen op een aantal blokken. Dat betekent dat de tekstinstellingen voor die blokken eerder in CSS waren ingesteld en ook in CSS moesten worden gewijzigd. Maar die blokken bieden nu besturingselementen voor lettertype en spatiëring in de interface van de Block Editor.

Dat werk is momenteel gepland om te worden toegevoegd aan WordPress 6.1, zoals beschreven in deze Make WordPress blogpost. En daarmee is een uitgebreid aantal blokken die met typografische ondersteuning.

Vloeiend type declareren in een WordPress-blokthema

Dus, hoe kunnen we deze nieuwe vloeiende typografie gebruiken in WordPress? Het antwoord is binnen theme.json, een nieuw-achtig bestand dat specifiek is voor het blokkeren van thema's dat een aantal themaconfiguraties bevat in key:value-paren.

Laten we eens kijken naar een regel voor een groot lettertype in theme.json WAAR contentSize: 768px en we werken met een widesize: 1600px indeling. Zo kunnen we een CSS specificeren font-size met de clamp() functie:

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

Alleen vanaf WordPress 6.1: rem, em en px eenheden worden ondersteund.

Dat is geweldig en werkt, maar met de nieuwe functie voor het vloeistoftype zouden we eigenlijk een andere aanpak gebruiken. Eerst kiezen we voor vloeiende typografie op settings.typography, die een nieuwe heeft fluid eigendom:

"settings": {
  "typography": {
    "fluid": true
  }
}

Dan specificeren we onze settings.fontSizes zoals voorheen, maar met een nieuwe fluidSize eigenschap waar we de . kunnen instellen min en max maatwaarden voor ons assortiment vloeistoftypes.

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

Dat is het echt. We hebben zojuist het vloeiende type toegevoegd aan een lettergrootte genaamd 'Groot' met een bereik dat begint bij 2.25rem en schaalt op naar 3rem. Nu kunnen we het lettertype "Groot" toepassen op elk blok met lettertype-instellingen.

Hoe werkt dit onder de motorkap? Rich Tabor biedt een mooie uitleg, evenals dit Pull Request in GitHub. Kortom, WordPress converteert de theme.json eigenschappen in de volgende CSS-regel:

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

... die wordt toegepast op het element, zeg maar een alineablok:

...

Aanvankelijk vond ik het moeilijk om het concept van de CSS te begrijpen en in mijn hoofd te verwerken clamp() functioneren zonder ook te leren over de min(), max() en calc() functies. Deze rekentool heeft me behoorlijk geholpen, vooral om te bepalen welke waarden ik in mijn eigen themaprojecten moet gebruiken.

Laten we voor demonstratiedoeleinden de rekenmachine gebruiken om onze font-size bereik zodat de grootte is: 36px een 768px kijkvensterbreedte en 48px een 1600px breedte van het kijkvenster.

De rekenmachine genereert automatisch de volgende CSS:

/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);

De rekenmachine biedt opties om invoereenheden te selecteren als: px, rem en em. Als we selecteren: rem eenheid, genereert de rekenmachine het volgende: clamp() waarde:

/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);

Dus die minimum- en maximumwaarden komen overeen met de de fluidSize.min en fluidSize.max waarden in theme.json. De min waarde wordt toegepast op viewports die 768px breed en lager. Dan de font-size schaalt op naarmate de breedte van de viewport groeit. Als de viewport breder is dan 1600px max wordt toegepast en de font-size is daar afgedekt.

Voorbeelden

Er zijn gedetailleerde testinstructies: in de samengevoegde Pull Request die de functie introduceerde. Er zijn nog meer testinstructies van Pre-prelease bericht van Justin Tadlock op Make WordPress.

Voorbeeld 1: Een nieuwe instelling voor vloeiend lettertype instellen

Laten we beginnen met de instructies van Justin. Ik gebruikte in een aangepaste versie van de standaard Twenty Twenty-Three thema dat momenteel in ontwikkeling is.

Laten we er eerst voor zorgen dat we de Gutenberg-plug-in (13.8 en hoger) of WordPress 6.1 gebruiken, en vervolgens kiezen voor fluid type op de settings.typography.fluid eigendom in de theme.json file:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
    }
  }
}

Laten we nu de laten vallen settings.typography.fontSizes voorbeelden daarin:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
      "fontSizes": [
        {
          "name": "Normal",
          "size": "1.125rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal"
        }
      ]
    }
  }
}

Als alles correct werkt, kunnen we nu naar de WordPress Block Editor gaan en de lettertype-instelling "Normaal" toepassen op ons blok:

Mooi hoor! En als we dat element aan de voorkant opslaan en inspecteren, is dit de opmaak:

Zeer goed. Laten we er nu voor zorgen dat de CSS er echt is:

Goed Goed. Laten we die aangepaste CSS-eigenschap blootleggen om te zien of het echt dingen vasthoudt:

Het lijkt erop dat alles werkt zoals we het willen! Laten we een ander voorbeeld bekijken...

Voorbeeld 2: Een lettertype-instelling uitsluiten van vloeistoftype

Laten we deze keer de . volgen instructies van de samengevoegde Pull Request met een knipoog naar dit voorbeeld van Carolina Nymark dat laat zien hoe we het vloeistoftype voor een specifieke lettertype-instelling kunnen uitschakelen.

Ik gebruikte de leeg thema zoals geadviseerd in de instructies en opende de theme.json bestand om te testen. Eerst kiezen we voor vloeistoftype precies zoals we eerder deden:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1000px"
    },
    "typography": {
      "fluid": true
    }
  }
}

Deze keer werken we met kleinere wideSize waarde van 1000px in plaats van 1600px. Dit zou ons in staat moeten stellen om het vloeistoftype in een exact bereik te zien werken.

OK, verder met het definiëren van enkele aangepaste lettergroottes onder settings.typography.fontSizes:

{
  "version": 2,
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        {
          "size": ".875rem",
          "fluid": {
            "min": "0.875rem",
            "max": "1rem"
        },
          "slug": "small",
          "name": "Small"
        },
        {
          "size": "1rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal",
          "name": "Normal"
        },
        {
          "size": "1.5rem",
          "fluid": {
            "min": "1.5rem",
            "max": "2rem"
          },
          "slug": "large",
          "name": "Large"
        },
        {
          "size": "2.25rem",
          "fluid": false,
          "slug": "x-large",
          "name": "Extra large"
        }
      ]
    }
  }
}

Merk op dat we de functie voor het vloeiende type alleen hebben toegepast op de lettertype-instellingen "Normaal", "Medium" en "Groot". "Extra Large" is de vreemde eend in de bijt waar de fluid object is ingesteld op false.

Wat WordPress vanaf hier doet — via de Gutenberg-stijl motor — past de eigenschappen toe die we in CSS hebben ingesteld clamp() functies voor elke instelling voor lettergrootte die is gekozen voor vloeiend type en een enkele waarde voor de instelling Extra groot:

--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;

Laten we eens kijken naar de opmaak aan de voorkant:

Goed begin! Laten we bevestigen dat de .has-x-large-font-size klasse is uitgesloten van vloeistoftype:

Als we de --wp--preset--font-size--x-large variabele, we zullen zien dat het is ingesteld op 2.25rem.

Dat is precies wat we willen!

Thema's blokkeren die vloeiende typografie ondersteunen

Veel WordPress-thema's maken al gebruik van de clamp() functie voor vloeiend type in zowel blok- als klassieke thema's. Een goed voorbeeld van vloeiend typografiegebruik is de onlangs uitgebrachte Twenty Twenty-Three standaardthema.

Ik heb alle blokthema's bekeken van WordPress Block Thema-map, onderzoeken theme.json bestand van elk thema en om te zien hoeveel blokthema's momenteel vloeiende typografie ondersteunen - niet de nieuwe functie omdat het op het moment van schrijven nog steeds in de Gutenberg-plug-in zit - met behulp van de CSS clamp() functie. Van de 146 thema's die ik heb beoordeeld, gebruikte de meerderheid een clamp() functie om afstand te definiëren. Iets meer dan de helft van hen gebruikte clamp() lettergroottes te definiëren. De Alara thema is de enige om te gebruiken clamp() voor het definiëren van de indeling containerformaten.

Het is begrijpelijk dat slechts enkele onlangs uitgebrachte thema's de nieuwe functie voor vloeiende typografie bevatten. Maar hier zijn degenen die ik heb gevonden die het definiëren in theme.json:

En als je mijn vorige post hier op CSS-Tricks leest, de TT2 Gopher-blokken thema dat ik voor de demo heb gebruikt, is ook bijgewerkt om de functie voor vloeiende typografie te ondersteunen.

Geselecteerde reacties op de functies van WordPress fluid typografie

Het hebben van vloeiende typografie in WordPress op instellingenniveau is super spannend! Ik dacht dat ik wat gedachten zou delen van mensen in de WordPress-ontwikkelaarsgemeenschap die erop hebben gereageerd.

Matias Ventura, de hoofdarchitect van het Gutenberg-project:

Een van mijn favoriete nieuwste Gutenberg-functies is het vloeiende type dat - hopelijk - "gewoon werkt". Het is beschikbaar om te testen in 13.8. pic.twitter.com/9SLUgEg4pF

— Matias Ventura (@matias_ventura) 4 Augustus 2022

Rijke Tabor:

Als een van de grotere inspanningen om prachtig rijke pagina's in WordPress te publiceren, is vloeiende typografie een behoorlijk grote ervaringswinst voor zowel de mensen die met WordPress bouwen - als degenen die de inhoud consumeren.

Automatische ontwikkelaar Ramón Dodd commentaar in de Pull Request:

Vergelijk dat idee met lettergroottes die reageren op specifieke viewport-groottes, zoals die gedefinieerd door mediaquery's, maar doe niets tussen die maten. theme.json stelt auteurs al in staat om hun eigen vloeiende waarden voor lettergrootte in te voegen. Dit zal niet veranderen, maar deze PR biedt het aan mensen die zich geen zorgen willen maken over de implementatiedetails.

Nick Kroft, auteur van GenesisWP:

Ik ga niet liegen, ik denk dat dit de functie is waar ik het meest enthousiast over ben. Gebruikte klem om dit te doen, maar de syntaxis ziet er gemakkelijker uit voor de gemiddelde persoon.

— Nick Croft (@Nick_theGeek) 1 september 2022

Brian Garner, ontwerper en hoofdontwikkelaar bij WPEngine:

Vloeistoftypografie is een enorme verbetering ten opzichte van #WordPress. FSE-thema's kunnen hier experimenteel voor kiezen via de Gutenberg-plug-in, maar we zullen zien dat het dit najaar officieel wordt ondersteund in 6.1. Zo ziet het eruit/werkt het: pic.twitter.com/Jc7gHdyz5R

— Brian Gardner (@bgardner) 1 september 2022

Een paar ontwikkelaars denken sommige functies moeten een opt-in zijn. Jason Crist van Automatic zegt:

Ik ben dol op de kracht van vloeiende typografie, maar ik geloof ook niet dat het standaard moet worden ingeschakeld. Het gebruik (en de details ervan) zijn belangrijke ontwerpbeslissingen die zorgvuldig moeten worden genomen.

Je kunt ook een heleboel meer opmerkingen vinden in de officiële test instructies: voor de functie.

Afsluiten

De vloeiende typografiefunctie in WordPress is: nog in actieve ontwikkeling op het moment van dit schrijven. Dus op dit moment moeten thema-auteurs het gaan gebruiken, maar met de nodige voorzichtigheid en enkele mogelijke wijzigingen verwachten voordat het officieel wordt vrijgegeven. Justin waarschuwt thema-auteurs die deze functie gebruiken en stelt voor om de volgende twee GitHub-problemen in de gaten te houden:

Er is ook nog veel doorgaand werk over typografie en andere ontwerpgerelateerde WordPress-tools. Als je geïnteresseerd bent, bekijk dit dan typografie bijhouden GitHub-ticket en ontwerptools gerelateerde GitHub-problemen.

Resources

Ik heb de volgende artikelen gebruikt bij het onderzoeken van vloeistoftype en hoe WordPress het als een functie implementeert.

Tutorials en meningen

CSS-trucs

calc() en gerelateerde CSS-functies