{"id":63016,"date":"2025-08-07T10:14:47","date_gmt":"2025-08-07T08:14:47","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=63016&#038;preview=true&#038;preview_id=63016"},"modified":"2025-08-11T15:25:14","modified_gmt":"2025-08-11T13:25:14","slug":"stijl-blokvariaties-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/","title":{"rendered":"Zo til je Gutenberg blokken naar een hoger niveau met stijlvariaties en blokvariaties"},"content":{"rendered":"<p>Gutenberg heeft zich ontwikkeld tot een krachtige en zeer aanpasbare editor. Naast de robuuste <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">out-of-the-box features<\/a> kunnen WordPress ontwikkelaars tegenwoordig ook gebruik maken van een rijke set aan API&#8217;s om eenvoudig custom functies in hun websites te integreren. Deze uitbreidbaarheid maakt een hoge mate van ontwikkeling op maat mogelijk, waardoor ontwikkelaars zeer gepersonaliseerde en functierijke online ervaringen kunnen cre\u00ebren.<\/p>\n<p>In dit artikel worden twee minder bekende maar krachtige WordPress ontwikkelfuncties besproken: <strong>Stijlvariaties<\/strong> (ook bekend als blokstijlen) en <strong>Blokvariaties<\/strong>.<\/p>\n<p>Hoewel hun nut in eerste instantie misschien onduidelijk lijkt, zul je verrast zijn hoe nuttig ze zijn en hoe je ze met een kleine tijdsinvestering naadloos kunt integreren in je workflow.<\/p>\n<p>Aan de hand van een project uit de praktijk krijg je inzicht in wat ze zijn en hoe je ze kunt gebruiken. Je kunt dit project op je WordPress site implementeren door eenvoudigweg de code uit deze tutorial te kopi\u00ebren en te plakken en eventueel aanpassingen toe te voegen.<\/p>\n<p>Laten we, voordat we in het project duiken, eerst de vereisten bekijken:<\/p>\n<ul>\n<li><strong>Lokale WordPress ontwikkelomgeving:<\/strong> Hoewel de meesten voldoen, raden we <a href=\"https:\/\/kinsta.com\/nl\/devkinsta\/\">DevKinsta<\/a>, de lokale ontwikkelsuite van Kinsta, ten zeerste aan. Het is eenvoudig te gebruiken en biedt veel instellingen en <a href=\"https:\/\/kinsta.com\/nl\/blog\/adminer\/\">tools<\/a> om snel een lokale WordPress site te starten en te beheren.<\/li>\n<li><strong>Node.js en npm:<\/strong> Deze zijn essentieel, omdat de Block Editor is gebouwd op React en een bouwproces vereist.<\/li>\n<li><strong>Basis frontend ontwikkelingsvaardigheden:<\/strong> Het is handig om een basiskennis te hebben van Node.js, JavaScript (met React), PHP en CSS.<\/li>\n<\/ul>\n<p>Hoewel dit project niet al te complex is, moet je bereid zijn om wat code te schrijven. De <a href=\"https:\/\/github.com\/carlodaniele\/image-hacker\" target=\"_blank\" rel=\"noopener noreferrer\">volledige code<\/a> is ook beschikbaar op GitHub.<\/p>\n<p>Tijd om te beginnen!<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Blokstijlen versus blokvariaties<\/h2>\n<p><strong>Blokstijlen<\/strong> en <strong>blokvariaties<\/strong> zijn twee krachtige WordPress functies voor developers. Hoewel hun namen erg op elkaar lijken, verschillen ze in doel en gebruik.<\/p>\n<p><strong>Blokstijlen<\/strong>, ook bekend als stijlvariaties, zijn kant-en-klare sets CSS stijlen waarmee je met \u00e9\u00e9n klik kunt veranderen hoe een blok eruit ziet. Nadat je een blokstijl hebt geregistreerd, verschijnt er een knop in de zijbalk van het blok waarmee je een kant-en-klare set stijlen kunt toewijzen aan het blok. Je kunt de stijlen in- en uitschakelen en een voorbeeld van het blok in de editor bekijken.<\/p>\n<figure id=\"attachment_196255\" aria-describedby=\"caption-attachment-196255\" style=\"width: 1698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196255 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/06\/image-block-default-style-variations.jpg\" alt=\"Een screenshot van de WordPress-berichteditor met een afbeelding en de blokzijbalk\" width=\"1698\" height=\"1092\"><figcaption id=\"caption-attachment-196255\" class=\"wp-caption-text\">Het Image coreblok heeft twee standaardstijlvariaties.<\/figcaption><\/figure>\n<p><strong>Stijlvariaties veranderen de attributen van het blok niet. Ze wijzigen alleen het uiterlijk van een blok door een CSS klasse toe te wijzen aan het wrapper element van het blok.<\/strong><\/p>\n<p>Blokvariaties zijn een krachtiger hulpmiddel omdat je hiermee een vooraf geconfigureerde versie van een blok kunt maken met attributen en binnenblokken. Ze verschijnen ook in de blok inserter applicatie van de editor. In wezen verschijnt een blokvariatie voor de gebruiker alsof het een op zichzelf staand blok is, volledig onafhankelijk van het blok waarop het is gebouwd.<\/p>\n<p><strong>Met blokvariaties kun je het uiterlijk, de begininstellingen en de structuur van een blok aanpassen.<\/strong><\/p>\n<p>Met dat alles in gedachten, laten we deze hulpmiddelen gebruiken om Gutenberg blokken naar een hoger niveau te tillen!<\/p>\n<h2>Een geanimeerd polaroid effect op een Image coreblok<\/h2>\n<p>Laten we nu in ons project duiken! We gaan het coreblok Image uitbreiden met een Gutenberg plugin om:<\/p>\n<ul>\n<li><strong>Een Polaroid stijlvariatie te implementeren:<\/strong> Gebruikers kunnen een charmant polaroid effect toepassen op hun afbeeldingen met een enkele klik vanuit de instellingen zijbalk van het blok.<\/li>\n<li><strong>Een hover-animatie toe te voegen:<\/strong> We zullen Polaroid stijl afbeeldingen verbeteren met een subtiele hover-animatie.<\/li>\n<li><strong>Een &#8220;Animated Polaroid&#8221; blokvariatie te maken:<\/strong> Hiermee kunnen gebruikers snel voorgeconfigureerde polaroidafbeeldingen met een zweefeffect invoegen, rechtstreeks vanuit de blokinvoegtoepassing.<\/li>\n<\/ul>\n<p>Ben je er klaar voor? Tijd om onze plugin in te stellen!<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<figure id=\"attachment_196838\" aria-describedby=\"caption-attachment-196838\" style=\"width: 1953px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196838 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/front-end-animation.jpg\" alt=\"Een animatie-effect op een afbeeldingsblok\" width=\"1953\" height=\"1248\"><figcaption id=\"caption-attachment-196838\" class=\"wp-caption-text\">Een animatie-effect op een afbeeldingsblok<\/figcaption><\/figure>\n<h3>Omgeving instellen<\/h3>\n<p>Voordat we beginnen, moeten we een WordPress ontwikkelomgeving met Node.js opzetten. We gaan ervan uit dat je je lokale WordPress ontwikkelomgeving en de nieuwste versies van <a href=\"https:\/\/kinsta.com\/nl\/blog\/node-js-installeren\/\">Node.js<\/a> en <a href=\"https:\/\/kinsta.com\/blog\/what-is-npm\/\">npm<\/a> al hebt ge\u00efnstalleerd. Als je hulp nodig hebt, bekijk dan onze tutorial over <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/#how-to-create-a-block-editor-plugin-without-creating-a-custom-block\">het bouwen van een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor<\/a>.<\/p>\n<h4>Stap 1 &#8211; Maak de basisstructuur van de plugin<\/h4>\n<p>Voor deze tutorial noemen we onze plugin <strong>Image Hacker<\/strong>.<\/p>\n<p>Navigeer naar je <code>plugins<\/code> map en maak een nieuwe <code>image-hacker<\/code> map aan. Maak binnen deze map een nieuw <code>image-hacker.php<\/code> bestand aan (het hoofdbestand van je plugin) en een <code>src<\/code> submap, waar je de functies van de plugin gaat opbouwen.<\/p>\n<p>Dit is de basisstructuur van je plugin:<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/image-hacker\/\n\t\u251c\u2500\u2500 image-hacker.php\n\t\u2514\u2500\u2500 \/src\/<\/code><\/pre>\n<h4>Stap 2 &#8211; Maak de PHP code<\/h4>\n<p>Vervolgens moet je ervoor zorgen dat WordPress je plugin herkent. Om dit te doen, voeg je de volgende code toe aan <code>image-hacker.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: Image Hacker\n * Description: Adds new features to the core Image block\n * Version:     1.0.0\n * Author:      Your Name\n * License:     GPL-2.0-or-later\n * License URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Text Domain: image-hacker\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) {\n\texit; \/\/ Exit if accessed directly.\n}<\/code><\/pre>\n<h4>Stap 3 &#8211; Initialiseer npm en installeer dependencies<\/h4>\n<p>Open je favoriete opdrachtprompt en navigeer naar de map van je plugin. Voer daar het volgende commando uit:<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Dit commando initialiseert een nieuw <code>package.json<\/code> bestand, dat de dependencies en scripts van je project bevat.<\/p>\n<p>Vervolgens moet je WordPress scripts en bouwtools zoals webpack en Babel installeren:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/plugins @wordpress\/scripts --save-dev<\/code><\/pre>\n<p>Dit commando voegt een map <code>node_modules<\/code> toe met node dependencies en een bestand <code>package-lock.json<\/code>. De afbeelding hieronder toont de huidige structuur van je project in <a href=\"https:\/\/kinsta.com\/nl\/blog\/vscode-extensies\/\">Visual Studio Code<\/a>:<\/p>\n<figure id=\"attachment_196256\" aria-describedby=\"caption-attachment-196256\" style=\"width: 1880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196256 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/06\/gutenberg-plugin-basic-structure.jpg\" alt=\"Een screenshot van een Gutenberg-plug-in in Visual Studio Code\" width=\"1880\" height=\"759\"><figcaption id=\"caption-attachment-196256\" class=\"wp-caption-text\">Een Gutenberg plugin in Visual Studio Code<\/figcaption><\/figure>\n<p>Open vervolgens je <code>package.json<\/code> en werk de property <code>scripts<\/code> als volgt bij:<\/p>\n<pre><code class=\"language-json\">{\n\t\"name\": \"image-hacker\",\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.25.0\",\n\t\t\"@wordpress\/scripts\": \"^30.18.0\"\n\t}\n}<\/code><\/pre>\n<p>Merk op dat <code>devDependencies<\/code> versies kunnen afwijken van de bovenstaande en afhankelijk zijn van de daadwerkelijke versies die in jouw omgeving zijn ge\u00efnstalleerd.<\/p>\n<h4>Stap 4 &#8211; Maak de bronbestanden van je plugin aan<\/h4>\n<p>De volgende stap is het aanmaken van de plugin bronbestanden. Navigeer naar de <code>src<\/code> map en voeg de volgende bestanden toe:<\/p>\n<ul>\n<li><code>index.js<\/code><\/li>\n<li><code>style.scss<\/code><\/li>\n<li><code>editor.scss<\/code><\/li>\n<\/ul>\n<p>De plugin structuur zou er nu zo uit moeten zien:<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/image-hacker\/\n\t\u251c\u2500\u2500 \/node-modules\/\n\t\u251c\u2500\u2500 image-hacker.php\n\t\u251c\u2500\u2500 package.json\n\t\u251c\u2500\u2500 package-lock.json\n\t\u2514\u2500\u2500 \/src\/\n\t\t\u251c\u2500\u2500 index.js\n\t\t\u251c\u2500\u2500 style.scss\n\t\t\u2514\u2500\u2500 editor.scss<\/code><\/pre>\n<p>Open nu je WordPress admin paneel en navigeer naar het <strong>Plugins<\/strong> scherm. Zoek de plugin <strong>Image Hacker<\/strong> en activeer deze.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>De <code>editor.scss<\/code> is het bestand waarin je alleen blokstijlen voor de editor declareert, terwijl de <code>style.scss<\/code> blokstijlen bevat voor zowel de editor als de front-end. We zullen het bestand <code>editor.scss<\/code> niet gebruiken in dit project.<\/p>\n<\/aside>\n\n<h4>Stap 5 &#8211; Neem assets op in het bestand van je plugin<\/h4>\n<p>Vervolgens moet je plugin-assets opnemen in het hoofdbestand van de plugin. Voeg het volgende toe aan <code>image-hacker.php<\/code>:<\/p>\n<pre><code class=\"language-php\">\/**\n * Enqueue block editor assets.\n *\/\nfunction image_hacker_enqueue_editor_assets() {\n\t$asset_file = include( plugin_dir_path( __FILE__ ) . 'build\/index.asset.php');\n\n\t\/\/ Enqueue the script with our modifications\n\twp_enqueue_script(\n\t\t'image-hacker-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\n\t\/\/ Enqueue the editor-only styles\n\twp_enqueue_style(\n\t\t'image-hacker-editor-style',\n\t\tplugins_url( 'build\/editor.css', __FILE__ ),\n\t\t[],\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/editor.css' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'image_hacker_enqueue_editor_assets' );\n\n\/**\n * Enqueue frontend and editor assets.\n *\/\nfunction image_hacker_enqueue_assets() {\n\t$asset_file = include( plugin_dir_path( __FILE__ ) . 'build\/index.asset.php');\n\n\t\/\/ Enqueue styles for both frontend and editor\n\twp_enqueue_style(\n\t\t'image-hacker-style',\n\t\tplugins_url( 'build\/style-index.css', __FILE__ ),\n\t\t[],\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/style-index.css' )\n\t);\n}\nadd_action( 'enqueue_block_assets', 'image_hacker_enqueue_assets' );<\/code><\/pre>\n<p>Dit is wat deze code doet:<\/p>\n<ul>\n<li>De action hook <code>enqueue_block_editor_assets<\/code> enquehed het <code>index.js<\/code> script en het <code>editor.css<\/code> bestand.<\/li>\n<li>De action hook <code>enqueue_block_assets<\/code> callt het bestand <code>style.css<\/code>.<\/li>\n<\/ul>\n<p>Merk op dat deze code de <code>.js<\/code> en <code>.css<\/code> onderdelen bevat die zich in de <code>\/build\/<\/code> map van je plugin bevinden. Dit betekent dat je, om het te laten werken, het build commando moet uitvoeren in je commandoregel tool:<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n<p>Merk ook op dat als je een bestand met de naam <code>style.scss<\/code> importeert in <code>index.js<\/code>, het gecompileerde CSS-bestand niet <code>style.css<\/code> zal heten, maar <code>style-index.css<\/code>.<\/p>\n<h3>Blokstijl registreren<\/h3>\n<p>Je bent klaar met het instellen van je ontwikkelomgeving. Nu kun je verder gaan met het spannende deel van het project en je blokstijlvariatie registreren.<\/p>\n<p>Er zijn <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-style-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">verschillende manieren om blokstijlen te registreren<\/a> en welke je kiest hangt af van je doelen en persoonlijke voorkeuren. Wij zullen de JS-aanpak volgen als we een Gutenberg-plugin bouwen. Open je <code>\/src\/index.js<\/code> bestand en plak de volgende code:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Import the function to register block styles.\nimport { registerBlockStyle } from '@wordpress\/blocks';\n\n\/\/ Import the function to run code only when the DOM is ready.\nimport domReady from '@wordpress\/dom-ready';\n\n\/\/ This line tells the build process to include and compile our SCSS file.\nimport '.\/style.scss';\n\n\/**\n * Use domReady to run code only when the DOM is ready.\n *\/\ndomReady(() =&gt; {\n\t\/\/ Register our new style variation for the core image block.\n\tregisterBlockStyle('core\/image', {\n\t\tname: 'polaroid',\n\t\tlabel: 'Polaroid',\n\t});\n});<\/code><\/pre>\n<p><code>registerBlockStyle<\/code> met <code>domReady<\/code> zorgt ervoor dat de stijlvariatie alleen wordt geregistreerd wanneer het DOM volledig is geladen. Zie ook de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-dom-ready\/\" target=\"_blank\" rel=\"noopener noreferrer\">offici\u00eble<\/a> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentatie<\/a>.<\/p>\n<p>Als de stijl <code>Polaroid<\/code> is geselecteerd, voegt WordPress automatisch de klasse <code>.is-style-polaroid<\/code> toe aan de blokwrapper.<\/p>\n<p>De volgende stap is het aanleveren van de CSS voor je stijlvariatie. Open je <code>\/src\/style.scss<\/code> en voeg de volgende code toe:<\/p>\n<pre><code class=\"language-css\">.wp-block-image.is-style-polaroid {\n\tpadding: 15px 15px 70px 15px;\n\tbackground-color: white;\n\tbox-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n\tmax-width: 360px;\n\ttransform: rotate(-3deg);\n\ttransition: transform 0.3s ease-in-out;\n\n\tfigure { \n\t\tmargin: 0 !important; \n\t}\n\t\n\timg { \n\t\tdisplay: block; \n\t\twidth: 100%; \n\t\theight: auto; \n\t}\n\t\n\tfigcaption {\n    \tposition: absolute; \n    \tbottom: 15px; \n    \tleft: 0; \n    \tright: 0;\n    \ttext-align: center; \n    \tfont-family: 'Permanent Marker', cursive;\n    \tcolor: #333; \n    \tfont-size: 18px;\n\t}\n}<\/code><\/pre>\n<p>Sla je code op, voer <code>npm run build<\/code> uit en ga naar je WordPress dashboard. Maak een nieuwe post of pagina en voeg een afbeelding toe. Als je de afbeelding hebt geselecteerd, klik je op het label <b>Styles <\/b>in de zijbalk van het blok en selecteer je <strong>Polaroid<\/strong>.<\/p>\n<figure id=\"attachment_196692\" aria-describedby=\"caption-attachment-196692\" style=\"width: 1988px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196692 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/06\/style-variation.jpg\" alt=\"Een nieuwe stijlvariant voor het afbeeldingsblok\" width=\"1988\" height=\"1186\"><figcaption id=\"caption-attachment-196692\" class=\"wp-caption-text\">Een nieuwe stijlvariant voor het Image blok<\/figcaption><\/figure>\n<p>Voeg een onderschrift toe, sla het bericht op en bekijk het resultaat op de front-end. Je zou een afbeelding in Polaroid-stijl moeten zien met een mooi cursief onderschrift.<\/p>\n<figure id=\"attachment_196903\" aria-describedby=\"caption-attachment-196903\" style=\"width: 1952px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196903 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/is-style-polaroid.jpg\" alt=\"Het element Image met de klasse is_style_polaroid\" width=\"1952\" height=\"1296\"><figcaption id=\"caption-attachment-196903\" class=\"wp-caption-text\">Het element Image met de klasse is_style_polaroid<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Vanwege de hoge specificiteit van selectors worden sommige properties (bijvoorbeeld <code>max-width<\/code>) mogelijk niet toegepast in de editor. Als je ze wilt toepassen in de editor, kun je de juiste stijlen toevoegen aan het bestand <code>editor.scss<\/code>.<\/p>\n<\/aside>\n\n<h3>De logica bouwen<\/h3>\n<p>De volgende stap is het bouwen van de logica om de afbeelding te animeren. We zullen een eenvoudige animatie maken met behulp van de CSS property <code>transform<\/code>. Om te beginnen voeg je het volgende blok toe aan je <code>src\/style.scss<\/code>:<\/p>\n<pre><code class=\"language-css\">.wp-block-image.is-style-polaroid.has-image-animation:hover {\n\ttransform: rotate(0deg) scale(1.05);\n}<\/code><\/pre>\n<p>Deze code zorgt ervoor dat het hover-effect alleen wordt toegepast als het blok een Polaroid afbeelding is en een <code>has-image-animation<\/code> klasse heeft van de toolbar toggle.<\/p>\n<p>Nu heb je de logica nodig om de CSS-klasse toe te voegen aan de afbeeldingscontainer, die een <code>figure<\/code> element is. Daarvoor heb je een paar filters en callbackfuncties nodig.<\/p>\n<p>Voeg eerst de volgende regel toe aan je <code>src\/index.js<\/code> bestand:<\/p>\n<pre><code class=\"language-javascript\">import { addFilter } from '@wordpress\/hooks';<\/code><\/pre>\n<h4>Stap 1. Voeg een nieuw attribuut toe aan het Image blok<\/h4>\n<p>Je gaat <code>addFilter<\/code> gebruiken om het coreblok Image te manipuleren. Eerst voeg je een nieuw <code>imageAnimation<\/code> attribuut toe aan het blok Image:<\/p>\n<pre><code class=\"language-javascript\">function addImageAnimationAttribute( settings, name ) {\n\tif ( name !== 'core\/image' ) {\n\t\treturn settings;\n\t}\n\tsettings.attributes = {\n\t\t...settings.attributes,\n\t\timageAnimation: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t};\n\treturn settings;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'image-hacker\/add-image-animation-attribute',\n\taddImageAnimationAttribute\n);<\/code><\/pre>\n<p>De callback functie <code>addImageAnimationAttribute<\/code> neemt twee argumenten:<\/p>\n<ul>\n<li><code>settings<\/code> &#8211; Een array van huidige blokattributen<\/li>\n<li><code>name<\/code> &#8211; Specificeert de naam van het blok waarvan je de attributen wilt wijzigen.<\/li>\n<\/ul>\n<p>De functie retourneert vervolgens de bijgewerkte matrix van attributen.<\/p>\n<h4>Stap 2. Voeg een toggle knop toe aan het Image blok<\/h4>\n<p>Vervolgens moet je een toggle\/regelaar toevoegen aan de werkbalk van het afbeeldingsblok om de animatie in te schakelen.<\/p>\n<p>Voeg eerst de volgende <code>import<\/code>s toe aan het bestand <code>index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">import { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment } from '@wordpress\/element';\nimport { BlockControls } from '@wordpress\/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress\/components';\nimport { __ } from '@wordpress\/i18n';<\/code><\/pre>\n<p>Voeg vervolgens de volgende code toe aan het einde van het bestand:<\/p>\n<pre><code class=\"language-javascript\">const withPolaroidControls = createHigherOrderComponent((BlockEdit) =&gt; {\n\treturn (props) =&gt; {\n\t\tif (props.name !== 'core\/image') {\n\t\t\treturn &lt;BlockEdit {...props} \/&gt;;\n\t\t}\n\n\t\tconst { attributes, setAttributes, isSelected } = props;\n\t\tconst { imageAnimation, className, lightbox } = attributes;\n\n\t\treturn (\n\t\t\t&lt;Fragment&gt;\n\t\t\t\t&lt;BlockEdit {...props} \/&gt;\n\n\t\t\t\t&lt;BlockControls&gt;\n\t\t\t\t\t&lt;ToolbarGroup&gt;\n\t\t\t\t\t\t&lt;ToolbarButton\n\t\t\t\t\t\t\ticon=\"format-image\"\n\t\t\t\t\t\t\tlabel={__('Toggle Animation', 'image-hacker')}\n\t\t\t\t\t\t\tisActive={imageAnimation}\n\t\t\t\t\t\t\tonClick={() =&gt;\n\t\t\t\t\t\t\t\tsetAttributes({ imageAnimation: !imageAnimation })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/ToolbarGroup&gt;\n\t\t\t\t&lt;\/BlockControls&gt;\n\t\t\t&lt;\/Fragment&gt;\n\t\t);\n\t};\n}, 'withPolaroidControls');\n\naddFilter(\n\t'editor.BlockEdit',\n\t'image-hacker\/with-polaroid-controls',\n\twithPolaroidControls\n);<\/code><\/pre>\n<p>Dit is wat deze code doet:<\/p>\n<ul>\n<li>De functie <code>createHigherOrderComponent<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/#createhigherordercomponent\" target=\"_blank\" rel=\"noopener noreferrer\">maakt een higher-order component<\/a> (HOC) die <code>BlockEdit<\/code> wrapt, wat de hoofdcomponent is die verantwoordelijk is voor het weergeven van blokken in de editor.<\/li>\n<li>De HOC onderschept de component en controleert of het een Image blok is. Dit zorgt ervoor dat al je bewerkingen alleen van toepassing zijn op het Image blok.<\/li>\n<li>We gebruiken de destructuring opdracht om de vereiste properties en attributen uit de objecten <code>props<\/code> en <code>attributes<\/code> te halen.<\/li>\n<li>We gebruiken <a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/fundamentals\/block-in-the-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>BlockControls<\/code><\/a>, <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/toolbar-group\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>ToolbarGroup<\/code><\/a>, en <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/toolbar-button\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>ToolbarButton<\/code><\/a> componenten om een knop <strong>Toggle Animation<\/strong> toe te voegen aan de werkbalk van het blok.<\/li>\n<li><code>isActive<\/code> Hiermee wordt de standaardtoestand van <code>imageAnimation<\/code><\/li>\n<li><code>onClick<\/code> schakelt de waarde <code>imageAnimation<\/code> om.<\/li>\n<\/ul>\n<figure id=\"attachment_196750\" aria-describedby=\"caption-attachment-196750\" style=\"width: 1668px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196750 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/custom-block-toolbar-button.jpg\" alt=\"Er is een custom knop toegevoegd aan de blokwerkbalk.\" width=\"1668\" height=\"588\"><figcaption id=\"caption-attachment-196750\" class=\"wp-caption-text\">Er is een custom knop toegevoegd aan de blokwerkbalk.<\/figcaption><\/figure>\n<p>Nu heb je een attribuut en een knop. Als je echter op de knop klikt, gebeurt er niets.<\/p>\n<h4>Stap 3. Voeg de CSS klasse toe aan het wrapper element<\/h4>\n<p>De volgende stap is het toepassen van de <code>has-image-animation<\/code> klasse op het <code>figure<\/code> element dat de afbeelding wrapt. Om dat te doen, heb je een filter nodig waarmee je de CSS-klasse kunt toewijzen aan de afbeelding in de front-end.<\/p>\n<p>Voeg de volgende code toe aan het bestand <code>index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">function addAnimationFrontendClass(extraProps, blockType, attributes) {\n\tif (blockType.name === 'core\/image' && attributes.imageAnimation) {\n\t\textraProps.className = `${extraProps.className || ''} has-image-animation`;\n\t}\n\treturn extraProps;\n}\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'image-hacker\/add-animation-frontend-class',\n\taddAnimationFrontendClass\n);<\/code><\/pre>\n<p>Deze code voegt dynamisch de CSS klasse <code>has-image-animation<\/code> toe aan het <code>figure<\/code> element wanneer het <code>imageAnimation<\/code> attribuut is ingesteld op <code>true<\/code>.<\/p>\n<p>Laten we proberen in detail te begrijpen wat er gebeurt.<\/p>\n<ul>\n<li><code>addFilter<\/code> haakt in op de processen van de editor om gegevens of gedrag te wijzigen.<\/li>\n<li><code>blocks.getSaveContent.extraProps<\/code> is de specifieke hook waarop we ons richten. <code>extraProps<\/code> is een speciale hook waarmee je extra HTML-attributen kunt toevoegen aan het wrapper element.<\/li>\n<li><code>image-hacker\/add-animation-class<\/code> is de unieke naam van je filter.<\/li>\n<li><code>addAnimationFrontendClass<\/code> is de naam van de callback functie die elke keer wordt uitgevoerd als de <code>blocks.getSaveContent.extraProps<\/code> hook wordt uitgevoerd. Deze functie neemt 3 argumenten:\n<ul>\n<li><code>extraProps<\/code>: Een object met de properties van het wrapper element van het blok, zoals <code>className<\/code>.<\/li>\n<li><code>blockType<\/code>: Een object met details van het blok, zoals de <code>name<\/code> (<code>core\/image<\/code>).<\/li>\n<li><code>attributes<\/code>: Een object met blokattributen<\/li>\n<\/ul>\n<\/li>\n<li>De logica van de functie zorgt ervoor dat de code alleen wordt uitgevoerd als <code>blockType.name === 'core\/image'<\/code> en <code>attributes.imageAnimation<\/code> <code>true<\/code> is.<\/li>\n<li>Als beide voorwaarden waar zijn, retourneert de functie een nieuw object <code>props<\/code> met <code>has-image-animation<\/code> toegevoegd aan het bestaande klasse-object.<\/li>\n<\/ul>\n<p>Nu kun je het zelf proberen. Voeg een afbeelding toe aan je inhoud, selecteer de Polaroid stijl in de zijbalk van het blok en klik op de knop <strong>Toggle Animation<\/strong> in de werkbalk van het blok. Sla je bericht op en controleer het resultaat op de front-end. Je afbeelding zou moeten draaien als je er met de muis overheen gaat.<\/p>\n<figure id=\"attachment_196905\" aria-describedby=\"caption-attachment-196905\" style=\"width: 1954px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196905 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/is-style-polaroid-has-image-animation.jpg\" alt=\"is_style_polaroid en has_image_animation CSS klassen toegevoegd aan het Image blok \" width=\"1954\" height=\"1184\"><figcaption id=\"caption-attachment-196905\" class=\"wp-caption-text\">is_style_polaroid en has_image_animation CSS klassen toegevoegd aan het Image blok<\/figcaption><\/figure>\n<h3>Blokvariatie registreren<\/h3>\n<p>Blokvariaties zijn vooraf geconfigureerde versies van een blok, met een set attributen en geneste blokken. WordPress behandelt blokvariaties als onafhankelijke blokken, maakt ze beschikbaar in de Block Inserter en markeert ze met een custom pictogram.<\/p>\n<p>Je kunt een blokvariatie gebruiken om een nieuwe versie van het Image blok te maken, waarbij de Polaroid-stijl standaard wordt toegepast.<\/p>\n<p>De eerste stap is het importeren van de <code>registerBlockVariation<\/code> functie in je <code>\/src\/index.js<\/code> bestand:<\/p>\n<pre><code class=\"language-javascript\">import { registerBlockStyle, registerBlockVariation } from '@wordpress\/blocks';<\/code><\/pre>\n<p>Vervolgens voeg je een call naar de <code>registerBlockVariation<\/code> functie toe binnen <code>domReady()<\/code>, direct onder <code>registerBlockStyle<\/code>:<\/p>\n<pre><code class=\"language-javascript\">domReady(() =&gt; {\n\t\/\/ Register a style variation for the image block.\n\tregisterBlockStyle('core\/image', {\n\t\tname: 'polaroid',\n\t\tlabel: 'Polaroid',\n\t});\n\n\t\/\/ Register a block variation of the image block\n\tregisterBlockVariation('core\/image', {\n\t\tname: 'animated-polaroid',\n\t\ttitle: 'Animated Polaroid',\n\t\ticon: 'image-filter',\n\t\tattributes: {\n\t\t\tclassName: 'is-style-polaroid',\n\t\t\timageAnimation: true,\n\t\t},\n\t\tscope: ['inserter'],\n\t});\n});<\/code><\/pre>\n<p>De functie <code>registerBlockVariation<\/code> maakt een variatie voor een bestaand blok. Het accepteert twee argumenten: de naam van het blok en een object dat de variatie definieert. (Zie ook de <a href=\"https:\/\/developer.wordpress.org\/news\/2023\/08\/an-introduction-to-block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">inleiding tot blokvariaties<\/a> en de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">blokvariaties API documentatie<\/a>).<\/p>\n<p>Sla je bestand op, voer de build uit om je wijzigingen toe te passen en ga dan terug naar je WordPress admin. Maak een nieuw bericht en zoek naar het <strong>Animated Polaroid<\/strong> blok in de Block Inserter.<\/p>\n<figure id=\"attachment_196842\" aria-describedby=\"caption-attachment-196842\" style=\"width: 1362px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196842 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/block-inserter.jpg\" alt=\"Een blokvariatie in de Block Inserter\" width=\"1362\" height=\"876\"><figcaption id=\"caption-attachment-196842\" class=\"wp-caption-text\">Een blokvariatie in de Block Inserter<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Vanwege de complexiteit van de omgeving en de specificiteit van de selectors voegen we de code die de animatie genereert niet toe in de Block Editor. Om deze reden zal de animatie niet werken in de editor.<\/p>\n<\/aside>\n\n<h3>Testen en debuggen<\/h3>\n<p>Laten we niet vergeten te testen. Voeg een of meer afbeeldingen toe aan een nieuw bericht. Selecteer de polaroidstijl voor elke afbeelding, schakel de animatie in en voeg links toe. Voer ook tests uit met het Gallery blok.<\/p>\n<p>Alles lijkt te werken zoals verwacht. Echter, het toevoegen van een link met een lightbox effect aan een afbeelding met de Polaroid stijl geeft geen mooi resultaat.<\/p>\n<p>Dit vreemde gedrag lijkt te wijten te zijn aan een compatibiliteitsprobleem tussen de WordPress lightbox en CSS overgangen.<\/p>\n<p>Om een lang, ingewikkeld foutopsporingsproces te voorkomen, kun je misschien de optie <strong>Enlarge on click <\/strong>uitschakelen en een waarschuwing toevoegen om gebruikers te laten weten dat de lightbox is uitgeschakeld.<\/p>\n<p>Je moet eerst wat extra bronnen importeren. Hieronder staat de volledige lijst met bronnen die zijn ge\u00efmporteerd uit het <code>\/src\/index.js<\/code> bestand:<\/p>\n<pre><code class=\"language-javascript\">import { registerBlockStyle, registerBlockVariation } from '@wordpress\/blocks';\nimport domReady from '@wordpress\/dom-ready';\nimport { addFilter } from '@wordpress\/hooks';\nimport { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment, useEffect } from '@wordpress\/element';\nimport { InspectorControls, BlockControls } from '@wordpress\/block-editor';\nimport { PanelBody, Notice, ToolbarGroup, ToolbarButton } from '@wordpress\/components';\nimport { __ } from '@wordpress\/i18n';\nimport { useDispatch } from '@wordpress\/data';\nimport '.\/style.scss';<\/code><\/pre>\n<p>We hebben de volgende imports toegevoegd:<\/p>\n<ul>\n<li><code>useEffect<\/code> van <code>@wordpress\/element<\/code>. (Zie <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/#useeffect\" target=\"_blank\" rel=\"noopener noreferrer\">docs<\/a>)<\/li>\n<li><code>InspectorControls<\/code> uit <code>@wordpress\/block-editor<\/code> (Zie <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/HEAD\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">docs<\/a>).<\/li>\n<li><code>PanelBody<\/code> en <code>Notice<\/code> van <code>@wordpress\/components<\/code> (Zie <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/panel\/\" target=\"_blank\" rel=\"noopener noreferrer\">documenten<\/a>).<\/li>\n<li><code>useDispatch<\/code> van <code>@wordpress\/data<\/code>. (Zie <a href=\"https:\/\/developer.wordpress.org\/news\/2022\/12\/application-state-managed-withdispatch-withselect-and-compose-101\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress blog for developers<\/a>)<\/li>\n<\/ul>\n<p>Wijzig nu de functie <code>withPolaroidControls<\/code> als volgt:<\/p>\n<pre><code class=\"language-javascript\">const withPolaroidControls = createHigherOrderComponent((BlockEdit) =&gt; {\n\treturn (props) =&gt; {\n\t\tif (props.name !== 'core\/image') {\n\t\t\treturn &lt;BlockEdit {...props} \/&gt;;\n\t\t}\n\n\t\tconst { attributes, setAttributes, isSelected } = props;\n\t\tconst { imageAnimation, className, lightbox } = attributes;\n\n\t\tconst isPolaroid = className?.includes('is-style-polaroid');\n\n\t\tconst { createNotice } = useDispatch('core\/notices');\n\n\t\tuseEffect(() =&gt; {\n\t\t\tif (isPolaroid && lightbox?.enabled) {\n\t\t\t\t\/\/ Disable the lightbox to prevent the conflict.\n\t\t\t\tsetAttributes({ lightbox: { ...lightbox, enabled: false } });\n\n\t\t\t\t\/\/ Show the user a temporary 'snackbar' notice.\n\t\t\t\tcreateNotice(\n\t\t\t\t\t'warning', \/\/ The type of notice (info, success, warning, error)\n\t\t\t\t\t__('Lightbox disabled for Polaroid style.', 'image-hacker'),\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\tisDismissible: true,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t}, [isPolaroid, lightbox]);\n\n\t\treturn (\n\t\t\t&lt;Fragment&gt;\n\t\t\t\t&lt;BlockEdit {...props} \/&gt;\n\n\t\t\t\t&lt;BlockControls&gt;\n\t\t\t\t\t&lt;ToolbarGroup&gt;\n\t\t\t\t\t\t&lt;ToolbarButton\n\t\t\t\t\t\t\ticon=\"format-image\"\n\t\t\t\t\t\t\tlabel={__('Toggle Animation', 'image-hacker')}\n\t\t\t\t\t\t\tisActive={imageAnimation}\n\t\t\t\t\t\t\tonClick={() =&gt;\n\t\t\t\t\t\t\t\tsetAttributes({ imageAnimation: !imageAnimation })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/ToolbarGroup&gt;\n\t\t\t\t&lt;\/BlockControls&gt;\n\n\t\t\t\t{isSelected && isPolaroid && (\n\t\t\t\t\t&lt;InspectorControls&gt;\n\t\t\t\t\t\t&lt;PanelBody title={__('Polaroid Style', 'image-hacker')}&gt;\n\t\t\t\t\t\t\t&lt;Notice status=\"info\" isDismissible={false}&gt;\n\t\t\t\t\t\t\t\t{__(\n\t\t\t\t\t\t\t\t\t'The \"Expand on click\" (lightbox) feature is disabled for this style to prevent visual conflicts.',\n\t\t\t\t\t\t\t\t\t'image-hacker'\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t&lt;\/Notice&gt;\n\t\t\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t\t\t&lt;\/InspectorControls&gt;\n\t\t\t\t)}\n\t\t\t&lt;\/Fragment&gt;\n\t\t);\n\t};\n}, 'withPolaroidControls');<\/code><\/pre>\n<ul>\n<li><code>useEffect<\/code> is een React Hook waarmee &#8220;je een component kunt synchroniseren met een extern systeem.&#8221; De code wordt uitgevoerd nadat het component is gerenderd en telkens wanneer een waarde in de depedency-array <code>[isPolaroid, lightbox]<\/code> verandert. De controle wordt alleen uitgevoerd als de gebruiker de polaroidstijl toepast of verwijdert of de lightbox activeert of deactiveert (zie <a href=\"https:\/\/react.dev\/reference\/react\/useEffect\" target=\"_blank\" rel=\"noopener noreferrer\">React documentatie<\/a>).<\/li>\n<li>De voorwaarde <code>if (isPolaroid() && lightbox.enabled)<\/code> zorgt ervoor dat de code alleen wordt uitgevoerd als de afbeelding de polaroidstijl heeft en de lightboxoptie is ingeschakeld.<\/li>\n<li>Als de voorwaarde <code>true<\/code> is, wordt de lightbox uitgeschakeld en verschijnt er een tijdelijke waarschuwing. (Zie ook verwijzing <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-notices\/\" target=\"_blank\" rel=\"noopener noreferrer\">naar gegevens over meldingen<\/a>).<\/li>\n<li>De voorwaarde <code>isSelected && isPolaroid<\/code> genereert een nieuw paneel in de toolbar van het afbeeldingsblok om gebruikers te melden dat de lightbox is uitgeschakeld. In tegenstelling tot de snackbar geeft dit paneel een permanente waarschuwing weer.<\/li>\n<\/ul>\n<figure id=\"attachment_196858\" aria-describedby=\"caption-attachment-196858\" style=\"width: 2184px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196858 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/enlarge-on-click-disabled.jpg\" alt=\"De optie Enlarge on click bij klikken is uitgeschakeld.\" width=\"2184\" height=\"1406\"><figcaption id=\"caption-attachment-196858\" class=\"wp-caption-text\">De optie Enlarge on click bij klikken is uitgeschakeld.<\/figcaption><\/figure>\n<h2>Samenvatting<\/h2>\n<p>In deze tutorial hebben we ons verdiept in een aantal van de meest interessante en krachtige ontwikkelaarsfuncties van de WordPress block editor door de lens van een echt project: we hebben het kernblok Afbeelding uitgebreid met functionaliteiten die niet standaard beschikbaar zijn, met aangepaste stijlen en animatie-effecten.<\/p>\n<p>We volgden een progressieve verbeteringsaanpak en maakten een blokstijlvariatie voor het Image blok. Hiermee kunnen gebruikers hun afbeeldingen eenvoudig een klassieke Polaroid-look geven.<\/p>\n<p>Vervolgens hebben we een speciale knop toegevoegd aan de werkbalk van het Image blok, waarmee gebruikers een leuk hover-animatie-effect kunnen maken.<\/p>\n<p>Tot slot hebben we alles afgerond door een blokvariatie te maken die standaard is voorgeconfigureerd met de Polaroid stijl- en animatie-instellingen.<\/p>\n<p>We hopen dat de inzichten en technieken die je hebt opgedaan in deze tutorial je in staat zullen stellen om een aantal verrassende aanpassingen te maken voor de coreblokken van Gutenberg!<\/p>\n<p>Veel plezier met coderen!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg heeft zich ontwikkeld tot een krachtige en zeer aanpasbare editor. Naast de robuuste out-of-the-box features kunnen WordPress ontwikkelaars tegenwoordig ook gebruik maken van een rijke &#8230;<\/p>\n","protected":false},"author":36,"featured_media":63017,"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-63016","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 til je Gutenberg blokken naar een hoger niveau met stijlvariaties en blokvariaties<\/title>\n<meta name=\"description\" content=\"Wil je leren hoe je Gutenberg kunt hacken en geavanceerde functies kunt toevoegen aan je blokken met stijl- en blokvariaties? Mis deze tutorial niet!\" \/>\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\/stijl-blokvariaties-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo til je Gutenberg blokken naar een hoger niveau met stijlvariaties en blokvariaties\" \/>\n<meta property=\"og:description\" content=\"Wil je leren hoe je Gutenberg kunt hacken en geavanceerde functies kunt toevoegen aan je blokken met stijl- en blokvariaties? Mis deze tutorial niet!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-07T08:14:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-11T13:25:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/08\/gutenberg-style-variations-and-block-variations.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=\"Wil je leren hoe je Gutenberg kunt hacken en geavanceerde functies kunt toevoegen aan je blokken met stijl- en blokvariaties? Mis deze tutorial niet!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/08\/gutenberg-style-variations-and-block-variations.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=\"18 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Zo til je Gutenberg blokken naar een hoger niveau met stijlvariaties en blokvariaties\",\"datePublished\":\"2025-08-07T08:14:47+00:00\",\"dateModified\":\"2025-08-11T13:25:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/\"},\"wordCount\":2672,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"inLanguage\":\"nl-NL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/\",\"name\":\"Zo til je Gutenberg blokken naar een hoger niveau met stijlvariaties en blokvariaties\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"datePublished\":\"2025-08-07T08:14:47+00:00\",\"dateModified\":\"2025-08-11T13:25:14+00:00\",\"description\":\"Wil je leren hoe je Gutenberg kunt hacken en geavanceerde functies kunt toevoegen aan je blokken met stijl- en blokvariaties? Mis deze tutorial niet!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress ontwikkeling\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo til je Gutenberg blokken naar een hoger niveau met stijlvariaties en blokvariaties\"}]},{\"@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 til je Gutenberg blokken naar een hoger niveau met stijlvariaties en blokvariaties","description":"Wil je leren hoe je Gutenberg kunt hacken en geavanceerde functies kunt toevoegen aan je blokken met stijl- en blokvariaties? Mis deze tutorial niet!","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\/stijl-blokvariaties-gutenberg\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo til je Gutenberg blokken naar een hoger niveau met stijlvariaties en blokvariaties","og_description":"Wil je leren hoe je Gutenberg kunt hacken en geavanceerde functies kunt toevoegen aan je blokken met stijl- en blokvariaties? Mis deze tutorial niet!","og_url":"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2025-08-07T08:14:47+00:00","article_modified_time":"2025-08-11T13:25:14+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/08\/gutenberg-style-variations-and-block-variations.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Wil je leren hoe je Gutenberg kunt hacken en geavanceerde functies kunt toevoegen aan je blokken met stijl- en blokvariaties? Mis deze tutorial niet!","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/08\/gutenberg-style-variations-and-block-variations.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Carlo Daniele","Geschatte leestijd":"18 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Zo til je Gutenberg blokken naar een hoger niveau met stijlvariaties en blokvariaties","datePublished":"2025-08-07T08:14:47+00:00","dateModified":"2025-08-11T13:25:14+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/"},"wordCount":2672,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/08\/gutenberg-style-variations-and-block-variations.png","inLanguage":"nl-NL"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/","url":"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/","name":"Zo til je Gutenberg blokken naar een hoger niveau met stijlvariaties en blokvariaties","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/08\/gutenberg-style-variations-and-block-variations.png","datePublished":"2025-08-07T08:14:47+00:00","dateModified":"2025-08-11T13:25:14+00:00","description":"Wil je leren hoe je Gutenberg kunt hacken en geavanceerde functies kunt toevoegen aan je blokken met stijl- en blokvariaties? Mis deze tutorial niet!","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/08\/gutenberg-style-variations-and-block-variations.png","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/08\/gutenberg-style-variations-and-block-variations.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/stijl-blokvariaties-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WordPress ontwikkeling","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/"},{"@type":"ListItem","position":3,"name":"Zo til je Gutenberg blokken naar een hoger niveau met stijlvariaties en blokvariaties"}]},{"@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\/63016","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=63016"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/63016\/revisions"}],"predecessor-version":[{"id":63037,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/63016\/revisions\/63037"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63016\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63016\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63016\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63016\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63016\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63016\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63016\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63016\/translations\/pt"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63016\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/63017"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=63016"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=63016"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=63016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}