Selvom det er lidt senere end oprindeligt planlagt, får vi et nyt WordPress-standardtema. Navnet er Twenty Twenty-Two!

Det nye WordPress-standardtema kommer med den udgivelse af WordPress 5.9. Vi var nysgerrige efter at lære mere om det nye tema, så vi installerede og testede Twenty Twenty-Two på et lokalt udviklingsmiljø, der kører WordPress 5.9.

Vi viser dig vores resultater, før vi afslutter vores tanker for at give dig et dybdegående overblik over det nye WordPress-tema.

En forhåndsvisning af Twenty Twenty-Two, det nye WordPress-standardtema
En forhåndsvisning af Twenty Twenty-Two, det nye WordPress-standardtema (Billedekilde: WordPress.org)

Twenty Twenty-Two er designet til at være det mest fleksible, lette og tilpasselige standardtema nogensinde. Det giver en fantastisk legeplads til at teste blokke, mønstre og skabeloner.

Da det er et bloktema, vil det hjælpe dig med bedre at udforske fuld redigering af et websted, globale stilarter, navigationsblokke og de nye billedgallerier, som er de mest ventede funktioner, der kommer med WordPress 5.9.

Vi må sige med det samme, at Twenty Twenty-Two er det første standard bloktema!

Et af de mest ambitiøse mål med det nye tema er at styrke brugerne. Med så mange mønstre og skabeloner tilgængelige direkte, kan brugere bygge komplekse layouts med kun et par klik. Resten er kun stiltilpasning.

Fra et teknisk synspunkt er det ikke meget anderledes at skrive om Twenty Twenty-Two fra at skrive om de nyeste og mest kraftfulde funktioner, der kommer med WordPress 5.9. Men Twenty Twenty-Two giver os et forstørrelsesglas for bedre at kunne værdsætte de nye websted redigeringsfunktion og få en bedre idé om platformens fremtid.

Så her skal vi introducere dig til det nye tema.

Først vil vi udforske det nye websted redigeringsflow, som brugerne vil opleve med WordPress 5.9 og Twenty Twenty-Two.

Derefter dykker vi ned i hovedbloktema-funktionerne implementeret i Twenty Twenty-Two. Du lærer Global Styles, blokmønstre, skabeloner og skabelon dele at kende.

Men der er meget mere at sige om Twenty Twenty-Two og WordPress-bloktemaer. Så som et bonuskapitel giver vi et hurtigt overblik over, hvordan man udvider Twenty Twenty-Twos funktioner ved at drage fordel af filen theme.json.

Lad os komme i gang med arbejdet og dykke ned i det helt nye Twenty Twenty-Two WordPress-standardtema.

Twenty Twenty-Two bringer et nyt websteds redigeringsflow

Adskillige funktioner til fuld redigering af websteder kommer ind i kernen med WordPress 5.9. Webstedsejere, der bruger den seneste WordPress-version med et bloktema, såsom Twenty Twenty-Two installeret, vil snart være i stand til at:

  • Opret og rediger indlæg og sider ved hjælp af flere blokke og mønstre
  • Tilpas de indstillinger og stilarter, der er defineret i filen theme.json via Global Styles-grænsefladen
  • Opret og rediger skabeloner til sider og indlæg
  • Opret og rediger template parts til header, footer og andre skabelonområder

Med alle disse funktioner slået sammen til kernen, har WordPress kerne-bidragydere diskuteret udviklingen af informationsarkitekturen og redesignet hele websteds redigeringsflow.

Det første, du måske bemærker, når du har aktiveret Twenty Twenty-Two, er, at indgangspunktet til webstedseditoren ikke længere er placeret i hovedmenuen på dit WordPress-dashboard, men er blevet flyttet under menuen Udseende.

Den nye Udseende-menu i WordPress 5.9
Den nye Udseende-menu i WordPress 5.9

At bringe skabelonen og stilredigeringsfunktionerne under den samme Udseende-menu bør strømline redigeringsoplevelsen. Det skulle gøre det lettere at forstå, at de funktioner, du har adgang til, vedrører præsentationen af dine sider.

Menupunktet Editor åbner webstedets hjemmesideskabelon. Afhængigt af dine læseindstillinger kan dette enten være din seneste indlægsside eller en statisk side.

Webstedseditoren i WordPress 5.9 med Twenty Twenty-Two
Webstedseditoren i WordPress 5.9 med Twenty Twenty-Two

Nu, ved at klikke på WordPress-ikonet i øverste venstre hjørne, vises en ny webstedseditor-navigationsmenu, inklusive tre menupunkter: websted, skabeloner og template parts.

Lad os se nærmere.

Editorens navigationsmenu
Editorens navigationsmenu

Indstillingen Site åbner hjemmeside skabelonen (seneste blogartikler eller statisk startside).

Fra menupunktet Skabeloner får du en liste over de tilgængelige skabeloner. Du kan klikke på en hvilken som helst skabelon på listen for at starte den i editoren.

Pt har Twenty Twenty-Two 11 skabeloner.

Twenty Twenty-Two skabeloner.
Twenty Twenty-Two skabeloner.

Ved at klikke på ellipse-ikonet () til højre kan du rydde dine tilpasninger.

Ryd skabelontilpasninger
Ryd skabelontilpasninger

I modsætning til temaskabeloner kan brugerdefinerede skabeloner kun omdøbes eller fjernes (men du kan redigere brugerdefinerede skabeloner i indlægseditoren).

Omdøb/slet brugerdefinerede skabeloner
Omdøb/slet brugerdefinerede skabeloner

Menupunktet Skabelondele viser de tilgængelige template parts, du kan åbne i editoren til dine tilpasninger.

Du finder fire template parts tilføjet til Twenty Twenty-Two som standard. Holder du markøren over en ændret skabelon, vises et værktøjstip, der fortæller dig, at skabelonen er blevet tilpasset.

Twenty Twenty-Two template parts
Twenty Twenty-Two template parts.

Du kan rydde disse tilpasninger ved at klikke på ellipse-ikonet () til højre.

Ryd skabelondeltilpasninger
Ryd skabelondeltilpasninger

Redigering af skabeloner og template parts

Editoren giver grænsefladen til at tilpasse strukturen af dine skabeloner og template parts.

Her kan du nemt tilføje eller redigere blokke og mønstre, og dine ændringer vil automatisk blive anvendt på hver side, der bruger den pågældende skabelon.

Redigering af Single Post-skabelonen
Redigering af Single Post-skabelonen

Billedet nedenfor viser skabelonen på 404 sider i editoren. Det er en ret simpel skabelon, der kun inkluderer en overskrift, et afsnit og et søgefelt. Alligevel giver det os en god forståelse af, hvordan brugergrænsefladen fungerer.

Twenty Twenty-Two's 404 blokskabelon i skabeloneditoren
Twenty Twenty-Two’s 404 blokskabelon i skabeloneditoren

Her kan du foretage redigeringer og tilpasse skabeloner, så de passer bedst til dine behov. For eksempel vil du måske tilføje et gitter af billedindlæg mønster for at øge dine besøgendes engagement og invitere dem til at gennemse indholdet på dit websted.

Tilpasning af Twenty Twenty-Two's 404 blokskabelon
Tilpasning af Twenty Twenty-Two’s 404 blokskabelon

Header dropdown emenuen øverst i skabeloneditoren viser en liste over de tilgængelige skabelonområder. Den samme liste vises på fanen Skabelon i sidebar Indstillinger.

Skabelonområder i Twenty Twenty-Two
Skabelonområder i Twenty Twenty-Two

Ved at klikke på et vilkårligt skabelonområde (f.eks. Header), bliver du direkte bragt til den skabelondel, du vil redigere.

Hvis du klikker på ellipse-ikonet til højre, får du adgang til editoren til Isoleret skabelondel.

Ellipseikonet starter den isolerede skabelondel-editor
Ellipseikonet starter den isolerede skabelondel-editor

Skabelondel-editoren har også et par håndtag, der kan trækkes, så du kan kontrollere, hvordan skabelonen opfører sig ved forskellige skærmopløsninger.

Justering af dimension til forhåndsvisning af skabelondel
Justering af dimension til forhåndsvisning af skabelondel

Når du er tilfreds med dine ændringer, skal du gemme dine redigeringer og gå tilbage til hovedskabeloneditoren for at kontrollere det endelige resultat.

Hvis du vil dykke dybere ned i den nye informationsarkitektur, kan du tjekke følgende artikler:

Kernen af Twenty Twenty-Two: Et hurtigt overblik over theme.json

For fuldt ud at forstå, hvordan Twenty Twenty-Two og bloktemaer (som Bricksy) fungerer, lad os tage et blik på den nye temakonfiguration og stylingmekanisme baseret på filen theme.json.

Introduceret med WordPress 5.8 giver denne nye mekanisme temaudviklere mulighed for at konfigurere editoren og tilføje funktionsunderstøttelse fra et centralt konfigurationspunkt.

I Twenty Twenty-Two har filen theme.json følgende struktur:

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

Lad os tage et hurtigt kig på hver sektion.

Version

version-feltet beskriver specifikationsversionen, som i øjeblikket er 2.

Indstillinger

settings-sektionen definerer indstillinger på globalt niveau eller blokniveau. Indstillinger defineret på øverste niveau påvirker alle blokke, men blokke kan individuelt tilsidesætte globale indstillinger. I Twenty Twenty-Two finder du følgende indstillinger:

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

Indstilling standarder kaldes forudindstillinger og bruges til at generere brugerdefinerede CSS-egenskaber og klassenavne baseret på en specifik navnekonvention:

  • CSS custom property: --wp--preset--{preset-category}--{preset-slug}
  • CSS class name: .has-{preset-slug}-{preset-category}

Når et tema har defineret dets forudindstillinger, kan de tilsvarende tilpassede CSS-egenskaber bruges til at style blokke og elementer i styles sektionen.

Styles

styles sektionen er, hvor temaer definerer blok- og element default styles. Se for eksempel følgende Twenty Twenty-Two-stile til kerneknapblokken

{
	"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 vil bemærke de tilpassede CSS-egenskaber, der bruges i property declarations.

Brugerdefinerede skabeloner

customTemplates sektionen er, hvor et tema erklærer sine brugerdefinerede skabeloner. Navn og titelfelter er obligatoriske. name og title felter er obligatoriske. Temaer kan også erklære, hvilken posttype der kan bruge skabelonen ved at indstille egenskaben postTypes.

Twenty Twenty-Two giver fire brugerdefinerede skabeloner:

{
	"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 finder de tilsvarende .html-filer i mappen blok skabeloner.

Twenty Twenty-Two's blok-skabelon mappe
Twenty Twenty-Two’s blok-skabelon mappe

Skabelon dele

templateParts sektionen indeholder template part definitions:

{
	"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 og title er obligatoriske. Temaer kan også erklære et area term, hvor template parts vil blive gengivet i editoren.

Twenty Twenty-Two template parts
Twenty Twenty-Two template parts

Skabelondele .html filer er placeret i mappen template parts.

Nu hvor du ved mere om Twenty Twenty-Twos theme.json, kan vi udforske temaets funktioner og den nye redigerings grænseflade mere grundigt.

Lad os dykke ned i Twenty Twenty-Two’s Global Styles.

Globale stilarter i Twenty Twenty-Two

Hvis du ser på Twenty Twenty-Two’ style.css, vil du måske blive overrasket over at bemærke, at den indeholder et minimalt antal CSS-deklarationer. Årsagen er, at styles er deklareret i filen theme.json i blokbaserede temaer.

WordPress 5.9 vil bringe tingene et skridt videre og introducere en ny funktion, der gør det muligt for brugere af bloktemaer at tilpasse udseendet af webstedselementer fra en brugergrænseflade kaldet Global Styles.

Global Styles-grænsefladen kan tilgås fra det nye Styles ikon placeret i øverste højre hjørne af Editoren (se også Global Styles Interface).

Ved at klikke på det ikon vises en ny Styles sidebar inklusive tre separate paneler:

  • Et Preview panel, der viser en forhåndsvisning af dine tilpasninger
  • Et panel med globale styles giver adgang til specifikke grupper af kontrolelementer for typografi, farver og layout
  • Et Blocks item, der giver adgang til stilindstillinger på blokniveau
Styles-sidebar i Twenty Twenty-Two
Styles-sidebar i Twenty Twenty-Two

Twenty Twenty-Two’s farvepalet

Panelet Farver kan hjælpe dig med at redigere de tilgængelige paletter og tildele eller ændre farver til baggrund, tekst eller links.

I palet panelet kan du tilpasse tema– eller standard pattern og endda oprette din brugerdefinerede palet.

Farveindstillinger i Twenty Twenty-Two
Farveindstillinger i Twenty Twenty-Two

Har du fundet koden, der genererer farvekontrollerne endnu?

Hvis ikke, skal du åbne Twenty Twenty-Two’s theme.json i din foretrukne kodeeditor. Du finder følgende farvepaleterklæringer:

{
	"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"
				}
			]
		}
	}
}

Billedet nedenfor viser, hvordan koden ovenfor matcher Twenty Twenty-Twos farvepalet.

Twenty Twenty-Twos farvepalet
Twenty Twenty-Twos farvepalet

Lad os nu antage, at du vil ændre standard baggrundsfarven for en bestemt blok. At vælge en anden farve til blokkens baggrund vil simpelthen tildele en anden CSS-variabel til elementets background-color egenskab. Billedet nedenfor giver et eksempel på det:

Twenty Twenty-Two's primære farve brugt som baggrundsfarve
Twenty Twenty-Two’s primære farve brugt som baggrundsfarve

Og det er alt! Du behøver ikke at tilføje en enkelt linje tilpasset CSS-kode til Customizer eller oprette et child theme til det.

Men lad os fortsætte med at udforske Twenty Twenty-Two’s Global Styles med nogle yderligere eksempler.

Typografiindstillinger

Typografi-panelet er, hvor du kan tilpasse typografistile til dit websteds tekst– og links elementer på globalt plan.

Hvert element giver adgang til en gruppe kontrolelementer, så du kan tilpasse skrifttype familie, størrelse og linjehøjde.

Typografiindstillinger i Twenty Twenty-Two
Typografiindstillinger i Twenty Twenty-Two

Undrer du dig over, hvilken kode der genererer disse kontroller?

Åbn Twenty Twenty-Two’s theme.json og find typography sektionen. Du vil se følgende indstillinger:

{
	"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"
				}
			]
		},
}

Forventede du at se to skrifttypefamilier og fem skriftstørrelser fra koden ovenfor. Og du ville have gættet rigtigt.

Her er, hvordan koden ovenfor oversættes til Global Styles Typography-indstillinger:

Typografistile i Twenty Twenty-Two
Typografistile i Twenty Twenty-Two

Du kan gætte, hvilken indstilling der genererer linjehøjde kontrollen. I Twenty Twenty-Two finder du ikke en specifik indstilling for det, fordi det er aktiveret af egenskaben appearanceTools som er en genvej til flere indstillingserklæringer (se næste afsnit).

Værktøjer til layout og appearanceTools

Det sidste element i Global Styles-sidebar er Layout. I skrivende stund inkluderer den kun en padding kontrol.

Layoutindstillinger i Twenty Twenty-Two
Layoutindstillinger i Twenty Twenty-Two

I Twenty Twenty-Two er Layout-panelet aktiveret af setting property appearanceTools en booleanværdi, der kan bruges til at aktivere flere indstillinger på én gang:

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

"appearanceTools": true true erstatter blot følgende blok af erklæringer:

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

OK – du forstår nu forhåbentlig, hvordan indstillingerne erklæret i theme.json-filen matcher de tilsvarende Global Styles-kontroller.

Der mangler stadig en brik i vores puslespil for at få det komplette billede af det nye WordPress-standardtema: blokmønstre.

Twenty Twenty-Two Blokmønstre

Man kan sige, at Twenty Twenty-Two mest er en samling af mønstre – og det er det stort set. I Twenty Twenty-Two finder du tonsvis af klar-til-brug blokmønstre, som du kan vælge imellem for at bygge fantastiske og uforudsigelige strukturer af indlejrede blokke til dine websider.

Nøglebegrebet her er user empowerment. Og det passer, fordi du med blokmønstre kan bygge alle mulige ting, lige fra en tiltalende portefølje til en enkeltsidet promoverende hjemmeside, selvom du ikke har noget kendskab til HTML eller CSS!

Og WordPress 5.9 bringer betydelige forbedringer til mønstersystemet med den nye Pattern Explorer, et værktøj, der giver dig mulighed for at gennemse mønstre i en fuldskærmsmodal.

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

Det nye værktøj giver dig også mulighed for hurtigt og nemt at importere blokmønstre direkte fra Pattern Directory. Dette åbner op for nye muligheder for både WordPress-brugere og udviklere, så brugen vil sandsynligvis stige betydeligt i fremtiden

WordPress mønstre bibliotek
WordPress mønstre bibliotek

Twenty Twenty-Two indeholder masser af mønstre (over 65) på tværs af fem kategorier.

Twenty Twenty-To mønsterkategorier
Twenty Twenty-To mønsterkategorier

Dette solide sæt mønstre passer perfekt sammen med skabeloner og skabelondele, der kommer med det nye standardtema, hvilket giver en virkelig fantastisk redigeringsoplevelse.

Lagdelte billeder med duotone
Lagdelte billeder med duotone
Video med header og detaljer
Video med header og detaljer
To billeder med tekst
To billeder med tekst

Hvis du endnu ikke har haft mulighed for at eksperimentere med blokmønstre, viser vi dig, hvorfor de betragtes som så kraftfulde værktøjer med et simpelt eksempel.

Antag, at du vil fjerne standardsidefoden fra Index- og Single Post-skabelonerne og erstatte den med et andet Twenty Twenty-Two blokmønster.

Start webstedseditoren fra menuen Udseende eller knappen ved WordPress frontend-værktøjslinjen for at tilpasse indeksskabelonen.

Klik på knappen Indeks for at få vist rullemenuen med headeren, der viser listen over tilgængelige skabelonområder på siden. Klik på ellipseknappen ved siden af footer og derefter på Rediger foooter.

Skabeloninspektøren
Skabeloninspektøren

Som nævnt ovenfor vil dette starte den isolerede skabelondel-editor.

Standard Twenty Twenty-Two footer i den isolerede skabelondel-editor
Standard Twenty Twenty-Two footer i den isolerede skabelondel-editor

Åbn nu blokindsætteren og klik på Mønstre.

Start det nye Pattern Explorer-værktøj, vælg kategorien Twenty Twenty-Two Footers, og vælg den footer du ønsker.

Mønsterudforskeren i Twenty Twenty-Two
Mønsterudforskeren i Twenty Twenty-Two

Tilføj og rediger nu blokkene efter dine behov.

Redigering af foter i den isolerede skabelondel-editor
Redigering af foter i den isolerede skabelondel-editor

Gem headeren, og tjek dit websted igen, når du er tilfreds med dine ændringer.

Billedet nedenfor sammenligner tre skabeloner (indeks, enkelt indlæg og enkelt indlæg uden separatorer) med forskellige header- og footer tilpasninger:

Header- og footer tilpasninger sammenlignet i forskellige Twenty Twenty-Two skabeloner
Header- og footer tilpasninger sammenlignet i forskellige Twenty Twenty-Two skabeloner

Udvidelse af Twenty Twenty-Two med et child-tema

Oprettelse af et child theme til et bloktema er helt anderledes end at oprette et child theme til et klassisk tema.

Men når du først har en god forståelse af et bloktemas struktur, vil du ikke finde det svært at oprette et child theme til Twenty Twenty-Two eller et hvilket som helst andet bloktema.

Så lad os finde ud af, hvordan du tilpasser udseendet og følelsen af dit Twenty Twenty-Two-baserede websted.

1. Opsætning af et child theme for Twenty Twenty-Two

I din /wp-content/themes mappe skal du oprette en ny mappe og navngive den, hvad du vil (i henhold til temaudviklings standarder). I dette eksempel kaldte vi underordnet temamappe twentytwentytwo-child.

Nu skal du bruge en style.css-fil. Åbn din yndlings kodeeditor og opret følgende stylesheet:

/*
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.
*/

Som altid kan du redigere felter efter dine behov.

Dit barnetema er nu tilgængeligt til forhåndsvisning. Du kan aktivere det på skærmbilledet Udseende > Temaer.

2. Tilpasning af globale indstillinger

Siden WordPress 5.9 har child temaer med en theme.json-fil arvet det parent temaets indstillinger. Hvis barnets theme.json definerer et sæt stilarter, så gælder disse stilarter oven på dets forældres stile.

Så vi kan oprette en theme.json-fil, der kun indeholder en lille brugerdefineret blok med indstillings- og stildefinitioner i stedet for at omdefinere alle vores oprindelige valg.

Sådan erklærer du en brugerdefineret farvepalet

Når du bygger et child theme til Twenty Twenty-Two, er den nemmeste opgave at udskifte farvepaletten. Alt du skal gøre er at definere en ny farvepalet i dit barns theme.json som vist nedenfor:

{
"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"
				}
			]
		}
	}
}

Gem din fil og gå tilbage til webstedseditoren. Farvepaletten defineret ovenfor skulle have erstattet standard Twenty Twenty-Two’s farvepalet.

En child themes farvepalet
En child themes farvepalet

Farverne vil blive vist i rækkefølge på selve paletten, og deres navne skal følge de bedste praksisser og navnekonventioner diskuteret på Github.

Du kan læse meget mere om theme.json-farvemuligheder i denne dybdegående oversigt af Carolina Nymark.

Sådan erklærer du brugerdefinerede duotone-filtre

Du kan også erstatte standard duotone farver med dit brugerdefinerede sæt af filtre.

For at gøre det skal du blot tilføje følgende kode til dit barns theme.json-indstillinger på samme niveau som palette genskaben:

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

Gem din fil og tjek resultatet i blokeditoren. Du bør kun se et enkelt duotone filter.

Et duotone-filter med child theme
Et duotone-filter med child theme

3. Tilpasning af blokstile

Som vi nævnte tidligere, med WordPress 5.9, kan du nu tilpasse theme.json-indstillinger og stilarter fra Global Styles-grænsefladen.

Blokstile kan kun tilpasses fra Global Styles-grænsefladen, hvis blokken erklærer understøttelse af specifik funktionalitet i den tilsvarende block.json-fil. Men du kan tilsidesætte standard blokindstillinger i dit child themes theme.json.

Antag nu, at du vil tilsidesætte posttitel- og gruppeblokstile. Alt du skal gøre er at definere de stilarter, du vil tilføje eller tilsidesætte, som vist nedenfor:

{
"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 eksemplet ovenfor ændrede vi skrifttype familien, baggrundsfarven og udfyldningsværdierne for core/post-title, samt top- og bundmargener for core/group.

Billedet nedenfor viser resultatet, som det ville se ud på det offentlige websted:

En tilpasset post title block
En tilpasset post title block

Og det var den anmeldelse!

Vi vil ikke dykke dybere ned i child themes for nu, da det ville gå ud over omfanget af dette indlæg. I mellemtiden finder du flere eksempler på Twenty Twenty-Two child themes på Github.

Opsummering

Mens vi kiggede nærmere på det nye WordPress standardtema Twenty Twenty-Two og dets funktioner (som gør det til det mest fleksible standardtema, der nogensinde er udgivet), afslørede vi den nye informationsarkitektur introduceret med WordPress 5.9. Vi fik endda et smugkig på den nye Global Styles-grænseflade.

Der er mange spændende nye funktioner på vej, og det synes klart, at det nye redigeringsmiljø bliver mere robust, pålideligt og funktionelt med tiden.

Mens mange nye WordPress-funktioner er på vej, forsvinder andre eller aftager i betydning. Mange brugere undrer sig over, hvad der vil ske med Customizer, og hvordan man bedst opretholder bagudkompatibilitet med eksisterende temaer.

Du skal dog ikke forvente pludselig at springe fra traditionelle temaer til at blokere temaer i en enkelt grænse. Vi har i øjeblikket fire forskellige typer temaer at vælge imellem:

  • Bloktemaer: Temaer designet til FSE
  • Universelle temaer: Temaer, der fungerer med både Customizer og Site Editor
  • Hybride temaer: Klassiske temaer, der understøtter FSE-funktioner som theme.json
  • Klassiske temaer: Temaer med PHP-skabeloner, functions.php osv.

Så frygt ikke for nu – der er stadig masser af løsninger at vælge imellem, hvis du ikke føler dig klar til at skifte til bloktemaer endnu.

Og nu er det op til dig! Er du klar til at tage det store spring og nu begynde at bruge bloktemaer? Del dine tanker med os i kommentarerne nedenfor.

Carlo Daniele Kinsta

Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.