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.<\/p>\n
Waarom de Block Bindings API een revolutionaire tool is<\/h2>\n
Custom velden<\/a> 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.<\/p>\n Je moet de Alle custom veldgegevens voor een post worden opgeslagen als bericht meta<\/a>. Er was echter geen directe manier om de resultaten weer te geven. Daarvoor was een plugin nodig en\/of moest je code toevoegen<\/a> aan je thema. Dit is niet alleen moeilijker voor ontwikkelaars, maar het is ook een extra stukje technische schuld om te beheren.<\/p>\n De introductie van de Block Editor en blokthema’s<\/a> 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<\/a>.<\/p>\n 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<\/a>, Heading<\/a>, Image<\/a> en Paragraph<\/a> – en opent zo een nieuwe wereld van aanpassingsmogelijkheden voor blokkenthema’s en de Block Editor.<\/p>\n 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.<\/p>\n Hoe werkt de Block Bindings API in de echte wereld? We hebben een eenvoudig voorbeeld samengesteld van hoe het nuttig kan zijn.<\/p>\n Voordat we beginnen, volgt hier een schets van ons project:<\/p>\n Nu we ons plan hebben, laten we de WordPress Block Bindings API in actie zetten.<\/p>\n WordPress verbergt standaard custom velden, dus de eerste stap is om ze in te schakelen in de Block Editor.<\/p>\n Om custom velden in te schakelen, open je het menu Options <\/b>(\u22ee pictogram) in de Block Editor. Klik vervolgens op Preferences<\/strong>.<\/p>\n Klik vervolgens op de knop Custom fields <\/strong>om ze weer te geven in de editor. Klik op de knop Show & Reload Page <\/strong>om je wijzigingen op te slaan.<\/p>\n Om onze custom velden te registreren, open je het bestand Let op de slug voor elk veld, want die hebben we nodig in de volgende stap:<\/p>\n Je kunt deze velden verder aanpassen door de WordPress We moeten ook opmerken dat je deze velden kunt registreren via een custom plugin<\/a>. Het voordeel hiervan is dat de velden blijven werken, zelfs als je van thema verandert.<\/p>\n Voeg vervolgens custom veldwaarden toe aan een pagina door deze stappen te volgen:<\/p>\n We kunnen nu de pagina opslaan en dit proces herhalen voor de andere pagina’s op onze site.<\/p>\n We willen onze gegevens weergeven op pagina’s, dus moeten we het paginasjabloon van ons thema bewerken in de Site Editor<\/a>. Om dit te doen:<\/p>\n Navigeer naar Appearance > Editor<\/strong> en klik vervolgens op de link Templates <\/b>in de linkerkolom. Zoek het Page Template <\/b>en klik erop om het te openen in de editor.<\/p>\n Eerst moeten we een plek kiezen om onze custom veldgegevens weer te geven. Laten we een gebied toevoegen aan de onderkant van elke pagina.<\/p>\n We voegen een Group <\/b>blok toe en voegen er een Column <\/b>blok aan toe. De linkerkolom bevat een Image <\/b>blok (om onze foto weer te geven), terwijl de rechterkolom een blok Paragraph <\/b>bevat (om onze quote weer te geven).<\/p>\n We hebben ons Group<\/strong> blok hernoemd<\/a> naar Custom Field Data<\/strong> voor toekomstige referentie. Zo is het gemakkelijker terug te vinden als we het later opnieuw willen bewerken.<\/p>\n 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.<\/p>\n Klik op het menu Options <\/b>(\u22ee pictogram) rechtsboven in de Site Editor. Selecteer de link Code editor<\/strong>. Hierdoor wordt de code-editor geopend.<\/p>\n Zoek naar het Group<\/strong> blok dat we zojuist hebben toegevoegd. De code begint met:<\/p>\n We hebben de juiste code ook gemarkeerd in de afbeelding hieronder:<\/p>\n Zoek vervolgens de blokken Image en Paragraph binnen deze groep. Hun standaardcode ziet er als volgt uit:<\/p>\n Image:<\/strong><\/p>\n Paragraph:<\/strong><\/p>\n We kunnen deze blokken bewerken om ze te binden aan onze custom velden:<\/p>\n Image:<\/strong><\/p>\n Merk op dat de Paragraph:<\/strong><\/p>\n In dit geval is de waarde Sla de wijzigingen op en sluit de Code Editor af.<\/strong><\/p>\n 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.<\/p>\n Opmerking:<\/strong> Je ziet deze blokken niet wanneer je pagina’s bewerkt. Ze worden echter wel weergegeven op de front-end van je website.<\/p>\n 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.<\/p>\n 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:<\/p>\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.<\/p>\n De Block Bindings API is geen afgerond product. Het blijft zich ontwikkelen met elke nieuwe versie van WordPress.<\/p>\n Er zijn bijvoorbeeld verschillende verbeteringen<\/a> gepland voor WordPress 6.7:<\/p>\n Blijf kijken naar nieuwe features die de API gebruiksvriendelijker en krachtiger maken.<\/p>\n Je kunt ook de Gutenberg<\/a> plugin installeren om vroegtijdige toegang te krijgen tot features\u00a0 voordat ze worden samengevoegd in WordPress core. We raden aan om het op een testomgeving of lokale omgeving te gebruiken.<\/p>\n Alle klanten van Kinsta hebben toegang tot een testomgeving<\/a> om te testen en kunnen ook premium features<\/a> toevoegen aan de mix.<\/p>\n En iedereen kan onze gratis DevKinsta<\/a> lokale WordPress ontwikkelingssuite gebruiken. Start nieuwe sites met \u00e9\u00e9n klik en ontwikkel vanaf je lokale machine.<\/p>\n 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.<\/p>\n 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.<\/p>\n Dat zijn enkele belangrijke redenen om het vandaag nog te gaan gebruiken. En de toekomst ziet er nog rooskleuriger uit!<\/p>\n 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<\/a>, het werken met custom bindingsbronnen<\/a> en leer hoe je Block Bindings waarden kunt krijgen en instellen in de editor<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" 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 …<\/p>\n","protected":false},"author":51,"featured_media":61515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[892],"class_list":["post-61514","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-ontwikkeling"],"yoast_head":"\nregister_meta()<\/a><\/code> 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.<\/p>\nEen eenvoudig voorbeeld van de Block Bindings API<\/h2>\n
\n
\n
Custom velden inschakelen in de Block Editor<\/h3>\n
![\"Custom](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-editor-preferences.png\" "\\"The")
De custom velden registreren<\/h3>\n
functions.php<\/code> van het thema. Voeg dan de volgende code toe:<\/p>\n\/\/ Register custom fields for pages in WordPress using register_meta()\nfunction kinsta_register_custom_meta_fields_for_pages() {\n \/\/ Register the text field \"kinsta_famous_quote\" for pages\n register_meta('post', 'kinsta_famous_quote', array(\n 'type' => 'string', \/\/ Text field\n 'single' => true, \/\/ Single value for the field\n 'sanitize_callback' => 'wp_strip_all_tags', \/\/ Sanitize the input\n 'show_in_rest' => true, \/\/ Expose this field in the REST API for Gutenberg\n )); \n\n\/\/ Register the image field \"kinsta_photo\" for pages\n register_meta('post', 'kinsta_photo', array(\n 'type' => 'string', \/\/ Can store the URL or attachment ID as a string\n 'single' => true, \/\/ Single value for the field\n 'sanitize_callback' => 'esc_url_raw', \/\/ Sanitize the input as a URL\n 'show_in_rest' => true, \/\/ Expose this field in the REST API for Gutenberg\n ));\n}\nadd_action('init', 'kinsta_register_custom_meta_fields_for_pages');<\/code><\/pre>\n\n
kinsta_famous_quote<\/code><\/li>\nkinsta_photo<\/code><\/li>\n<\/ul>\nregister_meta()<\/code> documentatie<\/a> te volgen.<\/p>\nCustom veldwaarden toevoegen aan een pagina<\/h3>\n
\n
kinsta_famous_quote<\/code> 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<\/li>\nkinsta_photo<\/code> toe te voegen. Voeg rechts de URL toe van de afbeelding die we willen gebruiken.<\/li>\n<\/ol>\n![\"Custom](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-editor-custom-field-config.png\" "\\"WordPress")
De custom veldgegevens binden aan blokken<\/h3>\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-templates.png\" "\\"The")
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-page-template.png\" "\\"The")
<!-- wp:group {\"metadata\":{\"name\":\"Custom Field Data\"},\"layout\":{\"type\":\"constrained\"}} --><\/code><\/pre>\n![\"Group](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-block-code.png\" "\\"WordPress")
<!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:image {\"metadata\":{\"bindings\":{\"url\":{\"source\":\"core\/post-meta\",\"args\":{\"key\":\"kinsta_photo\"}}}}} -->\n<figure class=\"wp-block-image\"><img src=\"\" alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\nkey<\/code> waarde is ingesteld op ons kinsta_photo<\/code> custom veld.<\/p>\n<!-- wp:paragraph {\"metadata\":{\"bindings\":{\"content\":{\"source\":\"core\/post-meta\",\"args\":{\"key\":\"kinsta_famous_quote\"}}}}} -->\n<p><\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\nkey<\/code> ingesteld op ons custom veld kinsta_famous_quote<\/code>.<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-image-block-bound.png\" "\\"Image")
![\"Ons](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-paragraph-block-bound.png\" "\\"Paragraph")
![\"Onze](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-result.jpg\" "\\"WordPress")
Andere mogelijkheden voor block bindings<\/h3>\n
\n
kinsta_photo_alt<\/code>, kunnen binden aan het alt<\/code> attribuut op deze manier:\n<!-- wp:image {\"metadata\":{\"bindings\":{\"url\":{\"source\":\"namespace\/slug\",\"args\":{\"key\":\"kinsta_photo\"}},\"alt\":{\"source\":\"namespace\/slug\",\"args\":{\"key\":\"kinsta_photo_alt\"}}}}} -->\n<figure class=\"wp-block-image\"><img src=\"\" alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\n<\/li>\nVerder gaan met de Block Bindings API<\/h2>\n
\n
Samenvatting<\/h2>\n