Även om det är lite senare än planerat får vi ett nytt WordPress-standardtema. Dess  namn är Twenty Twenty-Two!

Det nya WordPress-standardtemat anländer med den nya WordPress 5.9-utgåvan. Vi ville lära oss mer om det nya temat, så vi installerade och testade Twenty Twenty-Two på en lokal  utvecklingsmiljö som kör WordPress 5.9.

Vi kommer att visa dig resultaten innan vi knyter ihop säcken för att ge dig en djupgående översikt över för och nackdelarna med det nya WordPress-temat.

En förhandsgranskning av Twenty Twenty-Two, det nya standardtemat för WordPress
En förhandsgranskning av Twenty Twenty-Two, det nya standardtemat för WordPress (Bildkälla: WordPress.org)

TwentyTwenty-Two har utformats för att vara det mest flexibla, lättviktiga och anpassningsbara stardardtemat som någonsin har funnits. Det erbjuder en bra plattform för att testa block, mönster och mallar.

Tack vare att det är ett blocktema hjälper det dig att bättre utforska Full Site Editing, globala stilar, navigeringsblock och de nya bildgallerierna, som är de mest efterlängtade funktionerna som inkluderas i WordPress 5.9.

Det bör nämnas att Twenty Twenty-Two är det första standardblocktemat!

Ett av de mer ambitiösa målen med det nya temat är att stärka användarna. Det inkluderas så många mönster och mallar direkt ur lådan att användarna kan bygga komplexa layouter med endast några klick. Resten är bara stilanpassning.

Det skiljer sig tekniskt sett inte så mycket från att skriva om de senaste och mest kraftfulla funktionerna som inkluderas i WordPress 5.9. Men Twenty Twenty-Two ger oss ett förstoringsglas för att bättre uppskatta de nya webbplatsredigeringsfunktionerna. Det ger oss även en bättre uppfattning om plattformens framtid.

Så nu är det dags att göra dig bekant med det nya temat.

Vi kommer först att utforska det nya webbplatsredigeringsflödet som användare kommer att uppleva med WordPress 5.9 och Twenty Twenty-Two.

Vi djupdyker därefter i huvudblocktemat som implementeras i Twenty Twenty-Two. Du lär känna Global Styles, blockmönster, mallar och malldelar.

Men det finns mycket mer än så att säga om Twenty Twenty-Two och WordPress blockteman. Så som ett bonuskapitel ger vi dig en snabb översikt över hur du utökar Twenty Twenty-Twos funktioner genom att dra nytta av theme.json-filen.

Men låt oss nu komma direkt till saken och djupdyka i det helt nya WP-standardtemat Twenty Twenty-Two.

Twenty Twenty-Two erbjuder ett nytt webbplatsredigeringsflöde

Det inkluderas flera fullständiga webbplatsredigeringsfunktioner i kärnan i WordPress 5.9. Webbplatsägare som använder den senaste WordPress-versionen med ett blocktema som Twenty Twenty-Two installerat kommer snart att kunna:

Nu när alla dessa funktioner är sammanslagna i kärnan har WordPress kärn-utvecklare diskuterat utvecklingen av informationsarkitekturen och omdesignat hela webbplatsredigeringsflödet.

Det första du kanske märker när du har aktiverat Twenty Twenty-Two är att startknappen för webbplatsredigeraren inte längre finns i huvudmenyn på din WordPress-instrumentpanel. Den ligger nu under Utseende-menyn.

Den nya Utseende-menyn i WordPress 5.9
Den nya Utseende-menyn i WordPress 5.9

Att sätta mall- och stilredigeringsfunktionerna under samma utseendemeny bör effektivisera redigeringsupplevelsen. Det blir helt enkelt lättare att förstå att de funktioner som du öppnar relaterar till presentationen av dina sidor.

Menyalternativet Redigerare öppnar webbplatsens mall för hemsidan. Beroende på dina läsinställningar är detta antingen din senaste inläggssida eller en statisk sida.

Webbplatsredigeraren i WordPress 5.9 med Twenty Twenty-Two
Webbplatsredigeraren i WordPress 5.9 med Twenty Twenty-Two

Om du klickar på WordPress-ikonen i det övre vänstra hörnet visas en ny navigeringsmeny för webbplatsredigeraren, inklusive tre menyalternativ: Webbplats, Mallar och Malldelar.

Låt oss ta en närmare titt.

Redigerarens navigeringsmeny
Redigerarens navigeringsmeny

Alternativet Webbplats öppnar startmallen (de senaste bloggartiklarna eller den statiska startsidan).

Under menyalternativet Mallar får du en lista över tillgängliga mallar. Du kan klicka på vilken mall som helst i listan för att öppna den i redigeraren.

När detta skrivs tillhandahåller Twenty Twenty-Two 11 mallar.

Mallar i Twenty Twenty-Two.
Mallar i Twenty Twenty-Two.

Genom att klicka på ellips-ikonen (︙) till höger kan du rensa dina anpassningar.

Ta bort mallanpassningar
Ta bort mallanpassningar

Till skillnad från temamallar kan anpassade mallar endast byta namn eller tas bort (men du kan redigera anpassade mallar i inläggsredigeraren).

Byta namn på/ta bort anpassade mallar
Byta namn på/ta bort anpassade mallar

Menyalternativet Malldelar visar de tillgängliga malldelarna som du kan öppna i redigeraren för dina anpassningar.

Du hittar som standard fyra malldelar i Twenty Twenty-Two. Om du håller markören över en modifierad mall visas ett verktygstips som informerar dig om att mallen har anpassats.

Malldelar i Twenty Twenty-Two
Malldelar i Twenty Twenty-Two

Du kan rensa dessa anpassningar genom att klicka på ellips-ikonen (︙) till höger.

Ta bort malldelsanpassningar
Ta bort malldelsanpassningar

Redigera mallar och malldelar

Redigeraren tillhandahåller gränssnittet för att anpassa strukturen för dina mallar och malldelar.

Här kan du enkelt lägga till eller redigera block och mönster, och dina ändringar tillämpas automatiskt på varje sida som använder mallen.

Redigera mallen för det enskilda inlägget
Redigera mallen för det enskilda inlägget

Bilden nedan visar mallen för 404-sidan i redigeraren. Det är en ganska enkel mall, som endast inkluderar en rubrik, ett stycke och en sökruta. Den ger oss ändå en bra förståelse för hur användargränssnittet fungerar.

Twenty Twenty-Two’s 404.blockmall i mallredigeraren
Twenty Twenty-Two’s 404.blockmall i mallredigeraren

Här kan du göra ändringar och anpassa mallar så att de passar dina behov. Du kanske exempelvis vill lägga till ett rutnät med bildinläggsmönster för att öka besökarnas engagemang och locka dem att bläddra i innehållet på din webbplats.

Anpassa Twenty Twenty-Two’s 404-blockmall
Anpassa Twenty Twenty-Two’s 404-blockmall

I rubrik-rullgardinsmenyn högst upp i mallredigeraren visas en lista över tillgängliga mallområden. Samma lista visas under Mall-fliken i Inställnings-sidofältet.

Mallområden i Twenty Twenty-Two
Mallområden i Twenty Twenty-Two

Genom att klicka på ett mallområde (t.ex. Rubrik) kommer du direkt till den malldel som du vill redigera.

Om du klickar på ellipsikonen till höger kommer du åt redigeraren för en isolerad malldel.

Ellipsikonen startar den isolerade malldelredigeraren
Ellipsikonen startar den isolerade malldelredigeraren

Malldelredigeraren inkluderar även ett par dragbara handtag, så att du kan kontrollera hur mallen beter sig med olika skärmupplösningar.

Justera förhandsgranskningsdimensionen för malldelen
Justera förhandsgranskningsdimensionen för malldelen

När du är nöjd med dina ändringar sparar du dem och går tillbaka till huvudmallredigeraren för att kontrollera slutresultatet.

Om du vill fördjupa dig i den nya informationsarkitekturen kan det vara bra att kolla in följande artiklar:

Kärnan av Twenty Twenty-Two: En snabb översikt över theme.json

För att till fullo förstå hur Twenty Twenty-Two och blockteman (som Bricksy) fungerar, ska vi ta en titt på den nya temakonfigurationen och stilmekanismen baserat på theme.json-filen.

Den här nya mekanismen introducerades i WordPress 5.8 och gör det möjligt för temautvecklare att konfigurera redigeraren och lägga till funktionsstöd från en central konfigurationspunkt.

I Twenty Twenty-Two har filen theme.json följande struktur:

{
	"version": 2,
	"settings": {},
	"styles": {},
	"customTemplates": {},
	"templateParts": {}
}

Låt oss ta en snabb titt på varje sektion.

Version

I version-fältet beskrivs specifikationsversionen, som för närvarande är 2.

Settings

settings-sektionen definierar inställningar på global nivå eller blocknivå. Inställningar som definieras på översta nivån påverkar alla block, men block kan åsidosätta globala inställningar individuellt. I Twenty Twenty-Two hittar du följande inställningar:

{
	"settings": {
		"appearanceTools": true,
		"color": {
			"duotone": [...],
			"gradients": [...],
			"palette": [...]
		},
		"custom": {...},
		"spacing": {...},
		"typography": {
			"dropCap": false,
			"fontFamilies": [...],
			"fontSizes": [...]
		},
		"layout": {...}
	}
}

Standardinställningarna kallas förinställningar och används för att generera anpassade CSS-egenskaper och klassnamn baserat på en specifik  namnkonvention:

  • CSS anpassad egenskap: --wp--preset--{preset-category}--{preset-slug}
  • CSS klassnamn: .has-{preset-slug}-{preset-category}

När ett tema har definierat sina förinställningar kan motsvarande anpassade CSS-egenskaper användas för att formatera block och element i styles-sektionen.

Styles

I styles-sektionen definierar teman standardstilar för block och element. Ta exempelvis en titt på följande stilar för kärnblocket för knappar:

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/button": {
				"border": {
					"radius": "0"
				},
				"color": {
					"background": "var(--wp--preset--color--primary)",
					"text": "var(--wp--preset--color--background)"
				},
				"typography": {
					"fontSize": "var(--wp--preset--typography--font-size--normal)"
				}
			}
		}
	}
}

Du kommer att lägga märke till de anpassade CSS-egenskaperna som används i egenskapsdeklarationerna.

Custom Templates

I customTemplates-sektionen deklarerar ett tema sina anpassade mallar. Det krävs name och  title-fält.  Teman kan även deklarera vilken inläggstyp som kan använda mallen genom att ställa in postTypes korrekt.

Twenty Twenty-Two inkluderar fyra anpassade mallar:

{
	"version": 2,
	"customTemplates": [
		{
			"name": "blank",
			"title": "Blank",
			"postTypes": [
				"page",
				"post"
			]
		},
		{
			"name": "page-large-header",
			"title": "Page (Large Header)",
			"postTypes": [
				"page"
			]
		},
		{
			"name": "single-no-separators",
			"title": "Single Post (No Separators)",
			"postTypes": [
				"post"
			]
		},
		{
			"name": "page-no-separators",
			"title": "Page (No Separators)",
			"postTypes": [
				"page"
			]
		}
	]
}

Du hittar motsvarande .html-filer i block templates-mappen.

Block templates-mappen i Twenty Twenty-Two
Block-templates-mappen i Twenty Twenty-Two

Template Parts

templateParts-sektionen inkluderar malldelsdefinitioner:

{
	"version": 2,
	"templateParts": [
		{
			"name": "header",
			"title": "Header",
			"area": "header"
		},
		{
			"name": "header-large-dark",
			"title": "Header (Dark, large)",
			"area": "header"
		},
		{
			"name": "header-small-dark",
			"title": "Header (Dark, small)",
			"area": "header"
		},
		{
			"name": "footer",
			"title": "Footer",
			"area": "footer"
		}
	]
}

name och  title-fälten krävs. Teman kan även deklarera ett area-villkor, där malldelen renderas i redigeraren.

Malldelar i Twenty Twenty-Two
Malldelar i Twenty Twenty-Two

Malldelarnas .html-filer finns i mappen template-parts.

Nu när du vet mer om Twenty Twenty-Two’s theme.json kan vi göra en noggrannare utforskning av temats funktioner och det nya redigeringsgränssnittet.

Låt oss djupdyka i Twenty Twenty-Two’s Global Styles.

Global Styles i Twenty Twenty-Two

Om du tittar på Twenty Twenty-Two’s style.css, blir du kanske förvånad av att den innehåller ett minimalt antal CSS-deklarationer. Anledningen är att stilar deklareras i filen theme.json i blockbaserade teman.

WordPress 5.9 tar saker ett steg längre och introducerar en ny funktion som gör det möjligt för blocktemaanvändare att anpassa utseendet på webbplatselement från ett användargränssnitt som heter Global Styles.

Global Styles-gränssnittet kan nås från den nya Stil-ikonen i det övre högra hörnet av redigeraren (se även Gränssnittet för Global Styles).

Om du klickar på ikonen visas ett nytt Stil-sidofält med tre separata paneler:

  • En förhandsgransknings-panel som visar en förhandsgranskning av dina anpassningar
  • En Global Styles-panel som ger åtkomst till specifika grupper av kontroller för typografi, färger och layout
  • Ett blockobjekt som ger åtkomst till stilinställningar på blocknivå
Stil-sidofältet i Twenty Twenty-Two
Stil-sidofältet i Twenty Twenty-Two

Twenty Twenty-Two’s färgpalett

I Färg-panelen kan du redigera tillgängliga paletter och tilldela eller ändra färger för Bakgrund, Text eller Länkar.

I palettpanelen kan du anpassa tema- eller standard-paletterna och till och med skapa en anpassad palett.

Färginställningar i Twenty Twenty-Two
Färginställningar i Twenty Twenty-Two

Har du hittat koden som genererar färgkontrollerna?

Om inte, öppna Twenty Twenty-Two’s theme.json i den kodredigerare som du föredrar. Du kommer att hitta följande färgpalettdeklarationer:

{
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "foreground",
					"color": "#000000",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#ffffff",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#1a4548",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#ffe2c7",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#F6F6F6",
					"name": "Tertiary"
				}
			]
		}
	}
}

Bilden nedan visar hur koden ovan matchar Twenty Twenty-Two’s färgpalett.

Twenty Twenty-Two’s färgpalett
Twenty Twenty-Two’s färgpalett

Anta nu att du vill ändra standardbakgrundsfärgen för ett visst block. Om du väljer en annan färg för blockets bakgrund tilldelas en annan CSS-variabel till elementets background-color-egenskap. Bilden nedan visar ett exempel på detta:

Twenty Twenty-Two’s primära färg som bakgrundsfärg
Twenty Twenty-Two’s primära färg som bakgrundsfärg

Och det är allt! Du behöver inte lägga till en enda rad med anpassad CSS-kod i anpassaren eller skapa ett underordnat tema för detta.

Men låt oss fortsätta att utforska Twenty Twenty-Two’s Global Styles med några ytterligare exempel.

Typography Settings

I Typografi-panelen kan du anpassa typografistilar för webbplatsens text- och länk-element på global nivå.

Varje objekt ger åtkomst till en grupp kontroller som låter dig anpassa teckensnittsfamilj, storlek och linjehöjd.

Typografiinställningar i Twenty Twenty-Two
Typografiinställningar i Twenty Twenty-Two

Undrar du vilken kod som genererar dessa kontroller?

Öppna Twenty Twenty-Two’s theme.json och hitta typography-sektionen. Du kommer att se följande inställningar:

{
	"version": 1,
	"settings": {
		"appearanceTools": true,
		"typography": {
			"dropCap": false,
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "\"Source Serif Pro\", serif",
					"name": "Source Serif Pro",
					"slug": "source-serif-pro"
				}
			],
			"fontSizes": [
				{
					"name": "Small",
					"size": "1rem",
					"slug": "small"
				},
				{
					"name": "Normal",
					"size": "1.125rem",
					"slug": "normal"
				},
				{
					"name": "Medium",
					"size": "1.75rem",
					"slug": "medium"
				},
				{
					"name": "Large",
					"size": "clamp(1.75rem, 3vw, 2.25rem)",
					"slug": "large"
				},
				{
					"name": "Huge",
					"size": "clamp(2.5rem, 4vw, 3rem)",
					"slug": "huge"
				}
			]
		},
}

Du kanske förväntar dig att det ska utkristalliseras två teckensnittsfamiljer och fem teckenstorlekar ur koden ovan. Och du gissar rätt.

Så här översätts koden ovan till Global Styles Typografi-inställningar:

Typografistilar i Twenty Twenty-Two
Typografistilar i Twenty Twenty-Two

Du kan gissa vilken inställning som genererar linjehöjdskontrollen. I Twenty Twenty-Two finns det ingen specifik inställning för detta eftersom det aktiveras av appearanceTools-egenskapen. Det är en genväg för flera inställningsdeklarationer (se nästa sektion).

Verktyg för layout och utseende

Det sista elementet i Global Style’s sidofält är layouten. I skrivande stund innehåller den endast en padding-kontroll.

Layoutinställningar i Twenty Twenty-Two
Layoutinställningar i Twenty Twenty-Two

I Twenty Twenty-Two aktiveras layoutpanelen av appearanceTools setting-egenskap, en boolean som kan användas för att aktivera flera inställningar samtidigt:

{
	"settings": {
		"appearanceTools": true
	}
}

"appearanceTools": true ersätter helt enkelt följande deklarationsblock:

{
	'settings': {
		'border': {
			'color': true,
			'radius': true,
			'style': true,
			'width': true
		},
		'color': {
			'link': true
		},
		'spacing': {
			'blockGap': true,
			'margin': true,
			'padding': true
		},
		'typography': {
			'lineHeight': true
		}
	}
}

OK – nu förstår du förhoppningsvis hur de inställningar som deklareras i filen theme.json matchar motsvarande Global Styles-kontroller.

Det saknas fortfarande en pusselbit för att få en fullständig bild av det nya WordPress-standardtemat: blockmönster.

Twenty Twenty-Two’s blockmönster

Man kan säga att Twenty Twenty-Two mestadels är en samling mönster – och det stämmer ganska bra. I Twenty Twenty-Two hittar du massor av färdiga blockmönster  som du kan välja mellan för att bygga fantastiska och oförutsägbara strukturer av kapslade block för dina webbsidor.

Nyckeltermen här är användarinflytande. Och det är passande eftersom du kan bygga allt möjligt med blockmönster. Du kan exempelvis bygga en tilltalande portfolio eller en kampanjwebbplats, även om du inte har någon kunskap om HTML eller CSS!

Och WordPress 5.9 kommer med betydande förbättringar av mönstersystemet tack vare det nya verktyget Pattern Explorer, som låter dig bläddra bland mönster i en helskärmsmodal.

Pattern Explorer i Twenty Twenty-Two
Pattern Explorer i Twenty Twenty-Two

Med det nya verktyget kan du även importera blockmönster snabbt och enkelt från mönsterkatalogen. Detta skapar nya möjligheter för både WordPress-användare och  utvecklare, så dess användning kommer sannolikt att öka avsevärt i framtiden.

WordPress mönsterkatalog
WordPress mönsterkatalog

Twenty Twenty-Two inkluderar massor av mönster (över 65 st) i fem kategorier.

Twenty Twenty-Two’s mönsterkategorier
Twenty Twenty-Two’s mönsterkategorier

Denna solida uppsättning av mönster passar perfekt ihop med de mallar och malldelar som inkluderas i det nya standardtemat, vilket skapar en verkligt fantastisk redigeringsupplevelse.

Skiktade bilder med duotone
Skiktade bilder med duotone
Video med rubrik och detaljer
Video med rubrik och detaljer
Två bilder med text
Två bilder med text

Har du ännu inte har haft en chans att experimentera med blockmönster? Då ska vi visa dig ett enkelt exempel på anledningen till att de anses vara så kraftfulla verktyg.

Anta att du vill ta bort standardsidfoten från mallarna Index och Single Post och ersätta den med ett annat blockmönster.

Starta Webbplatsredigeraren från Utseende-menyn eller wordpress-verktygsfältet för att anpassa indexmallen.

Klicka på knappen Index för rullgardinsmenyn med listan över sidans tillgängliga mallområden. Klicka på ellipsknappen bredvid Sidfot och sedan på Redigera sidfot.

Mallinspektören
Mallinspektören

Som vi nämnde ovan kommer detta att starta den isolerade malldelsredigeraren.

Standardsidfoten för Twenty Twenty-Two i den isolerade malldelsredigeraren
Standardsidfoten för Twenty Twenty-Two i den isolerade malldelsredigeraren

Öppna nu blockinfogaren och klicka på Mönster.

Starta det nya verktyget Pattern Explorer, välj kategorin Twenty Twenty-Two Sidfötter och välj den sidfot som du vill ha.

Pattern Explorer i Twenty Twenty-Two
Pattern Explorer i Twenty Twenty-Two

Lägg nu till och redigera blocken efter dina behov.

Redigera sidfoten i den isolerade malldelsredigeraren
Redigera sidfoten i den isolerade malldelsredigeraren

Spara rubriken och kontrollera webbplatsen igen när du är nöjd med dina ändringar.

Bilden nedan jämför tre mallar (Index, Single Post och Single Post utan avgränsare) med olika anpassningar av sidhuvud och sidfot:

Sidhuvuds- och sidfots-anpassningar i olika Twenty Twenty-Two-mallar
Sidhuvuds- och sidfots-anpassningar i olika Twenty Twenty-Two-mallar

Utöka Twenty Twenty-Two med ett barntema

Att skapa ett barntema för ett blocktema skiljer sig helt från att skapa ett barntema för ett klassiskt tema.

Men när du har en god förståelse för ett blocktemas struktur kommer det det inte att vara så svårt att skapa ett barntema för Twenty Twenty-Two eller något annat blocktema.

Så låt oss ta reda på hur du anpassar utseendet och känslan på din Twenty Twenty-Two-baserade webbplats.

1. Skapa ett barntema för Twenty Twenty-Two

Skapa en ny mapp i katalogen /wp-content/themes och namnge den som du önskar (enligt temautvecklingsstandarder). I det här exemplet kallade vi barntemamappen twentytwentytwo-child.

Nu behöver du en stil.css-fil. Öppna din favoritkodredigerare och skapa följande formatmall:

/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://example.com/
Author: Your name
Author URI: https://example.com/
Description: A child theme for TT2.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.6
Version: 0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo-child
Template: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments

Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child is distributed under the terms of the GNU GPL.
*/

Du kan som vanligt redigera fält efter dina behov.

Ditt barntema är nu tillgängligt för förhandsgranskning. Du kan aktivera det via adminskärmen Utseende > teman.

2. Anpassa globala inställningar

Sedan WordPress 5.9 ärver barnteman med en theme.json-fil det överordnade temats inställningar. Om barntemats theme.json definierar en uppsättning av stilar, läggs dessa stilar på föräldratemat.

Så vi kan skapa en theme.json-fil som endast innehåller ett litet anpassat block med inställnings- och stildefinitioner snarare än att omdefiniera alla våra ursprungliga val.

Så här deklarerar du en anpassad färgpalett

När du skapar ett barntema för Twenty Twenty-Two är den enklaste uppgiften att ersätta färgpaletten. Allt du behöver göra är att definiera en ny färgpalett i barntemats theme.json:

{
"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "foreground",
					"color": "#FFFFFF",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#001F29",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#D6FDFF",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#FDFCDC",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#FED9B7",
					"name": "Tertiary"
				},
				{
					"slug": "accent",
					"color": "#E94435",
					"name": "Accent"
				}
			]
		}
	}
}

Spara filen och gå tillbaka till webbplatsredigeraren. Färgpaletten som definieras ovan borde ha ersatt standardpaletten för Twenty Twenty-Two.

Ett barntemas färgpalett
Ett barntemas färgpalett

Färgerna kommer att visas i ordning på själva paletten, och deras namn bör följa bästa praxis och de namnkonventioner som diskuteras på Github.

Du kan läsa mycket mer om theme.json’s färgalternativ i denna djupgående översikt av Carolina Nymark.

Så här deklarerar du duotone-filter

Du kan även ersätta standard duotone-färgerna med en anpassad uppsättning av filter.

För att göra detta lägger du helt enkelt till följande kod i barntemats theme.json-inställningar på samma nivå som palette-egenskapen:

{
"version": 2,
	"settings": {
		"color": {
			"palette": [...],
			"duotone": [
				{
					"colors": [
						"#001F29",
						"#FFFFFF"
					],
					"slug": "default-filter",
					"name": "Default filter"
				}
			]
		}
	}
}

Spara filen och kontrollera resultatet i blockredigeraren. Du bör endast se ett enda duotone-filter.

Ett barntema’s duotone-filter
Ett barntema’s duotone-filter

3. Anpassa blockstilar

Med WordPress 5.9, kan du som sagt anpassa theme.json-inställningar och stilar från gränssnittet Global Styles.

Blockstilar kan endast anpassas från Global Style’s gränssnitt om blocket deklarerar stöd för specifika funktioner i motsvarande block.json-fil. Men du kan åsidosätta standardblockinställningarna i ditt barntemas theme.json.

Anta nu att du vill åsidosätta blockstilarna Post Title och Group block. Allt du behöver göra är att definiera de stilar som du vill lägga till eller åsidosätta, som du kan se nedan:

{
"version": 2,
	"settings": {...},
	"styles": {
		"blocks": {
			"core/post-title": {
				"typography": {
					"fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif"
				},
				"color": {
					"background": "var(--wp--preset--color--tertiary)"
				},
				"spacing": {
					"padding": "var(--wp--custom--spacing--small)"
				}
			},
			"core/group": {
				"spacing": {
					"margin": {
						"top": "0",
						"bottom": "0"
					}
				}
			}
		}
	}
}

I exemplet ovan har vi ändrat teckensnittsfamiljen, bakgrundsfärgen och utfyllnadsvärdena för core/post-title, samt de övre och nedre marginalerna för core/group.

Bilden nedan visar resultatet som det skulle se ut på den offentliga webbplatsen:

Ett anpassat Post Title-block
Ett anpassat Post Title-block

Och det var hela granskningen!

Vi kommer inte att djupdyka mer i barnteman för tillfället eftersom det egentligen kräver ett helt eget inlägg. Under tiden hittar du fler exempel på Twenty Twenty-Two’s barnteman på Github.

Sammanfattning

Medan vi tittade närmare på det nya WordPress-standardtemat Twenty Twenty-Two och dess funktioner (som gör det till det mest flexibla standardtemat som någonsin har släppts), presenterade vi den nya informationsarkitekturen som introducerades med WordPress 5.9. Vi gav till och med en smygtitt på det nya Global Styles-gränssnittet.

Många nya och spännande funktioner är på väg, och den nya redigeringsmiljön verkar bli mer robust, pålitlig och funktionell med tiden.

I takt med att det kommer nya WordPress-funktioner, försvinner andra eller minskar i betydelse. Många användare undrar vad som kommer att hända med Anpassaren och hur man bäst upprätthåller bakåtkompatibilitet med befintliga teman.

Du bör dock inte förvänta dig att du plötsligt växlar från traditionella teman till blockteman på en gång. Vi har för närvarande fyra olika typer av teman att välja mellan:

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

Så var inte orolig – det finns fortfarande många lösningar att välja mellan om du inte känner dig redo att byta till blockteman.

Och nu är det upp till dig! Är du redo att ta det stora språnget och börja använda blockteman? Dela dina tankar med oss i kommentarerna nedan.

Carlo Daniele Kinsta

Carlo är en passionerad älskare av webbdesign och frontend-utveckling. Han har sysslat med WordPress i över 10 år, även i samarbete med italienska och europeiska universitet och utbildningsinstitutioner. Carlo har dessutom skrivit dussintals artiklar och guider om WordPress, som är publicerade både på italienska och internationella webbplatser, samt på tryckta tidskrifter. Du hittar Carlo på X och LinkedIn.