Je eigen gegevens weergeven in de WordPress Blok Editor is niet altijd een eenvoudig proces geweest. Je moest hiervoor een custom blok bouwen om gegevens op te halen uit custom velden of andere bronnen.

Dat is veel werk en vaak buiten het bereik van sommige ontwikkelaars. In sommige gevallen betekent het ook dat je dubbele functionaliteit moet maken. Denk bijvoorbeeld aan het weergeven van custom veldgegevens in een tekstheader. Zou dit niet mogelijk moeten zijn zonder een heel nieuw blok te bouwen?

Goed nieuws! Eindelijk is dit mogelijk. De komst van de Block Bindings API in WordPress 6.5 biedt een ingebouwde oplossing. Hiermee kun je een datasource binden aan een selectie van WordPress core blokken, waardoor je dynamische WordPress websites kunt bouwen in minder tijd. Het brengt daarnaast een nieuw niveau van functionaliteit naar blokthema’s.

Dit artikel laat je kennismaken met de Block Bindings API, laat je zien hoe het werkt met een eenvoudige demo en verkent wat de toekomst brengt naarmate de API zich verder ontwikkelt.

Waarom de Block Bindings API een revolutionaire tool is

Custom velden maken al jaren deel uit van de WordPress core. Ze brengen dynamische gegevens naar statische berichten en geven ontwikkelaars meer aanpassingsmogelijkheden. Het proces om ze te gebruiken is echter omslachtig.

Je moet de register_meta() functie gebruiken of een plugin installeren om nieuwe velden te registreren en te configureren. En dat is nog maar de eerste stap. Het weergeven van deze gegevens op je site is een andere uitdaging.

Alle custom veldgegevens voor een post worden opgeslagen als bericht meta. Er was echter geen directe manier om de resultaten weer te geven. Daarvoor was een plugin nodig en/of moest je code toevoegen aan je thema. Dit is niet alleen moeilijker voor ontwikkelaars, maar het is ook een extra stukje technische schuld om te beheren.

De introductie van de Block Editor en blokthema’s hielp niet echt. Custom veldgegevens konden niet worden weergegeven in een van de core blokken die met WordPress werden meegeleverd, en dezelfde beperkingen golden voor blokkenthema’s. Dit kan een belangrijke reden zijn waarom sommige ontwikkelaars zijn blijven vasthouden aan de Classic Editor en/of klassieke thema’s.

De Block Bindings API brengt deze functionaliteit naar WordPress. In het kort heb je geen plugins nodig om gegevens weer te geven. Het koppelt een gegevensbron aan specifieke blokken zoals Button, Heading, Image en Paragraph – en opent zo een nieuwe wereld van aanpassingsmogelijkheden voor blokkenthema’s en de Block Editor.

Het dupliceert niet volledig de mogelijkheden van het schrijven van PHP of het gebruik van een plugin voor custom velden. Het is echter wel een stap in de goede richting. En het kan alles zijn wat je nodig hebt in sommige scenario’s.

Een eenvoudig voorbeeld van de Block Bindings API

Hoe werkt de Block Bindings API in de echte wereld? We hebben een eenvoudig voorbeeld samengesteld van hoe het nuttig kan zijn.

Voordat we beginnen, volgt hier een schets van ons project:

  • Installeer de nieuwste versie van WordPress en gebruik het standaardthema Twenty Twenty-Four.
  • Registreer een paar custom velden:
    • Quote: Een beroemd citaat dat we op elke pagina willen uitlichten, gebonden aan een Paragraph blok.
    • Photo: De URL van een andere foto voor elke pagina, gebonden aan een Image blok.
  • Bewerk ten slotte het pagina template van het thema en voeg blokken toe die deze custom veldwaarden ophalen.

Nu we ons plan hebben, laten we de WordPress Block Bindings API in actie zetten.

Custom velden inschakelen in de Block Editor

WordPress verbergt standaard custom velden, dus de eerste stap is om ze in te schakelen in de Block Editor.

Om custom velden in te schakelen, open je het menu Options (⋮ pictogram) in de Block Editor. Klik vervolgens op Preferences.

Klik vervolgens op de knop Custom fields om ze weer te geven in de editor. Klik op de knop Show & Reload Page om je wijzigingen op te slaan.

Custom velden inschakelen in de Block Editor
Custom velden inschakelen in de Block Editor

De custom velden registreren

Om onze custom velden te registreren, open je het bestand functions.php van het thema. Voeg dan de volgende code toe:

// Register custom fields for pages in WordPress using register_meta()
function kinsta_register_custom_meta_fields_for_pages() {
     // Register the text field "kinsta_famous_quote" for pages
     register_meta('post', 'kinsta_famous_quote', array(
          'type' => 'string',  // Text field
          'single' => true,    // Single value for the field
          'sanitize_callback' => 'wp_strip_all_tags',  // Sanitize the input
          'show_in_rest' => true,  // Expose this field in the REST API for Gutenberg
     )); 

// Register the image field "kinsta_photo" for pages
    register_meta('post', 'kinsta_photo', array(
          'type' => 'string',  // Can store the URL or attachment ID as a string
          'single' => true,    // Single value for the field
          'sanitize_callback' => 'esc_url_raw',  // Sanitize the input as a URL
          'show_in_rest' => true,  // Expose this field in the REST API for Gutenberg
     ));
}
add_action('init', 'kinsta_register_custom_meta_fields_for_pages');

Let op de slug voor elk veld, want die hebben we nodig in de volgende stap:

  • kinsta_famous_quote
  • kinsta_photo

Je kunt deze velden verder aanpassen door de WordPress register_meta() documentatie te volgen.

We moeten ook opmerken dat je deze velden kunt registreren via een custom plugin. Het voordeel hiervan is dat de velden blijven werken, zelfs als je van thema verandert.

Custom veldwaarden toevoegen aan een pagina

Voeg vervolgens custom veldwaarden toe aan een pagina door deze stappen te volgen:

  1. Navigeer naar Pages > All pages en selecteer de pagina van je keuze.
  2. Scroll naar de onderkant van de pagina en vind het paneel Custom Fields. Klik op de knop Enter New onder het eerste veld. Voeg kinsta_famous_quote toe in de linkerkolom. Voeg dan rechts de inhoud van onze quote toe: The future belongs to those who believe in the beauty of their dreams. – Eleanor Roosevelt
  3. Klik vervolgens op de knop Add Custom Field om het veld kinsta_photo toe te voegen. Voeg rechts de URL toe van de afbeelding die we willen gebruiken.
Custom velden toevoegen aan de WordPress Block Editor
Custom velden toevoegen aan de WordPress Block Editor

We kunnen nu de pagina opslaan en dit proces herhalen voor de andere pagina’s op onze site.

De custom veldgegevens binden aan blokken

We willen onze gegevens weergeven op pagina’s, dus moeten we het paginasjabloon van ons thema bewerken in de Site Editor. Om dit te doen:

Navigeer naar Appearance > Editor en klik vervolgens op de link Templates in de linkerkolom. Zoek het Page Template en klik erop om het te openen in de editor.

De beschikbare templates in de WordPress Site Editor
Zoek het page template in de WordPress Site Editor

Eerst moeten we een plek kiezen om onze custom veldgegevens weer te geven. Laten we een gebied toevoegen aan de onderkant van elke pagina.

We voegen een Group blok toe en voegen er een Column blok aan toe. De linkerkolom bevat een Image blok (om onze foto weer te geven), terwijl de rechterkolom een blok Paragraph bevat (om onze quote weer te geven).

We hebben ons Group blok hernoemd naar Custom Field Data voor toekomstige referentie. Zo is het gemakkelijker terug te vinden als we het later opnieuw willen bewerken.

De Pages template bewerken in de WordPress Site Editor
Blokken toevoegen die onze custom veldgegevens weergeven

De Block Bindings API heeft nog geen visuele interface voor het weergeven van waarden (meer daarover hieronder). We moeten dus de code van onze blokken Image en Paragraph aanpassen. Zo kunnen we er custom gegevens aan binden.

Klik op het menu Options (⋮ pictogram) rechtsboven in de Site Editor. Selecteer de link Code editor. Hierdoor wordt de code-editor geopend.

Zoek naar het Group blok dat we zojuist hebben toegevoegd. De code begint met:

<!-- wp:group {"metadata":{"name":"Custom Field Data"},"layout":{"type":"constrained"}} -->

We hebben de juiste code ook gemarkeerd in de afbeelding hieronder:

Group blok bekijken in de Code Editor
Ons Group blok bekijken in de Code Editor

Zoek vervolgens de blokken Image en Paragraph binnen deze groep. Hun standaardcode ziet er als volgt uit:

Image:

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

Paragraph:

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

We kunnen deze blokken bewerken om ze te binden aan onze custom velden:

Image:

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

Merk op dat de key waarde is ingesteld op ons kinsta_photo custom veld.

Paragraph:

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

In dit geval is de waarde key ingesteld op ons custom veld kinsta_famous_quote.

Sla de wijzigingen op en sluit de Code Editor af.

Klik op de blokken Image en Paragraph. WordPress omlijnt elk blok in paars om aan te geven dat het gebonden is aan een gegevensbron. Bovendien verschijnt in het rechter paneel een Attributes gebied met meer details.

Een blok Image is gebonden aan een gegevensbron
WordPress geeft aan dat het Image blok gebonden is aan een gegevensbron
Ons Paragraph blok is ook gebonden aan een databron
Ons Paragraph blok is ook gebonden aan een databron

Opmerking: Je ziet deze blokken niet wanneer je pagina’s bewerkt. Ze worden echter wel weergegeven op de front-end van je website.

De laatste stap is het bezoeken van de front-end van de website. We zouden onze afbeelding en citaat moeten zien op alle pagina’s met custom veldwaarden.

Onze custom veldgegevens worden onderaan de pagina weergegeven
Onze custom veldgegevens worden onderaan de pagina weergegeven

Andere mogelijkheden voor block bindings

We hebben een basisvoorbeeld gemaakt van het binden van blokken aan een gegevensbron. Er zijn echter nog enkele andere manieren waarop we ons project zouden kunnen verbeteren, zoals:

  • ALT attributen toevoegen: We zouden nog een custom veld kunnen registreren dat ALT attributen op onze foto’s definieert. Dat zou de functie toegankelijker maken. Als voorbeeld zouden we een nieuw veld, kinsta_photo_alt, kunnen binden aan het alt attribuut op deze manier: 
    <!-- wp:image {"metadata":{"bindings":{"url":{"source":"namespace/slug","args":{"key":"kinsta_photo"}},"alt":{"source":"namespace/slug","args":{"key":"kinsta_photo_alt"}}}}} -->
<figure class="wp-block-image"><img src="" alt=""/></figure>
<!-- /wp:image -->
  • Een custom gegevensbron gebruiken: Custom velden werken prima voor onze doeleinden. We hadden er echter voor kunnen kiezen om gegevens op te halen uit een custom bron. Mogelijkheden zijn onder andere API’s, custom databasetabellen, plugin/thema-opties, sitegegevens en taxonomieën.

Het idee is om na te denken over hoe je custom gegevens in je site wilt opnemen. Van daaruit maak je een plan om het te implementeren op een manier die gemakkelijk te onderhouden is. De Block Bindings API biedt veel mogelijkheden om dit te doen.

Verder gaan met de Block Bindings API

De Block Bindings API is geen afgerond product. Het blijft zich ontwikkelen met elke nieuwe versie van WordPress.

Er zijn bijvoorbeeld verschillende verbeteringen gepland voor WordPress 6.7:

  • Een standaard UI voor het binden van blokken aan beschikbare gegevensbronnen.
  • Bericht meta labels voor eenvoudigere identificatie.
  • Compatibiliteit met custom bericht-type thematemplates.
  • Standaard rechten om te bepalen wie block bindings kan bewerken.
  • Diverse technische verbeteringen onder de motorkap.

Blijf kijken naar nieuwe features die de API gebruiksvriendelijker en krachtiger maken.

Je kunt ook de Gutenberg plugin installeren om vroegtijdige toegang te krijgen tot features  voordat ze worden samengevoegd in WordPress core. We raden aan om het op een testomgeving of lokale omgeving te gebruiken.

Alle klanten van Kinsta hebben toegang tot een testomgeving om te testen en kunnen ook premium features toevoegen aan de mix.

En iedereen kan onze gratis DevKinsta lokale WordPress ontwikkelingssuite gebruiken. Start nieuwe sites met één klik en ontwikkel vanaf je lokale machine.

Samenvatting

De Block Bindings API betekent een verschuiving in de manier waarop we werken met custom gegevens in WordPress. Het vervangt in veel gevallen de noodzaak voor plugins of custom blokken. En het biedt meer flexibiliteit voor WordPress blokken en blokthema’s.

Door het toe te voegen aan je workflow kun je je ontwikkeltijd verkorten. Als ingebouwde feature kan het ook de prestaties verbeteren in vergelijking met het gebruik van plugins.

Dat zijn enkele belangrijke redenen om het vandaag nog te gaan gebruiken. En de toekomst ziet er nog rooskleuriger uit!

We zijn nog maar net begonnen met het verkennen van de mogelijkheden die in dit artikel aan bod komen. Duik dieper in de Block Bindings API door meer te ontdekken over het verbinden van custom velden, het werken met custom bindingsbronnen en leer hoe je Block Bindings waarden kunt krijgen en instellen in de editor.

Eric Karkovack

Eric Karkovack is a freelance web developer and writer with over 25 years of experience. He loves helping others learn about WordPress, freelancing, and technology.