{"id":49672,"date":"2023-01-25T12:11:37","date_gmt":"2023-01-25T11:11:37","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=49672&#038;preview=true&#038;preview_id=49672"},"modified":"2023-06-08T11:09:46","modified_gmt":"2023-06-08T09:09:46","slug":"wordpress-metabox-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/","title":{"rendered":"Zo voeg je metaboxes en aangepaste velden toe aan berichten in Gutenberg"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/advanced-custom-fields\/#what\">Aangepaste velden<\/a> bieden een manier om extra informatie toe te wijzen aan websitecontent. Deze stukjes informatie worden meestal <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">metadata<\/a> genoemd.<\/p>\n<blockquote><p>Metadata is informatie over informatie. In het geval van WordPress is dat informatie over berichten, gebruikers, comments en termen.<\/p>\n<p>Gezien de veel-op-een relatie van metadata in WordPress zijn je mogelijkheden redelijk onbeperkt. Je kunt zoveel meta-opties hebben als je wilt, en je kunt er zowat alles in opslaan.<\/p>\n<p><em>&#8211; <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">Plugin Handbook<\/a><\/em><\/p><\/blockquote>\n<p>Hier zijn enkele voorbeelden van metadata die je aan een bericht kunt koppelen met behulp van aangepaste velden:<\/p>\n<ul>\n<li>De geografische co\u00f6rdinaten van een plaats of stuk onroerend goed<\/li>\n<li>De datum van een evenement<\/li>\n<li>Het ISBN of de auteur van een boek<\/li>\n<li>De stemming van de dag van de auteur van het bericht<\/li>\n<\/ul>\n<p>En er zijn er nog veel meer.<\/p>\n<p>WordPress biedt kant-en-klaar geen gemakkelijke manier om aangepaste velden toe te voegen en te beheren. In de Classic Editor worden aangepaste velden weergegeven in een vak dat onderaan de pagina staat, onder de Post Editor.<\/p>\n<figure id=\"attachment_142717\" aria-describedby=\"caption-attachment-142717\" style=\"width: 2555px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142717 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-fields-classic-editor.jpg\" alt=\"Aangepaste velden in de Classic Editor\" width=\"2555\" height=\"1832\"><figcaption id=\"caption-attachment-142717\" class=\"wp-caption-text\">Aangepaste velden in de Classic Editor<\/figcaption><\/figure>\n<p>In Gutenberg zijn aangepaste velden standaard uitgeschakeld, maar je kunt ze weergeven door het betreffende item in de berichtinstellingen te selecteren.<\/p>\n<figure id=\"attachment_142718\" aria-describedby=\"caption-attachment-142718\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142718 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/adding-custom-fields-to-the-block-editor.jpg\" alt=\"Het paneel met aangepaste velden toevoegen aan de blok editor.\" width=\"1500\" height=\"964\"><figcaption id=\"caption-attachment-142718\" class=\"wp-caption-text\">Het paneel met aangepaste velden toevoegen aan de blokeditor.<\/figcaption><\/figure>\n<p>Helaas is er geen manier om metadata aan de frontend weer te geven zonder een plugin te gebruiken of aan de slag te gaan met code.<\/p>\n\n<p>Als je een normale gebruiker bent, zijn er verschillende <a href=\"https:\/\/wordpress.org\/plugins\/search\/custom+fields\/\">uitstekende plugins<\/a> die het werk voor je doen. Maar als je een developer bent en meer wilt halen uit de aangepaste velden van WordPress, ze naadloos wilt integreren in de blokeditor, en ze wilt weergeven aan de frontend van je WordPress website met behulp van een aangepast Gutenberg blok, dan ben je hier op de juiste plaats.<\/p>\n<p>Dus als je je afvraagt wat voor WordPress developers de beste manier is om aangepaste velden zowel in <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">Gutenberg<\/a> als in de <a href=\"https:\/\/kinsta.com\/blog\/wordpress-tinymce-editor\/\">Classic Editor<\/a> te gebruiken, dan is het snelle antwoord &#8220;het maken van een plugin die zowel voor de Classic Editor als voor Gutenberg werkt&#8221;.<\/p>\n<p>Maar maak je niet te veel zorgen. Als het maken van een plugin om aangepaste velden in beide editors te beheren je lastig lijkt, zullen we proberen het proces zo eenvoudig mogelijk te maken. Zodra je de concepten begrijpt die we in dit artikel bespreken, zul je de vaardigheden opdoen die nodig zijn om aangepaste metavelden in Gutenberg te beheren en allerlei websites te bouwen.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Dit artikel gaat ervan uit dat je bekend bent met technologie\u00ebn als <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-node-js\/\">Node.js<\/a> &#038; <a href=\"https:\/\/kinsta.com\/blog\/what-is-npm\/\">npm<\/a>, <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a>, en <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-javascript\/\">JavaScript<\/a>. Basiskennis van WordPress ontwikkeling is ook vereist.<\/p>\n<p>Als je nieuw bent met Gutenberg blokdevelopment, bekijk dan zeker onze eerdere handleidingen voordat je dit artikel gaat lezen:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">Aangepaste Gutenberg blokken maken<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\">Zo maak je dynamische blokken voor Gutenberg<\/a><\/li>\n<\/ul>\n<p>Als je de voorkeur geeft aan videocontent, bekijk dan onze gratis videocursus <a href=\"https:\/\/kinsta.com\/courses\/course\/gutenberg-block-development\/\">Custom Gutenberg blokdevelopment<\/a>.<\/p>\n<\/aside>\n\n<p><strong>Opmerking: Zorg ervoor dat je een <a href=\"https:\/\/kinsta.com\/nl\/blog\/node-js-installeren\/\">actuele versie van Node.js<\/a> op je computer hebt voordat je iets doet<\/strong><\/p>\n<p>Dat gezegd hebbende, tijd voor het overzicht:<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Een blokplugin maken met de offici\u00eble create-block tool<\/h2>\n<p>De eerste stap is het maken van een nieuwe plugin met alle bestanden en dependencies die nodig zijn om een nieuw bloktype te registreren. Met de blokplugin kun je eenvoudig een aangepast bloktype maken voor het beheren en weergeven van aangepaste metadata.<\/p>\n<p>Om een nieuw bloktype te maken gebruiken we de offici\u00eble <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">create-block<\/a> tool. Voor een gedetailleerd overzicht van het gebruik van de create-block tool, bekijk je ons <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#create-block\">eerdere artikel<\/a> over Gutenberg blokdevelopment.<\/p>\n<p>Open je commandoregeltool, navigeer naar de <strong>plugins<\/strong> map van je <a href=\"https:\/\/kinsta.com\/nl\/wordpress-hosting\/testomgevingen\/\">WordPress developmentwebsite<\/a> en voer het volgende commando uit:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>Voeg de volgende gegevens toe als daarom wordt gevraagd:<\/p>\n<ul>\n<li><strong>The template variant to use for this block:<\/strong>\u00a0dynamic<\/li>\n<li><strong>The block slug used for identification (also the output folder name):<\/strong>\u00a0metadata-block<\/li>\n<li><strong>The internal namespace for the block name (something unique for your products):<\/strong>\u00a0meta-fields<\/li>\n<li><strong>The display title for your block:<\/strong>\u00a0Meta Fields<\/li>\n<li><strong>The short description for your block (optional):<\/strong>\u00a0Block description<\/li>\n<li><strong>The dashicon to make it easier to identify your block (optional):<\/strong>\u00a0book<\/li>\n<li><strong>The category name to help users browse and discover your block:<\/strong>\u00a0widgets<\/li>\n<li><strong>Do you want to customize the WordPress plugin?<\/strong>\u00a0Yes\/No<\/li>\n<\/ul>\n<p>Laten we even de tijd nemen om die details te bekijken en proberen te begrijpen waar ze gebruikt worden.<\/p>\n<ul>\n<li><strong>De blokslug die gebruikt wordt voor identificatie<\/strong> definieert de <strong>mapnaam<\/strong> en <strong>het tekstdomein<\/strong> van de plugin<\/li>\n<li><strong>De interne namespace voor de bloknaam<\/strong> definieert de <strong>interne namespace <\/strong>van het blok en <strong>het functieprefix<\/strong>\u00a0dat in de hele code van de plugin wordt gebruikt.<\/li>\n<li><strong>De displaytitel voor je blok<\/strong> definieert de <strong>pluginnaam<\/strong> en de <strong>bloknaam<\/strong> die gebruikt wordt in de editorinterface.<\/li>\n<\/ul>\n<p>Het instellen kan een paar minuten duren. Als het proces voltooid is, krijg je een lijst met de beschikbare commando&#8217;s.<\/p>\n<figure id=\"attachment_142731\" aria-describedby=\"caption-attachment-142731\" style=\"width: 1136px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/plugin-bootstrapped.jpg\" alt=\"Blokplugin succesvol ge\u00efnstalleerd.\" width=\"1136\" height=\"991\"><figcaption id=\"caption-attachment-142731\" class=\"wp-caption-text\">Blokplugin succesvol ge\u00efnstalleerd.<\/figcaption><\/figure>\n<p>Voordat je doorgaat naar de volgende sectie, navigeer je in je <a href=\"https:\/\/kinsta.com\/nl\/blog\/linux-opdrachten\/\">commandoregeltool<\/a> naar de map van je plugin en voer je de volgende commando&#8217;s uit:<\/p>\n<pre><code class=\"language-bash\">cd metadata-block\nnpm start<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Zorg ervoor dat je het commando <code>npm start<\/code> elke keer uitvoert als je je Gutenberg ontwikkelomgeving start.<\/p>\n<p>Wanneer je <code>npm start<\/code> uitvoert, zal een watcher in de terminal draaien en JS en CSS bestanden opnieuw opbouwen na eventuele wijzigingen (<a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/javascript\/js-build-setup\/#development-mode\">lees meer<\/a>).<\/p>\n<\/aside>\n\n<p>Je bent nu klaar om je code te bouwen. De volgende stap is het bewerken van het hoofdbestand PHP van de plugin om een metabox te bouwen voor de Classic Editor.<\/p>\n<p>Voordat je doorgaat naar de volgende sectie, <strong>installeer en activeer je de <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\">Classic Editor<\/a> plugin<\/strong>.<\/p>\n<p>Open dan het Plugins scherm en activeer de nieuwe <strong>Meta Fields <\/strong>plugin.<\/p>\n<figure id=\"attachment_143199\" aria-describedby=\"caption-attachment-143199\" style=\"width: 1726px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143199 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/activate-plugins.jpg\" alt=\"Plugins activeren.\" width=\"1726\" height=\"878\"><figcaption id=\"caption-attachment-143199\" class=\"wp-caption-text\">Plugins activeren.<\/figcaption><\/figure>\n<h2>Een metabox toevoegen aan de Classic Editor<\/h2>\n<p>In de context van de <a href=\"https:\/\/kinsta.com\/nl\/blog\/schakel-gutenberg-wordpress-editor-uit\/\">Classic Editor<\/a> is een metabox een container met formulierelementen om specifieke informatie in te typen, zoals de auteur van een bericht, tags, categorie\u00ebn, enz.<\/p>\n<p>Naast de ingebouwde metaboxes kunnen plugindevelopers een willekeurig aantal <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">aangepaste metaboxes<\/a> toevoegen om HTML formulierelementen (of andere <a href=\"https:\/\/kinsta.com\/nl\/blog\/html-leren\/\">HTML content<\/a>) op te nemen waarin plugingebruikers pluginspecifieke gegevens kunnen invoeren.<\/p>\n<p>De WordPress API biedt handige functies om eenvoudig aangepaste metaboxes te registreren om alle HTML elementen op te nemen die je plugin nodig heeft om te werken.<\/p>\n<p>Om te beginnen voeg je de volgende code toe aan het PHP bestand van de plugin die je zojuist hebt gemaakt:<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n\tadd_meta_box(\n\t\t'meta_fields_meta_box', \n\t\t__( 'Book details' ), \n\t\t'meta_fields_build_meta_box_callback', \n\t\t'post',\n\t\t'side',\n\t\t'default'\n\t );\n}\n\n\/\/ build meta box\nfunction meta_fields_build_meta_box_callback( $post ){\n\t  wp_nonce_field( 'meta_fields_save_meta_box_data', 'meta_fields_meta_box_nonce' );\n\t  $title = get_post_meta( $post-&gt;ID, '_meta_fields_book_title', true );\n\t  $author = get_post_meta( $post-&gt;ID, '_meta_fields_book_author', true );\n\t  ?&gt;\n\t  &lt;div class=\"inside\"&gt;\n\t  \t  &lt;p&gt;&lt;strong&gt;Title&lt;\/strong&gt;&lt;\/p&gt;\n\t\t  &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_title\" name=\"meta_fields_book_title\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;&lt;\/p&gt;\t\n\t\t  &lt;p&gt;&lt;strong&gt;Author&lt;\/strong&gt;&lt;\/p&gt;\n\t\t  &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_author\" name=\"meta_fields_book_author\" value=\"&lt;?php echo esc_attr( $author ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\t  &lt;\/div&gt;\n\t  &lt;?php\n}\nadd_action( 'add_meta_boxes', 'meta_fields_add_meta_box' );<\/code><\/pre>\n<p>De <code>add_meta_box<\/code> functie registreert een nieuwe metabox, terwijl de callback functie de HTML bouwt die in de metabox ge\u00efnjecteerd moet worden. We zullen niet dieper op dit onderwerp ingaan omdat het buiten het bereik van ons artikel valt, maar je vindt alle details die je nodig hebt <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/add_meta_boxes\/\">hier<\/a>, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\">hier<\/a> en <a href=\"https:\/\/www.smashingmagazine.com\/2011\/10\/create-custom-post-meta-boxes-wordpress\/\">hier<\/a>.<\/p>\n<p>De volgende stap is het maken van een functie die de door de auteur van het bericht ingevoerde gegevens opslaat telkens als de <code>save_post<\/code> <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-hooks\/\">hook<\/a> wordt geactiveerd (zie <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/save_post\/\">Developers resources<\/a>):<\/p>\n<pre><code class=\"language-php\">\/\/ save metadata\nfunction meta_fields_save_meta_box_data( $post_id ) {\n\tif ( ! isset( $_POST['meta_fields_meta_box_nonce'] ) )\n\t\treturn;\n\tif ( ! wp_verify_nonce( $_POST['meta_fields_meta_box_nonce'], 'meta_fields_save_meta_box_data' ) )\n\t\treturn;\n\tif ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )\n\t\treturn;\n\tif ( ! current_user_can( 'edit_post', $post_id ) )\n\t\treturn;\n\n\tif ( ! isset( $_POST['meta_fields_book_title'] ) )\n\t\treturn;\n\tif ( ! isset( $_POST['meta_fields_book_author'] ) )\n\t\treturn;\n\n\t$title = sanitize_text_field( $_POST['meta_fields_book_title'] );\n\t$author = sanitize_text_field( $_POST['meta_fields_book_author'] );\n\n\tupdate_post_meta( $post_id, '_meta_fields_book_title', $title );\n\tupdate_post_meta( $post_id, '_meta_fields_book_author', $author );\n}\nadd_action( 'save_post', 'meta_fields_save_meta_box_data' );<\/code><\/pre>\n<p>Nogmaals, bekijk de online documentatie voor details. Hier wijzen we alleen op het onderstrepingsteken (<code>_<\/code>) voor de metasleutel. Dit vertelt WordPress om de sleutels van deze aangepaste velden te verbergen uit de lijst van standaard beschikbare aangepaste velden en maakt je aangepaste velden alleen zichtbaar in je aangepaste metabox.<\/p>\n<p>De afbeelding hieronder laat zien hoe het aangepaste metabox eruit ziet in de Classic Editor:<\/p>\n<figure id=\"attachment_142726\" aria-describedby=\"caption-attachment-142726\" style=\"width: 2154px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142726 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-meta-box.jpg\" alt=\"Een aangepast metabox in de Classic Editor.\" width=\"2154\" height=\"1040\"><figcaption id=\"caption-attachment-142726\" class=\"wp-caption-text\">Een aangepast metabox in de Classic Editor.<\/figcaption><\/figure>\n<p>Als je nu de Classic Editor plugin uitschakelt en kijkt wat er gebeurt in de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">blokeditor<\/a>, zul je zien dat de metabox nog steeds verschijnt en werkt, maar niet precies op de manier die je zou verwachten.<\/p>\n<p>Ons doel is om een systeem te maken voor het beheer van metadata bij blogberichten of <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-custom-post-types\/\">aangepaste berichttypes<\/a> dat naadloos integreert in de blokeditor. Daarom zal de tot nu toe getoonde code alleen nodig zijn om achterwaartse compatibiliteit met de Classic Editor te garanderen.<\/p>\n<p>Dus, voordat we verder gaan, vertellen we WordPress om de aangepaste metabox uit de blokeditor te verwijderen door de <code>__back_compat_meta_box<\/code> flag toe te voegen aan de <code>add_meta_box<\/code> functie (zie ook <a href=\"https:\/\/make.wordpress.org\/core\/2018\/11\/07\/meta-box-compatibility-flags\/\">Meta Box Compatibility Flags<\/a> en <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#backward-compatibility\">Backward Compatibility<\/a>).<\/p>\n<p>Laten we teruggaan naar de callback functie die de metabox registreert en deze als volgt veranderen:<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n\tadd_meta_box(\n\t\t'meta_fields_meta_box', \n\t\t__( 'Book details' ), \n\t\t'meta_fields_build_meta_box_callback', \n\t\t'post', \n\t\t'side',\n\t\t'default',\n\t\t\/\/ hide the meta box in Gutenberg\n\t\tarray('__back_compat_meta_box' =&gt; true)\n\t );\n}<\/code><\/pre>\n<p>Sla het pluginbestand op en ga terug naar je WordPress admin. Nu zou je de aangepaste metabox niet meer moeten zien in de blokeditor. Als je in plaats daarvan de Classic Editor opnieuw activeert, zal je aangepaste metabox weer verschijnen.<\/p>\n<h2>Aangepaste metavelden toevoegen aan de Gutenberg blokeditor (drie opties)<\/h2>\n<p>In onze vorige artikelen over Gutenberg blokdevelopment gaven we gedetailleerde overzichten van de editor, de onderdelen ervan, en hoe je <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">statische blokken<\/a> en <a href=\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\">dynamische blokken<\/a> kunt ontwikkelen.<\/p>\n<p>Zoals gezegd gaan we in dit artikel een stap verder en bespreken we hoe je aangepaste metavelden kunt toevoegen aan blogberichten.<\/p>\n<p>Er zijn verschillende manieren om in Gutenberg berichtmetadata op te slaan en te gebruiken. Hier behandelen we de volgende:<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc><\/p>\n<h3>Een aangepast blok maken om aangepaste metavelden op te slaan en weer te geven<\/h3>\n<p>In dit deel laten we je zien hoe je aangepaste metavelden kunt maken en beheren vanuit een <strong>dynamisch blok<\/strong>. Volgens het Block Editor Handbook is een <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#step-1-register-meta-field\">berichtmetaveld<\/a> &#8220;een WordPress object dat gebruikt wordt om extra gegevens over een bericht op te slaan&#8221; en moeten we eerst een nieuw metaveld registreren voordat we het kunnen gebruiken.<\/p>\n<h4>Aangepaste metavelden registreren<\/h4>\n<p>Voordat je een aangepast metaveld registreert, moet je ervoor zorgen dat het <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-custom-post-types\/\">berichttype<\/a> dat het gaat gebruiken aangepaste velden ondersteunt. Bovendien moet je bij het registreren van een aangepast metaveld de parameter <code>show_in_rest<\/code> instellen op <code>true<\/code>.<\/p>\n<p>Nu terug naar het pluginbestand. Voeg de volgende code toe:<\/p>\n<pre><code class=\"language-php\">\/**\n * Register the custom meta fields\n *\/\nfunction meta_fields_register_meta() {\n\n    $metafields = [ '_meta_fields_book_title', '_meta_fields_book_author' ];\n\n    foreach( $metafields as $metafield ){\n        \/\/ Pass an empty string to register the meta key across all existing post types.\n        register_post_meta( '', $metafield, array(\n            'show_in_rest' =&gt; true,\n            'type' =&gt; 'string',\n            'single' =&gt; true,\n            'sanitize_callback' =&gt; 'sanitize_text_field',\n            'auth_callback' =&gt; function() { \n                return current_user_can( 'edit_posts' );\n            }\n        ));\n    }  \n}\nadd_action( 'init', 'meta_fields_register_meta' );<\/code><\/pre>\n<p><code>register_post_meta<\/code> registreert een metasleutel voor de opgegeven berichttypes. In bovenstaande code hebben we twee aangepaste metavelden geregistreerd voor alle op je website geregistreerde berichttypes die aangepaste velden ondersteunen. Zie voor meer informatie de <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\">functiereferentie<\/a>.<\/p>\n<p>Als dat gedaan is, open dan het bestand <strong>src\/index.js<\/strong> van je blokplugin.<\/p>\n<h4>Het bloktype in de client registreren<\/h4>\n<p>Navigeer nu naar de map <strong>wp-content\/plugins\/metadata-block\/src<\/strong> en open het bestand <strong>index.js<\/strong>:<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\nimport '.\/style.scss';\nimport Edit from '.\/edit';\nimport metadata from '.\/block.json';\n\nregisterBlockType( metadata.name, {\n\tedit: Edit,\n} );<\/code><\/pre>\n<p>Bij statische blokken zouden we ook een <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#indexjs\"><code>save<\/code> functie<\/a> hebben gezien. In dit geval ontbreekt de functie <code>save<\/code> omdat we een dynamisch blok hebben ge\u00efnstalleerd. De content die op de frontend wordt getoond, wordt dynamisch gegenereerd via PHP.<\/p>\n<h4>Het bloktype bouwen<\/h4>\n<p>Navigeer naar de map <strong>wp-content\/plugins\/metadata-block\/src<\/strong> en open het bestand <strong>edit.js<\/strong>. Je zou de volgende code moeten zien (comments verwijderd):<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p { ...useBlockProps() }&gt;\n\t\t\t{ __( 'Meta Fields \u2013 hello from the editor!', 'metadata-block' ) }\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p>Hier voeg je de code toe om het in de editor weer te geven blok te genereren.<\/p>\n<p>De eerste stap is het importeren van de componenten en functies die nodig zijn om het blok te bouwen. Hier is de volledige lijst van dependencies:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps, InspectorControls, RichText } from '@wordpress\/block-editor';\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';\nimport { TextControl, PanelBody, PanelRow } from '@wordpress\/components';\nimport '.\/editor.scss';<\/code><\/pre>\n<p>Als je onze vorige artikelen hebt gelezen, zou je bekend moeten zijn met veel van deze <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\"><code>import<\/code> declaraties<\/a>. Hier geven we er slechts een paar aan:<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';<\/code><\/pre>\n<p>Als je deze dependencies hebt ge\u00efmporteerd, is dit hoe je <code>useSelect<\/code> en <code>useEntityProp<\/code> in de functie <code>Edit()<\/code>:<\/p>\n<pre><code class=\"language-js\">const postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\nconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );<\/code><\/pre>\n<ul>\n<li><code>useSelect<\/code> is een aangepaste hook voor het <a href=\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#build-the-block-to-be-rendered-in-the-editor\">ophalen van props van geregistreerde selectors<\/a>. We zullen het gebruiken om het huidige berichttype op te halen (zie ook <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\">@wordpress\/data reference<\/a> en <a href=\"https:\/\/make.wordpress.org\/core\/2019\/06\/10\/introducing-usedispatch-and-useselect\/\">Introducing useDispatch en useSelect<\/a>)<\/li>\n<li><code>useEntityProp<\/code> is een aangepaste hook waarmee blokken berichtmetavelden kunnen ophalen en wijzigen. <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/33d84b036592a5bf31af05b7710f3b2b14163dc4\/packages\/core-data\/src\/entity-provider.js#L85\">Het is gedefinieerd<\/a> als een &#8220;hook die de waarde en een setter voor de opgegeven property van de dichtstbijzijnde opgegeven entiteit van het opgegeven type teruggeeft&#8221;. Het geeft &#8220;een array terug waarbij het eerste item de waarde van de property is, het tweede de setter en het derde het volledige waarde object van de REST API met meer informatie zoals <code>raw<\/code>, <code>rendered<\/code> en <code>protected<\/code> props&#8221;. (Zie ook <a href=\"https:\/\/make.wordpress.org\/core\/2020\/03\/02\/general-block-editor-api-updates\/\">General Block Editor API Updates<\/a>.)<\/li>\n<\/ul>\n<p>Deze code levert de huidige <code>postType<\/code>, een object van metavelden (<code>meta<\/code>), en een setterfunctie om ze bij te werken (<code>setMeta<\/code>).<\/p>\n<p>Vervang nu de huidige code voor de <code>Edit()<\/code> functie door het volgende:<\/p>\n<pre><code class=\"language-js\">export default function Edit() {\n\tconst blockProps = useBlockProps();\n\tconst postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\n\tconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );\n\tconst bookTitle = meta[ '_meta_fields_book_title' ];\n\tconst bookAuthor = meta[ '_meta_fields_book_author' ];\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, _meta_fields_book_title: newValue } );\n    };\n\tconst updateBookAuthorMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, _meta_fields_book_author: newValue } );\n\t};\nreturn ( ... );\n}<\/code><\/pre>\n<p>Dus om samen te vatten:<\/p>\n<ul>\n<li>We hebben <code>useSelect<\/code> gebruikt om het huidige berichttype te krijgen.<\/li>\n<li><code>useEntityProp<\/code> geeft een array van metavelden terug en een setterfunctie om nieuwe metawaarden in te stellen.<\/li>\n<li><code>updateBookTitleMetaValue<\/code> en <code>updateBookAuthorMetaValue<\/code> zijn twee eventhandlers om metaveldwaarden op te slaan.<\/li>\n<\/ul>\n<p>De volgende stap is het bouwen van de JSX (JavaScript XML) code die de <code>Edit()<\/code> functie teruggeeft:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit() {\n\t...\n\treturn (\n\t\t&lt;&gt;\n\t\t\t&lt;InspectorControls&gt;\n\t\t\t\t&lt;PanelBody \n\t\t\t\t\ttitle={ __( 'Book Details' )}\n\t\t\t\t\tinitialOpen={true}\n\t\t\t\t&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;fieldset&gt;\n\t\t\t\t\t\t\t&lt;TextControl\n\t\t\t\t\t\t\t\tlabel={__( 'Book title' )}\n\t\t\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/fieldset&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;fieldset&gt;\n\t\t\t\t\t\t\t&lt;TextControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Book author' ) }\n\t\t\t\t\t\t\t\tvalue={ bookAuthor }\n\t\t\t\t\t\t\t\tonChange={ updateBookAuthorMetaValue }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/fieldset&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t&lt;\/InspectorControls&gt;\n\t\t\t&lt;div { ...blockProps }&gt;\n\t\t\t\t&lt;RichText \n\t\t\t\t\ttagName=\"h3\"\n\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\tallowedFormats={ [ 'core\/bold', 'core\/italic' ] }\n\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\tplaceholder={ __( 'Write your text...' ) }\n\t\t\t\t\/&gt;\n\t\t\t\t&lt;TextControl\n\t\t\t\t\tlabel=\"Book Author\"\n\t\t\t\t\tvalue={ bookAuthor }\n\t\t\t\t\tonChange={ updateBookAuthorMetaValue }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/&gt;\n\t);\n}<\/code><\/pre>\n<p>De component <code>RichText<\/code> levert een <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/contenteditable\">content-editable<\/a> input, terwijl <code>TextControl<\/code> eenvoudige tekstvelden levert.<\/p>\n<p>We hebben ook een zijbalkpaneel gemaakt met twee invoervelden om te gebruiken in plaats van de twee formulierbesturingselementen in het blok.<\/p>\n<p>Sla het bestand op en ga terug naar de editor. Voeg het blok <strong>Meta Fields<\/strong>\u00a0uit de blokinserter toe en vul de boektitel en auteur in.<\/p>\n<figure id=\"attachment_142769\" aria-describedby=\"caption-attachment-142769\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142769 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-2-meta-fields.jpg\" alt=\"Een aangepast blok inclusief twee aangepaste metavelden.\" width=\"1796\" height=\"880\"><figcaption id=\"caption-attachment-142769\" class=\"wp-caption-text\">Een aangepast blok inclusief twee aangepaste metavelden.<\/figcaption><\/figure>\n<p>Je zult merken dat telkens als je de waarde van het veld in het blok verandert, de waarde in het corresponderende tekstveld in de zijbalk ook verandert.<\/p>\n<p>Vervolgens moeten we de PHP code maken die de HTML genereert die op de frontend wordt weergegeven.<\/p>\n<h4>Het blok weergeven aan de frontend<\/h4>\n<p>Open het PHP hoofdbestand opnieuw in je code editor en herschrijf de callback functie die de uitvoer van het blok genereert als volgt:<\/p>\n<pre><code class=\"language-php\">function meta_fields_metadata_block_block_init() {\n\tregister_block_type(\n\t\t__DIR__ . '\/build',\n\t\tarray(\n\t\t\t'render_callback' =&gt; 'meta_fields_metadata_block_render_callback',\n\t\t)\n\t);\n}\nadd_action( 'init', 'meta_fields_metadata_block_block_init' );\n\nfunction meta_fields_metadata_block_render_callback( $attributes, $content, $block ) {\n\t\n\t$book_title = get_post_meta( get_the_ID(), '_meta_fields_book_title', true );\n\t$book_author = get_post_meta( get_the_ID(), '_meta_fields_book_author', true );\n    \n\t$output = \"\";\n\n\tif( ! empty( $book_title ) ){\n\t\t$output .= '&lt;h3&gt;' . esc_html( $book_title ) . '&lt;\/h3&gt;';\n\t}\n\tif( ! empty( $book_author ) ){\n\t\t$output .= '&lt;p&gt;' . __( 'Book author: ' ) . esc_html( $book_author ) . '&lt;\/p&gt;';\n\t}\n\tif( strlen( $output ) &gt; 0 ){\n\t\treturn '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . $output . '&lt;\/div&gt;';\n\t} else {\n\t\treturn '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . '&lt;strong&gt;' . __( 'Sorry. No fields available here!' ) . '&lt;\/strong&gt;' . '&lt;\/div&gt;';\n\t}\n}<\/code><\/pre>\n<p>Deze code wijst zichzelf. Eerst gebruiken we <code>get_post_meta<\/code> om de waarden van de aangepaste metavelden op te halen. Dan gebruiken we die waarden om de content van het blok op te bouwen. Tenslotte geeft de callback functie de HTML van het blok terug.<\/p>\n<p>Het blok is klaar voor gebruik. We hebben de code in dit voorbeeld met opzet zo eenvoudig mogelijk gehouden, maar met behulp van de ingebouwde componenten van Gutenberg kun je meer geavanceerde blokken bouwen en het meeste halen uit de aangepaste metavelden van WordPress.<\/p>\n<figure id=\"attachment_142768\" aria-describedby=\"caption-attachment-142768\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142768 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-custom-meta-fields.jpg\" alt=\"Een aangepast blok inclusief verschillende metavelden.\" width=\"1796\" height=\"1260\"><figcaption id=\"caption-attachment-142768\" class=\"wp-caption-text\">Een aangepast blok inclusief verschillende metavelden.<\/figcaption><\/figure>\n<p>In ons voorbeeld hebben we <code>h3<\/code> en <code>p<\/code> elementen gebruikt om het blok voor de frontend te bouwen.<\/p>\n<p>Maar je kunt de gegevens op vele manieren weergeven. De volgende afbeelding toont een eenvoudige ongeordende lijst van metavelden.<\/p>\n<figure id=\"attachment_142770\" aria-describedby=\"caption-attachment-142770\" style=\"width: 1794px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142770 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-on-the-front-end.jpg\" alt=\"Een voorbeeldblok op de frontend.\" width=\"1794\" height=\"1132\"><figcaption id=\"caption-attachment-142770\" class=\"wp-caption-text\">Een voorbeeldblok op de frontend.<\/figcaption><\/figure>\n<p>Je vindt de volledige code van dit voorbeeld in <a href=\"https:\/\/gist.github.com\/carlodaniele\/d44ca1d76457fa6553f44ed863ecdbcd\">deze openbare gist<\/a>.<\/p>\n<h3>Een aangepast metavak toevoegen aan de zijbalk van het document<\/h3>\n<p>De tweede optie is om aangepaste metavelden aan berichten toe te voegen met een plugin die een instellingenpaneel genereert in de zijbalk van het document.<\/p>\n<p>Het proces is redelijk vergelijkbaar met het vorige voorbeeld, behalve dat we in dit geval geen blok nodig hebben om metadata te beheren. We maken een component om een paneel te genereren met een reeks regelaars in de Document sidebar volgens deze stappen:<\/p>\n<ol>\n<li><a href=\"#option-2-create-new-block\">Maak een nieuwe blokplugin met create-block<\/a><\/li>\n<li><a href=\"#option-2-register-custom-meta-box\">Registreer een aangepast metavak voor de Classic Editor<\/a><\/li>\n<li><a href=\"#option-2-register-custom-fields\">Registreer de aangepaste metavelden in het hoofdplugin-bestand via de functie register_post_meta()<\/a><\/li>\n<li><a href=\"#option-2-register-plugin\">Registreer een plugin in het bestand index.js<\/a><\/li>\n<li><a href=\"#option-2-build-component\">Bouw de component met behulp van ingebouwde Gutenberg componenten<\/a><\/li>\n<\/ol>\n<h4 id=\"option-2-create-new-block\">Maak een nieuwe blokplugin met de create-block tool<\/h4>\n<p>Om een nieuwe blokplugin te maken, volg je de stappen in de <a href=\"#create-a-custom-block-to-store-and-display-custom-meta-fields\">vorige paragraaf<\/a>. Je kunt een nieuwe plugin maken of de scripts bewerken die we in het vorige voorbeeld hebben gebouwd.<\/p>\n<h4 id=\"option-2-register-custom-meta-box\">Registreer aangepast metavak\u00a0 voor de Classic Editor<\/h4>\n<p>Vervolgens moet je een aangepast metavak registreren om achterwaartse compatibiliteit te garanderen voor WordPress websites die nog steeds de Classic Editor gebruiken. Het proces is hetzelfde als beschreven in de <a href=\"#add-a-meta-box-to-the-classic-editor\">vorige paragraaf<\/a>.<\/p>\n<h4 id=\"option-2-register-custom-fields\">Registreer de aangepaste metavelden in het hoofdbestand van de plugin<\/h4>\n<p>De volgende stap is het registreren van de aangepaste metavelden in het hoofdbestand van de plugin via de functie <code>register_post_meta()<\/code>. Ook hier kun je het <a href=\"#register-custom-meta-fields\">vorige voorbeeld<\/a> volgen.<\/p>\n<h4>Registreer een plugin in het\u00a0index.js\u00a0bestand<\/h4>\n<p>Als je de vorige stappen hebt uitgevoerd, is het tijd om een plugin te registreren in het <strong>index.js<\/strong> bestand om een aangepaste component te renderen.<\/p>\n<p>Voordat je de plugin registreert, maak je een <strong>components<\/strong> map aan in de <strong>src<\/strong> map van de plugin. Maak in de <strong>components<\/strong> map een nieuw <strong>MetaBox.js<\/strong> bestand aan. Je kunt elke naam kiezen waarvan je denkt dat die goed is voor je component. Zorg ervoor dat je de <a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react#naming\">best practice voor naamgeving<\/a> binnen React volgt.<\/p>\n<p>Voordat je verder gaat, installeer je de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/\">module<code>@wordpress\/plugins<\/code><\/a> vanuit je commandoregeltool.<\/p>\n<p>Stop het proces (mac), installeer de module en start het proces opnieuw:<\/p>\n<pre><code class=\"language-bash\">^C\nnpm install @wordpress\/plugins --save\nnpm start<\/code><\/pre>\n<p>Wanneer je klaar bent open je het <strong>index.js<\/strong> bestand\u00a0van je plugin en voeg de volgende code toe.<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport MetaBox from '.\/components\/MetaBox';<\/code><\/pre>\n<p>Deze code spreekt redelijk voor zich. We willen echter even stilstaan bij de twee <code>import<\/code> statements voor de lezers die geen geavanceerde React vaardigheden hebben.<\/p>\n<p>Met het eerste <code>import<\/code> statement hebben we de naam van de functie ingesloten tussen accolades. Bij het tweede <code>import<\/code> statement is de naam van de component niet tussen accolades ingesloten.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Een <code>import<\/code> statement zonder accolades wordt gebruikt om <strong>de standaardexport te importeren<\/strong>. Een <code>import<\/code> statement met accolades wordt gebruikt om <strong>een export met naam<\/strong> te importeren. Zie voor aanvullende details de volgende resources:<\/p>\n<ul>\n<li><a href=\"https:\/\/beta.reactjs.org\/learn\/importing-and-exporting-components\" target=\"_blank\" rel=\"noopener noreferrer\">Componenten importeren en exporteren<\/a><\/li>\n<li><a href=\"https:\/\/create-react-app.dev\/docs\/importing-a-component\/\" target=\"_blank\" rel=\"noopener noreferrer\">Een component importeren<\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/36795819\/when-should-i-use-curly-braces-for-es6-import\/36796281#36796281\" target=\"_blank\" rel=\"noopener noreferrer\">Wanneer moet ik accolades gebruiken voor ES6 import?<\/a><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>Registreer vervolgens je plugin:<\/p>\n<pre><code class=\"language-js\">registerPlugin( 'metadata-plugin', {\n\trender: MetaBox\n} );<\/code><\/pre>\n<p><code>registerPlugin<\/code> registreert simpelweg een plugin. De functie accepteert twee parameters:<\/p>\n<ul>\n<li>Een unieke string die de plugin identificeert<\/li>\n<li>Een object met plugininstellingen. Let op dat de property <code>render<\/code> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/0b37b3bc71e2c6f200781a53e11fddec4bc0b935\/packages\/plugins\/src\/api\/index.js#L138\">gespecificeerd<\/a> moet worden en een geldige functie moet zijn.<\/li>\n<\/ul>\n<h4 id=\"option-2-build-component\">Bouw het component met behulp van ingebouwde Gutenberg componenten<\/h4>\n<p>Het is tijd om ons React component te bouwen. Open het bestand <strong>MetaBox.js<\/strong> (of hoe je het ook genoemd hebt) en voeg de volgende importstatements toe:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li>De functie <code>compose<\/code> voert <strong>functiecompositie<\/strong> uit, wat betekent dat het resultaat van een functie wordt doorgegeven aan een andere functie. Voordat je <code>compose<\/code> kunt gebruiken, moet je mogelijk de bijbehorende module installeren:\n<pre><code class=\"language-bash\">npm install @wordpress\/compose --save<\/code><\/pre>\n<p>We zullen de functie <code>compose<\/code> straks in actie zien.<\/li>\n<li><code>withSelect<\/code> en <code>withDispatch<\/code> zijn twee <strong>higher-order componenten<\/strong> waarmee je gegevens van of naar een WordPress store kunt halen of verzenden. <code>withSelect<\/code> wordt gebruikt om van de staat afgeleide props te injecteren met behulp van geregistreerde <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#selectors\">selectors<\/a>, <code>withDispatch<\/code> wordt gebruikt om props te verzenden met behulp van geregistreerde <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#actions\">action creators<\/a>.<\/li>\n<li><code>PluginDocumentSettingPanel<\/code> rendert items in de Document Sidebar (zie de broncode <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">op Github<\/a>).<\/li>\n<\/ul>\n<p>Vervolgens maak je de component om het metaboxpaneel in de Document Sidebar weer te geven. Voeg in je <strong>MetaBox.js<\/strong> bestand de volgende code toe:<\/p>\n<pre><code class=\"language-jsx\">const MetaBox = ( { postType, metaFields, setMetaFields } ) =&gt; {\n\n\tif ( 'post' !== postType ) return null;\n\n\treturn(\n\t\t&lt;PluginDocumentSettingPanel \n\t\t\ttitle={ __( 'Book details' ) } \n\t\t\ticon=\"book\"\n\t\t\tinitialOpen={ false }\n\t\t&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_title }\n\t\t\t\t\tlabel={ __( \"Title\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_author }\n\t\t\t\t\tlabel={ __( \"Author\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_publisher }\n\t\t\t\t\tlabel={ __( \"Publisher\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;DateTimePicker\n\t\t\t\t\tcurrentDate={ metaFields._meta_fields_book_date }\n\t\t\t\t\tonChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n\t\t\t\t\t__nextRemoveHelpButton\n\t\t\t\t\t__nextRemoveResetButton\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t&lt;\/PluginDocumentSettingPanel&gt;\n\t);\n}\n\nconst applyWithSelect = withSelect( ( select ) =&gt; {\n\treturn {\n\t\tmetaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n\t\tpostType: select( 'core\/editor' ).getCurrentPostType()\n\t};\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n\treturn {\n\t\tsetMetaFields ( newValue ) {\n\t\t\tdispatch('core\/editor').editPost( { meta: newValue } )\n\t\t}\n\t}\n} );\n\nexport default compose([\n\tapplyWithSelect,\n\tapplyWithDispatch\n])(MetaBox);<\/code><\/pre>\n<p>Laten we deze code opsplitsen.<\/p>\n<ul>\n<li>Het <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/\"><code>PluginDocumentSettingPanel<\/code> element<\/a> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">rendert een nieuw paneel<\/a> in de Document zijbalk. We stellen de titel (&#8220;Book details&#8221;) en het pictogram in, en stellen <code>initialOpen<\/code> in op <code>false<\/code>, wat betekent dat het paneel aanvankelijk gesloten is.<\/li>\n<li>Binnen de <code>PluginDocumentSettingPanel<\/code> hebben we drie tekstvelden en een <code>DateTimePicker<\/code> element waarmee de gebruiker de publicatiedatum kan instellen.<\/li>\n<li><code>withSelect<\/code> geeft toegang tot de functie <code>select<\/code> die we gebruiken om <code>metaFields<\/code> en <code>postType<\/code> op te halen. <code>withDispatch<\/code> geeft toegang tot de functie <code>dispatch<\/code>, waarmee de metadatawaarden kunnen worden bijgewerkt.<\/li>\n<li>Tenslotte kunnen we met de <code>compose<\/code> functie onze component samenstellen met <code>withSelect<\/code> en <code>withDispatch<\/code> higher-order componenten. Dit geeft de component toegang tot de <code>metaFields<\/code> en <code>postType<\/code> properties en de <code>setMetaFields<\/code> functie.<\/li>\n<\/ul>\n<p>Sla je <strong>MetaBox.js<\/strong> bestand op en maak een nieuw bericht aan in je WordPress ontwikkelingswebsite en bekijk de zijbalk van het document. Je zou het nieuwe paneel <strong>Book details<\/strong>\u00a0moeten zien.<\/p>\n<figure id=\"attachment_142918\" aria-describedby=\"caption-attachment-142918\" style=\"width: 1851px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142918 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/book-details-panel.jpg\" alt=\"Een aangepast metaboxpaneel in Gutenberg.\" width=\"1851\" height=\"1617\"><figcaption id=\"caption-attachment-142918\" class=\"wp-caption-text\">Een aangepast metaboxpaneel in Gutenberg.<\/figcaption><\/figure>\n<p>Voer nu je tests uit. Stel de waarden van je aangepaste metavelden in en sla het bericht op. Herlaad dan de pagina en controleer of de waarden die je hebt ingevoerd op hun plaats staan.<\/p>\n<p>Voeg het blok toe dat we in de vorige sectie hebben gebouwd en controleer of alles goed werkt.<\/p>\n<h3>Een aangepaste zijbalk toevoegen om metadata van berichten te beheren<\/h3>\n<p>Als je een groot aantal aangepaste metavelden hebt om toe te voegen aan je berichten of aangepaste berichttypes, kun je ook een Custom Settings Sidebar maken, speciaal voor je plugin.<\/p>\n<p>Het proces lijkt sterk op het vorige voorbeeld, dus als je de stappen hebt begrepen die in de vorige sectie zijn besproken, zul je geen moeite hebben met het bouwen van een Custom Sidebar voor Gutenberg.<\/p>\n<p>Nogmaals:<\/p>\n<ol>\n<li><a href=\"#option-3-create-new-block\">Maak een nieuwe blokplugin met create-block<\/a><\/li>\n<li><a href=\"#option-3-register-custom-meta-box\">Registreer een aangepast metavak voor de Classic Editor<\/a><\/li>\n<li><a href=\"#option-3-register-custom-fields\">Registreer de aangepaste metavelden in het hoofdpluginbestand via de functie register_post_meta()<\/a><\/li>\n<li><a href=\"#option-3-register-plugin\">Registreer een plugin in het bestand index.js<\/a><\/li>\n<li><a href=\"#option-3-build-component\">Bouw de component met behulp van ingebouwde Gutenberg componenten<\/a><\/li>\n<\/ol>\n<h4 id=\"#option-3-create-new-block\">Maak een nieuwe blokplugin met de create-block tool<\/h4>\n<p>Nogmaals, om een nieuwe blokplugin te maken volg je de hierboven besproken stappen. Je kunt een nieuwe plugin maken of de in de vorige voorbeelden gebouwde scripts bewerken.<\/p>\n<h4 id=\"#option-3-register-custom-meta-box\">Registreer een aangepast metabox voor de Classic Editor<\/h4>\n<p>Registreer nu een aangepast metabox om achterwaartse compatibiliteit te garanderen voor WordPress websites die nog steeds de Classic Editor gebruiken. Het proces is hetzelfde als beschreven in de vorige paragraaf.<\/p>\n<h4 id=\"#option-3-register-custom-fields\">Registreer de aangepaste metavelden in het hoofdbestand van de plugin<\/h4>\n<p>Registreer de aangepaste metavelden in het hoofdpluginbestand via de functie <code>register_post_meta()<\/code>.<\/p>\n<h4>Registreer een plugin\u00a0 in het\u00a0index.js\u00a0bestand<\/h4>\n<p>Maak nu een leeg <strong>CustomSidebar.js<\/strong> bestand in je <strong>componenten<\/strong> map.<\/p>\n<p>Als je dat gedaan hebt, verander je je <strong>index.js<\/strong> bestand als volgt:<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport CustomSidebar from '.\/components\/CustomSidebar';\n\/\/ import MetaBox from '.\/components\/MetaBox';\n\nregisterPlugin( 'metadata-block', {\n    render: CustomSidebar\n} );<\/code><\/pre>\n<p>Met bovenstaande code importeren we eerst de <code>CustomSidebar<\/code> component, daarna vertellen we de <code>registerPlugin<\/code> functie om de nieuwe component te renderen.<\/p>\n<h4 id=\"#option-3-build-component\">Bouw het component met behulp van ingebouwde Gutenberg componenten<\/h4>\n<p>Open vervolgens het <strong>CustomSidebar.js<\/strong> bestand en voeg de volgende dependencies toe:<\/p>\n<pre><code class=\"language-php\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\nimport { PanelBody, PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<p>Je zou moeten opmerken dat we twee nieuwe componenten importeren:<\/p>\n<ul>\n<li><code>PluginSidebar<\/code> voegt een pictogram toe aan de Gutenberg Toolbar dat, wanneer erop geklikt wordt, een zijbalk weergeeft inclusief de content die in het <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\"><code>&lt;PluginSidebar \/&gt;<\/code> element<\/a> is gewikkeld (Het component is ook gedocumenteerd <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/569241a3e1b7d0cc0567fccb92b1b57eb1b5b9c5\/packages\/edit-site\/src\/components\/sidebar-edit-mode\/plugin-sidebar\/index.js\">op GitHub<\/a>).<\/li>\n<li><code>PluginSidebarMoreMenuItem<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar-more-menu-item\/\">geeft een menu item weer<\/a> onder Plugins in <strong>more menu<\/strong> dropdown en kan worden gebruikt om de bijbehorende <code>PluginSidebar<\/code> component te activeren (zie ook <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a7e2895829c16ecd77a5ba22d84f1dee1cfb0977\/packages\/edit-post\/src\/components\/header\/plugin-sidebar-more-menu-item\/index.js\">op GitHub<\/a>).<\/li>\n<\/ul>\n<p>Nu kun je je aangepaste component bouwen:<\/p>\n<pre><code class=\"language-jsx\">const CustomSidebar = ( { postType, metaFields, setMetaFields } ) =&gt; {\n        \n    if ( 'post' !== postType ) return null;\n\n    return (\n        &lt;&gt;\n            &lt;PluginSidebarMoreMenuItem \n                target=\"metadata-sidebar\" \n                icon=\"book\"\n            &gt;\n                Metadata Sidebar\n            &lt;\/PluginSidebarMoreMenuItem&gt;\n            &lt;PluginSidebar \n                name=\"metadata-sidebar\" \n                icon=\"book\" \n                title=\"My Sidebar\"\n            &gt;\n                &lt;PanelBody title=\"Book details\" initialOpen={ true }&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_title }\n                            label={ __( \"Title\" ) }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_author }\n                            label={ __(\"Author\", \"textdomain\") }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_publisher }\n                            label={ __(\"Publisher\", \"textdomain\") }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;DateTimePicker\n                            currentDate={ metaFields._meta_fields_book_date }\n                            onChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n                            __nextRemoveHelpButton\n                            __nextRemoveResetButton\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/PluginSidebar&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<p>De laatste stap is de componentcompositie met <code>withSelect<\/code> en <code>withDispatch<\/code> higher-order componenten:<\/p>\n<pre><code class=\"language-js\">const applyWithSelect = withSelect( ( select ) =&gt; {\n    return {\n        metaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n        postType: select( 'core\/editor' ).getCurrentPostType()\n    };\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n    return {\n        setMetaFields ( newValue ) {\n            dispatch('core\/editor').editPost( { meta: newValue } )\n        }\n    }\n} );\n\nexport default compose([\n    applyWithSelect,\n    applyWithDispatch\n])(CustomSidebar);<\/code><\/pre>\n<p>Sla je wijzigingen op en bekijk dan de editor interface. Als je de <strong>Options<\/strong> dropdown opent, zie je een nieuw item <strong>Metadata Sidebar<\/strong> onder de sectie <strong>Plugins<\/strong>. Door op het nieuwe item te klikken activeer je je gloednieuwe aangepaste zijbalk.<\/p>\n<figure id=\"attachment_143176\" aria-describedby=\"caption-attachment-143176\" style=\"width: 1858px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143176 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/plugin-sidebar-more-menu-item.jpg\" alt=\"De PluginSidebarMoreMenuItem component voegt een menu item toe onder Options - Plugins.\" width=\"1858\" height=\"1096\"><figcaption id=\"caption-attachment-143176\" class=\"wp-caption-text\">De PluginSidebarMoreMenuItem component voegt een menu item toe onder Options &#8211; Plugins.<\/figcaption><\/figure>\n<p>Hetzelfde gebeurt als je klikt op het boekicoontje in de rechterbovenhoek.<\/p>\n<figure id=\"attachment_143175\" aria-describedby=\"caption-attachment-143175\" style=\"width: 1860px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143175 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-sidebar-open.jpg\" alt=\"De zijbalk met plugininstellingen.\" width=\"1860\" height=\"1198\"><figcaption id=\"caption-attachment-143175\" class=\"wp-caption-text\">De zijbalk met plugininstellingen.<\/figcaption><\/figure>\n<p>Ga nu terug naar je ontwikkelingswebsite, en maak een nieuw blogbericht aan. Vul je metavelden in, en voeg het blok toe aan het canvas van de editor. Het zou dezelfde metawaarden moeten bevatten die je in je aangepaste zijbalk hebt ingevoerd.<\/p>\n<p>Sla het bericht op en bekijk de pagina op de frontend. Je zou je kaart moeten zien met de boektitel, auteur, uitgever en publicatiedatum.<\/p>\n<p>Je vindt de volledige code van dit artikel in deze <a href=\"https:\/\/gist.github.com\/carlodaniele\/05d4e8b6d982a4ef30840015fbdfb35f\">openbare gist<\/a>.<\/p>\n<h2>Verder lezen<\/h2>\n<p>In dit artikel hebben we meerdere onderwerpen behandeld, van selectors tot higher-order componenten en nog veel meer. We hebben ook de belangrijkste resources die we hebben gebruikt als referentie in het artikel opgenomen.<\/p>\n<p>Maar als je dieper in die onderwerpen wilt duiken, kun je misschien ook de volgende aanvullende resources bekijken:<\/p>\n<h3>Gutenberg Documentatie en Offici\u00eble WordPress Hulpbronnen<\/h3>\n<ul>\n<li>Plugin Handboek \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\" target=\"_blank\" rel=\"noopener noreferrer\">Custom Meta Boxes<\/a><\/li>\n<li>Plugin Handboek \/ \u00a0<a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/managing-post-metadata\/\" target=\"_blank\" rel=\"noopener noreferrer\">Managing Post Metadata<\/a><\/li>\n<li>Handleidingen \/ \u00a0<a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/\" target=\"_blank\" rel=\"noopener noreferrer\">Meta Boxes<\/a><\/li>\n<li>Handleidingen \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/plugin-sidebar-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">Plugin Sidebar<\/a><\/li>\n<li>Blok-editor handboek \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\">PluginSidebar<\/a><\/li>\n<li>Pakketreferentie \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/\">@wordpress\/compose<\/a><\/li>\n<li>Pakketten \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#comparison-with-redux\" target=\"_blank\" rel=\"noopener noreferrer\">Comparison with Redux<\/a><\/li>\n<li>Pakketten \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withdispatch\">metDispatch<\/a><\/li>\n<li>Pakketten \/ data \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#dispatch\">dispatch<\/a><\/li>\n<li>Pakketten \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withselect\">withSelect<\/a><\/li>\n<li>Pakketten \/ data \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#select\">select<\/a><\/li>\n<\/ul>\n<h3>Meer offici\u00eble resources<\/h3>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\" target=\"_blank\" rel=\"noopener noreferrer\">Higher-Order Components<\/a> in React<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-7-standard-patterns#action-creators\" target=\"_blank\" rel=\"noopener noreferrer\">Action creators<\/a> in Redux<\/li>\n<li><a href=\"https:\/\/redux.js.org\/usage\/deriving-data-selectors\" target=\"_blank\" rel=\"noopener noreferrer\">Deriving Data with Selectors<\/a> in Redux<\/li>\n<\/ul>\n<h3>Aanvullende resources van de community<\/h3>\n<ul>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2019\/fantastic-hooks-and-where-to-use-them\" target=\"_blank\" rel=\"noopener noreferrer\">Fantastic hooks and where to use them<\/a> (door Darren Ethier)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Data Series Overview and Introduction<\/a> (door Darren Ethier)<\/li>\n<li><a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react\" target=\"_blank\" rel=\"noopener noreferrer\">Airbnb React\/JSX Style Guide<\/a><\/li>\n<li><a href=\"https:\/\/www.robinwieruch.de\/react-higher-order-components\/\">React Higher-Order Components (HOC&#8217;s)<\/a> (door Robin Wieruch)<\/li>\n<li><a href=\"https:\/\/www.educative.io\/answers\/function-composition-in-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">Function composition in JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\" target=\"_blank\" rel=\"noopener noreferrer\">Requesting data in Gutenberg with getEntityRecords<\/a>\u00a0(door Ryan Welcher)<\/li>\n<\/ul>\n<h3>Nuttige leessuggesties van de Kinsta website<\/h3>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">Wat is React.js? Een overzicht van deze populaire JavaScript bibliotheek<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/react-best-practices\/\">React: de best practices om je codeerskills te verbeteren in 2026<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/react-componenten-bibliotheek\/\">React UI componentenbibliotheken<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-workflow\/\">Zo maak je een effectieve WordPress workflow voor developers<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ontwikkelaar-salaris\/\">Salaris voor WordPress developers: het gemiddelde, plus hoe je die van jou verhoogt<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-javascript\/\">Wat is JavaScript? Een uitleg over de meest populaire scripttaal op het web<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/fouten-in-javascript\/\">De definitieve handleiding voor het omgaan met fouten in JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/javascript-bibliotheken\/\">De 40 beste JavaScript bibliotheken en frameworks voor 2026<\/a><\/li>\n<\/ul>\n<h2>Samenvatting<\/h2>\n<p>In dit derde artikel in onze serie over Gutenberg blokdevelopment hebben we nieuwe geavanceerde onderwerpen behandeld die het in eerdere artikelen geschetste beeld over <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">statische<\/a> en <a href=\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\">dynamische blokontwikkeling<\/a> completer moeten maken.<\/p>\n<p>Je zou nu moeten kunnen profiteren van het potentieel van aangepaste velden in Gutenberg en meer geavanceerde en functionele WordPress websites moeten kunnen maken.<\/p>\n<p>Maar er is meer. Met de vaardigheden die je hebt opgedaan in onze artikelen over blokdevelopment, zou je ook een goed idee moeten hebben van hoe je React componenten buiten WordPress kunt ontwikkelen. Gutenberg is immers een op React gebaseerde SPA.<\/p>\n<p>En nu is het jouw beurt! Heb jij al Gutenberg blokken gemaakt die aangepaste metavelden gebruiken? Deel je creaties met ons in de comments hieronder.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aangepaste velden bieden een manier om extra informatie toe te wijzen aan websitecontent. Deze stukjes informatie worden meestal metadata genoemd. Metadata is informatie over informatie. In &#8230;<\/p>\n","protected":false},"author":36,"featured_media":49673,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[892,903],"class_list":["post-49672","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-ontwikkeling","topic-wordpress-tips"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Zo voeg je metaboxes en aangepaste velden toe aan berichten in Gutenberg<\/title>\n<meta name=\"description\" content=\"Gutenberg verandert de manier waarop we metaboxes en aangepaste velden in WordPress gebruiken. In dit artikel leer je hoe je als een pro in de blokeditor metadata beheert.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo voeg je metaboxes en aangepaste velden toe aan berichten in Gutenberg\" \/>\n<meta property=\"og:description\" content=\"Gutenberg verandert de manier waarop we metaboxes en aangepaste velden in WordPress gebruiken. In dit artikel leer je hoe je als een pro in de blokeditor metadata beheert.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-25T11:11:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-08T09:09:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Gutenberg verandert de manier waarop we metaboxes en aangepaste velden in WordPress gebruiken. In dit artikel leer je hoe je als een pro in de blokeditor metadata beheert.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"25 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Zo voeg je metaboxes en aangepaste velden toe aan berichten in Gutenberg\",\"datePublished\":\"2023-01-25T11:11:37+00:00\",\"dateModified\":\"2023-06-08T09:09:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/\"},\"wordCount\":4164,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/\",\"name\":\"Zo voeg je metaboxes en aangepaste velden toe aan berichten in Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"datePublished\":\"2023-01-25T11:11:37+00:00\",\"dateModified\":\"2023-06-08T09:09:46+00:00\",\"description\":\"Gutenberg verandert de manier waarop we metaboxes en aangepaste velden in WordPress gebruiken. In dit artikel leer je hoe je als een pro in de blokeditor metadata beheert.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress ontwikkeling\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo voeg je metaboxes en aangepaste velden toe aan berichten in Gutenberg\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"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.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo voeg je metaboxes en aangepaste velden toe aan berichten in Gutenberg","description":"Gutenberg verandert de manier waarop we metaboxes en aangepaste velden in WordPress gebruiken. In dit artikel leer je hoe je als een pro in de blokeditor metadata beheert.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo voeg je metaboxes en aangepaste velden toe aan berichten in Gutenberg","og_description":"Gutenberg verandert de manier waarop we metaboxes en aangepaste velden in WordPress gebruiken. In dit artikel leer je hoe je als een pro in de blokeditor metadata beheert.","og_url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-01-25T11:11:37+00:00","article_modified_time":"2023-06-08T09:09:46+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Gutenberg verandert de manier waarop we metaboxes en aangepaste velden in WordPress gebruiken. In dit artikel leer je hoe je als een pro in de blokeditor metadata beheert.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Carlo Daniele","Geschatte leestijd":"25 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Zo voeg je metaboxes en aangepaste velden toe aan berichten in Gutenberg","datePublished":"2023-01-25T11:11:37+00:00","dateModified":"2023-06-08T09:09:46+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/"},"wordCount":4164,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/","url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/","name":"Zo voeg je metaboxes en aangepaste velden toe aan berichten in Gutenberg","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","datePublished":"2023-01-25T11:11:37+00:00","dateModified":"2023-06-08T09:09:46+00:00","description":"Gutenberg verandert de manier waarop we metaboxes en aangepaste velden in WordPress gebruiken. In dit artikel leer je hoe je als een pro in de blokeditor metadata beheert.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WordPress ontwikkeling","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/"},{"@type":"ListItem","position":3,"name":"Zo voeg je metaboxes en aangepaste velden toe aan berichten in Gutenberg"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"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.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/nl\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/49672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=49672"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/49672\/revisions"}],"predecessor-version":[{"id":50846,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/49672\/revisions\/50846"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49672\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49672\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49672\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49672\/translations\/jp"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49672\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49672\/translations\/dk"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49672\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49672\/translations\/se"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49672\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49672\/translations\/fr"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49672\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/49673"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=49672"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=49672"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=49672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}