Twenty Twenty-Three is het gloednieuwe standaard WordPress thema dat gelanceerd wordt met WordPress 6.1.
Het is een minimalistisch thema zonder afbeeldingen of extra functionaliteit. Het is in zijn kracht als starterthema om templates en stijlvariaties te bouwen en ook alle features te testen die met de nieuwste versies van WordPress zijn geïntroduceerd. Het thema kan worden gezien als een rasechte ontwikkel- en testomgeving, hoewel de minimalistische stijl, de responsiviteit en de lichtheid het een goede optie maken voor het maken van blogs en websites voor de meest uiteenlopende doeleinden.
In zijn inleiding op het thema Twenty Twenty-Two schreef Kjell Reigstad over de toekomst van standaardthema’s:
Innovaties als theme.json, bloktemplates en blokpatronen maken de ontwikkeling van thema’s veel eenvoudiger, en bieden nieuwe manieren voor gebruikers om hun sites aan te passen. Er is reden om aan te nemen dat de community dit alles kan benutten om in de komende jaren meer en gevarieerdere thema- en aanpassingsoplossingen te bouwen voor onze gebruikers.
En Channing Ritter deed het volgende voorstel:
Wat als we, in plaats van het thema zelf te benadrukken, een opiniërende reeks stijlvarianten benadrukken die door leden van de community zijn ontworpen? We zouden Twenty Twenty-Two kunnen gebruiken als basis voor een nieuw thema dat sober en minimaal is — een leeg canvas om een breed scala aan stijlvariaties te laten schitteren.
En dat is wat er gebeurt met het nieuwe standaardthema Twenty Twenty-Three. De community is opgeroepen om actief deel te nemen aan het ontwerp van het standaard WordPress thema, en daar houden we van omdat het nieuwe thema zo het resultaat wordt van echte samenwerking.
Maar voordat we de stijlvarianten onthullen die met het nieuwe WordPress standaardthema zijn gebundeld, laten we eerst de basisfeatures van Twenty Twenty-Three uitzoeken en waar het geschikt voor kan zijn.
Paginalayouts en -stijlen
Zoals gezegd is Twenty Twenty-Three een uitgeklede versie van Twenty Twenty-Two. Wat opvalt aan het nieuwe standaardthema is zijn eenvoud en lichtheid. Twenty Twenty-Three is flexibel en perfect geschikt voor de nieuwste sitebewerkingsfeatures van Gutenberg, zoals templatebewerking, Global Styles variaties, Fluid Typography en blokpatronen.
Het zal dus geen verrassing zijn dat je in de in dit artikel getoonde schermafbeeldingen minimale pagina’s ziet zonder toeters en bellen, maar perfect geschikt om aan te passen en te testen.
Om je daarvan een voorbeeld te geven, toont de onderstaande afbeelding pagina’s met en zonder uitgelichte afbeeldingen.
De volgende afbeelding vergelijkt de startpagina met een archiefpagina.
Ook al is het nieuwe thema een vereenvoudigde versie van Twenty Twenty-Two, vergeleken met het vorige standaardthema presenteert Twenty Twenty-Three enkele belangrijke verschillen.
Ten eerste is de grootte van de koppen verkleind en is het standaard serif lettertype vervangen door een systeem sans serif lettertype.
Ook is er een ander kleurenpalet toegepast. Je kunt de nieuwe Twenty Twenty-Three palet definitie zien in de volgende code uit de theme.json:
{
"settings": {
"appearanceTools": true,
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#9DFF20",
"name": "Primary",
"slug": "primary"
},
{
"color": "#345C00",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#F6F6F6",
"name": "Tertiary",
"slug": "tertiary"
}
]
},
}
}
Maar de belangrijkste feature van het nieuwe standaardthema is de set stijlvariaties. Twenty Twenty-Three komt met tien globale stijlvariaties, die elk een andere combinatie van kleuren, lettertypefamilie en lettergroottes laten zien.
Je vindt de bijbehorende JSON bestanden in de Twenty Twenty-Three styles map.
Volledige previews van paginatemplates, stijlen en stijlvarianten van Twenty Twenty-Three zijn beschikbaar op Figma.
Twenty Twenty-Three typografie
In een minimaal thema als Twenty-Three speelt typografie een sleutelrol bij het leesbaar maken van de tekst, het aantrekkelijk maken van de site en uiteindelijk het bieden van een lonende surfervaring aan bezoekers, ongeacht apparaat en schermgrootte.
Om dit doel te bereiken komt Twenty Twenty-Three met een nieuwe set lettertypefamilies en gebruikt het Fluid Typography dat met WordPress 6.1 is geïntroduceerd.
Lettertypes
Twenty Twenty-Three beschikt over een nieuwe set lettertypes die in stijlvarianten worden gebruikt en gekenmerkt worden door eenvoud en afwisseling:
- System Font –
var(--wp--preset--font-family--system-font) - IBM Plex Mono –
var(--wp--preset--font-family--ibm-plex-mono) - Inter –
var(--wp--preset--font-family--inter) - Source Serif Pro –
var(--wp--preset--font-family--source-serif-pro) - DM Sans –
var(--wp--preset--font-family--dm-sans)
IBM Plex Mono is onderdeel van de IBM Plex lettertypeset, het nieuwe corporate IBM lettertype vrijgegeven onder SIL Open Font License (OFL). Je kunt er een voorbeeld van zien op de websites van Adobe Fonts en IBM.
Inter is een vrije en open source lettertypefamilie, gemaakt en ontworpen voor computerschermen door Rasmus Andersson. Je kunt de lettertypefamilie bekijken en downloaden op de website van Rasmus Andersson of Google Fonts.
Source Serif Pro is een lettertype van Adobe Originals en je kunt het gratis gebruiken met een Adobe Fonts account (lees meer over Adobe font licenties).
DM Sans is een ander lettertype met een licentie onder de SIL Open Font License (OFL), dat in opdracht van Google is ontworpen door Colophon Foundry, Jonny Pinhorn en Indian Type Foundry.
Fluid typography en spacing
Twenty Twenty-Three gebruikt Fluid Typography en Spacing Presets die met WordPress 6.1 zijn geïntroduceerd.
Het nieuwe standaard WordPress thema biedt een prachtig voorbeeld van de implementatie van fluid typography binnen WordPress thema’s en je kunt het gebruiken als template voor het toevoegen van ondersteuning voor deze feature in je thema’s.
De volgende code toont settings.typography.fluid en settings.typography.fontSizes[] property definities in de theme.json:
"settings": {
...
"typography": {
"fluid": true,
"fontSizes": [
{
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"size": "1rem",
"slug": "small"
},
{
"fluid": {
"min": "1rem",
"max": "1.125rem"
},
"size": "1.125rem",
"slug": "medium"
},
{
"size": "1.75rem",
"slug": "large",
"fluid": false
},
{
"size": "2.25rem",
"slug": "x-large",
"fluid": false
},
{
"size": "10rem",
"slug": "xx-large",
"fluid": {
"min": "4rem",
"max": "20rem"
}
}
]
}
}De instelling typography.fluid voegt ondersteuning voor fluid typography toe, terwijl typography.fontSizes[].fluid de minimale en maximale waarde voor de lettergrootte instelt.
Naast vloeiende typografie ondersteunt Twenty-Three ook fluid spacing.
Vóór WordPress 6.1 was het alleen mogelijk om aangepaste spatiëringswaarden in te stellen in de editor. Dit betekent dat thema-auteurs vóór WordPress 6.1 geen vaste waarden konden opgeven voor opvulling, marge en tussenruimte. Dit resulteerde in verschillende beperkingen. Het was bijvoorbeeld niet mogelijk om eenvoudig spatiëringsinstellingen over te dragen tussen verschillende thema’s of om spatiëringswaarden te behouden bij het kopiëren en plakken van inhoud en blokpatronen tussen verschillende sites.
Thema’s kunnen Fluid Spacing ondersteuning aangeven met behulp van de nieuwe spacing.spacingScale en spacing.spacingSizes instellingen (lees meer in Theme.json: Voorinstellingen voor spatiegrootte toevoegen). In Twenty Twenty-Three gebeurt dit met de volgende instellingen:
"settings": {
"spacing": {
"spacingScale": {
"steps": 0
},
"spacingSizes": [
{
"size": "clamp(1.5rem, 5vw, 2rem)",
"slug": "30",
"name": "30"
},
{
"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
"slug": "40",
"name": "40"
},
{
"size": "clamp(2.5rem, 8vw, 6.5rem)",
"slug": "50",
"name": "50"
},
{
"size": "clamp(3.75rem, 10vw, 7rem)",
"slug": "60",
"name": "60"
},
{
"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
"slug": "70",
"name": "70"
},
{
"size": "clamp(7rem, 14vw, 11rem)",
"slug": "80",
"name": "80"
}
],
"units": [
"%",
"px",
"em",
"rem",
"vh",
"vw"
]
}
}De video hieronder toont Fluid Typography in actie in Twenty Twenty-Three.
Je kunt voorinstellingen voor typografie en spatiëring bekijken in Ontwerpspecificatie.
Templates en templatedelen
Met Twenty Twenty-Three zie je in actie alle features en sitebewerkingsverbeteringen die met WordPress 6.1 komen.
Dat geldt vooral voor templatesen templatedelen.
Als je de Site Editor opstart met Twenty Twenty-Three draaiend op je website, zie je een lijst met elf templates en vier templatedelen.
De afbeelding hieronder toont het 404-template in de site editor.
Je vindt de bijbehorende HTML bestanden in de mappen templates en parts van Twenty Twenty-Three.
De afbeelding hieronder toont het templatedelen Comments in de bewerkingsmodus:
Je vindt aangepaste templates en templatedelen gedefinieerd in de theme.json.
Aangepaste templates
Naast de standaardtemplates biedt Twenty Twenty-Three de volgende aangepaste templates:
- Blank
- Blog (Alternative)
- 404
- With Featured Image
- With Cover Block
Deze templates worden als volgt gedefinieerd in de theme.json:
{
"customTemplates": [
{
"name": "blank",
"postTypes": [
"page",
"post"
],
"title": "Blank"
},
{
"name": "blog-alternative",
"postTypes": [
"page"
],
"title": "Blog (Alternative)"
},
{
"name": "404",
"postTypes": [
"page"
],
"title": "404"
},
{
"name": "with-featured-image",
"postTypes": [
"page",
"post"
],
"title": "With Featured Image"
},
{
"name": "with-cover-block",
"postTypes": [
"page",
"post"
],
"title": "With Cover Block"
}
],
}Templatedelen
Templatedelen worden als volgt gedefinieerd.
{
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "uncategorized",
"name": "comments",
"title": "Comments"
},
{
"area": "uncategorized",
"name": "post-meta",
"title": "Post Meta"
}
]
}Global Styles en stijlvariaties
Zoals hierboven vermeld, kunnen vanaf WordPress 6.0 thema-auteurs meerdere sets stijlen bundelen met hun thema’s, zodat gebruikers kunnen wisselen tussen stijlvariaties zonder hun thema te veranderen.
Deze geweldige WordPress feature is het belangrijkste kenmerk van het nieuwe standaardthema, want Twenty Twenty-Three biedt tien vooraf gebouwde stijlcombinaties om uit te kiezen.
Je kunt door deze stijlen bladeren in de Global Style interface van je Site Editor. Hier kun je
- Van global style wisselen in het paneel Browse styles.
- Typografie instellingen aanpassen – tekst, links, headers en knoppen
- Standaardkleuren bewerken of de kleur van specifieke elementen wijzigen
- De opmaak aanpassen van het hoofdcontentgebied
- Het uiterlijk van specifieke elementen aanpassen
Het is goed om nogmaals op te merken dat bij het maken van zoveel stijlvarianten de betrokkenheid van de community cruciaal was. Na de aftrap van het Twenty Twenty-Three project werden 38 inzendingen ontvangen van 19 contributors uit 8 verschillende landen (je kunt alle projecten bekijken op GitHub).
Van de 38 zijn 10 stijlvariaties geselecteerd:
- Pitch is een donkere versie van de standaardstijl die lettertypefamilie Inter van Rasmus Andersson gebruikt.
- Canary gebruikt één lettergrootte en een smalle kolombreedte. Het gebruikt ook een interessant border-radius effect.
- Electric gebruikt een dikgedrukte kleur voor alle typografie op de hele site.
- Pelgrimage is een gekleurde donkere versie van het basisthema.
- Marigold is een zachte en aangename variatie op de basisstijl.
- Block-Out heeft een duotoon effect op afbeeldingen.
- Whisper toont enkele aangepaste elementen, zoals de rand rond de rand van de pagina, knopstijlen en unieke linkonderstrepingen.
- Sherbet heeft een unieke heldere en kleurrijke uitstraling
- Grapes is gekozen vanwege de aangename combinatie van kleurenpalet en lettertype.
- Aubergine is een opvallende split-color achtergrond die donkerder is.
Het coolste aan stijlvariaties is dat je niet per se een frontendontwikkelaar hoeft te zijn om je stijlen te maken.
Als je je comfortabel voelt met coderen, kun je een van de .json bestanden kiezen die je in de Twenty Twenty-Three styles map vindt en die als template gebruiken om je stijlvariatie te bouwen.
Maar als coderen niet je ding is, kun je de officiële Create Block Theme plugin gebruiken, die je gratis kunt downloaden uit de WordPress.org plugindirectory.
Installeer en activeer eerst de plugin en navigeer dan naar de stijleditor. Pas hier de kleuren, typografie en layout aan volgens je voorkeuren en sla je wijzigingen op.
Als je tevreden bent met je wijzigingen, zoek je Create Block Theme onder Appearance in het WordPress adminmenu.
Vink het laatste item onderaan in de lijst aan: Create a style variation. Je wordt gevraagd een naam toe te kennen aan je stijlvariatie. Voer de naam in en klik op Create Theme. Dit maakt een nieuw .json bestand aan in de syles map van het thema.
Nu kun je je stijl verder aanpassen en zelfs exporteren naar andere WordPress installaties.
De Create Block Theme plugin is een waardevolle tool om optimaal te profiteren van de features voor het maken van thema’s en templates die beschikbaar zijn met de nieuwste versies van WordPress. Nu je toch bezig bent, kun je misschien ook eens kijken naar alle andere opties:
- Export Twenty Twenty-Three
- Create child of Twenty Twenty-Three
- Clone Twenty Twenty-Three
- Overwrite Twenty Twenty-Three
- Create blank theme
- Create a style variation
Samenvatting
Hoewel het nieuwe standaard WordPress thema er op het eerste gezicht misschien uitziet als een soort featureloze lege doos, is het bij nader inzien veel meer dan dat, omdat het je in staat stelt de nieuwste features voor het bewerken van WordPress sites optimaal te benutten.
In Twenty Twenty-Three zie je veel templates en templatedelen om aan te passen, een set van 10 stijlvarianten om te gebruiken als basis voor het maken van unieke websites, en ondersteuning voor alle nieuwe features die beschikbaar zijn in WordPress 6.1, te beginnen met Fluid Typography en Improved Template System.
Met Twenty Twenty-Three is het gevoel dat het verschil tussen site-uiterlijk en functionaliteit nu grimmig is. De enige functie van het thema is het regelen van het uiterlijk van de site, het toevoegen van functionaliteit wordt overgelaten aan de plugins. En vanuit dit oogpunt doet Twenty Twenty-Three geweldig werk, door WordPress gebruikers alle nieuwste Gutenberg sitebewerkingsfuncties te bieden. Het uiterlijk van een website aanpassen is nog nooit zo eenvoudig geweest.
Aan jou nu de keuze. Heb je het nieuwe thema al gebruikt in een testomgeving? Heb je al geprobeerd aangepaste stijlvariaties te maken? Deel je gedachten met ons in de comments hieronder.
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.
Laat een reactie achter