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.

Vill du ta en titt bakom gardinen på vad som är nytt i WordPress 6.1? ✨ Fortsätt att läsa... 👀Klicka för att tweeta

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.

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.

Nyhet från pressarna... det här är allt som du kan förvänta dig att se i WordPress 6.1 (kommer i november 2022! 🗓), nya och förbättrade blocktyper, flytande typografi och mycket mer! 🎉Klicka för att tweeta

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.

Ställ in mall-lås till contentOnly i kodredigeraren
Ställ in mall-lås till contentOnly i kodredigeraren

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.

Endast innehållsredigering
Endast innehållsredigering

Du kan inaktivera redigering av endast innehåll genom att klicka på knappen Ändra i gruppverktygsfältet.

Inaktiverar redigering av endast innehåll
Inaktiverar redigering av endast innehåll

När du är klar med dina redigeringar så kan du återaktivera redigering av endast innehåll genom att klicka på knappen Klar.

Endast innehållsredigering är inaktiverat
Endast innehållsredigering är inaktiverat

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).

Anpassning av kolumngränser i WordPress 6.1
Anpassning av kolumngränser i WordPress 6.1

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.

Kontroller för bildgränser i WordPress 6.1
Kontroller för bildgränser i WordPress 6.1

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.

WordPress 6.1 ger ett förbättrat Kommentarsblock
WordPress 6.1 ger ett förbättrat Kommentarsblock

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.

Anpassade taxonomitermer för blocket inläggstermer
Anpassade taxonomitermer för blocket inläggstermer

Bilden nedan visar en lista över skådespelare i inläggstypen Film.

Anpassning av utseendet på ett inläggsblock med anpassade taxonomitermer[/image]
Anpassning av utseendet på ett inläggsblock med anpassade taxonomitermer

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.

Ett nytt föräldrafilter gör det möjligt att visa inlägg som har samma föräldrar i ett block för sökfrågor
Ett nytt föräldrafilter gör det möjligt att visa inlägg som har samma föräldrar i ett block för sökfrågor

Kontroller för typsnittsfamiljer i rubrikblocket

Blocket Rubriker har nu stöd för kontroller för typsnittsfamiljer.

Ställer in en egen typsnittsfamilj i ett rubrikblock
Ställer in en egen typsnittsfamilj i ett rubrikblock

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.

Anpassning av horisontella och vertikala mellanrum i ett galleriblock
Anpassning av horisontella och vertikala mellanrum i ett galleriblock

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.

Använd en utvald bild i platshållaren för Omslagsblock
Använd en utvald bild i platshållaren för Omslagsblock

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.

Customizing link color in Post Navigation Links
Anpassning av länkfärg 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.

Lås inuti gruppblock
Lås inuti gruppblock

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.

Sortera listobjekt
Sortera listobjekt
Listobjekt med indrag och utdrag
Listobjekt med indrag och utdrag

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.

En knapps hovrings-tillstånd i WordPress 6.1 med Twenty Twenty-Three-temat
En knapps hovrings-tillstånd i WordPress 6.1 med Twenty Twenty-Three-temat
En knapps aktiva tillstånd i WordPress 6.1 med Twenty Twenty-Three-temat
En knapps aktiva tillstånd i WordPress 6.1 med Twenty Twenty-Three-temat

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.

Rubrik-malldelsvariationer i WordPress 6.1
Rubrik-malldelsvariationer i WordPress 6.1

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.

Marginal och utfyllnad markeras
Marginal och utfyllnad markeras

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.

WordPress 6.1 kommer att visa upp ett förenklat inställningssidofält
WordPress 6.1 kommer att visa upp ett förenklat inställningssidofält

Mallpanelen har dessutom ersatts av en malllänk. När du klickar på malllänken visas Standardmallen i en popover.

Popover för mallar i WordPress 6.1
Popover för mallar i WordPress 6.1
Flytande typografi, förbättrade blocktyper och mycket mer! WordPress 6.1 har många spännande uppdateringar i lager! 🎉 Lär dig mer i den här guiden 🚀Klicka för att tweeta

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”

WordPress 6.1 visar upp en omarbetad datumtidsplockare
WordPress 6.1 visar upp en omarbetad datumtidsplockare

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.

Info-panelen visar nu Tid för läsning
Info-panelen visar nu Tid för läsning

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.

Blockavståndskontroller för blocket Sociala ikoner
Blockavståndskontroller för blocket Sociala ikoner

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.

En modal visas på skärmen när användaren skapar en ny inläggstyp
En modal visas på skärmen när användaren skapar en ny 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:

Lägg till ny mall i WordPress 6.0
Lägg till ny mall i WordPress 6.0

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.

En lista över malltyper som är tillgängliga i WordPress 6.1
En lista över malltyper som är tillgängliga i WordPress 6.1

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.

Lägga till en mall för en anpassad inläggstyp i WordPress 6.1
Lägga till en mall för en anpassad inläggstyp i WordPress 6.1

Därefter ger en ny modal en lista över de inlägg som är tillgängliga för den inläggstypen.

Lägga till en ny mall i WordPress 6.1
Lägga till en ny mall i WordPress 6.1

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.

Twenty Twenty-Three’s filstruktur
Twenty Twenty-Three’s filstruktur

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.

Twenty Twenty-Three Stilvariationer
Twenty Twenty-Three Stilvariationer

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.

Blockteman och hjälpfliken på installationsskärmen för teman
Blockteman och hjälpfliken på installationsskärmen för teman

Ä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).

Kämpar du med driftstopp och WordPress-problem? Kinsta är hosting-lösningen som är utformad för att spara tid! Kolla in våra funktioner

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.

En anpassad variant av sökblock i blockinsatsen
En anpassad variant av sökblock i blockinsatsen

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.

Anpassning av knappar i inställningar för globala stilar
Anpassning av knappar i inställningar för globala stilar

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:

is_login_screen() kontrollerar om den aktuella sidan är inloggningsskärmen
is_login_screen() kontrollerar om den aktuella sidan är inloggningsskärmen

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.

Beständig Object Cache-testresultat i Site Health
Beständig Object Cache-testresultat i Site Health

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:

Helsidescache-testresultat i Webbplatshälsa
Helsidescache-testresultat i Webbplatshälsa

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:

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=dynamic

Utvecklare 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-plugin

Genom 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-plugin kommer att skapa ett nytt block i folderNamedirectory dä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.

Få koll på vad som inkluderas i WordPress 6.1 i den här guiden - och förbered dig för ändringar som flytande typografi, nya webbplatshälsokontroller och mer! 🚀Klicka för att tweeta

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:

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.


Spara tid, kostnad och maximera webbplatsens prestanda med:

  • Omedelbar hjälp från WordPress -hostingexperter, 24/7.
  • Cloudflare Enterprise-integration.
  • Global publik räckvidd med 35 datacenter över hela världen.
  • Optimering med vår inbyggda Application Performance Monitoring.

Allt detta och mer, i en plan utan långsiktiga kontrakt, assisterad migration och en 30-dagars pengarna-tillbaka-garanti. Kolla in våra paket, eller prata med säljteamet för att hitta den plan som fungerar för dig.