https://make.wordpress.org/core/2022/09/01/whats-new-in-gutenberg-14-0-31-august/#highlight-1WordPress 6.1 “Misha” er blevet udgivet den 1. november 2022. Den tredje store udgivelse i år følger WordPress 6.0 Arturo, der blev udgivet den 24. maj, og WordPress 5.9 Josephine, der blev udgivet den 25. januar.

Som det altid sker, bringer nye WordPress-udgivelser nye funktioner, forbedringer og fejlrettelser fra de seneste versioner af Gutenberg-plugin’et ind i kernen. Og WordPress 6.1 er ingen undtagelse, da 11 versioner af Gutenberg-plugin’et er blevet fusioneret ind i kernen, fra 13.1 til 14.1.

I dette indlæg vil vi tage et kig ind bag bag kulissen og præsentere de nye spændende funktioner, der kommer med den nye store version af WordPress.

Matias Ventura gav os et indblik i køreplanen til 6.1, hvor han sagde, at målet med 6.1 er at forfine de oplevelser, der blev introduceret med 5.9 og 6.0, og rette nogle ting, da vi nærmer os fase 3 af Gutenberg-køreplanen.

Vil du have et kig ind bag bag kulissen og se hvad der er nyt med WordPress 6.1? ✨ Fortsæt med at læse... 👀Klik for at Tweete

1. Forbedringer af skabeloneditor: En af de vigtigste nye funktioner er Template Editor. WordPress 6.1 skulle introducere muligheden for at gennemse, visualisere og redigere strukturen af webstedet.

2. Skabelonmønstre: Målet er at give blokmønstre en central rolle i skabelon- og sideoprettelse, tilpasse dem til brugerdefinerede posttyper og bloktyper, forbedre låsfunktionaliteten, forbedre håndteringen af gemte mønstre osv.

3. Globale stilarter og blokke og designværktøjer: WordPress 6.1 vil gøre det muligt at administrere webfonts, implementere responsiv typografi og udvide det værktøjssæt, der er tilgængeligt for blokke.

Når det er sagt, så lad os se nærmere på nogle af de mest kraftfulde funktioner, der kommer med WordPress 6.1:

Fluid typography og spacing

WordPress 6.1 tilføjer understøttelse af Fluid Typography via calc/clamp CSS-funktioner.

Udtrykket Fluid typography beskriver tekstens evne til at tilpasse sig visningsbredden, idet den jævnt skaleres fra en minimal til maksimal bredde.

Det er noget andet end det, du kan opnå med media queries, da media queries giver temaer mulighed for at ændre tekststørrelsen afhængigt af specifikke visningsportstørrelser, men ikke gør noget mellem forskellige værdier.

Nogle temaer understøtter allerede fluid typography. Twenty Twenty-Two bruger f.eks. CSS-funktionen clamp() til flere skriftstørrelser. For eksempel:

"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 ovenfor, bruges flydende skriftstørrelsesværdier for hver enkelt skriftstørrelse.

Fra WordPress 6.1 kan temaer nu automatisk generere flydende skriftstørrelser ved at deklarere den nye egenskab typography.fluid på følgende måde:

"settings": {
	....
	"typography": {
		"fluid": true,
		"fontSizes": [
			{
				"size": "2rem",
				"fluid": {
					"min": "2rem",
					"max": "2.5rem"
				},
				"slug": "medium",
				"name": "Medium"
			}
		]
}

Ved hjælp af typography.fluid og typography.fontSizes[].fluid beregnes værdien af hver skriftstørrelse automatisk ved hjælp af følgende formel:

--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});

Eksempelvis:

--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});

Bemærk, at i skrivende stund er Fluid Typography en eksperimentel funktion. Du kan dykke ned i de tekniske detaljer i Block supports: add fluid typography.

Se også Sådan tilføjer du fluid typography til WordPress Block-temaer af Rich Tabor og fluid typography med Gutenberg af Carolina Nymark.

På samme måde som Fluid Typography introducerer WordPress 6.1 også understøttelse for Fluid Spacing.

Før WordPress 6.1 var det kun muligt at indstille brugerdefinerede afstandsværdier i editoren, og temaforfattere kunne ikke angive faste værdier for padding, margin og gap. Så det var ikke muligt at overføre afstandsindstillinger fra et tema til et andet eller at bevare afstandsværdierne, når man kopierer og indsætter indhold mellem forskellige websteder.

Nu kan temaudviklere erklære understøttelse af Fluid Spacing ved hjælp af indstillingerne spacing.spacingScale og spacing.spacingSizes[] (se også Theme.json: Tilføj forindstillinger for afstandsstørrelser og Udvid theme.json til at give forindstillinger for afstandsstørrelser).

"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 kan finde egenskaber for fluid typography og afstandsforhold dokumenteret i Global Settings & Styles Presets og i den levende reference til theme.json API V2.

Direkte fra pressen... dette er alt, hvad du kan forvente at se i WordPress 6.1 (kommer november 2022! 🗓), fra nye og forbedrede bloktyper, fluid typography og meget mere! 🎉Klik for at Tweete

Redigering af blokke kun med indhold

WordPress 6.1 introducerer indholdsbaseret redigering for blokke, mønstre og skabeloner. Når redigering kun af indhold er aktiveret, kan brugerne kun ændre indholdet af en blok eller et mønster, hvilket forhindrer dem i ved et uheld at ødelægge layoutet eller ændre stilarter.

I øjeblikket er det ikke muligt at aktivere redigering kun af indhold fra grænsefladen Visual editor. For at aktivere denne funktion skal attributten templateLock være indstillet til contentOnly, og du kan bruge kodeeditoren til det.

Følgende billede viser et simpelt eksempel.

Indstilling af skabelonLås til kun indhold i kodeeditoren
Indstilling af skabelonLås til kun indhold i kodeeditoren

Når redigering kun af indhold er aktiveret for en blok eller et mønster, ændres sidebaren med indstillinger. Du vil ikke se de sædvanlige indstillingskontroller, men en liste over blokke, der er inkluderet i gruppen. Du kan vælge en af disse blokke ved at klikke på blokken i editorens lærred eller på det tilsvarende listeelement i sidebar.

Kun indholdsredigering
Kun indholdsredigering

Du kan deaktivere redigering kun af indhold ved at klikke på knappen Ændre i gruppens værktøjslinje.

Deaktivering af redigering kun af indhold
Deaktivering af redigering kun af indhold

Når du er færdig med dine redigeringer, kan du igen aktivere redigering kun af indhold ved at klikke på knappen Udført.

Kun indholdsredigering er deaktiveret
Kun indholdsredigering er deaktiveret

Desuden er blokke, der ikke har noget indhold, skjult fra listevisningen og kan ikke få fokus i bloklisten.

Du kan læse mere om redigering kun med indhold i udviklingsnoten og i dette blogindlæg af Rich Tabor.

Forbedrede bloktyper

Med så mange Gutenberg-versioner, der er fusioneret ind i kernen, vil WordPress 6.1 medføre tonsvis af ændringer og forbedringer af eksisterende bloktyper.

Tilføjet Border Support for Columns-blokken

Columns-blokken udnytter nu den nye BorderBoxControl-komponent, der gør det muligt for WordPress-brugere at angive tilpassede grænser for kolonner og også indstille helt forskellige stilarter for hver grænse (se også Column: Add border support to column blocks pull request).

Et skærmbillede, der viser, hvordan man tilpasser kolonnekanter i WordPress 6.1
Tilpasning af kolonnegrænser i WordPress 6.1

Individuelle grænser kan også indstilles i filen theme.json på følgende måde:

"core/column": {
	"border": {
		"top": {
			"color": "#CA2315",
			"style": "dashed",
			"width": "6px"
		},
		"right": {
			"color": "#FCB900",
			"style": "solid",
			"width": "6px"
		}
	}
}

Udviklere kan læse mere om den nye kontrol i Component Reference – BorderBoxControl.

Grænsekontrolelementer til billedblokke

Med Gutenberg 13.8 blev der indført understøttelse af alle grænsekontroller for billedblokken. Ændringen vil blive tilføjet til kernen med WordPress 6.1, hvilket åbner døren for nye og store muligheder for webkreative.

Billedgrænsekontrol i WordPress 6.1
Billedgrænsekontrol i WordPress 6.1

Forbedringer af Comments block

WordPress 6.1 bringer os også en forbedret Comments block. Fra og med den næste version af WordPress vil brugerne kunne bruge mere avancerede redigeringsfunktioner på Comments block.

På billedet nedenfor kan du se kommentarblokkens indstillingssidebar og de ændringer, der er anvendt på Comments Title.

Den forbedrede kommentarblok i WordPress 6.1
WordPress 6.1 bringer en forbedret Comments block

Variationer i blokken for indlægstermer for brugerdefinerede taksonomitermer

Post Terms-blokken er blevet forbedret med en ny brugerdefineret taxonomi-variation. Du kan nu registrere en ny brugerdefineret taksonomi, f.eks. indlægstypen “Skuespillere i en film”, og du vil kunne tilføje en liste over taksonomitermer til det aktuelle indlæg eller den brugerdefinerede indlægstype.

Et billede, der viser tilpassede taksonomi-udtryk for en blok med indlægsvilkår
Brugerdefinerede taxonomibegreber til en blok med indlægstermer

Billedet nedenfor viser en liste over skuespillere i en indlægstype Film.

Tilpasning af udseendet af en Post Terms-blok med tilpassede taksonomitermer
Tilpasning af udseendet af en blok med indlægstermer med brugerdefinerede taksonomitermer

Et nyt parent filter til forespørgselsblokken

Der er nu et nyt Parent-filter til rådighed for forespørgselsblokken for at vise hierarkiske indlæg og sider med samme overordnede.

Viser indlæg med den samme forælder i en forespørgselsløkke-blok
Et nyt Parent filter gør det muligt at vise indlæg med samme forælder i en forespørgselsblok

Kontrol af skriftfamilier i overskriftsblokken

Overskriftsblokken understøtter nu kontrolelementer for skrifttypefamilier.

Indstilling af en brugerdefineret skrifttypefamilie i en overskriftsblok
Indstilling af en brugerdefineret skrifttypefamilie i en overskriftsblok

Vandret og lodret afstand i galleriblokken

Fra og med WordPress 6.1 giver en ny aksial afstandskontrol dig mulighed for at indstille forskellige horisontale og vertikale mellemrum for billeder i galleriblokken.

Denne ændring resulterer i større fleksibilitet, når du opretter layoutet af billedgallerier.

Viser indlæg med den samme parent i en forespørgselsløkke-blok
Tilpasning af horisontale og vertikale mellemrum i en galleriblok

Featured images i omslagsblok

Featured images får stadig en masse opmærksomhed, og i WordPress 6.1 er anvendelsesområdet for deres brug udvidet yderligere. Fra og med 6.1 kan det fremhævede billede vælges direkte fra pladsholderen i Cover-blokken, som vist på følgende billeder.

Viser indlæg med den samme forælder i en forespørgselsløkke-blok
Brug et fremhævede billede i pladsholderen i Cover-blokken

Denne ændring skulle være med til at skabe en mere ensartet brugeroplevelse og gøre det mere tydeligt for brugeren, hvad de tilpasser.

Der er også blevet tilføjet en omskifter til et featured image til media replace flowet.

Brug udvalgte billeder i medier erstatte flow i WordPress 6.1
Brug udvalgte billeder i medier erstatte flow

Udseendeværktøjer til indlægsnavigationslinks

Indstillingsegenskaben appearanceTools giver dig mulighed for at tilvælge flere indstillinger, der er deaktiveret som standard.

Siden WordPress 6.1 kan du for temaer, der understøtter indstillingsegenskaben appearanceTools, tilpasse linkfarve og font families i Post Navigation Link.

Tilpasning af linkfarve i Post Navigation Links
Tilpasning af linkfarve i Post Navigation Links

Du kan læse mere om appearanceTools -egenskaben i vores introduktion til Twenty Twenty-Two-temaet.

Lås inde i containerblokken med et enkelt klik

En ny toggle gør det nu muligt for brugere at låse blokke i en container af blokke med et enkelt klik. Dette gælder for blokke af typen Group, Cover og Column.

Lås inde i en gruppeblok
Lås inde i en gruppeblok

Forbedret listeblok

List-blokken er blevet forbedret og udnytter nu indre blokke.

Denne ændring gør det nemmere at sortere og indrykke listeelementer og fører helt sikkert til en forbedret brugeroplevelse.

Sortering af listeemner
Sortering af listeemner
Indrykning og udrykning af listeemner
Indrykning og udrykning af listeemner

Understøttelse af pseudoelementer i blok-temaer

Nu kan bloktemaer tilpasse elementers og blokkers udseende afhængigt af deres tilstand (aktiv/fokus/hover).

Dette er et eksempel på brug af pseudo-selektorer med links, som defineret i Twenty Twenty-Three’s 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"
			}
		}
	}
}

Den følgende kode knapstilarter:

"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ølgende billeder.

En knappes hover-tilstand i WordPress 6.1 med Twenty Twenty-Three-tema
En knappes hover-tilstand i WordPress 6.1 med Twenty Twenty-Three-tema
En knappes aktive tilstand i WordPress 6.1 med Twenty Twenty-Three-tema
En knappes aktive tilstand i WordPress 6.1 med Twenty Twenty-Three-tema

Men du kan også style elementer på blokniveau. Den eneste forskel er, at du skal definere stilarter inden for en blok. Som et eksempel anvender følgende kode fra Twenty Twenty-Threes theme.json stilarter på links i kerneblokken Navigation:

"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)"
			}
		}
	}
}

Yderligere funktioner og forbedringer til blokeditoren

Selv om det er en konsolideringsversion, vil WordPress 6.1 bringe så mange ændringer og forbedringer, at det ville være umuligt at opremse dem alle i én artikel (men tjek denne artikel fra Anne McCarty for en omfattende liste over designværktøjer pr. blok).

Her vil vi dykke ned i følgende ændringer:

Variationer af skabelondele i blokindsætningsværktøjet

Variationer af skabelondele er nu tilgængelige i blokindsatsen, hvilket gør det nemmere at tilføje skabelondele til dit websted.

Tilføj nemt skabelondele til dit websted
Header-skabelondelvariationer i WordPress 6.1

Denne ændring gør redigeringsprocessen mere ligetil og hurtigere, så brugerne hurtigt kan se variationer af en skabelondel på én gang med få klik.

Visualiser margen og padding

En lille, men nyttig forbedring er fremhævelsen af marginer og padding, mens brugeren justerer dem. Dette skulle gøre det meget tydeligere, hvor meget plads der tilføjes inden for eller uden for elementerne.

Margin og polstring fremhæver inde i den nye WordPress 6.1-udgivelse
Margen og padding fremhæves

Forbedringer af sidebar Indstillinger

WordPress 6.1 vil også vise flere grænsefladeforbedringer til Settings sidebar.

Sidebaren med indlægsindstillinger er blevet lidt omdesignet. Nu er felterne for indlægsformat, slug, skabelon og forfattere justeret og har samme bredde. Desuden er indlægsplanlæggeren blevet forenklet for at gøre oplevelsen mere forståelig. Skabelonafsnittet er også blevet flyttet ind i en popover for at spare plads og rydde op i grænsefladen.

En forenklet indstillingssidebjælke, der er nemmere at administrere
WordPress 6.1 vil fremvise en forenklet indstillings-sidebar

Derudover er skabelonpanelet blevet erstattet af et skabelonlink. Når der klikkes på skabelonlinket, viser skabelonen Standardskabelon i en popover.

Et billede, der viser standardskabelonen popover
Skabelon-popoveren i WordPress 6.1
Flydende typografi, forbedrede bloktyper og meget mere! WordPress 6.1 har en masse spændende opdateringer i vente! 🎉 Lær mere i denne guide 🚀Klik for at Tweete

Udgiv popover-designopdateringer

Datovælgeren i Publish-popoveren er blevet redesignet og bruger nu “eksisterende WordPress-komponenter og Emotion-styling”

Den fornyede dato-tidsvælger med yderligere stylingmuligheder
WordPress 6.1 fremviser en fornyet datotidsplukker

Der er mere teknisk indsigt i Designopdateringer til popoveren Publish (DateTimePicker).

Tid til at læse i infopanelet

Informationspanelet, der er tilgængeligt i den øverste værktøjslinje, er blevet forbedret og viser nu Tid til læsning ud over Ord, Tegn, Overskrifter, Afsnit og Blokke.

I QWordPress 6.1 viser Info-panelet nu Tid til at læse
Infopanelet viser nu tid til læsning

Den anslåede læsetid er beregnet på et gennemsnit på 189 ord pr. minut. Læs mere i @wordpress/editor: Tilføj estimeret tid til at læse til indholdsfortegnelsen i editor.

Kontrol af blokafstand tilføjet til Styles UI

Nu kan brugere justere lodret og vandret afstand fra Styles UI for blokke, der understøtter denne funktion.

Block Spacing-kontroller for blokken Social Icons
Block Spacing-kontroller for blokken Social Icons

Nye og forbedrede byggeværktøjer

WordPress 6.1 vil også udvide funktionaliteten af Site Builder. Blokmønstre vil være tilgængelige flere steder, og et bredere udvalg af skabelontyper vil forbedre redigeringsoplevelsen i skabeloneditoren.

Oprettelsesmønstre for indlægstyper

WordPress 6.0 introducerede Page Creation Patterns, som er en måde at give et udvalg af mønstre, hver gang en bruger opretter en ny side. På denne måde behøver du ikke at bygge siden op fra bunden, men kan vælge et mønster fra en modal og udfylde indholdet, og så er du klar til at gå i gang.

For at aktivere denne funktion skal mindst ét blokmønster erklære understøttelse af bloktyperne core/post-content.

Nu, fra WordPress 6.1, udvides denne funktion til at omfatte alle indlægstyper. Det eneste du skal gøre er at inkludere core/post-content i dit mønsters blockTypes og indstille den relevante postTypes.

Lad os nu finde ud af, hvordan du kan drage fordel af denne nye funktion med et praktisk eksempel. Antag, at du har en indlægstype Movie. Først skal du registrere et blokmønster som beskrevet her.

Eller du kan gå den nemme vej og bruge den implicitte mønsterregistrering (for enkelhedens skyld bruger vi i dette eksempel implicit mønsterregistrering).

Opret en PHP-fil til dit block pattern i en /patterns-mappe i dit temas mappe (i dette eksempel har vi brugt Twenty Twenty-Two). Tilføj derefter følgende overskrift:

<?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 -->

Og det er det. Hver gang du opretter en ny Movie post type, vises der nu en Vælg et mønster-modal på skærmen, hver gang du opretter en ny Movie post type.

En modal vises på skærmen, når brugeren opretter en ny indlægstype
En modal vises på skærmen, når brugeren opretter en ny indlægstype

Hvis du ønsker, at modalen skal vises på flere indlægstyper, skal du blot tilføje de tilsvarende slugs adskilt af kommaer:

<?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 -->

Du kan få et nærmere overblik over oprettelsesmønstre under Mulighed for at bruge oprettelsesmønstre til andre indlægstyper end side.

Flere skabelontyper i webstedsredigeringsprogrammet

Med WordPress 6.0 kan der kun oprettes et begrænset antal skabeloner i Site Editor:

Tilføj ny skabelon i WordPress 6.0
Tilføj ny skabelon i WordPress 6.0

Fra og med WordPress 6.1 vil det være muligt at oprette en anden skabelon for hver enkelt indlægstype.

Og du kan også tilføje og redigere skabeloner for kerne- og brugerdefinerede taksonomier, selv for enkelte kategorier eller tags.

Hvis du registrerer brugerdefinerede indlægstyper eller en brugerdefineret taksonomi, vil de automatisk blive opført i feltet til valg af skabelon i Site Editor.

Et billede, der viser en liste over skabelontyper, der er tilgængelige i WordPress 6.1
En liste over skabelontyper, der er tilgængelige i WordPress 6.1

Men ikke kun det. Når du har valgt skabelonposttypen, beder en modal brugeren om at oprette en skabelon for alle indlæg af den pågældende type eller at oprette en ny skabelon for et specifikt indlæg af den valgte posttype.

Tilføjelse af en skabelon til en brugerdefineret indlægstype i WordPress 6.1
Tilføjelse af en skabelon til en brugerdefineret indlægstype i WordPress 6.1

Derefter giver en ny modal en liste over de indlæg, der er tilgængelige for den pågældende posttype.

Tilføjelse af en ny skabelon i WordPress 6.1
Tilføjelse af en ny skabelon i WordPress 6.1

Twenty Twenty-Three og andre temaforbedringer

WordPress 6.1 leverer også et helt nyt standardtema: Twenty Twenty-Three. Det er et minimalistisk tema uden billeder eller ekstra funktionalitet.

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

Det nye standardtema samler alle de nyeste funktioner til redigering af webstedet på ét sted og er en perfekt sandkasse til at teste skabeloner og skabelondele, stilvariationer, fleksibel typografi og afstand og alle de funktioner, der er indført med de nyeste versioner af WordPress.

Og derfor er det også et fantastisk værktøj til at lære, hvordan man udvikler temaer, skabeloner og blokmønstre med arbejdseksempler.

Du kan dykke dybere ned i det nye WordPress-standardtema i vores dybdegående oversigt.

Tyve Treogtyve stilvariationer
Tyve Treogtyve stilvariationer

Udover det nye standardtema introducerer WordPress 6.1 også flere temaforbedringer.

Opdater URI-header i temaer

Før WordPress 6.1 blev der vist en meddelelse om tilgængelig opdatering til brugeren, hvis et tema havde samme navn som et tema, der var tilgængeligt i WordPress-temaer-mappen, hvis et tema havde samme navn som et tema, der var tilgængeligt i WordPress-temaer-mappen.

Med WordPress 6.1 forhindrer en ny Update URI-header, at man ved et uheld overskriver temafiler fra tredjepart. Denne funktion er især nyttig, hvis du har et internt udviklet tema med samme navn som et tema i WordPress-temakataloget, men ikke ønsker at dele det med fællesskabet.

Nu vil WordPress ikke forsøge at opdatere det, hvis værdien af Update URI temahovedfeltet ikke passer til https://wordpress.org/themes/{$slug}/ eller w.org/theme/{$slug}, hvis værdien af ikke passer til eller.

Hvis Update URI er indstillet, skal være en URI med et unikt værtsnavn, f.eks. https://wordpress.org/themes/my-theme/ eller https://example.com/my-theme/.

Temaudviklere kan finde en mere dybdegående oversigt over den nye Update URI temaoverskrift i den officielle dev note.

Filter til blokering af temaer under skærmen “Tilføj temaer”

En ny genvej gør det nu muligt at filtrere blokeringstemaer, når du tilføjer et nyt tema til din WordPress-installation.

Der er også blevet tilføjet en ny hjælpefane for blokeringstemaer på samme skærm.

Blokering af temaer og fanebladet Hjælp i skærmbilledet for temainstallation
Blokering af temaer og fanebladet Hjælp i skærmbilledet for temainstallation

Ændringer for udviklere

WordPress 6.1 tilføjer også et nyt API og mange funktioner og ændringer for udviklere.

Ny API til persistens af præferencer

WordPress 6.1 introducerer et helt nyt API til fastholdelse af præferencer, der gemmer redaktørpræferencer i WordPress-databasen i stedet for lokalt lager.

På denne måde kan brugerpræferencerne gemmes på tværs af alle browsere og enheder.

Til dette formål er det tidligere persistenssystem i pakken @wordpress/data blevet forældet, og en ny pakke preferences-persistence er blevet introduceret. Den nye pakke gemmer data til brugermeta via Rest API‘en. Dataene vil også blive gemt i det lokale lager som en fallback, hvis brugeren går offline eller en anmodning afbrydes (se også pull #39795).

Kæmper med nedetid og WordPress-problemer? Kinsta er hostingløsningen designet til at spare din tid! Tjek vores funktioner

Understøttelse af knapstilarter i theme.json

Med WordPress 6.1 kan du tilføje knapstilarter til dine temaer ved hjælp af theme.json. Dette giver temaudviklere mulighed for at tilføje konsistens til knapper på tværs af blokke. Et eksempel er søgeblokken, men også blokke fra tredjeparter vil drage fordel af denne ændring.

For at gøre det muligt vil der blive tilføjet en ny wp-element-button -klasse til knapelementer, så de kan dele den samme stil.

Du kan teste denne ændring ved at tilføje følgende kode til din theme.json i et udviklingsmiljø:

{
	"styles": {
		"elements": {
			"button": {
				"color": {
					"background": "blue"
				}
			}
		}
	}
}

Variationer af søgeblokke understøtter nu Query Vars

WordPress 6.1 vil understøtte variationer af søgeblokvariationer baseret på forespørgselsvarier. Det betyder, at du vil være i stand til at give dine brugere søgefelter, der kan bruges til at søge granulært efter enhver type indhold.

I det følgende eksempel registrerer vi en blokvariation for en movies posttype. Eksemplet er baseret på Carolina Nymars vejledning om blokvariationer.

Tilføj følgende kode i dit (under)tema’s 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' );

Opret nu følgende block-variations.js-fil i dit (under)temas mappe med aktiver:

wp.blocks.registerBlockVariation( 
	'core/search', 
	{
		name: 'movie-search',
		title: 'Movie Search Block',
		attributes: {
			query: {
				post_type: 'movies'
			}
		}
	} 
);

Genindlæs nu dit WordPress-dashboard, og søg efter en Movie Search Block-variant i blokindsatsen.

WordPress 6.1 har nu en tilpasset søgeblokvariant i blokindsætteren
En brugerdefineret Search-blokvariation i blokindsatsen

Du kan læse mere om blokvariationer i den officielle dokumentation.

Et nyt knapper-element i globale stilarter

WordPress 5.9 introducerede en Global Styles-grænseflade, så brugerne kan tilpasse stilforindstillinger for deres websteder, enten globalt eller på blokniveau.

Med den første implementering kunne du tilpasse farverne for baggrund, tekst og links. Nu er der fra og med WordPress 6.1 blevet tilføjet et nyt element Buttons til panelet Colors, så brugerne kan styre udseendet af knapper på hele deres websteder.

Tilpasning af knapper i indstillingerne for globale stilarter
Tilpasning af knapper i indstillingerne for globale stilarter

Dette ville påvirke knapstilen i alt på hele webstedet, fra blokken Knapper til blokken Søgning og blokke fra tredjeparter, der gør brug af knapper.

Udseendeværktøjer, der er tilgængelige for alle temaer

Før WordPress 6.1 var Appearance Tools kun tilgængelige i blok-temaer. Med 6.1 kan alle temaer inkludere denne funktion ved blot at tilføje understøttelse i deres funktionsfil:

add_theme_support( 'appearance-tools' );

Dette vil aktivere alle følgende indstillinger på én gang:

  • border: farve, radius, stil, width
  • farve: link
  • spacing: blockGap, margin, padding
  • typografi: lineHeight

Ny is_login_screen() Funktion

En ny is_login_screen() -funktion giver dig nu mulighed for at bestemme, om den aktuelle side er login-skærmen. Brugerdefinerede login-placeringer understøttes også.

Du kan bruge det nye betingede tag på følgende måde:

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 ville være følgende:

is_login_screen() kontrollerer, om den aktuelle side er login-skærmen
is_login_screen() kontrollerer, om den aktuelle side er login-skærmen

Nye sundhedskontroller af webstedet for Persistent Object Cache og Full Page Cache

WordPress 6.1 introducerer to Site Health-kontroller for Persistent Object Cache og Page Cache. Begge kontroller kører kun på produktionsmiljøer.

Du kan se resultaterne af disse nye tests i fanen Status på skærmen Site Health.

Testen Persistent Object Cache fastslår, om webstedet bruger en vedvarende objektcache, og hvis ikke, anbefales det at bruge den, hvis det giver mening for webstedet.

Persistent Object Cache-testresultat i Site Health
Persistent Object Cache-testresultat i Site Health

Ud over den nye test introducerer WordPress 6.1 flere nye filtre, som hostingudbydere kan bruge i deres respektive miljøer.

Med site_status_persistent_object_cache_url kan host erstatte standardlinket Learn more for persistent object cache med et brugerdefineret link. For eksempel:

add_filter( 'site_status_persistent_object_cache_url', function() {
	return 'https://example.com/persistent-object-cache';
} );

Med site_status_persistent_object_cache_notes kan værter erstatte standardnoterne for at anbefale deres foretrukne objektcacheløsning. Her er et eksempel på brug:

add_filter( 'site_status_persistent_object_cache_notes', function( $notes ) {
	$notes = __( 'Custom notes.', 'text-domain' );
	return $notes;
} );

site_status_persistent_object_cache_thresholds filter de tærskelværdier, der bruges til at afgøre, om der skal foreslås brug af en vedvarende objektcache. Standardværdierne er:

$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 bruge filteret på følgende måde:

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 er et kortslutningsfilter, der filtrerer, om der skal foreslås brug af en vedvarende objektcache og omgå standardtærskelkontrol. Du kan bruge det på følgende måde:

add_filter( 'site_status_should_suggest_persistent_object_cache', '__return_true' );

Testen Full Page Cache kontrollerer, om webstedet bruger full page cache, og om svartiden er OK:

Full Page Cache testresultat i Site Health
Full Page Cache testresultat i Site Health

To nye filtre gør det også muligt for værter at tilpasse svarstærsklen og tilføje brugerdefinerede cache-headere, der skal registreres.

site_status_good_response_time_threshold filtrerer den tærskel, under hvilken en svartid betragtes som god. Standardværdien er 600 ms (se også: Langsomme serverresponstider påvirker ydeevnen).

site_status_page_cache_supported_cache_headers gør det muligt for hostingudbydere at tilføje brugerdefinerede cache-headers og de tilsvarende kontrol-callbacks. Udviklingsnoten indeholder følgende eksempel på brug:

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;
});

Udviklere kan dykke dybere ned i de nye Site Health-kontroller i:

Opdateringer af værktøjet Create-block Scaffolding

WordPress 6.1 introducerer også nye funktioner og opdateringer til @wordpress/create-block-pakken, som udviklere kan bruge til at skabe nye blokke.

Et blok-scaffolding er den understøttende mappestruktur, der gør det muligt for WordPress at genkende en blok.

Et par nye funktioner og flere forbedringer er indført med WordPress 6.1.

Et nyt –variant -flag gør det muligt for blokudviklere at vælge en blokvariant, der skal stilladseres. De interne skabeloner, der leveres af værktøjet create-block, understøtter dynamic – og static -varianter, hvilket betyder, at du kan stilladsere henholdsvis en dynamisk eller statisk blok. Standardværdien er static.

Du kan bruge det nye flag på følgende måde:

npx @wordpress/create-block my-first-block -variant=dynamic

Udviklere kan definere brugerdefinerede varianter ved at tilføje et variants -objekt til skabelondefinitionen.

En yderligere funktion gør det nu muligt for blokudviklere at tilføje nye blokke til et eksisterende plugin takket være --no-plugin -flaget.

npx @wordpress/create-block custom-block --no-plugin

Ved at køre kommandoen ovenfor oprettes et nyt sæt blokfiler i en undermappe til den aktuelle mappe.

Bemærk, at scriptet ikke er opmærksom på dets placering:

Ved at kalde npx @wordpress/create-block block-name --no-plugin oprettes en ny blok inde i folderNamedirectory.

Du kan læse mere om opdateringer af værktøjet create-block scaffolding.

Caching af forespørgselsresultater i WP_Query

WordPress 6.1 ændrer den måde, hvorpå databaseforespørgsler udføres i klassen WP_Query. Fra 6.1 vil forespørgsler blive cachet med det resultat, at hvis en forespørgsel udføres mere end én gang, vil resultaterne blive indlæst fra cachen.

Både websteder, der anvender persistent object caching, og websteder, der anvender in-memory-caching, vil drage fordel af denne ændring, selv om fordelene for sidstnævnte vil være mindre.

Som standard vil alle kald til WP_Query blive cachet, men udviklere kan fravælge caching af forespørgsler ved hjælp af parameteren cache_results:

$args = array(
	'posts_per_page' => 20,
	'cache_results'  => false
);
$query = new WP_Query( $args );

Du kan også deaktivere caching af forespørgsler globalt ved hjælp af disable_caching hook’en, men det anbefales ikke.

Det er værd at bemærke, at nogle forespørgselsparametre ikke tages i betragtning i forbindelse med query caching. Den mest almindeligt anvendte af disse parametre er fields -parameteren. Årsagen er, at hvis fields blev taget i betragtning, ville det have givet flere caches for flere delmængder af de samme data, hvilket ville have ført til en forringelse af ydeevnen.

For en dybere oversigt over WP_Query caching, se Forbedringer af WP_Query-ydelsen i 6.1 dev note.

Skabelondele i klassiske temaer

Fra og med WordPress 6.1 understøtter klassiske temaer blokbaserede skabelondele. For at tilføje denne funktion skal temaer tilføje understøttelse for block-template-parts som vist nedenfor:

function add_block_template_part_support() {
	add_theme_support( 'block-template-parts' );
}
 
add_action( 'after_setup_theme', 'add_block_template_part_support' );

Klassiske temaer kan inkludere skabelondele i PHP-skabeloner ved hjælp af funktionen block_template_part. Du kan læse mere om denne funktion i Blokbaserede “skabelondele” i udviklernotat til traditionelle temaer.

Få en forklaring på, hvad der kommer til WordPress 6.1 i denne guide - og gør dig klar til ændringer som fluid typography, nye sundhedstjek af webstedet og meget mere! 🚀Klik for at Tweete

En bemærkning om JPEG til WebP-billedkonvertering

Oprindeligt så det ud til, at WordPress 6.1 også ville have indført understøttelse af automatisk JPEG til WebP-billedkonvertering.

Men mange bidragydere rapporterede om flere problemer. Specifikt blev det bemærket, at:

Ressourcer til generering af billeder, når du uploader et billede, vil stige dramatisk, men ressourcerne til at servere et billede vil blive sænket. Da upload af billeder er meget sjældent sammenlignet med servering af billeder, burde den ekstra indsats for at komprimere og lagre billeder være det værd.

Og:

Faktisk er den dramatiske stigning i ressourceforbruget, når der uploades et billede, en meget dårlig bivirkning her. Det betyder, at mange uploads vil mislykkes og efterlade brugerne strandet. Det vil også øge supportforespørgsler til både WordPress og hostingfirmaerne dramatisk. Synes ikke, at dette er acceptabelt. På grund af dette, selv om der er behov for understøttelse af billedmultimime i WordPress, virker den nuværende fremgangsmåde ikke som en god løsning.

Endelig er den automatiske konvertering fra JPEG til WEBP efter et indlæg af Matt Mullenweg på WordPress.org blevet fjernet fra WordPress 6.1.

Jeg er interesseret i at understøtte nye formater og forbedre ydeevnen, men jeg synes, at denne ændring, der skubbes som standard til brugerne, når de opgraderer til 6.1, er meget for meget for lige nu, herunder med nogle af de kluntede interaktioner OS’er stadig har omkring webp (og HEIC!) filer.

Jeg er glad for, at understøttelsen af arbejdet med webp- og HEIC-filer forbliver i kernen, da vi bør være liberale med hensyn til, hvad vi accepterer og arbejder med, men ikke med ændringen om at konvertere alt til webp, når JPEG-filer uploades.

Dette er et glimrende område for et canonical plugin, et koncept, som jeg synes, at alle Make-hold bør udforske meget mere som et sted at eksperimentere og skubbe funktionalitet…

Anyway, WordPress-brugere og -udviklere kan teste automatisk JPEG til WebP-billedkonvertering ved at installere Performance Lab-plugin fra WordPress Performance Group.

Yderligere ændringer for udviklere

Ud over de funktioner og forbedringer, som vi har diskuteret ovenfor, introducerer WordPress 6.1 flere yderligere ændringer for udviklere. Du vil måske grave dybere ned i disse ændringer i dev-noterne:

Opsummering

Med WordPress 6.1 ser vi en konsolidering af mulighederne for WordPress-webstedsredigering. Vi er stadig i fase to af Gutenbergs langsigtede køreplan, men de værktøjer og funktioner, der er tilgængelige for os, bliver mere pålidelige og robuste med tiden. WordPress 6.1 bringer Fluid Typography, nye værktøjer til opbygning af websteder og tonsvis af forbedringer af eksisterende blokke.

Men ikke kun det. WordPress 6.1 bringer også betydelige forbedringer i CMS-ydelsen. To nye Site Health checks registrerer brugen af Full Page Cache og Persistent Object Cache, query caching forbedrer WP_Query ydeevne, og der er også forbedringer af PHP-ydelsen for registrering af kerneblokke.

Kort sagt er 6.1 en version, som WordPress-brugere og -designere vil elske, og som udviklere vil nyde godt af mange forbedringer på flere områder af CMS’et.

Nu er det op til dig. Hvad kan du bedst lide i WordPress 6.1? Har du allerede testet ny version i dit udviklingsmiljø? Del dine tanker om WordPress 6.1 med os i kommentarfeltet nedenfor.


Spar tid, omkostninger og maksimer webstedets ydeevne med:

  • Øjeblikkelig hjælp fra WordPress-hostingeksperter, 24/7.
  • Cloudflare Enterprise integration.
  • Globalt publikum når med 35 datacentre verden over.
  • Optimering med vores indbyggede Application Performance Monitoring.

Alt dette og meget mere, i en plan uden langsigtede kontrakter, assisteret migration og en 30-dages pengene-tilbage-garanti. Tjek vores planer, eller tal med salgsteamet for at finde den plan, der passer til dig.