Wat is er nieuw in WordPress 5.9 – Full Site Editing, Global Styles, blokken, patronen, API's, UI verbeteringen en nog veel meer

WordPress 5.9 Josephine is gearriveerd! De eerste WordPress versie van het jaar stond oorspronkelijk gepland voor 14 december 2021. Vanwege verschillende openstaande problemen en onopgeloste bugs was de definitieve release vertraagd en is deze uiteindelijk uitgebracht op 25 januari 2022.

Als je je afvraagt wat er nieuw is in WordPress 5.9, is het korte antwoord Full Site Editing (FSE).

En inderdaad, veel features van 5.9 zijn alleen beschikbaar als je een thema gebruikt dat Full Site Editing ondersteunt, zoals het gloednieuwe standaardthema Twenty Twenty-Two.

Een voorbeeld van Twenty Twenty-Two, het nieuwe standaard WordPress thema (Bron afbeelding: WordPress.org)

Met WordPress 5.9 zijn we aanbeland bij de kern van de tweede fase van de Gutenberg roadmap: de Customization fase, die vooral gericht is op Full Site Editing, blokpatronen, blokdirectory en op blokken gebaseerde thema’s.

Met 5.9, dat volgende maand uitkomt, zijn we – maar mijn mening – aanbeland bij de MVP, het Minimum Viable Product van deze Customization fase van Gutenberg.

Deze woorden van Matt Mullenweg in 2021 State of the Word vatten de belangrijkste features van de nieuwe WordPress release het beste samen.

De Gutenberg roadmap. (Bron afbeelding: Matt Mullenweg: 2021 State of the Word)

Dat gezegd hebbende, wat is er nieuw in deze eerste WordPress release van 2022?

Laten we daar snel achter komen!

Global Styles: een grafische interface voor theme.json

Met de release van WordPress 5.8 in 2021 werd het manipuleren van het theme.json bestand de standaardmanier voor themaontwikkelaars om editorinstellingen en stijlen aan te passen.

WordPress 5.9 tilt de zaken naar een hoger niveau door een grafische interface te introduceren waarmee gebruikers style presets voor hun websites kunnen aanpassen, zowel globaal als op blokniveau, zonder een enkele regel code te hoeven schrijven.

Het Global Styles mechanisme zou de manier waarop je gewend bent om het uiterlijk van je websites aan te passen aanzienlijk moeten veranderen, aangezien Global Styles van invloed zijn op verschillende aspecten van het ontwerp van WordPress sites.

Ten eerste vervangt de Global Styles interface de Customizer en is nu de enige manier om instellingen en stijlen aan te passen binnen blokthema’s. Ook zijn complexe beheerpagina’s voor thema opties niet langer nodig. Dit biedt een nieuwe standaardmanier voor het configureren van thema-instellingen en stijlen en moet tegelijkertijd de workflow voor themaontwikkeling stroomlijnen.

Met Global Styles krijgen WordPress gebruikers meer controle over de presentatie van hun websites, zowel globaal als per bloktype, buiten de context van individuele pagina’s of berichten.

Er is nu een nieuwe zijbalk beschikbaar in de site-editor, met bovenaan een klein previewvenster en vier componenten in de volgende volgorde:

Typography
Colors
Layout
Blocks

We kunnen verwachten dat er in de loop van de tijd nieuwe componenten zullen worden toegevoegd.

De Global Styles zijbalk met het Blockbase thema van Automattic.

Laten we de nieuwe interface eens beter bekijken.

Style Preview

Het eerste element in de Global Styles zijbalk is een preview-venster. Met dit venster kun je het resultaat van je aanpassingen controleren en dit is met name handig wanneer je wijzigingen van toepassing zijn op elementen die niet zichtbaar zijn in het canvas van de site-editor.

De volgende afbeelding toont een vergelijking van drie verschillende stijlcombinaties:

Typography

In het Typography venster bepaal je de typografie van je website. De beschikbare controls in dit venster zijn natuurlijk afhankelijk van je theme.json instellingen.

Het thema Twenty Twenty-One Blocks (TT1 Blocks) declaret bijvoorbeeld de volgende typografische eigenschappen:

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

De volgende afbeelding toont de resulterende Typography instellingen in de Global Styles zijbalk:

Typografie instellingen in TT1 Blocks Global Styles.

Laten we hier eens beter naar kijken en bekijken hoe het TTI Blocks thema fontFamilies declaret:

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

Je kunt deze fontfamilies controleren in het Global Styles previewpaneel:

Fontfamilies in Twenty Twenty-One Blocks.

Colors

In de Colors sectie kun je kleurenpaletten bekijken en bewerken en de kleur van verschillende site-elementen aanpassen.

Kleurenpaneel in Twenty Twenty-One Blocks

Door op die elementen te klikken, krijg je toegang tot een nieuw venster waar je kleuren kunt kiezen uit drie kleurenpaletten: Core, Theme, en Custom palet (lees meer in Standaardkleuren, Themakleuren en Aangepaste kleuren).

Kleurinstellingen in Twenty Twenty-One Blocks

In dit venster kun je de kleur voor het huidige element instellen en wijzigen.

Layout

De laatste groep tools is bedoeld voor lay-outaanpassingen. In de globale context is dit beperkt tot de sitecontainer.

Blokken

Met de implementatie van het Global Styles mechanisme is het nu ook mogelijk om het uiterlijk van specifieke blokken te wijzigen, zoals Paragraph (typografie en kleuren), Buttons (lay-out) en Column (kleuren en lay-out).

Merk op dat blokstijlen alleen kunnen worden aangepast vanuit de Global Styles interface als het blok ondersteuning voor specifieke functionaliteit in het bijbehorende block.json bestand aangeeft. Het core/post-title blok ondersteunt bijvoorbeeld momenteel de volgende stijlen:

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

Aangezien het core/post-title blok kleuren, spacing en typografie ondersteunt, vind je de overeenkomstige vermeldingen in de instellingen voor Global Styles van het Post Title blok.

De volgende afbeelding toont typografische instellingen, die je eenvoudig kunt vergelijken met de bovenstaande code:

Typografie-instellingen voor Post Title aanpassen

Het is vermeldenswaard dat WordPress 5.9 alleen de eerste implementatie van de Global Styles interface levert. Zoals Matias Ventura aangeeft, kunnen we redelijkerwijs een verdere ontwikkeling van de nieuwe stijlcontrolefeature verwachten:

In de toekomst zullen er flows in het systeem worden ingebouwd, zodat je van Local Syles naar globaal kunt gaan – zoals het maken van aanpassingen aan een Button blok en ervoor kiezen om ze globaal toe te passen op alle knoppen van dat type.

Dus we kunnen binnenkort verdere grote verbeteringen zien. De afbeelding hieronder is slechts een voorbeeld van wat we zouden kunnen verwachten:

In de toekomst kun je de kleur van de linkstatus bepalen. (Afbeeldingsbron GitHub)

Aanvullende verbeteringen zijn onder meer de mogelijkheid voor thema’s om alternatieve kleurenpaletten en meerdere globale stijlvariaties te bieden.

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

Ontwikkelaars kunnen meer lezen over het mechanisme achter Global Styles in het ondersteuningsartikel Global Settings & Styles (theme.json). Je vindt aanvullende voorbeelden in onze inleiding tot het standaardthema Twenty Twenty-Two.

Het Navigation blok

Het navigatieblok – Navigation blok – wordt “een van de meest impactvolle themablokken” genoemd en we zijn niet bang om te zeggen dat we het daarmee eens zijn.

Het blok bevindt zich al een tijdje in de embryonale fase (zie ook Navigatieblok Tracking Issue en Tracking Issue i2). Maar nu alle lopende problemen en blockers die als WordPress 5.9 musthaves worden vermeld, zijn opgelost, kunnen we eindelijk een van de krachtigste features gaan gebruiken die in de core zijn samengevoegd met WordPress 5.9.

Een kort overzicht van de interface van Navigation blokken

Het gebruik van het nieuwe blok kan in het begin een beetje verwarrend zijn, maar als je het eenmaal onder de knie hebt, zul je het volledige potentieel ervan waarderen.

Wanneer je voor het eerst een Navigation blok toevoegt, biedt de placeholder van het blok drie opties voor het selecteren van een bestaand op blokken gebaseerd menu, het maken van een menu met alle pagina’s of het opnieuw beginnen met een leeg menu.

Met het nieuwe navigatiemenu kun je ook menu’s importeren die zijn gemaakt via het Appearance Menus scherm dat beschikbaar is bij klassieke thema’s.

Dit betekent dat als je overstapt van een klassiek thema naar een blokthema, je je bestaande menu’s niet opnieuw hoeft te bouwen. Je hoeft alleen maar een van je momenteel beschikbare “klassieke menu’s” te kiezen en deze wordt automatisch geconverteerd naar een op blokken gebaseerd navigatiemenu.

Je kunt het Navigation blok overal op je pagina’s toevoegen. Het kan bijvoorbeeld handig zijn om in long-form artikelen een inhoudsopgave te maken, zodat gebruikers naar specifieke contentsecties kunnen springen.

Anchorlinks toevoegen aan een navigatiemenu.

Nieuwe navigatielinks worden direct aan het navigatieblok toegevoegd door op het plusteken (+) aan de rechterkant te klikken (zie ook Gutenberg 11.7 release notes), tenzij er al andere soorten blokken aan het menu zijn toegevoegd.

Appender van Navigation blok met navigatielinks.

Als je op de Edit knop in de werkbalk van het Navigation Link blok klikt, wordt een menu-item geconverteerd naar een aangepaste link. Hiermee kun je items afzonderlijk toevoegen, bewerken, opnieuw ordenen en verwijderen.

Een navigatiemenu converteren naar individuele paginalinks.

Je kunt links ook naar blokken transformeren door op de Transform knop in de blokwerkbalk te klikken. Hiermee kun je specifieke blokken direct toevoegen aan het navigatiemenu.

De blokken Custom Link, Spacer, Site Logo, Home Link, Social Icons en Search zijn nu zichtbaar voor gebruikers wanneer ze blokken toevoegen aan navigatiemenu’s.

In de Settings zijbalk vind je een uitgebreide reeks opties voor het bedienen van verschillende aspecten van je navigatiemenu’s.

Het Layout venster bevat controls voor jusification, oriëntatie en wrapping.

Instellingen voor lay-out Navigation blok

Het Navigation blok heeft ook een verbeterd venster met Display instellingen met een optie voor een altijd actief hamburgermenu.

Een verbeterd venster met Display instellingen voor het navigatieblok.

Je kunt ook tekst- en achtergrondkleuren voor je menu’s en submenu’s aanpassen.

Kleurinstellingen voor Navigation blokken.

Een andere nuttige toevoeging die onlangs aan het Navigation blok is toegevoegd, is de Block Gap ondersteuning, die gebruikers de mogelijkheid biedt om de afstand tussen menu-items te regelen.

Regeling voor blokafstand op het Navigation blok.

Het venster Typografie biedt een reeks bedieningselementen voor fontfamilie, uiterlijk, regelhoogte, decoratie en letter case. Al deze bedieningselementen kunnen worden in- of uitgeschakeld via een vervolgkeuzemenu dat verschijnt wanneer je op het ellipspictogram aan de rechterkant klikt.

Typografie-instellingen voor Navigation blok.

Het Navigation blok: onder de motorkap

Data van Navigation blokken worden in de database opgeslagen met behulp van een dedicated berichttype wp_navigation.

Waarom is dit interessant voor WordPress gebruikers en hoe werkt het?

Stel dat je een Navigation menu hebt gemaakt dat bestaat uit twee aangepaste links en een zoekvak. Met het Twenty Twenty-Two thema geïnstalleerd, zou het menu eruit kunnen zien zoals in de volgende afbeelding:

Het bovenstaande navigatieblok wordt als volgt in de database opgeslagen als wp_navigation berichttype:

<!-- 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} /-->

Door de content van het Navigation blok in de database op te slaan, kunnen gebruikers dezelfde navigatiemenu’s gebruiken voor verschillende blokthema’s. Als het menu niet direct zichtbaar is, kies je gewoon het gewenste navigatiemenu in de menuselector (zie ook issue #36087 en PR #36178).

De volgende afbeelding toont het bovenstaande menu met het Twenty Twenty-One Blocks thema:

Selecteer menu in Twenty Twenty-One Blocks.

Het navigatieblok heeft verschillende iteraties doorlopen. Je kunt meer te weten komen van elke implementatie in de release notes van Gutenberg 11.7, 11.8 en 11.9.

Je kunt ook meer lezen over het Navigation blok in The new Navigation block dev note en het artikel Navigation block support.

Afbeeldingengalerijen, uitgelichte afbeeldingen en sitepictogrammen

Met het doel afbeeldingen zich consistenter te laten gedragen in verschillende contexten, biedt WordPress 5.9 nieuwe features en verbeteringen aan in verschillende blokken. Het Gallery blok is volledig herzien, terwijl verschillende wijzigingen in de blokken met uitgelichte afbeelding en sitepictogram gebruikers meer gedetailleerde controle geven over de respectieve afbeeldingen.

Een volledig herzien Gallery blok

In WordPress 5.8 was de mogelijkheid om het uiterlijk van afbeeldingen in galerijen aan te passen enigszins beperkt. Er was geen manier om de beeldstijl te wijzigen of een duotoonfilter toe te passen.

Bovendien ontbraken belangrijke features in galerijafbeeldingen, zoals het toevoegen van aangepaste links naar afzonderlijke afbeeldingen in een galerij.

Om de reden voor deze asymmetrie tussen afbeeldingen in de twee verschillende contexten van een enkele afbeelding en een afbeelding in een galerij beter te begrijpen, gaan we eens kijken naar het Gallery blok in de Code view in WordPress 5.8:

Gallery blok in Code view in WordPress 5.8.

Houd er rekening mee dat afbeeldingsdetails alleen worden opgeslagen in de delimiter van Gallery blokken (zie ook Wat is een Gutenberg blok?).

Gallery blok inspecteren in WordPress 5.8.

Hierdoor gedroegen individuele afbeeldingen zich anders dan afbeeldingen in galerijen.

Om ervoor te zorgen dat afbeeldingen zich consistent gedragen in de twee verschillende contexten, introduceert WordPress 5.9 een volledig herzien galerijblok, dat zich nu gedraagt als een container voor een verzameling figuurelementen in plaats van een ongeordende lijst met afbeeldingen.

In WordPress 5.9 worden galerijafbeeldingen genest met behulp van de core innerBlocks API’s, en elke afbeelding slaat zijn eigen set details op, precies zoals individuele afbeeldingen.

Gallery blok in Code view in WordPress 5.9

Dat is een geweldige verbetering, aangezien afbeeldingen binnen Gallery blokken nu van dezelfde functionaliteiten genieten die beschikbaar zijn in het core Gallery blok, zoals afbeeldingsdimensies en duotoonfilters, evenals standaardblokfuncties, zoals drag-and-drop, kopiëren, dupliceren en verwijderen van functionaliteiten.

Gallery blok inspecteren in WordPress 5.9

Met het nieuwe Gallery blok kun je afbeeldingen individueel stylen. Dit biedt een breed scala aan aanpassingsmogelijkheden.

De onderstaande afbeelding toont meerdere afbeeldingen in een galerij, elk met verschillende afgeronde hoeken:

Het nieuwe Gallery blok is een wrapper voor losse Image blokken.

Je kunt ook verschillende duotoonfilters gebruiken voor verschillende afbeeldingen in dezelfde galerij.

Verschillende duotoonfilters toegepast op verschillende afbeeldingen in een Gallery blok

En natuurlijk kun je aan elke afbeelding een specifieke CSS klasse toewijzen, wat je extra superkrachten geeft voor het toevoegen van alle aanpassingen die je nodig hebt aan je galerijafbeeldingen.

Voor een beter beeld van het nieuwe Galery blok, zie ook Gallery Block Refactor dev note, Upcoming Gallery Block improvements en Gutenberg 11.4 release notes.

Verbeteringen aan uitgelichte afbeeldingen

Er zijn ook verschillende verbeteringen aangebracht in de uitgelichte afbeeldingen van blokken.

Meer controle basisafmetingen

Het blok Featured Image heeft nu een nieuw venster met instellingen voor afmetingen met bedieningselementen voor hoogte, breedte en schaal.

Venster instellingen uitgelichte afbeelding.

De betere controle van uitgelichte afbeeldingen is ook te vinden in Query Loop blokken, zoals te zien in de volgende afbeelding:

Uitgelichte afbeeldingsafmetingen in een Query Loop blok.

Duotoonfilters op uitgelichte afbeeldingen

We hebben hierboven vermeld dat we nu het duotoonfilter kunnen toepassen op afbeeldingen die zijn opgenomen in het vernieuwde Gallery blok.

Vanaf WordPress 5.9 zijn duotoonfilters ook beschikbaar Featured Image blokken – in elke context, van bericht- en paginatemplates tot Query Loop blokken.

Duotoonfilter op uitgelichte afbeeldingen in een Query Loop blok.

Deze feature opent de deur naar creatieve en consistente kleurencombinaties op de hele site.

Afbeelding bijsnijden in sitelogo

Vóór WordPress 5.9 (en Gutenberg 11.6) konden logoafbeeldingen alleen worden bewerkt voordat ze werden geüpload. Met WordPress 5.9 kun je afbeeldingen die in het Site Logo blok worden gebruikt, bijsnijden, zoomen en roteren, rechtstreeks vanuit de toolbar van het blok.

Afbeelding van het sitelogo bewerken.

Nieuwe ontwerptools, blokken en UI verbeteringen

Elf Gutenberg versies worden samengevoegd tot de core van WordPress 5.9, en bieden zoveel features, verbeteringen en bugfixes dat het niet mogelijk zou zijn om ze allemaal in één artikel te behandelen.

Dus hebben we er een paar uitgekozen die we het meest op waarde schatten. Voor een uitgebreider overzicht van die features en verbeteringen, kun je ook de release posts raadplegen van Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8, en 11.9.

Dat gezegd hebbende, zal deze sectie de volgende wijzigingen behandelen:

Border ondersteunt UI

Beginnend bij WordPress 5.9: wanneer de theme.json border instellingen declareert en een blok border support declareert via de Block Supports API, zal een nieuw instellingenvenster controls bieden voor border radius, breedte, stijl, kleur en units (zie ook Gutenberg 11.1).

Het core Groups blokis een goed voorbeeld van deze nuttige UI verbetering. Het bestand block.json van het Group blok bevat nu de volgende supports declaraties:

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

Met deze feature kunnen gebruikers met minimale inspanning geweldige grafische effecten op hun websites creëren. Je kunt het in actie zien met het nieuwe Twenty Twenty-Two thema.

Maak in een nieuw bericht of nieuwe pagina een nieuw Groups blok en selecteer het. Je ziet een Border paneel in de zijbalk met blokinstellingen. Wijzig indien nodig de randbreedte en -stijl en geniet van het resultaat.

Een Groups met een aangepaste randconfiguratie binnen Twenty Twenty-Two.

Als je een themaontwikkelaar bent en deze feature aan je thema’s wilt toevoegen, open dan je theme.json bestand en declare border support zoals weergegeven in de volgende code:

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

Sla het bestand op en ga terug naar je WordPress dashboard. Maak in een nieuw bericht of nieuwe pagina een nieuw Groups blok en selecteer het. Je zou nu een border venster moeten zien in de zijbalk met blokinstellingen (zie ook dit experimentele theme.json).

Verbeteringen List View

Met WordPress 5.9 is de lijstweergave verbeterd en bevat nu drag-and-drop, inklapbare secties en HTML anchors.

Drag and Drop in lijstweergave

-Zoals vermeld in pull request #33320, is drag-and0drop geïmplementeerd in de List View, maar werd dit uitgeschakeld vanwege prestatieproblemen.

Vanaf WordPress 5.9 is drag-and-drop in de lijstweergave opnieuw geïmplementeerd. Je kunt blokken en groepen blokken opnieuw overal in de lijstweergave drag-and-droppen. Dit is een geweldige verbetering in de bruikbaarheid van de editor, omdat je hiermee snel en gemakkelijk blokken en groepen blokken binnen je pagina’s kunt verplaatsen. Het speelt een belangrijke rol bij long-form artikelen en pagina’s en bij het beheren van complexe structuren van geneste blokken.

Lijstweergave opvouwbare secties

Een andere belangrijke verbetering van de lijstweergave is de mogelijkheid om secties van geneste blokken uit/samen te vouwen. Dit stelt je in staat om gemakkelijk door complexe blokstructuren te navigeren, enkele groepen blokken uit te breiden terwijl de rest samengevouwen blijft.

Je kunt secties van de lijstweergave ook uitvouwen en samenvouwen met de pijlen naar links en naar rechts.

HTML anchors binnen items in List View

Nog een andere nuttige verbetering is de mogelijkheid om HTML anchors toe te voegen aan je blokken in de List View en ze in één oogopslag te bekijken.

Blok Gap Spacing control

De nieuwe Block Gap Spacing control werd voor het eerst geïntroduceerd in Gutenberg 11.4 en wordt nu samengevoegd tot de core van WordPress 5.9. De control stelt je in staat om een aangepaste afstand tussen items binnen een blok in te stellen. Hieronder zie je een preview met verschillende waarden voor blokafstanden in een Columns blok met het standaardthema Twenty Twenty-Two:

Spacing beheren in Colums blok in WordPress 5.9.

Gap Spacing is in eerste instantie beschikbaar voor specifieke blokken, waaronder Buttons, Images, Columns, Title en Navigation, maar de ondersteuning zou in de nabije toekomst naar meer blokken moeten worden uitgebreid.

Thema’s moeten Gap Spacing in theme.json inschakelen met behulp van de nieuwe appearanceTools property. Je kunt meer lezen over Appearance tools in ons uitgebreide artikel over Twenty Twenty-Two. Zie ook pull requests #33991 en #34630.

Rich URL preview voor linkbeheer

Door gebruik te maken van het nieuwe REST url-details endpoint, biedt de Link control nu een rich URL preview met details voor een link target resource.

In de eerste implementatie was deze feature alleen beschikbaar in de richtext component van de berichteditor. Op het moment van schrijven is het ook beschikbaar in de site-editor, maar niet in de navigatie- en widgeteditors.

Pagina’s maken vanuit de linkpop-up

WordPress 5.9 heeft ook een verbeterde gebruikersinterface voor inline links, met een gloednieuwe knop om nieuwe pagina’s rechtstreeks vanuit de pop-up voor inline links te maken. Deze feature is alleen beschikbaar in de berichteditor.

Verbeteringen aan het Search blok

Het Search blok toont nu knop- en randkleurinstellingen.

Je kunt nu ook de achtergrond- en tekstkleur en de randkleur en radius aanpassen.

Search blok instellingen kleur en radius van rand.

Nieuwe controls voor blokafmetingen

Er is nu een nieuw venster met instellingen voor afmetingen beschikbaar voor gebruikers om de ruimte te beheren die wordt ingenomen door een blok op de pagina. Het venster zou hoogte, breedte, opvulling, marge en mogelijk uitlijningsopties moeten bevatten, maar niet alle attributen zullen voor elk blok beschikbaar zijn.

Padding control voor een Group blok in WordPress 5.9.

Blokontwikkelaars zullen de component <DimensionControl /> vinden die is gedocumenteerd op GitHub, maar houd er rekening mee dat het nog steeds is gemarkeerd als een experimentele feature en onderhevig kan zijn aan belangrijke wijzigingen op het moment van schrijven.

Een nieuw Widget Group blok toegevoegd aan het widgetscherm

Een nieuw Widget Group blok is nu beschikbaar in de op blokken gebaseerde widgeteditor. Met het nieuwste blok kun je een groep blokken toevoegen aan een widget met een titel in de Widgets Editor en de Customizer van de klassieke thema’s.

Widget Group blok in het Twenty Twenty-One thema.

Je kunt meer lezen over de widgeteditor in Block Based Widgets Editor en Block Widgets in de Customizer.

Flex lay-out en het nieuwe Row blok

Oorspronkelijk geïntroduceerd als een experimentele feature met Gutenberg 11.2, is de flexlay-out uitgebreid naar verschillende blokken, waaronder de blokken Social Links en Groups.

Sommige blokken, zoals het blok Social Links, bieden nu een set toolbar controls en zijbalkinstellingen waarmee je de flex lay-out kunt aanpassen.

Lay-out controls in de toolbar van het Social Links blok.

Dezelfde functionaliteit is beschikbaar in het Navigation blok en Row blok, een nieuwe variant van het Group blok dat is geïntroduceerd met Gutenberg 11.5.

De volgende afbeelding toont het Row blok met lay-out controls in de instellingenzijbalk:

Het nieuwe Row blok met lay-outinstellingen.

Hieronder zie je hetzelfde Row blok op de frontend en in Chrome’s Inspect tool.

Verbeteringen in blokpatroon

Blokpatronen, voor het eerst geïntroduceerd met WordPress 5.5, stellen WordPress gebruikers in staat om met slechts een paar klikken complexe, gebruiksklare structuren van geneste blokken in hun content op te nemen.

WordPress 5.9 zet een stap vooruit in de richting van democratisering van het ontwerp en empowerment van gebruikers door een aantal verbeteringen aan het blokpatroonsysteem te introduceren.

Maar wat is er nieuw in blokpatronen in WordPress 5.9?

Featured Patterns uit de Pattern Directory

De Block Inserter geeft nu Featured Block Patterns weer die dynamisch zijn opgehaald uit de Pattern Directory, zodat gebruikers snel en gemakkelijk populaire patronen kunnen vinden om in hun content te gebruiken.

Blockpatronen voor Buttons in WordPress 5.9.

Op deze manier moeten WordPress ontwikkelaars worden aangemoedigd om in de loop van de tijd steeds meer patronen te maken en te publiceren, aangezien patronen rechtstreeks in het WordPress dashboard terechtkomen. Dit resulteert hopelijk in steeds uitgebreidere ontwerpmogelijkheden voor gebruikers

Een nieuwe fullscreen Pattern Explorer

Aangezien het aantal beschikbare blokpatronen in de Pattern Directory blijft groeien en meer thema’s ze gebruiken, introduceert WordPress 5.9 een nieuwe interface voor de patroonnavigatie: de Pattern Explorer.

Fullscreen patroon modal in WordPress 5.9.

Een nieuwe Explore knop opent nu een fullscreen modal waarmee gebruikers met slechts een paar klikken kunnen bladeren, zoeken naar en blokpatronen kunnen invoegen. Het resultaat is een verbeterde gebruikerservaring.

Uitgelichte blokpatronen in de blok-inserter.

Je vindt aanvullende opmerkingen en verschillende voorbeelden van blokpatronen in ons uitgebreide artikel over het Twenty Twenty-Two WordPress thema.

Als je geïnteresseerd bent en meer wilt weten, luister dan naar Josepha Haden Chomphosy’s podcast Aflevering 16 en 21, en bekijk de Exploring WordPress 5.9 YouTube video van Anne McCarthy.

Het Twenty Twenty-Two thema en WordPress blok thema

In WordPress 5.9 hoef je niet langer de Gutenberg plugin te installeren om Full Site Editing op je WordPress site in te schakelen. Je hoeft alleen maar een blokthema te gebruiken dat kan profiteren van alle FSE features.

Bovendien is WordPress 5.9 gebundeld met een gloednieuw standaardthema, Twenty Twenty-Two. Dit is een game changer aangezien Twenty Twenty-Two het eerste standaardblokthema ooit is.

Twenty Twenty-Two is een zeer flexibel en aanpasbaar thema. Het biedt een perfecte sandbox om de nieuwe templatebewerkingsflow, nieuwe blokken, interfaceverbeteringen en alle sitebewerkingsfeatures die aan de kern zijn toegevoegd, uit te proberen, te beginnen met WordPress 5.9.

Twenty Twenty-Two is het nieuwe standaard WordPress thema. (Bron afbeelding: WordPress.org)

Zoals hierboven vermeld, hoef je alleen maar een blokthema te installeren en te activeren, zoals Twenty Twenty-Two. Zodra het thema actief is, verschijnt er een nieuw menu item Editor (beta) in het beheerdersmenu van het WordPress dashboard.

Het nieuwe Appearance menu in WordPress 5.9.

De interface van de site-editor heeft nu een vernieuwde site editing flow. Vanuit de editing interface kun je de startpagina, templates en template-onderdelen van de site visueel bewerken en toegang krijgen tot de Global Styles interface.

Wanneer je een blokthema activeert, zul je de Customizer niet vinden. Dat komt omdat de Customizer geen blokthema’s ondersteunt, die alleen de site-editor gebruiken. Dat is ook de reden waarom je geen preview van inactieve blokthema’s kunt bekijken.

De Live Preview is niet beschikbaar bij blokthema's. — De Live Preview is niet beschikbaar bij blokthema’s.

Dus vanaf WordPress 5.9 is het toegangspunt tot de Customizer niet langer beschikbaar in het beheerdersmenu wanneer een blokthema actief is (tenzij je een plugin gebruikt die er gebruik van maakt).

Als je nog steeds gebonden bent aan traditionele thema’s en je je zorgen maakt over achterwaartse compatibiliteit, wees gerust: je kunt je thema blijven gebruiken.

Je kunt momenteel kiezen uit vier verschillende categorieën thema’s:

Blokthema’s: Thema’s ontworpen voor FSE
Universele thema’s: Thema’s die werken met zowel de Customizer als de Site-editor
Hybride thema’s: Klassieke thema’s die FSE features ondersteunen, zoals theme.json
Klassieke thema’s: Thema’s met PHP templates, functions.php, enz.

Vanwege de impact die blokthema’s waarschijnlijk zullen hebben op het WordPress ecosysteem, hebben we een heel artikel over Twenty Twenty-Two en WordPress blokthema’s. Bekijk het zeker eens voor een uitgebreider overzicht.

Prestatieverbeteringen

Bij Kinsta zijn we geobsedeerd door websitesnelheid. Daarom zijn we enthousiast over de prestatieverbeteringen van WordPress 5.9.

Deze verbeteringen zijn van invloed op verschillende delen van het CMS, van de blokeditor tot blokthema’s, Lazy Loading en meer. Laten we beginnen.

Verbeteringen in Block Inserter

Sinds WordPress 5.9 worden bloktypes, patronen en categorieën gelazyload in de Block Inserter. De browser laadt eerst content met een hogere prioriteit, waardoor de gebruiker een soepelere bewerkingservaring en verbeterde prestaties krijgt.

Verdere opmerkelijke prestatieverbeteringen in de context van de blokeditor zijn van invloed op herbruikbare blokken en List View.

Minder CSS geladen

Wat de frontend betreft, heeft WordPress 5.9 de hoeveelheid CSS die door blokthema’s wordt geladen drastisch verminderd, waardoor pagina’s aanzienlijk sneller worden geladen.

De belangrijkste verbetering die in dit verband moet worden opgemerkt, is de introductie van de theme.json instellingen en stylemechanisme, dat voorkomt dat thema’s enorme stylesheets gebruiken, inclusief honderden CSS declaraties. De hoeveelheid CSS code die een thema gebruikt, is nu teruggebracht tot enkele aangepaste CSS eigenschappen die elk bloktype opnieuw kan gebruiken.

Prestatieverbeteringen bij Lazy Loading

Lazyloading van afbeeldingen werd voor het eerst geïntroduceerd in WordPress 5.5. Vanaf WordPress 5.7 werd de lazyloading functionaliteit uitgebreid naar iframes, waardoor site eigenaren snellere websites konden bouwen en hun SEO konden verbeteren.

Hoe dan ook, na een analyse van de Largest Contentful Paint (LCP) bleek dat het toewijzen van het loading="lazy" attribuut aan alle afbeeldingen en iframes op de pagina een lichte prestatievermindering veroorzaakt.

Het simpelweg overslaan van het attribuut loading="lazy" was geen oplossing, omdat dit zou leiden tot het verlies van de duidelijke voordelen van lazyloading.

De optimale oplossing zou zijn om het attribuut loading="lazy" alleen weg te laten voor afbeeldingen die “above the fold” verschijnen. Omdat het attribuut loading="lazy" echter aan de serverzijde is toegewezen, kan WordPress niet bepalen welke afbeeldingen precies above the fold worden weergegeven. Het is iets dat grotendeels afhangt van het actieve thema.

Nu, als een afwegingsoplossing, wordt, te beginnen met WordPress 5.9, het attribuut loading="lazy" niet toegepast op de eerste contentafbeelding of iframe. Een analyse uitgevoerd op 50 populaire WordPress thema’s wees uit dat deze oplossing leidt tot aanzienlijke prestatieverbeteringen en dat pagina’s tot 30% sneller worden geladen.

Felix Arntz legt uit hoe het werkt:

… om de prestaties out-of-the-box te verbeteren zonder dat een ontwikkelaar het gedrag hoeft aan te passen, zal WordPress nu de allereerste “contentafbeelding of iframe” op de pagina overslaan voor het lazyloaden. De term “contentafbeelding of iframe” verwijst hier naar elke afbeelding of iframe die wordt gevonden in de content van een bericht in de huidige hoofdqueryloop, evenals een uitgelichte afbeelding van een dergelijk bericht. Dit geldt zowel voor “single” als voor “archief” content: in een “single” context wordt de eerste afbeelding of iframe van de (enige) post niet gelazyload, terwijl in een “archief” context de eerste afbeelding of iframe van het eerste bericht in de query niet wordt gelazyload.

Themaontwikkelaars kunnen nu het nieuwe wp_omit_loading_attr_threshold filter gebruiken om het aantal afbeeldingen/iframes te wijzigen dat moet worden overgeslagen van lazyloading.

Meerdere stylesheets per blok

Ontwikkelaars van blokken en thema’s kunnen meerdere stylesheets op elk blok registreren en indien nodig stijlen uit andere blokken laden. Hierdoor kunnen stylesheets worden geladen, afhankelijk van de paginacontent, waardoor wordt voorkomen dat thema’s enorme stylesheets op elke pagina laden.

Ari Stathopoulos zegt hierover:

Blokken kunnen nu meerdere stylesheets registreren en indien nodig stijlen uit andere blokken laden. Thema’s kunnen stijlen per blok toevoegen in plaats van enorme stylesheets te laden die overal geforceerd worden geladen. Dit heeft een grotere impact op blokthema’s waar het laden van stylesheets is geoptimaliseerd op basis van de pagina- en lay-outcontent, maar kan ook worden gebruikt door klassieke thema’s.

Extra features voor ontwikkelaars

Naast de vele features en UI verbeteringen die tot nu toe zijn besproken, introduceert WordPress 5.9 ook verschillende features voor ontwikkelaars.

Een nieuw attribuut om blokken te vergrendelen

Blokontwikkelaars kunnen nu voorkomen dat gebruikers individuele blokken verplaatsen of verwijderen door een lock attribuut toe te voegen in blokinstellingen:

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

Als deze feature is ingeschakeld, kunnen gebruikers de blokcontent bewerken, maar kunnen ze het blok niet op de pagina verplaatsen of het van het editorcanvas verwijderen. De volgende afbeelding toont een aangepast blok met een standaardset toolbars controls:

Een aangepast blok met een standaard toolbar

Het definiëren van het lock attribuut, zoals te zien is in de bovenstaande code, verbergt de blokverplaatsers en de Move to en Remove controls van de bloktoolbar. Onderstaande afbeelding toont het eindresultaat op het scherm:

Een aangepast blok zonder Move and Remove controls

Je kunt ook een specifiek blok binnen een blokpatroon vergrendelen. Zie voor een voorbeeld ook Blokken vergrendelen in WordPress 5.9.

Nieuwe API voor toegang tot algemene instellingen en stijlen

WordPress 5.9 introduceert een nieuwe openbare PHP API om gegevens van theme.json te lezen.

Instellingen en stijlen lezen van theme.json

Er zijn twee nieuwe functies om gegevens te lezen van secties met settings en styles die zijn gedeclareerd in het theme.json:

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

$path is een array met het pad naar de opgegeven instelling
$context is een array die de context voor die gegevens instelt. Ontwikkelaars kunnen lezen vanuit een specifieke sectie met blokinstellingen, bijvoorbeeld array( 'block_name' => 'core/paragraph' ). De orygin sleutel die is ingesteld op base maakt het negeren van aangepaste gegevens die door de gebruiker zijn opgeslagen, mogelijk.

De volgende voorbeeldcode retourneert de instellingswaarde contentSize In Twenty Twenty-Two zou het 650px zijn:

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

Door een context in te stellen, kun je stijlen voor specifieke blokken ophalen. De volgende code laat zien hoe je de border radius waarde voor het core/button blok kunt ophalen:

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

De bovenstaande functie retourneert de vereiste property waarde, rekening houdend met standaardinstellingen, thema-instellingen en gebruikersgegevens. De aangepaste waarde wordt geleverd als de gebruiker de border radius van de knop configureert in de Global Styles interface.

Om gebruikersgegevens te negeren, gebruik je de volgende code:

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

De gegenereerde stylesheet verkrijgen

WordPress 5.9 introduceert ook een nieuwe functie om de stylesheet te krijgen die het resultaat is van standaard-, thema- en aangepaste stijlen:

wp_get_global_stylesheet( $types = array() );

$types is een lijst van de stijlen die moeten worden gegenereerd.

Je kunt meer lezen over de nieuwe API in Nieuwe API om toegang te krijgen tot algemene instellingen en stijlen.

Meer features voor ontwikkelaars

Aanvullende WordPress 5.9 wijzigingen voor ontwikkelaars waarover je misschien meer wilt weten, zijn onder meer:

Samenvatting

We sluiten dit artikel af met een korte opmerking over het marktaandeel van WordPress. WordPress beheert momenteel meer dan 65% van alle websites waarvan het contentmanagementsysteem bekend is en dat is meer dan 43% van alle websites.

Deze cijfers zijn indrukwekkend, vooral in vergelijking met de naaste concurrenten met een marktaandeel van minder dan 5%, zoals Shopify.

En dit betekent ook dat je de evolutie van het WP CMS niet over het hoofd kunt zien. Elke nieuwe versie van WordPress brengt nieuwe features, interfaceverbeteringen, prestatieverbeteringen en WordPress 5.9 is geen uitzondering. Het enige dat je nodig hebt om de nieuwe features te testen, is een blokthema, zoals het nieuwe Twenty Twenty-Two standaardthema, en je bent klaar voor de start.

Nu ben jij aan de beurt! Ben je klaar om de overstap te maken naar blokthema’s en FSE? En wat zijn je favoriete veranderingen met WordPress 5.9?

Carlo Daniele Kinsta

Carlo is een gepassioneerd liefhebber van webdesign en front-end development. Hij werkt al meer dan 10 jaar met WordPress, ook in samenwerking met Italiaanse en Europese universiteiten en onderwijsinstellingen. Hij heeft tientallen artikelen en gidsen over WordPress geschreven, gepubliceerd op zowel Italiaanse als internationale websites en in gedrukte tijdschriften. Je kunt Carlo vinden op X en LinkedIn.