WordPress 6.1 ”Misha” släpptes den 1 november år 2022. Årets tredje stora utgåva följer WordPress 6.0 Arturo, som släpptes den 24 maj, och WordPress 5.9 Josephine, som släpptes den 25 januari.
Som alltid så erbjuder nya WordPress-versioner nya funktioner, förbättringar och buggfixar från de senaste versionerna av Gutenberg-pluginet till kärnan. Och WordPress 6.1 är inget undantag. 11 versioner av Gutenberg-pluginet har nämligen slagits samman i kärnan, från 13.1 till 14.1.
I det här inlägget så kommer vi att ta en titt bakom gardinerna och presentera de nya spännande funktionerna som inkluderas i den nya stora versionen av WordPress.
Matias Ventura gav oss några insikter i Roadmap to 6.1, där han sa att målet med 6.1 är att förfina de upplevelser som introducerades i 5.9 och 6.0. Målet är även att fixa några problem när vi närmar oss fas 3 av Gutenberg.
1. Förbättringar av mallredigeraren: En av de viktigaste nya funktionerna är mallredigeraren. WordPress 6.1 ska introducera möjligheten att bläddra, visualisera och redigera webbplatsens struktur.
2. Mallmönster: Målet är att ge blockmönster en central roll i skapandet av mallar och sidor, anpassa dem till anpassade posttyper och blocktyper, förbättra låsfunktionen, förbättra hanteringen av sparade mönster osv.
3. Globala stilar, block och designverktyg: WordPress 6.1 kommer att möjliggöra hantering av webfonts, implementera responsiv typografi och utöka den verktygslåda som är tillgänglig för block.
Med detta sagt, låt oss ta en närmare titt på några av de mest kraftfulla funktionerna som kommer med WordPress 6.1:
Flytande Typografi och mellanrum
WordPress 6.1 lägger till stöd för Flytande typografi via calc/clamp CSS-funktioner.
Uttrycket Flytande typografi beskriver textens förmåga att anpassa sig till visningsfönstrets bredd, genom att smidigt skala från en minsta till en största bredd.
Detta skiljer sig från vad du kan uppnå med mediaqueries, eftersom mediaqueries gör det möjligt för teman att ändra storlek på text beroende på specifika visningsstorlekar, men gör ingenting mellan olika värden.
Vissa teman har redan stöd för flytande typografi. Twenty Twenty-Two använder exempelvis CSS-funktionen clamp() för flera typsnittsstorlekar. exempelvis:
"settings": {
...
"custom": {
"spacing": {
"small": "max(1.25rem, 5vw)",
"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
"large": "clamp(4rem, 10vw, 8rem)",
"outer": "var(--wp--custom--spacing--small, 1.25rem)"
},
"typography": {
"font-size": {
"huge": "clamp(2.25rem, 4vw, 2.75rem)",
"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
}
}
}
}Som du kan se i koden ovan används värden för flytande typsnittsstorlek för varje enskild typsnittsstorlek.
Från och med WordPress 6.1 kan teman automatiskt generera flytande typsnittsstorlekar genom att deklarera den nya egenskapen typography.fluid på följande sätt:
"settings": {
....
"typography": {
"fluid": true,
"fontSizes": [
{
"size": "2rem",
"fluid": {
"min": "2rem",
"max": "2.5rem"
},
"slug": "medium",
"name": "Medium"
}
]
}Med hjälp av typography.fluid och typography.fontSizes[].fluid beräknas värdet för varje teckensnittsstorlek automatiskt med hjälp av följande formel:
--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});exempelvis:
--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});Observera att Fluid Typography är en experimentell funktion när detta skrivs. Du kan läsa mer om de tekniska detaljerna i Block supports: add fluid typography.
Fluid typography is a significant improvement for building modern #WordPress websites. We just updated @frostwp to include this feature. Here’s a great read from @richard_tabor into what it is and why it matters. https://t.co/Bq5YuHX3wi
— Brian Gardner (@bgardner) August 8, 2022
Se även Så här lägger du till Flytande typografi till WordPress Block-teman av Rich Tabor och Flytande typografi med Gutenberg av Carolina Nymark.
I likhet med Flytande Typografi så introducerar WordPress 6.1 även stöd för Flytande Mellanrum.
Före WordPress 6.1 så var det bara möjligt att ställa in anpassade mellanrumsvärden i redigeraren, och temaförfattare fick inte ange fasta värden för utfyllnad, marginal och mellanrum. Så det var inte möjligt att överföra avståndsinställningar från ett tema till ett annat eller att behålla avståndsvärden när du kopierade och klistrade in innehåll mellan olika webbplatser.
Nu kan temautvecklare deklarera stöd för Flytande mellanrum genom att använda inställningarna spacing.spacingScale och spacing.spacingSizes[] (se även Theme.json: Lägg till förinställningar för mellanrumsstorlek och utöka theme.json för att tillhandahålla förinställningar för avståndsstorlek).
"settings": {
"spacing": {
"spacingScale":
{
"steps": 0
},
"spacingSizes": [
{
"size": "clamp(1.5rem, 5vw, 2rem)",
"slug": "30",
"name": "1"
},
{
"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
"slug": "40",
"name": "2"
},
{
"size": "clamp(2.5rem, 8vw, 6.5rem)",
"slug": "50",
"name": "3"
},
{
"size": "clamp(3.75rem, 10vw, 7rem)",
"slug": "60",
"name": "4"
},
{
"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
"slug": "70",
"name": "5"
},
{
"size": "clamp(7rem, 14vw, 11rem)",
"slug": "80",
"name": "6"
}
],
...
}
}Du hittar egenskaper för flytande typografi och flytande mellanrum dokumenterade i Global Settings & Styles-förinställningarna och i live-referensen till theme.json API V2.
Endast innehållsblockredigering
WordPress 6.1 introducerar redigering av endast innehåll för block, mönster och mallar. Med redigering av endast innehåll aktiverat så kan användare bara ändra innehållet i ett block eller mönster, vilket förhindrar att de av misstag bryter layouten eller ändrar stilarna.
För närvarande så är det inte möjligt att aktivera redigering av endast innehåll från gränssnittet i den visuella redigeraren. För att aktivera den här funktionen så bör templateLock-attributet ställas in på contentOnly och du kan använda kodredigeraren för detta.
Följande bild ger ett enkelt exempel.
När redigering av endast innehåll är aktiverat på ett block eller mönster så ändras sidofältet för inställningarna. Du kommer inte att se de vanliga inställningskontrollerna utan en lista över block som ingår i gruppen. Du kan välja vilket som helst av dessa block genom att klicka på blocket i redigerarens arbetsyta eller på motsvarande listobjekt i sidofältet.
Du kan inaktivera redigering av endast innehåll genom att klicka på knappen Ändra i gruppverktygsfältet.
När du är klar med dina redigeringar så kan du återaktivera redigering av endast innehåll genom att klicka på knappen Klar.
Block som inte har något innehåll är dessutom dolda från listvyn och kan inte få fokus i blocklistan.
Du kan läsa mer om redigering av endast innehåll i dev notes och i det här blogginlägget av Rich Tabor.
Förbättrade blocktyper
Med så många sammanslagna Gutenberg-versioner i kärnan kommer WordPress 6.1 att erbjuda massor av förändringar och förbättringar av befintliga blocktyper.
Tillagt stöd för ramar för blocket Columns (kolumner)
Blocket Columns utnyttjar nu den nya komponenten BorderBoxControl som gör det möjligt för WordPress-användare att ange anpassade gränser för kolumner och även ställa in helt olika stilar för varje gräns (se även Kolumner: Lägg till gränsstöd till kolumnblock pull request).
Enskilda gränser kan även ställas in i filen theme.json enligt följande:
"core/column": {
"border": {
"top": {
"color": "#CA2315",
"style": "dashed",
"width": "6px"
},
"right": {
"color": "#FCB900",
"style": "solid",
"width": "6px"
}
}
}Utvecklare kan läsa mer om den nya kontrollen i Komponent Referens – BorderBoxControl.
Gränskontroller för bildblock
I Gutenberg 13.8 infördes stöd för alla gränskontroller för bildblocket. Ändringen kommer att läggas till i kärnan med WordPress 6.1, vilket öppnar dörren för nya och stora möjligheter för webbkreatörer.
Förbättringar av kommentarsblocket
WordPress 6.1 ger oss även ett förbättrat kommentarsblock. Från och med nästa version av WordPress kommer användarna att kunna använda mer avancerade redigeringsfunktioner i Kommentarsblocket.
I bilden nedan kan du se inställningssidofältet för Kommentarsblocksinställningar och de ändringar som tillämpas på Kommentarsrubriker.
Variationer av blocket för inläggstermer för anpassade taxonomitermer
Blocket Inläggstermer har förbättrats med en ny anpassad taxonomivariant. Du kan nu registrera en ny anpassad taxonomi, exempelvis inläggstypen ”Skådespelare i en film”, så kommer du att kunna lägga till en lista med taxonomitermer till det aktuella inlägget eller den anpassade inläggstypen.
Bilden nedan visar en lista över skådespelare i inläggstypen Film.
![Anpassning av utseendet på ett inläggsblock med anpassade taxonomitermer[/image]](https://kinsta.com/wp-content/uploads/2022/08/post-term-block.jpg)
Ett nytt föräldrafilter för blocket Sökfråga
Ett nytt filter för föräldrar finns nu tillgängligt för sökfrågeblocket för att visa hierarkiska inlägg och sidor som har samma föräldrar.
Kontroller för typsnittsfamiljer i rubrikblocket
Blocket Rubriker har nu stöd för kontroller för typsnittsfamiljer.
Horisontellt och vertikalt avstånd i galleriblocket
Från och med WordPress 6.1 kan du med hjälp av en ny kontroll för axiellt avstånd ställa in olika horisontella och vertikala avstånd för bilder i blocket Galleri.
Den här ändringen ger större flexibilitet när du skapar layouten för bildgallerier.
Bilder i omslagsblocket
Utvalda Bilder får fortfarande mycket uppmärksamhet, och i WordPress 6.1 utökas användningsområdet ytterligare. Från och med 6.1 kan den utvalda bilden väljas direkt från platshållaren Omslagsblock, vilket visas i följande bilder.
Den här ändringen bör bidra till att skapa en mer konsekvent användarupplevelse och göra det tydligare för användaren vad de anpassar.
Dessutom har en växel för Utvald Bild lagts till i flödet för mediaersättningar.
Verktyg för navigationslänkar för inlägg
Med inställningsegenskapen appearanceTools kan du välja flera inställningar som är inaktiverade som standard.
Efter WordPress 6.1, för teman som stöder inställningsegenskapen appearanceTools, kan du anpassa länkfärg och typsnittsfamilj i Inläggsnavigeringslänken.
Du kan läsa mer om egenskapen
appearanceTools i vår introduktion till Twenty Twenty-Two-temat.Lås inuti containerblocket med ett klick
En ny växel gör det nu möjligt för användare att låsa block i en container med block med ett enda klick. Detta gäller för grupp-, omslags- och kolumnblock.
Förbättrat listblock
Listblocket har förbättrats och utnyttjar nu inre block.
Denna förändring gör det lättare att sortera och dra in listobjekt och leder definitivt till en förbättrad användarupplevelse.
Stöd för pseudoelement i blockteman
Nu kan blockteman anpassa utseendet på element och block beroende på deras tillstånd (aktiv/fokus/hovra).
Det här är ett exempel på hur man använder pseudo-väljare med länkar, enligt definitionen i Twenty Twenty-Threes theme.json:
"styles": {
...
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--contrast)"
},
":hover": {
"typography": {
"textDecoration": "none"
}
},
":focus": {
"typography": {
"textDecoration": "underline dashed"
}
},
":active": {
"color": {
"text": "var(--wp--preset--color--secondary)"
},
"typography": {
"textDecoration": "none"
}
},
"typography": {
"textDecoration": "underline"
}
}
}
}Följande kodknappstilar:
"styles": {
...
"elements": {
"button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--contrast)"
},
":hover": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--base)"
}
}
}
}
}Du kan se resultatet på följande bilder.
Men du kan även styla element på blocknivå. Den enda skillnaden är att du måste definiera stilar inom ett block. Som ett exempel så tillämpar följande kod från Twenty Twenty-Three’s theme.json stilar på länkar i huvudnavigeringsblocket:
"styles": {
"blocks": {
"core/navigation": {
"elements": {
"link": {
":hover": {
"typography": {
"textDecoration": "underline"
}
},
":focus": {
"typography": {
"textDecoration": "underline dashed"
}
},
":active": {
"typography": {
"textDecoration": "none"
}
},
"typography": {
"textDecoration": "none"
}
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}
}
}
}Ytterligare funktioner och förbättringar av blockredigeraren
Även om det är en konsolideringsversion så kommer WordPress 6.1 att erbjuda så många förändringar och förbättringar att det skulle vara omöjligt att lista dem alla i en artikel (men kolla in den här artikeln från Anne McCarty för en omfattande lista över designverktyg per block).
Här kommer vi att djupdyka i följande ändringar:
Variationer av malldelar i blockinfogaren
Variationer av malldelar finns nu tillgängliga i blockinfogaren, vilket gör det enklare att lägga till malldelar på din webbplats.
Den här ändringen gör redigeringsprocessen mer okomplicerad och snabbare, så att användarna snabbt kan visa variationer av en malldel på en gång med endast några få klick.
Visualisering av marginal och utfyllnad
En liten men användbar förbättring är markeringen av marginaler och utfyllnad medan användaren justerar dem. Detta bör göra det mycket tydligare hur mycket utrymme som läggs till innanför eller utanför elementen.
Förbättringar av sidofältet för inställningar
WordPress 6.1 kommer också att visa upp flera förbättringar av gränssnittet i sidofältet för Inställningar.
Sidofältet för inställningar för inlägg har fått en aningen ny utformning. Nu är fälten för inläggsformat, slug, mall och författare justerade och har samma bredd. Schemaläggaren för inlägg har dessutom förenklats för att göra upplevelsen mer begriplig. Mallsektionen har även flyttats till en popover för att spara utrymme och rensa upp gränssnittet.
Mallpanelen har dessutom ersatts av en malllänk. När du klickar på malllänken visas Standardmallen i en popover.
Publicera uppdateringar av popoverdesignen
Datumvalet i popover för Publicera har fått en ny design och använder nu ”befintliga WordPress-komponenter och Emotion-styling”
Fler tekniska insikter finns i Designuppdateringar av popover-fönstret Publicera (DateTimePicker).
Tid för läsning i informationspanelen
Informationspanelen som finns i det övre verktygsfältet har förbättrats och visar nu Tid för läsning utöver Ord, Tecken, Rubriker, Stycken och Block.
Den uppskattade lästiden beräknas på ett genomsnitt av 189 ord per minut. Läs mer i @wordpress/redigeraren: Lägg till uppskattad tid för läsning i innehållsförteckningen i redigeraren: Lägg till uppskattad tid för läsning i innehållsförteckningen i redigeraren.
Blockavståndskontroll har lagts till i Styles UI
Nu kan användare justera vertikalt och horisontellt avstånd från Styles UI för block som stöder den här funktionen.
Nya och förbättrade byggverktyg
WordPress 6.1 kommer även att utöka funktionaliteten hos Webbplatsbyggaren. Blockmönster kommer att vara tillgängliga på fler ställen och ett större urval av malltyper kommer att förbättra redigeringsupplevelsen i mallredigeraren.
Skapandemönster för inläggstyper
WordPress 6.0 introducerade Sidskapandemönster, som är ett sätt att tillhandahålla ett urval av mönster varje gång som en användare skapar en ny sida. På så sätt behöver du inte bygga sidan från grunden utan kan välja ett mönster från en modal och fylla i innehållet, så är du redo att köra igång.
För att aktivera den här funktionen bör minst ett blockmönster ha stöd för blocktyperna core/post-content.
Nu, med start i WordPress 6.1, utökas den här funktionen till alla inläggstyper. Allt som du behöver göra är att inkludera core/post-content i ditt mönsters blockTypes och ställa in relevant postTypes.
Låt oss nu ta reda på hur du kan dra nytta av denna nya funktion med ett praktiskt exempel. Anta att du har en inläggstyp som heter Filmer.
Du måste först registrera ett blockmönster som diskuteras här.
Du kan även gå den enkla vägen och använda den implicita mönsterregistreringen (för enkelhetens skull använder det här exemplet implicit mönsterregistrering).
Skapa en PHP-fil för ditt blockmönster i en /patterns-katalog i mappen för ditt tema (i det här exemplet använde vi Twenty Twenty-Two). Lägg sedan till följande rubrik:
<?php
/**
* Title: Pattern with columns
* Slug: twentytwentytwo/pattern-with-columns
* Block Types: core/post-content
* Post Types: movie
* Categories: text
*/
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- wp:heading -->Sen är det klart. Nu visas en modal Välj ett mönster på skärmen varje gång som du skapar en ny Film-inläggstyp.
Om du vill att modalen ska visas på flera olika typer av inlägg, lägger du bara till motsvarande slugs separerade med kommatecken:
<?php
/**
* Title: Pattern with columns
* Slug: twentytwentytwo/pattern-with-columns
* Block Types: core/post-content
* Post Types: movie, book
* Categories: text
*/
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- wp:heading -->För en närmare beskrivning av skapelsemönster, se Möjlighet att använda skapelsemönster för andra inläggstyper än sidan.
Fler malltyper i webbplatsredigeraren
Med WordPress 6.0 kan endast ett begränsat antal mallar skapas i webbplatsredigeraren:
Från och med WordPress 6.1 kommer det att vara möjligt att skapa olika mallar för varje enskild inläggstyp.
Och du kan även lägga till och redigera mallar för kärn- och anpassade taxonomier, även för enskilda kategorier eller taggar.
Om du registrerar anpassade inläggstyper eller en anpassad taxonomi kommer de automatiskt att listas i mallvalslådan i webbplatsredigeraren.
Men det är inte allt. När du väl har valt mallinläggstyp frågar en modal användaren om han eller hon vill skapa en mall för alla inlägg av den typen eller skapa en ny mall för ett specifikt inlägg av den valda inläggstypen.
Därefter ger en ny modal en lista över de inlägg som är tillgängliga för den inläggstypen.
Twenty Twenty-Three och andra temaförbättringar
WordPress 6.1 levererar även ett helt nytt standardtema: Twenty Twenty-Three. Det är ett minimalistiskt tema utan bilder eller extra funktionalitet.
Det nya standardtemat samlar alla de senaste redigeringsfunktionerna för webbplatsen på ett ställe och är en perfekt sandlåda för att testa mallar och malldelar, stilvariationer, flytande typografi och avstånd, och alla funktioner som introduceras med de senaste versionerna av WordPress.
Och tack vare detta så är det även ett bra verktyg för att lära sig att utveckla teman, mallar och blockmönster med fungerande exempel.
Du kan djupdyka i det nya WordPress-standardtemat i vår djupgående översikt.
Förutom det nya standardtemat introducerar WordPress 6.1 även flera temaförbättringar.
Uppdatera URI-huvud i teman
Om ett tema hade samma namn som ett tema som var tillgängligt i WordPress-temankatalogen innan WordPress 6.1, visades ett uppdateringsmeddelande om denna tillgänglighet för användaren.
Från och med WordPress 6.1 så förhindrar ett nytt Uppdatera URI-sidhuvud att man skriver över temafiler från tredje part av misstag. Den här funktionen är särskilt användbar om du har ett egenutvecklat tema med samma namn som ett tema i WordPress Temakatalog men inte vill dela det med communityn.
Om värdet på rubrikfältet Update URI-tema inte matchar https://wordpress.org/themes/{$slug}/ eller w.org/theme/{$slug}, så kommer WordPress inte att försöka uppdatera det .
Om det har ställts in rätt så ska Update URI vara en URI med unikt host-namn, exempelvis https://wordpress.org/themes/my-theme/ eller https://example.com/my-theme/.
Temautvecklare kommer att hitta en mer djupgående översikt över det nya sidhuvudet för Update URI-teman i den officiella dev notes.
Filtrera blockteman under skärmen ”Lägg till teman”.
En ny genväg gör det nu möjligt att filtrera blockteman när du lägger till ett nytt tema till din WordPress-installation.
Dessutom har en ny hjälpflik för blockteman lagts till på samma skärm.
Ändringar för utvecklare
WordPress 6.1 lägger även till ett nytt API och många funktioner och ändringar för utvecklare.
Nytt API för persistens av inställningar
WordPress 6.1 introducerar ett helt nytt API för beständighet av preferenser som sparar redigeringspreferenser i WordPress-databasen i stället för i lokal lagring.
På så sätt kan användarpreferenser lagras i alla webbläsare och enheter.
För detta ändamål har det tidigare persistanssystemet i paketet @wordpress/data avvecklats och ett nytt paket preferences-persistence har införts. Det nya paketet sparar data till användarmeta via Rest API. Uppgifterna sparas även i den lokala lagringen som en reservlösning om användaren går offline eller om en begäran avbryts (se även pull #39795).
Stöd för knappstilar i theme.json
Med WordPress 6.1 kan du lägga till knappstilar i dina teman med hjälp av theme.json. Detta gör det möjligt för temautvecklare att lägga till konsistens för knappar i olika block. Ett exempel är sökblocket, men även block från tredje part kommer att gynnas av den här ändringen.
För att göra detta möjligt kommer en ny wp-element-button -klass att läggas till i knappelement för att dela samma stil.
Du kan testa den här ändringen genom att lägga till följande kod i din theme.json i en utvecklingsmiljö:
{
"styles": {
"elements": {
"button": {
"color": {
"background": "blue"
}
}
}
}
}Variationer av sökblock har nu stöd för Sökfrågevariabler
WordPress 6.1 kommer att ha stöd för blocksvariabler baserat på sökfrågor. Detta innebär att du kan ge dina användare sökrutor som kan användas för att söka detaljerat i alla typer av innehåll.
I följande exempel registrerar vi en blockvariabel för inläggstypen movies. Exemplet är baserat på Carolina Nymars handledning om blockvariabler.
Lägg till följande kod i ditt (underordnade) temas funktionsfil:
function movies_editor_assets() {
wp_enqueue_script(
'movies-block-variations',
get_template_directory_uri() . '/assets/block-variations.js',
array( 'wp-blocks' )
);
}
add_action( 'enqueue_block_editor_assets', 'movies_editor_assets' );Skapa nu följande fil block-variations.js i mappen assets i ditt (underordnade)tema:
wp.blocks.registerBlockVariation(
'core/search',
{
name: 'movie-search',
title: 'Movie Search Block',
attributes: {
query: {
post_type: 'movies'
}
}
}
);Ladda nu om din WordPress-instrumentpanel och sök efter movie-sökfrågevariabeln i blockinlägget.
Du kan läsa mer om blockvariabler i den officiella dokumentationen.
Ett nytt knappelement i globala stilar
WordPress 5.9 introducerade ett gränssnitt för globala stilar som gör det möjligt för användare att anpassa stilförinställningar för sina webbplatser, antingen globalt eller på blocknivå.
Med den första implementeringen kunde du anpassa färgerna för bakgrund, text och länkar. Nu, med start i WordPress 6.1, har ett nytt element Knappar lagts till i panelen Färger för att användare ska kunna styra utseendet på knappar på hela webbplatsen.
Detta kan påverka knappstilen i allt på webbplatsen, från blocket Knappar till blocket Sök och block från tredje part som använder knappar.
Utseendeverktyg finns tillgängliga för alla teman
Innan WordPress 6.1 så var Utseendeverktyg endast tillgängliga i blockteman. Från och med 6.1 så kan vilket tema som helst inkludera den här funktionen genom att helt enkelt lägga till stöd i funktionsfilen:
add_theme_support( 'appearance-tools' );Detta skulle aktivera alla följande inställningar på en gång:
- border: color, radius, style, width
- color: link
- spacing: blockGap, margin, padding
- typography: lineHeight
En ny is_login_screen()-funktion
En ny is_login_screen()-funktion låter dig nu avgöra om den aktuella sidan är inloggningsskärmen. Även anpassade inloggningsplatser stöds.
Du kan använda den nya villkorliga taggen enligt följande:
function add_text_to_login() {
if ( is_login_screen() ) {
echo( "<h1>Welcome to Kinsta!</h1>" );
}
}
add_action( 'init', 'add_text_to_login' );Resultatet på skärmen skulle bli följande:
Nya webbplatshälsokontroller för beständig objektcache och helsidescache
WordPress 6.1 introducerar två Webbplatshälsokontroller för Beständig Object Cache och Sido Cache. Båda kontrollerna körs endast i produktionsmiljöer.
Du kan se resultaten av dessa nya tester under fliken Status på skärmen Webbplatshälsa.
Beständig Object Cache-testet avgör om webbplatsen använder en beständig objektcache och, om inte, så rekommenderar vi att du använder den om det är meningsfullt för webbplatsen.
Utöver det nya testet så introducerar WordPress 6.1 flera nya filter som hosting-leverantörer kan använda i sina respektive miljöer.
Med site_status_persistent_object_cache_url kan hostar ersätta standardlänken Läs mer om beständig objektcache med en anpassad länk. exempelvis:
add_filter( 'site_status_persistent_object_cache_url', function() {
return 'https://example.com/persistent-object-cache';
} );Med site_status_persistent_object_cache_notes kan hostar ersätta standardanteckningarna för att rekommendera sin föredragna objektcachelösning. Här är ett exempel på användning:
add_filter( 'site_status_persistent_object_cache_notes', function( $notes ) {
$notes = __( 'Custom notes.', 'text-domain' );
return $notes;
} );site_status_persistent_object_cache_thresholds filtrerar tröskelvärdena som används för att avgöra om man ska föreslå användning av en beständig objektcache. Standardvärdena är:
$thresholds = apply_filters(
'site_status_persistent_object_cache_thresholds',
array(
'alloptions_count' => 500,
'alloptions_bytes' => 100000,
'comments_count' => 1000,
'options_count' => 1000,
'posts_count' => 1000,
'terms_count' => 1000,
'users_count' => 1000,
)
);Du kan använda filtret enligt följande:
add_filter( 'site_status_persistent_object_cache_thresholds', function( $thresholds ) {
$thresholds = array(
'alloptions_count' => 700,
'alloptions_bytes' => 150000,
'comments_count' => 1500,
'options_count' => 1500,
'posts_count' => 2000,
'terms_count' => 1000,
'users_count' => 2000,
);
return $thresholds;
} );site_status_should_suggest_persistent_object_cache är ett kortslutningsfilter som filtrerar om man ska föreslå användning av en beständig objektcache och kringgå standardtröskelkontroller. Du kan använda den enligt följande beskrivning:
add_filter( 'site_status_should_suggest_persistent_object_cache', '__return_true' );Helsidescache-testet kontrollerar om webbplatsen använder helsidescache och om svarstiden är OK:
Två nya filter gör det även möjligt för hostar att anpassa svarströskeln och lägga till anpassade cachehuvuden för detektering.
site_status_good_response_time_threshold filtrerar tröskeln under vilken en svarstid anses vara bra. Standardvärdet är 600 ms (se även Långsamma serversvarstider påverkar prestanda).
site_status_page_cache_supported_cache_headers gör det möjligt för hosting-leverantörer att lägga till anpassade cachehuvuden och motsvarande verifieringsåteranrop. Dev nots ger följande exempel på användning:
add_filter( 'site_status_page_cache_supported_cache_headers', function( $cache_headers ) {
// Add new header to the existing list.
$cache_headers['cf-cache-status'] = static function ( $header_value ) {
return false !== strpos( strtolower( $header_value ), 'hit' );
};
return $cache_headers;
});Utvecklare kan djupdyka i de nya Webbplatshälsokontrollerna i:
- Förslag: Persistent Object Cache och Full Page Cache Site Health Checks
- Ny cache-webbplatshälsa i WordPress 6.1
- Port Granska Hel Sides Cache från prestandaplugin till kärna
- class-wp-site-health.php
Skapa-block Uppdateringar av ställningsverktyg
WordPress 6.1 introducerar även nya funktioner och uppdateringar av @wordpress/create-block-paketet som finns tillgängligt för utvecklare som vill bygga nya block.
En blockställning är den stödjande katalogstrukturen som gör att WordPress kan känna igen ett block.
Ett par nya funktioner och flera förbättringar introduceras i och med WordPress 6.1.
En ny –variantflagga gör att blockutvecklare kan välja en blockvariant som nyttjar byggnadsställningar. De interna mallarna som tillhandahålls av verktyget create-block stödjer dynamic och static varianter, vilket innebär att du kan nyttja byggnadsställningar för ett dynamiskt respektive statiskt block. Standarden är static.
Du kan använda den nya flaggan enligt följande:
npx @wordpress/create-block my-first-block -variant=dynamicUtvecklare kan definiera anpassade variants genom att lägga till ett variantobjekt till malldefinitionen.
En ytterligare funktion gör det nu möjligt för blockutvecklare att lägga till nya block till ett befintligt plugin tack vare --no-plugin-flaggan.
npx @wordpress/create-block custom-block --no-pluginGenom att köra kommandot ovan så skapas en ny uppsättning av blockfiler i en underkatalog till den aktuella katalogen.
Observera att skriptet inte är medvetet om sin plats:
Att anropa
npx @wordpress/create-block block-name --no-pluginkommer att skapa ett nytt block ifolderNamedirectorydär det heter
Du kan läsa mer om uppdateringar av verktyg för skapa-block-ställningar.
Cachelagra sökfrågeresultat i WP_Query
WordPress 6.1 ändrar hur databasfrågor exekveras i klassen WP_Query. Från och med 6.1 så kommer sökfrågor att cachelagras med resultatet att om en fråga exekveras mer än en gång, å kommer resultaten att laddas från cachen.
Både webbplatser som använder permanent objektcache och webbplatser som använder cachelagring i minnet kommer att dra nytta av denna förändring, även om fördelarna för den senare kommer att vara mindre.
Som standard så kommer alla anrop till WP_Query att cachelagras, men utvecklare kan välja bort cachefrågor med parametern cache_results:
$args = array(
'posts_per_page' => 20,
'cache_results' => false
);
$query = new WP_Query( $args );Du kan även inaktivera sökfråge-cachelagring globalt med disable_caching-kroken, även om detta inte rekommenderas.
Det är värt att notera att vissa frågeparametrar inte beaktas för frågecache. Den vanligaste av dessa parametrar är parametern fields. Anledningen är att hänsynstagande till fields skulle ha producerat flera cachelagringar för flera delmängder av samma data, vilket leder till prestandaförsämring.
För en djupare översikt över WP_Query-cachelagring, se Förbättringar av WP_Query-prestanda i 6.1 dev notes.
Malldelar i klassiska teman
Från och med WordPress 6.1 så stöder klassiska teman blockbaserade malldelar. För att lägga till den här funktionen så måste teman lägga till stöd för block-template-parts som visas nedan:
function add_block_template_part_support() {
add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'add_block_template_part_support' );Klassiska teman kan inkludera malldelar i PHP-mallar med funktionen block_template_part. Du kan läsa mer om den här funktionen i Blockbaserade ”malldelar” i dev note om traditionella teman.
En anteckning om JPEG till WebP-bildkonvertering
Till en början så verkade det som att WordPress 6.1 även skulle ha introducerat stöd för automatisk JPEG till WebP-bildkonvertering.
Men många bidragsgivare rapporterade om flera problem. Specifikt noterades att:
Resurser för att skapa bilder när du laddar upp en bild kommer att öka dramatiskt, men resurserna för att visa en bild kommer att minska. Eftersom uppladdning av bilder är mycket sällsynt jämfört med bildvisning borde den extra ansträngningen att komprimera och lagra bilder vara värt detta.
Och:
Den dramatiska ökningen av resursanvändningen när du laddar upp en bild är faktiskt en mycket dålig bieffekt här. Det betyder att många uppladdningar kommer att misslyckas och lämnar användarna strandsatta. Det kommer även att öka supportförfrågningarna för både WordPress och hosting-företagen dramatiskt. Jag tycker inte att detta är acceptabelt. På grund av detta, även om stöd för bildmultimime behövs i WordPress, så verkar det nuvarande tillvägagångssättet inte vara en bra lösning.
Slutligen, efter ett inlägg av Matt Mullenweg på WordPress.org, så har automatiskt konvertering av JPEG till WEBP tagits bort från WordPress 6.1.
Jag är intresserad av att stödja nya format och att förbättra prestanda, men jag tror att den här förändringen som standardmässigt skickas till användare när de uppgraderar till 6.1 är mycket för just nu. Detta inkluderar några av de klumpiga interaktioner som operativsystem fortfarande har kring webp (och HEIC! )-filer.
Jag är glad över att stödet för att arbeta med webp- och HEIC-filer ska stanna i kärnan, eftersom vi borde vara liberala i vad vi accepterar och arbetar med, men inte med förändringen att konvertera allt till webp när JPEG-filer laddas upp.
Det här är ett utmärkt område för ett kanoniskt plugin, ett koncept som jag tycker att varje skapande team borde utforska mycket mer som en plats för att experimentera och pröva funktionalitet…
Hur som helst, WordPress-användare och utvecklare kan testa automatisk JPEG-till WebP-bildkonvertering genom att installera plugin-programmet Performance Lab från WordPress Performance Group.
Ytterligare ändringar för utvecklare
Utöver de funktioner och förbättringar som vi diskuterade ovan, så introducerar WordPress 6.1 flera ytterligare ändringar för utvecklare. Du kanske vill gräva djupare i dessa ändringar i dev notes:
- Förbättrad PHP-prestanda för registrering av kärnblock
- Reservbeteende för Navigationsblock i WP 6.1
- Förinställningar för avståndsstorlek i theme.json
- Escape tabell- och fältnamn med wpdb::prepare() i WordPress 6.1
- WP_List_Table::get_views_links() i WordPress 6.1
- Funktioner och krokar för obligatoriska fält i WordPress 6.1
- Flytt av åtgärden send_headers till senare i laddningen
- Prestandaförbättringar av REST API
- Redigera Komponent-uppdateringar i WordPress 6.1
- Multisides-förbättringar i WordPress 6.1
- Övriga Kärnändringar för WordPress 6.1
- Prestandafältguide för WordPress 6.1
- Diverse REST API-förbättringar i WordPress 6.1
- Block API-ändringar i WordPress 6.1
- Diverse redigeringsändringar för WordPress 6.1
- Uppdaterat stöd för redigeringslayout i 6.1 efter refactor
- Ändringar av blockredigeringsinställningar i WordPress 6.1
- Generering av blockstilar (stilmotor)
- Referensstilar för värden i theme.json
Sammanfattning
Med WordPress 6.1 så ser vi konsolideringen av webbplatsredigeringsmöjligheterna i WordPress. Vi är fortfarande i fas två av Gutenbergs långsiktiga färdplan, men de verktyg och funktioner som finns tillgängliga för oss blir allt mer pålitliga och robusta med tiden. WordPress 6.1 erbjuder Flytande Typografi, nya verktyg för webbplatsbyggnad och massor av förbättringar av befintliga block.
Men inte bara det. WordPress 6.1 erbjuder även betydande förbättringar i CMS-prestanda. Två nya Webbplatshälsokontroller upptäcker användningen av Hel Sides Cache och Beständig Object Cache, sökfrågecache förbättrar WP_Query-prestandan och det finns även förbättringar av PHP-prestanda för kärnblockregistrering.
Kort sagt så är 6.1 en version som WordPress-användare och designers kommer att älska, såväl som alla utvecklare som kommer att dra nytta av många förbättringar inom flera områden av CMS.
Nu är det upp till dig. Vad gillar du mest i WordPress 6.1? Har du redan testat en ny version i din utvecklingsmiljö? Dela dina tankar om WordPress 6.1 med oss i kommentarsfältet nedan.
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.
Lämna ett svar