{"id":45645,"date":"2022-09-09T09:49:27","date_gmt":"2022-09-09T07:49:27","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=45645&preview=true&preview_id=45645"},"modified":"2023-08-11T07:44:04","modified_gmt":"2023-08-11T05:44:04","slug":"wordpress-6-1","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-1\/","title":{"rendered":"Wat is er nieuw in WordPress 6.1: Fluid Typography, verbeterd templatesysteem, nieuwe Site Health check en nog veel meer!"},"content":{"rendered":"

WordPress 6.1 “Misha” is uitgebracht op 1 november 2022<\/a>. De derde grote release van het jaar is de opvolger van WordPress 6.0 Arturo<\/a>, uitgebracht op 24 mei, en WordPress 5.9 Josephine<\/a>, uitgebracht op 25 januari.<\/p>\n

Zoals altijd brengen nieuwe WordPress releases nieuwe features, verbeteringen en bugfixes van de nieuwste versies van de Gutenberg plugin in de core. En WordPress 6.1 zal geen uitzondering zijn, want er zijn 11 versies van de Gutenberg plugin<\/a> in de core samengevoegd, van 13.1 tot 14.1.<\/p>\n

In dit artikel nemen we een kijkje achter de schermen en introduceren we de nieuwe spannende features die komen met de nieuwe grote release van WordPress.<\/p>\n

Matias Ventura gaf ons enkele inzichten in de Roadmap naar 6.1<\/a>, waarin hij zei dat het doel van 6.1 is om de ervaringen die met 5.9 en 6.0 zijn ge\u00efntroduceerd te verfijnen en een aantal zaken te repareren nu we fase 3 van de Gutenberg roadmap naderen.<\/p>\n\n

1. Verbeteringen aan de Template Editor<\/strong>: Een van de belangrijkste nieuwe features is de Template Editor<\/a>. WordPress 6.1 moet de mogelijkheid introduceren om door de structuur van de site te bladeren, deze te visualiseren en te bewerken.<\/p>\n

2. Templatepatronen<\/strong>: Het doel is om blokpatronen een centrale rol te geven<\/a> bij het maken van templates en pagina’s, ze aan te passen aan aangepaste berichttypes<\/a> en bloktypes, de vergrendelingsfunctionaliteit te verbeteren, het beheer van opgeslagen patronen te verbeteren, enz.<\/p>\n

3. Globale stijlen en blokken en ontwerptools<\/strong>: WordPress 6.1 zal het beheren van webfonts mogelijk maken, responsieve typografie implementeren, en de toolset die beschikbaar is voor blokken uitbreiden.<\/p>\n

Dat gezegd hebbende, tijd om wat dieper in te gaan op de krachtigste features van deze nieuwe WordPress 6.1.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Fluid Typography en Fluid Spacing<\/strong><\/h2>\n

WordPress 6.1 voegt ondersteuning toe<\/a> voor Fluid Typography<\/a>\u00a0via calc<\/code><\/a>\/clamp<\/code><\/a> CSS functies.<\/p>\n

De uitdrukking Fluid Typography<\/a> beschrijft het vermogen van tekst om zich aan te passen aan de breedte van de viewport, waarbij soepel wordt geschaald van een minimale naar een maximale breedte.<\/p>\n

Het is iets anders dan wat je kunt bereiken met mediaqueries, want met mediaqueries kunnen thema’s de grootte van de tekst aanpassen aan specifieke viewportafmetingen, maar niets doen tussen verschillende waarden.<\/p>\n

Sommige thema’s ondersteunen al fluid typography. Twenty Twenty-Two<\/a> gebruikt bijvoorbeeld de CSS clamp()<\/code> functie voor verschillende lettergroottes. Bijvoorbeeld:<\/p>\n

\"settings\": {\n\t...\n\t\"custom\": {\n\t\t\"spacing\": {\n\t\t\t\"small\": \"max(1.25rem, 5vw)\",\n\t\t\t\"medium\": \"clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))\",\n\t\t\t\"large\": \"clamp(4rem, 10vw, 8rem)\",\n\t\t\t\"outer\": \"var(--wp--custom--spacing--small, 1.25rem)\"\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"font-size\": {\n\t\t\t\t\"huge\": \"clamp(2.25rem, 4vw, 2.75rem)\",\n\t\t\t\t\"gigantic\": \"clamp(2.75rem, 6vw, 3.25rem)\",\n\t\t\t\t\"colossal\": \"clamp(3.25rem, 8vw, 6.25rem)\"\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n
Zoals je in bovenstaande code kunt zien, worden voor elke lettergrootte flu\u00efde waarden voor de fontgrootte gebruikt.<\/p>\n
Nu, vanaf WordPress 6.1, kunnen thema’s automatisch flu\u00efde lettergroottes genereren<\/a> door de nieuwe eigenschap typography.fluid<\/code> als volgt te declareren:<\/p>\n
\"settings\": {\n\t....\n\t\"typography\": {\n\t\t\"fluid\": true,\n\t\t\"fontSizes\": [\n\t\t\t{\n\t\t\t\t\"size\": \"2rem\",\n\t\t\t\t\"fluid\": {\n\t\t\t\t\t\"min\": \"2rem\",\n\t\t\t\t\t\"max\": \"2.5rem\"\n\t\t\t\t},\n\t\t\t\t\"slug\": \"medium\",\n\t\t\t\t\"name\": \"Medium\"\n\t\t\t}\n\t\t]\n}<\/code><\/pre>\n
Met behulp van typography.fluid<\/code> en typography.fontSizes[].fluid<\/code> wordt de waarde van elke fontgrootte\u00a0automatisch berekend met de volgende formule<\/a>:<\/p>\n
--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});<\/code><\/pre>\n
Bijvoorbeeld:<\/p>\n
--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});<\/code><\/pre>\n
Let op dat op het moment van dit schrijven fluid typography een experimentele feature is. Je kunt in de technische details duiken in Block supports: add fluid typography<\/a>.<\/p>\n
\n
Fluid typography is a significant improvement for building modern #WordPress<\/a> websites. We just updated @frostwp<\/a> to include this feature. Here\u2019s a great read from @richard_tabor<\/a> into what it is and why it matters. https:\/\/t.co\/Bq5YuHX3wi<\/a><\/p>\n
— Brian Gardner (@bgardner) August 8, 2022<\/a><\/p><\/blockquote>\n