Hvad er nyt i WordPress 5.9 – Fuld webstedsredigering, globale stilarter, blokke, patterns, API’er, UI-forbedringer og meget mere

WordPress 5.9 Josephine er her! Årets første WordPress-version var oprindeligt planlagt til udgivelse den 14. december 2021. På grund af flere åbne problemer og uløste fejl, var den endelige udgivelse blevet forsinket og er nu endelig blevet frigivet den 25. januar 2022.

Hvis du undrer dig over, hvad der er nyt i WordPress 5.9, er det korte svar Full Site Editing (FSE).

Og faktisk er mange 5.9-funktioner kun tilgængelige, hvis du bruger et tema, der understøtter fuld webstedsredigering, såsom det helt nye standardtema, Twenty Twenty-Two.

Med WordPress 5.9 kommer vi til hjertet af anden fase af Gutenberg roadmap: Tilpasningsfasen, som for det meste er fokuseret på redigering af hele webstedet, blok patterns, blokkatalog og blokbaserede temaer.

Med 5.9, som udkommer i næste måned, er vi – vil jeg sige – på MVP, det mindste levedygtige produkt i denne tilpasningsfase af Gutenberg.

Disse ord fra Matt Mullenweg i 2021 State of the Word opsummerer bedst nøglefunktionerne i den nye WordPress-udgivelse.

Når det er sagt, hvad er nyt med den første WordPress-udgivelse i 2022?

Lad os finde ud af det!

Global Styles: A Graphic Interface til theme.json

Med udgivelsen af ​​WordPress 5.8 i 2021 blev manipulation af filen theme.json standardmåden for temaudviklere til at tilpasse editorindstillinger og stilarter.

WordPress 5.9 tager tingene til næste niveau ved at introducere en grafisk grænseflade, der giver brugerne mulighed for at tilpasse style presets til deres websteder, enten globalt eller på blokniveau, uden at skrive en enkelt kodelinje.

Global Styles-mekanismen burde i væsentlig grad ændre den måde, du er vant til at tilpasse udseendet af dine websteder på, da Global Styles påvirker flere aspekter af WordPress-webesign.

For det første erstatter Global Styles-grænsefladen Customizer og er nu den eneste måde at tilpasse indstillinger og stilarter med bloktemaer. Tilsvarende vil der ikke længere være behov for administratorsider med komplekse temaindstillinger. Dette giver en ny standard måde at konfigurere temaindstillinger og stilarter på, og det bør på samme tid strømline temaudviklingens workflow.

Med Global Styles får WordPress-brugere mere kontrol over præsentationen af ​​deres websteder, både globalt og pr. bloktype, ud over konteksten af ​​individuelle sider eller indlæg.

En ny sidebjælke er nu tilgængelig i webstedseditoren, øverst på hvilken du finder et lille forhåndsvisningspanel og fire komponenter i følgende rækkefølge:

• Typografi
• Farver
• Layout
• Blokke

Vi kan forvente, at der kommer nye komponenter til med tiden.

Lad os se nærmere på den nye grænseflade.

Preview af stil

Det første element i Global Styles-sidebar er et preview panel. Dette panel giver dig mulighed for at kontrollere resultatet af dine tilpasninger og er især nyttigt, når dine ændringer gælder for elementer, der ikke er synlige i webstedseditorens lærred.

Følgende billede viser tre forskellige stilkombinationer sammenlignet:

Typografi

Typografi-panelet er det sted, hvor du styrer typografien på dit websted. De tilgængelige kontroller i dette panel afhænger naturligvis af dine theme.json-indstillinger.

For eksempel erklærer temaet Twenty Twenty-One Blocks (TT1 Blocks) følgende typografiegenskaber:

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

Det næste billede viser de resulterende typografiindstillinger i Global Styles-sidebar:

Lad os dykke lidt dybere og se, hvordan TT1 Blocks-temaet erklærer fontFamilies:

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

Du kan kontrollere disse skrifttype familier i preview panelet Global Styles:

Farver

I sektionen Farver kan du se og redigere farvepaletter og tilpasse farven på flere webstedselementer.

Ved at klikke på disse elementer får du adgang til et nyt panel, hvor du kan vælge farver fra tre farvepaletter: Kerne, Tema og Brugerdefineret palet (læs mere i Standardfarver, Temafarver og Brugerdefinerede farver).

I dette panel vil du være i stand til at indstille og ændre farven for det aktuelle element.

Layout

Den sidste gruppe værktøjer er beregnet til layouttilpasninger. I den globale sammenhæng er dette begrænset til webstedscontaineren.

Blokke

Med implementeringen af Global Styles-mekanismen er det nu også muligt at ændre udseendet for specifikke blokke, såsom afsnit (typografi og farver), knapper (layout) og kolonne (farver og layout).

Bemærk, at blokstile kun kan tilpasses fra Global Styles-grænsefladen, hvis blokken erklærer understøttelse af specifik funktionalitet i den tilsvarende block.json-fil. For eksempel understøtter core/post-title blokken i øjeblikket følgende stilarter:

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

Da core/post-title blokken  understøtter farver, mellemrum og typografi, finder du de tilsvarende poster i Global Styles-indstillingerne i Post Title-blokken.

Følgende billede viser typografi indstillinger, som du nemt kan sammenligne med ovenstående kode:

Det er værd at bemærke, at WordPress 5.9 kun leverer den første implementering af Global Styles-grænsefladen. Som Matias Ventura påpeger, kan vi med rimelighed forvente yderligere udvikling af den nye stil kontrolfunktion:

I fremtiden vil der være flows indbygget i systemet, der giver dig mulighed for at flytte fra lokale stilarter til globale – som at lave tilpasninger til en button block og vælge at anvende dem globalt ændringer på tværs af alle knapper af den type.

Så vi kan snart se store forbedringer. Billedet nedenfor er blot et eksempel på, hvad vi kan forvente:

Yderligere forbedringer kunne omfatte muligheden for temaer til at give alternative farvepaletter og flere globale stil variationer.

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

— kjellr (@kjellr) November 15, 2021

Udviklere kan dykke dybere ned i den globale stylingmekanisme i supportartiklen Global Settings & Styles (theme.json). Du finder yderligere eksempler i vores introduktion til Twenty Twenty-Two standardtemaet.

Navigationsblokken

Navigationsblokken er blevet kaldt “en af de mest virkningsfulde temablokke”, og vi er ikke bange for at sige, at vi er enige.

Blokken har været i den embryonale fase i et stykke tid (se også Navigation Block Tracking Issue og Tracking Issue i2). Alligevel, nu hvor alle afventende problemer og blokeringer, der er angivet som WordPress 5.9 must-haves, er blevet rettet, kan vi endelig begynde at bruge en af de mest kraftfulde funktioner fusioneret ind i kernen med WordPress 5.9.

Et hurtigt overblik over navigations blok grænsefladen

At bruge den nye blok kan være lidt forvirrende i starten, men når du først har fået styr på det, vil du værdsætte dets fulde potentiale.

Når du først tilføjer en navigationsblok, giver blokpladsholderen tre muligheder for at vælge en eksisterende blokbaseret menu, oprette en menu med alle sider eller starte på en frisk med en tom menu.

Den nye navigationsmenu giver dig også mulighed for at importere menuer oprettet via Appearance Menus Screen, der er tilgængelig med klassiske temaer.

Dette betyder, at hvis du skifter fra et klassisk tema til et bloktema, behøver du ikke genopbygge dine eksisterende menuer. Du skal bare vælge en af dine aktuelt tilgængelige “klassiske menuer”, og den bliver automatisk konverteret til en blokbaseret navigationsmenu.

Du kan tilføje navigationsblokken hvor som helst på dine sider. For eksempel kan du finde det nyttigt i artikler i lang form at oprette en indholdsfortegnelse, så brugerne kan hoppe til specifikke indholdssektioner.

Nye navigationslinks tilføjes øjeblikkeligt til navigationsblokken ved at klikke på plus (+) ikonet i højre side (se også Gutenberg 11.7 release notes), medmindre andre typer blokke allerede er blevet tilføjet til menuen.

Ved at klikke på knappen Rediger i værktøjslinjen Navigation Link-blok konverteres et menupunkt til et brugerdefineret link. Dette giver dig mulighed for at tilføje, redigere, omarrangere og fjerne elementer individuelt.

Du kan også transformere links til blokke ved at klikke på knappen Transformer på blok værktøjslinjen. Dette giver dig mulighed for at tilføje specifikke blokke direkte til navigationsmenuen.

Custom Link, Spacer, Site Logo, Home Link, Social Icons og Search-blokke er nu eksponeret for brugere, når de tilføjer blokke til navigationsmenuer.

I sidebar Indstillinger finder du et omfattende sæt muligheder for at kontrollere flere aspekter af dine navigationsmenuer.

Layoutpanelet indeholder kontroller til justering, orientering og ombrydning.

Navigationsblokken har også et forbedret panel med skærmindstillinger med mulighed for en burgermenu, der altid er tændt.

Du kan også tilpasse tekst- og baggrundsfarver til dine menuer og undermenuer.

En anden nyttig tilføjelse, der for nylig er tilføjet til navigationsblokken, er Block Gap support, som tilføjer brugerens mulighed for at kontrollere afstanden mellem menupunkter.

Typografi-panelet indeholder et sæt kontrolelementer til skrifttypefamilie, udseende, linjehøjde, dekoration og store og små bogstaver. Alle disse kontroller kan slås til/fra fra en rullemenu, der vises, når du klikker på ellipseikonet til højre.

Navigationsblokken: Bag kulissen

Navigationsblokdata gemmes i databasen ved hjælp af en wp_navigation dedikeret posttype.

Hvorfor er dette interessant for WordPress-brugere, og hvordan fungerer det?

Lad os sige, at du har oprettet en navigationsmenu bestående af to brugerdefinerede links og et søgefelt. Med Twenty Twenty-Two-temaet installeret, kunne menuen se ud som vist på følgende billede:

Navigationsblokken ovenfor er gemt i databasen som wp_navigation post type som følger:

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

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

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

Lagring af navigationsblokkens indhold i databasen gør det muligt for brugere at bruge de samme navigationsmenuer på tværs af forskellige bloktemaer. Hvis menuen ikke umiddelbart er synlig, vælger du blot den ønskede navigationsmenu i menuvælgeren (se også nummer #36087 og PR #36178).

Følgende billede viser menuen ovenfor med Twenty-Twenty-One Blocks-temaet:

Navigationsblokken har gennemgået flere gentagelser. Du kan dykke dybere ned i hver implementering i Gutenberg 11.7, 11.8, og 11.9 release notes.

Du kan også læse mere om Navigationsblokken i den nye Navigation Block dev note og Navigation block support artikel.

Billedgalleri, udvalgte billeder og webstedsikoner

Med det formål at få billeder til at opføre sig mere konsistent på tværs af forskellige sammenhænge, ​​leverer WordPress 5.9 nye funktioner og forbedringer til flere blokke. Galleriblokken er blevet fuldstændig revideret, mens forskellige ændringer i blokkene Udvalgt billede og webstedsikon giver brugerne mere detaljeret kontrol over de respektive billeder.

En Refactored Gallery Block

I WordPress 5.8 var muligheden for at tilpasse udseendet af billeder i gallerier noget begrænset. Der var ingen måde at ændre billedstil eller anvende et duotone filter.

Derudover manglede vigtige funktioner i galleri billeder, såsom tilføjelse af brugerdefinerede links til individuelle billeder i et galleri.

For bedre at forstå årsagen til denne asymmetri mellem billeder i de to forskellige kontekster af et enkelt billede og et billede i et galleri, lad os tage et kig på Galleri-blokken i kodevisning i WordPress 5.8:

Bemærk, at billeddetaljer kun gemmes i Galleri-blok adskilleren (se også What Is a Gutenberg Block?).

Dette fik individuelle billeder til at opføre sig anderledes end billeder i gallerier.

For at få billeder til at opføre sig ensartet i de to forskellige sammenhænge, introducerer WordPress 5.9 en fuldstændig omdannet Galleri-blok, der nu opfører sig som en beholder til en samling af figurelementer i stedet for en uordnet liste af billeder.

I WordPress 5.9 indlejres galleribilleder ved hjælp af de core innerBlocks APIs, og hvert billede gemmer sit eget sæt af detaljer, præcis som individuelle billeder.

Det er en stor forbedring, da Galleri-blok billeder nu understøtter de samme funktioner, der er tilgængelige i kernebilledblokke, såsom billeddimensioner og duotone-filtre, samt standard blockfunktioner, såsom drag n drop, kopier, dupliker og fjern funktioner .

Med den nye Galleri-blok vil du være i stand til at style billeder individuelt. Dette giver en bred vifte af tilpasningsmuligheder.

Billedet nedenfor viser flere billeder i et galleri, hver med forskelligt afrundede hjørner:

Du kan også bruge forskellige duotone-filtre på forskellige billeder i det samme galleri.

Og du kan selvfølgelig tildele en specifik CSS-klasse til hvert billede, hvilket giver dig yderligere superkræfter til at tilføje den tilpasning, du har brug for, til dine gallery billeder.

For et nærmere overblik over den nye galleriblok, se også Gallery Block Refactor Dev Note, Kommende Gallery Block-forbedringer og Gutenberg 11.4 release notes.

Udvalgte billedforbedringer

Adskillige forbedringer er også blevet bragt til Featured Image-blokken.

Kontrolelementer til grundlæggende dimensioner

Udvalgte billede blokken har nu et nyt Dimensions-indstillingspanel, der giver højde, bredde og skalakontrol.

Dimensionskontrol gælder også for fremhævede billeder i Query Loop-blokke, som vist på følgende billede:

Duotone-filtre på udvalgte billeder

Vi nævnte ovenfor, at vi nu kan anvende duotone-filteret i billeder pakket ind i den nye refactored Gallery-blok.

Nu, startende med WordPress 5.9, er duotone-filtre også tilgængelige i udvalgte billede blokke i enhver sammenhæng, fra post- og sideskabeloner til Query Loop-blokke.

Denne funktion åbner døren til kreative og ensartede farvekombinationer på hele webstedet.

Billedbeskæring i webstedslogo

Før WordPress 5.9 (og Gutenberg 11.6) kunne logobilleder kun redigeres, før de blev uploadet. Med WordPress 5.9 kan du beskære, zoome og rotere billeder brugt i webstedslogoblokken direkte fra blokværktøjslinjen.

Nye designværktøjer, blokke og UI-forbedringer

Elleve Gutenberg-versioner bliver fusioneret ind i kernen med WordPress 5.9 og leverer så mange funktioner, forbedringer og fejlrettelser, at det ikke ville være muligt at dække dem alle i en enkelt artikel.

Så vi valgte nogle af dem, som vi fandt mest opmærksomhedsværdige. For et dybere overblik over disse funktioner og forbedringer kan du også tjekke udgivelsesindlæggene for Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8, og 11.9.

Når det er sagt, vil dette afsnit dække følgende ændringer:

Border understøtter UI

Startende med WordPress 5.9, når theme.json erklærer border indstillinger, og en blok erklærer grænseunderstøttelse via Block Supports API, vil et nyt indstillingspanel give kontrol for border radius, bredde, stil, farve og enheder (se også Gutenberg 11.1).

Kernegruppeblokken er et godt eksempel på denne nyttige UI-forbedring. Block.json-filen for gruppeblokken inkluderer nu følgende supports erklæringer:

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

Denne funktion giver brugerne mulighed for at skabe fantastiske grafiske effekter på deres websteder med minimal indsats. Du kan se det i aktion med det nye Twenty Twenty-Two-tema.

I et nyt indlæg eller en ny side skal du oprette en ny gruppeblok og vælge den. Du vil se et border panel i sidebar med blokindstillinger. Skift kantbredde og stil efter behov, og nyd resultatet.

Hvis du er en temaudvikler og ønsker at tilføje denne funktion til dine temaer, skal du åbne din theme.json-fil og erklære border understøttelse som vist i følgende kode:

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

Gem filen og gå tilbage til dit WordPress-dashboard. I et nyt indlæg eller en ny side skal du oprette en ny gruppeblok og vælge den. Du skulle nu se et Border-panel i sidebar med blokindstillinger (se også dette eksperimentelle tema.json).

Listevisningsforbedringer

Med WordPress 5.9 er listevisningen blevet forbedret og har nu drag n drop, sammenklappelige sektioner og HTML-anchors.

drag n drop i listevisning

Som nævnt i pull request #33320 er træk-og-slip blevet implementeret i listevisningen, men blev deaktiveret på grund af ydeevneproblemer.

Fra og med WordPress 5.9 er drag n drop i listevisning blevet genimplementeret. Du kan igen drag n drop blokke og grupper af blokke hvor som helst i listevisningen. Dette er en stor forbedring af editorens brugervenlighed, da det giver dig mulighed for hurtigt og nemt at flytte blokke og grupper af blokke rundt på dine sider. Det er medvirkende til langformede artikler og sider og styring af komplekse strukturer af indlejrede blokke.

Listevisning sammenklappelige sektioner

En anden væsentlig forbedring af listevisningen er evnen til at udvide/skjule sektioner af indlejrede blokke. Dette giver dig mulighed for nemt at navigere i komplekse blokstrukturer, udvide enkelte grupper af blokke, mens resten efterlades kollapset.

Du kan også udvide og skjule listevisning sektioner ved hjælp af venstre og højre pile.

HTML-ankre på listevisningselementer

Endnu en nyttig forbedring er muligheden for at tilføje HTML-anchors til dine blokke i listevisning og se dem på et øjeblik.

Block gap spacing control

Først introduceret i Gutenberg 11.4 og nu fusioneret ind i kernen med WordPress 5.9, giver den nye Block Spacing control dig mulighed for at indstille en tilpasset afstand mellem elementer inden for en blok. Nedenfor kan du se en forhåndsvisning med forskellige blok spacing værdier i en kolonneblok med Twenty Twenty-Two standardtemaet:

Gap Spacing er i første omgang tilgængelig for specifikke blokke, herunder knapper, billeder, kolonner, titler og navigation, men support bør udvides til flere blokke i fremtiden.

Temaer bør aktivere Gap Spacing i theme.json ved hjælp af den nye egenskab for appearanceTools. Du kan læse mere om udseendeværktøjer i vores dyb dyk ned i Twenty Twenty-Two. Se også pull-anmodninger #33991 og #34630.

Rich URL Preview til Link Control

Ved at drage fordel af det nye REST url-details-slutpunkt, giver Link-kontrollen nu et rigt URL-eksempel, der viser detaljer for en linkmålressource.

I sin første implementering var denne funktion kun tilgængelig i rich text-komponenten Post Editor. I skrivende stund er den også tilgængelig i webstedseditoren, men ikke i navigations- og widget-editorer.

Opret sider fra Link Popup

WordPress 5.9 har også en forbedret inline link UI, der viser en helt ny knap til at oprette nye sider direkte fra inline link popup. Denne funktion er kun tilgængelig i Post Editor.

Forbedringer af søgeblokken

Søgeblokken viser nu knap- og border farveindstillinger.

Du kan også nu tilpasse baggrunds- og tekstfarve og border farve og radius.

Nye kontroller til blokdimensioner

Et nyt Dimensions-indstillingspanel er nu tilgængeligt, så brugerne kan kontrollere den plads, der optages af en blok på siden. Panelet skal indeholde højde, bredde, polstring, margin og muligvis justering, men ikke alle attributter vil være tilgængelige for hver blok.

Blokudviklere vil finde <DimensionControl />-komponenten dokumenteret på GitHub, men bemærk, at den stadig er markeret som en eksperimentel funktion og kan være genstand for brydende ændringer på tidspunktet for denne skrivning.

En ny widget gruppe blok tilføjet til widgetskærmen

En ny widget gruppe blok er nu tilgængelig i den blokbaserede widgeteditor. Den seneste blok giver dig mulighed for at tilføje en gruppe af blokke i en widget med en titel i de klassiske temaers Widgets Editor og Customizer.

Du kan læse mere om widgets-editoren i Block-Based Widgets Editor og Block Widgets i Customizer.

Flex Layout og den nye row blok

Oprindeligt introduceret som en eksperimentel funktion med Gutenberg 11.2, er flex layout blevet udvidet til flere blokke, herunder Social Links og gruppeblokke.

Nogle blokke, såsom blokken Sociale links, giver nu et sæt værktøjslinje kontroller og sidebar indstillinger, der giver dig mulighed for at tilpasse det fleksible layout.

Den samme funktionalitet er tilgængelig i navigationsblokken og row block, en ny variant af gruppeblokken introduceret med Gutenberg 11.5.

Følgende billede viser row block med layoutkontroller i indstillings sidebar:

Nedenfor kan du se den samme rækkeblok på frontenden og i Chromes inspector tool.

Block pattern forbedringer

Først introduceret med WordPress 5.5, lock patterns tillader WordPress-brugere at inkludere komplekse klar-til-brug strukturer af indlejrede blokke i deres indhold med blot et par klik.

Nu flytter WordPress 5.9 tingene et skridt fremad mod design demokratisering og brugerbeføjelse ved at introducere et par forbedringer til blokmønstersystemet.

Så hvad er nyt med blokmønstre i WordPress 5.9?

Udvalgte patterns fra pattern kataloget

Block Inserter viser udvalgte Block Patterns hentet dynamisk fra Pattern Directory, hvilket giver brugerne en hurtig og nem måde at finde populære mønstre til brug i deres indhold.

På samme måde, efterhånden som mønstre kommer direkte ind i WordPress-dashboardet, bør WordPress-udviklere opmuntres til at skabe og udgive flere og flere mønstre over tid, hvilket resulterer i stadigt mere avancerede designmuligheder for brugerne.

En ny fuldskærms patterns Explorer

Da antallet af tilgængelige blokmønstre i Pattern Directory fortsætter med at vokse, og flere temaer bruger dem, introducerer WordPress 5.9 en ny block patterns-navigation grænseflade: Pattern Explorer.

En ny Udforsk-knap åbner nu en modal i fuld skærm, der giver brugerne mulighed for at gennemse, søge efter og indsætte block patterns med blot et par klik. Resultatet er en forbedret brugeroplevelse.

Du vil også finde yderligere noter og adskillige blokmønstereksempler i vores dybe dyk ned i Twenty Twenty-Two WordPress-temaet.

Hvis du er interesseret og vil lære mere, så lyt til Josepha Haden Chomphosys podcast Episode 16 og 21, og se Exploring WordPress 5.9 YouTube-videoen fra Anne McCarthy.

Twenty Twenty-Two Theme og WordPress Block Themes

Med WordPress 5.9 behøver du ikke længere at installere Gutenberg-pluginnet for at aktivere fuld websted redigering på dit WordPress-websted. Du skal bare tillade et bloktema for at drage fordel af alle FSE-funktioner.

Derudover er WordPress 5.9 blevet bundtet med et helt nyt standardtema, Twenty Twenty-Two, og det er en game-changer, da Twenty Twenty-Two er det første standard blok-tema nogensinde.

Twenty Twenty-Two er et meget fleksibelt og tilpasseligt tema. Det giver en perfekt sandkasse til at prøve det nye skabelon redigeringsflow, nye blokke, forbedringer i grænseflade og alle websteds redigeringsfunktion er, der er tilføjet til kernen, startende med WordPress 5.9.

Som nævnt ovenfor er alt hvad du skal gøre at installere og aktivere et bloktema, såsom Twenty Twenty-Two. Når temaet er aktivt, vises et nyt Editor (beta) menupunkt i WordPress dashboards admin-menu.

Site Editor-grænsefladen har nu et fornyet websteds redigeringsflow. Fra redigerings grænsefladen vil du være i stand til visuelt at redigere webstedets hjemmeside, skabeloner og skabelondele samt få adgang til Global Styles-grænsefladen.

Når du aktiverer et bloktema, finder du ikke Customizer. Det skyldes, at Customizer ikke understøtter bloktemaer, som kun bruger Site Editor. Det er også grunden til, at du ikke kan forhåndsvise inaktive bloktemaer.

Så fra og med WordPress 5.9 er adgangspunktet til Customizer ikke længere tilgængeligt i admin-menuen, når et bloktema er aktivt (medmindre du bruger et plugin, der gør brug af det).

Hvis du stadig er bundet til traditionelle temaer og er bekymret for bagudkompatibilitet, så tag det roligt: ​​Du kan fortsætte med at bruge dit tema.

Du har i øjeblikket fire forskellige kategorier af 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.

På grund af den indvirkning, som bloktemaer sandsynligvis vil have på WordPress-økosystemet, har vi en hel artikel, der dækker Twenty Twenty-Two og WordPress-bloktemaer. Sørg for at tjekke det ud for et mere dybdegående overblik.

Præstationsforbedringer

Her hos Kinsta er vi besatte af website-hastighed. Det er derfor, vi er begejstrede for de præstationsforbedringer, der kommer med WordPress 5.9.

Disse forbedringer vil påvirke flere områder af CMS’et, fra blokeditoren til bloktemaer, doven indlæsning og mere. Lad os dykke ned.

Forbedringer i blokindsætter

Siden WordPress 5.9 er bloktyper, mønstre og kategorier dovent gengivet i blokindsætteren. Browseren indlæser indhold med højere prioritet først, hvilket giver brugeren en jævnere redigeringsoplevelse og forbedret ydeevne.

Yderligere bemærkelsesværdige præstationsforbedringer i kontekst af blokeditoren påvirker genbrugelige blokke og List View.

Mindre CSS indlæst

Hvad angår frontend, reducerede WordPress 5.9 drastisk mængden af ​​CSS indlæst af bloktemaer, hvilket førte til, at sider indlæses betydeligt hurtigere.

Den vigtigste forbedring, der bør bemærkes i denne sammenhæng, er introduktionen af ​​theme.json-indstillingerne og style-mekanismen, som forhindrer temaer i at bruge massive stylesheets, inklusive hundredvis af CSS-deklarationer. Mængden af ​​CSS-kode, et tema bruger, er nu blevet reduceret til et par brugerdefinerede CSS-egenskaber, som enhver bloktype kan genbruge.

Forbedringer i lazy loading ydeevne

Image lazy loading blev først introduceret i WordPress 5.5. Startende fra WordPress 5.7 blev lazy loading funktion udvidet til iframes, hvilket giver webstedsejere mulighed for at bygge hurtigere websteder og forbedre deres SEO.

Under alle omstændigheder, efter en analyse af Largest Contentful Paint (LCP), viste det sig, at tildeling af loading="lazy"-attributten til alle billeder og iframes på siden forårsager en lille forringelse af ydeevnen.

At springe attributten loading="lazy" over var ikke en løsning, fordi det ville føre til at miste de klare fordele ved lazy loading.

Den optimale løsning ville være kun at udelade attributten loading="lazy" på billeder, der vises over skillelinjen. Men da loading="lazy"-attributten er tildelt på serversiden, kan WordPress ikke bestemme, hvilke billeder der vises over skillelinjen nøjagtigt. Det er noget, der mest afhænger af det aktive tema.

Nu, som en trade-off løsning, startende med WordPress 5.9, anvendes loading="lazy"-attributten ikke på det første indholdsbillede eller iframe. En analyse udført på 50 populære WordPress-temaer viste, at denne løsning fører til betydelige præstationsforbedringer og sider, der indlæses op til 30% hurtigere.

Felix Arntz forklarer, hvordan det virker:

… for at forbedre ydeevnen direkte, uden at en udvikler skal tilpasse adfærden, vil WordPress nu springe det allerførste “indholdsbillede eller iframe over” på siden fra at blive ladet indlæst. Udtrykket “indholdsbillede eller iframe” betegner her ethvert billede eller iframe, der findes i indholdet af ethvert indlæg i den aktuelle hovedforespørgselsløkke, såvel som ethvert udvalgt billede af et sådant indlæg. Dette gælder både for “singular” og “archive” indhold: I en “singular” kontekst er det første billede eller iframe af det (eneste) indlæg ikke dovent indlæst, mens det i en “archive” sammenhæng det første billede eller iframe af første indlæg i forespørgslen er ikke lazy loading.

Temaudviklere kan nu bruge det nye wp_omit_loading_attr_threshold-filter til at ændre antallet af billeder/iframes, der skal springes over fra lazy loading.

Flere stylesheets pr. blok

Blokke og temaudviklere kan registrere flere stylesheets på hver blok og indlæse styles fra andre blokke, når det er nødvendigt. Dette gør det muligt at indlæse stylesheets afhængigt af sidens indhold, hvilket forhindrer temaer i at indlæse store stylesheets på hver side.

Ifølge Ari Stathopoulos:

Blokke vil nu være i stand til at registrere flere stylesheets og indlæse styles fra andre blokke, når det er nødvendigt. Temaer vil være i stand til at tilføje styles pr. blok i stedet for at indlæse monolitiske typografiark, der tvinges hvor som helst. Dette har en større indflydelse på bloktemaer, hvor indlæsning af stylesheets er optimeret baseret på side- og layoutindholdet, men kan også bruges af klassiske temaer.

Yderligere funktioner til udviklere

Ud over de mange funktioner og UI-forbedringer, der er diskuteret indtil videre, introducerer WordPress 5.9 også flere funktioner til udviklere.

En ny egenskab til lock blocks

Blokerudviklere kan nu forhindre brugere i at flytte eller slette individuelle blokke ved at tilføje en lock attribut i blokindstillinger:

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

Med denne funktion aktiveret kan brugere redigere blokindholdet, men kan ikke flytte blokken rundt på siden eller fjerne den fra editorens lærred. Følgende billede viser en brugerdefineret blok med et standardsæt af kontrolelementer på værktøjslinjen:

Ved at definere lock attributten, som det ses i koden ovenfor, skjules blokflytterne og Flyt til og Fjern kontrollerne fra blok værktøjslinjen. Billedet herunder viser det endelige resultat på skærmen:

Du kan også låse en bestemt blok i et blokmønster. For et eksempel, se også Låse blokke i WordPress 5.9.

Ny API for at få adgang til globale indstillinger og stilarter

WordPress 5.9 introducerer en ny PHP public API til at læse data fra theme.json.

Læser indstillinger og stilarter fra theme.json

Der er to nye funktioner til at læse data fra settings og styles der er erklæret i theme.json:

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

• $path er en matrix, der viser style til den angivne indstilling
• $context er en matrix, der indstiller konteksten for disse data. Udviklere kan læse fra en specifik blokindstillingssektion – for eksempel array( 'block_name' => 'core/paragraph' ). orygin-nøglen sat til base gør det muligt at ignorere brugerdefinerede data, der er gemt af brugeren.

Følgende eksempelkode ville returnere contentSize-indstillingsværdien. I Twenty Twenty-Two ville det være 650px:

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

Ved at indstille en kontekst kan du hente stilarter for specifikke blokke. Følgende kode viser, hvordan man henter border radiusværdien for core/button blokken:

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

Funktionen ovenfor returnerer den påkrævede egenskabsværdi, mens standardindstillinger, temaindstillinger og brugerdata tages i betragtning. Den brugerdefinerede værdi vil blive angivet, hvis brugeren konfigurerer knappens border radius i Global Styles-grænsefladen.

For at ignorere brugerdata skal du bruge følgende kode:

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

Få det genererede stylesheet

WordPress 5.9 introducerer også en ny funktion til at få stylesheet som følge af standard-, tema- og brugerdefinerede styles:

wp_get_global_stylesheet( $types = array() );

$types er en liste over de stilarter, der skal genereres.

Du kan læse mere om den nye API i Ny API for at få adgang til globale indstillinger og styles.

Flere funktioner til udviklere

Yderligere WordPress 5.9-ændringer for udviklere, du måske ønsker at vide om, omfatter:

• Bloker temaer, en ny måde at bygge temaer i WordPress 5.9
• Opdateringer til indstillinger, styles og theme.json
• Tema-fokuserede ændringer og filtre i WordPress 5.9
• Nye kapacitet forespørgsler i WordPress 5.9
• Diverse Kerneændringer i WordPress 5.9
• Diverse blokredigeringsændringer i WordPress 5.9
• Tag mere kontrol over indre blokområder (som blokudvikler)

Opsummering

Vi afslutter denne artikel med en hurtig note om WordPress’ markedsandel. WordPress driver i øjeblikket over 65% af alle de hjemmesider, hvis content management system er kendt og sidder på mere end 43% af alle hjemmesider.

Disse tal er imponerende, især sammenlignet med de nærmeste konkurrenter med mindre end 5% markedsandel, som Shopify.

Og det betyder også, at du ikke kan overse udviklingen af ​​WP CMS. Hver ny version af WordPress bringer nye funktioner, forbedringer i grænseflader, ydeevneforbedringer, og WordPress 5.9 er ingen undtagelse. Alt du behøver for at teste de nye funktioner er et bloktema, som det nye Twenty Twenty-Two standardtema, og du er klar til at gå.

Over til dig, nu! Er du klar til at skifte til blokeringstemaer og FSE? Og hvad er dine foretrukne ændringer, der kommer med WordPress 5.9?