{"id":62232,"date":"2025-04-02T10:30:32","date_gmt":"2025-04-02T08:30:32","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=62232&#038;preview=true&#038;preview_id=62232"},"modified":"2025-04-16T10:40:50","modified_gmt":"2025-04-16T08:40:50","slug":"uitbreiden-wp-core-blokken","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/","title":{"rendered":"Zo kun je WordPress core blokken uitbreiden met Blocks API"},"content":{"rendered":"<p>In 2018 introduceerde WordPress met <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-0\/\">versie 5.0<\/a> de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">Gutenberg editor<\/a>, een nieuwe manier om pagina&#8217;s en berichten op te bouwen met behulp van &#8220;blokken&#8221;. In het begin waren deze blokken vrij basic, maar in de loop der jaren <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-6\/#other-improvements-to-the-block-editor\">zijn ze ge\u00ebvolueerd<\/a> om meer flexibiliteit en een betere bewerkingservaring te bieden.<\/p>\n<p>Toch zijn er momenten waarop een blok niet helemaal doet wat je nodig hebt. Misschien wil je bepaalde features verwijderen, nieuwe toevoegen, standaard een bepaalde stijl toepassen of bepaalde instellingen gemakkelijker toegankelijk maken. In dit soort gevallen lijkt het misschien een optie om helemaal opnieuw <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">een custom blok te maken<\/a>, maar &#8211; laten we eerlijk zijn &#8211; dat is overkill voor kleine aanpassingen. Zou het niet eenvoudiger zijn als je gewoon blokken die al bestaan zou kunnen aanpassen?<\/p>\n<p>Dat is waar de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blocks API<\/a> je kan helpen. Dit artikel legt uit hoe je blokken van de WordPress core kunt uitbreiden met behulp van de Blocks API, met praktische voorbeelden die je kunt gebruiken in echte projecten.<\/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>De WordPress Blocks API begrijpen<\/h2>\n<p>De WordPress Blocks API is de basis van de blokken-editor, waarmee <a href=\"https:\/\/kinsta.com\/nl\/blog\/soorten-developers\/\">ontwikkelaars<\/a> blokken kunnen maken, wijzigen en uitbreiden. De API biedt verschillende manieren om met blokken te werken. Je kunt:<\/p>\n<ul>\n<li><strong>Blokinstellingen wijzigen<\/strong> &#8211; Blokattributen, standaardwaarden en gedragingen wijzigen.<\/li>\n<li><strong>Blokondersteuning toevoegen of verwijderen<\/strong> &#8211; Eigenschappen zoals typografie, kleuren en spati\u00ebring in- of uitschakelen.<\/li>\n<li><strong>Aangepaste besturingselementen injecteren<\/strong> &#8211; Nieuwe opties toevoegen in het paneel met blokinstellingen.<\/li>\n<li><strong>Variaties op blokken maken<\/strong> &#8211; Voorgeconfigureerde versies van bestaande blokken maken om het maken van inhoud te versnellen.<\/li>\n<\/ul>\n<p>Elk blok in WordPress, of het nu een <a href=\"https:\/\/wordpress.org\/documentation\/article\/Paragraph-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Paragraph<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Image<\/a> of <a href=\"https:\/\/wordpress.org\/documentation\/article\/button-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Button<\/a> blok is, wordt gedefinieerd door een set attributen en instellingen die zijn opgeslagen in een <code>block.json<\/code> bestand. Dit bestand bevat <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/\">metadata<\/a> over het blok, waaronder de naam, categorie, standaard attributen en de functies die het ondersteunt.<\/p>\n<p>Met WordPress kun je deze waarden wijzigen met <a href=\"https:\/\/kinsta.com\/php\/\">PHP<\/a> of <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-javascript\/\">JavaScript<\/a>, maar dit artikel legt uit hoe je <a href=\"https:\/\/learn.wordpress.org\/lesson\/filter-hooks\/\" target=\"_blank\" rel=\"noopener noreferrer\">filterhooks<\/a> in de Blocks API kunt gebruiken. Dit zorgt ervoor dat je wijzigingen worden geregistreerd op de server zonder dat je extra JavaScript bestanden hoeft <a href=\"https:\/\/kinsta.com\/nl\/blog\/wp-enqueue-scripts\/\">aan te roepen<\/a>.<\/p>\n<p>Als je bijvoorbeeld bepaalde functies van een blok wilt in- of uitschakelen, kun je dat het beste doen met het <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-hooks\/#hooks-vs-actions-vs-filters\">filter<\/a> <code>register_block_type_args<\/code> in PHP. Met deze methode kun je blokinstellingen dynamisch aanpassen zonder het bestand <code>block.json<\/code> direct te wijzigen.<\/p>\n<h2>Blok ondersteuning wijzigen<\/h2>\n<p>WordPress blokken worden geleverd met voorgedefinieerde steunen, die de opties van de editor regelen. Sommige blokken, zoals het <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Image blok<\/a> (<code>core\/image<\/code>), hebben standaard <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-3\/#enhanced-duotone-filter\">duotone filters<\/a> ingeschakeld, waarmee gebruikers kleuroverlays kunnen toepassen.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/image-block-duotone.png\" alt=\"WordPress Image blok met Duotone filter.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">WordPress Image blok met Duotone filter.<\/figcaption><\/figure>\n<p>Het <a href=\"https:\/\/wordpress.org\/documentation\/article\/media-text-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Media &#038; Text blok<\/a> (<code>core\/media-text<\/code>) ondersteunt duotoon echter niet out of the box, ook al stelt het gebruikers in staat om een afbeelding in te voegen. Dit betekent dat je wel een duotoon filter kunt toepassen op een losstaand afbeeldingsblok, maar niet wanneer je een afbeelding in een Media &#038; Text blok plaatst.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/media-text-block.png\" alt=\"WordPress Media &#038; Text blok zonder Duotone ondersteuning.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Media &#038; Text blok zonder Duotone ondersteuning.<\/figcaption><\/figure>\n<p>Omdat het Media &#038; Text blok een afbeelding kan bevatten, is het zinvol om duotone filters in te schakelen. We kunnen dit doen door de <code>supports<\/code> array aan te passen en de juiste CSS selector op te geven zodat het filter correct wordt toegepast. We kunnen het inschakelen met het <code>register_block_type_args<\/code> filter in PHP.<\/p>\n<p>Voeg de volgende code toe aan het bestand <code>functions.php<\/code> van je thema:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Als je dit toevoegt aan het <code>functions.php<\/code> bestand van je thema, kun je dit het beste doen in een <strong>child thema<\/strong> om te voorkomen dat je wijzigingen verloren gaan wanneer het thema wordt bijgewerkt.<\/p>\n<p>Als je een <strong>Kinsta gebruiker<\/strong> bent, raden we je ook aan om dit te testen in een <strong>testomgeving<\/strong> voordat je het toepast op je live site. Dit zorgt ervoor dat alles correct werkt zonder de productie te be\u00efnvloeden.<\/p>\n<\/aside>\n\n<pre><code class=\"language-php\">function enable_duotone_for_media_text_block($args, $block_type) {\n\t\n\t\/\/ Only modify the Media & Text block\n\tif ( 'core\/media-text' === $block_type ) {\n\t\t$args['supports'] ??= [];\n\t\t$args['supports']['filter'] ??= [];\n\t\t$args['supports']['filter']['duotone'] = true;\n\n\t\t$args['selectors'] ??= [];\n\t\t$args['selectors']['filter'] ??= [];\n\t\t$args['selectors']['filter']['duotone'] = '.wp-block-media-text .wp-block-media-text__media';\n\t}\n\n\treturn $args;\n}\nadd_filter('register_block_type_args', 'enable_duotone_for_media_text_block', 10, 2);<\/code><\/pre>\n<p>De bovenstaande code schakelt het duotone filter in binnen de <code>supports<\/code> array en definieert de juiste CSS selector om het duotone effect toe te passen op afbeeldingen binnen het Media &#038; Text blok. De functie <code>add_filter()<\/code> gebruikt <code>10<\/code> als prioriteit (wanneer het filter wordt uitgevoerd) en <code>2<\/code> om het aantal doorgegeven argumenten op te geven (<code>$args<\/code>, <code>$block_type<\/code>).<\/p>\n<p>Als je het bestand opslaat en opnieuw laadt, zou je de <strong>Duotone<\/strong> regelaars beschikbaar moeten zien in het <strong>Filters<\/strong> gedeelte.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/duotone-added-media-text.png\" alt=\"Duotone filter ingeschakeld voor het Media &#038; Text blok.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Duotone filter ingeschakeld.<\/figcaption><\/figure>\n<p>Duotoon inschakelen voor het blok Media &#038; Text met <code>register_block_type_args<\/code> is een effectieve manier om het gedrag van blokken dynamisch aan te passen. WordPress biedt echter nog een andere methode voor het wijzigen van blokinstellingen: <strong>het overschrijven van blok metadata<\/strong> met behulp van <code>block_type_metadata<\/code>.<\/p>\n<p>Met beide benaderingen kun je blokken aanpassen, maar ze werken in verschillende stadia van het blokregistratieproces.<\/p>\n<p>Laten we bijvoorbeeld zeggen dat we het <a href=\"https:\/\/wordpress.org\/documentation\/article\/Paragraph-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Paragraph blok<\/a> (<code>core\/paragraph<\/code>) willen aanpassen zodat het alleen marge-aanpassingen ondersteunt en opvulling uitschakelt. Een manier om dit te doen is door <code>register_block_type_args<\/code> te gebruiken:<\/p>\n<pre><code class=\"language-php\">function modify_paragraph_spacing_args($args, $block_type) {\n    if ($block_type === 'core\/paragraph') {\n        $args['supports']['spacing'] = [\n            'margin' =&gt; true,\n            'padding' =&gt; false\n        ];\n    }\n    return $args;\n}\nadd_filter('register_block_type_args', 'modify_paragraph_spacing_args', 10, 2);<\/code><\/pre>\n<p>Deze methode werkt in de meeste gevallen goed, maar omdat het blok wordt aangepast nadat het al is geregistreerd, kan het soms worden overschreven door andere <a href=\"https:\/\/kinsta.com\/blog\/wordpress-plugin\/\">plugins<\/a> of <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-een-wordpress-thema\/\">thema&#8217;s<\/a> die hetzelfde blok later in het proces aanpassen.<\/p>\n<p>Een meer gestructureerde aanpak in dit geval zou kunnen zijn om de metadata van het blok direct te overschrijven met <code>block_type_metadata<\/code>:<\/p>\n<pre><code class=\"language-php\">function mytheme_modify_paragraph_spacing($metadata) {\n    if ($metadata['name'] === 'core\/paragraph') {\n        $metadata['supports']['spacing'] = [\n            'margin' =&gt; true,\n            'padding' =&gt; false\n        ];\n    }\n    return $metadata;\n}\nadd_filter('block_type_metadata', 'mytheme_modify_paragraph_spacing');<\/code><\/pre>\n<p>Geen van beide benaderingen is per definitie beter dan de andere &#8211; het hangt er gewoon vanaf wanneer je het blok wilt wijzigen en hoe persistent je de wijziging wilt hebben.<\/p>\n<h2>Blokstijlen registreren<\/h2>\n<p>Veel WordPress blokken hebben voorgedefinieerde stijlen die gebruikers kunnen selecteren in de editor. Een goed voorbeeld is het <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Image blok<\/a> (<code>core\/image<\/code>), dat standaard een <strong>afgeronde<\/strong> stijl bevat. De standaard afgeronde hoeken zijn echter vaak te extreem, waardoor de afbeelding meer op een ovaal lijkt dan op een netjes gestileerd element.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/image-block-rounded.png\" alt=\"Standaard afgeronde stijl voor het blok Afbeelding.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Standaard afgeronde stijl.<\/figcaption><\/figure>\n<p>In plaats van het handmatig aanpassen van de randradius voor elke afbeelding, is een betere aanpak om de afgeronde stijl aan te passen zodat deze een meer verfijnde hoekradius toepast &#8211; misschien door een subtiele <a href=\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/\">schaduw<\/a> toe te voegen voor een moderne look. Op deze manier kunnen gebruikers gewoon op een knop klikken om een goed ontworpen stijl toe te passen zonder dat ze elke keer handmatig de instellingen hoeven aan te passen.<\/p>\n<p>Laten we de stijl <b>Rounded <\/b>in het Image blok als voorbeeld nemen en deze aanpassen zodat de hoeken licht afgerond zijn in plaats van overdreven gebogen en er een subtiele schaduw wordt toegevoegd voor een meer gepolijste look.<\/p>\n<p>Omdat de blok-editor blokstijlen kan registreren en verwijderen, kunnen we de standaard <b>Rounded <\/b>stijl verwijderen en vervangen door een aangepaste versie.<\/p>\n<p>Zo doe je dat:<\/p>\n<pre><code class=\"language-php\">function modify_image_block_rounded_style() {\n    \/\/ Remove the default \"Rounded\" style\n    unregister_block_style( 'core\/image', 'rounded' );\n\n    \/\/ Register a new \"Rounded\" style with custom CSS\n    register_block_style(\n        'core\/image',\n        array(\n            'name'         =&gt; 'rounded',\n            'label'        =&gt; __( 'Rounded', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-image.is-style-rounded img {\n                    border-radius: 20px; \/* Adjust this value *\/\n                    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \/* Optional shadow *\/\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'modify_image_block_rounded_style' );<\/code><\/pre>\n<p>De code vervangt de standaard overdreven afgeronde stijl door een verfijnde versie die <code>border-radius: 20px;<\/code> toepast voor zachtere hoeken en <code>box-shadow<\/code> voor een subtiele lift.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/adjust-rounded-img-block.png\" alt=\"Verfijnde ronde stijl met subtiele schaduw.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Verfijnde afgeronde stijl.<\/figcaption><\/figure>\n<h3>Een extern CSS bestand gebruiken in plaats van inline stijlen<\/h3>\n<p>Hoewel <a href=\"https:\/\/kinsta.com\/nl\/blog\/css-best-practices\/#2-inline-css-vs-external-css-vs-internal-css\">inline stijlen<\/a> goed werken voor eenvoudige stijlen, is het niet ideaal voor de onderhoudbaarheid. Een betere aanpak is om stijlen te defini\u00ebren in een extern CSS bestand en dit in plaats daarvan te enqueuen.<\/p>\n<p>Om dit te doen, maak je een nieuw CSS bestand, bijvoorbeeld <code>custom-block-styles.css<\/code>, en voeg je dit toe:<\/p>\n<pre><code class=\"language-css\">\/* Custom Rounded Image Block Style *\/\n.wp-block-image.is-style-rounded img {\n    border-radius: 20px; \/* Adjusted rounded corners *\/\n    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \/* Subtle shadow *\/\n}<\/code><\/pre>\n<p>Enqueue vervolgens het CSS bestand in <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function enqueue_custom_block_styles() {\n    wp_enqueue_style(\n        'custom-block-styles',\n        get_template_directory_uri() . '\/css\/custom-block-styles.css',\n        array(),\n        '1.0'\n    );\n}\nadd_action('wp_enqueue_scripts', 'enqueue_custom_block_styles');\nadd_action('enqueue_block_editor_assets', 'enqueue_custom_block_styles');<\/code><\/pre>\n<p>In plaats van een inline stijl te gebruiken, kun je nu de stijl registreren zonder <a href=\"https:\/\/kinsta.com\/nl\/blog\/css-best-practices\/\">CSS<\/a> direct in PHP in te sluiten:<\/p>\n<pre><code class=\"language-php\">register_block_style(\n    'core\/image',\n    array(\n        'name'  =&gt; 'rounded',\n        'label' =&gt; __( 'Rounded', 'your-text-domain' ),\n        'style_handle' =&gt; 'custom-block-styles'\n    )\n);<\/code><\/pre>\n<p>Op deze manier kun je stijlen aanpassen zonder PHP aan te raken.<\/p>\n<h2>Blokvariaties registreren<\/h2>\n<p>Met <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">blokvariaties<\/a> kun je vooraf gedefinieerde versies van een blok maken met aangepaste instellingen, waardoor het voor gebruikers gemakkelijker wordt om met \u00e9\u00e9n klik consistente ontwerpen toe te passen. In plaats van elke keer handmatig de instellingen van een blok aan te passen, kun je met een variatie een blok invoegen waarop de juiste attributen, stijlen of configuraties al zijn toegepast.<\/p>\n<p>Sommige WordPress core blokken werken op deze manier. Het <a href=\"https:\/\/wordpress.org\/documentation\/article\/embed-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Embed blok<\/a> is niet \u00e9\u00e9n blok &#8211; het is een verzameling variaties voor verschillende platforms zoals <a href=\"https:\/\/wordpress.org\/documentation\/article\/youtube-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">YouTube<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/Twitter-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter<\/a> en <a href=\"https:\/\/wordpress.org\/documentation\/article\/Spotify-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Spotify<\/a>. Het <a href=\"https:\/\/wordpress.org\/documentation\/article\/Row-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Row blok<\/a> en het <a href=\"https:\/\/wordpress.org\/documentation\/article\/stack-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Stack blok<\/a> zijn ook slechts variaties van het <a href=\"https:\/\/wordpress.org\/documentation\/article\/group-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Group blok<\/a>, elk met verschillende layout instellingen.<\/p>\n<p>Deze aanpak houdt de dingen modulair, waardoor WordPress op maat gemaakte ervaringen kan bieden terwijl er gebruik wordt gemaakt van een gedeelde onderliggende structuur.<\/p>\n<h3>Een Testimonial variant van het Quote blok maken<\/h3>\n<p>Hoewel WordPress geen specifiek Testimonial blok heeft, kan het <a href=\"https:\/\/wordpress.org\/documentation\/article\/quote-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Quote blok<\/a> (<code>core\/quote<\/code>) worden aangepast om dat doel te dienen. In plaats van gebruikers handmatig een afbeelding te laten toevoegen, de tekst uit te lijnen en alles op te maken, kunnen we een Testimonial variant van het Quote blok defini\u00ebren.<\/p>\n<p>Deze variant bevat automatisch een Image blok, een Quote blok en twee Paragraph blokken voor de naam van de persoon en het bedrijf. Dit zorgt ervoor dat elke testimonial dezelfde gestructureerde opmaak heeft zonder dat er extra aanpassingen nodig zijn.<\/p>\n<p>Om een blokvariatie in WordPress te registreren, gebruiken we <code>registerBlockVariation()<\/code> in JavaScript. Omdat blokvariaties aan de kant van de client worden afgehandeld, moeten we een JavaScript bestand enqueue maken dat onze aangepaste Testimonial variatie registreert.<\/p>\n<p>Om dit te implementeren, maak je een JavaScript bestand (zoals <code>custom-block-variations.js<\/code>) dat de Testimonial variatie van het Quote blok definieert. Je kunt dit bestand maken in de <code>assets\/js\/<\/code> map van je thema en de volgende code toevoegen:<\/p>\n<pre><code class=\"language-js\">wp.domReady(() =&gt; {\n    wp.blocks.registerBlockVariation(\n        'core\/quote',\n        {\n            name: 'testimonial',\n            title: 'Testimonial',\n            description: 'A variation of the Quote block for testimonials.',\n            category: 'text',\n            attributes: {\n                className: 'is-style-testimonial',\n            },\n            innerBlocks: [\n                ['core\/image', { align: 'center', width: 100, height: 100 }],\n                ['core\/quote'],\n                ['core\/paragraph', { placeholder: 'Name', align: 'center', fontSize: 'medium', className: 'testimonial-name' }],\n                ['core\/paragraph', { placeholder: 'Company \/ Role', align: 'center', fontSize: 'small', className: 'testimonial-company' }]\n            ],\n            scope: ['inserter'],\n        }\n    );\n\n    \/\/ Inject inline styles for the editor preview\n    const style = document.createElement('style');\n    style.innerHTML = `\n        .wp-block-quote.is-style-testimonial {\n            background-color: #f9f9f9;\n            padding: 24px;\n            border: none !important;\n            border-radius: 8px;\n            text-align: center;\n            font-size: 1.2em;\n            font-style: normal;\n            color: #333;\n            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .wp-block-quote.is-style-testimonial p {\n            margin-bottom: 12px;\n            font-size: 1.1em;\n        }\n\n        .wp-block-quote.is-style-testimonial cite {\n            font-weight: bold;\n            display: block;\n            margin-top: 10px;\n            color: #0073aa;\n        }\n\n        .wp-block-quote.is-style-testimonial .wp-block-image {\n            display: flex;\n            justify-content: center;\n            margin: 0 auto 12px;\n        }\n\n        .wp-block-quote.is-style-testimonial .wp-block-image img {\n            width: 100px;\n            height: 100px;\n            object-fit: cover;\n            border-radius: 12px;\n        }\n\n        .wp-block-quote.is-style-testimonial .testimonial-name {\n            font-weight: bold;\n            font-size: 1.2em;\n            margin-top: 12px;\n            color: #222;\n        }\n\n        .wp-block-quote.is-style-testimonial .testimonial-company {\n            font-size: 0.9em;\n            color: #555;\n        }\n    `;\n    document.head.appendChild(style);\n});<\/code><\/pre>\n<p>In de bovenstaande code definieert <code>registerBlockVariation()<\/code> de Testimonial variant van het Quote blok, waarbij een Image blok, een Quote blok en twee Paragraph blokken voor de naam van de persoon en het bedrijf worden voorgeladen. Het Image blok wordt gecentreerd op 100&#215;100 pixels voor uniforme profielfoto&#8217;s, terwijl het Quote blok ongewijzigd blijft als de tekst van de testimonial.<\/p>\n<p>Een aangepaste class (<code>is-style-testimonial<\/code>) wordt toegepast voor styling, waardoor het blok een lichte achtergrond, subtiele schaduw en gecentreerde tekst krijgt. De standaard linkerrand is verwijderd en de afbeelding behoudt zijn beeldverhouding met licht afgeronde hoeken voor een gepolijste look.<\/p>\n<p>Omdat het JavaScript bestand vervolgens in de blok-editor moet worden geladen, moeten we het enqueue-en in <code>functions.php<\/code>.<\/p>\n<pre><code class=\"language-php\">function enqueue_custom_block_variations() {\n    wp_enqueue_script(\n        'custom-block-variations',\n        get_template_directory_uri() . '\/assets\/js\/custom-block-variations.js',\n        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),\n        filemtime( get_template_directory() . '\/assets\/js\/custom-block-variations.js' ),\n        true\n    );\n}\nadd_action( 'enqueue_block_editor_assets', 'enqueue_custom_block_variations' );<\/code><\/pre>\n<p>Dit zorgt ervoor dat de Testimonial blokvariatie in de blok-editor verschijnt.<\/p>\n<p>Waar de JavaScript code ervoor zorgt dat het blok er correct uitziet in de editor, moeten we ook de stijlen toepassen op de front-end zodat testimonials correct worden weergegeven wanneer ze worden gepubliceerd. Voeg de volgende code toe aan <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function register_testimonial_block_style() {\n    register_block_style(\n        'core\/quote',\n        array(\n            'name'  =&gt; 'testimonial',\n            'label' =&gt; __( 'Testimonial', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-quote.is-style-testimonial {\n                    background-color: #f9f9f9;\n                    padding: 24px;\n                    border: none !important;\n                    border-radius: 8px;\n                    text-align: center;\n                    font-size: 1.2em;\n                    font-style: normal;\n                    color: #333;\n                    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                }\n\n                .wp-block-quote.is-style-testimonial .wp-block-image img {\n                    width: 100px;\n                    height: 100px;\n                    object-fit: cover;\n                    border-radius: 12px;\n                }\n\n                .wp-block-quote.is-style-testimonial .testimonial-name {\n                    font-weight: bold;\n                    font-size: 1.2em;\n                    margin-top: 12px;\n                    color: #222;\n                }\n\n                .wp-block-quote.is-style-testimonial .testimonial-company {\n                    font-size: 0.9em;\n                    color: #555;\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'register_testimonial_block_style' );<\/code><\/pre>\n<p>Wanneer een gebruiker nu een Testimonial blok invoegt, bevat het al de velden voor de<strong> afbeelding<\/strong>, het<strong> citaat<\/strong>, de<strong> naam<\/strong> en het <strong>bedrijf<\/strong>, allemaal voorgeformatteerd en correct gestyled. Hierdoor zijn handmatige aanpassingen niet meer nodig en wordt ervoor gezorgd dat elke testimonial dezelfde strakke en professionele structuur heeft.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/testimonial-block.png\" alt=\"Testimonial blok variatie in WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Testimonial blok variatie.<\/figcaption><\/figure>\n<p>In plaats van gebruikers te dwingen om testimonials vanaf nul op te bouwen, biedt deze blokvariant een gestroomlijnde workflow die het maken van inhoud verbetert terwijl het ontwerp van de site consistent blijft.<\/p>\n<h2>Geavanceerd gebruik: De Supports en Styles API&#8217;s combineren om gebrande knoppen te maken<\/h2>\n<p>Nu je weet wat elke API kan doen en hoe het werkt, waarom gaan we niet een stapje verder? In plaats van de Supports API of Styles API afzonderlijk te gebruiken, kunnen we ze samen gebruiken om \u00e9\u00e9n probleem op te lossen: behoud van ontwerpconsistentie en gebruikers een gestructureerde manier geven om de juiste stijlen toe te passen.<\/p>\n<p>Laten we eens kijken naar een scenario uit de praktijk. Een bedrijf wil dat alle knoppen op zijn site strikte branding richtlijnen volgen. Ze willen niet dat gebruikers willekeurige kleuren kiezen, de vulling veranderen of funky typografie toepassen. Ze willen echter wel flexibiliteit &#8211; dus gebruikers moeten kunnen kiezen tussen twee vooraf goedgekeurde knopstijlen:<\/p>\n<ol start=\"1\">\n<li><strong>Primaire knop<\/strong> &#8211; De belangrijkste call-to-action knop, met een effen achtergrond en gedurfde styling.<\/li>\n<li><strong>Secundaire knop<\/strong> &#8211; Een subtielere, omlijnde knop die meestal wordt gebruikt voor secundaire acties.<\/li>\n<\/ol>\n<p>Om dit te bereiken moeten we:<\/p>\n<ul>\n<li>De Styles API gebruiken om de twee knopstijlen te defini\u00ebren.<\/li>\n<li>De Supports API gebruiken om onnodige instellingen te verwijderen, zodat gebruikers de branding niet handmatig overschrijven door kleuren, spati\u00ebring of typografie te veranderen.<\/li>\n<\/ul>\n<p>Door beide API&#8217;s te combineren, staan we gestructureerde keuzes toe terwijl we voorkomen dat gebruikers het ontwerpsysteem kapot maken.<\/p>\n<h3>Stap 1: Definieer aangepaste knopstijlen<\/h3>\n<p>Begin met het toevoegen van de volgende code aan het bestand <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function register_custom_button_styles() {\n    register_block_style(\n        'core\/button',\n        array(\n            'name'  =&gt; 'primary-button',\n            'label' =&gt; __( 'Primary Button', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-button.is-style-primary-button .wp-block-button__link {\n                    background-color: #4D4D4D;\n                    color: #ffffff;\n                    padding: 12px 24px;\n                    border-radius: 4px;\n                    font-size: 1em;\n                    font-weight: 500;\n                    text-transform: none;\n                    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);\n                }\n            ',\n        )\n    );\n\n    register_block_style(\n        'core\/button',\n        array(\n            'name'  =&gt; 'secondary-button',\n            'label' =&gt; __( 'Secondary Button', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-button.is-style-secondary-button .wp-block-button__link {\n                    background-color: transparent;\n                    color: #4D4D4D;\n                    padding: 12px 24px;\n                    border: 1px solid #4D4D4D;\n                    border-radius: 4px;\n                    font-size: 1em;\n                    font-weight: 500;\n                    text-transform: none;\n                    box-shadow: none;\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'register_custom_button_styles' );<\/code><\/pre>\n<p>Wanneer gebruikers nu een Button blok invoegen, zien ze <strong>Primaire knop<\/strong> en <strong>Secundaire knop<\/strong>\u00a0als stijlkeuzes.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/custom-button-styles.png\" alt=\"Aangepaste knopstijlen: Primair en Secundair.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Eigen knopstijlen.<\/figcaption><\/figure>\n<p>De primaire knop heeft een effen donkergrijze achtergrond, terwijl de secundaire knop een transparante achtergrond met een rand heeft. Beide knoppen hebben een consistente opvulling, randradius en lettertype, zodat ze er op de hele site professioneel uitzien.<\/p>\n<h3>Stap 2: Beperk het aanpassen van knoppen<\/h3>\n<p>Hoewel de stijlen van de knoppen nu vooraf zijn gedefinieerd, kunnen gebruikers ze nog steeds handmatig veranderen met de instellingen van de blok-editor van WordPress. Als ze de kleuren, vulling of <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-typografie-theme-json\/\">typografie<\/a> veranderen, kan het zijn dat de knoppen niet meer voldoen aan de branding richtlijnen.<\/p>\n<p>We kunnen de Supports API gebruiken om deze aanpassingsopties uit te schakelen, zodat gebruikers geen onbedoelde wijzigingen kunnen aanbrengen. Voeg dit toe aan <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function restrict_button_customization($args, $block_type) {\n    if ($block_type === 'core\/button') {\n        \/\/ Disable specific color settings (text, background, link)\n        $args['supports']['color'] = [\n            'text'       =&gt; false, \n            'background' =&gt; false, \n            'link'       =&gt; false,  \n        ];\n\n        \/\/ Disable typography settings (font size, font weight, line height)\n        $args['supports']['typography'] = false;\n\n        \/\/ Disable spacing settings (padding, margin)\n        $args['supports']['spacing'] = false;\n\n    }\n    return $args;\n}\nadd_filter('register_block_type_args', 'restrict_button_customization', 10, 2);<\/code><\/pre>\n<p>Met dit op zijn plaats:<\/p>\n<ul>\n<li>Gebruikers kunnen de kleur van knoppen niet wijzigen, dus alle knoppen moeten voldoen aan het kleurenschema van de branding.<\/li>\n<li>Typografie-aanpassingen worden verwijderd, zodat de tekstopmaak consistent blijft.<\/li>\n<li>Spati\u00ebringsaanpassingen zijn uitgeschakeld, zodat gebruikers de opvulling en marges niet kunnen wijzigen.<\/li>\n<\/ul>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/new-primary-button.png\" alt=\"Gestileerde primaire knop in WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Gestileerde primaire knop.<\/figcaption><\/figure>\n<p>In plaats van gebruikers een willekeurige mix van knopstijlen te laten maken, kunnen ze nu eenvoudig kiezen tussen primaire en secundaire stijlen, waardoor het ontwerp professioneel en gestructureerd blijft.<\/p>\n<h2>Samenvatting<\/h2>\n<p>We hebben nog maar een tipje van de sluier opgelicht van wat er allemaal mogelijk is met WordPress blokaanpassingen. WordPress biedt een uitgebreide verzameling API&#8217;s die het eenvoudig maken om blokken uit te breiden en aan te passen, zodat ontwikkelaars de editorervaring kunnen aanpassen terwijl alles gestructureerd en gebruiksvriendelijk blijft.<\/p>\n<p>Als je blokaanpassingen echt onder de knie wilt krijgen, is er nog veel meer om te ontdekken. Bekijk de offici\u00eble <a href=\"https:\/\/developer.wordpress.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress documentatie voor ontwikkelaars<\/a>, bezoek <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordcamp-gids\/\">WordCamps en meetups<\/a>, en blijf leren van geweldige bronnen zoals de <a href=\"https:\/\/kinsta.com\/nl\/blog\/\">Kinsta blog<\/a>, waar we regelmatig geavanceerde WordPress concepten uit de doeken doen.<\/p>\n<p>Natuurlijk kun je met een goede hostingprovider moeiteloos experimenteren met deze veranderingen. Of je nu nieuwe blokmodificaties uitprobeert of een drukbezochte site beheert, betrouwbare hosting zorgt voor soepele prestaties en eenvoudige schaalbaarheid. Bij Kinsta hebben we ons platform gebouwd om precies dat aan te kunnen. Sterker nog, op basis van meer dan 930 klantbeoordelingen zijn we <a href=\"https:\/\/kinsta.com\/nl\/blog\/g2-awards\/\">door G2 erkend als leider in WordPress Hosting<\/a>.<\/p>\n<p>E\u00e9n ding is zeker: Je kunt <a href=\"https:\/\/kinsta.com\/nl\/prijzen\/\">op ons vertrouwen voor jouw WordPress ervaring<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In 2018 introduceerde WordPress met versie 5.0 de Gutenberg editor, een nieuwe manier om pagina&#8217;s en berichten op te bouwen met behulp van &#8220;blokken&#8221;. In het &#8230;<\/p>\n","protected":false},"author":287,"featured_media":62233,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[892],"class_list":["post-62232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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 kun je WordPress core blokken uitbreiden met Blocks API<\/title>\n<meta name=\"description\" content=\"Leer hoe je WordPress core blokken gemakkelijk kunt uitbreiden met behulp van de Blocks API om instellingen, stijlen en functionaliteit aan te passen.\" \/>\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\/uitbreiden-wp-core-blokken\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo kun je WordPress core blokken uitbreiden met Blocks API\" \/>\n<meta property=\"og:description\" content=\"Leer hoe je WordPress core blokken gemakkelijk kunt uitbreiden met behulp van de Blocks API om instellingen, stijlen en functionaliteit aan te passen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/\" \/>\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-04-02T08:30:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T08:40:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.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=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Leer hoe je WordPress core blokken gemakkelijk kunt uitbreiden met behulp van de Blocks API om instellingen, stijlen en functionaliteit aan te passen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\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\/uitbreiden-wp-core-blokken\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Zo kun je WordPress core blokken uitbreiden met Blocks API\",\"datePublished\":\"2025-04-02T08:30:32+00:00\",\"dateModified\":\"2025-04-16T08:40:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/\"},\"wordCount\":2413,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"inLanguage\":\"nl-NL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/\",\"name\":\"Zo kun je WordPress core blokken uitbreiden met Blocks API\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"datePublished\":\"2025-04-02T08:30:32+00:00\",\"dateModified\":\"2025-04-16T08:40:50+00:00\",\"description\":\"Leer hoe je WordPress core blokken gemakkelijk kunt uitbreiden met behulp van de Blocks API om instellingen, stijlen en functionaliteit aan te passen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/#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 kun je WordPress core blokken uitbreiden met Blocks API\"}]},{\"@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\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo kun je WordPress core blokken uitbreiden met Blocks API","description":"Leer hoe je WordPress core blokken gemakkelijk kunt uitbreiden met behulp van de Blocks API om instellingen, stijlen en functionaliteit aan te passen.","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\/uitbreiden-wp-core-blokken\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo kun je WordPress core blokken uitbreiden met Blocks API","og_description":"Leer hoe je WordPress core blokken gemakkelijk kunt uitbreiden met behulp van de Blocks API om instellingen, stijlen en functionaliteit aan te passen.","og_url":"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2025-04-02T08:30:32+00:00","article_modified_time":"2025-04-16T08:40:50+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Leer hoe je WordPress core blokken gemakkelijk kunt uitbreiden met behulp van de Blocks API om instellingen, stijlen en functionaliteit aan te passen.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"16 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Zo kun je WordPress core blokken uitbreiden met Blocks API","datePublished":"2025-04-02T08:30:32+00:00","dateModified":"2025-04-16T08:40:50+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/"},"wordCount":2413,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","inLanguage":"nl-NL"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/","url":"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/","name":"Zo kun je WordPress core blokken uitbreiden met Blocks API","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","datePublished":"2025-04-02T08:30:32+00:00","dateModified":"2025-04-16T08:40:50+00:00","description":"Leer hoe je WordPress core blokken gemakkelijk kunt uitbreiden met behulp van de Blocks API om instellingen, stijlen en functionaliteit aan te passen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/uitbreiden-wp-core-blokken\/#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 kun je WordPress core blokken uitbreiden met Blocks API"}]},{"@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\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/62232","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\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=62232"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/62232\/revisions"}],"predecessor-version":[{"id":62356,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/62232\/revisions\/62356"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/62232\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/62232\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/62232\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/62232\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/62232\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/62232\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/62232\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/62232\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/62232\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/62233"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=62232"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=62232"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=62232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}