{"id":61668,"date":"2025-01-20T09:23:52","date_gmt":"2025-01-20T08:23:52","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=61668&#038;preview=true&#038;preview_id=61668"},"modified":"2025-01-24T08:24:32","modified_gmt":"2025-01-24T07:24:32","slug":"gutenberg-plugin","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/","title":{"rendered":"Zo maak je een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor"},"content":{"rendered":"<p>In de loop der jaren hebben we Gutenberg vanuit vele perspectieven verkend. We hebben de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">functionaliteiten van de editor<\/a> ontleed, vergeleken met die van <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-vs-elementor\/\">andere paginabouwers<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">statische<\/a> en <a href=\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\">dynamische<\/a> custom blokken gebouwd en <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/\">nog veel meer<\/a>.<\/p>\n<p>Met de nieuwste versies van WordPress kun je dankzij nieuwe features en tools gemakkelijker complexe layouts maken door de functionaliteit van de Block Editor te verrijken en te verbeteren zonder dat je custom blokken hoeft te bouwen.<\/p>\n<p>Dankzij de introductie van <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/\">blokpatterns<\/a> en ontwikkelaarstools zoals de <a href=\"https:\/\/kinsta.com\/nl\/blog\/block-bindings-api\/\">Block Bindings API<\/a>, zijn er minder gebruikssituaties voor custom blokken. Je kunt nu complexe blokstructuren maken, metadata waarden in je inhoud injecteren en een groot deel van je workflow automatiseren zonder de interface van de editor te verlaten. Kortom, vandaag de dag kun je met WordPress complexe sites maken met net zo weinig klikken als ooit tevoren.<\/p>\n<p>Het toevoegen van custom besturingselementen en tools aan de editor kan helpen om het maken van content soepeler te laten verlopen. Je kunt bijvoorbeeld een paneel toevoegen aan de Post zijbalk om functionaliteit toe te voegen of een custom zijbalk maken om meerdere metavelden te beheren.<\/p>\n<p>Laten we aan de slag gaan!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Hoe je een plugin voor een Blok Editor maakt zonder een custom blok te maken<\/h2>\n<p>WordPress biedt een handige <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">opdrachtregeltool<\/a> waarmee je een lokale Node.js ontwikkelomgeving kunt installeren met alle benodigde bestanden en afhankelijkheden om een custom blok te maken. Typ gewoon <code>npx @wordpress\/create-block<\/code> in de opdrachtregeltool, wacht een paar seconden en je bent klaar.<\/p>\n<p>Het maken van een custom blok is echter niet nodig als je alleen een zijbalk of een eenvoudig instellingenpaneel hoeft toe te voegen. In dat geval moet je een Gutenberg plugin maken.<\/p>\n<p>WordPress biedt geen tools om het proces van het maken van een plugin voor Gutenberg te automatiseren, dus je moet het handmatig doen. Maar maak je niet te veel zorgen. Het proces is relatief eenvoudig en wij zullen je er doorheen leiden. Dit zijn de stappen die je moet volgen:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"7\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Download en installeer een lokale ontwikkelomgeving<\/h3>\n<p><strong>Eerst het belangrijkste:<\/strong> Hoewel je je Gutenberg plugin in een externe omgeving kunt ontwikkelen, kan het handiger voor je zijn om lokaal een ontwikkel WordPress website te installeren. Je kunt elke omgeving gebruiken die gebaseerd is op PHP en MySQL. Van de <a href=\"https:\/\/kinsta.com\/blog\/mamp-alternative\/\">vele alternatieven<\/a> die er zijn, raden we <a href=\"https:\/\/kinsta.com\/nl\/devkinsta\/features\/\">DevKinsta<\/a> aan. Het is gratis, volledig uitgerust, eenvoudig te gebruiken en 100% compatibel met Kinsta hosting.<\/p>\n<p>Zodra je je ontwikkelsite hebt ingesteld, ben je klaar om een Gutenberg Block Editor plugin te maken.<\/p>\n<h3>2. Download en installeer Node.js en npm<\/h3>\n<p>Download Node.js van <a href=\"https:\/\/nodejs.org\/\">nodejs.org<\/a> en installeer het op je computer. Hiermee installeer je ook npm, de Node package manager.<\/p>\n<p>Zodra je dit hebt gedaan, start je je command line tool en voer je <code>node -v<\/code> en <code>npm -v<\/code> uit. Je zou de ge\u00efnstalleerde versies van Node.js en npm moeten zien.<\/p>\n<figure id=\"attachment_190001\" aria-describedby=\"caption-attachment-190001\" style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190001 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/node-v.png\" alt=\"Controleer node en npm versies\" width=\"1302\" height=\"308\"><figcaption id=\"caption-attachment-190001\" class=\"wp-caption-text\">Controleer node en npm versies<\/figcaption><\/figure>\n<h3>3. Maak de map van je plugin<\/h3>\n<p>Maak een nieuwe map onder <code>wp-content\/plugins<\/code> en hernoem deze <code>my-sidebar-plugin<\/code> of iets dergelijks. Onthoud dat deze naam de naam van je plugin moet weergeven.<\/p>\n<p>Open de terminal, navigeer naar de map van de plugin en initialiseer een npm project met het volgende commando:<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Dit zal een basis <code>package.json<\/code> bestand aanmaken.<\/p>\n<figure id=\"attachment_190003\" aria-describedby=\"caption-attachment-190003\" style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190003 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/npm-init-y.png\" alt=\"Maak een basis package.json bestand\" width=\"1302\" height=\"886\"><figcaption id=\"caption-attachment-190003\" class=\"wp-caption-text\">Maak een basis package.json bestand<\/figcaption><\/figure>\n<h3>4. Dependencies installeren<\/h3>\n<p>Typ het volgende commando in je opdrachtregeltool:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/plugins @wordpress\/scripts --save-dev<\/code><\/pre>\n<ul>\n<li><code>@wordpress\/plugins<\/code> installeert de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/\">module <code>plugins<\/code> voor WordPress<\/a>.<\/li>\n<li><code>@wordpress\/scripts<\/code> installeert een verzameling <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noopener noreferrer\">herbruikbare scripts<\/a> voor de ontwikkeling van WordPress.<\/li>\n<\/ul>\n<p>Er zou een nieuwe map <code>node_modules<\/code> moeten zijn toegevoegd aan je project.<\/p>\n<p>Open nu je <code>package.json<\/code> en werk <code>scripts<\/code> als volgt bij:<\/p>\n<pre><code class=\"language-json\">{\n\t\"name\": \"my-sidebar-plugin\",\n\t\"version\": \"1.0.0\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"build\": \"wp-scripts build\",\n\t\t\"start\": \"wp-scripts start\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"description\": \"\",\n\t\"devDependencies\": {\n\t\t\"@wordpress\/plugins\": \"^7.14.0\",\n\t\t\"@wordpress\/scripts\": \"^30.7.0\"\n\t}\n}<\/code><\/pre>\n<p>Nu kun je de map van de plugin controleren:<\/p>\n<figure id=\"attachment_190006\" aria-describedby=\"caption-attachment-190006\" style=\"width: 1862px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190006 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/package-json.png\" alt=\"Het project van de plugin in Visual Studio Code\" width=\"1862\" height=\"998\"><figcaption id=\"caption-attachment-190006\" class=\"wp-caption-text\">Het project van de plugin in Visual Studio Code<\/figcaption><\/figure>\n<h3>5. Maak de plugin bestanden<\/h3>\n<p>Maak in de map van je plugin een nieuw <code>.php<\/code> bestand aan en geef het dezelfde naam als je map. In ons voorbeeld is dat <code>my-sidebar-plugin.php<\/code>.<\/p>\n<p>Open het bestand en plak de volgende code om de plugin op de server te registreren:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: My Sidebar Plugin\n *\/\n\nfunction my_sidebar_plugin_register_script() {\n\twp_enqueue_script(\n\t\t'my_sidebar_plugin_script',\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\n\t\tarray( 'wp-plugins', 'wp-edit-post' ),\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );<\/code><\/pre>\n<p>Maak vervolgens een map <code>src<\/code> aan in de map van je plugin. Maak daarin een nieuw <code>index.js<\/code> bestand met de volgende code:<\/p>\n<pre><code class=\"language-js\">import { registerPlugin } from '@wordpress\/plugins';\nimport { PluginSidebar } from '@wordpress\/edit-post';\n\nconst MyPluginSidebar = () =&gt; (\n\t&lt;PluginSidebar\n\t\tname=\"my-sidebar-plugin\"\n\t\ttitle=\"My Sidebar Plugin\"\n\t&gt;\n\t\t&lt;div&gt;\n\t\t\tHello my friends!\n\t\t&lt;\/div&gt;\n\t&lt;\/PluginSidebar&gt;\n);\n\nregisterPlugin( 'my-sidebar-plugin', {\n\trender: MyPluginSidebar,\n} );<\/code><\/pre>\n<h3>6. Compileer de code<\/h3>\n<p>Het enige dat nog ontbreekt is de build. Ga terug naar de opdrachtregel en voer het volgende commando uit:<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n<p>Dit maakt een map <code>build<\/code> met de gecomprimeerde bestanden van het project.<\/p>\n<figure id=\"attachment_190008\" aria-describedby=\"caption-attachment-190008\" style=\"width: 2120px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190008 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/plugin-project-vsc.png\" alt=\"De projectmap van de plugin in VSC\" width=\"2120\" height=\"998\"><figcaption id=\"caption-attachment-190008\" class=\"wp-caption-text\">De projectmap van de plugin in VSC<\/figcaption><\/figure>\n<p>Als je klaar bent, navigeer je naar het <strong>Plugins<\/strong> scherm in je WordPress dashboard en activeer je de plugin. Maak een nieuw bericht of pagina en klik op het plugin-icoon in de rechterbovenhoek om je custom zijbalk weer te geven.<\/p>\n<figure id=\"attachment_190010\" aria-describedby=\"caption-attachment-190010\" style=\"width: 1976px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190010 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/gutenberg-custom-sidebar.png\" alt=\"Een aangepaste zijbalk in de Post Editor\" width=\"1976\" height=\"552\"><figcaption id=\"caption-attachment-190010\" class=\"wp-caption-text\">Een aangepaste zijbalk in de Post Editor<\/figcaption><\/figure>\n<h3>7. Ontwikkelen en bouwen<\/h3>\n<p>We hebben het bestand <code>index.js<\/code> in de map <code>src<\/code> geplaatst. Het gebruik van een <code>src<\/code> map is een gebruikelijke conventie bij het ontwikkelen van WordPress plugins en thema&#8217;s, waardoor je code gemakkelijker te begrijpen is voor andere ontwikkelaars.<\/p>\n<p>Door je JS code in de map <code>src<\/code> te plaatsen, kun je het <code>npm start<\/code> of <code>npm run start<\/code> commando gebruiken om een ontwikkelomgeving te starten die de scripts controleert en de code automatisch hercompileert als dat nodig is. Als je klaar bent met ontwikkelen, zal het <code>npm build<\/code> of <code>npm run build<\/code> commando de JavaScript code compileren in de <code>build<\/code> map, die de code bevat die geoptimaliseerd is voor productie.<\/p>\n<p>Laten we nu het geleerde in de praktijk brengen en de plugin aanpassen die we in de vorige sectie hebben gemaakt om een nieuw paneel toe te voegen aan de zijbalk van de Post Editor voor het beheren van custom velden.<\/p>\n<h2>Een extra zijbalk maken om metavelden voor berichten te beheren<\/h2>\n<p>Ons doel is om een custom zijbalk te maken die een paneel bevat met een enkel tekstveld voor het toevoegen en bewerken van een custom metaveld.<\/p>\n<p>Voordat we hierop ingaan, moeten we vermelden dat we een custom metavak kunnen gebruiken om hetzelfde resultaat te bereiken. Met WordPress 6.7 <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-7\/#meta-boxes-in-the-post-editor\">hebben meta vakjes een upgrade gekregen<\/a> en zijn nu volledig compatibel met de Block Editor, dus je vraagt je misschien af waarom je meta velden beheert vanuit een custom zijbalk in plaats van een meta vak. De reden is dat je met een sidebar gebruik kunt maken van ingebouwde componenten. Dit helpt je om vriendelijkere interfaces te bouwen met krachtige besturingselementen die ook vertrouwd moeten zijn voor gebruikers.<\/p>\n<p>Dit gezegd hebbende, volgt hier het proces voor het maken van een custom zijbalk waarmee je custom velden kunt beheren vanuit de editor.<\/p>\n<h3><code>my-sidebar-plugin.php<\/code><\/h3>\n<h4>Stap 1: Registreer berichtmeta<\/h4>\n<p>Eerst moet je het metaveld registreren. Voeg de volgende code toe aan het hoofdbestand van de plugin:<\/p>\n<pre><code class=\"language-php\">function my_sidebar_plugin_register_meta() {\n\tregister_post_meta(\n\t\t'post',\n\t\t'meta_fields_book_title', \n\t\tarray(\n\t\t\t'show_in_rest' =&gt; true,\n\t\t\t'type' =&gt; 'string',\n\t\t\t'single' =&gt; true,\n\t\t\t'sanitize_callback' =&gt; 'sanitize_text_field',\n\t\t\t'label' =&gt; __( 'Book title', 'my-sidebar-plugin' ),\n\t\t\t'auth_callback' =&gt; function() { \n\t\t\t\treturn current_user_can( 'edit_posts' );\n\t\t\t}\n\t\t)\n\t);\n}\nadd_action( 'init', 'my_sidebar_plugin_register_meta' );<\/code><\/pre>\n<p>De functie <code>register_post_meta<\/code> accepteert drie argumenten:<\/p>\n<ul>\n<li>Het berichttype waarvoor een metasleutel moet worden geregistreerd. Als je een lege string instelt, wordt de metasleutel voor alle bestaande berichttypen geregistreerd.<\/li>\n<li>De metasleutel die moet worden geregistreerd. Merk op dat we geen underscore gebruiken aan het begin van de metasleutel. De metasleutel vooraf laten gaan door een underscore zou het custom veld verbergen, zodat je het misschien wilt gebruiken in een metabox. Het verbergen van het custom veld zou echter voorkomen dat het metaveld wordt gebruikt via de Block Bindings API in de inhoud van het bericht.<\/li>\n<li>Een array van argumenten. Merk op dat je <code>show_in_rest<\/code> moet instellen op <code>true<\/code>. Hierdoor wordt het metaveld blootgesteld aan de Rest API en kunnen we het metaveld binden aan blokattributen. Zie de <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\" target=\"_blank\" rel=\"noopener noreferrer\">functieverwijzing<\/a> voor de andere attributen.<\/li>\n<\/ul>\n<h4>Stap 2: Registreer het metaveld<\/h4>\n<p>Om achterwaartse compatibiliteit voor je plugin te garanderen, moet je een custom metavak registreren zodat gebruikers je custom velden kunnen beheren, zelfs als ze de klassieke editor gebruiken. Voeg de volgende code toe aan het PHP bestand van je plugin:<\/p>\n<pre><code class=\"language-php\">\/**\n * Register meta box\n * \n * @link https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\n * \n *\/\nfunction my_sidebar_plugin_register_meta_box(){\n\tadd_meta_box(\n\t\t'book_meta_box', \/\/ Unique ID\n\t\t__( 'Book details' ), \/\/ Box title\n\t\t'my_sidebar_plugin_meta_box_callback', \/\/ Content callback\n\t\tarray( 'post' ), \/\/ Post types\n\t\t'advanced', \/\/ context\n\t\t'default', \/\/ priority\n\t\tarray('__back_compat_meta_box' =&gt; true) \/\/ hide the meta box in Gutenberg\n\t );\n}\nadd_action( 'add_meta_boxes', 'my_sidebar_plugin_register_meta_box' );<\/code><\/pre>\n<p>Declareer nu de callback die het formulier opbouwt:<\/p>\n<pre><code class=\"language-php\">\/**\n * Build meta box form\n * \n * @link https:\/\/developer.wordpress.org\/reference\/functions\/wp_nonce_field\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/\n * \n *\/\nfunction my_sidebar_plugin_meta_box_callback( $post ){\n\twp_nonce_field( 'my_sidebar_plugin_save_meta_box_data', 'my_sidebar_plugin_meta_box_nonce' );\n\t$title = get_post_meta( $post-&gt;ID, 'meta_fields_book_title', true );\n\t?&gt;\n\t&lt;div class=\"inside\"&gt;\n\t\t&lt;p&gt;&lt;strong&gt;&lt;?php echo __( 'Book title', 'my-sidebar-plugin' ); ?&gt;&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;\n\t&lt;\/div&gt;\n\t&lt;?php\n}<\/code><\/pre>\n<p>Schrijf vervolgens de functie om je metavelden op te slaan in de database:<\/p>\n<pre><code class=\"language-php\">\/**\n * Save metadata\n * \n * @link https:\/\/developer.wordpress.org\/reference\/functions\/wp_verify_nonce\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/current_user_can\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/sanitize_text_field\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/update_post_meta\/\n * \n *\/\nfunction my_sidebar_plugin_save_meta_box_data( $post_id ) {\n\tif ( ! isset( $_POST['my_sidebar_plugin_meta_box_nonce'] ) )\n\t\treturn;\n\tif ( ! wp_verify_nonce( $_POST['my_sidebar_plugin_meta_box_nonce'], 'my_sidebar_plugin_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\tif ( ! isset( $_POST['meta_fields_book_title'] ) )\n\t\treturn;\n\n\t$title = sanitize_text_field( $_POST['meta_fields_book_title'] );\n\n\tupdate_post_meta( $post_id, 'meta_fields_book_title', $title );\n}\nadd_action( 'save_post', 'my_sidebar_plugin_save_meta_box_data' );<\/code><\/pre>\n<p>We zullen niet dieper op deze code ingaan omdat dit buiten het bestek van dit artikel valt, maar je kunt alle informatie die je nodig hebt vinden door de links in de headers van de functie te volgen.<\/p>\n<p>Als laatste moeten we het bestand <code>index.js<\/code> van onze plugin enqueuen:<\/p>\n<pre><code class=\"language-php\">function my_sidebar_plugin_register_script() {\n\twp_enqueue_script(\n\t\t'my_sidebar_plugin_script',\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\n\t\tarray( 'wp-plugins', 'wp-edit-post' ),\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );<\/code><\/pre>\n<p>Dat is alles voor het PHP bestand. Vervolgens moeten we de JS-code schrijven.<\/p>\n<h3><code>index.js<\/code><\/h3>\n<p>Je <code>index.js<\/code> staat in de map <code>src<\/code>, waar je je JS-bestanden opslaat tijdens de ontwikkelingsfase.<\/p>\n<p>Open je <code>index.js<\/code> en voeg de volgende <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\"><code>import<\/code> declaraties<\/a> toe:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { registerPlugin } from '@wordpress\/plugins';\nimport { PluginSidebar } from '@wordpress\/editor';\nimport { PanelBody, PanelRow, TextControl } from '@wordpress\/components';\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';<\/code><\/pre>\n<p>Je hebt deze bronnen nodig om de sidebar te bouwen met de vereiste besturingselementen.<\/p>\n<p>Vervolgens moet je de sidebar component bouwen:<\/p>\n<pre><code class=\"language-js\">const MyPluginSidebar = () =&gt; {\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\n\tconst bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';\n\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, meta_fields_book_title: newValue } );\n\t};\n\n\tif ( postType === 'post' ) {\n\t\treturn (\n\t\t\t&lt;PluginSidebar\n\t\t\t\tname=\"my-sidebar-plugin\"\n\t\t\t\ticon=\"book\"\n\t\t\t\ttitle=\"My plugin sidebar\"\n\t\t\t&gt;\n\t\t\t\t&lt;PanelBody title=\"Book details\" initialOpen={ true }&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;TextControl \n\t\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\t\tlabel={ __( \"Book title\" ) }\n\t\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t&lt;\/PluginSidebar&gt;\n\t\t);\n\t}\n};\n\nregisterPlugin( 'my-sidebar-plugin', {\n\trender: MyPluginSidebar,\n} );<\/code><\/pre>\n<p>De functie <code>registerPlugin<\/code> registreert de plugin en rendert het component met de naam <code>MyPluginSidebar<\/code>.<\/p>\n<p>De functie <code>MyPluginSidebar<\/code> declareert een paar constanten en geeft de JSX-code van het component terug.<\/p>\n<ul>\n<li><code>useSelect<\/code> is een custom hook voor het ophalen van props van geregistreerde selectors. We hebben deze gebruikt om het huidige berichttype op te halen. Zie ook <a href=\"https:\/\/developer.wordpress.org\/news\/2024\/03\/how-to-work-effectively-with-the-useselect-hook\/\" target=\"_blank\" rel=\"noopener noreferrer\">deze blogpost<\/a> van de WordPress Developer Blog.<\/li>\n<li><code>useEntityProp<\/code> retourneert een array van metavelden en een setterfunctie om nieuwe metawaarden in te stellen. Zie ook de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-core-data\/#useentityprop\" target=\"_blank\" rel=\"noopener noreferrer\">online referentie<\/a>.<\/li>\n<li><code>updateBookTitleMetaValue<\/code> is een event handler die de waarde van het <code>bookTitle<\/code> metaveld opslaat.<\/li>\n<\/ul>\n<p>We hebben een paar ingebouwde componenten gebruikt om onze zijbalk te bouwen:<\/p>\n<ul>\n<li><code>PluginSidebar<\/code> Hiermee kun je items toevoegen aan de werkbalk van de Post- of Site Editor pagina&#8217;s. (Zie <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\" target=\"_blank\" rel=\"noopener noreferrer\">de referentie van de component<\/a>.)<\/li>\n<li><code>PanelBody<\/code> maakt een inklapbare container die je open of dicht kunt klappen. (Zie <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/panel\/\" target=\"_blank\" rel=\"noopener noreferrer\">de referentie van de component<\/a>.)<\/li>\n<li><code>PanelRow<\/code> is een algemene container voor rijen binnen een <code>PanelBody<\/code>. (Zie <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/panel\/\">de referentie van de component<\/a>.)<\/li>\n<li><code>TextControl<\/code> is een eenregelig veld dat kan worden gebruikt voor vrije tekstinvoer. (Zie <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/text-control\/\">de referentie van de component<\/a>.)<\/li>\n<\/ul>\n<p>Voer nu het commando <code>npm run build<\/code> uit, activeer de plugin en maak een nieuw bericht. Er zou een nieuw boek-icoon moeten verschijnen in de bovenste zijbalk. Als je op dat pictogram klikt, verschijnt de zijbalk van je plugin.<\/p>\n<figure id=\"attachment_190019\" aria-describedby=\"caption-attachment-190019\" style=\"width: 1976px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190019 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/plugin-sidebar.png\" alt=\"Een custom zijbalk met een metaveld\" width=\"1976\" height=\"558\"><figcaption id=\"caption-attachment-190019\" class=\"wp-caption-text\">Een custom zijbalk met een metaveld<\/figcaption><\/figure>\n<p>Wat als je geen nieuwe zijbalk nodig hebt, maar je custom veld wilt weergeven in de ingebouwde zijbalk voor berichten? Dan hoef je alleen maar <code>PluginSidebar<\/code> te vervangen door <code>PluginDocumentSettingPanel<\/code>. Dit is je nieuwe <code>index.js<\/code> bestand:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { registerPlugin } from '@wordpress\/plugins';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { PanelBody, PanelRow, TextControl } from '@wordpress\/components';\n\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';\n\nconst MyPluginSidebar = () =&gt; {\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\n\tconst bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';\n\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, meta_fields_book_title: newValue } );\n\t};\n\n\tif ( postType === 'post' ) {\n\t\treturn (\n\t\t\t&lt;PluginDocumentSettingPanel \n\t\t\t\tname=\"my-sidebar-plugin\"\n\t\t\t\ttitle=\"Book details\" \n\t\t\t\tclassName=\"my-sidebar-plugin\"\n\t\t\t&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;TextControl \n\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\tlabel={ __( \"Book title\" ) }\n\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;\/PluginDocumentSettingPanel&gt;\n\t\t);\n\t}\n};\n\nregisterPlugin( 'my-sidebar-plugin', {\n\trender: MyPluginSidebar,\n} );<\/code><\/pre>\n<p>De volgende afbeelding toont het resultaat.<\/p>\n<figure id=\"attachment_190023\" aria-describedby=\"caption-attachment-190023\" style=\"width: 1914px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190023 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/default-sidebar-panel.png\" alt=\"Een custom instellingenpaneel in de Post Sidebar\" width=\"1914\" height=\"1418\"><figcaption id=\"caption-attachment-190023\" class=\"wp-caption-text\">Een custom instellingenpaneel in de Post Sidebar<\/figcaption><\/figure>\n<h2>Een use case: een block pattern override om je workflow te automatiseren<\/h2>\n<p>Je kunt nu een waarde toevoegen voor het custom veld en deze zal beschikbaar zijn via de Block Bindings API voor gebruik met blokattributen. Je kunt bijvoorbeeld een Paragraph blok aan je inhoud toevoegen en het custom veld binden aan het <code>content<\/code> attribuut van de paragraaf.<\/p>\n<figure id=\"attachment_190026\" aria-describedby=\"caption-attachment-190026\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190026 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/block-attributes.png\" alt=\"Metavelden binden aan blokattributen\" width=\"1912\" height=\"1420\"><figcaption id=\"caption-attachment-190026\" class=\"wp-caption-text\">Metavelden binden aan blokattributen<\/figcaption><\/figure>\n<p>Je bent vrij om de waarde van je custom veld te wijzigen en deze wijzigingen worden automatisch toegepast op de inhoud van je alinea.<\/p>\n<p>Als je je afvraagt of je nog meer kunt doen met custom velden en blokbindingen, dan is het antwoord ja! Met Block Patterns en Block Bindings API kun je het hele proces voor het maken van content automatiseren.<\/p>\n<p>Om een idee te krijgen, maak je een patroon met ten minste een kop of een alinea. In dit voorbeeld maken we een blokpatroon met een Columns blok, een Image, een Heading en een paar Row blokken met elk twee alinea&#8217;s.<\/p>\n<figure id=\"attachment_190040\" aria-describedby=\"caption-attachment-190040\" style=\"width: 2116px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190040 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/building-a-pattern.png\" alt=\"Een Columns blok met een afbeelding, een koptekst en twee rijen\" width=\"2116\" height=\"1076\"><figcaption id=\"caption-attachment-190040\" class=\"wp-caption-text\">Een Columns blok met een afbeelding, een koptekst en twee rijen<\/figcaption><\/figure>\n<p>Als je tevreden bent met je layout, selecteer je de wrapping-elementen en maak je een gesynchroniseerde pattern.<\/p>\n<figure id=\"attachment_190035\" aria-describedby=\"caption-attachment-190035\" style=\"width: 1334px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190035 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/create-pattern.png\" alt=\"Pattern maken\" width=\"1334\" height=\"1184\"><figcaption id=\"caption-attachment-190035\" class=\"wp-caption-text\">Pattern maken<\/figcaption><\/figure>\n<p>Voeg een naam en een categorie toe voor het blokpattern en zorg ervoor dat het gesynchroniseerd wordt.<\/p>\n<figure id=\"attachment_190041\" aria-describedby=\"caption-attachment-190041\" style=\"width: 1386px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190041 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/add-new-pattern.png\" alt=\"Nieuwe pattern toevoegen\" width=\"1386\" height=\"994\"><figcaption id=\"caption-attachment-190041\" class=\"wp-caption-text\">Nieuwe pattern toevoegen<\/figcaption><\/figure>\n<p>Als je de pattern vervolgens in de Post Editor hebt gemaakt, selecteer je het en klik je op <strong>Edit original <\/strong>in de werkbalk van het blok. Je kunt ook naar het gedeelte <b>Patterns <\/b>van de Site Editor navigeren en de pattern vinden onder <strong>My patterns <\/strong>of in de patterncategorie die je eerder hebt ingesteld.<\/p>\n<p>Open de Code Editor en zoek het blok dat je aan je custom veld wilt binden. Voeg in het scheidingsteken van het blok de volgende code toe:<\/p>\n<pre><code class=\"language-json\">&lt;!-- wp:heading {\n\t\"metadata\":{\n\t\t\"bindings\":{\n\t\t\t\"content\":{\n\t\t\t\t\"source\":\"core\/post-meta\",\n\t\t\t\t\"args\":{\n\t\t\t\t\t\"key\":\"meta_fields_book_title\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n} --&gt;<\/code><\/pre>\n<figure id=\"attachment_190042\" aria-describedby=\"caption-attachment-190042\" style=\"width: 1594px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190042 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/block-pattern-in-code-editor.png\" alt=\"Het blokpattern in de Code Editor\" width=\"1594\" height=\"1258\"><figcaption id=\"caption-attachment-190042\" class=\"wp-caption-text\">Het blokpattern in de Code Editor<\/figcaption><\/figure>\n<p>Sla de pattern op en maak een nieuw artikel. Voeg de pattern toe aan je inhoud en stel een waarde in voor het custom veld. Je zou moeten zien dat die waarde automatisch wordt toegepast op je pattern.<\/p>\n<figure id=\"attachment_190044\" aria-describedby=\"caption-attachment-190044\" style=\"width: 2120px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190044 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/bound-blocks-in-a-synced-block-pattern.png\" alt=\"Een gebonden Heading in een gesynchroniseerde pattern\" width=\"2120\" height=\"1226\"><figcaption id=\"caption-attachment-190044\" class=\"wp-caption-text\">Een gebonden Heading in een gesynchroniseerde pattern<\/figcaption><\/figure>\n<p>Nu kun je met deze plugin spelen. Dankzij custom velden en de Block Bindings API kun je meer velden en besturingselementen toevoegen om je layouts automatisch te vullen.<\/p>\n<h2>Samenvatting<\/h2>\n<p>Het ontwikkelen van een custom blok kan een uitdaging zijn. Maar moet je een blok bouwen als je meer kunt doen met een blokpattern?<\/p>\n<p>Met de vooruitgang in blokpatterns en de introductie van krachtige ontwikkelfeatures, zoals de Block Bindings API, is het niet langer nodig om custom blokken te maken om geavanceerde en functionele websites te bouwen. Een eenvoudige plugin en een blokpattern kunnen effectief een aanzienlijk deel van je workflow automatiseren.<\/p>\n<p>Deze tutorial liet zien hoe je functionaliteit kunt toevoegen aan de WordPress Post Editor door middel van een plugin. Wat we in dit artikel hebben behandeld is echter slechts een tipje van de sluier van wat je kunt bereiken met de robuuste features die WordPress nu biedt.<\/p>\n<p>Heb je deze features al verkend en features toegevoegd aan de WordPress Editor? Zo ja, deel dan gerust je ervaringen en inzichten in de comments hieronder.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In de loop der jaren hebben we Gutenberg vanuit vele perspectieven verkend. We hebben de functionaliteiten van de editor ontleed, vergeleken met die van andere paginabouwers, &#8230;<\/p>\n","protected":false},"author":36,"featured_media":61669,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[876,892],"class_list":["post-61668","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-tech-tips","topic-wordpress-ontwikkeling"],"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 maak je een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor<\/title>\n<meta name=\"description\" content=\"Leer hoe je gemakkelijker complexe layouts kunt maken door een Gutenberg plugin te bouwen om de functionaliteit van de Block Editor te verbeteren.\" \/>\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\/gutenberg-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo maak je een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor\" \/>\n<meta property=\"og:description\" content=\"Leer hoe je gemakkelijker complexe layouts kunt maken door een Gutenberg plugin te bouwen om de functionaliteit van de Block Editor te verbeteren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/\" \/>\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=\"2025-01-20T08:23:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-24T07:24:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Leer hoe je gemakkelijker complexe layouts kunt maken door een Gutenberg plugin te bouwen om de functionaliteit van de Block Editor te verbeteren.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor-1024x512.png\" \/>\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=\"16 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Zo maak je een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor\",\"datePublished\":\"2025-01-20T08:23:52+00:00\",\"dateModified\":\"2025-01-24T07:24:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/\"},\"wordCount\":2240,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/\",\"name\":\"Zo maak je een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"datePublished\":\"2025-01-20T08:23:52+00:00\",\"dateModified\":\"2025-01-24T07:24:32+00:00\",\"description\":\"Leer hoe je gemakkelijker complexe layouts kunt maken door een Gutenberg plugin te bouwen om de functionaliteit van de Block Editor te verbeteren.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#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 maak je een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor\"}]},{\"@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 maak je een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor","description":"Leer hoe je gemakkelijker complexe layouts kunt maken door een Gutenberg plugin te bouwen om de functionaliteit van de Block Editor te verbeteren.","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\/gutenberg-plugin\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo maak je een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor","og_description":"Leer hoe je gemakkelijker complexe layouts kunt maken door een Gutenberg plugin te bouwen om de functionaliteit van de Block Editor te verbeteren.","og_url":"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2025-01-20T08:23:52+00:00","article_modified_time":"2025-01-24T07:24:32+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Leer hoe je gemakkelijker complexe layouts kunt maken door een Gutenberg plugin te bouwen om de functionaliteit van de Block Editor te verbeteren.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor-1024x512.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Carlo Daniele","Geschatte leestijd":"16 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Zo maak je een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor","datePublished":"2025-01-20T08:23:52+00:00","dateModified":"2025-01-24T07:24:32+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/"},"wordCount":2240,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/","url":"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/","name":"Zo maak je een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","datePublished":"2025-01-20T08:23:52+00:00","dateModified":"2025-01-24T07:24:32+00:00","description":"Leer hoe je gemakkelijker complexe layouts kunt maken door een Gutenberg plugin te bouwen om de functionaliteit van de Block Editor te verbeteren.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#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 maak je een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor"}]},{"@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\/61668","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=61668"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/61668\/revisions"}],"predecessor-version":[{"id":61701,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/61668\/revisions\/61701"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61668\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61668\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61668\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61668\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61668\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61668\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61668\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61668\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61668\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/61669"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=61668"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=61668"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=61668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}