{"id":53205,"date":"2023-06-13T11:44:37","date_gmt":"2023-06-13T09:44:37","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=53205&#038;preview=true&#038;preview_id=53205"},"modified":"2025-03-06T15:41:10","modified_gmt":"2025-03-06T14:41:10","slug":"wordpress-blokpatronen","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/","title":{"rendered":"Zo bouw je blokpatronen in WordPress"},"content":{"rendered":"<p>WordPress is een krachtig hulpmiddel waarmee je online kan publiceren en waarmee iedereen gemakkelijk tekstuele en\/of multimedia-inhoud kan maken en delen. Maar daarnaast is het ook een geweldig professioneel hulpmiddel voor ontwerpers, marketeers en ontwikkelaars, ongeacht hun achtergrond en vaardigheden.<\/p>\n<p>WordPress kan je meest waardevolle teamgenoot zijn en je helpen succesvol te zijn in verschillende beroepen.<\/p>\n<p>Met dat in gedachten hebben we op deze blog een reeks artikelen gepubliceerd om je te helpen de vaardigheden te verwerven die nodig zijn om een WordPress developer te worden:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">Zo bouw je custom Gutenberg blokken<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\">Zo maak je dynamische blokken voor Gutenberg<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-metabox-gutenberg\/\">Zo voeg je metaboxen en custom velden toe aan berichten in Gutenberg<\/a><\/li>\n<\/ul>\n<p>En voor degenen die de voorkeur geven aan videocontent, hebben we ook een gratis videocursus: <a href=\"https:\/\/kinsta.com\/courses\/gutenberg-block-development\/\">Custom blokken ontwikkelen voor Gutenberg<\/a>.<\/p>\n<p>En ja, je kunt je carri\u00e8reverwachtingen een boost geven met Gutenberg ontwikkelingsvaardigheden, maar je hoeft niet per se een ontwikkelaar te zijn om geavanceerde layouts te maken op je WordPress website.<\/p>\n<p>WordPress gebruikers kunnen profiteren van krachtige features waarmee ze eenvoudig geavanceerde bloklayouts kunnen maken zonder gedoe. In dit artikel richten we onze aandacht op <strong>blokpatterns<\/strong>.<\/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>Wat zijn blokpatterns<\/h2>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blokpatterns <\/a>zijn vooraf samengestelde groepen blokken die je kunt toevoegen aan je content en kunt aanpassen met dezelfde ontwerptools die beschikbaar zijn voor de meegeleverde blokken.<\/p>\n<p>Ze werden voor het eerst ge\u00efntroduceerd met <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-5\/#block-patterns\">WordPress 5.5<\/a> om sitebeheerders en makers van content in staat te stellen <strong>complexe kant-en-klare structuren van nested blokken<\/strong> in hun inhoud op te nemen met slechts een paar klikken.<\/p>\n<p>Blokkenthema&#8217;s bieden meestal een paar blokpatterns die je direct vanuit de blokinserter aan je inhoud kunt toevoegen. Het nieuwe standaardthema dat wordt meegeleverd met <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-7\/\">WordPress 6.7<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-five-thema\/\">Twenty Twenty-Five<\/a>, bevat +70 blokpatterns.<\/p>\n<figure id=\"attachment_187157\" aria-describedby=\"caption-attachment-187157\" style=\"width: 2158px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187157 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-patterns-in-ttf.jpg\" alt=\"Blokpatterns in het thema Twenty Twenty-Five\" width=\"2158\" height=\"1578\"><figcaption id=\"caption-attachment-187157\" class=\"wp-caption-text\">Blokpatterns in het thema Twenty Twenty-Five<\/figcaption><\/figure>\n<p>En je bent niet beperkt tot de patterns die je thema biedt.<\/p>\n<p>Ten eerste vind je tonnen kant-en-klare blokpatterns in de offici\u00eble WordPress <a href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pattern Gallery<\/a>.<\/p>\n<p>Daarnaast kun je een onbeperkt aantal patterns maken met behulp van de Patterns API of de bewerkingstools die beschikbaar zijn in de blokkeneditor. Je kunt custom patterns intern op je website gebruiken, ze exporteren naar andere websites of ze openbaar delen op de Patterns galerij.<\/p>\n<p>Sinds <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-3\/#a-new-block-pattern-system\">WordPress 6.3<\/a> maakt een gloednieuw patternsysteem het aanmaken van patterns flexibeler en eenvoudiger. Nu is het duidelijker wat voor soort layout je aan het bouwen bent en welk effect je aanpassingen hebben op je hele website.<\/p>\n<p>Er zijn twee hoofdsoorten blokpatterns:<\/p>\n<ul>\n<li>Gesynchroniseerde blokpatterns<\/li>\n<li>Standaard (niet gesynchroniseerde) blokpatterns<\/li>\n<\/ul>\n<p>Het belangrijkste verschil tussen de twee soorten is dat alle wijzigingen aan een gesynchroniseerde pattern van toepassing zijn op elke pattern op je hele website. Daarentegen hebben wijzigingen aan een standaard blokpattern alleen invloed op een specifieke pattern.<\/p>\n<p>Maar er valt nog veel meer te zeggen over blokpatterns. Vraag je je af hoe dit systeem werkt en hoe je kunt profiteren van de nieuwe bewerkingsfuncties die zijn toegevoegd aan de meest recente versies van WordPress? Laten we er eens naar kijken.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"5\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Kant-en-klare blokpatterns<\/h3>\n<p>Prebuilt patterns zijn &#8220;niet gesynchroniseerde&#8221; blokpatterns, wat betekent dat <strong>wijzigingen die je aanbrengt in een blokpattern alleen invloed hebben op de specifieke instantie die je aan het bewerken bent en niet worden toegepast op andere instanties die je hebt toegevoegd aan andere berichten of pagina&#8217;s van je website.<\/strong><\/p>\n<p>Je kunt vooraf gemaakte patterns gebruiken om bloklayouts op te nemen die je ter plekke kunt aanpassen door afbeeldingen, tekst, stijlen of het toevoegen\/verwijderen van elementen te wijzigen.<\/p>\n<p>Als je eenmaal een aangepast blokpattern hebt gemaakt, kun je het overal op je website toevoegen en het met een paar klikken aanpassen met de ingebouwde regelaars van de editor.<\/p>\n<figure id=\"attachment_187156\" aria-describedby=\"caption-attachment-187156\" style=\"width: 2162px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187156 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-inserter-with-patterns.jpg\" alt=\"De block inserter met patterns in WordPress 6.7\" width=\"2162\" height=\"1450\"><figcaption id=\"caption-attachment-187156\" class=\"wp-caption-text\">De block inserter met patterns in WordPress 6.7<\/figcaption><\/figure>\n<p>Je kunt vooraf gemaakte blokpatterns doorbladeren en invoegen via het tabblad <strong>Patterns <\/strong>in de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-2\/#a-revamped-block-inserter\">Block Inserter<\/a> of navigeren naar de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-3\/#patterns\">Patterns beheersectie<\/a> in de Site Editor. Je kunt ook nieuwe patterns ontdekken in de <a href=\"https:\/\/wordpress.org\/patterns\/\">Pattern Gallery<\/a>.<\/p>\n<figure id=\"attachment_187155\" aria-describedby=\"caption-attachment-187155\" style=\"width: 2924px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187155 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/pattern-directory.jpg\" alt=\"Patterns ontdekken in de WordPress Pattern Gallery\" width=\"2924\" height=\"1430\"><figcaption id=\"caption-attachment-187155\" class=\"wp-caption-text\">Patterns ontdekken in de WordPress Pattern Gallery<\/figcaption><\/figure>\n<p>In de galerij kun je een pattern kiezen, op de knop <strong>Copy pattern <\/strong>klikken en het direct in je inhoud plakken.<\/p>\n<figure id=\"attachment_187154\" aria-describedby=\"caption-attachment-187154\" style=\"width: 2158px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-187154\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/copy-pattern.jpg\" alt=\"Copy a pattern from the Pattern gallery\" width=\"2158\" height=\"1442\"><figcaption id=\"caption-attachment-187154\" class=\"wp-caption-text\">Een pattern kopi\u00ebren uit de Pattern Gallery<\/figcaption><\/figure>\n<figure id=\"attachment_187153\" aria-describedby=\"caption-attachment-187153\" style=\"width: 2164px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187153 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/paste-pattern.jpg\" alt=\"Plak de pattern in je content\" width=\"2164\" height=\"1406\"><figcaption id=\"caption-attachment-187153\" class=\"wp-caption-text\">Plak de pattern in je content<\/figcaption><\/figure>\n<p>Je bent vrij om de groep blokken in de pattern aan te passen zonder dat dit invloed heeft op het geregistreerde pattern of een extra instantie op je website.<\/p>\n\n<h3>Gesynchroniseerde en niet gesynchroniseerde blokpatterns<\/h3>\n<p>Zoals hierboven vermeld, is met WordPress 6.3 de patternsysteem gestroomlijnd en consistenter geworden.<\/p>\n<p>Het is nu eenvoudiger voor de gebruiker om je eigen patterns direct vanuit de blokeditor te maken en ze te beheren vanuit het WordPress dashboard zonder zich bezig te hoeven houden met code. Tegenwoordig kun je het volgende bouwen:<\/p>\n<ul>\n<li><strong>Gesynchroniseerde blokpatterns<\/strong><\/li>\n<li><strong>Niet gesynchroniseerde blokpatterns<\/strong><\/li>\n<\/ul>\n<p>Het verschil tussen de twee soorten patterns is dat <strong>alle wijzigingen die je aanbrengt in een gesynchroniseerde pattern worden toegepast op elke instantie van dat blok op je hele website.<\/strong><\/p>\n<p><strong>Andersom zullen wijzigingen in een niet gesynchroniseerd blokpattern alleen van invloed zijn op die specifieke instantie van de pattern en niet worden toegepast op andere instanties die je hebt toegevoegd aan andere berichten of pagina&#8217;s van je website.<\/strong><\/p>\n<p>Vanuit het oogpunt van een ontwikkelaar worden custom blokpatterns geregistreerd in de WordPress database als <code>wp_block<\/code> custom berichttypes, en een <code>wp_pattern_sync_status<\/code> metaveld slaat de synchronisatiestatus van een pattern op.<\/p>\n<figure id=\"attachment_158701\" aria-describedby=\"caption-attachment-158701\" style=\"width: 1594px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-158701\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/wp-block-sync-status.png\" alt=\"wp-block-sync-status\" width=\"1594\" height=\"54\"><figcaption id=\"caption-attachment-158701\" class=\"wp-caption-text\">Het metaveld <code>wp_pattern_sync_status<\/code> wordt gebruikt om de synchronisatiestatus van een blokpattern op te slaan<\/figcaption><\/figure>\n<p>Dankzij het nieuwe patternbeheersysteem kun je nu gesynchroniseerde en niet gesynchroniseerde blokpatterns rechtstreeks vanuit de site- of berichteditor maken. Je hoeft alleen maar je bloklayout te ontwerpen, de blokken te selecteren en op het pictogram met de drie puntjes in de werkbalk voor blokken te klikken. Kies vervolgens <strong>Create pattern <\/strong>in het vervolgkeuzemenu.<\/p>\n<p>In het onderstaande voorbeeld maken we een gesynchroniseerd pattern van een groepsblok, een kop, een alinea en een knop.<\/p>\n<figure id=\"attachment_187152\" aria-describedby=\"caption-attachment-187152\" style=\"width: 1594px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187152 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/create-pattern.png\" alt=\"Pattern maken\" width=\"1594\" height=\"1084\"><figcaption id=\"caption-attachment-187152\" class=\"wp-caption-text\">Pattern maken<\/figcaption><\/figure>\n<p>Als je op <strong>Create pattern <\/strong>klikt, wordt je gevraagd de naam en categorie\u00ebn voor je pattern in te vullen en te bepalen of het gesynchroniseerd is of niet.<\/p>\n<figure id=\"attachment_187151\" aria-describedby=\"caption-attachment-187151\" style=\"width: 1602px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187151 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/add-new-pattern.png\" alt=\"Nieuwe gesynchroniseerde pattern maken\" width=\"1602\" height=\"1234\"><figcaption id=\"caption-attachment-187151\" class=\"wp-caption-text\">Nieuwe gesynchroniseerde pattern maken<\/figcaption><\/figure>\n<p>En dat was het. Je gesynchroniseerde pattern staat nu in het gedeelte <b>Pattern management <\/b>van de site-editor onder <strong>My patterns<\/strong>.<\/p>\n<figure id=\"attachment_187150\" aria-describedby=\"caption-attachment-187150\" style=\"width: 2156px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187150 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/my-patterns.png\" alt=\"Custom patterns in de site-editor\" width=\"2156\" height=\"1446\"><figcaption id=\"caption-attachment-187150\" class=\"wp-caption-text\">Custom patterns in de site-editor<\/figcaption><\/figure>\n<p>Hier kun je een voorbeeld van je patterns bekijken en de synchronisatiestatus controleren.<\/p>\n<figure id=\"attachment_187148\" aria-describedby=\"caption-attachment-187148\" style=\"width: 2162px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187148 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/preview-my-pattern.png\" alt=\"Pattern voorbeeld\" width=\"2162\" height=\"1402\"><figcaption id=\"caption-attachment-187148\" class=\"wp-caption-text\">Pattern voorbeeld<\/figcaption><\/figure>\n<p>Vervolgens kun je de Pattern Editor starten en je blokpattern aanpassen.<\/p>\n<figure id=\"attachment_187149\" aria-describedby=\"caption-attachment-187149\" style=\"width: 2160px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187149 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/my-pattern.png\" alt=\"Een custom pattern in de site-editor\" width=\"2160\" height=\"1404\"><figcaption id=\"caption-attachment-187149\" class=\"wp-caption-text\">Een custom pattern in de site-editor<\/figcaption><\/figure>\n<p>Nogmaals, wijzigingen in gesynchroniseerde patterns zijn van invloed op elke keer dat de pattern op je website voorkomt. Wijzigingen in standaardpatterns hebben alleen invloed op toekomstige exemplaren van de pattern.<\/p>\n<p>Dit is mogelijk omdat WordPress de twee soorten patterns anders behandelt. Om het verschil te begrijpen, maak je een niet gesynchroniseerde kopie van je custom pattern, maak je een nieuw bericht of pagina en voeg je de twee patterns toe. Zodra je klaar bent, ga je naar de code editor en controleer je de code.<\/p>\n<figure id=\"attachment_187147\" aria-describedby=\"caption-attachment-187147\" style=\"width: 2160px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187147 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/patterns-in-code-editor.png\" alt=\"Twee verschillende blokpatterns vergeleken in de code-editor\" width=\"2160\" height=\"1288\"><figcaption id=\"caption-attachment-187147\" class=\"wp-caption-text\">Twee verschillende blokpatterns vergeleken in de code-editor<\/figcaption><\/figure>\n<p>Het gesynchroniseerde blok wordt gegenereerd door de volgende code:<\/p>\n<pre><code class=\"language-markup\">&lt;!-- wp:block {\"ref\":512} \/--&gt;<\/code><\/pre>\n<p>Dit betekent dat WordPress het bericht met ID <code>512<\/code> ophaalt om de HTML te genereren die op het scherm wordt weergegeven.<\/p>\n<p>Het tweede blok wordt niet ge\u00efdentificeerd met een ID. De code-editor bevat de volledige opmaak waaruit de pattern bestaat. Gesynchroniseerde patterns zijn vooral handig voor het maken van elementen die je op meerdere pagina&#8217;s van je website en\/of op verschillende websites wilt gebruiken.<\/p>\n<p>Denk aan oproepen tot actie, promotiebanners, prijstabellen, enzovoort. Zoals we al zeiden, beschouwt WordPress custom blokpatterns als <code>wp_block<\/code> posttypes en slaat ze als zodanig op in de <code>wp_posts<\/code> tabel.<\/p>\n<p>Als je eenmaal je patterns hebt gemaakt, kun je ze beheren vanuit het beheerscherm <strong>Patronen<\/strong>. Je kunt die pagina op verschillende manieren openen:<\/p>\n<ul>\n<li>Het toevoegen van <strong>\/wp-admin\/edit.php?post_type=wp_block<\/strong> aan de WordPress URL van je website.<\/li>\n<li>Klikken op de knop <strong>Discover all patterns<\/strong> in de Block inserter.<\/li>\n<li>Klikken op de knop <strong>My patterns <\/strong>in de site-editor.<\/li>\n<\/ul>\n<figure id=\"attachment_187146\" aria-describedby=\"caption-attachment-187146\" style=\"width: 2160px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187146 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/patterns-admin-screen.png\" alt=\"Patterns admin scherm\" width=\"2160\" height=\"1086\"><figcaption id=\"caption-attachment-187146\" class=\"wp-caption-text\">Patterns admin scherm<\/figcaption><\/figure>\n<p>In het scherm Patronen kun je<\/p>\n<ul>\n<li>Je pattern bewerken, weggooien of exporteren als JSON,<\/li>\n<li>Patronen importeren vanuit JSON,<\/li>\n<li>Nieuwe patterns maken.<\/li>\n<\/ul>\n<p>In de Site editor kun je ook je patterns dupliceren en hernoemen.<\/p>\n<h3>Gesynchroniseerde patternomleidingen<\/h3>\n<p>Synced Pattern Overrides, ge\u00efntroduceerd met <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-6\/#synced-pattern-overrides\">WordPress 6.6<\/a>, is een derde type pattern dat gebruik maakt van de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-5\/#block-bindings-api\">Block Bindings API<\/a> om de eigenschappen van beide typen patterns te krijgen.<\/p>\n<p>Met gesynchroniseerde patternoverschrijven kun je blokpatterns maken die overal op je website dezelfde structuur behouden en synchroon veranderen met de aanpassingen die je maakt aan de patternstructuur en -stijl in de site-editor. In dit opzicht zijn pattern overrides vergelijkbaar met gesynchroniseerde patterns.<\/p>\n<p>Patroonoverrides zijn echter ook vergelijkbaar met niet gesynchroniseerde patterns, omdat je de inhoud van specifieke blokken in de pattern kunt wijzigen zonder andere instanties van hetzelfde pattern op de site te be\u00efnvloeden.<\/p>\n<p><strong>Patroonovergangen zijndus gesynchroniseerde patterns met individuele niet gesynchroniseerde elementen. <\/strong><\/p>\n<p>Laten we eens kijken hoe je een pattern override maakt.<\/p>\n<p><strong>Stap 1:<\/strong> Ga naar <strong>Patronen<\/strong> en dupliceer een van de bestaande patterns, zoals de pattern <strong>Prijzen, 2 kolommen<\/strong> van het Twenty Twenty-Five standaardthema. Voeg een naam toe en zet de kopie op Gesynchroniseerd pattern.<\/p>\n<figure id=\"attachment_187142\" aria-describedby=\"caption-attachment-187142\" style=\"width: 2238px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187142 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/duplicate-pattern.jpg\" alt=\"Pattern dupliceren in WordPress 6.7\" width=\"2238\" height=\"1442\"><figcaption id=\"caption-attachment-187142\" class=\"wp-caption-text\">Pattern dupliceren in WordPress 6.7<\/figcaption><\/figure>\n<p><strong>Stap 2:<\/strong> Open <strong>Mijn patterns<\/strong> en zoek je nieuwe gesynchroniseerde pattern. Open het en selecteer een van de blokken die je moet overschrijven, zoals het kopblok.<\/p>\n<p>Ga naar de zijbalk met blokinstellingen en scroll naar beneden naar het gedeelte <strong>Geavanceerd<\/strong>. Hier vind je <strong>Overschrijven inschakelen<\/strong>.<\/p>\n<figure id=\"attachment_187141\" aria-describedby=\"caption-attachment-187141\" style=\"width: 2242px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187141 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/enable-overrides.jpg\" alt=\"Pattern overrides inschakelen\" width=\"2242\" height=\"1448\"><figcaption id=\"caption-attachment-187141\" class=\"wp-caption-text\">Pattern overrides inschakelen<\/figcaption><\/figure>\n<p>Als je op de knop klikt, wordt je gevraagd om een naam toe te voegen voor de overschrijding.<\/p>\n<figure id=\"attachment_187140\" aria-describedby=\"caption-attachment-187140\" style=\"width: 2216px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187140 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/disable-overrides-button.jpg\" alt=\"Eenmaal ingeschakeld, kun je pattern overrides uitschakelen\" width=\"2216\" height=\"982\"><figcaption id=\"caption-attachment-187140\" class=\"wp-caption-text\">Eenmaal ingeschakeld, kun je pattern overrides uitschakelen<\/figcaption><\/figure>\n<p><strong>Stap 3:<\/strong> Herhaal hetzelfde proces voor elk blok dat je wilt overschrijven. Als je klaar bent, maak je een nieuw bericht of pagina en voeg je je custom pattern toe.<\/p>\n<figure id=\"attachment_187139\" aria-describedby=\"caption-attachment-187139\" style=\"width: 2192px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187139 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/adding-pattern.jpg\" alt=\"Selecteer de pattern in de bericht-editor \" width=\"2192\" height=\"1400\"><figcaption id=\"caption-attachment-187139\" class=\"wp-caption-text\">Selecteer de pattern in de bericht-editor<\/figcaption><\/figure>\n<p><strong>Stap 4:<\/strong> Wijzig in de bericht-editor de inhoud van de blokken die je wilt overschrijven, sla het bericht op en controleer het resultaat aan de front-end.<\/p>\n<figure id=\"attachment_187138\" aria-describedby=\"caption-attachment-187138\" style=\"width: 2200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187138 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/edit-pattern-overrides.jpg\" alt=\"Een blokpattern met overrides in de bericht-editor\" width=\"2200\" height=\"992\"><figcaption id=\"caption-attachment-187138\" class=\"wp-caption-text\">Een blokpattern met overrides in de bericht-editor<\/figcaption><\/figure>\n<p>Het is je misschien opgevallen dat wanneer je een instantie van een patternoverschrijving bewerkt in de bericht-editor, de zijbalk met blokinstellingen de velden weergeeft die kunnen worden bewerkt. In het bovenstaande voorbeeld hebben we de koptekst en enkele alinea&#8217;s overridebaar gemaakt.<\/p>\n<p>Je kunt overal op je website een willekeurig aantal pattern overrides toevoegen, en elke instantie zal dezelfde oorspronkelijke structuur weergeven, maar is klaar voor jouw aanpassingen.<\/p>\n<p>Open nu je pattern in de site-editor en schakel over naar de code-editor. De code zou er ongeveer zo uit moeten zien:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:heading \n{\n\t\"textAlign\":\"center\",\n\t\"metadata\":{\n\t\t\"name\":\"Heading\",\n\t\t\"bindings\":{\n\t\t\t\"__default\":{\n\t\t\t\t\"source\":\"core\/pattern-overrides\"\n\t\t\t}\n\t\t}\n\t},\n\t\"align\":\"wide\"\n} \n--&gt;\n&lt;h2 class=\"wp-block-heading alignwide has-text-align-center\"&gt;Pricing&lt;\/h2&gt;\n&lt;!-- \/wp:heading --&gt;\n\n&lt;!-- wp:paragraph \n{\n\t\"align\":\"center\",\n\t\"metadata\":{\n\t\t\"name\":\"Subtitle\",\n\t\t\"bindings\":{\n\t\t\t\"__default\":{\n\t\t\t\t\"source\":\"core\/pattern-overrides\"\n\t\t\t}\n\t\t}\n\t}\n} \n--&gt;\n&lt;p class=\"has-text-align-center\"&gt;Cancel or pause anytime.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n<\/code><\/pre>\n<p>In het scheidingsteken van het blok zie je de property <code>metadata.bindings<\/code>. Dit maakt de blokken <b>Headers <\/b>en <b>Paragraphs <\/b>bewerkbaar. De eigenschap <code>__default<\/code> instrueert WordPress om <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/60694\" target=\"_blank\" rel=\"noopener noreferrer\">alle ondersteunde attributen te koppelen<\/a> aan een specifieke bron, namelijk <code>\"core\/pattern-overrides\"<\/code>.<\/p>\n<p>Ga nu in de Post editor naar <strong>Code editor<\/strong>. De code zou er ongeveer zo uit moeten zien als hieronder:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:block \n{\n\t\"ref\":518,\n\t\"content\":{\n\t\t\"Heading\":{\n\t\t\t\"content\":\"Choose your plan\"\n\t\t},\n\t\t\"Subtitle\":{\n\t\t\t\"content\":\"Try our services with no risk thanks to our 30-day guarantee\"\n\t\t},\n\t\t\"Plan 1 title\":{\n\t\t\t\"content\":\"Starter\"\n\t\t},\n\t\t\"Plan 2 title\":{\n\t\t\t\"content\":\"Business\"\n\t\t}\n\t}\n} \n\/--&gt;<\/code><\/pre>\n<p>Hier zie je een verwijzing naar de blokpattern en een set eigenschappen voor elk blok dat als bewerkbaar is ingesteld.<\/p>\n<p>Merk op dat, omdat patternoverschrijven een implementatie is van de Block Bindings API, je alleen ondersteunde blokken kunt overschrijven. Op het moment van schrijven ondersteunen Patroonoverschrijven de blokken <strong>Header<\/strong>, <strong>Paragraph<\/strong>, <b>Image <\/b>en <strong>Buttons<\/strong>.<\/p>\n<h3>Template parts<\/h3>\n<p>V\u00f3\u00f3r het <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">Gutenberg<\/a> tijdperk werden <a href=\"https:\/\/kinsta.com\/nl\/blog\/snelste-wordpress-thema\/\">WordPress thema&#8217;s<\/a> en templates voornamelijk in PHP gebouwd. Gedegen kennis van <a href=\"https:\/\/kinsta.com\/nl\/blog\/child-thema-wordpress\/#the-files-in-a-wordpress-child-theme\">child thema&#8217;s<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/template-hierarchie-van-wordpress\/\">template hi\u00ebrarchie<\/a> en de belangrijkste <a href=\"https:\/\/kinsta.com\/blog\/frontend-developer\/\">front-end ontwikkelingstalen<\/a> waren basisvereisten om templates te maken of aan te passen. Maar dingen veranderden met de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">introductie van blokthema&#8217;s<\/a>.<\/p>\n<p>In blokthema&#8217;s en klassieke thema&#8217;s die voor deze functie hebben gekozen, kun je eenvoudig een template of template part maken of aanpassen in de interface van de site-editor. Je hebt geen ontwikkelingsvaardigheden nodig, tenzij je natuurlijk besluit om thema-ontwikkelaar te worden.<\/p>\n<p><strong>Een <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blok-templates\/\">bloktemplate<\/a> is een lijst met template parts<\/strong>. Voorbeelden van blok parts zijn de sitetitel, het logo en de navigatie.<\/p>\n<p><strong>Template parts <\/strong>zijn specifieke secties van een pagina die op verschillende plaatsen kunnen worden gevisualiseerd, zoals een header en een footer, en die op elke pagina van je WordPress website kunnen worden weergegeven.<\/p>\n<p>Je kunt template parts maken en bewerken via de interface van de site-editor, waar je alle bewerkingstools kunt gebruiken die beschikbaar zijn voor blokken.<\/p>\n<figure id=\"attachment_187145\" aria-describedby=\"caption-attachment-187145\" style=\"width: 2156px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187145 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/add-new-template-part.png\" alt=\"Nieuwe template part toevoegen in WordPress 6.7\" width=\"2156\" height=\"938\"><figcaption id=\"caption-attachment-187145\" class=\"wp-caption-text\">Nieuwe template part toevoegen in WordPress 6.7<\/figcaption><\/figure>\n<figure id=\"attachment_187144\" aria-describedby=\"caption-attachment-187144\" style=\"width: 2156px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187144 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/add-new-template-part-modal.png\" alt=\"Nieuwe template part toevoegen in WordPress 6.7\" width=\"2156\" height=\"1346\"><figcaption id=\"caption-attachment-187144\" class=\"wp-caption-text\">Nieuwe template part toevoegen in WordPress 6.7<\/figcaption><\/figure>\n<p>In tegenstelling tot blokpatterns zijn template parts echter bedoeld voor delen van de site die niet vaak veranderen.<\/p>\n<figure id=\"attachment_187143\" aria-describedby=\"caption-attachment-187143\" style=\"width: 2160px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187143 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/edit-template-part.png\" alt=\"Een template part voor Footer  bewerken in het thema Twenty Twenty-Five\" width=\"2160\" height=\"1402\"><figcaption id=\"caption-attachment-187143\" class=\"wp-caption-text\">Een template part voor Footer bewerken in het thema Twenty Twenty-Five<\/figcaption><\/figure>\n<h3>Verschillen tussen patterns en template parts<\/h3>\n<p>Samengevat zijn dit de belangrijkste verschillen tussen de drie:<\/p>\n<h4>Vooraf gebouwde blokpatterns<\/h4>\n<ul>\n<li>Vooraf gebouwde blokpatterns zijn voorgedefinieerde bloklayouts die je kunt toevoegen aan je inhoud en kunt aanpassen met dezelfde gereedschappen als de meegeleverde blokken. Veranderingen aan een blokpattern hebben alleen invloed op dat ene exemplaar van de blokpattern.<\/li>\n<li>Je kunt kant-en-klare patterns kopi\u00ebren en plakken vanuit de map Pattern.<\/li>\n<li>Je kunt nieuwe patterns maken en publiceren in de map Pattern.<\/li>\n<\/ul>\n<h4>Custom blokpatterns<\/h4>\n<ul>\n<li>Custom blokpatterns zijn gesynchroniseerde of niet gesynchroniseerde groepen blokken die je kunt gebruiken op elke post of pagina van je website.<\/li>\n<li>Custom blokpatterns worden opgeslagen in de <code>wp_posts<\/code> tabel als <code>wp_block<\/code> berichttype.<\/li>\n<li>Je kunt custom blokpatterns importeren en exporteren van en naar andere websites.<\/li>\n<\/ul>\n<h4>Template parts<\/h4>\n<ul>\n<li>Template parts zijn specifieke delen van een pagina die kunnen worden weergegeven op verschillende locaties, waaronder de Header, Footer en Zijbalk, die terugkomen op verschillende pagina&#8217;s van je WordPress website.<\/li>\n<li>Je kunt template parts maken en bewerken via de interface van de site-editor.<\/li>\n<li>Template parts zijn bedoeld voor delen van de site die niet vaak veranderen.<\/li>\n<\/ul>\n<h2>Hoe maak je blokpatterns voor thema&#8217;s en plugins?<\/h2>\n<p>Zoals we al eerder zeiden, introduceerde WordPress 6.3 een nieuw systeem voor het beheer van blokpatterns. Het is nu gemakkelijker om gesynchroniseerde of niet gesynchroniseerde blokpatterns te maken zonder de editor interface te verlaten. En je kunt ook custom patterns importeren en exporteren met een paar klikken vanuit je WordPress dashboard.<\/p>\n<p>WordPress biedt echter ook andere manieren om blokpatterns te maken voor thema- en plugin-ontwikkelaars.<\/p>\n<p>Samen met de functie voor blokpatterns introduceerde <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-5\/\">WordPress 5.5<\/a> een nieuwe API voor ontwikkelaars om &#8220;vooraf ontworpen blokken met inhoud te maken die eenvoudig kunnen worden ingevoegd in berichten, pagina&#8217;s, custom berichttypen en templates&#8221; De nieuwe API biedt de functies <code>register_block_pattern<\/code> en <code>register_block_pattern_category<\/code> om blokpatterns en patterncategorie\u00ebn te registreren.<\/p>\n<p>Vanaf <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-0\/#block-patterns-everywhere\">WordPress 6.0<\/a> kun je ook blokpatterns registreren met een PHP-bestand.<\/p>\n<p>Op het moment van dit schrijven heb je dus twee manieren om een blokpattern aan te maken.<\/p>\n<ul>\n<li>Met behulp van de <code>register_block_pattern<\/code> helper functie,<\/li>\n<li>Een PHP bestand toevoegen aan je thema in een map met <strong>patterns<\/strong>.<\/li>\n<\/ul>\n<h3>Een blokpattern maken met een plugin<\/h3>\n<p>De eerste methode is vooral bedoeld voor WordPress ontwikkelaars, maar is eenvoudig genoeg om ook door niet-gevorderde ontwikkelaars te worden gebruikt.<\/p>\n<p>Als je voor de eerste methode kiest, kun je een blokpattern maken met de twee nieuwe functies <code>register_block_pattern<\/code> en <code>register_block_pattern_category<\/code> in het <a href=\"https:\/\/developer.wordpress.org\/plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">PHP bestand van een plugin<\/a> of de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-functions-php\/\">functions.php<\/a> van je thema.<\/p>\n<h4>Selecteer of registreer een patterncategorie<\/h4>\n<p>Kies eerst een categorie voor je pattern. Met de nieuwste WordPress versies zijn er nieuwe patterncategorie\u00ebn toegevoegd en zijn sommige bestaande categorie\u00ebn aangepast.<\/p>\n<p>Om de lijst met alle geregistreerde categorie\u00ebn te krijgen, open je de bericht-editor en plak je de volgende code in de console van de browser:<\/p>\n<pre><code class=\"language-javascript\">wp.data.select('core').getBlockPatternCategories()<\/code><\/pre>\n<p>In WordPress 6.7 met het thema Twenty Twenty-Five actief, krijg je de volgende lijst met patterncategorie\u00ebn:<\/p>\n<figure id=\"attachment_187173\" aria-describedby=\"caption-attachment-187173\" style=\"width: 1824px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187173 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/pattern-categories-wp-67.jpg\" alt=\"Patternncategorie\u00ebn in WordPress 6.7 met Twenty Twenty-Five thema\" width=\"1824\" height=\"1022\"><figcaption id=\"caption-attachment-187173\" class=\"wp-caption-text\">Patternncategorie\u00ebn in WordPress 6.7 met Twenty Twenty-Five thema<\/figcaption><\/figure>\n<p>Als je blokpattern niet in een van de standaardcategorie\u00ebn valt, kun je ook een nieuwe categorie registreren met de <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_pattern_category\/\" target=\"_blank\" rel=\"noopener noreferrer\">functie<code>register_block_pattern_category<\/code> <\/a>. Deze functie accepteert twee argumenten:<\/p>\n<ul>\n<li><code>$category_name<\/code>: Patrooncategorienaam inclusief namespace.<\/li>\n<li><code>$category_properties<\/code>: Een array van categorie-properties.<\/li>\n<\/ul>\n<p>Een voorbeeld helpt je beter te begrijpen hoe je een nieuwe patterncategorie registreert:<\/p>\n<pre><code class=\"language-php\">if ( function_exists( 'register_block_pattern_category' ) ) {\n\tfunction my_plugin_register_pattern_category() {\n\t\tregister_block_pattern_category( \n\t\t\t'my-pattern-category', \n\t\t\tarray(\n\t\t\t\t'label' =&gt; __( 'My Pattern Category', 'my-plugin-text-domain' ),\n\t\t\t\t'description' =&gt; __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),\n\t\t\t)\n\t\t);\n\t}\n\tadd_action( 'init', 'my_plugin_register_pattern_category' );\n}<\/code><\/pre>\n\n<h4>Een blokpattern registreren<\/h4>\n<p>Nadat de patterncategorie is geregistreerd, is de volgende stap het registreren van de blokpattern zelf. Je registreert de blokpattern als volgt met de <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_pattern\/\" target=\"_blank\" rel=\"noopener noreferrer\">helperfunctie<code>register_block_pattern<\/code>:<\/a><\/p>\n<pre><code class=\"language-php\">function my_plugin_register_block_pattern() {\n\tregister_block_pattern( 'prefix\/pattern-name', $props );\n}\nadd_action( 'init', 'my_plugin_register_block_pattern' );<\/code><\/pre>\n<p>Deze functie neemt twee argumenten:<\/p>\n<ul>\n<li><code>$pattern_name<\/code>: Een <strong>machineleesbare<\/strong> naam in de vorm van <code>namespace\/pattern-name<\/code>.<\/li>\n<li><code>$pattern_properties<\/code>: Een array met properties voor de pattern.<\/li>\n<\/ul>\n<p>Hier is een lijst van de momenteel beschikbare pattern properties:<\/p>\n<ul>\n<li><code>title<\/code> (verplicht): Een <strong>menselijk leesbare<\/strong> titel voor de pattern.<\/li>\n<li><code>content<\/code> (verplicht): De HTML opmaak voor de pattern.<\/li>\n<li><code>description<\/code>: Een tekst die de pattern in de inserter beschrijft. Een beschrijving is optioneel maar wordt aanbevolen omdat het gebruikers helpt de pattern te vinden.<\/li>\n<li><code>categories<\/code>: Een array van een of meer geregistreerde patterncategorie\u00ebn. Je moet een categorie registreren voordat je hem hier kunt gebruiken (zie de vorige paragraaf).<\/li>\n<li><code>keywords<\/code>: Een array van trefwoorden die gebruikers helpen de pattern te vinden.<\/li>\n<li><code>viewportWidth<\/code>: Een geheel getal dat de breedte van de pattern in de voorvertoning aangeeft.<\/li>\n<li><code>blockTypes<\/code>: Een optionele array van bloktypes die gebruikt worden met de pattern.<\/li>\n<li><code>postTypes<\/code>: Een array van berichttypen die de pattern mogen gebruiken.<\/li>\n<li><code>templateTypes<\/code>: Een matrix van sjabloontypes waar de pattern zinvol is (beschikbaar sinds <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-2\/#patterns-api-and-a-new-template_types-property\">WordPress 6.2<\/a>).<\/li>\n<li><code>inserter<\/code>: Een booleaan om te bepalen of de pattern zichtbaar moet zijn in de block inserter. Stel de waarde in op <code>false<\/code> om de pattern te verbergen. Standaard zullen alle patterns verschijnen in de blok inserter.<\/li>\n<li><code>source<\/code> (optioneel): Een string die de bron van de pattern identificeert. Geef de string <code>plugin<\/code> door als je de pattern van een plugin registreert. Geef voor een thema de string <code>theme<\/code> door.<\/li>\n<\/ul>\n<p>Hier is een voorbeeld van het gebruik van <code>register_block_pattern<\/code>:<\/p>\n<pre><code class=\"language-php\">if ( function_exists( 'register_block_pattern' ) ) {\n\tfunction my_plugin_register_block_pattern() {\n\t\tregister_block_pattern( \n\t\t\t'my-plugin\/my-block-pattern', \n\t\t\tarray(\n\t\t\t\t'title'\t\t\t=&gt; _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),\n\t\t\t\t'categories'\t=&gt; array( 'my-pattern-category' ),\n\t\t\t\t'postTypes'\t\t=&gt; array( 'post' ),\n\t\t\t\t'content'\t\t=&gt; '&lt;p&gt;My awesome block pattern&lt;\/p&gt;'\n\t\t\t) \n\t\t);\n\t}\n\tadd_action( 'init', 'my_plugin_register_block_pattern' );\n}<\/code><\/pre>\n<p>In deze code hebben we de property <code>postTypes<\/code> gebruikt om de beschikbaarheid van de pattern te beperken tot gewone blogberichten. Je hebt echter de flexibiliteit om een andere waarde in te stellen voor <code>postTypes<\/code> om het toegankelijk te maken voor verschillende berichttypes. Als je bijvoorbeeld een berichttype <code>product<\/code> hebt en je wilt de beschikbaarheid van de pattern beperken tot alleen dat specifieke type, dan schrijf je simpelweg:<\/p>\n<pre><code class=\"language-php\">'postTypes' =&gt; array( 'product' ),<\/code><\/pre>\n<p>Maak nu een nieuw bericht (of aangepast berichttype), open de blok inserter en klik op het label Patterns. Je zou een nieuwe patterncategorie (My Pattern Category) moeten vinden met je custom blokpattern. Speel gerust met pattern properties om je blokpatterns aan te passen.<\/p>\n<p>Laten we nu wat dieper duiken en proberen een echt blokpattern te maken.<\/p>\n<h4>Een praktijkvoorbeeld van een blokpattern<\/h4>\n<p>Stel dat je een blokpattern wilt maken met een kop, een afbeelding, een alinea en een knop.<\/p>\n<p>Maak in de editor de layout voor je blokpattern, schakel dan over naar de code-editor en kopieer de opmaak.<\/p>\n<figure id=\"attachment_154478\" aria-describedby=\"caption-attachment-154478\" style=\"width: 2048px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-154478 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/example-blocks.jpg\" alt=\"Een voorbeeldopmaak van blokken\" width=\"2048\" height=\"1092\"><figcaption id=\"caption-attachment-154478\" class=\"wp-caption-text\">Een voorbeeldopmaak van blokken<\/figcaption><\/figure>\n<p>In ons voorbeeld hebben we de volgende code:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:columns --&gt;\n&lt;div class=\"wp-block-columns\"&gt;&lt;!-- wp:column {\"width\":\"240px\"} --&gt;\n&lt;div class=\"wp-block-column\" style=\"flex-basis:240px\"&gt;&lt;!-- wp:image {\"id\":25,\"sizeSlug\":\"full\",\"linkDestination\":\"none\",\"style\":{\"border\":{\"radius\":{\"topLeft\":\"16px\"}}}} --&gt;\n&lt;figure class=\"wp-block-image size-full has-custom-border\"&gt;&lt;img src=\"http:\/\/wordpress-block-patterns.local\/wp-content\/uploads\/2023\/05\/placeholder.jpg\" alt=\"\" class=\"wp-image-25\" style=\"border-top-left-radius:16px\"\/&gt;&lt;\/figure&gt;\n&lt;!-- \/wp:image --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;\n\n&lt;!-- wp:column --&gt;\n&lt;div class=\"wp-block-column\"&gt;&lt;!-- wp:heading {\"level\":4,\"style\":{\"color\":{\"text\":\"#5831f6\"}}} --&gt;\n&lt;h4 class=\"wp-block-heading has-text-color\" style=\"color:#5831f6\"&gt;Your New Home for Modern Web Apps and Sites&lt;\/h4&gt;\n&lt;!-- \/wp:heading --&gt;\n\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:columns --&gt;\n\n&lt;!-- wp:buttons {\"layout\":{\"type\":\"flex\"}} --&gt;\n&lt;div class=\"wp-block-buttons\"&gt;&lt;!-- wp:button {\"textAlign\":\"center\",\"textColor\":\"base\",\"width\":100,\"style\":{\"color\":{\"background\":\"#5831f6\"},\"typography\":{\"fontSize\":\"1.36rem\"},\"border\":{\"radius\":{\"topLeft\":\"0px\",\"topRight\":\"0px\",\"bottomLeft\":\"16px\",\"bottomRight\":\"16px\"}}},\"fontFamily\":\"inter\"} --&gt;\n&lt;div class=\"wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family\" style=\"font-size:1.36rem\"&gt;&lt;a class=\"wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button\" style=\"border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6\"&gt;&lt;strong&gt;View Plans&lt;\/strong&gt;&lt;\/a&gt;&lt;\/div&gt;\n&lt;!-- \/wp:button --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:buttons --&gt;\n<\/code><\/pre>\n<p>Je kunt deze code nu optimaliseren. Als je de blokpattern met een plugin registreert, moet je de URL van de afbeelding als volgt wijzigen:<\/p>\n<pre><code class=\"language-php\">esc_url( plugin_dir_url( __FILE__ ) . 'images\/placeholder.jpg' )<\/code><\/pre>\n<p>Op deze manier zoekt WordPress de afbeelding niet in de <strong>uploads<\/strong>, maar in de <b>images <\/b>map van je plugin.<\/p>\n<p>Je kunt dan de property <code>viewportWidth<\/code> gebruiken om een betere voorvertoning van de pattern te geven in de blok inserter:<\/p>\n<pre><code class=\"language-php\">'viewportWidth' =&gt; 800,<\/code><\/pre>\n<figure id=\"attachment_154477\" aria-describedby=\"caption-attachment-154477\" style=\"width: 2244px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-154477 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/example-block-pattern.jpg\" alt=\"Een custom blokpattern toevoegen aan een blogbericht vanuit de Block Inserter\" width=\"2244\" height=\"1420\"><figcaption id=\"caption-attachment-154477\" class=\"wp-caption-text\">Een custom blokpattern toevoegen aan een blogbericht vanuit de Block Inserter<\/figcaption><\/figure>\n<p>Je kunt ook een reeks trefwoorden toevoegen om gebruikers te helpen je blokpattern te vinden:<\/p>\n<pre><code class=\"language-php\">'keywords' =&gt; array( 'cta', 'demo', 'kinsta' ),<\/code><\/pre>\n<figure id=\"attachment_154482\" aria-describedby=\"caption-attachment-154482\" style=\"width: 2050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-154482 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/pattern-keyword.jpg\" alt=\"Trefwoorden toevoegen om gebruikers te helpen je blokpattern te vinden\" width=\"2050\" height=\"1048\"><figcaption id=\"caption-attachment-154482\" class=\"wp-caption-text\">Trefwoorden toevoegen om gebruikers te helpen je blokpattern te vinden<\/figcaption><\/figure>\n<p>Een andere optie om gebruikers te helpen het blok te vinden in zoekopdrachten is het toevoegen van een array van bloktypes:<\/p>\n<pre><code class=\"language-php\">'blockTypes' =&gt; array( 'core\/button' ),<\/code><\/pre>\n<p>Op deze manier zal de blokpattern verschijnen in suggesties wanneer een gebruiker zoekt naar een van de opgegeven blokken.<\/p>\n<p>Met de property <code>postTypes<\/code> kun je de blokpattern alleen beschikbaar maken voor specifieke berichttypen. Je kunt de pattern bijvoorbeeld alleen zichtbaar maken voor het berichttype <code>product<\/code>:<\/p>\n<pre><code class=\"language-php\">'postTypes' =&gt; array( 'product' ),<\/code><\/pre>\n<p>Tot slot kun je <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/block-patterns\/#including-custom-css-classes-in-your-patterns\" target=\"_blank\" rel=\"noopener noreferrer\">een CSS class toevoegen<\/a> aan de wrapper van je blokpattern.<\/p>\n<p>Om dat te doen, moet je een nieuwe groep maken met het <code>className<\/code> attribuut:<\/p>\n<pre><code class=\"language-html\">\n&lt;div class=\"wp-block-group my-css-class\"&gt;\n\t<!-- Your blocks -->\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Merk op dat je dezelfde klassenaam moet toevoegen aan het volgende <code>div<\/code> element.<\/p>\n<p>Voor een beter beeld van blokpatterns en meer codevoorbeelden, zie ook <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/block-patterns\/\" target=\"_blank\" rel=\"noopener noreferrer\">Block Patterns<\/a> in het WordPress.org <a href=\"https:\/\/developer.wordpress.org\/themes\/\" target=\"_blank\" rel=\"noopener noreferrer\">Theme Handbook<\/a>.<\/p>\n<h3>Een blokpattern maken met een bestand<\/h3>\n<p>Zoals hierboven vermeld, heeft WordPress 6.0 een <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-0\/#block-patterns-everywhere\">nieuwe en eenvoudigere om blokpatterns toe te voegen<\/a> aan je <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-een-wordpress-thema\/\">WordPress thema&#8217;s<\/a>. Je kunt nu impliciet blokpatterns registreren door ze als PHP-bestanden te declareren in een map <strong>\/patterns<\/strong> in de root van je thema.<\/p>\n<p>Stel dat je impliciet hetzelfde blokpattern wilt registreren als in de vorige paragraaf in je blokthema. In dit voorbeeld gebruiken we het <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-three-thema\/\">thema Twenty Twenty-Three<\/a>.<\/p>\n<p>Je kunt dezelfde parameters instellen als bij de vorige methode, maar ze opnemen in een opmerking in de header van het bestand. In plaats van parameternamen in camelCase te gebruiken, scheid je de woorden met een spatie en in plaats van arrays gebruik je door komma&#8217;s gescheiden lijstitems.<\/p>\n<p>Deactiveer eerst de plugin die je in het vorige voorbeeld hebt gebruikt om de pattern te registreren. Maak dan een nieuw <strong>my-block-pattern.php<\/strong> bestand en voeg de volgende header toe:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Title: My awesome pattern\n * Slug: twentytwentythree\/my-block-pattern\n * Post Types: post\n * Categories: featured, banner\n * Viewport Width: 800\n * Keywords: Call to action, Kinsta\n * Block Types: core\/buttons\n *\/\n?&gt;<\/code><\/pre>\n<p>Vervolgens voeg je de inhoud toe aan je blokpattern. Je kunt dezelfde opmaak gebruiken als in ons vorige voorbeeld, maar eerst moet je het een beetje veranderen:<\/p>\n<pre><code class=\"language-php\">&lt;!-- wp:columns --&gt;\n&lt;div class=\"wp-block-columns\"&gt;&lt;!-- wp:column {\"width\":\"240px\"} --&gt;\n&lt;div class=\"wp-block-column\" style=\"flex-basis:240px\"&gt;&lt;!-- wp:image {\"id\":25,\"sizeSlug\":\"full\",\"linkDestination\":\"none\",\"style\":{\"border\":{\"radius\":{\"topLeft\":\"16px\"}}}} --&gt;\n&lt;figure class=\"wp-block-image size-full has-custom-border\"&gt;&lt;img src=\"&lt;?php echo esc_url( get_theme_file_uri( 'assets\/images\/placeholder.jpg' ) ); ?&gt;\" alt=\"\" class=\"wp-image-25\" style=\"border-top-left-radius:16px\"\/&gt;&lt;\/figure&gt;\n&lt;!-- \/wp:image --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;\n\n&lt;!-- wp:column --&gt;\n&lt;div class=\"wp-block-column\"&gt;&lt;!-- wp:heading {\"level\":4,\"style\":{\"color\":{\"text\":\"#5831f6\"}}} --&gt;\n&lt;h4 class=\"wp-block-heading has-text-color\" style=\"color:#5831f6\"&gt;Your New Home for Modern Web Apps and Sites&lt;\/h4&gt;\n&lt;!-- \/wp:heading --&gt;\n\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:columns --&gt;\n\n&lt;!-- wp:buttons {\"layout\":{\"type\":\"flex\"}} --&gt;\n&lt;div class=\"wp-block-buttons\"&gt;&lt;!-- wp:button {\"textAlign\":\"center\",\"textColor\":\"base\",\"width\":100,\"style\":{\"color\":{\"background\":\"#5831f6\"},\"typography\":{\"fontSize\":\"1.36rem\"},\"border\":{\"radius\":{\"topLeft\":\"0px\",\"topRight\":\"0px\",\"bottomLeft\":\"16px\",\"bottomRight\":\"16px\"}}},\"fontFamily\":\"inter\"} --&gt;\n&lt;div class=\"wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family\" style=\"font-size:1.36rem\"&gt;&lt;a class=\"wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button\" style=\"border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6\"&gt;&lt;strong&gt;&lt;?php echo __( 'View plans', 'text-domain' ); ?&gt;&lt;\/strong&gt;&lt;\/a&gt;&lt;\/div&gt;\n&lt;!-- \/wp:button --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:buttons --&gt;\n<\/code><\/pre>\n<p>De opmaak is in wezen ongewijzigd ten opzichte van het vorige voorbeeld. We hebben slechts twee wijzigingen aangebracht. De URL van de placeholder afbeelding wordt nu gegenereerd door de <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_theme_file_uri\/\" target=\"_blank\" rel=\"noopener noreferrer\">functie<code>get_theme_file_uri<\/code>:<\/a><\/p>\n<pre><code class=\"language-php\">&lt;?php echo esc_url( get_theme_file_uri( 'assets\/images\/placeholder.jpg' ) ); ?&gt;<\/code><\/pre>\n<p>Natuurlijk moet je eerst de <strong>placeholder.jpg<\/strong> afbeelding in de map <strong>\/assets\/images<\/strong> van je thema plaatsen.<\/p>\n<p>De volgende instructie genereert de tekst die je wilt vertalen.<\/p>\n<pre><code class=\"language-php\">&lt;?php echo __( 'View plans', 'text-domain' ); ?&gt;<\/code><\/pre>\n<p>Sla nu je bestand op en maak een nieuw bericht aan. Je blokpattern zou moeten verschijnen in de categorie\u00ebn <b>Featured <\/b>en <strong>Banners<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f <\/strong>Merk op dat de PHP-code die je aan je pattern toevoegt alleen wordt uitgevoerd als de pattern wordt toegevoegd aan je inhoud. Eenmaal geplaatst in het bericht gedragen blokpatterns zich als statische blokken.<\/p>\n<\/aside>\n\n<h2>Ondersteuning verwijderen, afmelden en blokpatterns verbergen<\/h2>\n<p>In sommige scenario&#8217;s wil je speciale acties uitvoeren op blokpatterns. Je wilt bijvoorbeeld een core blokpattern vervangen door een eigen blokpattern of een categorie onder bepaalde voorwaarden uitschrijven. Dit zijn de bewerkingen die je kunt uitvoeren.<\/p>\n<h3>1. Ondersteuning voor alle core blokpatterns verwijderen<\/h3>\n<p>Ten eerste kunnen thema-ontwikkelaars de ondersteuning voor core blokpatterns verwijderen en hun eigen set patterns aanbieden. Om ondersteuning voor core patterns te verwijderen, kun je de <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/remove_theme_support\/\" target=\"_blank\" rel=\"noopener noreferrer\">functie<code>remove_theme_support<\/code> <\/a> op deze manier gebruiken:<\/p>\n<pre><code class=\"language-php\">remove_theme_support( 'core-block-patterns' );<\/code><\/pre>\n<p>Het wordt aanbevolen om de <code>remove_theme_support<\/code> functie te koppelen aan de <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/after_setup_theme\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>after_setup_theme<\/code> haak<\/a>.<\/p>\n<h3>2. Een los blokpattern uitschrijven<\/h3>\n<p>Je kunt ook een specifiek blokpattern uitschrijven als je een aangepast alternatief wilt bieden of niet wilt dat het wordt gebruikt met je thema.<\/p>\n<p>De Patronen API biedt daarvoor de <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/unregister_block_pattern\/\" target=\"_blank\" rel=\"noopener noreferrer\">functie<code>unregister_block_pattern<\/code>:<\/a><\/p>\n<pre><code class=\"language-php\">function my_theme_unregister_block_pattern() {\n\tunregister_block_pattern( 'namespace\/block-pattern-name' );\n}\nadd_action( 'init', 'my_theme_unregister_block_pattern' );<\/code><\/pre>\n<p>In het geval dat je ook een core blokpattern kunt afmelden, gebruik je het volgende:<\/p>\n<pre><code class=\"language-php\">function my_theme_unregister_block_pattern() {\n\tunregister_block_pattern( 'core\/query-offset-posts' );\n}\nadd_action( 'init', 'my_theme_unregister_block_pattern' );<\/code><\/pre>\n<p>Je gebruikt <code>unregister_block_pattern<\/code> met de <code>init<\/code> hook.<\/p>\n<h3>3. Een blokpatterncategorie uitschrijven<\/h3>\n<p>Je kunt ook een patterncategorie uitschrijven door de <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/unregister_block_pattern_category\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>unregister_block_pattern_category<\/code><\/a> functie in de hook <code>init<\/code>:<\/p>\n<pre><code class=\"language-php\">function my_theme_unregister_block_pattern_categories() {\n\tunregister_block_pattern_category( 'pattern-category-name' );\n}\nadd_action( 'init', 'my_theme_unregister_block_pattern_categories' );<\/code><\/pre>\n<h2>Blokpatterns maken en delen met de Pattern Creator<\/h2>\n<p>Je kunt ook patterns maken en delen met de gemeenschap met een gratis online tool: <a href=\"https:\/\/wordpress.org\/news\/2022\/03\/get-creative-with-the-all-new-pattern-creator\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Pattern Creator<\/a>.<\/p>\n<p>Als je een WordPress.org account hebt, kun je de Pattern Creator openen vanuit de <a href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pattern directory<\/a>.<\/p>\n<figure id=\"attachment_154620\" aria-describedby=\"caption-attachment-154620\" style=\"width: 2940px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-154620 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/pattern-directory.jpg\" alt=\"De WordPress.org Pattern Directory\" width=\"2940\" height=\"1618\"><figcaption id=\"caption-attachment-154620\" class=\"wp-caption-text\">De WordPress.org Pattern Directory<\/figcaption><\/figure>\n<p>Klik daar op <a href=\"https:\/\/wordpress.org\/patterns\/new-pattern\/\" target=\"_blank\" rel=\"noopener noreferrer\">Create new pattern<\/a>. Dit start een patternspecifieke versie van de block editor die je kunt gebruiken om je blokkenpatterns te maken.<\/p>\n<figure id=\"attachment_154621\" aria-describedby=\"caption-attachment-154621\" style=\"width: 2508px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-154621 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/pattern-creator.jpg\" alt=\"De Pattern Creator is een gratis online bewerkingstool van WordPress.org\" width=\"2508\" height=\"1378\"><figcaption id=\"caption-attachment-154621\" class=\"wp-caption-text\">De Pattern Creator is een gratis online bewerkingstool van WordPress.org<\/figcaption><\/figure>\n<p>Je kunt ook gratis afbeeldingen gebruiken die worden gehost door de <a href=\"https:\/\/openverse.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Openverse bibliotheek<\/a>.<\/p>\n<figure id=\"attachment_154622\" aria-describedby=\"caption-attachment-154622\" style=\"width: 2502px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-154622 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/pattern-media.jpg\" alt=\"Pattern afbeeldingen worden geleverd door Openverse.\" width=\"2502\" height=\"1444\"><figcaption id=\"caption-attachment-154622\" class=\"wp-caption-text\">Pattern afbeeldingen worden geleverd door Openverse.<\/figcaption><\/figure>\n<p>Als je tevreden bent met je wijzigingen, kun je het ontwerp opslaan of de pattern opsturen voor revisie.<\/p>\n<figure id=\"attachment_154623\" aria-describedby=\"caption-attachment-154623\" style=\"width: 2506px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-154623 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/building-pattern.jpg\" alt=\"Een pattern maken in de Pattern Creator\" width=\"2506\" height=\"1376\"><figcaption id=\"caption-attachment-154623\" class=\"wp-caption-text\">Een pattern maken in de Pattern Creator<\/figcaption><\/figure>\n<p>Je kunt dan teruggaan naar de map Patronen en <a href=\"https:\/\/wordpress.org\/patterns\/my-patterns\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mijn patterns<\/a> selecteren. Daar vind je al je patterns in drie tabbladen: <strong>All<\/strong>, <strong>Concepts<\/strong>\u00a0en <strong>Awaiting review<\/strong>.<\/p>\n<figure id=\"attachment_154624\" aria-describedby=\"caption-attachment-154624\" style=\"width: 2506px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-154624 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/pattern-preview.jpg\" alt=\"Een voorbeeld van de pattern bekijken\" width=\"2506\" height=\"2237\"><figcaption id=\"caption-attachment-154624\" class=\"wp-caption-text\">Een voorbeeld van de pattern bekijken<\/figcaption><\/figure>\n<p>Als je klaar bent met je bewerkingen, kun je je pattern delen met de community. Klik op de knop <b>Submit <\/b>in de rechterbovenhoek van de editor om de pattern in te dienen voor revisie (zorg ervoor dat je de <a href=\"https:\/\/wordpress.org\/patterns\/about\/\" target=\"_blank\" rel=\"noopener noreferrer\">patternrichtlijnen<\/a> volgt voordat je je pattern indient).<\/p>\n\n<h2>Samenvatting WordPress<\/h2>\n<p>WordPress <a href=\"https:\/\/wp20.wordpress.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">is 20 jaar geworden<\/a> en de statistieken vertellen ons dat het nog steeds <a href=\"https:\/\/kinsta.com\/nl\/wordpress-marktaandeel\/\">het meest gebruikte<\/a> CMS ter wereld is, met een marktaandeel van 63,3% in mei 2023.<\/p>\n<p>Deze cijfers bewijzen dat WordPress een uitstekende publicatietool is die wordt gebruikt door duizenden professionals, ontwikkelaars en eenvoudige bloggers over de hele wereld.<\/p>\n<p>Tijd en middelen besteden aan het verwerven van nieuwe vaardigheden in <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ontwikkelaar-huren\/\">WordPress ontwikkeling<\/a> en het leren over geavanceerde functies zoals custom blokken en blokpatterns kan een uitstekende investering zijn voor je carri\u00e8re als marketeer, webdesigner of uitgever.<\/p>\n<p><em>En nu is het aan jou. Heb jij al blokpatterns gemaakt? Heb je er al een gedeeld met de gemeenschap? We zouden het leuk vinden om je creaties te zien. Laat een reactie achter met een link of je gedachten over blokpatterns.<\/em><\/p>","protected":false},"excerpt":{"rendered":"<p>WordPress is een krachtig hulpmiddel waarmee je online kan publiceren en waarmee iedereen gemakkelijk tekstuele en\/of multimedia-inhoud kan maken en delen. Maar daarnaast is het ook &#8230;<\/p>\n","protected":false},"author":36,"featured_media":53206,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[476,46,254],"topic":[892],"class_list":["post-53205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-block-editor","tag-gutenberg","tag-wordpress-developers","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 bouw je blokpatronen in WordPress - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Met WordPress blokpatronen kun je heel eenvoudig geavanceerde bloklayouts maken. Leer in deze uitgebreide gids hoe je je eigen blokpatronen kunt maken\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo bouw je blokpatronen in WordPress\" \/>\n<meta property=\"og:description\" content=\"Met WordPress blokpatronen kun je heel eenvoudig geavanceerde bloklayouts maken. Leer in deze uitgebreide gids hoe je je eigen blokpatronen kunt maken\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-13T09:44:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-06T14:41:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/how-to-build-wordpress-block-patterns.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Met WordPress blokpatronen kun je heel eenvoudig geavanceerde bloklayouts maken. Leer in deze uitgebreide gids hoe je je eigen blokpatronen kunt maken\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/how-to-build-wordpress-block-patterns.jpg\" \/>\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=\"24 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Zo bouw je blokpatronen in WordPress\",\"datePublished\":\"2023-06-13T09:44:37+00:00\",\"dateModified\":\"2025-03-06T14:41:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/\"},\"wordCount\":4229,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/how-to-build-wordpress-block-patterns-1.jpg\",\"keywords\":[\"Block Editor\",\"Gutenberg\",\"WordPress developers\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/\",\"name\":\"Zo bouw je blokpatronen in WordPress - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/how-to-build-wordpress-block-patterns-1.jpg\",\"datePublished\":\"2023-06-13T09:44:37+00:00\",\"dateModified\":\"2025-03-06T14:41:10+00:00\",\"description\":\"Met WordPress blokpatronen kun je heel eenvoudig geavanceerde bloklayouts maken. Leer in deze uitgebreide gids hoe je je eigen blokpatronen kunt maken\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/how-to-build-wordpress-block-patterns-1.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/how-to-build-wordpress-block-patterns-1.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#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 bouw je blokpatronen in WordPress\"}]},{\"@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 bouw je blokpatronen in WordPress - Kinsta\u00ae","description":"Met WordPress blokpatronen kun je heel eenvoudig geavanceerde bloklayouts maken. Leer in deze uitgebreide gids hoe je je eigen blokpatronen kunt maken","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo bouw je blokpatronen in WordPress","og_description":"Met WordPress blokpatronen kun je heel eenvoudig geavanceerde bloklayouts maken. Leer in deze uitgebreide gids hoe je je eigen blokpatronen kunt maken","og_url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-06-13T09:44:37+00:00","article_modified_time":"2025-03-06T14:41:10+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/how-to-build-wordpress-block-patterns.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Met WordPress blokpatronen kun je heel eenvoudig geavanceerde bloklayouts maken. Leer in deze uitgebreide gids hoe je je eigen blokpatronen kunt maken","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/how-to-build-wordpress-block-patterns.jpg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Carlo Daniele","Geschatte leestijd":"24 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Zo bouw je blokpatronen in WordPress","datePublished":"2023-06-13T09:44:37+00:00","dateModified":"2025-03-06T14:41:10+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/"},"wordCount":4229,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/how-to-build-wordpress-block-patterns-1.jpg","keywords":["Block Editor","Gutenberg","WordPress developers"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/","url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/","name":"Zo bouw je blokpatronen in WordPress - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/how-to-build-wordpress-block-patterns-1.jpg","datePublished":"2023-06-13T09:44:37+00:00","dateModified":"2025-03-06T14:41:10+00:00","description":"Met WordPress blokpatronen kun je heel eenvoudig geavanceerde bloklayouts maken. Leer in deze uitgebreide gids hoe je je eigen blokpatronen kunt maken","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/how-to-build-wordpress-block-patterns-1.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/how-to-build-wordpress-block-patterns-1.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#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 bouw je blokpatronen in WordPress"}]},{"@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\/53205","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=53205"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/53205\/revisions"}],"predecessor-version":[{"id":62067,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/53205\/revisions\/62067"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53205\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53205\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53205\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53205\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53205\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53205\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53205\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53205\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53205\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/53206"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=53205"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=53205"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=53205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}