{"id":45083,"date":"2022-08-12T18:08:51","date_gmt":"2022-08-12T16:08:51","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=45083&#038;preview=true&#038;preview_id=45083"},"modified":"2023-09-26T07:28:01","modified_gmt":"2023-09-26T05:28:01","slug":"dynamische-blokken","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/","title":{"rendered":"Zo maak je dynamische blokken voor Gutenberg"},"content":{"rendered":"<p>Snap je nog steeds niks van <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">Gutenberg<\/a>? Of hoor je bij de groep die heilig gelooft in de mogelijkheden van de blok-editor en willen ontdekken hoe ver ze met hun creativiteit kunnen gaan met behulp van de blok-editor?<\/p>\n<p>In welke categorie gebruikers je ook valt, Gutenberg gaat niet meer weg en dit artikel geeft je een diepgaand overzicht van wat er achter de schermen van de WordPress blok-editor gebeurt. Maar dat is nog niet alles!<\/p>\n<p>Na <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">onze vorige tutorial<\/a> waarin we een algemene inleiding gaven over het ontwikkelen van blokken in Gutenberg, gaat dit artikel verder dan de basics en introduceert meer geavanceerde bloktypes. Deze blokken worden dynamische blokken genoemd.<\/p>\n<p>Vandaag leer je wat dynamische blokken zijn, hoe ze werken, en alles wat je moet weten om vanuit het niets dynamische blokken te maken.<\/p>\n<p>Om mee te beginnen, wat zijn Gutenberg dynamische blokken, en wat zijn de belangrijkste verschillen tussen <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">statische<\/a> en dynamische blokken?<\/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 dynamische blokken? Een voorbeeld<\/h2>\n<p>Waar bij statische blokken de inhoud handmatig door de gebruiker wordt toegevoegd tijdens het bewerken van een bericht of pagina, wordt bij dynamische blokken de inhoud bij het laden van de pagina geladen en meteen verwerkt. Met dynamische blokken wordt de blokinhoud uit de database opgepikt en weergegeven zoals hij is of het resultaat van datamanipulatie.<\/p>\n<p>Laten we dat met een voorbeeld uitleggen. Stel dat je een groep geneste blokken wilt maken die de details van de auteur van een artikel tonen met een selectie van de laatste berichten van dezelfde auteur.<\/p>\n<figure id=\"attachment_119966\" aria-describedby=\"caption-attachment-119966\" style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119966 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/from-the-author.jpg\" alt=\"Een Group block inclusief Post Author en Lastest Posts\" width=\"1470\" height=\"1064\"><figcaption id=\"caption-attachment-119966\" class=\"wp-caption-text\">Een Group block inclusief Post Author en Lastest Posts<\/figcaption><\/figure>\n<p>Als Gutenberg gebruiker zou je de volgende blokken kunnen gebruiken:<\/p>\n<ul>\n<li>Het <b>Heading <\/b>kernblok<\/li>\n<li>Het core blok <strong>Post Author<\/strong><\/li>\n<li>Het core blok <strong>Latest Posts<\/strong><\/li>\n<\/ul>\n<p>Je zou ook een groep kunnen maken met daarin die blokken en de groep toevoegen aan herbruikbare blokken (voor toekomstig gebruik).<\/p>\n<figure id=\"attachment_119967\" aria-describedby=\"caption-attachment-119967\" style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119967 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/add-to-reusable-blocks.jpg\" alt=\"Een Groups block toevoegen aan herbruikbare blokken\" width=\"1470\" height=\"1064\"><figcaption id=\"caption-attachment-119967\" class=\"wp-caption-text\">Een Groups block toevoegen aan herbruikbare blokken<\/figcaption><\/figure>\n<p>Dit is nogal rechttoe rechtaan, nietwaar? Je kunt een dynamisch blok maken en het in een handomdraai aan je berichten en pagina&#8217;s toevoegen.<\/p>\n<p>Vanaf <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/\">WordPress 5.9<\/a> biedt de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">blok-editor<\/a> meer dan 90 verschillende blokken, en de kans is groot dat je het blok dat bij je past gewoon standaard inbegrepen zit. En, als je er meer nodig hebt, zoek dan eens in de WordPress plugin directory en je vindt een heleboel gratis plugins die <a href=\"https:\/\/wordpress.org\/plugins\/search\/gutenberg\/\">extra blokken<\/a> bieden.<\/p>\n<p>Maar wat als je een WordPress ontwikkelaar bent &#8211; of als je een carri\u00e8re als <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ontwikkelaar-salaris\/\">WordPress ontwikkelaar<\/a> plant? Misschien heb je heel specifieke behoeften en kun je het blok dat je zoekt niet vinden, of wil je gewoon nieuwe professionele vaardigheden opdoen. In zulke situaties wil je misschien leren hoe je zelf dynamische blokken kunt maken.<\/p>\n\n<h2>Dynamische blokken van Gutenberg vanuit het perspectief van een ontwikkelaar<\/h2>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\">Dynamische blokken<\/a> hebben twee belangrijke gebruikssituaties.<\/p>\n<p>Het eerste gebruik is wanneer je de inhoud van een blok moet bijwerken terwijl de pagina waarop het blok staat nog niet is bijgewerkt. Dit gebeurt bijvoorbeeld als het blok een lijst van de nieuwste berichten of reacties bevat, en in het algemeen telkens als de inhoud van het blok dynamisch gegenereerd wordt met gegevens die uit de database opgehaald worden.<\/p>\n<figure id=\"attachment_119976\" aria-describedby=\"caption-attachment-119976\" style=\"width: 1996px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119976 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/query-loop-block.jpg\" alt=\"Toevoegen van een Query Loop blok\" width=\"1996\" height=\"1176\"><figcaption id=\"caption-attachment-119976\" class=\"wp-caption-text\">Toevoegen van een Query Loop blok<\/figcaption><\/figure>\n<p>Het tweede gebruiksgeval is wanneer een update van de blokcode onmiddellijk aan de frontend getoond moet worden. Door een dynamisch blok te gebruiken in plaats van een statisch blok worden de veranderingen onmiddellijk toegepast op alle instanties van het blok.<\/p>\n<p>Zou je daarentegen de door een statisch blok geproduceerde HTML veranderen, dan krijgt de gebruiker een <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-edit-save\/#validation\">invalidation dialoog<\/a> te zien tot elke losse instantie van de vorige versie van het blok verwijderd is en vervangen door de nieuwe versie, of tot je de oude versies als deprecated markeert (zie ook <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-deprecation\/\">Deprecation<\/a> en <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/7604\">Block Validation, Deprecation en Migration Experience<\/a>).<\/p>\n<figure id=\"attachment_120364\" aria-describedby=\"caption-attachment-120364\" style=\"width: 1350px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120364 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/this-block-contains-unexpected-or-invalid-content.jpg\" alt=\"Onverwachte of ongeldige inhoud.\" width=\"1350\" height=\"378\"><figcaption id=\"caption-attachment-120364\" class=\"wp-caption-text\">Onverwachte of ongeldige inhoud.<\/figcaption><\/figure>\n<p>Dat gezegd hebbende, zijn er een paar begrippen die je moet begrijpen voor je kunt beginnen met het bouwen van dynamische blokken.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Application state en data stores<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#what-is-a-gutenberg-block\">Gutenberg is een React SPA applicatie<\/a>, en alles in Gutenberg is een React component. Berichttitel, headers, alinea&#8217;s, afbeeldingen en elk blok met HTML content in de editor is een React component, net als de controls van de zijbalk en toolbar van blokken.<\/p>\n<p>In ons vorige artikel gebruikten we alleen eigenschappen om gegevens op te slaan. In dit artikel gaan we een stap verder door het concept <strong>toestand<\/strong> te introduceren.<\/p>\n<p>Eenvoudig gezegd is het <code>state<\/code> object <a href=\"https:\/\/www.w3schools.com\/react\/react_state.asp\">een plain JavaScript object<\/a> dat gebruikt wordt om informatie over een component te bevatten. De <code>state<\/code> van het object kan in de loop van de tijd veranderen, en telkens als die verandert, wordt het object opnieuw opgebouwd.<\/p>\n<p>Net als het <code>state<\/code> object zijn properties plain JavaScript objecten die gebruikt worden om informatie over de component te bewaren. Maar er is <a href=\"https:\/\/reactjs.org\/docs\/faq-state.html#what-is-the-difference-between-state-and-props\">een belangrijk verschil<\/a> tussen props en <code>state<\/code>:<\/p>\n<blockquote><p><code>props<\/code> worden aan de component doorgegeven (vergelijkbaar met functieparameters), terwijl <code>state<\/code> binnen de component beheerd wordt (vergelijkbaar met variabelen die binnen een functie gedeclareerd worden).<\/p><\/blockquote>\n<p>Je kunt de state zien als een momentopname van gegevens die op een bepaald moment genomen worden en die een toepassing opslaat om het gedrag van een component te regelen. Bijvoorbeeld, als de instellingenzijbalk van de blok-editor geopend is, wordt ergens in het<code>state<\/code> object een stukje informatie opgeslagen.<\/p>\n<p>Als de informatie binnen een enkele component gedeeld wordt, noemen we dat <strong>local state<\/strong>. Als de informatie gedeeld wordt over componenten binnen een toepassing, noemen we het <strong>Application State<\/strong>.<\/p>\n<p>Application State is nauw verwant met het concept van store. Volgens de <a href=\"https:\/\/redux.js.org\/api\/store\">Redux docs<\/a>:<\/p>\n<blockquote><p>Een store bevat de hele <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#state\">state tree<\/a> van je toepassing. De enige manier om de toestand erin te veranderen is er een <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#action\">actie<\/a><\/p><\/blockquote>\n<p>op te dispatchen.<br \/>\nRedux slaat dus de state van een toepassing op in een enkele onveranderlijke object tree (namelijk een store). De object tree kan alleen veranderd worden door een nieuw object te maken met behulp van <a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-3-state-actions-reducers#designing-actions\">acties<\/a> en <a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-3-state-actions-reducers#writing-reducers\">reducers<\/a>.<\/p>\n<p>In WordPress worden stores beheerd door de <strong>WordPress data module<\/strong>.<\/p>\n<h3>Modulariteit, packages, en data stores in Gutenberg<\/h3>\n<p>De Gutenberg repository is vanaf de grond opgebouwd via verschillende <strong>herbruikbare en onafhankelijke modules<\/strong> die, samengevoegd, de bewerkingsinterface bouwen. Deze modules worden ook wel <b>packages <\/b>genoemd.<\/p>\n<p>De offici\u00eble documentatie noemt twee verschillende <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#types-of-packages\">soorten packages<\/a>:<\/p>\n<ul>\n<li><b>Production packages <\/b>vormen de productiecode die in de browser draait. Er zijn twee soorten production packages in WordPress:\n<ul>\n<li><strong>Packages met stylesheets<\/strong> zorgen voor stylesheets om goed te kunnen functioneren.<\/li>\n<li><strong>Packages met data stores<\/strong> defini\u00ebren data stores om hun state te handlen. <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#packages-with-data-stores\">Packages met data stores<\/a> kunnen door plugins en externe thema&#8217;s gebruikt worden om gegevens op te halen en te manipuleren.<\/li>\n<\/ul>\n<\/li>\n<li><b>Development packages <\/b>worden gebruikt in de ontwikkelingsmodus. Die pakketten bevatten tools voor linting, testen, bouwen, enz.<\/li>\n<\/ul>\n<p>Hier zijn we vooral ge\u00efnteresseerd in <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#packages-with-data-stores\">packages met data stores<\/a>, die gebruikt worden om gegevens op te halen en te manipuleren.<\/p>\n<h3>De WordPress data store<\/h3>\n<p>De WordPress data module is gebouwd op <a href=\"https:\/\/redux.js.org\/\">Redux<\/a> en deelt de <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/three-principles\">drie kernprincipes van Redux<\/a>, zij het met <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/e9994b49786570391b5690b85bd1f1fd78de845e\/packages\/data\/README.md#comparison-with-redux\">enkele belangrijke verschillen<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><a href=\"https:\/\/redux.js.org\/introduction\/getting-started\">Redux<\/a> is een state manager voor JavaScript toepassingen. De manier waarop Redux werkt wordt samengevat in <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/three-principles\">drie basisprincipes<\/a>:<\/p>\n<ul>\n<li><strong>Enige bron van waarheid<\/strong>: De <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#state\">global state<\/a> van je toepassing wordt opgeslagen in een object tree binnen een enkele store.<\/li>\n<li><strong>De state is alleen-lezen<\/strong>: De enige manier om de toestand te veranderen is door een actie te emitten, een object dat beschrijft wat er gebeurd is.<\/li>\n<li><strong>Veranderingen worden aangebracht met pure functies<\/strong>: Om te bepalen hoe de toestandsboom door acties wordt veranderd, schrijf je pure reducers.<\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>De offici\u00eble documentatie geeft de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/e9994b49786570391b5690b85bd1f1fd78de845e\/packages\/data\/README.md\">volgende definitie<\/a>:<\/p>\n<blockquote><p>De data module van WordPress dient als hub om de state van de toepassing te beheren, zowel voor plugins als voor WordPress zelf, en biedt tools om gegevens te beheren binnen en tussen verschillende modules. Ze is ontworpen als een modulair patroon voor het organiseren en delen van gegevens: eenvoudig genoeg om te voldoen aan de behoeften van een kleine plugin, en tegelijk schaalbaar om te voldoen aan de eisen van een complexe single-page applicatie.<\/p><\/blockquote>\n<p>Standaard registreert Gutenberg <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/\">verschillende data stores<\/a> binnen de toestand van de applicatie. Elk van deze data stores heeft een specifieke naam en doel:<\/p>\n<ul>\n<li><code>core<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/core-data\">Data WordPress core<\/a><\/li>\n<li><code>core\/annotations<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/annotations\">Annotations<\/a><\/li>\n<li><code>core\/blocks<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/blocks\">Data block types<\/a><\/li>\n<li><code>core\/block-editor<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/block-editor\">Data block types<\/a><\/li>\n<li><code>core\/editor<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/editor\">Data post editor<\/a><\/li>\n<li><code>core\/edit-post<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/edit-post\">Data UI editor<\/a><\/li>\n<li><code>core\/notices<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/notices\">Data notices<\/a><\/li>\n<li><code>core\/nux<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/nux\">Data NUX (New User Experience)<\/a><\/li>\n<li><code>core\/viewport<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/viewport\">Data viewport<\/a><\/li>\n<\/ul>\n<p>Via deze stores heb je toegang tot een heleboel gegevens:<\/p>\n<ol>\n<li>Gegevens die te maken hebben <strong>met het huidige bericht<\/strong>, zoals de titel van het bericht, uittreksel, categorie\u00ebn en tags, blokken, enz.<\/li>\n<li>Gegevens die te maken <strong>hebben met de gebruikersinterface<\/strong>, d.w.z. of een toggle aan of uit staat.<\/li>\n<li>Gegevens die te maken hebben <strong>met de hele WordPress installatie<\/strong>, zoals geregistreerde taxonomie\u00ebn, posttypes, blogtitel, auteurs, enz.<\/li>\n<\/ol>\n<p>Deze data stores leven in het globale <code>wp<\/code> object. Om toegang te krijgen tot de state van een store, gebruik je de functie <code>select<\/code>.<\/p>\n<p>Om te zien hoe dat werkt, maak je een nieuw bericht of pagina en start je de <a href=\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/\">inspector van je browser<\/a>. Zoek de console en typ de volgende regel code in:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\")<\/code><\/pre>\n<p>Het resultaat is een object met daarin een lijst van functies die je kunt gebruiken om gegevens uit de<code>core<\/code> data store. Deze functies heten <strong>selectors<\/strong> en fungeren als interfaces om toegang te krijgen tot state values.<\/p>\n<figure id=\"attachment_120245\" aria-describedby=\"caption-attachment-120245\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120245 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/wp-data-select-core.jpg\" alt=\"Het Core WordPress data store object\" width=\"1306\" height=\"1332\"><figcaption id=\"caption-attachment-120245\" class=\"wp-caption-text\">Het Core WordPress data store object<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Het <code>selectors<\/code> object bevat een reeks functies om toegang te krijgen tot state values en ze te gebruiken. Een selector is een functie die state en optionele argumenten accepteert en een of andere waarde uit de state teruggeeft. <em>Het callen van selectors is het voornaamste mechanisme om gegevens uit je state op te halen<\/em>, en dient als een nuttige abstractie boven de ruwe data, die gewoonlijk gevoeliger zijn voor verandering en minder gemakkelijk bruikbaar zijn als een <a href=\"https:\/\/redux.js.org\/usage\/structuring-reducers\/normalizing-state-shape#designing-a-normalized-state\">genormaliseerd object<\/a>. (Bron: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/9d4b83cbbafcd6c6cbd20c86b572f458fc65ff16\/packages\/data\/README.md#selectors\">Github<\/a>)<\/p>\n<\/aside>\n\n<p>De WordPress data store bevat informatie over WordPress in het algemeen en selectors zijn de manier waarop je die informatie krijgt. Bijvoorbeeld, <code>getCurrentUser()<\/code> geeft gegevens voor de huidige gebruiker:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getCurrentUser()<\/code><\/pre>\n<figure id=\"attachment_120246\" aria-describedby=\"caption-attachment-120246\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120246 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/wp-data-select-core-getcurrentuser.jpg\" alt=\"Inspecteren van getCurrentUser antwoord\" width=\"1306\" height=\"1058\"><figcaption id=\"caption-attachment-120246\" class=\"wp-caption-text\">Inspecteren van getCurrentUser antwoord<\/figcaption><\/figure>\n<p>Een andere selector die je kunt gebruiken om gebruikersgegevens uit de data store op te halen is <code>getUsers()<\/code><a id=\"getusers\"><\/a> :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getUsers()<\/code><\/pre>\n<p>De volgende afbeelding toont het response object:<\/p>\n<figure id=\"attachment_120247\" aria-describedby=\"caption-attachment-120247\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120247 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-getusers.jpg\" alt=\"Inspecteren van getUsers antwoord\" width=\"1306\" height=\"990\"><figcaption id=\"caption-attachment-120247\" class=\"wp-caption-text\">Inspecteren van getUsers antwoord<\/figcaption><\/figure>\n<p>Om gegevens voor een enkele gebruiker te krijgen, kun je gewoon de volgende regel typen:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getUsers()[0]<\/code><\/pre>\n<p>Met dezelfde selector kun je ook sitegebruikers ophalen die de rol <code>author<\/code> zijn toegekend:<\/p>\n<pre><code class=\"language-js\">wp.data.select( 'core' ).getUsers({ who: 'authors' })<\/code><\/pre>\n<p>Je kunt ook geregistreerde taxonomie\u00ebn ophalen:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getTaxonomies()<\/code><\/pre>\n<figure id=\"attachment_120248\" aria-describedby=\"caption-attachment-120248\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120248 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-gettaxonomies.jpg\" alt=\"Inspecteren van getTaxonomies antwoord.\" width=\"1306\" height=\"790\"><figcaption id=\"caption-attachment-120248\" class=\"wp-caption-text\">Inspecteren van getTaxonomies antwoord.<\/figcaption><\/figure>\n<p>Een lijst van de geregistreerde post types:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getPostTypes()<\/code><\/pre>\n<p>Of een lijst van plugins:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getPlugins()<\/code><\/pre>\n<p>Laten we nu proberen een andere data store te openen. Om dat te doen gebruik je nog steeds de functie <code>select<\/code>, maar je geeft een andere namespace. Laten we het volgende proberen:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\/edit-post\")<\/code><\/pre>\n<p>Nu krijg je het volgende response object.<\/p>\n<figure id=\"attachment_120249\" aria-describedby=\"caption-attachment-120249\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120249 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-edit-post.jpg\" alt=\"Toegang tot de UI-gegevens van de editor\" width=\"1306\" height=\"1310\"><figcaption id=\"caption-attachment-120249\" class=\"wp-caption-text\">Toegang tot de UI-gegevens van de editor<\/figcaption><\/figure>\n<p>Als je wilt weten of de instellingenzijbalk open is of niet, zou je de <code>isEditorSidebarOpened<\/code> selector gebruiken:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\/edit-post\").isEditorSidebarOpened()<\/code><\/pre>\n<p>Deze functie geeft <code>true<\/code> terug als de zijbalk open is:<\/p>\n<figure id=\"attachment_120957\" aria-describedby=\"caption-attachment-120957\" style=\"width: 1718px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120957 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-edit-post-iseditorsidebaropened-2.jpg\" alt=\"De zijbalk is open.\" width=\"1718\" height=\"1052\"><figcaption id=\"caption-attachment-120957\" class=\"wp-caption-text\">De zijbalk is open.<\/figcaption><\/figure>\n<h2>Zo krijg je toegang tot berichtdata<\/h2>\n<p>Je zou nu een basisbegrip moeten hebben van hoe je bij data kan komen. Nu gaan we dieper in op een specifieke selector, de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core\/#getentityrecords\">functie<code>getEntityRecords<\/code><\/a>, die toegang geeft tot de berichtdata.<\/p>\n<p>Klik in de blok-editor met rechts en kies <strong>Inspect<\/strong>. Kopieer en plak in het tabblad Console de volgende regel:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post')<\/code><\/pre>\n<p>Dit stuurt een verzoek naar de Rest API en geeft een array van records terug die overeenkomen met de laatst gepubliceerde blogberichten.<\/p>\n<figure id=\"attachment_120303\" aria-describedby=\"caption-attachment-120303\" style=\"width: 1698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120303 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-getentityrecords.jpg\" alt=\"getEntityRecords geeft een lijst van berichten terug.\" width=\"1698\" height=\"330\"><figcaption id=\"caption-attachment-120303\" class=\"wp-caption-text\">getEntityRecords geeft een lijst van berichten terug.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Let op dat de eerste keer dat je het verzoek naar de Rest API stuurt, het antwoord <code>null<\/code> zal zijn tot het verzoek voltooid is. Dus, als je <code>null<\/code> zou krijgen, geen zorgen, en probeer het nog eens.<\/p>\n<\/aside>\n\n<p><code>getEntityRecords<\/code> accepteert <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core\/#getentityrecords\">drie parameters<\/a>:<\/p>\n<ul>\n<li><code>kind<\/code> <em>string<\/em>: Soort entiteit (i.e. <code>postType<\/code>).<\/li>\n<li><code>name<\/code> <em>string<\/em>: Naam van de entiteit (i.e. <code>post<\/code>).<\/li>\n<li><code>query<\/code> <em> object<\/em>: Optionele terms query (i.e. <code>{author: 0}<\/code>).<\/li>\n<\/ul>\n<p>Je kunt specifiekere verzoeken bouwen met een <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/posts\/#arguments\">object van argumenten<\/a>.<\/p>\n<p>Je kunt bijvoorbeeld beslissen dat het antwoord alleen berichten uit een bepaalde categorie mag bevatten:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {categories: 3})<\/code><\/pre>\n<p>Je kunt ook alleen artikelen van een bepaalde auteur opvragen:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {author: 2})<\/code><\/pre>\n<p>Als je op een van de door <code>getEntityRecords<\/code> geretourneerde records klikt, krijg je een lijst van properties voor het geselecteerde record:<\/p>\n<figure id=\"attachment_120305\" aria-describedby=\"caption-attachment-120305\" style=\"width: 1846px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120305 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords.jpg\" alt=\"Een voorbeeld van een API verzoek met getEntityRecords.\" width=\"1846\" height=\"746\"><figcaption id=\"caption-attachment-120305\" class=\"wp-caption-text\">Een voorbeeld van een API verzoek met getEntityRecords.<\/figcaption><\/figure>\n<p>Als je wilt dat het antwoord ook de uitgelichte afbeelding bevat, moet je een extra argument aan je vorige verzoek toevoegen:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {author: 2, _embed: true})<\/code><\/pre>\n<figure id=\"attachment_120307\" aria-describedby=\"caption-attachment-120307\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120307 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords-wp-featuredmedia.jpg\" alt=\"Details van de uitgelichte afbeelding in getEntityRecords antwoord.\" width=\"1684\" height=\"1152\"><figcaption id=\"caption-attachment-120307\" class=\"wp-caption-text\">Details van de uitgelichte afbeelding in getEntityRecords antwoord.<\/figcaption><\/figure>\n<p>Nu zou je beter moeten begrijpen hoe je de WordPress data store kunt gebruiken en berichtinformatie kunt ophalen. Voor meer info over de <code>getEntityRecords<\/code> selector, zie <a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Data opvragen in Gutenberg met getEntityRecords<\/a>.<\/p>\n<h2>Zo maak je een dynamisch blok: een voorbeeldproject<\/h2>\n<p>Na onze lange theoretische inleiding kunnen we overgaan tot de praktijk en een dynamisch blok maken met de tools die we in onze vorige tutorial over blokontwikkeling introduceerden.<\/p>\n<p>In dat artikel bespraken we:<\/p>\n<ol>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#setting-up-your-wordpress-development-environment\">Hoe je een WordPress ontwikkelomgeving opzet<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#a-walkthrough-of-the-starter-block-scaffolding\">Wat een bloksteiger is<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#the-project-building-your-first-gutenberg-block\">Hoe je een statisch Gutenberg blok bouwt<\/a><\/li>\n<\/ol>\n<p>Daarom gaan we in dit artikel niet dieper in op die onderwerpen, maar raadpleeg gerust onze vorige gids voor aanvullende informatie, of gewoon voor een opfrisser.<\/p>\n<h3>Een JavaScript ontwikkelomgeving opzetten<\/h3>\n<p>Laten we beginnen met het opzetten van een JavaScript ontwikkelomgeving.<\/p>\n<h4>Installeer of update Node.js<\/h4>\n<p>Installeer <a href=\"https:\/\/nodejs.org\/en\/download\/\">of update<\/a> eerst Node.js. Als je klaar bent, start je je opdrachtregelprogramma en voer je het volgende commando uit:<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Je zou je node versie moeten zien.<\/p>\n<h4>Stel je ontwikkelomgeving in<\/h4>\n<p>Vervolgens heb je een ontwikkelomgeving voor WordPress nodig. Voor onze voorbeelden gebruikten we <a href=\"https:\/\/kinsta.com\/nl\/devkinsta\/\">DevKinsta<\/a>, onze gratis WordPress ontwikkelingstool waarmee je in een handomdraai een lokale WordPress website kunt starten.<\/p>\n<figure id=\"attachment_120268\" aria-describedby=\"caption-attachment-120268\" style=\"width: 2050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120268 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/devkinsta-create-custom-site.jpg\" alt=\"Een aangepaste site maken in DevKinsta\" width=\"2050\" height=\"1258\"><figcaption id=\"caption-attachment-120268\" class=\"wp-caption-text\">Een aangepaste site maken in DevKinsta<\/figcaption><\/figure>\n<p>Maar je bent nog steeds vrij om een <a href=\"https:\/\/kinsta.com\/nl\/ebooks\/wordpress\/wordpress-lokale-ontwikkeling\/\">WordPress lokale ontwikkelomgeving<\/a> te kiezen die je bevalt, zoals MAMP of XAMPP, of zelfs de offici\u00eble <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/env\">wp-env oplossing<\/a>.<\/p>\n<p>Als je DevKinsta gebruikt, klik je op <strong>New WordPress Site <\/strong>of op <strong>Custom Site<\/strong>, vul de formuliervelden in en druk op <strong>Create site<\/strong>.<\/p>\n<p>Het installatieproces duurt een minuut of twee. Als het klaar is, start je je lokale WordPress ontwikkelingswebsite.<\/p>\n<figure id=\"attachment_120269\" aria-describedby=\"caption-attachment-120269\" style=\"width: 2050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120269 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/devkinsta.jpg\" alt=\"Site Info scherm in DevKinsta.\" width=\"2050\" height=\"1258\"><figcaption id=\"caption-attachment-120269\" class=\"wp-caption-text\">Site Info scherm in DevKinsta.<\/figcaption><\/figure>\n<h4>Stel je blok-plugin in<\/h4>\n<p>Wat je nu nodig hebt is een starterblokplugin. Om al het gedoe van een handmatige configuratie te vermijden, bracht het <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">core developer team van<\/a> WordPress de <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\">@wordpress\/create-block <\/a>tool uit, dat <em>deoffici\u00eble zero-configuratie tool is voor het maken van Gutenberg blokken<\/em>.<\/p>\n<p>We behandelden <code>@wordpress\/create-block<\/code> uitvoerig in ons <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#dev-environment\">vorige artikel<\/a>, dus hier kunnen we meteen met de opstelling beginnen.<\/p>\n<p>Navigeer in de commandoregeltool naar de map <strong>\/wp-content\/plugins<\/strong>:<\/p>\n<figure id=\"attachment_105130\" aria-describedby=\"caption-attachment-105130\" style=\"width: 1224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105130 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/new-terminal-at-folder.jpg\" alt=\"Nieuwe terminal bij map in Mac OS.\" width=\"1224\" height=\"958\"><figcaption id=\"caption-attachment-105130\" class=\"wp-caption-text\">Nieuwe terminal bij map in Mac OS.<\/figcaption><\/figure>\n<p>Eenmaal daar voer je het volgende commando uit:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>Je bent nu klaar om de <code>@wordpress\/create-block<\/code> package te installeren:<\/p>\n<figure id=\"attachment_120270\" aria-describedby=\"caption-attachment-120270\" style=\"width: 1432px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120270 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/installing-wordpress-create-block.jpg\" alt=\"Installeren van het @wordpress\/create-block pakket.\" width=\"1432\" height=\"296\"><figcaption id=\"caption-attachment-120270\" class=\"wp-caption-text\">Installeren van het @wordpress\/create-block pakket.<\/figcaption><\/figure>\n<p>Om te bevestigen typ je <code>y<\/code> en druk op Enter.<\/p>\n<p>Dit genereert de PHP, SCSS, en JS bestanden van de plugin in <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#set-up-the-plugin\">interactieve modus<\/a>.<\/p>\n<p>Hieronder staan de details die we in ons voorbeeld zullen gebruiken. Voel je vrij om deze gegevens naar eigen voorkeur te veranderen:<br \/>\n[mededeling]<\/p>\n<ul>\n<li>Block slug used for identification (also the plugin and output folder name):\u00a0<strong>author-plugin<\/strong><\/li>\n<li>The internal namespace for the block name (something unique for your products):\u00a0<strong>author-box<\/strong><\/li>\n<li>The display title for your block:\u00a0<strong>Author box<\/strong><\/li>\n<li>The short description for your block (optional):\u00a0<strong>An example block for Kinsta readers<\/strong><\/li>\n<li>The dashicon to make it easier to identify your block (optional):\u00a0<strong>businessperson<\/strong><\/li>\n<li>The category name to help users browse and discover your block:\u00a0<strong>widgets<\/strong><\/li>\n<li>The name of the plugin author (optional). Multiple authors may be listed using commas:\u00a0<strong>je naam<\/strong><\/li>\n<li>The short name of the plugin\u2019s license (optional):\u00a0<strong>\u2013<\/strong><\/li>\n<li>A link to the full text of the license (optional):\u00a0<strong>\u2013<\/strong><\/li>\n<li>The current version number of the plugin:\u00a0<strong>0.1.0<\/strong><\/li>\n<\/ul>\n<p>[\/notice]<br \/>\nZodra je op Enter drukt, downloadt en configureert de plugin.<\/p>\n<figure id=\"attachment_120271\" aria-describedby=\"caption-attachment-120271\" style=\"width: 1424px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120271 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/installing-the-block-plugin.jpg\" alt=\"Installeren van de blok-plugin.\" width=\"1424\" height=\"878\"><figcaption id=\"caption-attachment-120271\" class=\"wp-caption-text\">Installeren van de blok-plugin.<\/figcaption><\/figure>\n<p>Het proces kan een paar minuten duren. Als het voltooid is, zou je het volgende scherm moeten zien:<\/p>\n<figure id=\"attachment_120272\" aria-describedby=\"caption-attachment-120272\" style=\"width: 1428px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120272 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-bootstrapped.jpg\" alt=\"Block bootstrapped in de plugin map.\" width=\"1428\" height=\"1026\"><figcaption id=\"caption-attachment-120272\" class=\"wp-caption-text\">Block bootstrapped in de plugin map.<\/figcaption><\/figure>\n<p>Je ziet nu een lijst van de commando&#8217;s die je kunt uitvoeren vanuit de plugin map:<\/p>\n<ul>\n<li><code>$ npm start<\/code> &#8211; Start de build voor ontwikkeling.<\/li>\n<li><code>$ npm run build<\/code> &#8211; Bouw de code voor productie.<\/li>\n<li><code>$ npm run format<\/code> &#8211; Formatteer bestanden.<\/li>\n<li><code>$ npm run lint:css<\/code> &#8211; Lint CSS bestanden.<\/li>\n<li><code>$ npm run lint:js<\/code> &#8211; Lint JavaScript bestanden.<\/li>\n<li><code>$ npm run packages-update<\/code> &#8211; Werk WordPress pakketten bij tot de nieuwste versie.<\/li>\n<\/ul>\n<p>Ga nu naar de pluginmap met het volgende commando:<\/p>\n<pre><code class=\"language-bash\">cd author-plugin<\/code><\/pre>\n<p>En start je ontwikkelingsbuild:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Vervolgens ga je naar het Plugins scherm in je WordPress dashboard en activeer je de <strong>Author box<\/strong> plugin:<\/p>\n<figure id=\"attachment_120273\" aria-describedby=\"caption-attachment-120273\" style=\"width: 2104px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120273 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/plugins-screen.jpg\" alt=\"De blokplugin staat in het Plugins scherm.\" width=\"2104\" height=\"1268\"><figcaption id=\"caption-attachment-120273\" class=\"wp-caption-text\">De blokplugin staat in het Plugins scherm.<\/figcaption><\/figure>\n<p>Nu kun je controleren of de plugin goed werkt. Maak een nieuw bericht en begin met het typen van <code>\/<\/code> om de quick inserter te starten:<\/p>\n<figure id=\"attachment_120958\" aria-describedby=\"caption-attachment-120958\" style=\"width: 1402px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120958 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/quick-inserter-2.jpg\" alt=\"Het blok-item in de Snelle invoegtoepassing.\" width=\"1402\" height=\"804\"><figcaption id=\"caption-attachment-120958\" class=\"wp-caption-text\">Het blok-item in de Snelle invoegtoepassing.<\/figcaption><\/figure>\n<p>Je vindt het <strong>Author box<\/strong> blok ook in de Block Inserter, onder de categorie <strong>Widgets<\/strong>. Selecteer het blok om het aan het editor canvas toe te voegen:<\/p>\n<figure id=\"attachment_120275\" aria-describedby=\"caption-attachment-120275\" style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120275 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-inserter.jpg\" alt=\"De WordPress Block Inserter\" width=\"1434\" height=\"860\"><figcaption id=\"caption-attachment-120275\" class=\"wp-caption-text\">De WordPress Block Inserter<\/figcaption><\/figure>\n<p>Je bent klaar. Sla nu het bericht op en bekijk een voorbeeld van de pagina om te zien of het blok correct wordt weergegeven.<\/p>\n<h4>De bloksteiger<\/h4>\n<p>We <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#a-walkthrough-of-the-starter-block-scaffolding\">behandelden de bloksteiger<\/a> al in ons vorige artikel. We geven hier dus alleen een kort overzicht van de bestanden die we voor onze voorbeelden gaan wijzigen.<\/p>\n<p><strong>De root map<br \/>\n<\/strong>De root map is waar je het hoofd PHP bestand vindt en verschillende submappen.<\/p>\n<p><strong>author-plugin.php<\/strong><br \/>\nStandaard levert de <code>@wordpress\/create-block<\/code> package het volgende <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#plugin-file\">PHP bestand<\/a>:<\/p>\n<pre><code class=\"language-php\"><\/code><\/pre>\n<pre class=\"language-php\"><code class=\"language-php\"><span class=\"token comment\">\/**\n * Plugin Name:       Author box\n * Description:       An example block for Kinsta readers\n * Requires at least: 5.8\n * Requires PHP:      7.0\n * Version:           0.1.0\n * Author:            Carlo\n * License:           GPL-2.0-or-later\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Text Domain:       author-plugin\n *\n * @package           author-box\n *\/<\/span>\n\n<span class=\"token comment\">\/**\n * Registers the block using the metadata loaded from the `block.json` file.\n * Behind the scenes, it registers also all assets so they can be enqueued\n * through the block editor in the corresponding context.\n *\n * @see https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\n *\/<\/span>\n<span class=\"token keyword\">function<\/span> <span class=\"token function-definition function\">author_box_author_plugin_block_init<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n\t<span class=\"token function\">register_block_type<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token constant\">__DIR__<\/span> <span class=\"token operator\">.<\/span> <span class=\"token string single-quoted-string\">'\/build'<\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<span class=\"token function\">add_action<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token string single-quoted-string\">'init'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string single-quoted-string\">'author_box_author_plugin_block_init'<\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<pre><code class=\"language-php\"><\/code><\/pre>\n<p>In de heading zie je de data die we bij de setup hebben ingevoerd.<\/p>\n<p>Met statische blokken zul je meestal werken aan de JavaScript bestanden die in de <em>src<\/em> map staan. Met dynamische blokken schrijf je PHP code om de inhoud van het blok aan de front-end te tonen.<\/p>\n<p><strong>De <em>src <\/em><\/strong>map<br \/>\nDe <em>src<\/em> map is je ontwikkelingsmap. Hier vind je de volgende bestanden:<\/p>\n<ul>\n<li><em>block.json<\/em><\/li>\n<li><em>index.js<\/em><\/li>\n<li><em>edit.js<\/em><\/li>\n<li><em>save.js<\/em><\/li>\n<li><em>editor.scss<\/em><\/li>\n<li><em>style.scss<\/em><\/li>\n<\/ul>\n<p><strong>block.json<\/strong><br \/>\nDe <em>block.json<\/em> is je metadata-bestand. <code>@wordpress\/create-block<\/code> genereert het volgende <strong>block.json<\/strong> bestand:<\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{<\/span>\n\t<span class=\"token property\">\"$schema\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/schemas.wp.org\/trunk\/block.json\"<\/span><span class=\"token punctuation\">,<\/span>\n\t<span class=\"token property\">\"apiVersion\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span>\n\t<span class=\"token property\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"author-box\/author-plugin\"<\/span><span class=\"token punctuation\">,<\/span>\n\t<span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"0.1.0\"<\/span><span class=\"token punctuation\">,<\/span>\n\t<span class=\"token property\">\"title\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Author box\"<\/span><span class=\"token punctuation\">,<\/span>\n\t<span class=\"token property\">\"category\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"widgets\"<\/span><span class=\"token punctuation\">,<\/span>\n\t<span class=\"token property\">\"icon\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"businessperson\"<\/span><span class=\"token punctuation\">,<\/span>\n\t<span class=\"token property\">\"description\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"An example block for Kinsta readers\"<\/span><span class=\"token punctuation\">,<\/span>\n\t<span class=\"token property\">\"supports\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n\t\t<span class=\"token property\">\"html\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span>\n\t<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n\t<span class=\"token property\">\"textdomain\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"author-plugin\"<\/span><span class=\"token punctuation\">,<\/span>\n\t<span class=\"token property\">\"editorScript\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"file:.\/index.js\"<\/span><span class=\"token punctuation\">,<\/span>\n\t<span class=\"token property\">\"editorStyle\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"file:.\/index.css\"<\/span><span class=\"token punctuation\">,<\/span>\n\t<span class=\"token property\">\"style\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"file:.\/style-index.css\"<\/span>\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p>Voor meer algemene informatie over het <em>block.json<\/em> bestand, verwijs ik je naar <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#block-json\">ons vorige blogbericht<\/a>.<\/p>\n<p><strong>index.js<\/strong><br \/>\nHet <em>index.js<\/em> bestand is waar je het bloktype op de client registreert:<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\n\nimport '.\/style.scss';\n\nimport Edit from '.\/edit';\nimport save from '.\/save';\n\nregisterBlockType('author-box\/author-plugin', {\n\tedit: Edit,\n\tsave,\n});<\/code><\/pre>\n<p><strong>edit.js<\/strong><br \/>\nHet <em>edit.js<\/em> bestand is waar je de blok-interface opbouwt die in de editor wordt weergegeven:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\n\nimport { useBlockProps } from '@wordpress\/block-editor';\n\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p {...useBlockProps()}&gt;\n\t\t\t{__('Author box \u2013 hello from the editor!', 'author-plugin')}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p><strong>save.js<\/strong><br \/>\nHet <em>save.js<\/em> bestand bevat het script dat de blokinhoud bouwt om in de database te worden opgeslagen. We zullen dit bestand in deze tutorial niet gebruiken:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\n\nimport { useBlockProps } from '@wordpress\/block-editor';\n\nexport default function save() {\n\treturn (\n\t\t&lt;p {...useBlockProps.save()}&gt;\n\t\t\t{__('Author box \u2013 hello from the saved content!', 'author-plugin')}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<h2>Het blok bouwen om te renderen in de editor<\/h2>\n<p>Open je project in <a href=\"https:\/\/kinsta.com\/nl\/blog\/beste-teksteditors\/#visual-studio-code\">Visual Studio Code<\/a> of een andere <a href=\"https:\/\/kinsta.com\/nl\/blog\/beste-teksteditors\/\">code-editor<\/a> waar je graag mee werkt.<\/p>\n<p>Als je Visual Studio Code gebruikt, ga dan naar <strong>Terminal -&gt; New Terminal<\/strong>. Dit start een terminalvenster op in de hoofdmap van je project.<\/p>\n<p>Typ in de terminal (of in je favoriete opdrachtregelprogramma) het volgende commando:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Je draait nu de node omgeving in ontwikkelingsmodus.<\/p>\n<figure id=\"attachment_120337\" aria-describedby=\"caption-attachment-120337\" style=\"width: 2378px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120337 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/the-project-in-visual-studio-code.jpg\" alt=\"Het blokpluginproject in Visual Studio Code.\" width=\"2378\" height=\"1628\"><figcaption id=\"caption-attachment-120337\" class=\"wp-caption-text\">Het blokpluginproject in Visual Studio Code.<\/figcaption><\/figure>\n<p>Vanaf hier volg je twee verschillende routes. Om het blok in de editor te renderen, werk je in het <em>edit.js<\/em> bestand. Om het blok aan de frontend weer te geven, moet je PHP code schrijven in het hoofdbestand van de plugin.<\/p>\n<p>Stroop nu je mouwen op want we kunnen beginnen met coderen:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"10\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>In dit artikel geven we alleen losse codesnippets. De volledige code is <a href=\"https:\/\/gist.github.com\/carlodaniele\/27e292fbbe4b897ca3bda4539dfd74df\">beschikbaar op Gist<\/a>.<\/p>\n<\/aside>\n\n<h3>Registreer het blok op de server<\/h3>\n<p>Eerst moet je het blok op de server registreren en de PHP code schrijven om gegevens uit de database op te halen.<\/p>\n<p>In het bestand <em>author-plugin.php<\/em> moet je een tweede argument doorgeven aan de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#plugin-file\">functie<code>register_block_type<\/code><\/a>:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_block_init() {\n\tregister_block_type( __DIR__ . '\/build', array(\n\t\t'render_callback' =&gt; 'author_box_author_plugin_render_author_content'\n\t) );\n}\nadd_action( 'init', 'author_box_author_plugin_block_init' );<\/code><\/pre>\n<p>Het tweede argument is een array van argumenten voor het registreren van een bloktype (zie hier de <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_block_type\/__construct\/\">volledige lijst van beschikbare argumenten<\/a>). In de code hierboven hebben we alleen <code>render_callback<\/code> meegegeven, die de callbackfunctie bepaalt die het blok op het scherm rendert.<\/p>\n<p>Vervolgens declareer je de functie:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content() {\n\treturn 'Hello World!';\n}<\/code><\/pre>\n<p>Sla het bestand op, maak een nieuw bericht of pagina, en voeg het <strong>Author Box<\/strong> blok toe aan het editor canvas.<\/p>\n<figure id=\"attachment_120275\" aria-describedby=\"caption-attachment-120275\" style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120275 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-inserter.jpg\" alt=\"De WordPress Block Inserter.\" width=\"1434\" height=\"860\"><figcaption id=\"caption-attachment-120275\" class=\"wp-caption-text\">De WordPress Block Inserter.<\/figcaption><\/figure>\n<p>De blok-editor toont nog steeds het startblok, want we hebben het <em>edit.js<\/em> bestand nog niet veranderd.<\/p>\n<p>Maar als je nu een voorbeeld van het bericht in de frontend bekijkt, zie je dat de oorspronkelijke blokinhoud nu vervangen is door de &#8220;Hello World&#8221; string.<\/p>\n<p>Omdat de HTML die op het frontend wordt weergegeven door het PHP bestand wordt gegenereerd, hoeft de <code>save<\/code> functie niets terug te geven. Laten we dus meteen naar het <em>save.js<\/em> bestand gaan en de code veranderen zoals hieronder:<\/p>\n<pre><code class=\"language-js\">export default function save() {\n\treturn null;\n}<\/code><\/pre>\n<h3>Definieer blokattributen<\/h3>\n<p>Nu heb je een plaats nodig om gebruikersinstellingen op te slaan. Bijvoorbeeld het aantal postitems dat uit de database opgehaald moet worden, of een bepaald veld wel of niet getoond moet worden, enz. Om dat te doen definieer je een aantal <code>attributes<\/code> in het <em>block.json<\/em> bestand.<\/p>\n<p>Je zou de gebruiker bijvoorbeeld de mogelijkheid kunnen geven om het aantal in het blok op te nemen berichten te bepalen, de optie om uitgelichte afbeeldingen, datum, exceprt te tonen, en\/of de profielfoto van de auteur te verbergen\/tonen.<\/p>\n<p>Hier is de volledige lijst van attributen die we zullen gebruiken om ons voorbeeldblok te bouwen:<\/p>\n<pre><code class=\"language-json\">{\n\t...\n\t\"attributes\": {\n\t\t\"numberOfItems\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 3\n\t\t},\n\t\t\"columns\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 1\n\t\t},\n\t\t\"displayDate\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayExcerpt\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayThumbnail\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayAuthorInfo\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"showAvatar\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t}, \n\t\t\"avatarSize\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 48\n\t\t},\n\t\t\"showBio\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t}\n\t}\n}<\/code><\/pre>\n<h3>Bouw het te tonen blok in de editor<\/h3>\n<p>De <code>getEntityRecords<\/code> selector zit in de <code>@wordpress\/data<\/code> package. Om hem te gebruiken moet je de <code>useSelect<\/code> hook uit deze package in je <code>edit.js<\/code> bestand importeren:<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><code>useSelect<\/code> is een custom React hook om waarden op te halen uit geregistreerde selectors, gebaseerd op de <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usecallback\"><code>useCallback<\/code><\/a> React hook.<\/p>\n<\/aside>\n\n<p>Voeg vervolgens de volgende code toe aan de <code>Edit()<\/code> functie:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect( ( select ) =&gt; {\n\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t'per_page': 3\n\t});\n});<\/code><\/pre>\n<p>In de code hierboven hebben we het aantal berichten hardgecodeerd. Maar misschien wil je gebruikers de mogelijkheid geven een ander aantal berichten in te stellen. Je kunt daarvoor een attribuut gebruiken.<\/p>\n<p>In je <em>block.json<\/em> zou je een <code>numberOfItems<\/code> attribuut gedefinieerd moeten hebben. Je kunt het gebruiken in je <code>Edit<\/code> functie zoals hieronder:<\/p>\n<pre><code class=\"language-js\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect( ( select ) =&gt; {\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'per_page': numberOfItems\n\t\t});\n\t});\n\n\tconsole.log( posts );\n\n\treturn (\n\t\t...\n\t);\n}<\/code><\/pre>\n<p>Je zult de berichten nog niet op het scherm zien, maar voer een <code>console.log<\/code> uit en kijk wat er gebeurt in de console van je browser-inspector:<\/p>\n<figure id=\"attachment_120340\" aria-describedby=\"caption-attachment-120340\" style=\"width: 1714px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120340 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/console-log.jpg\" alt=\"Het resultaat in de console van de browser.\" width=\"1714\" height=\"906\"><figcaption id=\"caption-attachment-120340\" class=\"wp-caption-text\">Het resultaat in de console van de browser.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\"><code>useSelect<\/code><\/a> kan twee argumenten nemen: een inline callback en een array van dependencies. Beide geven een <a href=\"https:\/\/en.wikipedia.org\/wiki\/Memoization\">gememoiseerde<\/a> versie van de callback terug die alleen verandert als een van de dependencies verandert.<\/p>\n<p>Om berichten bij elke <code>numberOfItems<\/code> attribuutwijziging opnieuw op te halen, moet je dus de <code>Edit<\/code> functie veranderen zoals hieronder:<\/p>\n<pre><code class=\"language-js\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems\n\t\t\t});\n\t\t}, \n\t\t[ numberOfItems ]\n\t);\n\n\tconsole.log(posts);\n\n\treturn (\n\t\t...\n\t);\n}<\/code><\/pre>\n<p>Vervolgens moet je <a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html\">je lijst van berichten renderen<\/a>. Om dat te doen kun je de ingebouwde <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">JavaScript <code>map<\/code> methode<\/a> gebruiken:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems\n\t\t\t});\n\t\t},\n\t\t[ numberOfItems ]\n\t);\n\n\tconsole.log(posts);\n\t\n\treturn (\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t&lt;ul&gt;\n\t\t\t\t{ posts && posts.map( ( post ) =&gt; {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t\t\t\t{ \n\t\t\t\t\t\t\t\t\t\tpost.title.rendered ? \n\t\t\t\t\t\t\t\t\t\tpost.title.rendered :\n\t\t\t\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t\t\t\t&lt;\/h5&gt;\n\t\t\t\t\t\t&lt;\/li&gt;\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t&lt;\/ul&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Eerst controleert deze of je minstens \u00e9\u00e9n bericht in de array hebt, dan voert deze de loop uit.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>De <code>map()<\/code> methode maakt een nieuwe array die vol komt met de resultaten van het callen van een gegeven functie op elk element in de gecallde array &#8211; Bron: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">MDN webdocs<\/a>.<\/p>\n<\/aside>\n\n<p>Let op dat, omdat we de <code>map<\/code> methode met een React component gebruiken, we ook een <code>key<\/code> attribuut gebruiken om het post ID aan het huidige lijst-item toe te wijzen.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Een &#8220;key&#8221; is een speciaal string attribuut dat je moet opnemen bij het maken van lijsten met elementen &#8211; Bron: <a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html\">Lists and Keys<\/a> in React Docs.<\/p>\n<\/aside>\n\n<p><code>post.link<\/code> en <code>post.title.rendered<\/code> geven respectievelijk de URL en de titel van het bericht weer.<\/p>\n<p>De afbeelding hieronder toont de volledige lijst van de <code>post<\/code> objectproperties.<\/p>\n<figure id=\"attachment_120341\" aria-describedby=\"caption-attachment-120341\" style=\"width: 2290px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120341 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/js-loop-1.jpg\" alt=\"Het Post object.\" width=\"2290\" height=\"1270\"><figcaption id=\"caption-attachment-120341\" class=\"wp-caption-text\">Het Post object.<\/figcaption><\/figure>\n<p>De code hierboven is slechts een basisvoorbeeld van het gebruik van <code>getEntityRecords<\/code>. Nu is het tijd om onze kennis in de praktijk te brengen.<\/p>\n<p>Stel dat je wilt voorkomen dat je blok HTML tags weergeeft die de gebruiker aan de berichttitel kan hebben toegevoegd. WordPress biedt daarvoor een <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/#rawhtml\"><code>RawHTML<\/code><\/a> component.<\/p>\n<p>Eerst importeer je de component uit het <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/\">@wordpress\/element pakket<\/a>:<\/p>\n<pre><code class=\"language-js\">import { RawHTML } from '@wordpress\/element';<\/code><\/pre>\n<p>Vervolgens wrap je de berichttitel binnen een <code>RawHTML<\/code> element:<\/p>\n<pre><code class=\"language-jsx\">&lt;div { ...useBlockProps() }&gt;\n\t&lt;ul&gt;\n\t\t{ posts && posts.map((post) =&gt; {\n\t\t\treturn (\n\t\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t\t{ post.title.rendered ? (\n\t\t\t\t\t\t\t\t&lt;RawHTML&gt;\n\t\t\t\t\t\t\t\t\t{ post.title.rendered }\n\t\t\t\t\t\t\t\t&lt;\/RawHTML&gt;\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t\t&lt;\/h5&gt;\n\t\t\t\t&lt;\/li&gt;\n\t\t\t)\n\t\t})}\n\t&lt;\/ul&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>En dat is het. Voeg nu een HTML tag toe aan je berichttitel en sla het bericht op. Test dan je code met en zonder <code>RawHTML<\/code> en kijk hoe de inhoud van je blok op het scherm verandert.<\/p>\n<h3>Voeg de datum toe<\/h3>\n<p>WordPress biedt een aantal JavaScript functies om datums te beheren en op te maken. Om die functies te gebruiken moet je ze eerst uit het <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-date\/\"><code>@wordpress\/date<\/code><\/a> pakket importeren in je <em>edit.js<\/em> bestand:<\/p>\n<pre><code class=\"language-js\">import { dateI18n, format, __experimentalGetSettings } from '@wordpress\/date';<\/code><\/pre>\n<ul>\n<li><code>dateI18n<\/code>: Formatteer een datum, door hem te vertalen naar de gelokaliseerde instellingen van de site.<\/li>\n<li><code>format<\/code>: Formatteer een datum.<\/li>\n<li><code>__experimentalGetSettings<\/code>: Geef de datum weer in het formaat dat ingesteld is in de algemene instellingen van WordPress.<\/li>\n<\/ul>\n<p>Die functies zijn niet gedocumenteerd, maar je vindt nuttige voorbeelden in de broncode van verschillende blokken. Zie bijvoorbeeld de bestanden <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/latest-posts\/edit.js\">latest-posts<\/a> en <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/post-date\/edit.js\">post-date<\/a> <em>edit.js<\/em>.<\/p>\n<p>Voeg nu het <code>displayDate<\/code> attribuut toe:<\/p>\n<pre><code class=\"language-js\">const { numberOfItems, displayDate } = attributes;<\/code><\/pre>\n<p>Voeg nu de volgende code toe binnen het <code>&lt;li&gt;<\/code> element:<\/p>\n<pre><code class=\"language-jsx\">{ \n\tdisplayDate && (\n\t\t&lt;time\n\t\t\tclassName='wp-block-author-box-author-plugin__post-date'\n\t\t\tdateTime={ format( 'c', post.date_gmt ) }\n\t\t&gt;\n\t\t\t{ dateI18n(\n\t\t\t\t__experimentalGetSettings().formats.date, \n\t\t\t\tpost.date_gmt\n\t\t\t)}\n\t\t&lt;\/time&gt;\n\t) \n}<\/code><\/pre>\n<p>Wat gebeurt hier?<\/p>\n<ul>\n<li>Als <code>displayDate<\/code> is <code>true<\/code>, geef dan de datum weer met een <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/time\"><code>time<\/code> element<\/a>.<\/li>\n<li>Het <code>dateTime<\/code> attribuut geeft de tijd en\/of datum van het element in een van de <a href=\"https:\/\/wordpress.org\/support\/article\/formatting-date-and-time\/\">toegestane formaten<\/a>.<\/li>\n<li><code>dateI18n<\/code> haalt de datum op in een gelokaliseerd formaat. Deze functie werkt op een soortgelijke manier als de PHP<a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/date_i18n\/\">PHP <code>date_i18n<\/code> WordPress functie<\/a>.<\/li>\n<\/ul>\n<h3>Voeg het excerpt toe<\/h3>\n<p>Nu zou het eenvoudig moeten zijn om het berichtexcerpt toe te voegen. Kijk eerst naar de <code>excerpt<\/code> propertyin de inspector van de browser. Je ziet dat de eigenlijke inhoud is opgeslagen in <code>excerpt.rendered<\/code>.<\/p>\n<figure id=\"attachment_120343\" aria-describedby=\"caption-attachment-120343\" style=\"width: 1640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120343 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/inspecting-post-excerpt.jpg\" alt=\"Inspecteren van het berichtexcerpt in Chrome DevTools.\" width=\"1640\" height=\"868\"><figcaption id=\"caption-attachment-120343\" class=\"wp-caption-text\">Inspecteren van het berichtexcerpt in Chrome DevTools.<\/figcaption><\/figure>\n<p>Voeg vervolgens het <code>displayExcerpt<\/code> attribuut toe aan het <code>attributes<\/code> object:<\/p>\n<pre><code class=\"language-js\">const { numberOfItems, displayDate, displayExcerpt } = attributes;<\/code><\/pre>\n<p>Voeg dan de volgende code toe v\u00f3\u00f3r de <code>&lt;\/li&gt;<\/code> sluit-tag in de functie <code>Edit<\/code>:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayExcerpt &&\n\tpost.excerpt.rendered && (\n\t\t&lt;p&gt;\n\t\t\t&lt;RawHTML&gt;\n\t\t\t\t{ post.excerpt.rendered }\n\t\t\t&lt;\/RawHTML&gt;\n\t\t&lt;\/p&gt;\n\t)\n}<\/code><\/pre>\n<p>Als je niet vertrouwd bent met JavaScript, gebruikten we hier en hierboven de <strong>Short Circuit Evaluation<\/strong>, waarbij, als alle voorwaarden waar zijn, de waarde van de laatste operand wordt teruggegeven (lees meer in <a href=\"https:\/\/reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\">Inline If with Logical &#038;&#038; Operator<\/a> en <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND\">Logical AND (&#038;&#038;)<\/a>).<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>In JavaScript evalueert <code>true &amp;&amp; expression<\/code> altijd naar <code>expression<\/code>, en <code>false &amp;&amp; expression<\/code> evalueert altijd naar <code>false<\/code>.<\/p>\n<p>Als de voorwaarde <code>true<\/code> daarom is, verschijnt het element direct na <code>&amp;&amp;<\/code> in de uitvoer. Als het <code>false<\/code> is, zal React het negeren en overslaan. Bron: <a href=\"https:\/\/reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\">Conditional Rendering<\/a> in React Docs.<\/p>\n<\/aside>\n\n<p>Tenslotte kun je je code opnieuw testen. Verander de waarde van het attribuut in het <em>block.json<\/em> bestand en kijk wat er in de editor gebeurt.<\/p>\n<h3>Voeg de uitgelichte afbeelding toe<\/h3>\n<p>Nu moet je de code toevoegen die de uitgelichte afbeeldingen rendert. Begin met het toevoegen van het <code>displayThumbnail<\/code> attribuut aan <code>attributes<\/code>:<\/p>\n<pre><code class=\"language-js\">const { \n\tnumberOfItems, \n\tdisplayDate, \n\tdisplayExcerpt, \n\tdisplayThumbnail \n} = attributes;<\/code><\/pre>\n<p>Nu moet je uitzoeken waar de uitgelichte afbeelding wordt opgeslagen. Zoals we hierboven al zeiden, moet je om de uitgelichte afbeelding te krijgen een nieuw <code>_embed<\/code> argument aan je query toevoegen. In je code verander je de query argumenten als volgt:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect(\n\t( select ) =&gt; {\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Hier voegden we eenvoudig <code>'_embed': true<\/code> toe aan de array van argumenten. Dit levert een <code>post<\/code> object op dat de property <code>_embedded<\/code> bevat, die de afbeeldingsgegevens geeft die je nodig hebt om de uitgelichte beelden te tonen.<\/p>\n<p>Nu moet je weten waar je <a href=\"#accessing-post-data-using-the-wordpress-rest-api\">de afbeeldingsdetails kunt vinden<\/a>.<\/p>\n<figure id=\"attachment_120307\" aria-describedby=\"caption-attachment-120307\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120307 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords-wp-featuredmedia.jpg\" alt=\"Uitgelichte beelddetails in getEntityRecords antwoord.\" width=\"1684\" height=\"1152\"><figcaption id=\"caption-attachment-120307\" class=\"wp-caption-text\">Uitgelichte beelddetails in getEntityRecords antwoord.<\/figcaption><\/figure>\n<p>Je hoeft alleen maar de code toe te voegen die het beeld op het scherm rendert:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayThumbnail && \n\tpost._embedded && \n\tpost._embedded['wp:featuredmedia'] &&\n\tpost._embedded['wp:featuredmedia'][0] &&\n\t&lt;img \n\tclassName='wp-block-author-box-author-plugin__post-thumbnail'\n\t\tsrc={ post._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url }\n\t\talt={ post._embedded['wp:featuredmedia'][0].alt_text }\n\t\/&gt;\n}<\/code><\/pre>\n<p>Sla het bestand op, schakel over naar de blok-editor, en kijk of de afbeelding correct wordt weergegeven als het <code>displayThumbnail<\/code> attribuut ingesteld is op <code>true<\/code>.<\/p>\n<figure id=\"attachment_120354\" aria-describedby=\"caption-attachment-120354\" style=\"width: 2192px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120354 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-with-featured-images-date-excerpt.jpg\" alt=\"Een lijst van berichten met uitgelichte afbeelding, datum en uittreksel.\" width=\"2192\" height=\"1220\"><figcaption id=\"caption-attachment-120354\" class=\"wp-caption-text\">Een lijst van berichten met uitgelichte afbeelding, datum en uittreksel.<\/figcaption><\/figure>\n<h3>Voeg zijbalkcontrols toe<\/h3>\n<p>Tot nu toe hebben we de standaardwaarden van het attribuut gebruikt die in de <em>block.json<\/em> zijn ingesteld. Maar uit <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#define-attributes\">ons vorige artikel<\/a> weten we dat we event handlers kunnen defini\u00ebren om gebruikers de mogelijkheid te geven aangepaste waarden aan elk attribuut toe te kennen.<\/p>\n<p>Om dat te doen voeg je een stel controls toe aan de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#settings-sidebar\">zijbalk met blokinstellingen<\/a>. Importeer in <em>edit.js<\/em> de volgende componenten uit de overeenkomstige packages:<\/p>\n<pre><code class=\"language-js\">import { \n\tuseBlockProps,\n\tInspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n\tPanelBody,\n\tPanelRow,\n\tQueryControls,\n\tToggleControl,\n\tRangeControl\n} from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li><code>InspectorControls<\/code>: Bevat zijbalkinstellingen die het hele blok be\u00efnvloeden (zie <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\">op GitHub<\/a>).<\/li>\n<li><code>PanelBody<\/code>: Voegt een inklapbare container toe aan de instellingenzijbalk (zie <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelbody\">op GitHub<\/a>)<\/li>\n<li><code>PanelRow<\/code>: Produceert een generieke container voor zijbalkcontrols (zie <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelrow\">op GitHub<\/a>)<\/li>\n<li><code>QueryControls<\/code>: Biedt controls voor instellingen om een query te bouwen (zie <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/query-controls\">op GitHub<\/a>)<\/li>\n<li><code>ToggleControl<\/code>: Biedt een toggleknop waarmee gebruikers een bepaalde optie kunnen in-\/uitschakelen (zie <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/toggle-control\/README.md\">op GitHub<\/a>)<\/li>\n<li><code>RangeControl<\/code>: Wordt gebruikt om selecties te maken uit een reeks oplopende waarden (zie <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/range-control\">op GitHub<\/a>)<\/li>\n<\/ul>\n<p>Vervolgens moet je de functie <code>Edit<\/code> bijwerken om de nu beschikbare controls te gebruiken. Eerst wijzig je de functie <code>Edit<\/code> als volgt:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes, setAttributes } ) {\n\n\tconst { \n\t\tnumberOfItems, \n\t\tcolumns, \n\t\tdisplayExcerpt, \n\t\tdisplayDate, \n\t\tdisplayThumbnail\n\t} = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems,\n\t\t\t\t'_embed': true\n\t\t\t});\n\t\t},\n\t\t[ numberOfItems ]\n\t);\n\t...\n}<\/code><\/pre>\n<p>Let op de <code>setAttributes<\/code> eigenschap die aan de functie <code>Edit<\/code> wordt doorgegeven.<\/p>\n<p>Nu kun je de overeenkomstige elementen aan je JSX code toevoegen:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t\t&lt;PanelBody title={ __( 'Content Settings', 'author-plugin' ) }&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;QueryControls \n\t\t\t\t\t\tnumberOfItems={ numberOfItems }\n\t\t\t\t\t\tonNumberOfItemsChange={ ( value ) =&gt;\n\t\t\t\t\t\t\tsetAttributes( { numberOfItems: value } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tminItems={ 1 }\n\t\t\t\t\t\tmaxItems={ 10 }\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;RangeControl\n\t\t\t\t\t\tlabel={ __( 'Number of Columns', 'author-plugin' ) }\n\t\t\t\t\t\tvalue={ columns }\n\t\t\t\t\t\tonChange={ ( value ) =&gt;\n\t\t\t\t\t\t\tsetAttributes( { columns: value } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ 4 }\n\t\t\t\t\t\trequired\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Show Featured Image', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayThumbnail }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayThumbnail: ! displayThumbnail } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Show Date', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayDate }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayDate: ! displayDate } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display Excerpt', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayExcerpt }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayExcerpt: ! displayExcerpt } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;\/PanelBody&gt;\n\t\t&lt;\/InspectorControls&gt;\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t...\n\t\t&lt;\/div&gt;\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>Wauw, toch wel een hoop code. Schrik niet, het is vrij gemakkelijk te begrijpen.<\/p>\n<p>De element attributen die hier het meest je aandacht verdienen zijn <code>onNumberOfItemsChange<\/code> in <code>QueryControls<\/code> en <code>onChange<\/code> in <code>RangeControl<\/code> en <code>ToggleControl<\/code>. Die attributen stellen de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/Event_handlers\">event handlers<\/a> in die nodig zijn om de gebruiker in staat te stellen het uiterlijk en\/of het gedrag van een blok aan te passen.<\/p>\n<p>Je zult ook merken dat we <code>&lt;&gt;<\/code> en <code>&lt;\/&gt;<\/code> tags gebruikten, wat de korte syntaxis is voor het declareren van <a href=\"https:\/\/reactjs.org\/docs\/fragments.html#short-syntax\">React fragmenten<\/a>.<\/p>\n<p>Sla nu je bestand op, ga naar de editor, en vernieuw de pagina:<\/p>\n<figure id=\"attachment_120367\" aria-describedby=\"caption-attachment-120367\" style=\"width: 1862px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120367\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-box-content-settings.jpg\" alt=\"Blokinstellingen.\" width=\"1862\" height=\"1022\"><figcaption id=\"caption-attachment-120367\" class=\"wp-caption-text\">Blokinstellingen.<\/figcaption><\/figure>\n<p>Staat alles er in? Laten we dan verder gaan en de gegevens van de auteur van de post toevoegen.<\/p>\n<h3>Zoek de auteur van het bericht<\/h3>\n<p>Zoals we hierboven al zeiden, toont ons blok een lijst van artikelen die door dezelfde auteur als de huidige post zijn geschreven.<\/p>\n<p>Om het ID van de post auteur te krijgen, importeer je de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-editor\/#getcurrentpostattribute\"><code>getCurrentPostAttribute<\/code><\/a> selector uit de <code>core\/editor<\/code> data store:<\/p>\n<pre><code class=\"language-js\">wp.data.select( 'core\/editor' ).getCurrentPostAttribute( 'author' )<\/code><\/pre>\n<p><code>getCurrentPostAttribute<\/code> geeft een attribuutwaarde voor het bewaarde bericht terug.<\/p>\n<p>Als je eenmaal het auteur ID hebt, kun je de query veranderen zoals hieronder:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect(\n\t( select ) =&gt; {\n\n\t\tconst _authorId = select( 'core\/editor' ).getCurrentPostAttribute( 'author' );\n\t\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'author': _authorId,\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Met deze code krijg je een lijst van <code>n<\/code> artikelen van dezelfde auteur als de huidige post.<\/p>\n<p>Nu we hebben over het auteur ID hebben, kunnen we het ook gebruiken om aanvullende gegevens uit de database te halen.<\/p>\n<h3>Toon details over de auteur<\/h3>\n<p>Omdat we geen documentatie beschikbaar hebben, gebruikten we de code uit het <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/post-author\/edit.js\">coreblok Post Author <\/a>\u00a0als referentie.<\/p>\n<p>Om auteursdetails te tonen, moet je eerst een nieuwe dependencies importeren:<\/p>\n<pre><code class=\"language-js\">import { forEach } from 'lodash';<\/code><\/pre>\n<p>Werk dan, in de functie <code>Edit<\/code>, het object <code>attributes<\/code> als volgt bij:<\/p>\n<pre><code class=\"language-js\">const { \n\tnumberOfItems, \n\tcolumns, \n\tdisplayExcerpt, \n\tdisplayDate, \n\tdisplayThumbnail, \n\tdisplayAuthorInfo, \n\tshowAvatar, \n\tavatarSize, \n\tshowBio \n} = attributes;<\/code><\/pre>\n<p>Als je dat gedaan hebt, bewerk je de code die je in de vorige paragraaf zag om auteursgegevens op te halen:<\/p>\n<pre><code class=\"language-js\">const { authorDetails, posts } = useSelect(\n\t( select ) =&gt; {\n\n\t\tconst _authorId = select( 'core\/editor' ).getCurrentPostAttribute( 'author' );\n\n\t\tconst authorDetails = _authorId ? select( 'core' ).getUser( _authorId ) : null;\n\t\n\t\tconst posts = select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'author': _authorId,\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\n\t\treturn { \n\t\t\tauthorDetails: authorDetails,\n\t\t\tposts: posts\n\t\t};\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Merk op dat we de <a href=\"#getusers\"><code>getUser<\/code><\/a> selector gebruikten om de auteursdetails op te halen.<\/p>\n<p>Vervolgens wil je misschien de avatar van de auteur opvragen. De onderstaande code bouwt een array van items die avatar URL&#8217;s en afmetingen opslaan:<\/p>\n<pre><code class=\"language-js\">const avatarSizes = [];\nif ( authorDetails ) {\n\tforEach( authorDetails.avatar_urls, ( url, size ) =&gt; {\n\t\tavatarSizes.push( {\n\t\t\tvalue: size,\n\t\t\tlabel: `${ size } x ${ size }`,\n\t\t} );\n\t} );\n}<\/code><\/pre>\n<p>Dan voeg je de zijbalkpanelen en controls toe om gebruikers in staat te stellen het auteursgedeelte in het blok aan te passen:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t\t&lt;PanelBody title={ __( 'Author Info', 'author-plugin' ) }&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display Author Info', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayAuthorInfo }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayAuthorInfo: ! displayAuthorInfo } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t{ displayAuthorInfo && (\n\t\t\t\t\t&lt;&gt;\n\t\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Show avatar' ) }\n\t\t\t\t\t\t\t\tchecked={ showAvatar }\n\t\t\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\t\t\tsetAttributes( { showAvatar: ! showAvatar } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t\t{ showAvatar && (\n\t\t\t\t\t\t\t\t&lt;SelectControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Avatar size' ) }\n\t\t\t\t\t\t\t\t\tvalue={ avatarSize }\n\t\t\t\t\t\t\t\t\toptions={ avatarSizes }\n\t\t\t\t\t\t\t\t\tonChange={ ( size ) =&gt; {\n\t\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\t\tavatarSize: Number( size ),\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Show Bio', 'author-plugin' ) }\n\t\t\t\t\t\t\t\tchecked={ showBio }\n\t\t\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\t\t\tsetAttributes( { showBio: ! showBio } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t&lt;\/&gt;\n\t\t\t\t) }\n\t\t\t&lt;\/PanelBody&gt;\n\t\t\t...\n\t\t&lt;\/InspectorControls&gt;\n\t\t...\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>De afbeelding hieronder toont de bijgewerkte instellingenzijbalk:<\/p>\n<figure id=\"attachment_120379\" aria-describedby=\"caption-attachment-120379\" style=\"width: 1908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120379 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-settings-panel.jpg\" alt=\"Het instellingenpaneel Author Info.\" width=\"1908\" height=\"960\"><figcaption id=\"caption-attachment-120379\" class=\"wp-caption-text\">Het instellingenpaneel Author Info.<\/figcaption><\/figure>\n<p>Tenslotte kun je het auteursgedeelte aan je blok toevoegen:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t...\n\t\t&lt;\/InspectorControls&gt;\n\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t{ displayAuthorInfo  && authorDetails && (\n\t\t\t\t&lt;div className=\"wp-block-author-box-author-plugin__author\"&gt;\n\t\t\t\t\t{ showAvatar && (\n\t\t\t\t\t\t&lt;div className=\"wp-block-author-box-author-plugin__avatar\"&gt;\n\t\t\t\t\t\t\t&lt;img\n\t\t\t\t\t\t\t\twidth={ avatarSize }\n\t\t\t\t\t\t\t\tsrc={\n\t\t\t\t\t\t\t\t\tauthorDetails.avatar_urls[\n\t\t\t\t\t\t\t\t\t\tavatarSize\n\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\talt={ authorDetails.name }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t) }\n\t\t\t\t\t&lt;div className='wp-block-author-box-author-plugin__author-content'&gt;\n\t\t\t\t\t\t&lt;p className='wp-block-author-box-author-plugin__name'&gt;\n\t\t\t\t\t\t\t{ authorDetails.name }\n\t\t\t\t\t\t&lt;\/p&gt;\n\t\t\t\t\t\t{ showBio &&\n\t\t\t\t\t\t\t\/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Optional_chaining\n\t\t\t\t\t\t\tauthorDetails?.description &&\n\t\t\t\t\t\t\tauthorDetails.description.length &gt; 0 && (\n\t\t\t\t\t\t\t&lt;p className='wp-block-author-box-author-plugin__description'&gt;{ authorDetails.description }&lt;\/p&gt;\n\t\t\t\t\t\t) }\n\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t&lt;\/div&gt;\n\t\t\t)}\n\t\t\t&lt;ul&gt;\n\t\t\t...\n\t\t\t&lt;\/ul&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>De volgende afbeelding toont hoe het op het scherm rendert.<\/p>\n<figure id=\"attachment_120380\" aria-describedby=\"caption-attachment-120380\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120380 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-with-settings.jpg\" alt=\"Auteursgegevens sectie en Info instellingen.\" width=\"1912\" height=\"844\"><figcaption id=\"caption-attachment-120380\" class=\"wp-caption-text\">Auteursgegevens sectie en Info instellingen.<\/figcaption><\/figure>\n<p>Sla nu je <em>edit.js<\/em> bestand op en voer je tests uit. Je blok zou verschillende elementen moeten bevatten, afhankelijk van de blokinstellingen.<\/p>\n<figure id=\"attachment_120384\" aria-describedby=\"caption-attachment-120384\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120384 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-with-settings-no-bio-2.jpg\" alt=\"Auteursdetails tonen niet de bio van de auteur.\" width=\"1912\" height=\"484\"><figcaption id=\"caption-attachment-120384\" class=\"wp-caption-text\">Auteursdetails tonen niet de bio van de auteur.<\/figcaption><\/figure>\n<p>Een laatste ding ontbreekt nog: het aantal kolommen om artikelen weer te geven.<\/p>\n<h3>Verander het aantal kolommen<\/h3>\n<p>Om de gebruiker de mogelijkheid te geven artikelvoorbeelden in kolommen te tonen, definieerden we het <code>columns<\/code> attribuut in het <em>block.json<\/em> bestand. We namen ook een <code>columns<\/code> attribuut op in het script en maakten een instellingen-bedieningselement waarmee gebruikers het aantal kolommen kunnen veranderen, hoewel deze verandering nu nog geen effect heeft.<\/p>\n<p>In de JSX code hierboven moet je gemerkt hebben dat we CSS klassen aan verschillende elementen toevoegden:<\/p>\n<p>Klassen toegekend aan elementen in de sectie Author:<\/p>\n<ul>\n<li><code>wp-block-author-box-author-plugin__author<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__avatar<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__author-content<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__name<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__description<\/code><\/li>\n<\/ul>\n<p>Klassen toegekend aan elementen in de inhoudssectie:<\/p>\n<ul>\n<li><code>wp-block-author-box-author-plugin__post-items<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-thumbnail<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-title<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-date<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-excerpt<\/code><\/li>\n<\/ul>\n<p>E\u00e9n klasse ontbreekt nog. De naam van deze klasse zal dynamisch gegenereerd worden om het door de gebruiker ingestelde aantal kolommen weer te geven.<\/p>\n<p>Ga terug naar het <code>Edit.js<\/code> bestand en wijzig het <code>ul<\/code> element als volgt:<\/p>\n<pre><code class=\"language-jsx\">&lt;ul className={ `wp-block-author-box-author-plugin__post-items columns-${ columns }` }&gt;\n\t...\n&lt;\/ul&gt;<\/code><\/pre>\n<p>We voegden een nieuwe <code>columns-${ columns }<\/code> klasse toe volgens de syntaxis van <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\">Template literals<\/a> om een expressie binnen een string in te voegen. Op deze manier hangt het attribuut dat aan het <code>ul<\/code> element hangt af van gebruikersinstellingen (bv. <code>columns-1<\/code>, <code>columns-2<\/code>, enz.).<\/p>\n<p>Open nu het <code>style.scss<\/code> bestand en vervang de bestaande code door het volgende:<\/p>\n<pre><code class=\"language-css\">.wp-block-author-box-author-plugin {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: .6em;\n\tul.wp-block-author-box-author-plugin__post-items {\n\t\tpadding: 0;\n\t\tlist-style-type: none;\n\t\tdisplay: grid;\n\t\tgap: .5em;\n\t\t@for $i from 2 through 4 {\n\t\t\t&.columns-#{ $i } {\n\t\t\t\tgrid-template-columns: repeat(#{ $i }, 1fr);\n\t\t\t}\n\t\t}\n\t\tli {\n\t\t\tlist-style: none;\n\t\t\timg.wp-block-author-box-author-plugin__post-thumbnail {\n\t\t\t\theight: auto;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t\t\n\t}\n}\n.wp-block-author-box-author-plugin__author {\n\tdisplay: flex;\n    flex-wrap: wrap;\n}\n\n.wp-block-author-box-author-plugin__avatar {\n\tmargin-right: 1em;\n}\n\n.wp-block-author-box-author-plugin__author-content {\n\tflex-basis: 0;\n    flex-grow: 1;\n}<\/code><\/pre>\n<p>We gaan niet dieper in op die code, want die valt buiten het bestek van dit artikel. Maar als je er meer over wil lezen, kun je de volgende bronnen raadplegen:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\">CSS Grid Layout<\/a><\/li>\n<li><a href=\"https:\/\/learncssgrid.com\/\">Learn CSS Grid<\/a><\/li>\n<li><a href=\"https:\/\/sass-lang.com\/documentation\/at-rules\/control\/for\">The @for rule in Sass<\/a><\/li>\n<li><a href=\"https:\/\/sass-lang.com\/documentation\/style-rules#nesting\">Nesting in Sass<\/a><\/li>\n<\/ul>\n<figure id=\"attachment_120388\" aria-describedby=\"caption-attachment-120388\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120388 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-block-editor-view.jpg\" alt=\"Het blok Author in de editor.\" width=\"2880\" height=\"1800\"><figcaption id=\"caption-attachment-120388\" class=\"wp-caption-text\">Het blok Author in de editor.<\/figcaption><\/figure>\n<p>En dat was het voor de rendering van het blok in de editor.<\/p>\n<h2>Het blok bouwen om op de pagina te renderen<\/h2>\n<p>Nu de code die het blok in de editor rendert klaar is, kunnen we verder gaan en het blok bouwen voor rendering aan de frontend.<\/p>\n<p>Zoals we eerder zeiden, is bij dynamische blokken het pluginbestand verantwoordelijk voor het genereren van de HTML die aan de voorkant moet worden weergegeven.<\/p>\n<p>Open dus het hoofdbestand van je plugin<em>(author-plugin.php<\/em> in ons voorbeeld).<\/p>\n<p>Het eerste wat je moet doen is de blokattributen beschikbaar maken voor de WordPress PHP functie. Verander in je PHP bestand de functiedefinitie als volgt:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t...\n}<\/code><\/pre>\n<p>Nu kun je de WordPress functies gebruiken om gegevens op te halen en te manipuleren. Je kunt bijvoorbeeld <code>get_posts<\/code> gebruiken om de nieuwste blogberichten op te halen (lees meer in ons diepgaande artikel over de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-get_posts\/\"><code>get_posts<\/code> <\/a> functie):<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems'],\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;ul&gt;';\n\t\tforeach ( $my_posts as $p ){\n\t\t\t$output .= '&lt;li&gt;&lt;a href=\"' . esc_url( get_permalink( $p-&gt;ID ) ) . '\"&gt;' \n\t\t\t. $p-&gt;post_title . '&lt;\/a&gt;&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>De functie hierboven haalt de nieuwste <code>numberOfItems<\/code> blogberichten op uit je WordPress database (standaard staat <code>post_type<\/code> op <code>post<\/code>) en geeft een array van <code>$post<\/code> objecten terug. Dan itereert het over de array om de lijstitems te bouwen.<\/p>\n<p>Als je de HTML uitvoer inspecteert, zie je dat het een eenvoudige lijst van berichten is, zoals die in de volgende afbeelding:<\/p>\n<figure id=\"attachment_120521\" aria-describedby=\"caption-attachment-120521\" style=\"width: 1866px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120521 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts.jpg\" alt=\"Een eenvoudige lijst van berichten.\" width=\"1866\" height=\"732\"><figcaption id=\"caption-attachment-120521\" class=\"wp-caption-text\">Een eenvoudige lijst van berichten.<\/figcaption><\/figure>\n<p>In ons vorige artikel meldden we dat je de <code>useBlockProps<\/code> React hook gebruikt om het <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#import-components\">wrapper element<\/a> van het blok te markeren in je JSX code. Je zult hetzelfde moeten doen in je PHP functie.<\/p>\n<p>WordPress biedt daarvoor de <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\">functie<code>get_block_wrapper_attributes<\/code><\/a> .<\/p>\n<p>Verander dus je PHP code als volgt:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems']\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;div ' . get_block_wrapper_attributes() . '&gt;';\n\t\t$output .= '&lt;ul&gt;';\n\t\tforeach ( $my_posts as $p ){\n\t\t\t\n\t\t\t$title = $p-&gt;post_title ? $p-&gt;post_title : 'Default title';\n\t\t\t$url = esc_url( get_permalink( $p-&gt;ID ) );\n\n\t\t\t$output .= '&lt;li&gt;';\n\t\t\t$output .= '&lt;a href=\"' . $url . '\"&gt;' . $title . '&lt;\/a&gt;';\n\t\t\t$output .= '&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t\t$output .= '&lt;\/div&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>Nu is aan het container element een <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\"><code>wp-block-author-box-author-plugin<\/code> <\/a> klasse toegekend en heeft het blok een andere achtergrondkleur.<\/p>\n<p>Vervolgens krijgt de <code>get_posts<\/code> functie <code>WP_Posts<\/code> gegevens en de <code>foreach<\/code> cyclus bouwt de lijstitems (zie ook <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-get_posts\/#display\">Zo toon je get_posts getourneerde data<\/a>).<\/p>\n<figure id=\"attachment_120520\" aria-describedby=\"caption-attachment-120520\" style=\"width: 1866px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120520 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-2.jpg\" alt=\"Een lijst van berichten waaraan een CSS klasse is toegekend.\" width=\"1866\" height=\"650\"><figcaption id=\"caption-attachment-120520\" class=\"wp-caption-text\">Een lijst van berichten waaraan een CSS klasse is toegekend.<\/figcaption><\/figure>\n<h3>Voeg uitgelichte afbeelding, datum en excerpt toe<\/h3>\n<p>Vervolgens moet je thumbnails, datums en excerpts van je bericht toevoegen. Verander in hetzelfde bestand je PHP code als volgt:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems']\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;div ' . get_block_wrapper_attributes() . '&gt;';\n\t\t$output .= '&lt;ul class=\"wp-block-author-box-author-plugin__post-items columns-\"&gt;';\n\n\t\tforeach ( $my_posts as $p ){\n\t\t\t\n\t\t\t$title = $p-&gt;post_title ? $p-&gt;post_title : 'Default title';\n\t\t\t$url = esc_url( get_permalink( $p-&gt;ID ) );\n\t\t\t$thumbnail = has_post_thumbnail( $p-&gt;ID ) ? get_the_post_thumbnail( $p-&gt;ID, 'medium' ) : '';\n\n\t\t\t$output .= '&lt;li&gt;';\n\t\t\tif( ! empty( $thumbnail ) && $attr['displayThumbnail'] ){\n\t\t\t\t$output .= $thumbnail;\n\t\t\t}\n\t\t\t$output .= '&lt;h5&gt;&lt;a href=\"' . $url . '\"&gt;' . $title . '&lt;\/a&gt;&lt;\/h5&gt;';\n\t\t\tif( $attr['displayDate'] ){\n\t\t\t\t$output .= '&lt;time datetime=\"' . esc_attr( get_the_date( 'c', $p ) ) . '\"&gt;' . esc_html( get_the_date( '', $p ) ) . '&lt;\/time&gt;';\n\t\t\t}\n\t\t\tif( get_the_excerpt( $p ) && $attr['displayExcerpt'] ){\n\t\t\t\t$output .= '&lt;p&gt;' . get_the_excerpt( $p ) . '&lt;\/p&gt;';\n\t\t\t}\n\t\t\t$output .= '&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t\t$output .= '&lt;\/div&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>De <code>foreach<\/code> loop itereert over de <code>$my_posts<\/code> array. Bij elke iteratie controleren verschillende condities de attribuutwaarden en bouwen de uitvoer dienovereenkomstig op.<\/p>\n<p>Kijk nu eens naar de uitvoer op het scherm:<\/p>\n<figure id=\"attachment_120649\" aria-describedby=\"caption-attachment-120649\" style=\"width: 2192px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120649 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-with-featured-images-date-excerpt-1.jpg\" alt=\"Een lijst van berichten met uitgelichte beelden, data, en uittreksels.\" width=\"2192\" height=\"1220\"><figcaption id=\"caption-attachment-120649\" class=\"wp-caption-text\">Een lijst van berichten met uitgelichte beelden, data, en uittreksels.<\/figcaption><\/figure>\n<p>Nu kun je je tests uitvoeren. Verander de instellingen voor datum, uittreksel en thumbnail en kijk hoe de blokinhoud verandert aan de frontend.<\/p>\n<h3>Geef berichten weer in kolommen<\/h3>\n<p>In onze JavaScript code gebruikten we een <code>columns-${ columns }<\/code> klasse om berichtpreviews in kolommen weer te geven. Nu moeten we hetzelfde doen in PHP.<\/p>\n<p>Om dat te doen hoef je alleen maar deze twee regels code toe te voegen:<\/p>\n<pre><code class=\"language-php\">$num_cols = $attr['columns'] &gt; 1 ? strval( $attr['columns'] ) : '1';\n\n$output .= '&lt;ul class=\"wp-block-author-box-author-plugin__post-items columns-' . $num_cols . '\"&gt;';<\/code><\/pre>\n<p>Dit zal een <code>columns-n<\/code> klasse toevoegen aan het <code>ul<\/code> element dat de berichtpreviews bevat. Nu moet het aantal kolommen dat op de pagina wordt getoond overeenkomen met het aantal kolommen dat in de blokinstellingen is ingesteld.<\/p>\n<h3>Bouw de auteursbox<\/h3>\n<p>Als laatste moet je de box bouwen met de gegevens van de auteur, waaronder avatar, naam, en beschrijving.<\/p>\n<p>Binnen de callback functie moet je een reeks voorwaarden toevoegen om de huidige waarde van elk attribuut te controleren:<\/p>\n<pre><code class=\"language-php\">if( $attr['displayAuthorInfo'] ){\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__author\"&gt;';\n\t\n\tif( $attr['showAvatar'] ){\n\t\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__avatar\"&gt;' \n\t\t\t. get_avatar( get_the_author_meta( 'ID' ), $attr['avatarSize'] ) \n\t\t\t. '&lt;\/div&gt;';\n\t}\n\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__author-content\"&gt;';\n\t\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__name\"&gt;' \n\t\t. get_the_author_meta( 'display_name' ) \n\t\t. '&lt;\/div&gt;';\n\n\tif( $attr['showBio'] ){\n\t\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__description\"&gt;' \n\t\t\t. get_the_author_meta( 'description' ) \n\t\t\t. '&lt;\/div&gt;';\n\t}\n\n\t$output .= '&lt;\/div&gt;';\n\t$output .= '&lt;\/div&gt;';\n}<\/code><\/pre>\n<p>De code is vrij rechttoe rechtaan. Het controleert de huidige waarde van elk attribuut, en als het <code>true<\/code> is, dan genereert het de nodige HTML.<\/p>\n<p>Sla nu je PHP bestand op en vergelijk het blok in de editor vs. hetzelfde blok aan de frontend.<\/p>\n<figure id=\"attachment_120952\" aria-describedby=\"caption-attachment-120952\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120952 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/full-block.jpg\" alt=\"Ons aangepaste blok in de blok editor.\" width=\"2880\" height=\"1800\"><figcaption id=\"caption-attachment-120952\" class=\"wp-caption-text\">Ons aangepaste blok in de blok editor.<\/figcaption><\/figure>\n<p>Je vindt de volledige code van het voorbeeldblok in <a href=\"https:\/\/gist.github.com\/carlodaniele\/27e292fbbe4b897ca3bda4539dfd74df\">deze openbare Gist<\/a>.<\/p>\n\n<h2>Aanbevolen bronnen voor dynamische blokontwikkeling<\/h2>\n<p>Als je tijdens het lezen van dit artikel maar geen genoeg kon krijgen van de informatie en de mogelijkheden voor professionele ontwikkeling begon te herkennen die komen met het leren maken van Gutenberg blokken, dan is ons advies om door te gaan met het verkennen en verwerven van nieuwe vaardigheden in de technologie\u00ebn achter blokontwikkeling.<\/p>\n<p>Hoewel betrouwbare offici\u00eble documentatie nog ontbreekt, zijn er niettemin uitstekende bronnen beschikbaar, zowel gratis als betaald, die we tijdens het schrijven van dit artikel raadpleegden. Van de vele beschikbare bronnen bevelen we de volgende aan:<\/p>\n<p><strong>Offici\u00eble bronnen<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">Data<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/core-data\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">Core Data<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Creating dynamic blocks<\/a><\/li>\n<li><a href=\"https:\/\/learn.wordpress.org\/workshop\/intro-to-gutenberg-block-development\/\" target=\"_blank\" rel=\"noopener noreferrer\">Intro to Gutenberg Block Development<\/a><\/li>\n<li><a href=\"https:\/\/www.meetup.com\/en-US\/wordpress-social-learning\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Social Learning<\/a> op MeetUp<\/li>\n<\/ul>\n<p><strong>Aanbevolen handleidingen van WordPress Core medewerkers<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\" target=\"_blank\" rel=\"noopener noreferrer\">Requesting data in Gutenberg with getEntityRecords<\/a> door Ryan Welcher (@<a href=\"https:\/\/twitter.com\/ryanwelcher\" target=\"_blank\" rel=\"noopener noreferrer\">ryanwelcher<\/a>)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\" target=\"_blank\" rel=\"noopener noreferrer\">A Practical Overview of the @wordpress\/data API<\/a> door Darren Ethier (@<a href=\"https:\/\/twitter.com\/nerrad\" target=\"_blank\" rel=\"noopener noreferrer\">nerrad<\/a>)<\/li>\n<\/ul>\n<p><strong>JavaScript, React, en Redux Hulpmiddelen<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Tutorials#javascript_tutorials\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript Tutorials<\/a>\u00a0by MDN<\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener noreferrer\">Getting Started with React<\/a> (officieel)<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/essentials\/part-1-overview-concepts\" target=\"_blank\" rel=\"noopener noreferrer\">Redux Tutorial<\/a> (officieel)<\/li>\n<\/ul>\n<p><strong>Verwante bronnen van Kinsta<br \/>\n<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-javascript\/\">Wat is JavaScript? Een verkenning van de populairste scripttaal van het web<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/fouten-in-javascript\/\">De ultieme gids voor het omgaan met fouten in JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-node-js\/\">Wat is Node.js en waarom je het zou moeten gebruiken<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/node-js-installeren\/\">Zo installeer je Node.js en npm op Windows, macOS, en Linux<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/\">Zo debug je Node.js code met meerdere tools<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/node-js-vs-php\/\">Node.js vs PHP: Een head-to-head vergelijking<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/node-js-apps\/\">De 10 populairste soorten Node.js apps van 2022<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/angular-vs-react\/\">Angular vs React: Een gedetailleerde vergelijking van top tot teen<\/a><\/li>\n<\/ul>\n<h2>Samenvatting<\/h2>\n<p>We zijn aan het eind gekomen van deze (tweede) lange reis door Gutenberg blokontwikkeling.<\/p>\n<p>In dit artikel hebben we enkele geavanceerde onderwerpen behandeld, zoals Application State en Redux stores. Maar hopelijk zou je nu een beter begrip moeten hebben van blokontwikkeling in het algemeen.<\/p>\n<p>Ja, Node.js, Webpack, <a href=\"https:\/\/kinsta.com\/nl\/blog\/transpilen-php\/#what-is-transpiling\">Babel<\/a>, React, en Redux vaardigheden zijn essentieel als het gaat om het bouwen van geavanceerde Gutenberg blokken, maar je hoeft geen React ninja te zijn om aan de slag te gaan. Leren hoe je Gutenberg blokken kunt ontwikkelen hoeft niet ingewikkeld te zijn. Doe het met de juiste motivatie en door het juiste leertraject te volgen.<\/p>\n<p>En we hopen dat dit artikel &#8211; en <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">het vorige<\/a> &#8211; je de juiste kaart geven om jouw eigen pad te vinden en meteen met Gutenberg ontwikkeling aan de slag te gaan.<\/p>\n<p><em>Nu is het jouw beurt! Heb je al eens dynamische blokken gemaakt? Heb je voorbeelden om met ons te delen? En wat waren de grootste hindernissen? Voel je vrij om hieronder een reactie te laten vallen.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Snap je nog steeds niks van Gutenberg? Of hoor je bij de groep die heilig gelooft in de mogelijkheden van de blok-editor en willen ontdekken hoe &#8230;<\/p>\n","protected":false},"author":36,"featured_media":45084,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[476,384,46],"topic":[892],"class_list":["post-45083","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-block-editor","tag-development","tag-gutenberg","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 maak je dynamische blokken voor Gutenberg<\/title>\n<meta name=\"description\" content=\"Wacht niet langer om een blokdeveloper te worden. In deze gids leer je alles om vanuit niks dynamische blokken te 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\/dynamische-blokken\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo maak je dynamische blokken voor Gutenberg\" \/>\n<meta property=\"og:description\" content=\"Wacht niet langer om een blokdeveloper te worden. In deze gids leer je alles om vanuit niks dynamische blokken te maken.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-12T16:08:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-26T05:28:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\" \/>\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=\"Wacht niet langer om een blokdeveloper te worden. In deze gids leer je alles om vanuit niks dynamische blokken te maken.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\" \/>\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=\"43 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Zo maak je dynamische blokken voor Gutenberg\",\"datePublished\":\"2022-08-12T16:08:51+00:00\",\"dateModified\":\"2023-09-26T05:28:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\"},\"wordCount\":6551,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"keywords\":[\"Block Editor\",\"development\",\"Gutenberg\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\",\"name\":\"Zo maak je dynamische blokken voor Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"datePublished\":\"2022-08-12T16:08:51+00:00\",\"dateModified\":\"2023-09-26T05:28:01+00:00\",\"description\":\"Wacht niet langer om een blokdeveloper te worden. In deze gids leer je alles om vanuit niks dynamische blokken te maken.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Zo maak je dynamische blokken voor Gutenberg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress ontwikkeling\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo maak je dynamische blokken voor Gutenberg\"}]},{\"@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 maak je dynamische blokken voor Gutenberg","description":"Wacht niet langer om een blokdeveloper te worden. In deze gids leer je alles om vanuit niks dynamische blokken te 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\/dynamische-blokken\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo maak je dynamische blokken voor Gutenberg","og_description":"Wacht niet langer om een blokdeveloper te worden. In deze gids leer je alles om vanuit niks dynamische blokken te maken.","og_url":"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2022-08-12T16:08:51+00:00","article_modified_time":"2023-09-26T05:28:01+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Wacht niet langer om een blokdeveloper te worden. In deze gids leer je alles om vanuit niks dynamische blokken te maken.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Carlo Daniele","Geschatte leestijd":"43 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Zo maak je dynamische blokken voor Gutenberg","datePublished":"2022-08-12T16:08:51+00:00","dateModified":"2023-09-26T05:28:01+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/"},"wordCount":6551,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","keywords":["Block Editor","development","Gutenberg"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/","url":"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/","name":"Zo maak je dynamische blokken voor Gutenberg","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","datePublished":"2022-08-12T16:08:51+00:00","dateModified":"2023-09-26T05:28:01+00:00","description":"Wacht niet langer om een blokdeveloper te worden. In deze gids leer je alles om vanuit niks dynamische blokken te maken.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","width":1460,"height":730,"caption":"Zo maak je dynamische blokken voor Gutenberg"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WordPress ontwikkeling","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/"},{"@type":"ListItem","position":3,"name":"Zo maak je dynamische blokken voor Gutenberg"}]},{"@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\/45083","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=45083"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/45083\/revisions"}],"predecessor-version":[{"id":55770,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/45083\/revisions\/55770"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45083\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45083\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45083\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45083\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45083\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45083\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45083\/translations\/nl"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45083\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/45084"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=45083"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=45083"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=45083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}