Vad är nytt i WordPress 5.9 – fullständig webbplatsredigering, globala stilar, block, mönster, API:er, UI-förbättringar och mycket mer

WordPress 5.9 var ursprungligen planerad att släppas den 14 december 2021. På grund av flera öppna problem har den slutliga utgåvan försenats och är nu planerad till 25 januari 2022.

Om du undrar vad som är nytt i WordPress 5.9 är det korta svaret Fullständig Webbplatsredigering (FSE).

Och faktiskt är många 5.9-funktioner bara tillgängliga om du använder ett tema som stöder fullständig webbplatsredigering, till exempel det helt nya standardtemat, Twenty Twenty-Two.

Med WordPress 5.9 kommer vi till hjärtat av den andra fasen av Gutenbergs färdplan: Anpassningsfasen, som mest fokuserar på fullständig webbplatsredigering, blockmönster, blockkatalogen och blockbaserade teman.

Med 5.9, som kommer ut nästa månad, är vi – skulle jag säga – på MVP, den minsta livskraftiga produkten i denna anpassningsfas av Gutenberg.

Dessa ord från Matt Mullenweg vid 2021:s State of the Word sammanfattar bäst de viktigaste funktionerna i den kommande WordPress-utgåvan.

Som sagt, vad kan du förvänta dig att se i den första WordPress-utgåvan år 2022?

Låt oss ta reda på det!

Globala stilar: Ett grafiskt gränssnitt för theme.json

Med version WordPress 5.8 år 2021 blev manipulation av theme.json-filen det vanligaste sättet för temautvecklare att anpassa redigeringsinställningar och stilar.

WordPress 5.9 tar saker till nästa nivå genom att införa ett grafiskt gränssnitt som tillåter användare att anpassa stil-presets för sina webbplatser, antingen globalt eller på blocknivå, utan att skriva en enda rad kod.

Globala stilar-mekanismen bör väsentligt förändra hur du anpassar utseendet på dina webbplatser, eftersom globala stilar påverkar flera aspekter av WordPress-sajtdesign.

Först och främst ersätter Globala stilar-gränssnittet Customizern och är nu det enda sättet att anpassa inställningar och stilar med blockteman. På samma sätt kommer komplexa temaalternativs adminsidor inte längre att behövas. Detta ger ett nytt standardsätt för att konfigurera temainställningar och stilar och bör samtidigt effektivisera arbetsflödet för temautveckling.

Med globala stilar får WordPress-användare mer kontroll över presentationen av sina webbplatser, både globalt och per blocktyp, utöver kontexten för enskilda sidor eller inlägg.

Ett nytt sidofält finns nu i webbplatsredigeraren, högst upp hittar du en liten förhandsgranskningspanel och fyra komponenter i följande ordning:

• Typography
• Colors
• Layout
• Blocks

Vi kan förvänta oss att nya komponenter kommer läggas till över tid.

Låt oss titta närmare på det nya gränssnittet.

Stilförhandsgranskning

Det första elementet i sidofältet Globala stilar är en förhandsgranskningspanel. Den här panelen låter dig kontrollera resultatet av dina anpassningar och är särskilt användbart när dina ändringar gäller element som inte syns i webbplatsredigeringen.

Följande bild visar tre olika stilkombinationer i jämförelse:

Typografi

Typografipanelen är där du kontrollerar typografin på din webbplats. Naturligtvis beror kontrollerna i den här panelen på din theme.json-inställning.

Till exempel, Twenty Twenty-One Blocks-temat (TT1 Block) deklarerar följande typografiegendomar:

"settings": {
	"typography": {
		"customLineHeight": true,
		"fontSizes": [],
		"fontFamilies": []
	}
}

Nästa bild visar de resulterande typografiinställningarna i sidofältet Globala stilar

Låt oss dyka lite djupare och se hur TT1 Blocks-temat deklarerar fontFamilies:

"fontFamilies": [
	{
		"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
		"slug": "system-font",
		"name": "System Font"
	},
	{
		"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
		"slug": "helvetica-arial"
	},
	{
		"fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
		"slug": "geneva-verdana"
	},
	{
		"fontFamily": "Cambria, Georgia, serif",
		"slug": "cambria-georgia"
	},
	{
		"fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
		"slug": "hoefler-times-new-roman"
	}
]

Du kan kontrollera dessa typsnittsfamiljer i panelen Globala stilar-förhandsgranskning:

Färger

I avsnittet färger kan du visa och redigera färgpaletter och anpassa färgen på flera webbplatselement.

Genom att klicka på dessa element får du tillgång till en ny panel där du kan välja färger från tre färgpaletter: Kärna, Tema och Anpassad palett (Läs mer i Standardfärger, temafärger och anpassade färger).

I den här panelen kan du ställa in och ändra färgen för det aktuella elementet.

Layout

Den sista gruppen av verktyg är avsedd för layoutanpassningar. I den globala kontexten är detta begränsat till webbplatscontainern.

Block

Med implementeringen av globala stilar är det nu också möjligt att ändra utseendet för specifika block, till exempel stycke (typografi och färger), knappar (layout) och kolumn (färger och layout).

Observera att blockstilar kan anpassas från globala stilar-gränssnittet endast om blocket deklarerar stöd för specifika funktioner i motsvarande block.json-fil. Till exempel stöder core/post-title-block för närvarande följande stilar:

"supports": {
	"align": [ "wide", "full" ],
	"html": false,
	"color": {
		"gradients": true,
		"link": true
	},
	"spacing": {
		"margin": true
	},
	"typography": {
		"fontSize": true,
		"lineHeight": true,
		"__experimentalFontFamily": true,
		"__experimentalFontWeight": true,
		"__experimentalFontStyle": true,
		"__experimentalTextTransform": true,
		"__experimentalLetterSpacing": true,
		"__experimentalDefaultControls": {
			"fontSize": true,
			"fontAppearance": true,
			"textTransform": true
		}
	}
},

Eftersom core/post-title-block stöder färger, avstånd och typografi hittar du motsvarande poster i de globala stil-inställningarna i post-title-blocket.

Följande bild visar typografiinställningar, som du enkelt kan jämföra med ovanstående kod:

Det är värt att notera att WordPress 5.9 endast levererar den första implementeringen av gränssnittet för globala stilar. Som Matias Ventura påpekar kan vi rimligen förvänta oss ytterligare utveckling av den nya stilkontrollfunktionen:

I framtiden kommer det att finnas flöden inbyggda i systemet så att du kan gå från lokala stilar till globala — precis som anpassningar i ett knappblock och att välja att tillämpa dem globalt ändrar alla knappar av den typen.

Så vi kan se stora förbättringar snart. Bilden nedan är bara ett exempel på vad vi kan förvänta oss:

Ytterligare förbättringar kan innefatta förmåga för teman att ge alternativa färgpaletter och flera globala stilvariationer.

Last week I built a handful of Twenty Twenty-Two's color + font variations into super-simple child themes. They're really lightweight, and I love the idea of offering folks a drastically different site with one click.🎉https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

— kjellr (@kjellr) November 15, 2021

Utvecklare kan dyka djupare in i den globala stylingmekanismen i supportartikeln Globala inställningar och stilar (theme.json). Du hittar ytterligare exempel i vår introduktion till standardtemat Twenty Twenty-Two.

Navigeringsblocket

Navigeringsblocket har kallats ”ett av de mest effektfulla temablocken”, och vi är inte rädda för att säga att vi håller med om det.

Blocket har varit i embryofasen ett tag (Se även Navigeringsblock Spårningsproblem och Spårningsproblem i2). Men ändå, nu när alla väntande problem och blockerare som listas som måsten för WordPress 5.9 har fixats kan vi äntligen börja använda en av de mest kraftfulla funktionerna i kärnan med WordPress 5.9.

En snabb översikt över Navigeringsblockgränssnittet

Att använda det nya blocket kan vara lite förvirrande först, men när du väl har fattat kommer du att uppskatta dess fulla potential.

När du först lägger till ett Navigeringsblock innehåller platshållaren tre alternativ för att välja en befintlig blockbaserad meny, skapa en meny med alla sidor eller starta nytt med en tom meny.

Den nya navigeringsmenyn låter dig också importera menyer som skapats via Utseendemenyskärmen som är tillgänglig med klassiska teman.

Det betyder att om du övergår från ett klassiskt tema till ett blocktema behöver du inte bygga om dina befintliga menyer. Du behöver bara välja en av dina för närvarande tillgängliga ”klassiska menyer” och det blir automatiskt konverterat till en blockbaserad navigeringsmeny.

Du kan lägga till Navigeringsblocket var som helst på dina sidor. Du kan till exempel hitta det användbart i långformartiklar för att skapa en innehållsförteckning, så att användare kan hoppa till specifika innehållsavsnitt.

Nya navigeringslänkar läggs direkt till Navigeringsblocket genom att klicka på plus (+) på höger sida (Se även Gutenberg 11.7 anteckningar), om inte andra typer av block redan har lagts till i menyn.

Att klicka på Redigera i Navigeringslänkblockets verktygsfält konverterar ett menyalternativ till en anpassad länk. Detta gör att du kan lägga till, redigera, ordna om och ta bort objekt individuellt.

Du kan också omvandla länkar till block genom att klicka på Omvandla i blockverktygsfältet. Detta gör att du kan lägga till specifika block direkt till navigeringsmenyn.

Anpassad länk, Avstånd, Webbplatslogotyp, Hemlänk, Sociala ikoner och Sökblock visas nu för användare när de lägger till block i navigeringsmenyerna.

I inställningsfältet hittar du en omfattande uppsättning alternativ för att styra fler aspekter av dina navigeringsmenyer.

Layoutpanelen innehåller kontroller för justering, orientering och omslag.

Navigeringsblocket har också en förbättrade bildskärmsinställningspanel med ett alternativ för en hamburgaremeny som alltid visas.

Du kan också anpassa text- och bakgrundsfärger för dina menyer och undermenyer.

Ett annat användbart tillägg som nyligen lagts till i Navigeringsblocket är Blockavståndsstöd, vilket ger användarna möjlighet att styra avståndet mellan menyalternativen.

Typografipanelen innehåller en uppsättning kontroller för typsnittsfamilj, utseende, linjehöjd, dekoration och stor/liten bokstav. Alla dessa kontroller kan växlas på/av från en rullgardinsmeny som visas när du klickar på ellipsikonen till höger.

Navigeringsblocket: Under huven

Navigeringsblockdata lagras i databasen med hjälp av en wp_navigation dedikerad inläggstyp.

Varför är detta intressant för WordPress-användare, och hur fungerar det?

Säg att du har skapat en navigeringsmeny som består av två anpassade länkar och en sökruta. Med temat Twenty Twenty-Two installerat, kan menyn se ut som i följande bild:

Navigeringsblocket ovan lagras i databasen som inläggstypen wp_navigation enligt följande:

<!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /-->

<!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

Genom att lagra innehållet i Navigeringsblocket i databasen kan användare använda samma navigeringsmenyer över olika blockteman. Om menyn inte är omedelbart synlig, kan du bara välja önskad navigeringsmeny i menyväljaren (se även problem #36087 och PR #36178).

Följande bild visar ovanstående meny med temat Twenty Twenty-One Blocks:

Navigeringsblocket har gått igenom flera iterationer. Du kan dyka djupare in i varje implementering i anteckningarna till Gutenberg 11.7, 11.8, och 11.9.

Du kan också läsa mer om Navigeringsblocket i det nya Navigeringsblocket utvecklingsanteckning och Navigeringsblockstödsartikeln.

Bildgallerier, utvalda bilder och webbplatsikoner

WordPress 5.9 vill få bilder att fungera mer konsekvent i olika sammanhang och levererar nya funktioner och förbättringar i flera block. Galleriblocket har reviderats helt, medan olika ändringar av de utvalda bild- och webbplatsikonblocken ger användarna mer detaljerad kontroll över respektive bilder.

Ett omfaktoriserat galleriblock

I WordPress 5.8 var möjligheten att anpassa utseendet på bilder i gallerier något begränsad. Det fanns inget sätt att ändra bildstil eller tillämpa ett tvåtonsfilter.

Dessutom saknades viktiga funktioner i galleribilder, till exempel att lägga till anpassade länkar till enskilda bilder i ett galleri.

För att bättre förstå orsaken till denna asymmetri mellan bilder i de två olika kontexterna för en enskild bild och en bild i ett galleri, låt oss ta en titt på galleriblocket i kodvisningen i WordPress 5.8:

Observera att bilddetaljer endast lagras i Galleriblockavgränsaren (se även Vad är ett Gutenbergblock?).

Detta gjorde att enskilda bilder betedde sig annorlunda än bilder i gallerier.

För att få bilder att fungera konsekvent i de två olika kontexterna introducerar WordPress 5.9 ett helt omfaktoriserat galleriblock, som nu beter sig som en container för en samling av figurelement istället för en oordnad lista bilder.

I WordPress 5.9 är galleribilder kapslade med hjälp av kärnans innerBlocks– API, och varje bild lagrar sin egen uppsättning detaljer, precis som enskilda bilder.

Det är en stor förbättring, eftersom Galleriblockbilder nu stöder samma funktioner som finns i vanliga bildblock, såsom bilddimensioner och tvåtonsfilter, liksom standardblockfunktioner, som dra-och-släpp, kopiera, duplicera och ta bort-funktioner.

Med det nya galleriblocket kan du utforma bilder individuellt. Detta ger ett brett utbud av anpassningsmöjligheter.

Bilden nedan visar flera bilder i ett galleri, var och en med olikt rundade hörn:

Du kan också använda olika tvåtonsfilter på olika bilder i samma galleri.

Och naturligtvis kan du tilldela en specifik CSS-klass till varje bild, vilket ger dig ytterligare superkrafter för att lägga till den anpassning du behöver till dina galleribilder.

För en närmare titt på det nya galleriblocket, se även Utvecklaranteckningar om Galleriblocksomfaktoriseringar, Kommande galleriblocksförbättringar, och anteckningar till Gutenberg 11.4 .

Utvalda Bildförbättringar

Flera förbättringar har också tagits till det utvalda bildblocket.

Grundläggande dimensionskontroller

Det utvalda bildblocket har nu en ny inställningspanel för dimensioner som ger höjd, bredd och skala-kontroller.

Dimensionskontroll gäller även utvalda bilder i Query Loop-blocket, enligt följande bild:

Tvåtonsfilter på utvalda bilder

Vi nämnde ovan att vi nu kan tillämpa tvåtonsfiltret i bilder som är inslagna i det nya omfaktoriserade Galleriblocket.

Med WordPress 5.9 finns tvåtonsfiltret också i utvalda bildblock i alla sammanhang, från inlägg- och sidmallar till Query loop-block.

Denna funktion öppnar dörren för kreativa och konsekventa färgkombinationer på hela webbplatsen.

Bildbeskärning i webbplatslogotyp

Innan WordPress 5.9 (och Gutenberg 11.6) kunde logotypbilder bara redigeras innan de laddas upp. Med WordPress 5.9 kan du beskära, zooma och rotera bilder som används i Webbplatslogotypen direkt från blockverktygsfältet.

Nya designverktyg, block och UI-förbättringar

Elva Gutenberg-versioner slås samman i kärnan med WordPress 5.9 och levererar så många funktioner, förbättringar och buggfixar att det inte skulle vara möjligt att täcka dem alla i en enda artikel.

Så vi valde några av de som vi tyckte var mest värda uppmärksamhet. För en djupare översikt över dessa funktioner och förbättringar kanske du också vill kolla utgåvoinläggen för Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8, och 11.9.

Med det sagt kommer detta avsnitt att täcka följande ändringar:

Border Supports-UI

Med början i WordPress 5.9, när theme.json deklarerar Border-inställningar och ett block deklarerar Border Support via Block supports-API:n, kommer en ny inställningspanel ge kontroller för kantradie, bredd, stil, färg, och enheter (se även Gutenberg 11.1).

Kärngruppblocket är ett bra exempel på denna användbara UI-förbättring. block.json-filen i Gruppblocket innehåller nu följande supports-deklaration:

{
	...
	"supports": {
		"align": [ "wide", "full" ],
		"anchor": true,
		"html": false,
		"color": {
			"gradients": true,
			"link": true
		},
		"spacing": {
			"padding": true,
			"__experimentalDefaultControls": {
				"padding": true
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"style": true,
				"width": true
			}
		},
		...
	},
	...
}

Med den här funktionen kan användare skapa fantastiska grafiska effekter på sina webbplatser med minimal ansträngning. Du kan se det i aktion med det nya Twenty Twenty-Two-temat.

Skapa ett nytt Gruppblock i ett nytt inlägg eller en ny sida och välj det. Du kommer att se en Kant-panel i sidofältet blockinställningar. Ändra kantbredden och stilen efter behov och njut av resultatet.

Om du är en temautvecklare och vill lägga till den här funktionen i dina teman öppnar du theme.json-filen och deklarerar border support enligt följande kod:

{
	"version": 1,
	"settings": {
		"border": {
			"customColor": true,
			"customRadius": true,
			"customStyle": true,
			"customWidth": true
		}
	}
}

Spara filen och gå tillbaka till din WordPresspanel. Skapa ett nytt Gruppblock i ett nytt inlägg eller en ny sida och välj det. Du bör nu se en kantpanel i sidofältet blockinställningar (se även denna experimentella theme.json).

Listvyförbättringar

Med WordPress 5.9 har listvyn förbättrats och har nu dra-och-släpp, hopfällbara sektioner och HTML-ankare.

Dra-och-släpp i listvyn

Som nämnts i begäran #33320, har dra-och-släpp implementerats i listvyn men inaktiverades på grund av prestandaproblem.

Från och med WordPress 5.9 har dra-och-släpp i listvyn implementerats på nytt. Du kan nu igen dra och släppa block och grupper av block var som helst i listvyn. Detta är en stor förbättring i redigerarens användbarhet, eftersom det gör att du snabbt och enkelt kan flytta block och grupper av block på dina sidor. Det är instrumentalt i långformsartiklar och sidor, och för att hantera komplexa strukturer av kapslade block.

Komprimerade sektioner i listvyn

En annan betydande förbättring av listvyn är möjligheten att expandera/komprimera delar av kapslade block. Detta gör att du enkelt kan navigera i komplexa blockstrukturer, expandera enskilda grupper av block medan du lämnar resten komprimerade.

Du kan också expandera och komprimera listvysektioner med vänster- och högerpilarna.

HTML-ankare på Listvyobjekt

Ännu en bra förbättring är möjligheten att lägga till HTML-ankare i dina block i listvyn och se dem på ett ögonblick.

Blockavståndskontroll

Den nya blockavståndskontrollen introducerades först i Gutenberg 11.4 och slås nu samman i kärnan med WordPress 5.9. Den låter dig ställa in ett anpassat avstånd mellan objekt i ett block. Nedan kan du se en förhandsgranskning med olika blockavståndsvärden i ett Kolumnblock med standardtemat Twenty Twenty-Two:

Avstånd kommer initialt att vara tillgängligt för specifika block, inklusive knappar, bilder, kolumner, titlar och navigering, men stödet bör utvidgas till fler block i framtiden.

Teman borde möjliggöra Avstånd i theme.json med den nya appearanceTools-egendomen. Du kan läsa mer om utseendeverktyg i vår djupdykning i Twenty Twenty-Two. Se även begäran #33991 och #34630.

Rich URL-förhandsgranskning för länkkontroll

Genom att dra nytta av den nya REST-url-details-slutpunkten, ger länkkontrollen dig nu en rich URL-förhandsgranskning som visar detaljer för en länkmålresurs.

I dess första implementering var den här funktionen endast tillgänglig i inläggsredigerarens Rich Text-komponent. I skrivande stund är det också tillgängligt i webbplatsredigeraren, men inte i navigering- och widgetredigerarna.

Skapa sidor från länk-popup

WordPress 5.9 har också en förbättrad inline-länk-UI, som visar en helt ny knapp för att skapa nya sidor direkt från inline-länkspopupen. Denna funktion är endast tillgänglig inom Inläggsredigeraren.

Förbättringar av sökblocket

Sökblocket visar nu inställningar för knapp och kantfärg.

Du kan nu också anpassa bakgrund och textfärg och kantfärg och radie.

Nya kontroller för Blockdimensioner

En ny dimensionsinställningspanel är nu tillgänglig för användare att kontrollera utrymmet som upptas av ett block på sidan. Panelen bör inkludera höjd, bredd, spaltfyllnad, marginal och eventuellt justeringskontroller, men inte alla attribut kommer att vara tillgängliga för varje block.

Blockutvecklare kommer att hitta < DimensionControl/>-komponenten dokumenterad på GitHub, men notera att det fortfarande är markerat som en experimentell funktion och kan bli föremål för att bryta förändringar än så länge.

Ett nytt Widgetgruppblock läggs till i Widgetar-skärmen

Ett nytt Widgetgruppblock är nu tillgängligt i den blockbaserade widgetredigeraren. Det senaste blocket låter dig lägga till en grupp block i en widget med en titel i de klassiska temanas widgetsredigerare och Customizern.

Du kan läsa mer om widgetredigeraren i Blockbaserad widgetredigerare och blockwidgetar i Customizern.

Flex layout och Ny Rad-blocket

Ursprungligen infördes det som en experimentell funktion med Gutenberg 11.2, men flex layout har expanderats till flera block, inklusive Sociala Länkar och gruppblock.

Vissa block, till exempel blocket Sociala länkar, ger nu en uppsättning verktygsfältskontroller och sidofältinställningar som låter dig anpassa flex layouten.

Samma funktionalitet finns i Navigeringsblock och Radblock, en ny variant av Gruppblocket som introducerades med Gutenberg 11.5.

Följande bild visar Radblocket med layoutkontroller i inställningssidofältet:

Nedan kan du se samma Radblock på frontenden och i Chromes inspekteringsverktyg.

Blockmönster-förbättringar

Blockmönster introducerades först med WordPress 5.5, och låter WordPressanvändare inkludera komplexa färdiga strukturer av kapslade block i sitt innehåll med bara några klick.

Nu tar WordPress 5.9 det hela ett steg framåt mot designdemokratisering och användarmakt genom att introducera ett par förbättringar av blockmönstersystemet.

Så, vad är nytt med blockmönster i WordPress 5.9?

Utvalda mönster från mönsterkatalogen

Blockinsättaren visar nu utvalda blockmönster dynamiskt hämtade från mönsterkatalog, vilket ger användarna ett snabbt och enkelt sätt att hitta populära mönster att använda i sitt innehåll.

På samma sätt som mönster kommer direkt in i WordPress-panelen, bör WordPress-utvecklare uppmuntras att skapa och publicera fler och fler mönster allteftersom, vilket resulterar i alltmer avancerade designfunktioner för användare.

En ny mönsterutforskare i helskärm

Eftersom antalet blockmönster i mönsterkatalogen fortsätter att växa och fler teman använder dem, introducerar WordPress 5.9 ett nytt blockmönsternavigeringsgränssnitt: Mönsterutforskaren.

Den nya Utforska-knappen öppnar nu en fullskärmsmodul som gör det möjligt för användare att bläddra, söka efter och infoga blockmönster med bara några klick. Resultatet är en förbättrad användarupplevelse.

Du hittar också ytterligare anteckningar och flera blockmönsterexempel i vår djupdykning i WordPresstemat Twenty Twenty-Two.

Om du är intresserad och vill lära dig mer, lyssna på Josepha Haden Chomphosys podcast Avsnitt 16 och 21, och titta på Youtubevideon Utforska WordPress 5.9 från Anne McCarthy.

Temat Twenty Twenty-Two och WordPress-blockteman

Med WordPress 5.9 behöver du inte längre installera Gutenbergpluginet för att möjliggöra fullständig webbplatsredigering på din WordPress-sajt. Du behöver bara låta ett blocktema utnyttja alla FSE-funktioner.

Dessutom kommer WordPress 5.9 med ett helt nytt standardtema, Twenty Twenty-Two, och det är en riktig game changer, eftersom Twenty Twenty-Two är det första standardblocktemat någonsin.

Twenty Twenty-Two är ett mycket flexibelt och anpassningsbart tema. Det ger dig en perfekt sandlåda för att prova det nya mallredigeringsflödet, nya block, gränssnittsförbättringar och alla webbplatsredigeringsfunktioner som läggs till kärnan, från och med WordPress 5.9.

Som nämnts ovan behöver du bara installera och aktivera ett blocktema, som Twenty Twenty-Two. När temat är aktivt, visas en ny redigeringsmeny (beta) i WordPress-adminpanelen.

Webbplatsredigeringsgränssnittet har nu ett moderniserat Webbplatsredigeringsflöde. Från redigeringsgränssnittet kan du visuellt redigera webbplatsens startsida, mallar och malldelar samt komma åt Globala Stilar.

När du aktiverar ett blocktema, hittar du inte Customizern. Det beror på att Customizern inte stöder blockteman, som bara använder Webbplatsredigeraren. Det är också anledningen till att inte kan förhandsgranska inaktiva blockteman.

Så från och med WordPress 5.9 är åtkomstpunkten till Customizern inte längre tillgänglig i adminmenyn när ett blocktema är aktivt (om du inte använder ett plugin som använder det).

Om du fortfarande använder traditionella teman och är orolig för bakåtkompatibilitet, ta det lugnt: Du kan fortsätta använda ditt tema.

Du har för närvarande fyra olika kategorier av teman att välja mellan:

• Blockteman: Teman utformade för FSE
• Universella teman: Teman som fungerar med både Customizern och Webbplatsredigeraren
• Hybridteman: Klassiska teman som stöder FSE-funktioner som theme.json
• Klassiska teman: Teman med PHP-mallar, functions.php, etc.

På grund av den inverkan som blockteman sannolikt kommer att ha på WordPress ekosystemet har vi en hel artikel som täcker Twenty Twenty-Two och WordPress-blockteman. Se till att läsa det för en mer djupgående översikt.

Prestandaförbättringar

Här på Kinsta är vi besatta av webbplatshastighet. Det är därför vi är glada över den prestandaförbättring som kommer med WordPress 5.9.

Dessa förbättringar kommer att påverka flera områden i CMS:et, från blockredigeraren till blockteman, Latladdning och mer. Nu börjar vi.

Förbättringar till blockinföraren

Sedan WordPress 5.9 latrenderas blocktyper, mönster och kategorier i Blockinföraren. Webbläsaren laddar innehåll med högre prioritet först, vilket ger användaren en mjukare redigeringsupplevelse och förbättrad prestanda.

Ytterligare anmärkningsvärda prestandaförbättringar i samband med blockredigeraren påverkar återanvändbara block och listvyn.

Mindre laddad CSS

När det gäller frontenden, minskar WordPress 5.9 drastiskt mängden CSS som laddas av blockteman, vilket leder till att sidor laddas betydligt snabbare.

Den viktigaste förbättringen som bör noteras i detta sammanhang är införandet av theme.json-inställningar och stil-mekanismer, som förhindrar teman från att använda massiva formatmallar, inklusive hundratals CSS-deklarationer. Mängden CSS-kod som ett tema använder har nu reducerats till några anpassade CSS-egendomar som alla blocktyper kan återanvända.

Prestandaförbättringar med latladdning

Latladdning av bilder introducerades först i WordPress 5.5. Från och med WordPress 5.7 var latladdningsfunktionen utökat till iframes, vilket låter webbplatsägare bygga snabbare webbplatser och förbättra din SEO.

Hur som helst, efter en analys av Largest Contentful Paint (LCP)visade det sig att tilldela loading= "lazy"-attribut till alla bilder och iframes på sidan orsakar en lätt prestandaförsämring.

Att helt enkelt hoppa över loading= "lazy"-attributet var inte en lösning eftersom det skulle leda till att man förlorade de tydliga fördelarna med latladdning.

Den optimala lösningen skulle vara att bara utelämna loading= "lazy"-attribut på bilder som visas högst upp. Men eftersom loading="lazy"-attribut tilldelas på serversidan, kan WordPress inte avgöra vilka bilder som visas högst upp. Det är något som mest beror på det aktiva temat.

Nu, som en avvägningslösning, från och med WordPress 5.9, tillämpas loading= "lazy"-attributet inte på den första innehållsbilden eller iFramen. En analys utförd på 50 populära WordPress-teman fann att denna lösning leder till betydande prestandaförbättringar och sidor laddas upp till 30% snabbare.

Felix Arntz förklarar hur det fungerar:

… för att förbättra prestandan out-of-the-box utan att kräva att en utvecklare anpassar beteendet, kommer WordPress nu att hoppa över den allra första ”innehållsbilden eller iframen” på sidan från att latladdas. Termen ”innehållsbild eller iFrame” betecknar här en bild eller iframe som finns i innehållet i ett inlägg i den aktuella huvudfrågeslingan samt alla utvalda bilder i ett sådant inlägg. Detta gäller både ”singel” och ”arkiv”-innehåll: i en ”singular”-kontext är den första bilden eller iFramen för det (enda) inlägget inte latladdad, medan i en ”arkiv”-kontext är den första bilden eller iFramen för det första inlägget i förfrågningen inte latladdad.

Temautvecklare kan nu använda det nya wp_omit_loading_attr_threshold-filtret för att ändra antalet bilder/iframes som ska hoppas över latladdning.

Flera formatmallar per block

Block- och temautvecklare kan registrera flera stilmallar på varje block och ladda stilar från andra block när det behövs. Detta gör det möjligt att ladda stilmallar beroende på sidinnehållet, vilket förhindrar att teman laddar stora stilmallar på varje sida.

Enligt Ari Stathopoulos:

Block kommer nu att kunna registrera flera stilmallar och ladda stilar från andra block när det behövs. Teman kommer att kunna lägga till stilar per block istället för att ladda enorma stilmallar som tvingas laddas överallt. Detta har större inverkan på blockteman där inläsning av formatmallar optimeras baserat på sid- och layoutinnehållet, men kan också användas av klassiska teman.

Ytterligare funktioner för utvecklare

Förutom de många funktioner och UI-förbättringar som diskuterats hittills, introducerar WordPress 5.9 också flera funktioner för utvecklare.

Ett nytt attribut för att låsa block

Blockutvecklare kan nu hindra användare från att flytta eller radera enskilda block genom att lägga till ett lock-attribut till blockinställningarna:

{
	...
	"attributes": {
		"lock": {
			"type": "object",
			"default": {
				"move": true,
				"remove": true
			}
		}
	}
}

Med den här funktionen aktiverad kan användare redigera blockinnehållet, men kan inte flytta blocket på sidan eller ta bort det från redigeringsduken. Följande bild visar ett anpassat block med en standard uppsättning kontroller i verktygsfältet:

Att definiera lock-attribut, som framgår av koden ovan, döljer blockflyttare och Flytta till och Ta bort-kontroller från blockverktygsfältet. Bilden nedan visar det slutliga resultatet på skärmen:

Du kan också låsa ett specifikt block i ett blockmönster. För ett exempel, se även Att låsa block i WordPress 5.9.

Nytt API för att komma åt globala inställningar och stilar

WordPress 5.9 introducerar en ny PHP public-API för att läsa data från theme.json.

Läsinställningar och stilar från theme.json

Det finns två nya funktioner för att läsa data från settings och stile-avsnitten som deklareras i theme.json:

wp_get_global_settings( $path = array() , $context = array() );
wp_get_global_styles( $path = array(), $context = array() );

• $path är en array som visar sökvägen till den angivna inställningen
• $context är en array som ställer in kontexten för dessa data. Utvecklare kan läsa från ett specifikt blockinställningsavsnitt — till exempel, array( 'block_name' => 'core/paragraph' ). orygin-nyckeln inställd på base tillåter ignorering av anpassade data som sparats av användaren.

Följande exempelkod skulle returnera värdeinställningen contentSize. I Twenty Twenty-Two skulle det vara 650px:

wp_get_global_settings( array( 'layout', 'contentSize' ) );

Genom att ställa in en kontext kan du hämta stilar för specifika block. Följande kod visar hur du hämtar gränsradievärdet för core/button-blocket:

function get_global_styles() {
	return
	wp_get_global_styles(
		array( 'border', 'radius' ),
		array( 'block_name' => 'core/button' )
	);
}

Funktionen ovan returnerar det önskade egendomsvärdet med hänsyn till standardinställningar, temainställningar och användardata. Det anpassade värdet kommer att tillhandahållas om användaren konfigurerar knappens kantradie i gränssnittet globala stilar.

För att ignorera användardata skulle du använda följande kod:

function get_global_styles() {
	return
	wp_get_global_styles(
		array( 'border', 'radius' ),
		array( 'block_name' => 'core/button', 'origin' => 'base' )
	);
}

Hämta den genererade stilmallen

WordPress 5.9 introducerar också en ny funktion för att hämta stilmallen för standard-, tema- och anpassade stilar:

wp_get_global_stylesheet( $types = array() );

$types är en lista över stilar att generera.

Du kan läsa mer om den nya API:n i Ny API för att komma åt globala inställningar och stilar.

Fler funktioner för utvecklare

Ytterligare WordPress 5.9-ändringar för utvecklare som du kanske vill känna till inkluderar:

• Blockteman, ett nytt sätt att bygga teman i WordPress 5.9
• Uppdateringar för inställningar, stilar och theme.json
• Temafokuserade ändringar och filter i WordPress 5.9
• Nya kapacitetsförfrågningar i WordPress 5.9
• Diverse kärnändringar i WordPress 5.9
• Diverse blockredigeringsändringar i WordPress 5.9
• Ta mer kontroll över Inre blockområden (som blockutvecklare)

Sammanfattning

Vi lägger upp den här artikeln med en snabb anteckning om WordPress marknadsandelar. WordPress driver för närvarande över 65% av alla webbplatser vars innehållshanteringssystem är känt.

Dessa siffror är imponerande, särskilt jämfört med de närmaste konkurrenterna med mindre än 5% marknadsandelar, som Shopify.

Och det betyder också att du inte kan förbise utvecklingen av WP CMS. Varje ny version av WordPress ger nya funktioner, gränssnittsförbättringar, prestandaförbättringar och WordPress 5.9 är inget undantag. Allt du behöver för att testa de nya funktionerna är ett blocktema, som det nya Twenty Twenty-Two, och du är redo att köra.

Över till dig, nu! Är du redo att byta till blockteman och FSE? Och vilka är dina favoritändringar med WordPress 5.9?