Nieuw in WordPress 6.5: Font Library, DataViews, Block Bindings, Interactivity API en nog veel meer!

WordPress 6.5 “Regina” is op 2 april uitgebracht en wij laten je hier de fantastische nieuwe features zien.

6.5 introduceert nieuwe krachtige API’s, die de WordPress ontwikkelervaring naar een hoger niveau tillen. Maar het brengt ook een heleboel veranderingen met zich mee waar je blij van wordt als het gaat om het bouwen van sites en het creëren van content.

Dankzij de nieuwe Font Library kun je aangepaste veldwaarden injecteren in de content van coreblokken en Google Fonts rechtstreeks vanuit de site-editor downloaden en installeren. En nieuwe ontwerptools en diverse UI-verbeteringen zullen de algehele bewerkingservaring verbeteren.

En dit is nog maar een selectie uit de nieuwe updates van WordPress 6.5. De nieuwe release bevat zoveel verbeteringen en updates dat het onmogelijk zou zijn om ze allemaal in één blogbericht te vermelden. Daarom hebben we de meest interessante en baanbrekende verzameld in dit lange en gedetailleerde artikel.

Laten we beginnen aan onze ontdekkingstocht van WordPress 6.5.

De nieuwe WordPress Font Library

Eerst en vooral introduceert WordPress 6.5 een nieuwe feature waarmee je lettertypen kunt beheren vanuit de Styles interface.

Met de nieuwe WordPress Font Library kun je lettertypen beheren op een manier die lijkt op mediabeheer in de Mediabibliotheek, maar dan voor lettertypen.

Dankzij de Font Library kun je eenvoudig lokale lettertypen en Google Fonts installeren/de-installeren en kiezen welke je wilt activeren/deactiveren, ongeacht je actieve thema.

Klinkt geweldig, toch? We hebben nu veel meer controle over een cruciaal aspect van elke website: typografie. Om je eigen lettertypen te gebruiken in je WordPress website, hoef je niet meer te vertrouwen op de lettertypen van je thema of te spelen met CSS.

Het gebruik is vrij eenvoudig. Open in de site editor UI de Global Styles zijbalk en selecteer Typography.

Hier zou je een lijst moeten zien met de beschikbare lettertypen en elementen. Klik rechts op de knop Manage fonts en er verschijnt een popup met drie tabbladen.

Het tabblad Library geeft een voorbeeld van de beschikbare lettertypen, het tabblad Upload bevat een drag-and-drop gebied om lettertypen vanaf je computer te uploaden en met het tabblad Install Fonts kun je lettertypen van Google Fonts installeren.

Eenmaal verbonden met Google Fonts verschijnt er een lijst met alle beschikbare lettertypen in hetzelfde paneel.

Je kunt ook lettertypen zoeken op naam.

Kies de lettertypevarianten die je nodig hebt, klik op Install en je bent klaar.

Als je een nieuw lettertype installeert, voegt de Font Library de definitie van de lettertypefamilie toe aan de geïnstalleerde lettertypen en downloadt het lettertype naar de map wp-content/uploads/fonts.

.

Font Library uitschakelen

Plugin- en thema-ontwikkelaars kunnen de Font Library uitschakelen met het nieuwe PHP filter fontLibraryEnabled:

function disable_font_library_ui( $editor_settings ) { 
	$editor_settings['fontLibraryEnabled'] = false;
	return $editor_settings; 
}
add_filter( "block_editor_settings_all", "disable_font_library_ui" );

DataViews

DataViews is een component waarmee datasets kunnen worden weergegeven met verschillende soorten layouts, zoals tabel, raster, lijst en meer.

In  deze nieuwe versie komen nieuwe weergaven en gerelateerde features voor het beheren van pagina’s, patronen en templates in de core en we kunnen aanvullende verbeteringen verwachten met toekomstige WordPress releases.

Voorlopig introduceert WordPress 6.5 de volgende weergaven in de Site Editor:

• Templates > Manage all templates: Table en Grid layout.
• Patterns > Pattern Parts > Manage all pattern parts : Table en Grid layout.
• Patterns: Grid layout.
• Pages > Manage all pages: Table en Grid layout.

Naast layouts voegt DataViews verschillende visualisatiefuncties toe, waaronder filters, zoeken, pagineren, sorteren, verbergen en tonen van velden.

Met een knop Bulk edit kun je verschillende acties in bulk uitvoeren, afhankelijk van de huidige dataset. Voor Pagina’s kun je Verplaatsen naar de prullenbak, Herstellen en Permanent verwijderen.

DataViews bevat ook een nieuwe Primary filter API die bedoeld is om een speciaal soort filter – altijd zichtbaar op het scherm – toe te voegen aan DataViews. De afbeelding hieronder toont het nieuwe primaire filter Sync Status in de Patterns admin sectie.

De DataViews API wordt geleverd met het nieuwe npm-pakket @wordpress/dataviews waarmee ontwikkelaars kunnen experimenteren met dataweergaven.

Blok Bindings API

De Block Bindings API is een nieuwe API die bedoeld is om blokattributen te verbinden met waarden uit verschillende gegevensbronnen. Deze waarden kunnen verschillen afhankelijk van de context. Een eenvoudig voorbeeld is een kop met de naam van de auteur die verandert met de post_author waarde.

Dit is een opmerkelijke verbetering omdat het de mogelijkheden van verschillende coreblokken uitbreidt. Dankzij de nieuwe API kun je dynamische gegevens van elke bron binden aan een blokattribuut.

Gegevensbronnen kunnen de meest uiteenlopende zijn: Sitegegevens, aangepaste velden, gebruikersgegevens, patronen, shortcodes, andere blokken en zelfs externe tools die Gutenberg gebruiken. Een voorbeeld hiervan zou een Drupal website met Gutenberg kunnen zijn.

Technisch gezien kunnen we de werking van de Block Bindings API beschrijven als een proces dat uit drie stappen bestaat:

1. Eerst maak je een binding tussen blokattributen en een gegevensbron met behulp van een bindings object.
2. De API haalt de waarde uit de gegevensbron die in de binding is gedefinieerd.
3. Vervolgens wordt de HTML van het blok bijgewerkt met de waarden die zijn ontvangen van de gegevensbron.

De eerste implementatie van de Block Bindings API die wordt meegeleverd met WordPress 6.5 maakt het mogelijk om blokattributen en aangepaste velden te verbinden. Een tweede aangekondigde implementatie, Synced Patterns Overrides, is uitgesteld tot een toekomstige release.

In eerste instantie zal alleen een beperkt aantal blokken, zoals koppen, paragrafen, afbeeldingen en knoppen, de Block Bindings API ondersteunen. Met toekomstige iteraties zullen meer blokken, zelfs aangepaste blokken, aan de lijst worden toegevoegd.

Deze eerste implementatie van de API stelt plugin-ontwikkelaars ook in staat om hun bronnen op dezelfde manier te registreren als Gutenberg de gegevensbron core/post-meta registreert. Gebaseerd op het voorbeeld van Santos Guillamot, kun je je plugin databron op deze manier registreren:

register_block_bindings_source(
	'myplugin/plugin-data',
	array(
		'label'              => _x( 'Plugin Data', 'block bindings source' ),
		'get_value_callback' => 'myplugin_block_bindings_post_meta_callback',
	)
);

En dan een bindingsobject toevoegen aan je blok:

<!-- wp:paragraph 
{
	"metadata": {
		"bindings": {
			"content": {
				"source": "myplugin/plugin-data",
				"args": {
					"key":"plugin_key"
				}
			}
		}
	}
}
-->
<p>Paragraph</p>
<!-- /wp:paragraph -->

Hier is een beschrijving van elke eigenschap:

• metadata: Een object van blokmetadata.
• bindings: Een object dat een of meer bindingen bevat.
• content: Het blok attribuut om te binden aan een gegevensbron. In dit voorbeeld, het content attribuut van een Paragraph blok.
• source: De bindingsbron.
• args: Een object met argumenten om door te geven aan de bindingsbron van het blok.

Toekomstige iteraties zullen meer features toevoegen aan de Block Bindings API. Daarnaast moeten we binnenkort bindingen kunnen maken vanuit de Visual Editor, blokattributen kunnen verbinden met meer gegevensbronnen, zoals sitegegevens of taxonomiegegevens, en deze functie met meer blokken kunnen gebruiken.

Laten we nu eens dieper ingaan op de eerste implementaties van de Block Bindings API.

Aangepaste velden koppelen aan blokken

Vóór WordPress 6.5 was er geen manier om aangepaste veldwaarden te injecteren in de inhoud van coreblokken. Ontwikkelaars konden alleen aangepaste blokken maken om aangepaste velden op de frontend weer te geven.

Vanaf WordPress 6.5 kun je gegevens die zijn opgeslagen in aangepaste velden weergeven in coreblokken, waaronder knoppen, kopteksten, afbeeldingen en paragrafen.

Zoals eerder vermeld, kun je met de Block Bindings API blokattributen verbinden met verschillende gegevensbronnen, waaronder de “meta_fields” bron. Om deze functie te gebruiken, moet je eerst aangepaste velden inschakelen in de editor via Options -> Preferences -> General -> Advanced.

Let op dat je vanaf WordPress 6.5 geen UI controle meer hebt om een aangepaste veldwaarde aan een blokattribuut te binden.

Dus zodra je de sleutel en waarde van je aangepaste veld hebt toegevoegd, moet je overschakelen naar de code-editor en een “bindings”-object toevoegen binnen het scheidingsteken van het blok, zoals in de onderstaande code wordt getoond:

<!-- wp:paragraph 
	{
		"metadata": {
			"bindings": {
				"content": {
					"source":"core/post-meta",
					"args": {
						"key":"my_custom_field"
					}
				}
			}
		}
	} -->
	<p>Paragraph</p>
<!-- /wp:paragraph -->

Door een aangepast veld aan een blok toe te voegen, vergrendel je de betreffende besturingselementen, waardoor de inhoud van het blok niet kan worden gewijzigd.

Laten we nu eens kijken hoe dit werkt met een Image blok. Voeg twee aangepaste velden toe voor de attributen alt en src.

Voeg vervolgens een Image blok toe, schakel over naar de code-editor en voeg een bindings object toe aan het blok zoals in het volgende voorbeeld:

<!-- wp:image {
	"metadata":{
		"bindings":{
			"url":{
				"source":"core/post-meta",
				"args":{
					"key":"img_src"
				}
			},
			"alt":{
				"source":"core/post-meta",
				"args":{
					"key":"img_alt"
				}
			}
		}
	}
}
-->
<figure class="wp-block-image"><img src="" alt="" /></figure>
<!-- /wp:image -->

Je zult merken dat je de afbeeldingsbron niet kunt vervangen met de besturingselementen van de editor.

Met deze eerste iteratie kunnen alleen de volgende blokattributen worden gekoppeld aan aangepaste velden:

• Paragraph: inhoud.
• Heading: inhoud.
• Image: URL, alt en titel.
• Button: tekst, URL, linkTarget, rel.

Voor een uitgebreider overzicht van het verbinden van aangepaste velden met blokattributen, zie deze uitgebreide inleiding tot Block Bindings.

Verbeterd revisiesysteem

Revisies geven je het vertrouwen dat je op elk moment wijzigingen ongedaan kunt maken door een eerdere versie van het uiterlijk van de site te herstellen. Vanwege het belang van een betrouwbaar revisiesysteem op websites waar veel wordt samengewerkt, hebben stijlrevisies een prominente plaats in de huidige fase van WordPress ontwikkeling. WordPress 6.5 brengt een aantal belangrijke verbeteringen aan in het revisiesysteem.

Hier is wat je kunt verwachten te zien met revisies in WordPress 6.5.

Beschrijving van wijzigingen

In de vorige versie van WordPress waren alleen de datum, tijd en auteur van elke revisie zichtbaar. Vanaf WordPress 6.5 zie je naast die details ook een korte samenvatting en andere details van die versie.

Onbeperkte revisies en paginering

Vóór 6.5 was het vanwege de Rest API limiet alleen mogelijk om maximaal 100 revisies in een enkel paneel van de zijbalk te bekijken.

Dankzij de twee nieuwe selectors getRevisions en getRevision, geïntroduceerd met Gutenberg 17.2 en nu samengevoegd in de core met WordPress 6.5, bestaat de limiet van 100 revisies niet meer. Bovendien kun je bladeren door alle bestaande revisies, verdeeld in pagina’s van elk 10 items.

Revisie Style book integratie

Een andere verandering maakt het Revisies paneel ook beschikbaar met het Style book. Hiermee kun je de wijzigingen controleren die je hebt aangebracht in je stijlen op patronen en blokken die niet zijn opgenomen in de huidige template.

Revisies voor template en template parts

Revisies voor templates en template parts zijn ook beschikbaar zodat je kunt overschakelen naar een vorige versie van je ontwerpproject, wat een extra beveiligingslaag toevoegt aan je workflow.

Interactivity API

Vóór WordPress 6.5 moesten ontwikkelaars hun favoriete JavaScript bibliotheken zelf implementeren om interactiviteit aan hun pagina’s toe te voegen. Helaas leidde dit tot een gebrek aan consistentie in de ontwikkeling van JavaScript aan de frontend.

Vanaf WordPress 6.5 biedt een nieuwe Interactivity API een moderne en gestandaardiseerde manier om interactiviteit toe te voegen aan de voorkant van je WordPress websites.

Als je je afvraagt wat deze nieuwe API doet, hebben we er al eerder een voorproefje van gehad in WordPress 6.4, toen de coreblokken Image, Search, File, Navigation en Query werden geherstructureerd met behulp van de private versie van de API. Het lightbox effect op afbeeldingen is een ander goed voorbeeld.

Dynamische paginering, direct zoeken en realtime interactie tussen blokken zijn slechts een paar voorbeelden van wat je op je websites kunt implementeren met behulp van de Interactivity API:

Blokken kunnen onderling gegevens, acties en callbacks delen. Dit maakt communicatie tussen blokken eenvoudiger en minder foutgevoelig. Als je bijvoorbeeld op een blok “Toevoegen aan winkelwagentje” klikt, kan een apart “Cart” blok naadloos worden bijgewerkt.

En het is ongelooflijk snel. Alle scripts die nodig zijn om interactiviteit toe te voegen, worden alleen aan de frontend geladen als je ten minste één interactief blok op de pagina hebt.

De Interactivity API omarmt een moderne benadering van frontend-ontwikkeling die gebruikmaakt van de kracht van aangepaste HTML kenmerken om de hoeveelheid JavaScript te verminderen die nodig is om interactiviteit aan je pagina’s toe te voegen.

Als je bekend bent met frontend bibliotheken zoals HTMX en Alpine.js, dan zul je blij zijn om te zien dat dezelfde logica is geïmplementeerd in WordPress met de Interactivity API. Maar wat is het precies? Laten we eens wat beter kijken.

Wat is de Interactivity API?

De Interactivity API is een nieuw standaardsysteem van richtlijnen voor het maken van interactieve blokken waarmee ontwikkelaars eenvoudig interactiviteit kunnen toevoegen aan de voorkant van hun blokken, zodat bezoekers van de site kunnen interageren met je inhoud zonder de pagina opnieuw te hoeven laden. Denk aan zaken als direct zoeken, opmerkingen toevoegen, toevoegen aan een winkelwagentje en dynamische paginering.

De nieuwe API voldoet aan een aantal eisen die het een moderne ontwikkelingstool maken, waaronder de volgende:

• Het ondersteunt server-side rendering en client-hydrated HTML.
• Hij werkt goed met PHP en het huidige bloksysteem.
• Het is achterwaarts compatibel met WordPress hooks en bestaande JavaScript bibliotheken.
• Het volgt een declaratieve benadering in plaats van een imperatieve benadering.
• Het is performant en uitbreidbaar.
• Het is atomair en samenstelbaar: Elke richtlijn bestuurt een klein deel van het DOM en meerdere richtlijnen kunnen worden gecombineerd om complexe toepassingen te maken.
• Het is compatibel met de bestaande WordPress devtools.

Zoals hierboven vermeld, is de Interactivity API gebaseerd op directives, wat speciale HTML attributen zijn waarmee je specifiek gedrag kunt toevoegen aan DOM elementen. Hier is een voorbeeld van een interactief blok:

<div
	<?php echo get_block_wrapper_attributes(); ?>
	data-wp-interactive='{ "namespace": "create-block" }'
	data-wp-context='{ "isOpen": false }'
	data-wp-watch="callbacks.logIsOpen"
>
	<button
		data-wp-on--click="actions.toggle"
		data-wp-bind--aria-expanded="context.isOpen"
		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
	>
		<?php esc_html_e( 'Toggle', 'inter-block' ); ?>
	</button>

	<p
		id="<?php echo esc_attr( $unique_id ); ?>"
		data-wp-bind--hidden="!context.isOpen"
	>
		<?php
			esc_html_e( 'Inter Block - hello from an interactive block!', 'inter-block' );
		?>
	</p>
</div>

WordPress verwerkt die directives op de server en genereert de bijbehorende opmaak.

Aan de slag met de Interactivity API

De implementatie van de Interactivity API heeft geen invloed op de workflow voor het maken van blokken. Je kunt een plugin maken die een interactief blok registreert met het commando @wordpress/create-block en een specifieke interactieve template.

.

Start je favoriete opdrachtprompt, navigeer naar je plugins map en voer de volgende opdracht uit:

npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template

Dit genereert een interactief blok van een template dat het metadataveld viewScriptModule gebruikt. De scriptmodule die is gedeclareerd in viewScriptModule wordt in een wachtrij geplaatst wanneer een blok wordt weergegeven op de frontend. (Zie ook viewScriptModule en Script Modules dev notes.)

Zodra het installatieproces is voltooid, vind je een nieuwe plugin in je WordPress dashboard. Activeer deze, ga dan terug naar de opdrachtregel, navigeer naar de map van de nieuwe plugin en start de service:

cd my-interactive-block && npm start

Maak nu een nieuwe post of pagina aan, open de block inserter en scroll naar beneden naar de Widgets sectie. Daar vind je een nieuw blok met de naam My interactive block dat je kunt gebruiken als sjabloon voor nieuwe spannende en interactieve creaties:

Voeg het blok toe aan je inhoud en sla het bericht op. In de voorbeeldweergave van je bericht zie je een knop die een dummytekst verbergt of toont. En dat is het. Nu kun je beginnen met het bouwen van interactieve blokken.

Je kunt meer lezen over hoe je interactieve blokken kunt maken met behulp van de Interactivity API op de WordPress Core blog, GitHub’s documentatie en de Interactivity API dev note.

Een goed voorbeeld van de Interactivity API aan het werk is de wpmovies.dev demo website.

Nieuwe ontwerptools

WordPress 6.5 introduceert ook nieuwe ontwerptools waarmee je je ontwerp verder kunt aanpassen zonder afhankelijk te zijn van aangepaste CSS code.

Ondersteuning voor grootte en herhaling van achtergrondafbeelding in het Group blok

Het Group blok ondersteunt nu grootte- en herhaalfuncties voor achtergrondafbeeldingen. Hierdoor kun je ook de grootte van de achtergrondafbeelding instellen om te bedekken of te bevatten, met behoud van dezelfde beeldverhouding.

Als je bovendien de achtergrondgrootte instelt op Fixed , verschijnt er een knop Repeat waarmee je herhalende achtergronden kunt in- of uitschakelen.

Ondersteuning voor beeldverhouding voor het Cover blok

Het Cover blok heeft ondersteuning gekregen voor aspectratio. Je kunt de hoogte-breedteverhouding van het blok op globaal niveau regelen via de interface Global style of individueel aanpassen in je inhoud.

Schaduwondersteuning voor meer blokken

Tot nu toe was het Button blok het enige blok dat schaduwen ondersteunde. WordPress 5.6 voegt schaduwondersteuning toe aan Columns, Column en Image blokken.

Je kunt schaduw aan deze blokken toevoegen via het tabblad Styles van het blok in de blokinstellingen.

Site editor updates

Verschillende verbeteringen aan de site-editor moeten je bewerkingservaring aanzienlijk verbeteren en je workflow stroomlijnen.

Verbeteringen aan de lijstweergave

Lijstweergave is een centraal element van de ontwerpworkflow en WordPress 6.5 introduceert een handvol verbeteringen.

Ten eerste kun je nu met de rechtermuisknop op de lijstweergave klikken om de blokinstellingen keuzelijst te openen. Dit is een kleine maar nuttige verbetering die je creatieproces zou moeten stroomlijnen, omdat het de toegang tot blokinstellingen vanuit de Lijstweergave eenvoudiger maakt.

Een tweede verbetering maakt het mogelijk om bijna alle blokken in Lijstweergave te hernoemen, behalve de volgende blokken:

• core/block
• core/template-part
• core/pattern
• core/navigation

De lijstweergave is ook uitgebreid met een sneltoets. Je kunt nu alle blokken in de lijstweergave selecteren door te klikken op CTRL + A in Windows en CMD + A op Mac. Hierdoor kun je eenvoudig acties in bulk uitvoeren.

Patronen dupliceren en hernoemen

Patronen die worden geleverd door thema’s zijn niet bewerkbaar, dus je kunt ze niet gebruiken om je eigen patronen te maken of simpelweg iets in het patroon te veranderen. WordPress 6.5 voegt een kleine maar handige functie toe waarmee je patronen kunt dupliceren en hernoemen, zodat je de synchronisatie-instellingen kunt wijzigen en de patronen naar wens kunt aanpassen.

Daarnaast zijn er twee nieuwe patrooncategorieën toegevoegd: Audio en Video.

Een verbeterd Preferences paneel

Met WordPress 6.5 is het Preferences paneel bijgewerkt en zijn bestaande instellingen gereorganiseerd. De belangrijkste veranderingen zijn:

• Nieuwe panelen “Appearance” en “Accessibility”.
• Een nieuwe instelling voor de Top toolbar onder Apearance.

Als je de Top toolbar inschakelt, worden alle blok- en documenttools verplaatst naar één toolbar bovenin de editor.

Toolbar blokkeren in afleidingsvrije modus

Vóór WordPress 6.5 was toegang tot de bloktoolbar niet mogelijk in de afleidingsvrije modus en was je gedwongen om deze bij elke verandering in en uit te schakelen. Sinds WordPress 6.5 kun je met de cursor over het bovenste gedeelte van de editor bewegen om de bloktoolbar voor je aanpassingen te zien.

Verbeterde LinkControl component

De LinkControl is verbeterd en nu is het toevoegen van links eenvoudiger. De volgende afbeelding toont het nieuwe paneel dat verschijnt als je op een link klikt om te bewerken.

Zie PR #50891 voor een volledige lijst met wijzigingen aan de component LinkControl.

Drag & drop verbeteringen

Drag & drop is op verschillende plaatsen in de editor verbeterd.

In lijstweergave:

• Als je een blok in een ingeklapt blok laat vallen, wordt het ingeklapte blok groter.
• Er verschijnt een sleepcursor wanneer je elementen versleept.

In het canvas van de editor:

• Je kunt nu elementen naar het begin of einde van je inhoud slepen.
• Het slepen van elementen tussen sibling containerblokken is verbeterd.
• Het is ook mogelijk om blokken in template parts te slepen.
• Een nieuwe visuele indicatie geeft nu aan dat een blok niet versleepbaar is.
• Je kunt elementen naar het begin of einde van een document slepen.
• Je kunt rijen of galerijen maken door blokken in de buurt van andere blokken te slepen. Als je bijvoorbeeld een afbeelding toevoegt naast een andere afbeelding, wordt het bestaande Image blok omgezet in een Gallery blok.

Voor een uitgebreidere lijst van verbeteringen aan de drag & drop, zie het probleem met drag & drop van blokken.

Overige wijzigingen en verbeteringen

Maar wacht, dat is nog niet alles! WordPress 6.5 brengt ook een heleboel andere veranderingen en verbeteringen die het vermelden waard zijn.

.

Uiterlijkstools voor klassieke thema’s

Klassieke thema’s kunnen ook profiteren van enkele van de ontwerpfuncties die zijn geïntroduceerd in de site editor, zelfs zonder theme.json te gebruiken. Vanaf WordPress 6.5, als je kiest voor de appearanceTool thema ondersteuning, krijg je de volgende ontwerpmogelijkheden:

• Rand
• Kleur
• Afstand
• Typografie

Dit kan gebruikers van klassieke thema’s een voorproefje geven van de mogelijkheden van de site-editor en de overgang van klassieke naar blokthema’s stroomlijnen.

AVIF ondersteuning

WordPress 6.5 introduceert ook ondersteuning voor het AVIF afbeeldingsformat, gekenmerkt door een geavanceerd compressiealgoritme dat superieure afbeeldingskwaliteit mogelijk maakt bij een verhoogde compressieverhouding. Daardoor levert AVIF kleinere afbeeldingsbestanden op in vergelijking met conventionele formaten, waaronder het WebP format.

Gebruikers kunnen nu naadloos AVIF bestanden uploaden via de WordPress mediabibliotheek, net als bij andere afbeeldingsformats. Controleer echter wel of je hostingplatform compatibel is met de AVIF bestandsindeling.

Je kunt controleren of je host het AVIF afbeeldingsformat ondersteunt in het Site Health scherm van je WordPress installatie door op het Info tabblad te klikken en de Media Handling sectie uit te vouwen.

Plugin dependencies

Sommige plugins voegen nieuwe features toe bovenop andere plugins als extensies/add-ons. Om deze plugins te laten werken, moet je eerst hun dependencies installeren en activeren – de plugins waar ze van afhankelijk zijn.

Sinds WordPress 6.5 kunnen pluginontwikkelaars een nieuwe plugin header “Requires Plugins” gebruiken. Deze header maakt een krachtige functie mogelijk die het proces van het installeren en activeren van dependencies stroomlijnt. Het bevat een lijst van door komma’s gescheiden slugs van de dependencies die nodig zijn om een afhankelijke plugin te laten werken.

Dit geeft informatie aan de gebruiker van de plugin met links naar de WordPress.org Plugins Repository om de dependencies te installeren en activeren.

Daarnaast geeft de plugin in kwestie een veld “Required by” met een lijst van afhankelijke plugins die de plugin nodig heeft om te werken. Je zult ook zien dat je de afhankelijke plugin niet mag verwijderen, tenzij je de afhankelijke plugin verwijdert.

WordPress 6.5 introduceert ook een nieuw wp_plugin_dependencies_slug filter waarmee je dependency slugs programmatisch kunt filteren.

Zie de Plugin Dependencies dev note voor een meer diepgaande discussie.

Updates voor de HTML API

Met WordPress 6.5 heeft de HTML API Tag Processor verschillende verbeteringen gekregen en scant nu elk soort syntax token, inclusief tag en niet-tag tokens, commentaar, doctype definities en tekst nodes.

Dit maakt het mogelijk om de tekst binnen de grenzen van het token, ook wel aanpasbare tekst genoemd, te wijzigen zonder de structuur van een document aan te tasten.

Aanpasbare tekst is de volledige inhoud van een tekstknooppunt, de inhoud van een HTML-commentaar of de inhoud tussen de openings- en sluitingsmarkeringen van speciale elementen, zoals script of style elementen.

Er is een aantal nieuwe methoden geïntroduceerd:

• next_token() – gaat naar het volgende token in het document
• get_token_type() – krijgt het type token dat gevonden is
• get_token_name() – krijgt de naam van een token
• get_modifiable_text() – retourneert de correct gedecodeerde tekstinhoud voor een gegeven token.
• get_comment_type() – krijgt het type commentaar
• paused_at_incomplete_token() – geeft true terug als de Tag Processor het einde van een document bereikt dat in het midden van een token is afgekapt.

Voor een uitgebreider overzicht, bekijk de Updates voor de HTML API in 6.5 dev note.

Unificatie van site- en posteditors

In WordPress 6.5 krijgen de editors verschillende updates gericht op het verenigen van UI en gedrag.

Verschillende zijbalkpanelen zijn verplaatst van het edit-post pakket naar het @wordpress/editor pakket om de corresponderende functionaliteiten naar de site-editor te brengen:

• Pagina attributen (PR #57151)
• Bericht taxonomie (PR#57049)
• Link bekijken toegevoegd aan de site-editor voor berichttypen (PR #57153)
• Discussiepaneel toegevoegd aan de zijbalk van de site-editor voor berichttypen die dit ondersteunen (PR#57150)
• Het paneel met uitgelichte afbeeldingen toegevoegd (PR#57053)
• Revisiepaneel toegevoegd aan de site-editor (PR #57010)

Een andere wijziging maakt het mogelijk om een voorbeeld van de template te bekijken wanneer je een pagina bewerkt in de Post Editor, zoals dat al mogelijk was in de Site Editor, en je kunt de template previews in- of uitschakelen in de Settings zijbalk van de pagina.

Prestatieverbeteringen

Meer dan 110 prestatieverbeteringen leiden tot een aanzienlijke toename in snelheid en efficiëntie in zowel de Post Editor als de Site Editor. De laadtijden zijn nu twee keer zo snel als in 6.4 en de verwerkingssnelheid van de invoer is bijna vier keer zo snel. Daarnaast draagt de integratie van de Performant Translations i18 bibliotheek bij aan het verminderen van geheugengebruik en laadtijd voor vertaalde websites.

Toegankelijkheidsverbeteringen

Met de release van WordPress 6.5 worden meer dan 65 updates samengevoegd in de cre om de toegankelijkheid in het hele beheerpaneel te verbeteren. Deze verbeteringen zijn onder andere de focusstijl, contrastverhouding, customizer menu-indeling en meer.

Updates voor Block Hooks

Block Hooks, voor het eerst geïntroduceerd in WordPress 6.4, maken het mogelijk om automatisch een blok op een specifieke positie te plaatsen wanneer er een ander blok aan de inhoud wordt toegevoegd.

Block Hooks waren eerder beschikbaar voor templates, template parts en patronen die geen gebruikersaanpassingen hadden. Nu kunnen ze ook worden gebruikt met aangepaste layouts.

Voor WordPress 6.5 kon een hooked blok alleen worden toegevoegd voor of na het Navigation blok. Met deze iteratie kunnen hooked blokken ook worden toegevoegd aan een navigatieblok als eerste of laatste child.

Daarnaast introduceert deze iteratie de nieuwe filters hooked_block en hooked_block_{$hooked_block_type}.

Voor een uitgebreider overzicht en voorbeelden van gebruik, zie de Block Hook updates dev note.

Samenvatting

WordPress 6.5 bevat een heleboel veranderingen waar je blij van wordt als het gaat om het bouwen van sites en het maken van content.

Met de nieuwe WordPress Font Library kun je lettertypen beheren op een manier die lijkt op mediabeheer in de Media Library, waardoor je meer controle hebt over typografie. Met DataViews kun je je datasets weergeven met verschillende layouts, filters en zoekopties, waardoor de algehele ervaring wordt verbeterd. Met de Block Bindings API en Interactivity API kun je de gebruikers van je site een dynamischere en persoonlijkere ervaring bieden.

Met al deze spannende updates is WordPress 6.5 een game-changer.

Heb je de nieuwe WordPress versie al getest op je ontwikkelomgeving? Wat zijn jouw favoriete functies van WordPress 6.5? Deel je gedachten in de commentsectie.