Wat is er nieuw in WordPress 6.0: nieuwe blokken, style switching, templatebewerking, webfonts API en nog veel meer

WordPress 6.0 Arturo is gearriveerd en, zoals gewoonlijk, hebben wij een kijkje onder de motorkap genomen om onze lezers een preview te geven van wat er nieuw is in deze nieuwe major WordPress release.

Laten we meteen maar met de deur in huis vallen: als WordPress 5.9 ons naar de kern van fase 2 van Gutenberg heeft gebracht, dan heeft WordPress 6.0 tot doel de al beschikbare aanpassingstools te versterken.

Maar het is niet “alleen” maar een nieuwe major versie. Zoals Matias Ventura aangaf in de Preliminary Roadmap van 6.0, was de introductie van de site-editor een grote mijlpaal, maar ook slechts een eerste stap in de reis.

WordPress 6.0 brengt aanzienlijke verbeteringen op verschillende gebieden van het CMS, van bruikbaarheid tot prestaties, waaronder het volgende:

Verbeterde informatie-architectuur en templatebrowse-ervaring
Verbeterde template creatie
Nieuwe hooks
Webfonts API
Een nieuwe browsemodus voor de site-editor
Alternatieve Global Styles
Een verbeterd Navigation blok
Nieuwe ontwerptools
Verbeterde prestaties
En nog veel meer…

Maar dat is nog niet alles. WordPress 6.0 brengt een indrukwekkend aantal wijzigingen met zich mee, met 251 Trac tickets, waaronder 97 features en verbeteringen en 131 bugfixes.

Ja, er is veel om over te praten. Dus laten we het niet langer uitstellen en samen ontdekken er nieuw is in WordPress 6.0.

Webfonts API

Een nieuwe Webfonts API biedt nu een gestandaardiseerde manier om webfonts in WordPress te laden, wat zorgt voor betere prestaties en gebruikersprivacy.

Vanaf WordPress 6.0 kun je alleen een nieuw webfont registreren vanaf je theme.json.

Het gebruik van de theme.json is vrij eenvoudig. Het enige dat je hoeft te doen, is een nieuwe lettertypefamilie toevoegen aan de typography-sectie. De volgende code geeft een voorbeeld van webfontregistratie:

{
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": ""Source Serif Pro", serif",
					"name": "Source Serif Pro",
					"slug": "source-serif-pro"
				},
				{
					"fontFamily": ""Inter", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	}
}

De code hierboven voegt de Inter font familie toe aan de standaard set fontFamilies, die beschikbaar is in Twenty Twenty-Two.
Als je het zelf wilt proberen, download dan het Inter webfont van Google Fonts naar de map ./assets/fonts en voeg de bovenstaande code toe aan het gedeelte settings.typography van Twenty Twenty-Two’s theme.json. Als je klaar bent, sla je het bestand op en keer je terug naar de interface voor het bewerken van de site.

De volgende afbeelding toont het resultaat in de editor.

Er is een nieuwe lettertypefamilie geregistreerd in Twenty Twenty-Two.

De Webfonts API registreert alleen lettertypen die nodig zijn om blokken op de huidige pagina weer te geven en dat is vooral handig bij webfonts die zijn gedefinieerd in stijlvariaties. Bovendien optimaliseert de API het aantal HTTP verzoeken door lettertypen per lettertypefamilie te registreren en te enqueue-en.

Je kunt meer lezen over de nieuwe API in de Webfonts API pull request, in Status of Webfonts API for WordPress 6.0 Inclusion, en in Global Styles variaties in WordPress 6.0.

Global Styles wisselen

Variaties in Global Styles is een feature van WordPress 6.0 waar veel mensen naar uitkijken. Auteurs van thema’s kunnen nu meerdere sets van Global Styles bundelen met hun thema’s, zodat gebruikers met een enkele klik tussen stijlvariaties kunnen schakelen.

Het lijkt veel op het hebben van kant-en-klare onderliggende thema’s, met een vooraf gedefinieerde set stijlen voor elk.

Om een stijlvariatie aan je blokthema toe te voegen, voeg je een alternatief JSON bestand toe aan een styles map in de hoofdmap van je thema.

Thema’s die variaties van Global Styles ondersteunen, tonen een nieuw Browse styles item in de Global Styles zijbalk. Dit brengt een venster waar themagebruikers een lijst met beschikbare stijlen vinden.

Kies een Global Style uit de lijst en de styling wordt automatisch toegepast op je hele website.

Een stijl kiezen met een enkele klik in WordPress 6.0.

Deze nieuwe feature stelt thema-ontwikkelaars in staat een onbeperkt aantal stijlvariaties te creëren en past perfect bij de nieuwe Webfonts API.

De volgende afbeelding toont een aangepaste stijl uit het vorige voorbeeld, met een ander lettertype in de header.

Een stijlvariatie met een aangepast lettertype in WordPress 6.0.

Als je het zelf wilt proberen, voeg dan een styles map toe aan de root van je blokthema, maak een nieuw JSON bestand met een voor jou zinvolle naam, open het in je favoriete code-editor en voeg de volgende code toe:

{
	"version": 2,
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [ "#143F6B", "#EFEFEF" ],
					"slug": "foreground-and-background",
					"name": "Foreground and background"
				},
				{
					"colors": [ "#143F6B", "#FEB139" ],
					"slug": "foreground-and-secondary",
					"name": "Foreground and secondary"
				},
				{
					"colors": [ "#143F6B", "#F6F54D" ],
					"slug": "foreground-and-tertiary",
					"name": "Foreground and tertiary"
				},
				{
					"colors": [ "#F55353", "#EFEFEF" ],
					"slug": "primary-and-background",
					"name": "Primary and background"
				},
				{
					"colors": [ "#F55353", "#FEB139" ],
					"slug": "primary-and-secondary",
					"name": "Primary and secondary"
				},
				{
					"colors": [ "#F55353", "#F6F54D" ],
					"slug": "primary-and-tertiary",
					"name": "Primary and tertiary"
				}
			],
			"palette": [
				{
					"slug": "foreground",
					"color": "#143F6B",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#EFEFEF",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#F55353",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#FEB139",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#F6F54D",
					"name": "Tertiary"
				}
			]
		},
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": ""Inter", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	},
	"styles": {
		"blocks": {
			"core/post-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"core/query-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)"
				}
			}
		},
		"elements": {
			"h1": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h3": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h4": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h5": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h6": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--inter)"
		}
	}
}

Je kunt de volledige code die in het bovenstaande voorbeeld wordt gebruikt, vinden op GitHub en gist.

Ontwikkelaars kunnen uitgebreide informatie over Global Styles en Theme.json vinden in de documentatie-artikelen Global Settings & Styles en Theme.json.

Je kunt ook de nieuwste versie van Twenty Twenty-Two bekijken, die nu drie nieuwe stijlvariaties bevat.

Door stijlen browsen in Twenty Twenty-Two.

Overal blokpatronen

Eén ding is zeker, blokpatronen spelen een centrale rol in de huidige fase van WordPress ontwikkeling. Blokpatronen werden voor het eerst geïntroduceerd in WordPress 5.5 en zijn in de loop der tijd regelmatig verbeterd.

Vanaf WordPress 5.9 vonden ook patronen hun weg naar onze WordPress websites, waarbij ze dynamisch opgehaald worden uit de Patterns directory en vervolgens worden geladen in de Block Inserter.

En nu kan iedereen een patroondeveloper worden, dankzij een gloednieuwe online tool. Met de Pattern Creator kun je je beste blokpatronen bouwen, bewerken en indienen bij de Pattern Directory. Het enige dat je nodig hebt om aan de slag te gaan, is een WordPress.org account.

Zoeken naar afbeeldingen in de Pattern Creator.

En WordPress 6.0 introduceert verdere verbeteringen aan blokpatronen.

Ten eerste zijn blokpatronen makkelijker te vinden bij het bewerken van templates. Nu toont de Quick Inserter alleen blokpatronen wanneer je deze opent op het hoogste niveau van een template, d.w.z. wanneer het blok dat je aan je template gaat toevoegen de directe afstammeling is van het document.

Dan wanneer aan de volgende voorwaarden wordt voldaan:

Je bewerkt een bloktemplate
De quick inserter bevindt zich op rootniveau
Je voegt een blok toe tussen andere blokken (d.w.z. niet het eerste of het laatste blok op de pagina)

De quick inserter toont alleen blokpatronen in de template editor.

Een andere handige feature stelt thema ontwikkelaars nu in staat om aanbevolen patronen toe te voegen aan de theme.json. Om het eens te proberen, zoek je in de Patterns map naar de patronen die je wilt aanbevelen aan de gebruikers van je thema, pak je de patroon slug van de URL en voeg je deze als volgt toe aan je theme.json:

"patterns": [
	"image-with-angled-overlay-shape-call-to-action-button-and-description",
	"hero-section-with-overlap-image"
],

Gebruikers zullen je aanbevolen patronen vinden in de block inserter.

Aanbevolen patronen in de quick inserter.

Een krachtige patroon-gerelateerde feature die inbegrepen zit met WordPress 6.0 is de impliciete patroonregistratie. Thema’s kunnen nu impliciet patronen registreren door ze te declaren als PHP bestanden onder een nieuwe /patterns map in de root van het thema.

Het proces is vrij eenvoudig:

maak een nieuwe patronenmap in de hoofdmap van je thema,
bouw een blokgroep in de blokeditor,
kopieer en plak je HTML in een nieuw tekstbestand,
voeg de volgende kop toe,
en sla het bestand op als PHP in je patronen

<?php
/**
 * Title: My pattern
 * Slug: my-theme/my-pattern
 * Categories: text
 */
?>

En dat is alles. Je hebt nu een nieuw blokpatroon dat moet verschijnen in de blok inserter.

Een aangepast patroon in de quick blok Inserter.

Page creation patterns, zijn een ander blok patroon-gerelateerde feature die is geïntroduceerd in WordPress 6.0. Wanneer je nu een nieuwe pagina maakt, wordt op het scherm voor het maken van pagina’s een popup weergegeven met een reeks blokpatronen waaruit je kan kiezen om je pagina te maken.

De popup wordt alleen getoond wanneer ten minste één patroon support declaret voor de core/post-content blocktypes.

Standaard bevat WordPress 6.0 bevat geen van deze patronen, dus zal de popup niet verschijnen, tenzij je support toevoegt aan een bestaand patroon. Maar het toevoegen van de popup aan het scherm voor het maken van pagina’s is vrij eenvoudig.

Als je een blokpatroon voor je thema hebt geregistreerd, zoals weergegeven in het bovenstaande voorbeeld, kun je ondersteuning voor de patroonpopup toevoegen met behulp van de Block Types property, zoals weergegeven in het onderstaande voorbeeldpatroon:

<?php
/**
 * Title: Pattern with columns
 * Slug: twentytwentytwo/pattern-with-columns
 * Block Types: core/post-content
 * Categories: text
 */
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul><li>List item</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Sla deze code op in een PHP bestand in de map /patterns van je thema. Maak vervolgens in je WordPress dashboard een nieuwe pagina aan. Je zou een nieuwe popup moeten zien zoals getoond in de volgende afbeelding:

Voor een beter overzicht van patronen voor het maken van pagina’s kijk je eens naar Page creation patterns in WordPress 6.0.

Voor een uitgebreider overzicht van de ontwikkeling van blokpatronen, zie ook de New features for working with patterns and themes in WordPress 6.0 en de Tracking Issue op GitHub.

Features voor het bewerken van sites

De ontwikkeling van de volledige sitebewerking is niet beëindigd met WordPress 5.9. WordPress 6.0 gaat een stap verder door de visuele functionaliteit voor het bouwen van thema’s te verbeteren en nieuwe template opties voor blokthema’s te leveren. En er komen nog meer features aan.

Visueel thema bouwen

WordPress 6.0 introduceert een verbeterde exporttool voor blokthema’s, waarmee je het huidige thema met al je wijzigingen en aanpassingen kunt downloaden.

Als je de exporttool voor blokthema’s tot nu toe nog niet hebt gebruikt, is dit een krachtige tool voor het bewerken van sites waarmee je je stijlen en templates als een heel thema kunt exporteren.

Als je tevreden bent met je wijzigingen, open je vanuit de interface van de site editor de Options zijbalk en ga je naar het Tools gedeelte. Hier kun je met een Export knop het huidige thema met al je stijl- en templateaanpassingen in een zipbestand downloaden.

Exporteer een thema vanuit de interface van de editor.

Je kunt je thema vervolgens exporteren en op elke WordPress website installeren.

We hebben de verbeterde thema exporttool getest op een lokale WordPress installatie en ontdekten dat bijna alles werkt zoals we hadden verwacht… 😅

Hoe dan ook, de exporttool is nog in ontwikkeling en vandaag kunnen we slechts een glimp opvangen van het enorme potentieel ervan. Denk na over de mogelijkheid om je thema’s te creëren vanuit de bewerkingsinterface van je website en ze te verspreiden op een willekeurig aantal installaties. En dat is of je een ontwikkelaar bent of niet…

Er zijn nog veel openstaande problemen die moeten worden opgelost, waardoor we denken dat we binnenkort verschillende verbeteringen zullen zien. Als je nieuwsgierig bent en meer wilt weten over Visual Theme Building (zoals wij zijn), kun je de Tracking Issue op GitHub volgen.

Meer template opties in blokthema’s

In eerdere WordPress versies hadden we een beperkt aantal templatetypen beschikbaar.

Een nieuwe template toevoegen in WordPress 5.9.

WordPress 6.0 introduceert verschillende nieuwe templatetypen, waaronder Author, Category, Date, Tag, en Taxonomy.

Een nieuwe template toevoegen in WordPress 6.0.

Deze toevoeging zou de workflow voor het bewerken van je site moeten stroomlijnen. Om het eens te proberen, kies je gewoon een nieuwe template uit de dropdown, voeg je de benodigde blokken toe, sla je je wijzigingen op en controleer je hoe deze er aan de frontend uitzien. Zo makkelijk is het! Dit, in combinatie met de hierboven genoemde thema-exportfeature en je begrijpt denk ik beter wat we binnenkort kunnen verwachten wat betreft site-editing.

Verbeteringen aan interface en bruikbaarheid

WordPress 6.0 introduceert een aantal wijzigingen in de gebruikersinterface, waarvan er vele bedoeld zijn om wat meer orde te scheppen in de zijbalk. Gezamenlijk zouden deze wijzigingen een aanzienlijke impact moeten hebben op de algehele bewerkingservaring. Hier zullen we er slechts een paar noemen, maar je kunt de Gutenberg release notes raadplegen voor een uitgebreidere lijst met wijzigingen (zie Gutenberg 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13.0).

Verbeteringen in List View

De List View krijgt te maken met een aanzienlijk aantal wijzigingen die de bruikbaarheid van de component verbeteren.

List View uitvouwen bij selectie

Wanneer je in de editor op een blok klikt, wordt het blok nu automatisch gehighlight in de lijstweergave. Als het blok in een bovenliggend blok is genest, wordt het bovenliggende blok uitgevouwen en wordt het item in de block tree weergegeven.

Uitgevouwen Group blok in List View bij blokselectie.

List View standaard samengevouwen

Vóór WordPress 6.0 is alles standaard uitgevouwen wanneer je het venster List View opent.

Maar aangezien een bericht vaak uit complexe structuren van geneste blokken bestaat, is het volkomen logisch om de blokboom ingeklapt te laten bij het openen van de List View.

Met 6.0 is de List View standaard in alle editors ingeklapt, waardoor de block tree in één oogopslag veel begrijpelijker is.

Focus op de List View knop

Wanneer je het List view venster opent, keert de focus nu correct terug naar de List view knop. Dit is met name handig wanneer je door de List View bladert vanaf je toetsenbord. Dit resulteert in een soepelere en meer naadloze bewerkingservaring.

Meerdere blokken selecteren en drag & drop

Een andere wijziging in de List View stelt je in staat om meerdere blokken op hetzelfde niveau te selecteren en ze naar een andere positie in de lijst te draggen & droppen.

Blokstijl previews

Vóór WordPress 6.0 werden blokstijl previews in de blokzijbalk geplaatst, die een aanzienlijk deel van het Styles venster in beslag namen.

Voorbeeld van blokstijl in WordPress 5.9.

In 6.0 verschijnen alleen de namen van de stijlvariaties in het Styles venster, terwijl de stijlpreviews buiten de zijbalk worden weergegeven wanneer de stijlnaam wordt verplaatst of de focus krijgt.

Deze wijziging verkleint de afmetingen van de zijbalk en zou stijlnamen duidelijker moeten maken.

Typografiesectie Paragraph

Om orde te scheppen in de blokzijbalk, is het besturingselement Drop Cap voor het Paragraph blok verplaatst van zijn eigen sectie naar de Typography sectie.

Dood deze wijziging worden alle bedieningselementen voor typografische instellingen nu onder dezelfde sectie geplaatst, wat leidt tot een meer consistente gebruikerservaring.

Typografie-instellingen in WordPress 5.9 versus WordPress 6.0.

Rand- en kleurinstellingen verplaatst naar onder het Tools venster

Om orde te scheppen in een rommelige instellingenzijbalk, zijn de randinstellingen en kleurinstellingen verplaatst naar het Tools Panel en kunnen ze in verschillende contexten worden uitgevouwen en samengevouwen.

Deze wijziging zou de bewerkingservaring met verschillende blokken moeten stroomlijnen en meer consistentie in de zijbalk moeten brengen.

Categorieherinnering bij publicatie bericht

Als je haast hebt of regelmatig een groot aantal blogposts publiceert, kun je makkelijk tags of categorieën vergeten. Als je je vaak in een dergelijke situatie bevindt, zul je merken dat de tagherinnering bij het publiceren van een bericht zeer nuttig is.

Om sitebeheerders en auteurs te helpen ervoor te zorgen dat aan hun berichten de nodige categorieën worden toegewezen, verschijnt vanaf WordPress 6.0 een nieuwe Suggestie: een categorie toewijzen venster in het Post Publish venster wanneer er nog geen categorie aan het bericht is toegevoegd.

De onderstaande afbeelding vergelijkt het Post publish venster in WordPress 5.9 versus 6.0.

Code-editor toegevoegd aan de site-editor

Vanaf WordPress 6.0 is de code-editor ook beschikbaar in de site-editor. Net als bij de Post Editor, vind je de code-editor onder het Options menu.

WordPress 6.0 voegt de Code Editor toe aan de Site Editor.

Blokvergrendeling UI

Een nieuw Lock item in de More Settings dropdown opent een popup waarin je kunt voorkomen dat gebruikers blokken verplaatsen of verwijderen (of beide).

Dit is met name handig bij het bewerken van templates en herbruikbare blokken, waar je ook het bewerken van blokken kunt beperken.

Een herbruikbaar Group blok vergrendelen.

De nieuwe functie kan programmatisch uitgeschakeld worden met de nieuwe instelling canLockBlocks.

De volgende code schakelt de blokvergrendelingsfunctie alleen in voor gebruikers met een Editor rol of hoger:

add_filter(
	'block_editor_settings_all',
	function( $settings, $context ) {

		$settings['canLockBlocks'] = current_user_can( 'delete_others_posts' );
 
		return $settings;
	},
	10,
	2
);

Ontwikkelaars kunnen ook de Block Locking UI voor specifieke bloktypen verbergen met behulp van de lock property:

{
	"apiVersion": 2,
	"supports": {
		"lock": false
	}
}

Je kunt meer lezen over block locking in de Block Locking Settings in WordPress 6.0.

Multi-select

Het is nu mogelijk om tekst binnen meerdere blokken te selecteren.

Tekst selecteren binnen twee alinea's. — Tekst selecteren binnen twee alinea’s.

Stijlbehoud

Wanneer je blokken transformeert of nieuwe knoppen maakt, worden nu verschillende stijlen behouden.

De afbeelding hieronder toont een List blok met verschillende stijlen.

Een List blok waarop verschillende stijlen zijn toegepast.

Wanneer je het List blok omzet in Paragraph, behouden de nieuwe blokken dezelfde stijlen als de vorige lijstitems.

Dezelfde verbetering is van toepassing op nieuwe knoppen die zijn toegevoegd aan een Buttons blok, die nu de stijl overnemen van de aangrenzende knoppen.

Nieuwe kernblokken

Het aantal kernblokken neemt voortdurend toe. Als je je afvraagt wat de kernblokken zijn die momenteel beschikbaar zijn, is er nu een handboekpagina met een volledige lijst met kernblokken die zijn opgenomen in de Gutenberg plugin. Voor elk blok worden Name, Category, Supports, en Attributes gegeven, evenals een handige link naar de broncode, iets wat blokontwikkelaars zeker zullen waarderen.

En er komen nog meer blokken in WordPress 6.0. Vind hier de blokken die je mag verwachten in de komende versie.

Comments Query Loop

Net als bij het Query Loop blok, geeft een nieuw Comment Query Loop blok berichtcomments weer. Het is een geavanceerd blok dat verschillende binnenblokken bevat die je afzonderlijk kunt bewerken en configureren.

Zoals de onderstaande afbeelding laat zien, kun je elk van de blokken in het Comment Query Loop blok selecteren om het uiterlijk naar wens aan te passen. Je kunt ook meer blokken toevoegen of bestaande blokken verplaatsen of verwijderen (Broncode).

Het Comments Query Loop blok configureren.

Met een nieuw en aanpasbaar Read More blok kun je verschillende aspecten van de Read More knop aanpassen: randen, kleuren, hoeken, typografie en meer (broncode).

Dit is een geweldige toevoeging omdat je hiermee de Read More link kunt toevoegen en aanpassen buiten de context van het Excerpt blok.

No Results in Query Loop

Het No Results blok is een blokcontainer waarin je elke tekst of elk blok kunt toevoegen om te laten zien wanneer de zoekopdracht geen resultaten heeft. Om het No Results blok toe te voegen aan een Query Loop, selecteer je de Query Loop en klik je op het pluspictogram in de rechterbenedenhoek om de Quick Inserter te starten. Zoek dan naar No Results. Het blok is niet beschikbaar buiten de Query Loop (Broncode).

Het No Result blok toevoegen aan de Query Loop.

Avatar en Post Author Biography

WordPress 6.0 introduceert ook nieuwe bloktypen om het Author blok in componenten te splitsen en deze afzonderlijk in je content te gebruiken.

Het Post Author Biography blok geeft de beschrijving van de auteur (broncode).

Het Avatar blok toont eenvoudig de avatar van een gebruiker, zodat je kunt kiezen tussen site-auteurs (broncode).

Het Avatar blok in WordPress 6.0.

Dit blok is met name handig om de avatar van een auteur weer te geven buiten de context van het Author Info blok of comments. Je kunt het bijvoorbeeld gebruiken op een pagina die is gewijd aan alle auteurs, of op een pagina met reviews van je gebruikers/lezers.

Verbeteringen aan bestaande blokken

WordPress 6.0 introduceert ook verschillende wijzigingen en verbeteringen aan bestaande blokken die mogelijk een sterke impact zullen hebben op je bewerkingsworkflow. Het Navigation blok krijgt te maken met verschillende wijzigingen, maar je zult ook verbeteringen zien in andere blokken, waaronder Query Loop, Featured Image, Group en Social Icons.

Navigation blok verbeteringen

In de afgelopen maanden heeft het Navigation blok verschillende verbeteringen ondergaan en heeft het nu een aanzienlijk gebruiksvriendelijkere interface.

Ten eerste is er een uitgebreide preview toegevoegd aan het Navigation Link blok. Wanneer je een link toevoegt die naar een openbaar toegankelijke bron verwijst, wordt door op de linkknop in de blokwerkbalk te klikken een previewafbeelding van die bron weergegeven.

Uitgebreide preview voor navigatielinks.

Een paar extra wijzigingen zijn van invloed op de algehele bewerkingservaring.

Als je nu een nieuw menu toevoegt en er bestaat maar één navigatiemenu, dan wordt dit standaard het enige beschikbare menu. Deze wijziging zou je bewerkingsworkflow moeten versnellen als je slechts één navigatiemenu hebt.

Navigatielinks hadden al een beschrijvingsveld waar gebruikers een tekst kunnen invoeren die hun navigatielinks beschrijft. In eerdere WordPress versies konden thema’s deze feature echter niet ondersteunen.

In WordPress 6.0 verschijnt er nu een tag <span class="wp-block-navigation-item__description"> na het label van de link.

De beschrijving van de navigatielink verschijnt achter het label van de link.

In Twenty Twenty-Two wordt het .wp-block-navigation-item__description element verborgen via CSS, maar thema’s kunnen een display: block eigenschap toevoegen om de linkbeschrijving weer te geven.

Beschrijving van de navigatielink in WordPress 6.0 en Twenty Twenty-Two.

Query Loop filters en Featured Images

De sectie van de Query Loop filterinstellingen sectie toont vanaf nu invoervelden voor aangepaste taxonomieën. Hierdoor kunnen gebruikers het huidige berichttype filteren op een of meer aangepaste taxonomieën die zijn geregistreerd voor het geselecteerde berichttype.

Het is nu ook mogelijk om berichten op meerdere auteurs te filteren, terwijl je in eerdere versies slechts één auteur uit een dropdown mocht selecteren.

Query Loop filterinstellingen in WordPress 6.0.

Bovendien kun je nu ook de afmetingen van de Featured Image binnen een Query Loop blok instellen.

De afmetingen van Featured Image in een Query Loop blok beheren.

Typografie en kader ondersteuning in Responsive Group blokken

Group en Row blokken ondersteunen nu typografie-instellingen. Met deze wijziging kunnen gebruikers dezelfde typografie instellingen toepassen op een hele groep blokken tegelijk, wat een paar klikken bespaart als het gaat om het opmaken van een groep met meerdere geneste blokken.

Typografische instellingen voor een Group blok.

Het Group blok is verder verbeterd en nu kun je eenvoudig blokken groeperen in Stack of Row met een enkele klik.

Selecteer gewoon de blokken die je wilt groeperen en kies een van de drie beschikbare bedieningselementen in de blokwerkbalk: Group, Row, Stack.

Zodra je blokken hebt gegroepeerd, toont een nieuw venster in de instellingenzijbalk beschrijvingen van groepsvariaties, zodat je met een paar klikken van variatie kunt wisselen.

WordPress 6.0 introduceert ook margeondersteuning voor Group blokken, waardoor gebruikers de boven- en ondermarges afzonderlijk kunnen regelen.

Featured Image in het Cover blok

Vanaf nu kun je Featured Images in Cover blokken gebruiken. Bij WordPress 6.0 is een Use featured image schakelaar toegevoegd aan de blokwerkbalk. Dankzij deze nieuwe feature kun je met een enkele klik overschakelen van de huidige afbeelding naar de featured image.

Featured image gebruiken met een Cover blok.

Labels laten zien/verbergen in Social Icons

Een kleine maar nuttige verbetering van het Social Icons blok stelt gebruikers nu in staat om pictogramlinklabels in of uit te schakelen.

Een Show label element maakt het mogelijk om labels in Social Icons aan/uit te zetten.

Als je deze optie inschakelt, kun je de standaardservicenaam weergeven of afzonderlijk aangepaste labels voor je pictogrammen instellen.

Overige blokverbeteringen

De aankomende WordPress versie bevat verder een groot aantal verbeteringen aan vele andere blokken.

Je kunt nu bijvoorbeeld de randen van Columns blokken beheren (Gutenberg 12.7).

Een andere handige UX verbetering stelt je in staat om interne links in te voegen met behulp van een eenvoudige [[ toetsenbordtrigger.

Het toevoegen van interne links in WordPress 6.0 is eenvoudiger.

Het is nu makkelijker om de ruimte rond afbeeldingen in een Gallery blok te regelen dankzij het nieuwe besturingselement voor blokafstand.

Wijzigingen voor ontwikkelaars en prestatieverbeteringen

WordPress 6.0 voegt ook veel features voor ontwikkelaars.

Een nieuw filter wp_content_img_tag maakt aanpassing van afbeeldingen in een blob van HTML content mogelijk (zie New filter to modify content images in WordPress 6.0).
De parse_request methode is gewijzigd om het aantal query’s te verminderen wanneer do_parse_request-filter false teruggeeft (zie Changes to do_parse_request filter in WordPress 6.0).
Je kan nu blokken registreren vanuit een thema (zie Registration of Blocks from within Themes).
Een nieuwe ancestor property maakt een blok alleen beschikbaar binnen de opgegeven bloktypen (zie New ancestor property in block.json).

De nieuwe release geeft ook een boost aan de prestaties, met een paar toevoegingen aan de WordPress Caching API, prestatieverbeteringen aan taxonomie term query’s en verdere prestatieverbeteringen aan single sites met grote gebruikersaantallen.

Hiermee beëindigen we onze roundup van de nieuwe features en wijzigingen die je ziet zodra je WordPress websites zijn bijgewerkt naar 6.0.

Maar dit is slechts een selectie van de verbeteringen van WordPress 6.0. Bekijk voor een volledige lijst de release notes van Gutenberg en de WordPress 6.0 Field Guide.

Zo installeer je WordPress 6.0 op een lokale ontwikkelomgeving

Als je de ontwikkelversies van WordPress vóór de officiële release wilt uitproberen, volg je deze stappen:

Open DevKinsta en maak een nieuwe lokale WordPress website
Als je klaar bent, open je je WordPress dashboard en navigeer je naar Plugins → Add New
Zoek en installeer de WordPress Beta Tester plugin
Activeer de plugin en ga naar Tools → Beta Testing
Kies op het Settings tabblad van WP Beta Tester de Bleeding edge optie en sla instellingen op
Terug naar je WordPress Dashboard, open het Updates scherm en update naar de laatste nightly versie

Dat is alles! Nu heb je een lokale WordPress ontwikkelingsinstallatie en ben je vrij om al je tests uit te voeren. Kijk eens rond en laat ons weten wat je van de nieuwe features vindt.

Met DevKinsta heb je maar een paar klikken nodig om een moderne ontwikkelomgeving voor WordPress op je lokale computer te hebben. 🖥

Download DevKinsta gratis hier! 👈

Samenvatting

Zoals hierboven vermeld, kunnen we nu zeggen dat we ons midden in fase twee van Gutenbergs ontwikkeling bevinden, de Customization Phase.

Full-site editing maakt nu deel uit van de WordPress core en 6.0 en de volgende versies zullen verdere verbeteringen brengen aan wat we al hebben en kunnen gebruiken.

Dit alles zal een enorme impact hebben op het WordPress ecosysteem en het web als geheel, ook gezien het feit dat, op het moment van schrijven,

WordPress wordt gebruikt door 64,2% van alle websites waarvan we het contentmanagementsysteem kennen. Dit is 43,0% van alle websites. (Bron W3Techs)

We stoppen hier voorlopig. Onze lijst met features en verbeteringen die met WordPress 6.0 worden geleverd, kan niet in één bericht worden samengevat, maar hopelijk hebben we in ieder geval de toevoegingen benadrukt die de grootste impact zullen hebben op de manier waarop we WordPress van dag tot dag gebruiken.

Nu willen we dit artikel beëindigen met enkele vragen voor onze lezers!

Deel alsjeblieft je mening met de community in de comments hieronder. 👇

Carlo Daniele Kinsta

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