WordPress 6.7 staat voor de deur en het is tijd om de nieuwe features, veranderingen en verbeteringen te bekijken die de nieuwe versie voor ons in petto heeft.

Deze release bevat 87 verbeteren aan de core, featureverzoeken en meer dan 200 bugfixes.

Acht Gutenberg versies, van 18.6 tot 19.3, zijn opgenomen in de core van WordPress 6.7. De Block Editor ontvangt 445 verbeteringen, 464 bugfixes en 55 toegankelijkheidsverbeteringen.

Ook komen er nieuwe krachtige API’s voor ontwikkelaars naar de core. De interface van de editor ontvangt verschillende toevoegingen en verbeteringen, waaronder tools die voorheen alleen toegankelijk waren via code. Gebruiksverbeteringen en nieuwe ontwerptools moeten het ontwerpproces stroomlijnen.

WordPress 6.7 toont ook een nieuw standaardthema, Twenty Twenty-Five, dat profiteert van de nieuwste features van deze nieuwe versie.

Van de vele nieuwe toevoegingen en veranderingen die in WordPress 6.7 zitten, hebben we er een paar geselecteerd die we het meest interessant vinden voor ontwikkelaars en gebruikers. Er valt veel te bespreken, dus laten we meteen de nieuwste features bijlangsgaan.

Uitzoommodus

WordPress 6.7 heeft een nieuwe uitzoommodus waarmee je content kunt maken en bewerken en je kunt concentreren op patterns in plaats van op afzonderlijke blokken. Hierdoor kun je op een hoger niveau werken en krijg je een algemeen beeld van de pagina die je aan het bouwen bent.

De volgende afbeeldingen laten de nieuwe feature in actie zien. Met een nieuwe knop Toggle Zoom Out in de bovenste werkbalk kun je de uitzoommodus in- en uitschakelen, zodat je afwisselend op patterns of individuele blokken kunt werken.

Toggle Zoom Out in WordPress 6.7
Toggle Zoom Out in WordPress 6.7
Toggle Zoom Out in WordPress 6.7
Toggle Zoom Out in WordPress 6.7

Als de uitzoommodus is ingeschakeld, kun je verschillende acties uitvoeren op het geselecteerde pattern. De werkbalk van het blok bevat knoppen om te slepen, omhoog/omlaag te verplaatsen en te shufflen. De lijstweergave biedt links om verschillende acties uit te voeren, zoals Bewerken, Dupliceren en Verwijderen van het geselecteerde pattern.

Blokpatterns in de List weergave
Blokpatterns in de List weergave

Als je werkt met Uitzoomen ingeschakeld, gaat de blok-inserter standaard naar het tabblad Patterns. De lijstweergave weerspiegelt ook de bewerkingsmodus en toont patterns in plaats van blokken.

Voor een uitgebreidere lijst van features en wijzigingen met betrekking tot de uitzoommodus, zie het iteratieprobleem van de uitzoommodus en de dev notes voor uitzoomen in WordPress 6.7.

Metaboxes in de bericht editor

In versies van voor 6.7 verhinderden metaboxes dat het canvas van de bericht editor in een iframe werd geladen. Hierdoor waren verschillende voordelen niet beschikbaar, zoals de isolatie van blok en thema CSS van de editor UI en de nauwkeurigheid van relatieve CSS units voor media queries en viewport. Dit probleem verhinderde het gebruik van dezelfde CSS in de editor en front-end views.

Vanaf WordPress 6.7 kunnen de content van de editor en metaboxes naast elkaar bestaan in de interface van de editor. Dankzij een nieuwe gesplitste weergave wordt het canvas van de posteditor geladen in een iframe, zelfs als de huidige post/pagina een of meer metaboxes heeft. Volgens de dev notes:

Deze verandering zorgt voor een consistente WYSIWYG-ervaring tussen de Editor en front-end weergaven. Daarnaast maakt het de metaboxes gemakkelijker beschikbaar dan voorheen. Je kunt visueel verwijzen naar elk deel van de inhoud van een bericht terwijl je werkt met elk metabox of omgekeerd.

Een canvas in iframe met metaboxes in WordPress 6.7
Een canvas in iframe met metaboxes in WordPress 6.7

Deze implementatie gebruikt flex om de inhoudsweergave en het metaboxgebied scollbaar te maken.

Deze verbetering brengt ook verschillende wijzigingen aan in de Post editor interface:

  • De hoogte van het metaboxgebied is standaard beperkt tot 50% om te voorkomen dat het te veel ruimte inneemt.
  • Het metaboxgebied is inklapbaar of aanpasbaar, afhankelijk van de viewporthoogte.
  • De status van de aanpasbare hoogte en de open/gesloten status blijven bestaan in de gebruikersvoorkeuren.
Aanpasbaar metaboxgebied in WordPress 6.7
Aanpasbaar metaboxgebied in WordPress 6.7

Bekijk de dev note voor een uitgebreider overzicht voor ontwikkelaars.

Verbeteringen aan de Block Bindings API

De Block Bindings API werd voor het eerst geïntroduceerd in WordPress 6.5 en stelt je in staat om de attributen van een blok te binden aan een externe gegevensbron. Met de eerste versie van de Block Bindings API was het mogelijk om je eigen veldwaarden te binden aan de attributen van de blokken Header, Paragraph, Button en Image. WordPress 6.6 opende de deur naar een nieuwe krachtige feature die is gebaseerd op de Block Bindings API: pattern overrides.

WordPress 6.7 brengt ons nieuwe features en verbeteringen die mogelijk zijn gemaakt door de Block Bindings API en een nieuwe standaard interface voor het beheren van de post meta source.

Nieuwe Block Bindings UI

Deze nieuwe versie geeft je een nieuwe interface voor het beheren van block bindings vanuit de zijbalk met behulp van de ingebouwde post meta block binding bron voor de blokken Header, Paragraph, Button en Image.

Zodra je je aangepaste velden hebt geregistreerd en een van de ondersteunde blokken hebt geselecteerd, verschijnt er een nieuw paneel Attributes in de zijbalk met blokinstellingen. Als je een of meer custom berichtvelden toevoegt, wordt het paneel Attributes interactief, zodat je blokattributen kunt koppelen aan je aangepaste velden.

Het nieuwe Attributes panel in WordPress 6.7
Het nieuwe Attributes panel in WordPress 6.7

Dit helpt je om bindingen te maken zonder de code handmatig toe te voegen aan de Code Editor.

Standaard kunnen alleen admins bindings maken en wijzigen. Ontwikkelaars kunnen het standaardgedrag opheffen met de filters block_editor_settings_all of map_meta_cap.

De dev note waarschuwt voor twee beperkingen met betrekking tot de nieuwe Attributes interface.

  • Het verbinden van blokattributen met custom sources is nog niet mogelijk met deze versie. Deze verbetering moet in een toekomstige versie worden geïmplementeerd.
  • Een tweede beperking betreft het type aangepaste velden dat wordt getoond in het Attributes paneel. Op dit moment worden alleen velden van het type string of rich text ondersteund. Ook hier kunnen we verwachten dat andere typen custom velden in toekomstige iteraties geleidelijk worden ondersteund.

Zie de dev note voor een interessante use case van de verbeterde Block Bindings API met custom templates voor berichten.

Nieuw post meta label attribuut

Er is een nieuw label attribuut geïmplementeerd waarmee plugin-ontwikkelaars een eigen label kunnen toevoegen voor post meta velden tijdens de registratie. Je kunt nu de volgende code gebruiken om je custom velden met labels te registreren:

register_post_meta( 
	'post', 
	'book_title', 
	array(
		'show_in_rest' => true,
		'type' => 'string',
		'single' => true,
		'sanitize_callback' => 'sanitize_text_field',
		'label' => __('Book title')
	)
);

Als dit is ingesteld, wordt het label weergegeven in plaats van de meta key in de Block Bindings UI. De volgende afbeelding toont het Attributes panel met custom labels:

Het Attributes panel met custom veldlabels
Het Attributes panel met custom veldlabels

Mogelijkheid om block bindings te bewerken

Samen met de nieuwe interface voor blokbindingen kan een nieuwe canUpdateBlockBindings editor-instelling worden gebruikt om te bepalen of de nieuwe interface interactief is voor gebruikers. Dit staat standaard op een nieuwe edit_block_binding mogelijkheid, die is ingesteld op true voor admins en false voor andere gebruikers.

Je kunt het standaard gedrag veranderen met het block_editor_settings_all filter.

Nieuwe API’s en features voor developers

WordPress 6.7 brengt nieuwe features voor developers met zich mee om block bindings te gebruiken in de editor.

Met de nieuwe editor API kun je custom sources registreren die op de server zijn gedefinieerd met bootstrapped waarden. Je kunt externe sources registreren en ze in de UI weergeven met behulp van server API’s.

Twenty Twenty-Five, het nieuwe standaardthema, geeft een goed voorbeeld van bootstrapping van sources met het Copyright pattern. In het functions.php bestand van het thema vind je de volgende code:

// Registers block binding sources.
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
	/**
	 * Registers the copyright block binding source.
	 *
	 * @since Twenty Twenty-Five 1.0
	 *
	 * @return void
	 */
	function twentytwentyfive_register_block_bindings() {
		register_block_bindings_source(
			'twentytwentyfive/copyright',
			array(
				'label'              => _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ),
				'get_value_callback' => 'twentytwentyfive_copyright_binding',
			)
		);
	}
endif;

// Registers block binding callback function for the copyright.
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
	/**
	 * Callback function for the copyright block binding source.
	 *
	 * @since Twenty Twenty-Five 1.0
	 *
	 * @return string Copyright text.
	 */
	function twentytwentyfive_copyright_binding() {
		$copyright_text = sprintf(
			/* translators: 1: Copyright symbol or word, 2: Year */
			esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
			'©',
			wp_date( 'Y' )
		);

		return $copyright_text;
	}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );

Deze code geeft © YEAR standaard weer in de UI, zoals te zien is in de volgende afbeelding.

Custom sources met bootstrapped waarden
Custom sources met bootstrapped waarden

Let op dat de paragraaf in het canvas van het blok niet dynamisch is en alleen het source label toont.

Om de opmaak van dit blok te controleren, moet je een kopie maken van het Copyright pattern van Twenty Twenty-Five en je kopie openen in de Code Editor:

<!-- wp:paragraph {
	"metadata":{
		"bindings":{
			"content":{
				"source":"twentytwentyfive/copyright"
			}
		}
	},
	"className":"copyright",
	"textColor":"primary",
	"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->

Je kunt meer lezen over de nieuwe features van Block Bindings in de Block Bindings van de 6.7 dev note.

Toevoegingen aan Data Views

Data Views is een verbeterde UI voor verzamelingen templates, patterns, pagina’s en meer. Het is een component en een API waarmee je datasets in de Sit Editor kunt renderen met verschillende soorten layouts, zoals tabel, raster, lijst, enz.

Lijst met lay-outs in WordPress 6.7
Lijst met lay-outs in WordPress 6.7

Data Views werden voor het eerst geïntroduceerd met WordPress 6.5 en verbeterd met WordPress 6.6. Nu voegt WordPress 6.7 nieuwe features en verbeteringen toe die ze flexibeler en functioneler maken.

Vanaf WordPress 6.7 verschijnt er een tandwielpictogram in de rechterbovenhoek van de rasterweergave. Als je op dit pictogram klikt, verschijnt er een paneel Appearance met een reeks weergaveopties. Hier kun je de elementen in de weergave sorteren, de dichtheid van het raster aanpassen, het aantal elementen per pagina instellen en de eigenschappen van het element selecteren om weer te geven in de voorbeeldweergave.

Preview grootte small
Preview grootte small
Preview medium grootte
Preview medium grootte

Met een toggle-knop kunnen gebruikers weergavefilters tonen/verbergen, wat de ervaring op smalle schermen verbetert.

Een toggle-knop om filters in gegevensweergaven te tonen/verbergen
Een toggle-knop om filters in gegevensweergaven te tonen/verbergen
Verberg filters in Data views in WordPress 6.7
Verberg filters in Data views in WordPress 6.7

Wanneer je een of meer filters instelt, toont de knop Toggle filter het aantal actieve filters.

De toggle filterweergave in WordPress 6.7
De toggle filterweergave in WordPress 6.7

Extra wijzigingen aan Data Views zijn onder andere instelbare beeldverhouding, opties voor dataweergave uit een menu en nog veel meer.

Verbeterd Query Loop blok

Het Query Loop blok is een van de krachtigste en meest complexe blokken. Het moet maximale functionaliteit en aanpassingsmogelijkheden bieden en tegelijkertijd intuïtief en eenvoudig in gebruik blijven. Met WordPress 6.7 krijgt de Query Loop verschillende verbeteringen en toevoegingen die het veelzijdiger en gebruiksvriendelijker maken.

De vorige Inherit query from template instelling is veranderd en zou nu intuïtiever en eenvoudiger moeten zijn.

Als je een template bewerkt, toont het Query Loop instellingenpaneel een Query Type regelaar. De volgende afbeeldingen tonen de instellingsopties voor de twee verschillende query types: Standaard en Custom.

De Query Type regelaar in WordPress 6.7
De Query Type regelaar in WordPress 6.7
De Query Type regelaar in WordPress 6.7
De Query Type regelaar in WordPress 6.7

Ook contextdetectie is verbeterd. Het Query blok heeft een inherit instelling die standaard is ingesteld op true. Op een enkele pagina heeft dit geen effect op de query resultaten, en de bijbehorende controle is verwijderd met WordPress 6.7.

Query Loop instellingen voor een enkele pagina in WordPress 6.7
Query Loop instellingen voor een enkele pagina in WordPress 6.7

Aan de andere kant, in een archief- of indexstemplate is de inhoud van het Query blok afhankelijk van het type verzoek. Dit betekent dat de archiefpagina voor een specifieke categorie standaard de inhoud weergeeft die aan die categorie is toegewezen, ongeacht andere instellingen die expliciet door de gebruiker zijn ingesteld, zoals het aantal berichten.

Je kunt hier een uitgebreide lijst vinden van problemen met het Query Loop blok.

Verbeteringn aan mediabeheer

Met WordPress 6.7 wordt het mediabeheer functioneler en efficiënter. Van automatische groottes voor afbeeldingen die snel worden geladen tot uitgebreide ondersteuning voor achtergrondafbeeldingen, hier zijn enkele van de verbeteringen in mediabeheer die met 6.7 komen.

Automatische afmetingen voor lazyloaded afbeeldingen

Door een standaardwaarde in te stellen voor sizes kan de browser het afbeeldingsbestand identificeren aan de hand van de waarde van het srcset attribuut. Op deze manier weet de browser de breedte van de afbeelding al voordat de paginalayout bekend is.

De HTML spec staat toe dat afbeeldingen het sizes attribuut weglaten of expliciet instellen op auto of een string die begint met auto:

Keyword auto is een breedte die wordt berekend in parse a sizes attribuut. Als het aanwezig is, moet het de eerste vermelding zijn en de hele <source-size-list> waarde moet de string auto zijn (hoofdletterongevoelig) of beginnen met de string auto (hoofdletterongevoelig).

Met WordPress 6.7 wordt het auto attribuut automatisch toegevoegd aan het begin van het sizes attribuut voor elke lazyloaded afbeelding. Dit resulteert in een prestatieverbetering bij het laden van pagina’s.

Automatische grootte voor een lazy-loaded afbeelding in WordPress 6.7
Automatische grootte voor een lazy-loaded afbeelding in WordPress 6.7

Ontwikkelaars kunnen de waarde van het sizes attribuut corrigeren met de nieuwe wp_img_tag_add_auto_sizes() feature.

Verbeteringen aan de Font Library

WordPress 6.7 brengt ook een paar handige verbeteringen in de Font Library. Ten eerste zijn lettertypen nu gegroepeerd op source (Thema en Custom), waardoor het gemakkelijker is om in één oogopslag de herkomst van elk lettertype te begrijpen.

Fonts gegroepeerd op source in WordPress 6.7
Fonts gegroepeerd op source in WordPress 6.7: Themes lettertypen
Fonts gegroepeerd op source in WordPress 6.7: Custom lettertypen
Fonts gegroepeerd op source in WordPress 6.7: Custom lettertypen

Een nieuwe Select all optie knop bespaart je een paar klikken als je naar een lettertype zoekt op Google Fonts.

Selecteer alle lettertypevarianten in WordPress 6.7
Selecteer alle lettertypevarianten in WordPress 6.7

Extra wijzigingen zijn onder andere een nieuwe melding No fonts installed als er geen lettertypen beschikbaar zijn en een verbeterde No font installed status als er wel lettertypen zijn geïnstalleerd maar niet geactiveerd.

Ondersteuning HEIC indeling

De HEIC indeling (High Efficiency Image Container) is een bijgewerkte variant van HEIF (High Efficiency Image Format), dat door Apple wordt gebruikt op alle iPhones en iPads met iOS 11 of hoger. Dit formaat zorgt ervoor dat iOS-gebruikers het beste uit 4k-camera’s halen en kleinere bestandsgroottes hebben.

In WordPress 6.7 worden HEIC afbeeldingsuploads waar mogelijk automatisch geconverteerd naar JPEG op de server. Dankzij deze toevoeging kunnen gebruikers HEIC afbeeldingen bekijken in de Mediabibliotheek en ze gebruiken in berichten en pagina’s, zelfs als hun browser HEIC niet ondersteunt.

Browserondersteuning voor HEIF/HEIC-afbeeldingsformaat
Browserondersteuning voor HEIF/HEIC-afbeeldingsformaat (Bron Caniuse)

Nieuwe en verbeterde ontwerptools

Met WordPress 6.7 hebben ontwerpers toegang tot nieuwe krachtige ontwerptools, waaronder uitgebreide blokondersteuning, presets voor lettergrootte en meer.

UI voor ondersteuning van achtergrondafbeeldingen voor blokken Verse, Quote en Post content

WordPress 6.7 brengt nieuwe UI besturingselementen voor het beheren van achtergrondafbeeldingen voor een handvol blokken in globale stijlen. Deze blokken zijn onder andere Verse, Quote en Post content.

Achtergrondafbeelding UI in WordPress 6.7
Achtergrondafbeelding UI in WordPress 6.7

Het instellen van een achtergrondafbeelding in globale stijlen geldt voor de hele website. Zodra je een achtergrondafbeelding voor een blok hebt toegevoegd, hoef je alleen nog maar de instellingen voor individuele instanties van hetzelfde blok aan te passen om het uiterlijk ervan aan te passen.

Achtergrondafbeelding aanpassen in WordPress 6.7
Achtergrondafbeelding aanpassen in WordPress 6.7

Je kunt deze feature gebruiken in het blok Post content om bericht- en pagina-inhoud in templates te verpakken. De volgende schermafbeelding geeft een voorbeeld van hoe je de achtergrondafbeelding kunt gebruiken.

Achtergrondafbeelding bewerken in blok Post content
Achtergrondafbeelding bewerken in blok Post content

Extra blokondersteuning

Naast achtergrondondersteuning voor Verse-, Quote- en Post content blokken, laat WordPress 6.7 nieuwe blokondersteuning zien voor verschillende blokken gericht op ontwerpers en thema-ontwikkelaars.

De ondersteuning voor randen is uitgebreid naar veel blokken, waaronder knoppen, categorieën, galerie, header, mediatekst, alinea’s, berichttitels, citaten en nog veel meer.

Grenscontroles voor Media & Tekst
Grenscontroles voor Media & Tekst

Deze release voegt ook kleurondersteuning toe voor knoppen, lijstitems en laatste comments.

Kleurregelaars voor lijstitems in WordPress 6.7
Kleurregelaars voor lijstitems in WordPress 6.7

WordPress 6.7 brengt ook een langverwachte toevoeging voor ontwerpers en thema-ontwikkelaars: schaduwondersteuning voor het Group blok.

Schaduw controls voor het Group blok
Schaduw controls voor het Group blok

Lettergrootte presets

WordPress 6.7 introduceert een nieuwe UI om presets voor lettergrootte te regelen in de interface Global styles. Hiermee kunnen gebruikers de standaardinstellingen van het thema opheffen en lettergroottepresets maken, bewerken, verwijderen en toepassen met behulp van de editor.

Dit omvat ook de mogelijkheid om vloeiende typografie in te schakelen en aangepaste vloeiende waarden in te stellen.

Om het zelf te proberen open je de Styles interface en navigeer je naar Font Sizes > Font Size Presets. Een nieuw paneel toont de lijst met beschikbare lettergroottepresets. Klik op de preset van je keuze en voer je bewerkingen uit.

Presets voor lettergrootte bewerken in WordPress 6.7
Presets voor lettergrootte bewerken in WordPress 6.7

Alle wijzigingen gelden voor je hele website.

UI verbeteringen en andere bewerkingsfeatures

WordPress 6.7 introduceert meer UI wijzigingen en features die de bewerkingservaring verbeteren. Laten we er een paar bekijken.

De knop Publiceren is van positie veranderd

De knoppen Annuleren en Publiceren in het pre-publish controlepaneel zijn van positie veranderd, zodat je het artikel nu kunt publiceren zonder de cursor op de pagina te verplaatsen.

De knop Publiceren is naar rechts verplaatst
De knop Publiceren is naar rechts verplaatst

Custom bloknamen in de Block Inspector

Wanneer je in WordPress 6.7 een custom bloknaam instelt, wordt deze nu ook weergegeven in de Block Inspector. In WordPress 6.6 toonde de Block Inspector de standaard bloknaam (bijvoorbeeld Header).

Custom bloknamen niet weergegeven in de blockinspector in WordPress 6.6
Custom bloknamen niet weergegeven in de blockinspector in WordPress 6.6
Custom bloknamen in de blokinspecteur in WordPress 6.7
Custom bloknamen in de blokinspecteur in WordPress 6.7

De modal Choose a pattern uitschakelen

Je kunt nu het venster Choose a pattern uitschakelen dat verschijnt wanneer je een nieuwe pagina maakt. Om deze functionaliteit uit te schakelen, open je Preferences in het menu Options en schakel je de optie Show starter patterns uit.

De Choose a pattern uitschakelen modal in WordPress 6.7
De Choose a pattern uitschakelen modal in WordPress 6.7

Automatisch een telefoonnummer koppelen

Het linkveld voegt automatisch tel: toe als je een telefoonnummer toevoegt.

Een gekoppeld telefoonnummer in WordPress 6.7
Een gekoppeld telefoonnummer in WordPress 6.7

Meerdere afbeeldingen in het Image blok plaatsen

Je kunt nu meerdere afbeeldingen in een Image blok droppen en het omzetten naar een Gallery blok.

Meerdere afbeeldingen droppen in een Image blok in WordPress 6.7
Meerdere afbeeldingen droppen in een Image blok in WordPress 6.7
Een Gallery blok gegenereerd door meerdere afbeeldingen op een Image blok te slepen
Een Gallery blok gegenereerd door meerdere afbeeldingen op een Image blok te slepen

Nieuwe features en API’s voor developers

WordPress 6.7 bevat verschillende nieuwe API’s voor developers om meer functionaliteit aan hun plugins toe te voegen. Er is een nieuwe Preview Options API toegevoegd en andere API’s zijn uitgebreid met nieuwe features, zoals de HTML API en de Interactivity API. Laten we er een paar verkennen.

Preview opties API

Met de nieuwe Preview Options API kunnen plugin-ontwikkelaars het Preview dropdown menu in de bericht/pagina editor uitbreiden. De API introduceert een nieuw PluginPreviewMenuItem component dat plugins kunnen gebruiken om custom menu-items met aangepaste titels en klikhandlers toe te voegen aan het Preview dropdown menu.

Plugin-ontwikkelaars kunnen custom preview-opties toevoegen aan de WordPress editor voor een heleboel dingen, zoals:

  • Previews van custom opmaak (denk aan berichten op sociale media)
  • Previews van berichten of pagina’s met beperkingen voor specifieke gebruikersrollen
  • Extra voorbeeldmodi, zoals donkere modus, e-mails, enz.

Afhankelijk van de meegeleverde rekwisieten kun je aangepaste voorbeeldmenu-items gebruiken als knoppen of links.

Hier is een voorbeeld van hoe je de nieuwe API kunt gebruiken:

import { __ } from '@wordpress/i18n';
import { PluginPreviewMenuItem } from '@wordpress/editor';
import { registerPlugin } from '@wordpress/plugins';

function onPreviewClick() {
	// Handle preview action
}

const CustomPreviewMenuItem = () => (
	<PluginPreviewMenuItem
		onClick={ onPreviewClick }
	>
		{ __( 'Your menu item label' ) }
	</PluginPreviewMenuItem>
);

registerPlugin( 'custom-preview-menu-item', {
	render: CustomPreviewMenuItem,
} );

Nieuwe Template Registration API plugin

Vóór WordPress 6.7 was de enige optie om custom bloktemplates toe te voegen een thema. Het registreren van een bloktemplate met behulp van een plugin was onmogelijk, tenzij je ingewikkelde workarounds gebruikte.

Dankzij de nieuwe Template Registration API kun je nu custom bloktemplates registreren via een plugin. De nieuwe API biedt twee nieuwe features voor het registreren en deregistreren van een template: register_block_template() en unregister_block_template().

Het gebruik ervan is vrij eenvoudig. Je hoeft alleen maar een paar parameters aan de functie door te geven:

$template_name: De naam van het template in de vorm van plugin_uri//template_name (let op de //)
$args: een array met de volgende argumenten:

  • title
  • description
  • content
  • post_types

Voor een beter overzicht van de nieuwe API en gebruiksvoorbeelden, zie de dev note en het originele pull request.

Nieuwe bloktype registratie API’s

Een nieuwe wp_register_block_metadata_collection() feature registreert een bloktype uit een manifest bestand als het bestaat in plaats van het rechtstreeks lezen en parsen van het block.json bestand. Dit is vooral handig als een plugin meerdere bloktypen registreert, omdat het lezen en parren van block.json voor elk bloktype vermeden wordt.

Merk op dat deze nieuwe feature de bestaande register_block_type() en register_block_type_from_metadata() functies niet vervangt. Het gebruik ervan is optioneel, maar wordt aanbevolen voor plugins die meerdere blokken registreren om de prestaties te verbeteren.

Bekijk de dev note voor een uitgebreid overzicht van de nieuwe API en een voorbeeld van gebruik.

Opties voor heading niveau

Dankzij een nieuw levelOptions attribuut kunnen ontwikkelaars aangeven welke heading niveaus moeten worden weergegeven in de dropdown UI voor heading-, sitetitel-, sitetagline-, querytitel-, posttitel- en commentaartitelblokken.

Je zult het vooral gebruiken in bloktemplates, template parts en patterns. De volgende voorbeeldcode schakelt H1, H5 en H6 headings uit in een heading blok:

<!-- wp:heading {"levelOptions":[2,3,4],"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center"><em>Schedule a Demo</em></h2>
<!-- /wp:heading -->

De afbeelding hieronder toont de beschikbare opties in de werkbalk van het blok:

Heading niveaus in WordPress 6.7
Heading niveaus in WordPress 6.7

Je kunt het levelOptions attribuut ook filteren met een plugin of in het featurebestand van je thema met behulp van het register_block_type_args filter. De dev note geeft het volgende voorbeeld:

function example_modify_heading_levels_globally( $args, $block_type ) {
	 
	if ( 'core/heading' !== $block_type ) {
		return $args;
	}
 
	// Remove H1, H2, and H6.
	$args['attributes']['levelOptions']['default'] = [ 3, 4, 5 ];
	 
	return $args;
}
add_filter( 'register_block_type_args', 'example_modify_heading_levels_globally', 10, 2 );

Extra wijzigingen voor ontwikkelaars in WordPress 6.7

  • Het invoegen van een hooked blok als eerste of laatste child van een Template Part blok is nu mogelijk. (Zie de dev notes)
  • Hooked blokken respecteren nu de multiple block-supports property. (Zie de dev notes)
  • Gebruikersinterfacecomponenten krijgen een aanzienlijk aantal updates. (Zie de dev notes.)
  • De nieuwe features getServerState() en getServerContext() bieden een manier om je aan te melden voor Interactivity API status/context veranderingen op client-side navigatie.
  • Scriptmodules krijgen een aantal updates met een nieuwe @wordpress/a11y scriptmodule en een nieuwe script_module_data_{$module_id} filter.
  • De HTML API krijgt verschillende verbeteringen, waaronder ondersteuning voor bijna alle HTML tags, een nieuwe set_modifiable_text() methode waarmee de tekstinhoud van op zichzelf staande elementen zoals script, style, of title vervangen kan worden, een full-parser modus in de HTML Processor, en nog veel meer.
  • Verschillende internationalisatie (i18n) verbeteringen werden samengevoegd in de core, waaronder een nieuwe has_translation() functie om te bepalen of een vertaling al bestaat zonder de vertaling eerst te laden, e-mails naar admin_email worden verzonden in de locale van de gebruiker, en een waarschuwing voor ontwikkelaars als ze vertalingen laden in een plugin of thema voordat de huidige gebruiker bekend is.

Samenvatting

In deze diepgaande bespreking van WordPress 6.7 hebben we veel geweldige features en verbeteringen verkend die in deze release verstopt zitten, van een nieuw verbazingwekkend standaardthema, tot de uitzoommodus voor metaboxes in de bericht-editor, toevoegingen aan de Block Bindings API, verbeteringen aan het mediabeheer, nieuwe ontwerptools en veel nieuwe features voor plugin-ontwikkelaars.

Nu is het jouw beurt. Heb jij WordPress 6.7 al getest? Wat zijn jouw favoriete features of veranderingen die met 6.7 komen? Laat het ons weten in de comments hieronder.

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.