{"id":23650,"date":"2020-07-21T11:00:25","date_gmt":"2020-07-21T09:00:25","guid":{"rendered":"https:\/\/www.strato.nl\/blog\/?p=23650"},"modified":"2022-12-27T13:15:24","modified_gmt":"2022-12-27T12:15:24","slug":"eigen-wordpress-blocks-maken-voor-de-gutenberg-editor","status":"publish","type":"post","link":"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/","title":{"rendered":"WordPress: je eigen blokken maken voor de Gutenberg-editor"},"content":{"rendered":"\n<p class=\"has-normal-font-size\"><strong>De bouwstenen van elke WordPress pagina zijn de zogenaamde<em> <a href=\"https:\/\/wordpress.org\/support\/article\/blocks\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">blocks<\/a><\/em>. Met behulp van een plug-in kun je ze zelf ontwerpen en je eigen op maat gemaakte blokken cre\u00ebren.<\/strong><\/p>\n\n\n\n<p>Gutenberg bevat van huis uit al de nodige kant-en-klare blokken en talrijke plug-ins bieden nog eens extra functies. Maar als je net iets meer wilt, loop je al snel tegen beperkingen aan. Je kunt daarom gebruikmaken van je eigen <a href=\"https:\/\/www.wplounge.nl\/eigen-shortcodes-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">shortcodes in WordPress<\/a>, maar een andere optie is om deze elegant in blokken om te zetten. Je hoeft dan dus geen shortcodes meer in te voegen in je berichten, maar werpt gewoon direct je eigen blokken in de strijd. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-contentblokken-voor-gutenberg-met-de-plug-in-lazy-blocks\">Contentblokken voor Gutenberg met de plug-in\n\u2018Lazy Blocks\u2019<\/h2>\n\n\n\n<p>Er zijn verschillende plug-ins waarmee je zelf blokken kunt maken. Voor deze workshop werken we met \u2018<a href=\"https:\/\/wordpress.org\/plugins\/lazy-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lazy Blocks<\/a>\u2019. We leggen uit hoe de plug-in werkt en laten je aan de hand van een voorbeeld zien hoe je een eigen blok maakt. Je kunt dan deze basiskennis toepassen op elk blokidee.<\/p>\n\n\n\n<p>Om je eigen Gutenberg-blokken te maken, heb je wel enige voorkennis nodig van HTML en <a href=\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"CSS (opens in a new tab)\">CSS<\/a>. Voor complexere blokken is ook kennis van PHP-programmering nuttig. Maar over het algemeen kom je ook zonder diepgaande programmeerkennis een heel eind.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-zo-werkt-lazy-blocks\">Zo werkt Lazy Blocks<\/h2>\n\n\n\n<p>Je maakt een nieuw blok aan door in het WordPress menu onder <em>Lazy Blocks<\/em> te klikken op <em>Create<\/em>. Hier zie je drie gebieden:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Controls:<\/strong> hier maak je de invoervelden aan die je later met individuele content vult wanneer je de editor gebruikt &#8211; bijvoorbeeld tekst, foto&#8217;s, selectievakjes of iets dergelijks.<\/li>\n\n\n\n<li><strong>Code:<\/strong> hier kun je HTML- of PHP-code invoegen die de content van de bedieningselementen verwerkt en weergeeft. Een voorbeeld is een afbeelding die afhankelijk van de aangevinkte optie links of rechts uitgelijnd wordt, zodat de tekst er omheen vloeit. Uiteraard is ook hier een uitgebreide programmering mogelijk voor de verwerking van de in de controls ingevoerde gegevens.<\/li>\n\n\n\n<li><strong>Block\/Control:<\/strong> in de rechterkolom stel je de basisinstellingen in voor je blok, zoals de naam, beschrijving en de opties voor de actieve control.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-voorbeeldblok-citaat-en-auteursregel-met-inspringing\">Voorbeeldblok: citaat- en auteursregel met\ninspringing<\/h2>\n\n\n\n<p>Om te demonstreren hoe de plug-in Lazy Blocks werkt, maken we simpelweg een nieuw bericht aan. Daarin komt &#8211; door middel van ons zelf gecre\u00eberde blok &#8211; een citaat tussen aanhalingstekens, gekleurd en cursief, aan de rechterkant van de bodytekst te staan.<\/p>\n\n\n\n<p>In een tweede stap maken we met behulp van een paar regels PHP nog een kleine aanpassing aan het blok, zodat de naamsvermelding van het citaat optioneel is &#8211; dat wil zeggen dat deze kan worden weggelaten, bijvoorbeeld in een langer interview, als duidelijk is van wie het citaat afkomstig is.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"811\" height=\"466\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/grafik-9.png\" alt=\"Lazy blocks: zelf een &quot;citaten-blok&quot; maken\" class=\"wp-image-23740\"\/><figcaption class=\"wp-element-caption\"> <em>Zo ziet het Gutenberg-blok in ons voorbeeld eruit.<\/em> <\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-een-nieuw-blok-configureren\">Een nieuw blok configureren<\/h2>\n\n\n\n<p>Eerst geef je het blok een zelfgekozen naam in het veld <em>Title<\/em> aan de rechterkant. Je moet alleen even erop letten dat je geen naam gebruikt die al door de plug-in is gereserveerd (zie <a href=\"https:\/\/lazyblocks.com\/documentation\/blocks-controls\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">documentatie<\/a>).<\/p>\n\n\n\n<p>Als je wilt, kun je een geschikt <em>Icon<\/em> kiezen dat later wordt weergegeven wanneer je het blok in de editor invoegt. Onder <em>Category<\/em> bepaal je waar in  de editor je nieuwe blok moet verschijnen. Voor de duidelijkheid raden wij de categorie <em>Lazy Blocks<\/em> aan. Een beschrijving in het veld <em>Description<\/em> is optioneel.<\/p>\n\n\n\n<p>Onder <em>Supports<\/em> kun je kiezen uit diverse opties. Het voert te ver om ze allemaal te beschrijven. Je kunt bijvoorbeeld de standaardafstanden bij de blokranden wijzigen, het blok tonen of verbergen afhankelijk van de grootte van het scherm van de gebruiker en nog veel meer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-gegevensinvoer-voor-het-blok-controls-aanmaken\">Gegevensinvoer voor het blok: controls aanmaken<\/h2>\n\n\n\n<p>De controls zijn niets meer dan invoervelden voor het blok, die je later bij het aanmaken van je bericht met content vult. In ons voorbeeld hebben we twee controls nodig: een voor de citaattekst en een voor de persoon die geciteerd wordt (de geciteerde).<\/p>\n\n\n\n<p>Om een nieuwe control aan te maken, klik je op het <em>plus<\/em>-teken. In de rechterkolom kun je nu\nde instellingen voor deze nieuwe control maken.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Label:<\/strong> de naam van de control &#8211; in het voorbeeld noemen we het <em>mijncitaat<\/em>.<\/li>\n\n\n\n<li><strong>Name:<\/strong> de variabele waarmee je de ingevoerde content in de code kunt verwerken. Lazy Blocks vult dit veld automatisch in, hier: <em>mijncitaat<\/em>.<\/li>\n\n\n\n<li><strong>Type:<\/strong>&nbsp;in ons voorbeeld hebben we het type <em>Text<\/em> nodig. Maar hier heb je veel mogelijkheden, van URL en e-mailadres tot afbeeldingen, selectievakjes, kleurselectie en ingebedde andere blokken. Afhankelijk van het type zie je hieronder de juiste opties.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"541\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/WP-controls.jpg\" alt=\"Lazy blocks: overzicht van de verschillende &quot;controls&quot; ofwel de invoervelden van je toekomstige blok\" class=\"wp-image-23705\"\/><figcaption class=\"wp-element-caption\">  <em>Je kunt uit veel controls (rechts) kiezen. <\/em> <\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text-opties:<\/strong> de getoonde opties hebben eigenlijk geen verdere uitleg nodig. Voor ons voorbeeld behoud je de standaardinstellingen en vink je alleen het vakje <em>Required<\/em> aan. Dit zorgt ervoor dat je niet vergeet de tekst later in te voeren.<\/li>\n\n\n\n<li><strong>Hide if block is not selected:<\/strong>&nbsp;kies deze optie om de editor overzichtelijk te houden. Op deze manier wordt de control alleen in de editor weergegeven als het blok op dat moment geselecteerd is voor bewerking.<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"862\" height=\"556\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/grafik-10.png\" alt=\"Lazy blocks: voorbeeld van &quot;citaten-blok&quot; \" class=\"wp-image-23775\"\/><figcaption class=\"wp-element-caption\"> <em>Standaard worden de invoervelden altijd weergegeven.    <\/em><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"859\" height=\"481\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/grafik-11.png\" alt=\"Lazy blocks: voorbeeld van &quot;citaten-blok&quot; zonder dat de invoervelden zichtbaar zijn\" class=\"wp-image-23780\"\/><figcaption class=\"wp-element-caption\"><em>De optie &#8220;hide if block is not selected&#8221; zorgt ervoor dat de invoervelden nicht zichtbaar zijn als het mijncitaat-blok niet is geselecteerd.<\/em><\/figcaption><\/figure>\n\n\n\n<p>Voor de tweede control van de citaat-editor ga je volgens hetzelfde principe te werk. In dit voorbeeld noemen we het label <em>geciteerde<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1017\" height=\"416\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/grafik-6.png\" alt=\"Lazy blocks: alle controls zijn nu gedefinieerd\" class=\"wp-image-23715\"\/><figcaption class=\"wp-element-caption\"> <em>Je hebt alle nodige controls voor je nieuwe blok nu gedefinieerd. <\/em> <\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-gegevens-verwerken-en-weergeven\">Gegevens verwerken en weergeven<\/h2>\n\n\n\n<p>Om je blok in de frontend te kunnen weergeven, definieer je nu de code die de gegevens verwerkt en toont. Deze gegevens zijn via de controls ingevoerd.<\/p>\n\n\n\n<p>Om het eenvoudig te houden, zetten we de optie <em>Single output code for Frontend and Editor<\/em>&nbsp;in het gedeelte<em> Code<\/em> op <em>Yes<\/em>. De plug-in maakt het ook mogelijk om het blok op een andere manier weer te geven in de editor en in de frontend als je de moeite wilt nemen om hiervoor een andere code te schrijven. Dit kan bijvoorbeeld handig zijn als preview, als je CSS-klassen van de frontend (<em>style.css<\/em>) gebruikt die niet in de backend geladen zijn.<\/p>\n\n\n\n<p>Als <em>Output method<\/em> kies je <em>HTML + Handlebars<\/em>. Later wijzigen we dit naar <em>PHP<\/em> om wat programmeerlogica toe te voegen. Maar voor nu is eenvoudige HTML voldoende.<\/p>\n\n\n\n<p>Onder <em>Code<\/em> voeg je nu de HTML-code in voor de weergave van de content. Dit is dus de code die nodig is om het citaat en de geciteerde in de gewenste opmaak in de frontend weer te geven. We gaan hier niet in op de HTML-details, want die zijn slechts een voorbeeld.<\/p>\n\n\n\n<p>Bepalend is hierbij de integratie van de variabele content van de controls. Je integreert deze content met behulp van plaatshouders, namelijk met de respectievelijke <em>Name <\/em>van de control tussen dubbele haakjes. In ons voorbeeld ziet het er zo uit:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>{{mijncitaat}}<\/li>\n\n\n\n<li>{{geciteerde}}<\/li>\n<\/ul>\n\n\n\n<p>De HTML-code in ons voorbeeld luidt als volgt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"color: #df0098; float: right; margin: 18px 0 18px 20px; \n              width: 35%; text-align: right;  font-style:italic;\"&gt;\n    &lt;span style=\"font-size:18px; font-weight:600;\"&gt;\u00ab{{mijncitaat}}\u00bb&lt;\/span&gt;\n    &lt;br \/&gt;\n    &lt;span style=\"font-size:0.9em; font-weight:300; color: #750250;\"&gt;{{geciteerde}}&lt;\/span&gt;\n &lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"633\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/code1.jpg\" alt=\"Lazy blocks: html-code invoeren\" class=\"wp-image-23720\"\/><figcaption class=\"wp-element-caption\"><em>Het uitgewerkte code-gedeelte in het voorbeeldblok in Lazy Blocks.<\/em> <\/figcaption><\/figure>\n\n\n\n<p>Klik op <em>Publiceren<\/em> in\nde rechterbovenhoek en je kunt je nieuwe Gutenberg-blok net als elk ander blok\nin WordPress gebruiken.<\/p>\n\n\n\n<p>Let op: vanwege de eenvoud hebben we de CSS-opmaak voor het citeren in HTML direct ge\u00efntegreerd. Dit heeft als voordeel dat de preview direct wordt weergegeven. Maar natuurlijk kun je de CSS-opdrachten ook via CSS-klassen en ID&#8217;s inbedden in de <em>style.css<\/em> van je (child)thema. Ook kun je een aparte code voor de backend defini\u00ebren. Dit bespraken we hiervoor al. Je doet dit door de opmaak toe te voegen die al in de frontend via <em>style.css<\/em> is gedefinieerd.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-je-nieuwe-gutenberg-blok-gebruiken\">Je nieuwe Gutenberg-blok gebruiken<\/h2>\n\n\n\n<p>In de blokselectie vind je het nieuwe contentblok in de eerder geselecteerde categorie <em>Lazy Blocks<\/em>.<\/p>\n\n\n\n<p>Plaats een nieuw blok in je artikel\u2026<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"843\" height=\"390\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/grafik-12.png\" alt=\"Zo ziet je zelfgemaakte blok er in de editor uit\" class=\"wp-image-23800\"\/><\/figure>\n\n\n\n<p>\u2026 vul de <em>control-velden <\/em>in\u2026<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"791\" height=\"669\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/grafik-8.png\" alt=\"Zo ziet je zelfgemaakte blok er in de editor uit (2)\" class=\"wp-image-23730\"\/><\/figure>\n\n\n\n<p>\u2026 en terwijl je schrijft, zie je al een preview.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-programmeerlogica-blok-met-php\">Programmeerlogica: blok met PHP<\/h2>\n\n\n\n<p>Volgens hetzelfde principe werken de Gutenberg-blokken waarbij je PHP-code gebruikt in plaats van HTML voor de uitvoer naar het frontend. Dit vereist vier veranderingen aan het blok dat je net hebt gemaakt:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Verander de <em>Output Method<\/em> in <em>PHP<\/em>.<\/li>\n\n\n\n<li>Vervang de HTML-code in veld <em>Code <\/em>door PHP.<\/li>\n\n\n\n<li>Neem de content van de besturingselementen op in de code als een array-element, dus niet met dubbele gekrulde haakjes. Ofwel:<em>$attributes[\u201amijncitaat\u2018]&nbsp;<\/em>en <em>$attributes[\u201ageciteerde\u2018]&nbsp;<\/em>in plaats van <em>{{mijncitaat}}<\/em>&nbsp;en <em>{{geciteerde}}.<\/em><\/li>\n\n\n\n<li>Verwijder het vinkje voor <em>Required<\/em> in de control <em>geciteerde<\/em> zodat dit veld optioneel wordt bij het typen.<\/li>\n<\/ul>\n\n\n\n<p>De logica van de PHP-code controleert of het nu optionele veld <em>geciteerde <\/em>is ingevuld en geeft de bijbehorende HTML-code niet weer als het veld leeg is. Ook hier worden de details van de PHP-code niet besproken, omdat dit slechts een willekeurig voorbeeld is.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"527\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/code2-php.jpg\" alt=\"Lazy blocks: de php-code invoeren\" class=\"wp-image-23735\"\/><figcaption class=\"wp-element-caption\"><em> Hetzelfde blok in Lazy Blocks, maar dan in de PHP-versie. <\/em><\/figcaption><\/figure>\n\n\n\n<p>De PHP-Code voor dit voorbeeld ziet er als volgt uit:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n$citaat = $attributes&#91;'mijncitaat'];\n$geciteerde = $attributes&#91;'geciteerde'];\n\nif( $geciteerde ) { \n$geciteerde = '&lt;br \/&gt;&lt;span style=\"font-size:0.9em; font-weight:300; color: #750250;\"&gt;' . $geciteerde . '&lt;\/span&gt;';\n}\n$citaat = '&lt;div style=\"color: #df0098; float: right; margin: 18px 0 18px 20px; width: 35%; text-align: right;  font-style:italic;\"&gt;&lt;span style=\"font-size:18px; font-weight:600;\"&gt;\u00ab' . $citaat . '\u00bb&lt;\/span&gt;' . $geciteerde . '&lt;\/div&gt;';\necho $citaat;\n?&gt;\n<\/code><\/pre>\n\n\n\n<p>Zoals reeds vermeld, is deze code slechts een eenvoudig voorbeeld van hoe de plug-in werkt. Je kunt je eigen fantasie eindeloos toepassen als het gaat om de functionaliteit van je Gutenberg-blok. Maar natuurlijk alleen als je voldoende PHP-kennis hebt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-shortcode-omzetten-naar-een-gutenberg-blok\">Shortcode omzetten naar een Gutenberg-blok<\/h2>\n\n\n\n<p>Er is een interessante toepassing voor je eigen\nGutenberg-blokken als je tot nu toe met je eigen shortcodes hebt gewerkt. Het\nis namelijk de moeite waard om al die shortcodes waarvoor je eerder parameters\nhebt opgegeven, om te zetten naar Gutenberg-blokken. Bijvoorbeeld:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&lt;code&gt;&#91;mijnshortcodetekst =\"voorbeeldtekst\"\nfotourl=\"https:\/\/bloggertrucs.nl\/voorbeeld.jpg\"]&lt;\/code&gt;<\/code><\/pre>\n\n\n\n<p>Als je de corresponderende PHP van <em>functions.php<\/em> met Lazy Blocks converteert naar je eigen Gutenberg-blok, hoef je de syntax van de shortcode of de benodigde parameters niet te onthouden. Zoals we hebben gezien, gebruik je de controls om de bijbehorende invoervelden te specificeren. Dit maakt het veel eenvoudiger om deze elementen via je eigen blok in te voegen.<\/p>\n\n\n\n<p>Je moet de oude shortcode-code desondanks in <em>functions.php<\/em> laten staan, zodat de shortcodes die in eerdere berichten zijn opgenomen nog steeds werken. Je kunt ook handmatig al deze shortcodes in de berichten vervangen door je nieuwe blok. Daarna kun je alsnog de corresponderende shortcode-invoer in <em>functions.php<\/em> verwijderen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-op-zoek-naar-de-juiste-hosting-voor-wordpress\"><strong>Op zoek naar de juiste hosting voor WordPress?<\/strong><\/h2>\n\n\n<a href=\"https:\/\/www.strato.nl\/hosting\/wordpress-hosting\/?utm_source=Blogartikel&#038;utm_medium=Blogartikel&#038;utm_campaign=eigen-wordpress-blocks-maken-voor-de-gutenberg-editor&#038;campaign=strato.nl\/blog\/Artikel\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor&#038;swtssa=nedsc0000000000000000tffc\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"btn btn-strato-blue strato-c2a\">Naar onze WordPress pakketten<\/a>","protected":false},"excerpt":{"rendered":"<p>De bouwstenen van elke WordPress pagina zijn de zogenaamde blocks. Met behulp van een plug-in kun je ze zelf ontwerpen en je eigen op maat gemaakte blokken cre\u00ebren. Gutenberg bevat van huis uit al de nodige kant-en-klare blokken en talrijke plug-ins bieden nog eens extra functies. Maar als je net iets meer wilt, loop je [&hellip;]<\/p>\n","protected":false},"author":54,"featured_media":30320,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[415],"tags":[195,460,104,163],"class_list":["post-23650","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-blog","tag-css","tag-php","tag-website"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>WordPress: je eigen blokken maken - STRATO blogt<\/title>\n<meta name=\"description\" content=\"Met behulp van een plug-in kun je WordPress blokken zelf ontwerpen en je eigen op maat gemaakte blokken cre\u00ebren.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress: je eigen blokken maken - STRATO blogt\" \/>\n<meta property=\"og:description\" content=\"Met behulp van een plug-in kun je WordPress blokken zelf ontwerpen en je eigen op maat gemaakte blokken cre\u00ebren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"STRATO blogt\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-21T09:00:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-27T12:15:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/games-2801332_1280-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Franz Neumeier\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Franz Neumeier\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/\"},\"author\":{\"name\":\"Franz Neumeier\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/373693d0ed46f90f144b785753c77481\"},\"headline\":\"WordPress: je eigen blokken maken voor de Gutenberg-editor\",\"datePublished\":\"2020-07-21T09:00:25+00:00\",\"dateModified\":\"2022-12-27T12:15:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/\"},\"wordCount\":1641,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/games-2801332_1280-1.jpg\",\"keywords\":[\"Blog\",\"CSS\",\"PHP\",\"Website\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/\",\"url\":\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/\",\"name\":\"WordPress: je eigen blokken maken - STRATO blogt\",\"isPartOf\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/games-2801332_1280-1.jpg\",\"datePublished\":\"2020-07-21T09:00:25+00:00\",\"dateModified\":\"2022-12-27T12:15:24+00:00\",\"description\":\"Met behulp van een plug-in kun je WordPress blokken zelf ontwerpen en je eigen op maat gemaakte blokken cre\u00ebren.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#primaryimage\",\"url\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/games-2801332_1280-1.jpg\",\"contentUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/games-2801332_1280-1.jpg\",\"width\":728,\"height\":410,\"caption\":\"je eigen WordPress-blokken maken\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.strato.nl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress: je eigen blokken maken voor de Gutenberg-editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#website\",\"url\":\"https:\/\/www.strato.nl\/blog\/\",\"name\":\"STRATO blogt\",\"description\":\"Nieuws en tips over webhosting!\",\"publisher\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.strato.nl\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#organization\",\"name\":\"STRATO blogt\",\"url\":\"https:\/\/www.strato.nl\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/11\/strato_signet_blogt_nl_wei\u00df.png\",\"contentUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/11\/strato_signet_blogt_nl_wei\u00df.png\",\"width\":259,\"height\":42,\"caption\":\"STRATO blogt\"},\"image\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/373693d0ed46f90f144b785753c77481\",\"name\":\"Franz Neumeier\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bbbb301a12a8cb3a3f9f2a89694e51c19477f3b6eb45207b5af5c333303a055a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bbbb301a12a8cb3a3f9f2a89694e51c19477f3b6eb45207b5af5c333303a055a?s=96&d=mm&r=g\",\"caption\":\"Franz Neumeier\"},\"description\":\"Ich bin Franz Neumeier, war jahrelang Chefredakteur bei IT-Zeitschriften wie PC Professionell, Internet Professionell und Internet Magazin. Inzwischen habe ich mich als freier Autor vor allem auf Kreuzfahrt-Themen spezialisiert, betreibe mehrere Websites und schreibe aus diesen Praxiserfahrungen heraus weiterhin auch \u00fcber Webhosting- und Webpublishing-Themen.\",\"url\":\"https:\/\/www.strato.nl\/blog\/author\/neumeier\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress: je eigen blokken maken - STRATO blogt","description":"Met behulp van een plug-in kun je WordPress blokken zelf ontwerpen en je eigen op maat gemaakte blokken cre\u00ebren.","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:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/","og_locale":"nl_NL","og_type":"article","og_title":"WordPress: je eigen blokken maken - STRATO blogt","og_description":"Met behulp van een plug-in kun je WordPress blokken zelf ontwerpen en je eigen op maat gemaakte blokken cre\u00ebren.","og_url":"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/","og_site_name":"STRATO blogt","article_published_time":"2020-07-21T09:00:25+00:00","article_modified_time":"2022-12-27T12:15:24+00:00","og_image":[{"width":728,"height":410,"url":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/games-2801332_1280-1.jpg","type":"image\/jpeg"}],"author":"Franz Neumeier","twitter_card":"summary_large_image","twitter_misc":{"Geschreven door":"Franz Neumeier","Geschatte leestijd":"11 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#article","isPartOf":{"@id":"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/"},"author":{"name":"Franz Neumeier","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/373693d0ed46f90f144b785753c77481"},"headline":"WordPress: je eigen blokken maken voor de Gutenberg-editor","datePublished":"2020-07-21T09:00:25+00:00","dateModified":"2022-12-27T12:15:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/"},"wordCount":1641,"commentCount":0,"publisher":{"@id":"https:\/\/www.strato.nl\/blog\/#organization"},"image":{"@id":"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/games-2801332_1280-1.jpg","keywords":["Blog","CSS","PHP","Website"],"articleSection":["WordPress"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/","url":"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/","name":"WordPress: je eigen blokken maken - STRATO blogt","isPartOf":{"@id":"https:\/\/www.strato.nl\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#primaryimage"},"image":{"@id":"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/games-2801332_1280-1.jpg","datePublished":"2020-07-21T09:00:25+00:00","dateModified":"2022-12-27T12:15:24+00:00","description":"Met behulp van een plug-in kun je WordPress blokken zelf ontwerpen en je eigen op maat gemaakte blokken cre\u00ebren.","breadcrumb":{"@id":"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#primaryimage","url":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/games-2801332_1280-1.jpg","contentUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/07\/games-2801332_1280-1.jpg","width":728,"height":410,"caption":"je eigen WordPress-blokken maken"},{"@type":"BreadcrumbList","@id":"https:\/\/www.strato.nl\/blog\/eigen-wordpress-blocks-maken-voor-de-gutenberg-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.strato.nl\/blog\/"},{"@type":"ListItem","position":2,"name":"WordPress: je eigen blokken maken voor de Gutenberg-editor"}]},{"@type":"WebSite","@id":"https:\/\/www.strato.nl\/blog\/#website","url":"https:\/\/www.strato.nl\/blog\/","name":"STRATO blogt","description":"Nieuws en tips over webhosting!","publisher":{"@id":"https:\/\/www.strato.nl\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.strato.nl\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/www.strato.nl\/blog\/#organization","name":"STRATO blogt","url":"https:\/\/www.strato.nl\/blog\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/11\/strato_signet_blogt_nl_wei\u00df.png","contentUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/11\/strato_signet_blogt_nl_wei\u00df.png","width":259,"height":42,"caption":"STRATO blogt"},"image":{"@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/373693d0ed46f90f144b785753c77481","name":"Franz Neumeier","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bbbb301a12a8cb3a3f9f2a89694e51c19477f3b6eb45207b5af5c333303a055a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bbbb301a12a8cb3a3f9f2a89694e51c19477f3b6eb45207b5af5c333303a055a?s=96&d=mm&r=g","caption":"Franz Neumeier"},"description":"Ich bin Franz Neumeier, war jahrelang Chefredakteur bei IT-Zeitschriften wie PC Professionell, Internet Professionell und Internet Magazin. Inzwischen habe ich mich als freier Autor vor allem auf Kreuzfahrt-Themen spezialisiert, betreibe mehrere Websites und schreibe aus diesen Praxiserfahrungen heraus weiterhin auch \u00fcber Webhosting- und Webpublishing-Themen.","url":"https:\/\/www.strato.nl\/blog\/author\/neumeier\/"}]}},"_links":{"self":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts\/23650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/users\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/comments?post=23650"}],"version-history":[{"count":17,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts\/23650\/revisions"}],"predecessor-version":[{"id":34737,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts\/23650\/revisions\/34737"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/media\/30320"}],"wp:attachment":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/media?parent=23650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/categories?post=23650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/tags?post=23650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}