{"id":60706,"date":"2024-10-03T16:29:08","date_gmt":"2024-10-03T14:29:08","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=60706&#038;preview=true&#038;preview_id=60706"},"modified":"2024-10-04T09:51:13","modified_gmt":"2024-10-04T07:51:13","slug":"theme-json-blocks-property","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/","title":{"rendered":"Wat WordPress developers moeten weten over de blocks property in theme.json"},"content":{"rendered":"<p>De introductie van <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-full-site-editing\/\">Full-Site Editing (FSE)<\/a> in WordPress benadrukt het groeiende belang van het <code>theme.json<\/code> bestand. Er is inmiddels een hele nieuwe hi\u00ebrarchie en structuur om te begrijpen, samen met de verschillende properties om je te helpen bij het maken van je ontwerpen. Vooral de property <code>blocks<\/code> in <code>theme.json<\/code> is essentieel als je moderne, flexibele WordPress thema&#8217;s wilt maken met unieke blokken.<\/p>\n<p>In deze handleiding verkennen we de ins en outs van de <code>blocks<\/code> property in <code>theme.json<\/code>, zodat je kunt werken met Blocks en ze kunt ontwerpen en stylen om meer dynamische en aanpasbare WordPress ervaringen te cre\u00ebren.<\/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 blocks property in theme.json begrijpen<\/h2>\n<p>Voordat we in de fijne kneepjes van de <code>blocks<\/code> property duiken, laten we eerst de rol ervan begrijpen binnen <code>theme.json<\/code> en de ontwikkeling van WordPress thema&#8217;s.<\/p>\n<figure id=\"attachment_184921\" aria-describedby=\"caption-attachment-184921\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184921 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json-file.png\" alt=\"Een code editor venster met een deel van een theme.json bestand voor een WordPress thema. De JSON structuur definieert aangepaste templates voor \u201cblanco\u201d, \u201cblog-alternatief\u201d en \u201c404\u201d pagina's. De editor heeft een donker thema met syntax highlighting en de achtergrond toont een mistig boslandschap.\" width=\"1200\" height=\"970\"><figcaption id=\"caption-attachment-184921\" class=\"wp-caption-text\">Het bestand <strong>theme.json<\/strong> van Twenty Twenty-Three.<\/figcaption><\/figure>\n<p>Allereerst, <code>theme.json<\/code> is het <a href=\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/\">configuratiebestand<\/a> waarmee je globale stijlen en instellingen voor je thema&#8217;s kunt defini\u00ebren. Met deze &#8220;centrale hub&#8221; kun je verschillende aspecten van het uiterlijk en gedrag van je thema regelen, waaronder typografie, kleuren en layout opties. Het kan echter meer doen dan alleen programmatische cosmetische aanpassingen.<\/p>\n<p>Met de property <code>blocks<\/code> heb je uitgebreide controle op individuele bloktypes in plaats van op de site als geheel. Je kunt standaard stijlen, instellingen en gedrag defini\u00ebren voor specifieke blokken, wat zorgt voor consistentie in je thema en flexibiliteit voor site-eigenaren.<\/p>\n<h3>De relatie tussen de blocks property en full-site editing<\/h3>\n<p>FSE is een meer visuele benadering van het bouwen van je site met blokken als kern. Aan de voorkant heb je de meeste styling- en aanpassingsopties voor je hele site:<\/p>\n<figure id=\"attachment_184916\" aria-describedby=\"caption-attachment-184916\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184916 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/full-site-editor.png\" alt=\"Het hoofdscherm van de WordPress Site Editor, met een blauwe startpagina met de titel \u201cEen streven naar innovatie en duurzaamheid\u201d. De pagina featuret een moderne architectonische afbeelding en aanpassingsopties in een zwarte linker zijbalk.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184916\" class=\"wp-caption-text\">De Full Site Editing interface in WordPress.<\/figcaption><\/figure>\n<p>De property <code>blocks<\/code> is om een paar redenen een cruciaal onderdeel van het bestand <code>theme.json<\/code>:<\/p>\n<ul>\n<li>Het biedt een gestandaardiseerde manier om blokstijlen en instellingen te defini\u00ebren.<\/li>\n<li>Je kunt samenhangende ontwerpsystemen maken vanuit een programmatische basis.<\/li>\n<li>Je kunt meer controle bieden over het uiterlijk van blokken zonder dat je custom <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-css\/\">CSS<\/a> nodig hebt.<\/li>\n<li>De property helpt je bij het maken van blokpatronen en templates.<\/li>\n<\/ul>\n<p>Developers kunnen de property <code>blocks<\/code> gebruiken om thema&#8217;s te maken die optimaal gebruik maken van volledige full-site editing.<\/p>\n<h2>Hoe de blocks property te structureren (en zijn syntaxis)<\/h2>\n<p>De standaardisatie die de property <code>blocks<\/code> biedt, helpt als het gaat om structuur en syntaxis. Je nest hem altijd binnen het <code>settings<\/code> object:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"blocks\": {\n      \"core\/paragraph\": {\n        \"typography\": {\n          \"fontSizes\": [\n            {\n              \"name\": \"Small\",\n              \"slug\": \"small\",\n              \"size\": \"13px\"\n            },\n            {\n              \"name\": \"Medium\",\n              \"slug\": \"medium\",\n              \"size\": \"20px\"\n             }\n           ]\n\u2026<\/code><\/pre>\n<p>Het bovenstaande voorbeeld definieert custom lettergroottes voor een Paragraph blok. Het opsplitsen van de belangrijkste componenten is eenvoudig:<\/p>\n<ul>\n<li>Je nest de property <code>blocks<\/code> onder het object <code>settings<\/code>.<\/li>\n<li>Elk bloktype heeft een namespace en naam (<code>core\/paragraph<\/code> in dit geval).<\/li>\n<li>Vervolgens specificeer je de instellingen van het blok binnen het object.<\/li>\n<\/ul>\n<p>De instellingen omvatten het meeste van wat beschikbaar is voor globale stijlen. Ze kunnen bijvoorbeeld typografie, kleur, spacing en nog veel meer bevatten.<\/p>\n<h3>Globale blokinstellingen configureren<\/h3>\n<p>Laten we eens kijken hoe je globale instellingen definieert en vervolgens hoe dit de property <code>blocks<\/code> be\u00efnvloedt. Zo leg je een basis voor een consistent ontwerp in je hele thema.<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"typography\": {\n      \"fontSizes\": [\n        {\n          \"name\": \"Small\",\n          \"slug\": \"small\",\n          \"size\": \"13px\"\n        },\n        {\n          \"name\": \"Medium\",\n          \"slug\": \"medium\",\n          \"size\": \"20px\"\n        }\n\u2026<\/code><\/pre>\n<p>In dit voorbeeld defini\u00ebren we de globale lettergrootten die beschikbaar zijn voor alle blokken. In de WordPress Site Editor kun je deze opties vinden in het scherm <strong>Typography <\/strong>&gt;<strong> Elements <\/strong>&gt;<strong> Text<\/strong>:<\/p>\n<figure id=\"attachment_184915\" aria-describedby=\"caption-attachment-184915\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184915 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/elements-text.png\" alt=\"De WordPress Site Editor toont de opties van het paneel Styles voor tekst. Het toont lettertypeselectie en aanpassingsopties voor lettertype, grootte, uiterlijk, regelhoogte, spati\u00ebring en hoofdletters.\" width=\"1200\" height=\"883\"><figcaption id=\"caption-attachment-184915\" class=\"wp-caption-text\">De meeste typografie-instellingen van <strong>theme.json<\/strong> zijn ook toegankelijk in de site-editor.<\/figcaption><\/figure>\n<p>Elke lettergrootte die je definieert binnen <code>theme.json<\/code> correleert met een van de grootteopties hier:<\/p>\n<figure id=\"attachment_184922\" aria-describedby=\"caption-attachment-184922\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184922 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json-font-size.png\" alt=\"Een close-up van een code-editor met een deel van een WordPress theme.json bestand. De zichtbare code definieert lettergroottes, waaronder Small, Medium en Large met hun respectievelijke groottes in rem eenheden. De Large maat bevat een vloeiende typografie instelling. De editor gebruikt een donker thema met syntax highlighting tegen een wazige bosachtergrond.\" width=\"1200\" height=\"729\"><figcaption id=\"caption-attachment-184922\" class=\"wp-caption-text\">Je stelt de voorinstellingen voor de lettergrootte in binnen het <strong>theme.json<\/strong> bestand.<\/figcaption><\/figure>\n<p>Natuurlijk zijn er nog veel meer manieren om je thema vanaf hier aan te passen. Het idee is om een globaal ontwerp te maken dat in 80% van de gevallen werkt.<\/p>\n<p>Met de property <code>blocks<\/code> kun je die corestijlen van Block overschrijven om de laatste 20% te dekken. Met het scherm <b>Styles <\/b>in de Site Editor kun je ook de ontwerpinstellingen voor elk blok aanpassen:<\/p>\n<figure id=\"attachment_184908\" aria-describedby=\"caption-attachment-184908\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184908 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/block-styles-editor.png\" alt=\"Een close-up van de interface van de WordPress Site Editor, met opties voor Content Block, zoals Paragraaf, Afbeelding, Kop en Galerij. Het hoofd content gebied toont de startpagina van de site.\" width=\"1200\" height=\"838\"><figcaption id=\"caption-attachment-184908\" class=\"wp-caption-text\">Met de Site Editor kun je de instellingen voor alle WordPress blokken bewerken.<\/figcaption><\/figure>\n<p>Dit is uitstekend voor eindgebruikers, maar van minder waarde voor een ontwikkelaar. We richten ons op het gebruik van <code>theme.json<\/code> om te werken met de property <code>blocks<\/code>.<\/p>\n<h2>Hoe je individuele bloktypes kunt aanpassen<\/h2>\n<p>Hoewel globale instellingen belangrijk zijn om consistentie te behouden, ligt de echte kracht in het bereik van de <code>blocks<\/code> property om aan te passen. Met deze instelling kun je op enorm gedetailleerd niveau het uiterlijk en gedrag van specifieke blokken aanpassen aan het ontwerp van je thema, net als de Site Editor.<\/p>\n<p>Laten we eens kijken naar een voorbeeld van het aanpassen van het header blok voor je thema:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"blocks\": {\n      \"core\/heading\": {\n        \"typography\": {\n          \"fontSizes\": [\n            {\n              \"name\": \"Small\",\n              \"slug\": \"small\",\n              \"size\": \"20px\"\n            },\n            {\n              \"name\": \"Medium\",\n              \"slug\": \"medium\",\n              \"size\": \"30px\"\n            },\n            {\n              \"name\": \"Large\",\n              \"slug\": \"large\",\n              \"size\": \"40px\"\n            }\n            ],\n            \"fontWeight\": \"bold\"\n            },\n            \"color\": {\n              \"palette\": [\n                {\n                  \"name\": \"Heading Primary\",\n                  \"slug\": \"heading-primary\",\n                  \"color\": \"#333333\"\n                },\n                {\n                  \"name\": \"Heading Secondary\",\n                  \"slug\": \"heading-secondary\",\n                  \"color\": \"#666666\"\n                }\n              ]\n\u2026<\/code><\/pre>\n<p>Je kunt zien dat de attributen weerspiegelen hoe je globale wijzigingen zou maken. Laten we samenvatten wat we doen:<\/p>\n<ul>\n<li>We defini\u00ebren specifieke lettergroottes voor koppen en wijzen deze toe aan grootte labels.<\/li>\n<li>Het gewicht van het lettertype voor alle koppen wordt gewoon vet.<\/li>\n<li>Deze koppen krijgen ook een custom kleurenpalet.<\/li>\n<\/ul>\n<p>Dit zorgt ervoor dat onze koppen er in het hele ontwerp consistent uitzien. We hebben ook controle over deze elementen als we niet weten hoe de eindgebruiker ze zal toepassen, wat een consistent ontwerp ten goede komt.<\/p>\n<h3>De juiste combinatie van namespace en slug gebruiken<\/h3>\n<p>Wanneer je blok types callt, is het cruciaal dat je de juiste namespace en slug combinatie gebruikt. Anders zijn je wijzigingen niet van toepassing op de blokken die je wilt callen.<\/p>\n<p>Elk blok heeft een namespace en een slug. Core WordPress Blocks hebben meestal de <code>core<\/code> namespace. De slug is de naam van het blok:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"blocks\": {\n  \"core\/image\": {\n\u2026<\/code><\/pre>\n<p>Als je de slug voor een blok wilt weten, dan kun je kijken naar het specifieke <code>block.json<\/code> bestand. Je vindt dit in de <code>wp-includes\/blocks<\/code> directory. Hier heb je verschillende mappen die elk een <code>block.json<\/code> bestand bevatten. In elke map moeten de namespace en de slug voor het blok bovenaan het bestand staan:<\/p>\n<figure id=\"attachment_184910\" aria-describedby=\"caption-attachment-184910\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184910 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/code-directory.png\" alt=\"Een deel van een macOS Finder-venster met de content van de codedirectory. Er is ook een deel van een code-editor met een geopend block.json bestand. De zichtbare code definieert eigenschappen voor een WordPress blok met de naam \u201ccore\/code\u201d met de titel \u201cCode\u201d en een beschrijving over het weergeven van stukjes code.\" width=\"1200\" height=\"518\"><figcaption id=\"caption-attachment-184910\" class=\"wp-caption-text\">Het <strong>block.json<\/strong> bestand bevat belangrijke metadata voor elk afzonderlijk blok.<\/figcaption><\/figure>\n<p>Als je door deze mappen bladert, zie je dat de <code>wp-includes<\/code> map een eigen <code>theme.json<\/code> bestand heeft. Hoewel dit misschien verwarrend lijkt, is het eenvoudig uit te leggen.<\/p>\n<h2>Waarom theme.json standaard custom blokinstellingen bevat<\/h2>\n<p>WordPress&#8217; eigen <code>theme.json<\/code> bestand lijkt in eerste instantie misschien vreemd, namelijk omdat het geen thema is. Dit is echter geen toeval. De belangrijkste reden is om achterwaartse compatibiliteit met oudere versies van WordPress te ondersteunen.<\/p>\n<p>Het Button blok stelt bijvoorbeeld een randradius in:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"blocks\": {\n  \"core\/button\": {\n    \"border\": {\n      \"radius\": true\n     }\n  },\n\u2026<\/code><\/pre>\n<p>Andere blokken hebben vergelijkbare instellingen om te helpen bij de consistentie tussen verschillende versies van WordPress. Dit kan echter problemen veroorzaken als je er niet van op de hoogte bent.<\/p>\n<p>Als je globale instellingen probeert te defini\u00ebren en je vraagt je af waarom die wijzigingen niet gelden voor specifieke blokken, dan kan achterwaartse compatibiliteit het antwoord zijn. Natuurlijk kun je deze instellingen zonder problemen overschrijven in je eigen <code>theme.json<\/code> bestand.<\/p>\n<h2>Custom blokken ontwikkelen met theme.json<\/h2>\n<p>Het <code>theme.json<\/code> bestand is ideaal voor het aanpassen van bestaande blokken, maar de mogelijkheden ervan strekken zich ook uit tot het ontwikkelen van custom blokken. Je kunt <code>theme.json<\/code> gebruiken om standaard stijlen en instellingen te defini\u00ebren voor elk van je custom blokken. Dit helpt je bij het leveren van naadloze integratie met het ontwerp van je thema.<\/p>\n<p>Maar eerst moet je <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">het blok zelf bouwen<\/a>. Dit valt buiten het bestek van dit artikel, maar kort samengevat zijn er een paar facetten:<\/p>\n<ul>\n<li><strong>Het blok scaffolden.<\/strong> Dit omvat het opzetten van een lokale ontwikkelomgeving en het maken van de bestandsstructuur voor het hele blok.<\/li>\n<li><strong>Het <code>block.json<\/code> bestand bijwerken.<\/strong> Hier moet je de blok-identiteit veranderen en <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\" target=\"_blank\" rel=\"noopener noreferrer\">supports<\/a> toevoegen. Dit laatste zijn manieren om de ondersteuning voor specifieke WordPress functionaliteiten aan te geven. Je kunt bijvoorbeeld de uitlijning regelen, anchorvelden implementeren, werken met verschillende typografie-instellingen en meer.<\/li>\n<li><strong>Pas de JavaScript-bestanden van de Block aan.<\/strong> Zowel <code>index.js<\/code> als <code>edit.js<\/code> hebben code nodig om WordPress te vertellen hoe het blok werkt en om het te laten verschijnen in de site-editor.<\/li>\n<\/ul>\n<p>Mogelijk moet je ook <code>render.php<\/code> bewerken, statische rendering toevoegen en een heleboel andere taken uitvoeren. Op dit punt kun je stilistische wijzigingen aanbrengen op <code>theme.json<\/code>, net als bij elk ander blok. Laten we nu eens kijken naar <code>block.json<\/code>.<\/p>\n<h3>Het block.json bestand<\/h3>\n<p>Dit bestand is wat het WordPress ontwikkelteam de &#8220;canonical&#8221; manier noemt om blokken te registreren voor zowel de server- als de clientzijde. De metadata die je hier opneemt vertelt WordPress alles over het type blok en de ondersteunende bestanden:<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n  \"apiVersion\": 3,\n  \"name\": \"my-plugin\/notice\",\n  \"title\": \"Notice\",\n  \"category\": \"text\",\n  \"parent\": [ \"core\/group\" ],\n  \"icon\": \"star\",\n  \"description\": \"Shows warning, error or success notices...\",\n  \"keywords\": [ \"alert\", \"message\" ],\n  \"version\": \"1.0.3\",\n  \"textdomain\": \"my-plugin\",\n  \"attributes\": {\n    \"message\": {\n      \"type\": \"string\",\n      \"source\": \"html\",\n      \"selector\": \".message\"\n    }\n  },\n\u2026<\/code><\/pre>\n<p>Het is verwant aan de metadata die je bovenaan een <a href=\"https:\/\/kinsta.com\/php\/\">PHP<\/a> bestand zou plaatsen voor thema&#8217;s en plugins. Hoewel het bestand uitsluitend JSON gegevens gebruikt, kun je nog steeds code delen via PHP, <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> en CSS:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"editorScript\": \"file:.\/index.js\",\n\"script\": \"file:.\/script.js\",\n\"viewScript\": [ \"file:.\/view.js\", \"example-shared-view-script\" ],\n\"editorStyle\": \"file:.\/index.css\",\n\"style\": [ \"file:.\/style.css\", \"example-shared-style\" ],\n\"viewStyle\": [ \"file:.\/view.css\", \"example-view-style\" ],\n\"render\": \"file:.\/render.php\"\n\u2026<\/code><\/pre>\n<p>We komen hier later op terug in het gedeelte over variaties. Om dit gedeelte af te sluiten, moet je weten hoe je jouw custom blok als standaard kunt instellen in WordPress. Er zijn een paar manieren om dit te bereiken. De klassieke manier is om <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-custom-post-types\/\">een custom berichttype te registreren<\/a> en de blokken daarin op te nemen. Er zijn echter nog een paar andere methoden.<\/p>\n<p>Je kunt bijvoorbeeld een bestaand berichttype bijwerken om <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-berichttemplates\/#how-to-create-a-custom-wordpress-post-template\">er een bloktemplate aan toe te voegen<\/a>. Hier is een eenvoudig voorbeeld:<\/p>\n<pre><code class=\"language-php\">\u2026\nfunction load_post_type_patterns() {\n    \/\/ Define an initial pattern for the 'HypnoToad' post type\n    $post_type_object = get_post_type_object( 'hypnoToad' );\n    $post_type_object-&gt;template = array(\n    array(\n        'core\/block',\n\u2026<\/code><\/pre>\n<p>Een andere manier is om de hook <code>default_content<\/code> te callen en het blok te defini\u00ebren met markup:<\/p>\n<pre><code class=\"language-php\">function toad_content( $content, $post ) {\n    if ( $post-&gt;post_type === 'hypnoToad' ) {\n        $content ='\n        &lt;div class=\"wp-block-columns\"&gt;&lt;!-- wp:column \u2192\n        &lt;div class=\"wp-block-column\"&gt;\n        &lt;p&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        \n\n\n        &lt;div class=\"wp-block-column\"&gt;\n        &lt;p&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;\/div&gt;\n        <!-- \/wp:columns -->';\n    }\n    return $content;\n}\nadd_filter( 'default_content', 'toad_content', 10, 2 );<\/code><\/pre>\n<p>Natuurlijk zul je niet alleen JSON, <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML<\/a> en PHP gebruiken. Je zult ook andere talen gebruiken om te helpen met ontwerp en interactiviteit. Het goede nieuws is dat WordPress je een ongecompliceerde manier geeft om dit te doen.<\/p>\n<h2>Custom CSS properties gebruiken voor je blokken<\/h2>\n<p>Je kunt veel bereiken door gebruik te maken van de bestaande properties, attributen en objecten van <code>theme.json<\/code>, maar dat zal niet elk gebruik dekken. Het bestand geeft je de property <code>custom<\/code> die je zal helpen bij het maken van relevante CSS properties:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"custom\": {\n      \"toad\": \"hypno\"\n    }\n  }\n}<\/code><\/pre>\n<p>Hierin geef je een key-value paar op, dat verandert in een CSS variabele aan de voorkant:<\/p>\n<pre><code class=\"language-json\">body {\n    --wp--custom--toad: hypno;\n}<\/code><\/pre>\n<p>Merk op dat de variabele dubbele koppeltekens gebruikt om de elementen te scheiden. Over het algemeen zie je altijd <code>--wp--custom--<\/code>, die dan de sleutel aan het einde tagt. Soms definieer je variabelen en properties met camel case:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"custom\": {\n      \"hypnoToad\": \"active\"\n    }\n  }\n}<\/code><\/pre>\n<p>Hier zal WordPress koppeltekens gebruiken om de woorden te scheiden:<\/p>\n<pre><code class=\"language-json\">body {\n    --wp--custom--hypno-toad: active;\n}<\/code><\/pre>\n<p>Tussen de property <code>custom<\/code> en <code>block.json<\/code> heb je alle ruimte om je Blokken naar eigen inzicht op te bouwen, inclusief alle variaties die je wilt toevoegen.<\/p>\n<h2>Een snelle blik op blok-, stijl- en blokstijlvariaties<\/h2>\n<p>Voordat we verder gaan met het stylen met behulp van de <code>blocks<\/code> property, kijken we eerst naar variaties. Je hebt een paar verschillende variatietypes voor je ontwerpen, en de naamgevingsconventies kunnen ervoor zorgen dat je het verkeerde type gebruikt voor wat je nodig hebt. Hier volgt een overzicht van de verschillen:<\/p>\n<ul>\n<li><strong>Blokvariaties.<\/strong> Als je blok alternatieve versies heeft (denk aan een blok dat veel custom links weergeeft die door de gebruiker zijn ingesteld), dan is dit een blokvariatie. Het Social Media Blok is hier een goed voorbeeld van.<\/li>\n<li><strong>Stijlvariaties.<\/strong> Dit zijn alternatieve versies van <code>theme.json<\/code> die werken op je globale site. We behandelen dit hier niet, maar de meeste Block-thema&#8217;s bieden ze aan voor verschillende kleurenpaletten en typografie-instellingen.<\/li>\n<li><strong>Blokstijlvariaties.<\/strong> Dit neemt de kernfunctionaliteit van stijlvariaties over en stelt je in staat om alternatieve ontwerpen voor een Block te maken.<\/li>\n<\/ul>\n<p>Je vraagt je misschien af of je een blokvariatie of een blokstijlvariatie moet gebruiken; het antwoord is ongecompliceerd. Als de wijzigingen die je wilt aanbrengen binnen <code>theme.json<\/code> of met CSS kunnen worden doorgevoerd, maak dan een blokstijlvariatie. Iets anders vereist een blokvariatie.<\/p>\n<h3>Blokvariaties<\/h3>\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blokvariaties<\/a> registreer je met JavaScript. Het is een goed idee om een bestand te maken in de map van een thema, maar het kan overal naartoe gaan. Er is \u00e9\u00e9n regel nodig om een variatie te registreren in je JavaScript-bestand:<\/p>\n<pre><code class=\"language-js\">const registerBlockVariation = ( blockName, variation )<\/code><\/pre>\n<p>Voor de <code>blockName<\/code> moet je hier ook de namespace opgeven, net als bij de <code>blocks<\/code> property. Binnen het <code>variation<\/code> object voeg je de naam, titel, beschrijving, of de variatie standaard actief is en meer toe. Om het bestand in de Site Editor te laden, roep je gewoon de <code>enqueue_block_editor_assets<\/code> hook aan en <a href=\"https:\/\/kinsta.com\/nl\/blog\/wp-enqueue-scripts\/\">enqueue je je script<\/a> daarin.<\/p>\n<h3>Blokstijlvariaties<\/h3>\n<p>Voor blokstijlvariaties heb je <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-style-variations\" target=\"_blank\" rel=\"noopener noreferrer\">twee opties<\/a>:<\/p>\n<ul>\n<li>Gebruik de functie <code>register_block_style()<\/code> met PHP.<\/li>\n<li>Maak een <code>block-editor.js<\/code> JavaScript-bestand, gebruik de <code>registerBlockStyle()<\/code> functie op dezelfde manier als bij Blokvariaties en enqueue het script.<\/li>\n<\/ul>\n<p>Zodra je een blokstijlvariatie hebt geregistreerd, kun je de blok targeten met de property <code>variations<\/code>:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n  \"blocks\": {\n    \"core\/button\": {\n      \"variations\": {\n        \"outline\": {\n          \"border\": {\n            \"color\": \"var:preset|color|black\",\n            \"radius\": \"0\",\n            \"style\": \"solid\",\n            \"width\": \"3px\"\n          },\n\u2026<\/code><\/pre>\n<p>Dit betekent dat je misschien helemaal geen custom CSS nodig hebt &#8211; bijna elk aspect van het ontwerp van een blok is mogelijk via de property <code>blocks<\/code>.<\/p>\n<h2>Een standaard blok stylen met de blocks property van begin tot eind<\/h2>\n<p>Om te demonstreren hoe de property <code>blocks<\/code> werkt, laten we een voorbeeld uit de praktijk bekijken. Onze site gebruikt het thema Twenty Twenty-Four en gebruikt de standaard stijlvariant:<\/p>\n<figure id=\"attachment_184912\" aria-describedby=\"caption-attachment-184912\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184912 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/default-style-variation.png\" alt=\"De WordPress Site Editor toont een homepage aan de rechterkant, met het menu Styles aan de linkerkant. Er zijn verschillende opties om een alternatief kleurenschema te kiezen, samen met aanpassingsopties voor het palet.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184912\" class=\"wp-caption-text\">Elk thema wordt vaak geleverd met verschillende stijlvariaties die er anders uitzien.<\/figcaption><\/figure>\n<p>Tot nu toe ziet dit er voor ons ideaal uit &#8211; hoewel de koppen en de bodytekst qua kleur te veel op elkaar lijken. We willen een of beide kleuren veranderen om ze te onderscheiden. Als eindgebruiker of site-eigenaar kunnen we dit oplossen in de zijbalk Styles van de Site Editor. Als je naar <strong>Blocks <\/strong>&gt;<strong> Heading<\/strong> gaat, kun je op het element Text klikken en de kleur veranderen in iets geschikter:<\/p>\n<figure id=\"attachment_184920\" aria-describedby=\"caption-attachment-184920\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184920 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/styles-heading-editor.png\" alt=\"De interface van de WordPress Site Editor toont de startpagina van een website. Het hoofdinhoudsgebied toont een kop, een korte beschrijving en een knop Over ons, allemaal in het zwart. Daaronder staat een architectonische afbeelding van een modern gebouw met schuine houten latten. De rechter zijbalk toont de Stijlen opties, met een pop-out paneel om een tekstkleur te selecteren.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184920\" class=\"wp-caption-text\">Je kunt individuele blokinstellingen eenvoudig wijzigen vanuit de site-editor.<\/figcaption><\/figure>\n<p>Als developer kun je dit echter doen binnen <code>theme.json<\/code>. <span style=\"margin: 0px;padding: 0px\">Net als bij elk ander thema kun je het beste <a href=\"https:\/\/kinsta.com\/nl\/blog\/child-thema-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">een childthema maken<\/a><\/span> om alle wijzigingen die je aanbrengt te behouden. Een tweede voordeel is dat je <code>theme.json<\/code> bestand er netter uitziet.<\/p>\n<p>We maken een map binnen <code>wp-content\/themes\/<\/code> en noemen die <code>twentytwentyfour-child<\/code>. Voeg hier een geldig <code>style.css<\/code> bestand en een leeg <code>theme.json<\/code> bestand toe.<\/p>\n<figure id=\"attachment_184909\" aria-describedby=\"caption-attachment-184909\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184909 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/child-theme-directory.png\" alt=\"Een macOS bestandsverkennervenster voor het twentytwentyfour-child thema met twee bestanden: style.css en theme.json, wat aangeeft dat het thema is ingesteld voor WordPress ontwikkeling.\" width=\"1200\" height=\"614\"><figcaption id=\"caption-attachment-184909\" class=\"wp-caption-text\">Elke map met childthema&#8217;s heeft een <strong>style.css<\/strong> bestand en een <strong>theme.json<\/strong> bestand nodig.<\/figcaption><\/figure>\n<p>Vanaf hier kun je het JSON bestand openen en aan de slag gaan.<\/p>\n<h3>Een theme.json bestand maken en vullen voor het childthema<\/h3>\n<p>Het belangrijkste verschil tussen het maken van een ouder- en kindthema met betrekking tot <code>theme.json<\/code> is de structuur van het bestand. Je hoeft niet per se het schema op te geven of alles in het <code>settings<\/code> object te zetten. In ons geval moeten we de property <code>styles<\/code> gebruiken:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"styles\": {\n    \"blocks\": {}\n  }\n}<\/code><\/pre>\n<p>Vervolgens moeten we de namespace en slug vinden voor het Heading blok. In de offici\u00eble <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/core-blocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Core Blocks Reference Guide<\/a> staan deze allemaal opgesomd en er staat zelfs in welke attributen en properties het blok ondersteunt. De gids vertelt ons dat we de waarden <code>background<\/code>, <code>gradient<\/code>, <code>link<\/code>, en <code>text<\/code> kunnen aanpassen voor de property <code>color<\/code>.<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n  \"core\/heading\": {\n    \"color\": {}\n  }\n}<\/code><\/pre>\n<p>Nu de structuur compleet is, kunnen we gaan uitzoeken hoe we de tekst kunnen restylen.<\/p>\n<h3>Een kleurenschema vinden en de wijzigingen toepassen<\/h3>\n<p>Nu hebben we een kleur nodig die past bij onze behoeften. De standaardvariant van Twenty Twenty-Four heeft een uitstekend kleurenpalet en door het te controleren in een speciale contrastchecker krijgen we wat idee\u00ebn:<\/p>\n<figure id=\"attachment_184918\" aria-describedby=\"caption-attachment-184918\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184918 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/palette-contrast.png\" alt=\"De Coolors kleurpalet contrast checker toont verschillende kleurencombinaties met tekstvoorbeelden om de toegankelijkheid en leesbaarheid te beoordelen. Een vierkant met een rood gemarkeerd vak toont twee hexadecimale codes van compatibele contrasterende kleuren.\" width=\"1200\" height=\"820\"><figcaption id=\"caption-attachment-184918\" class=\"wp-caption-text\">Je kleurenschema&#8217;s controleren op het juiste toegankelijke contrast is een belangrijke stap bij het ontwerpen van een thema.<\/figcaption><\/figure>\n<p>Vervolgens kunnen we de kleurkeuze voor ons blok toevoegen aan <code>theme.json<\/code>. Omdat het hoofdthema van Twenty Twenty-Four custom CSS properties gebruikt om paletstijlen te defini\u00ebren, kunnen we dit hier ook callen:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"core\/paragraph\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" },\n\u2026<\/code><\/pre>\n<p>Als je de naam van een paletkleur moet weten, kun je die in de Site Editor vinden in de kleurenkiezer:<\/p>\n<figure id=\"attachment_184919\" aria-describedby=\"caption-attachment-184919\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184919 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/palette-editor-color.png\" alt=\"Een close-up van de interface van de Text Elements kleurenkiezer. Het toont een selectie van kleurstalen met hexadecimale kleurcodes, met de kleur Contrast ingesteld als de primaire optie.\" width=\"1200\" height=\"492\"><figcaption id=\"caption-attachment-184919\" class=\"wp-caption-text\">Je kunt de naam van een kleur vinden door ernaar te kijken binnen een Site Editor kleurenpalet.<\/figcaption><\/figure>\n<p>Zodra je je wijzigingen hebt opgeslagen, vernieuw je je site en zou je het nieuwe kleurenschema op zijn plaats moeten zien. Als dat niet het geval is, controleer dan of je de property <code>blocks<\/code> nest binnen het juiste object, want dit is een veelvoorkomend knelpunt.<\/p>\n<p>Als we naar de site kijken, is de tekst minder contrasterend en gemakkelijker te lezen. We willen echter nog steeds wat definitie zien tussen het Paragraph blok en de omringende koppen. Het standaardpalet van het thema heeft een aantal andere, krachtigere kleuren. We gaan de Accent \/ 3 kleur proberen voor het Heading blok:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n  \"core\/heading\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--accent-3)\" }\n  },\n  \"core\/paragraph\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" }\n  }\n}<\/code><\/pre>\n<p>Nadat je de wijzigingen hebt opgeslagen en de voorkant hebt vernieuwd, zie je dat het Heading blok meer definitie heeft:<\/p>\n<figure id=\"attachment_184907\" aria-describedby=\"caption-attachment-184907\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184907 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/accent-color-heading.png\" alt=\"De WordPress Site Editor toont een homepage met een headerafbeelding van een moderne architectonische structuur. De hoofdinhoud toont de tekst \u201cEen streven naar innovatie en duurzaamheid\u201d in een oranjerode kleur.\" width=\"1200\" height=\"677\"><figcaption id=\"caption-attachment-184907\" class=\"wp-caption-text\">De frontend wijzigt het kopblok op basis van de instellingen in <strong>theme.json<\/strong>.<\/figcaption><\/figure>\n<p>Dit hoeft niet het einde te zijn van je bewerkingen. Je kunt zelfs de opties van de Site Editor aanpassen vanaf <code>theme.json<\/code>.<\/p>\n<h3>Attribuutopties toevoegen aan blokken<\/h3>\n<p>De ondersteuningen van elk blok bepalen de opties binnen de Site Editor. Het Paragraph blok schakelt bijvoorbeeld standaard de drop caps feature uit.<\/p>\n<figure id=\"attachment_184917\" aria-describedby=\"caption-attachment-184917\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184917 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/no-drop-caps-option.png\" alt=\"De WordPress Site Editor toont een close-up van de rechter zijbalk met opties. Het zwevende paneel voor het aanpassen van Typografie toont opties voor lettertype, grootte, uiterlijk, linehoogte, spati\u00ebring, decoratie, ori\u00ebntatie en hoofdletters - maar geen drop cap.\" width=\"1200\" height=\"633\"><figcaption id=\"caption-attachment-184917\" class=\"wp-caption-text\">De Site Editor laat je niet standaard kiezen om drop caps te implementeren.<\/figcaption><\/figure>\n<p>We kunnen dit weer inschakelen in het bestand <code>theme.json<\/code> en de property <code>blocks<\/code>. Als we naar het referentiemateriaal kijken, kunnen we de typography-property gebruiken om de Drop Caps in te schakelen:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"core\/paragraph\": {\n  \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" },\n  \"typography\": { \"dropCap\": true }\n\u2026<\/code><\/pre>\n<p>Zodra we deze wijzigingen opslaan en de editor verversen, is de optie om een druppelkap in te schakelen weer beschikbaar:<\/p>\n<figure id=\"attachment_184914\" aria-describedby=\"caption-attachment-184914\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184914 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/drop-cap.png\" alt=\"De interface van de WordPress Blok-editor toont een alinea Lorem Ipsum tekst met een grote drop cap. Er zijn typografische aanpassingsopties zichtbaar op de rechter zijbalk en het geopende menu Meer elementen toont de ingeschakelde Drop cap optie.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184914\" class=\"wp-caption-text\">Het inschakelen van de Drop Cap functionaliteit in de WordPress Site Editor duurt enkele seconden met <strong>theme.json<\/strong>.<\/figcaption><\/figure>\n<p>Het bestand <code>theme.json<\/code> is niet alleen een configuratie voor het ontwerp. Het kan ook helpen bij het toevoegen en verwijderen van functionaliteit in de Site Editor.<\/p>\n<h2>Hoe Kinsta&#8217;s managed hosting je WordPress thema-ontwikkeling kan ondersteunen<\/h2>\n<p>De fijne kneepjes van thema-ontwikkeling en <code>theme.json<\/code> zijn afhankelijk van kwaliteitsoplossingen in de hele ontwikkelingsketen om te profiteren van het potentieel voor betere prestaties.<\/p>\n<p>Een lokale ontwikkelomgeving is cruciaal, want hiermee kun je WordPress sites maken, beheren en eraan sleutelen op je lokale machine. <a href=\"https:\/\/kinsta.com\/nl\/devkinsta\/\">DevKinsta<\/a> kan daarbij helpen.<\/p>\n<figure id=\"attachment_184913\" aria-describedby=\"caption-attachment-184913\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184913 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/devkinsta-interface.png\" alt=\"Het dashboard Site-info binnen DevKinsta. Het toont technische details zoals WordPress versie, webserver en database type, samen met opties om de site te beheren.\" width=\"1200\" height=\"689\"><figcaption id=\"caption-attachment-184913\" class=\"wp-caption-text\">De interface van DevKinsta.<\/figcaption><\/figure>\n<p>DevKinsta biedt veel voordelen:<\/p>\n<ul>\n<li>Het draait op Docker containers, wat betekent dat je je installatie isoleert van de rest van je machine. Zo kun je zonder zorgen je <code>theme.json<\/code> configuraties en custom blokken testen.<\/li>\n<li>Je kunt snelle iteraties maken in je <code>theme.json<\/code> bestand en de resultaten direct zien in je lokale omgeving.<\/li>\n<li>Het maken van meerdere lokale sites om je thema te testen met verschillende WordPress versies en configuraties is een fluitje van een cent.<\/li>\n<\/ul>\n<p>Bovendien gebruik je geen resources van je server totdat je tevreden en klaar bent. De <a href=\"https:\/\/kinsta.com\/nl\/blog\/kinsta-testomgevingen\/\">testomgevingen<\/a> van Kinsta bieden een ideale volgende stap. Je kunt snel een kopie van je productiesite maken en deze zelfs naar je lokale omgeving pullen om verder te werken.<\/p>\n<p>Dit is een geweldige manier om de prestaties van je thema te testen, vooral als je de testomgeving combineert met Kinsta&#8217;s <a href=\"https:\/\/kinsta.com\/nl\/docs\/wordpress-hosting\/wordpress-monitoring\/apm-tool\/\">Application Performance Monitoring<\/a> (APM) tool.<\/p>\n<p>Je kunt ook gebruikmaken van Kinsta&#8217;s Git-integratie in al je omgevingen. Hiermee kun je wijzigingen pushen en pull-en naar repo&#8217;s en van daaruit ook deployen.<\/p>\n<h2>Samenvatting<\/h2>\n<p>Het begrijpen van de property <code>blocks<\/code> in <code>theme.json<\/code> is een noodzakelijke stap voor alle thema-ontwikkelaars. Dit kan een globaal ontwerp unieker, samenhangender en relevanter maken. De volledige mogelijkheid om te werken met individuele kern- en custom blokinstellingen helpt elke gebruiker om de mogelijkheden van full-site editing te benutten. Bovendien betekent het beschikbaar hebben van deze opties in de Site Editor dat eindgebruikers hun eigen wijzigingen kunnen aanbrengen zonder code, terwijl je standaardopties presenteert.<\/p>\n<p>Heb je vragen over het gebruik van de property <code>blocks<\/code> met het bestand <code>theme.json<\/code>? Stel ze gerust in de comments hieronder!<\/p>","protected":false},"excerpt":{"rendered":"<p>De introductie van Full-Site Editing (FSE) in WordPress benadrukt het groeiende belang van het theme.json bestand. Er is inmiddels een hele nieuwe hi\u00ebrarchie en structuur om &#8230;<\/p>\n","protected":false},"author":199,"featured_media":60707,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[892,906],"class_list":["post-60706","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-ontwikkeling","topic-wordpress-websitedesign"],"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>Wat WordPress ontwikkelaars moeten weten over de blocks property in theme.json<\/title>\n<meta name=\"description\" content=\"Leer hoe je de theme.json blocks property kunt gebruiken om te profiteren van een gestroomlijnde aanpak voor de ontwikkeling van WordPress-thema&#039;s.\" \/>\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\/theme-json-blocks-property\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wat WordPress developers moeten weten over de blocks property in theme.json\" \/>\n<meta property=\"og:description\" content=\"Leer hoe je de theme.json blocks property kunt gebruiken om te profiteren van een gestroomlijnde aanpak voor de ontwikkeling van WordPress-thema&#039;s.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/\" \/>\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=\"2024-10-03T14:29:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-04T07:51:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/09\/blocks-property-in-theme-json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Leer hoe je de theme.json blocks property kunt gebruiken om te profiteren van een gestroomlijnde aanpak voor de ontwikkeling van WordPress-thema&#039;s.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/09\/blocks-property-in-theme-json-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\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\/theme-json-blocks-property\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Wat WordPress developers moeten weten over de blocks property in theme.json\",\"datePublished\":\"2024-10-03T14:29:08+00:00\",\"dateModified\":\"2024-10-04T07:51:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/\"},\"wordCount\":3188,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/09\/blocks-property-in-theme-json.png\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/\",\"name\":\"Wat WordPress ontwikkelaars moeten weten over de blocks property in theme.json\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/09\/blocks-property-in-theme-json.png\",\"datePublished\":\"2024-10-03T14:29:08+00:00\",\"dateModified\":\"2024-10-04T07:51:13+00:00\",\"description\":\"Leer hoe je de theme.json blocks property kunt gebruiken om te profiteren van een gestroomlijnde aanpak voor de ontwikkeling van WordPress-thema's.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/09\/blocks-property-in-theme-json.png\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/09\/blocks-property-in-theme-json.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#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\":\"Wat WordPress developers moeten weten over de blocks property in theme.json\"}]},{\"@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\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wat WordPress ontwikkelaars moeten weten over de blocks property in theme.json","description":"Leer hoe je de theme.json blocks property kunt gebruiken om te profiteren van een gestroomlijnde aanpak voor de ontwikkeling van WordPress-thema's.","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\/theme-json-blocks-property\/","og_locale":"nl_NL","og_type":"article","og_title":"Wat WordPress developers moeten weten over de blocks property in theme.json","og_description":"Leer hoe je de theme.json blocks property kunt gebruiken om te profiteren van een gestroomlijnde aanpak voor de ontwikkeling van WordPress-thema's.","og_url":"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2024-10-03T14:29:08+00:00","article_modified_time":"2024-10-04T07:51:13+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/09\/blocks-property-in-theme-json.png","type":"image\/png"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Leer hoe je de theme.json blocks property kunt gebruiken om te profiteren van een gestroomlijnde aanpak voor de ontwikkeling van WordPress-thema's.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/09\/blocks-property-in-theme-json-1024x512.png","twitter_creator":"@Kinsta_NL","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Jeremy Holcombe","Geschatte leestijd":"18 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Wat WordPress developers moeten weten over de blocks property in theme.json","datePublished":"2024-10-03T14:29:08+00:00","dateModified":"2024-10-04T07:51:13+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/"},"wordCount":3188,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/09\/blocks-property-in-theme-json.png","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/","url":"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/","name":"Wat WordPress ontwikkelaars moeten weten over de blocks property in theme.json","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/09\/blocks-property-in-theme-json.png","datePublished":"2024-10-03T14:29:08+00:00","dateModified":"2024-10-04T07:51:13+00:00","description":"Leer hoe je de theme.json blocks property kunt gebruiken om te profiteren van een gestroomlijnde aanpak voor de ontwikkeling van WordPress-thema's.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/09\/blocks-property-in-theme-json.png","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/09\/blocks-property-in-theme-json.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/#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":"Wat WordPress developers moeten weten over de blocks property in theme.json"}]},{"@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\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/nl\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/60706","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\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=60706"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/60706\/revisions"}],"predecessor-version":[{"id":60742,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/60706\/revisions\/60742"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60706\/translations\/en"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60706\/translations\/jp"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60706\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60706\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60706\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60706\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60706\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60706\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60706\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/60707"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=60706"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=60706"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=60706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}