{"id":45567,"date":"2022-09-09T10:44:43","date_gmt":"2022-09-09T10:44:43","guid":{"rendered":"https:\/\/kinsta.com\/se\/?p=45567&preview=true&preview_id=45567"},"modified":"2023-09-21T12:26:50","modified_gmt":"2023-09-21T12:26:50","slug":"wordpress-6-1","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/wordpress-6-1\/","title":{"rendered":"Vad \u00e4r nytt i WordPress 6.1: Flytande Typografi, f\u00f6rb\u00e4ttrat mallsystem, nya h\u00e4lsokontroller p\u00e5 webbplatsen och mycket mer!"},"content":{"rendered":"

WordPress 6.1 ”Misha” sl\u00e4pptes den 1 november \u00e5r 2022<\/a>. \u00c5rets tredje stora utg\u00e5va f\u00f6ljer WordPress 6.0 Arturo<\/a>, som sl\u00e4pptes den 24 maj, och WordPress 5.9 Josephine<\/a>, som sl\u00e4pptes den 25 januari.<\/p>\n

Som alltid s\u00e5 erbjuder nya WordPress-versioner nya funktioner, f\u00f6rb\u00e4ttringar och buggfixar fr\u00e5n de senaste versionerna av Gutenberg-pluginet till k\u00e4rnan. Och WordPress 6.1 \u00e4r inget undantag. 11 versioner av Gutenberg-pluginet<\/a> har n\u00e4mligen slagits samman i k\u00e4rnan, fr\u00e5n 13.1 till 14.1.<\/p>\n

I det h\u00e4r inl\u00e4gget s\u00e5 kommer vi att ta en titt bakom gardinerna och presentera de nya sp\u00e4nnande funktionerna som inkluderas i den nya stora versionen av WordPress.<\/p>\n

Matias Ventura gav oss n\u00e5gra insikter i Roadmap to 6.1<\/a>, d\u00e4r han sa att m\u00e5let med 6.1 \u00e4r att f\u00f6rfina de upplevelser som introducerades i 5.9 och 6.0. M\u00e5let \u00e4r \u00e4ven att fixa n\u00e5gra problem n\u00e4r vi n\u00e4rmar oss fas 3 av Gutenberg.<\/p>\n\n

1. F\u00f6rb\u00e4ttringar av mallredigeraren<\/strong>: En av de viktigaste nya funktionerna \u00e4r mallredigeraren<\/a>. WordPress 6.1 ska introducera m\u00f6jligheten att bl\u00e4ddra, visualisera och redigera webbplatsens struktur.<\/p>\n

2. Mallm\u00f6nster<\/strong>: M\u00e5let \u00e4r att ge blockm\u00f6nster en central roll<\/a> i skapandet av mallar och sidor, anpassa dem till anpassade posttyper<\/a> och blocktyper, f\u00f6rb\u00e4ttra l\u00e5sfunktionen, f\u00f6rb\u00e4ttra hanteringen av sparade m\u00f6nster osv.<\/p>\n

3. Globala stilar, block och designverktyg<\/strong>: WordPress 6.1 kommer att m\u00f6jligg\u00f6ra hantering av webfonts, implementera responsiv typografi och ut\u00f6ka den verktygsl\u00e5da som \u00e4r tillg\u00e4nglig f\u00f6r block.<\/p>\n

Med detta sagt, l\u00e5t oss ta en n\u00e4rmare titt p\u00e5 n\u00e5gra av de mest kraftfulla funktionerna som kommer med WordPress 6.1:<\/p>\n

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

Flytande Typografi och mellanrum<\/h2>\n

WordPress 6.1 l\u00e4gger till st\u00f6d<\/a> f\u00f6r Flytande typografi<\/a> via calc<\/code><\/a>\/clamp<\/code><\/a> CSS-funktioner.<\/p>\n

Uttrycket Flytande typografi<\/a> beskriver textens f\u00f6rm\u00e5ga att anpassa sig till visningsf\u00f6nstrets bredd, genom att smidigt skala fr\u00e5n en minsta till en st\u00f6rsta bredd.<\/p>\n

Detta skiljer sig fr\u00e5n vad du kan uppn\u00e5 med mediaqueries, eftersom mediaqueries g\u00f6r det m\u00f6jligt f\u00f6r teman att \u00e4ndra storlek p\u00e5 text beroende p\u00e5 specifika visningsstorlekar, men g\u00f6r ingenting mellan olika v\u00e4rden.<\/p>\n

Vissa teman har redan st\u00f6d f\u00f6r flytande typografi. Twenty Twenty-Two<\/a> anv\u00e4nder exempelvis CSS-funktionen clamp()<\/code> f\u00f6r flera typsnittsstorlekar. exempelvis:<\/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
Som du kan se i koden ovan anv\u00e4nds v\u00e4rden f\u00f6r flytande typsnittsstorlek f\u00f6r varje enskild typsnittsstorlek.<\/p>\n
Fr\u00e5n och med WordPress 6.1 kan teman automatiskt generera flytande typsnittsstorlekar<\/a> genom att deklarera den nya egenskapen typography.fluid<\/code> p\u00e5 f\u00f6ljande s\u00e4tt:<\/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
Med hj\u00e4lp av typography.fluid<\/code> och typography.fontSizes[].fluid<\/code> ber\u00e4knas v\u00e4rdet f\u00f6r varje teckensnittsstorlek automatiskt med hj\u00e4lp av f\u00f6ljande formel<\/a>:<\/p>\n
--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});<\/code><\/pre>\n
exempelvis:<\/p>\n
--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});<\/code><\/pre>\n
Observera att Fluid Typography \u00e4r en experimentell funktion n\u00e4r detta skrivs. Du kan l\u00e4sa mer om de tekniska detaljerna i 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