Leren Gutenberg: Een Primer met create-guten-blok

0
38

Welkom terug! We hebben even een kijkje genomen op wat Gutenberg is en hoe het werkt vanuit de admin kant. Gutenberg is zeker gaat om een enorme impact hebben op de WordPress wereld. Als je net aangekomen hier, en hebben geen idee waar we het over hebben, adviseer ik ten minste het afromen van Deel 1 om ervoor te zorgen dat u de juiste achtergrond.

We maken een aangepaste blok met een beetje hulp van een prachtige tool genaamd create-guten-blok. Onward!

Serie Artikelen:

  1. Serie Inleiding
  2. Wat is Gutenberg, Toch?
  3. Een Primer met create-guten-blok (Deze Post)
  4. Moderne JavaScript Syntaxis (Coming Soon!)
  5. Reageren 101 (Coming Soon!)
  6. Het opzetten van een Aangepaste webpack (Coming Soon!)
  7. Een Aangepaste “Kaart” Blok (Coming Soon!)

Blokken live in plugins

Voor het maken van een Gutenberg-blok, kunt u het maken van een WordPress plugin. Iets dat van invloed is op de *inhoud*, zoals een Gutenberg-het blokkeren van bepaalde wordt, moet een plugin zodat het blijft actief, zelfs als u de thema ‘ s wijzigen. Iets dat heel thema-specifiek of alleen van invloed op hoe uw site eruit ziet, kunnen deel uitmaken van de thema bestanden of functions.php bestand in uw thema. Lees meer over dit onderscheid in ons artikel over WordPress Functionaliteit Plugins.

Dat gezegd hebbende, de blokken in thema ‘ s probleem is een hot topic. De WordPress Thema Review Team is het bespreken van of het wel of niet toestaan van blokken in thema ‘s als onderdeel van thema’ s. Een post, “Klaar voor Gutenberg”, op de Thema Review Team is het Maken van pagina stelde deze vraag, en werd met sterke meningen van beide kanten. De algemene consensus is echter dat de blokken zijn plugin grondgebied.

WordPress.org bestaat uit verschillende teams, elk met hun eigen homepage make.wordpress.org/team-name kanaal in de WordPress Slap, en een wekelijkse vergadering. Als u geïnteresseerd bent in het krijgen van die betrokken zijn in WordPress of nieuwsgierig hoe het werkt, ik beveel het bladeren door een lijst van de teams hier, bij een Slappe kanaal, en popping in een wekelijkse vergadering om te zien hoe het allemaal gebeurt.

In de verre toekomst, het is mogelijk dat de thema ‘ s zal bestaan uit *slechts een stylesheet*, terwijl alle aangepaste functionaliteit en de structuur van de inhoud hebben van blokken in plugins. Ik ben met een parafrase van de woorden van Tammie Lister, Gutenberg ‘ s design leiden, over deze aflevering van Shoptalk Show. Heel erg moeite waard om te luisteren!

Het nemen van een setup snelkoppeling… voor nu

Wat hield me van de duik hoofd eerst in de moderne JavaScript is de dang configuratie. De transpiling, de bundeling, de code te splitsen, de boom schudden… yeesh, ik ben bezig! Ik hou van nieuwe dingen leren, maar er is een limiet aan mijn geduld en, blijkbaar, het configureren van een proces van het bouwen van een klein test project is mijn grens.

Het is dit gevoel dat leidde tot de ontwikkeling van een tool genaamd create-reageren-app, nul-configuratie bouwen setup voor, u raadt het al, het creëren Reageren apps. Het is briljant. Ervan uitgaande dat u een goed functionerend knooppunt en npm installatie, kunt u een opdracht en u hebt een project voor u klaar om te beginnen met het coderen Reageren. De transpiling, bundelen, en de boom schudden is voor u ingesteld.

Maar wacht even… kunnen we gebruik maken-reageren-app voor de Gutenberg-blokken? Nee, maar de voornoemde maken-guten-blok, ontwikkeld en prachtig gedocumenteerd door Ahmad Awais, doet vrijwel hetzelfde voor ons! Dat is wat we zullen gebruiken voor ons blok.

maken-guten-blok is niet het enige blok genereren van gereedschap tot onze beschikking! U kunt de steiger van een blok met behulp van WP-CLI, maar ik heb gekozen niet omdat de standaard instelling is voor ES5 (voor nu) en niet ons geven wat we nodig hebben voor onze reis in de moderne JavaScript. Dat gezegd zijnde, vond ik het nuttig om te graven door de ES5 uitvoering van een blok als een manier om het versterken van de kern van het concept, dus misschien geef het een gaan nadat u klaar bent met het hier!

Ja, dit is een snelkoppeling. We kiezen ervoor om te voorkomen dat het begrijpen van de kern van het concept van een technologie met behulp van een hulpmiddel. We hebben om te leren deze concepten op een dag. Maar voor nu, ik ben helemaal fijn het omzeilen van deze configuratie stap. Mijn filosofie over het gebruik van hulpmiddelen, zoals deze: ze gebruiken, maar dit doen met het begrip dat het *waarschijnlijk* niet zal redden u tijd of moeite in de lange termijn.

Het is vermeldenswaard dat, zoals het maken van-reageren-app maken-guten-blok geeft je de mogelijkheid om npm uitwerpen van uw configuratie. Dit betekent dat het blootstellen van alle van de instellingen van het hulpprogramma voor ons heeft gemaakt en deze beschikbaar te maken voor maatwerk. Merk echter op dat dit onomkeerbaar is; als u uitwerpen en dan een fout maakt, bent u op uw eigen op te lossen! Zoals ik al zei, je moet leren het op een dag 🙂

Stap 1: Installeer maken-guten-blok

We zullen eerst de installatie van maken-guten-blok wereldwijd, zoals:

npm installeren -g-guten-blok

In theorie zou dit werk geen probleem, maar dat is niet realistisch. maken-guten-blok vereist een minimum van Knooppunt versie 8 en npm 5.3, dus als je nog niet bijgewerkt van hen voor een tijdje, dat is één van de mogelijke fout (en hier is een mogelijke oplossing).

Ik begin altijd door te plakken mijn console fout in een zoekmachine en het verwijderen van regel nummers en de namen van het dossier bij te houden van mijn query algemeen. In het belang van het verbeteren van deze tutorial, maar ik ben benieuwd om te horen over wat er mis ging, dus voel je vrij om te posten uw probleem in de comments.

Stap 2: Maak die guten-blok

Het is tijd! Laten we het doen! Weet je wat? Ik ben niet van plan om u te vertellen hoe door Ahmad de documentatie is zo goed en er is geen zin in het repliceren.

Ga hier naar toe en volg Ahmad ‘ s aanwijzingen voor het maken van die guten-blok op de opdracht regel.

Moet je zoiets als dit te zien bij het uitvoeren van de opdracht, het maken van-guten-block test “test” is de naam van mijn blok.

Stap 3: Activeer de plugin

Ga naar uw plug-ins scherm, het activeren van uw nieuwe blok plugin mag worden genoemd zoiets als test-blok — CGB Gutenberg Blok Plugin waar “test-blok” is wat je met de naam van je blok bij het maken van het.

Stap 4: Dat is het! Laten we gebruik maken van onze aangepaste blok!

Zo eenvoudig! Nu, ga naar de editor weergave van een bericht of pagina zoek je blok te plaatsen.

Hoewel ik de naam van mijn blok “test”, het zoeken van “test” in het blok de kiezer leverde het verkeerde resultaat zoals u kunt zien in de gif boven. De standaard naam van het blok in plaats van “CGB Blok” — zullen we dit veranderen zeer snel!

Tekst-editor instellen (optioneel)

Ik vond het erg handig om een specifieke tekst-editor instellen voor het ontwikkelen van blokken. Ik gebruik Visual Studio Code voor mijn tekst editor, maar ik weet zeker dat je kunt uitzoeken iets dergelijks met welke editor is uw voorkeur.

Hier zijn de belangrijkste ingrediënten:

  1. Gemakkelijke toegang tot de commando-regel om een oogje te houden op het bouwen van fouten (er worden bouwfouten)
  2. Een kopie van de Gutenberg bron van GitHub voor code referentie (download of klonen hier)
  3. Gemakkelijke toegang tot zowel uw plugin directory en Gutenberg ‘ s de bron directory van #2
Mijn VS-Code instellen voor Gutenberg ontwikkeling. Let op de geïntegreerde terminal en meerdere bron-mappen aan de rechterkant.

In de VS Code, ik dit doen met behulp van de volgende functies:

  1. De geïntegreerde terminal — open met Command + ~ op de Mac, of via de menubalk Weergave > Geïntegreerde Terminal
  2. Een Werkruimte met mappen voor zowel de plugin en Gutenberg ‘ s de bron van GitHub. U kunt dit doen door het openen van je plugin map in VS-Code, dan te kiezen voor Bestand > Map Toevoegen aan de Werkruimte en het selecteren van de Gutenberg-map die u hebt gedownload van de GitHub repo. Vervolgens kunt u het opslaan van de Werkruimte voor eenvoudige toegang met Bestand > Opslaan Als Werkruimte (ik belde mijn “Blokken” in de bovenstaande afbeelding).

Dit onderdeel is optioneel en hoeft u niet te gebruiken, VS-Code. Het belangrijkste is het hebben van toegang tot de commando lijn, uw plugin-source, en het Gutenberg-plugin is de bron voor verwijzing. Je kunt je helemaal verwijzen naar de bron op GitHub als je wilt, maar ik geniet er van om de bestanden in dezelfde omgeving voor side-by-side vergelijking en gemakkelijk zoeken met Zoeken In Map.

Wij zijn met behulp van Gutenberg van de plugin repository voor de werkelijke functionaliteit, maar dat exemplaar bevat alleen de gecompileerde bestanden. We willen verwijzen naar de bron-bestanden, dus gebruiken we de code direct vanaf GitHub. Als u wilt om toegang te krijgen tot updates voordat ze worden uitgebracht in de plugin, je kunt een kopie maken van het archief. Het zou perfect mogelijk is te bouwen en het werk van de GitHub-versie, maar ter wille van de eenvoud gebruiken we de plugin versie in deze tutorial.

Zodra u klaar om te gaan, zorg ervoor dat u de cd zou in uw blok plugin map en run npm start. Ziet u een bevredigend bericht dat aangeeft dat het proces is begonnen:

Na het uitvoeren van npm start in onze plugin map, wij zijn officieel “in de gaten voor wijzigingen…” (en we hebben niet in aanraking komen met een config! Cheaters…)

Ik ben met behulp van Wes Bos is het thema voor Kobalt 2 in VS-Code en het zelfde thema voor ZSH in mijn Terminal en iTerm. Dit maakt absoluut geen verschil in hoe de technologie werkt, maar het maakt een verschil, op een persoonlijk niveau, voor het aanpassen van uw werkplek en het gevoel van uw eigen (of Wes Bos’, in mijn geval).

Wat is wat

Nu dat we in de code van mode, laten we een kijkje nemen in de bestanden die we aan de slag. Ik zal lenen dit uit de maak-guten-blok ‘Readme’ voor de referentie:

└── test-blok
ã── plugin.php
ã── pakket.json
Ã── LEESMIJ-bestand.md
|
ã── dist
| ã── blocks.build.js
| ã── blokken.editor.bouwen.css
| └── blokken.stijl.bouwen.css
|
└── src
ã── blok
| ã── block.js
| ã── editor.scss
| └── stijl.scss
|
ã── blocks.js
ã── common.scss
└── init.php

Voor de toepassing van deze tutorial, we zijn alleen maar bezig met wat er in de src map. We zullen niets aanraken in dist (die zijn samengesteld bestanden), plugin.php of eventuele achterblijvers zoals pakket.json -, pakket-lock.json, of.eslintignore.

plugin.php officieel waarschuwingen WordPress van onze plugin ‘ s bestaan. Het vereist src/init.php, dat is waar we het schrijven van een PHP die we nodig hebben voor onze blok(s). In het algemeen schrijven we niet alles in plugin.php — uit de doos, alleen de code bevat, zijn de opmerkingen te registreren onze plugin.

Laten we inzoomen op src:

└── src
ã── blok
| ã── block.js
| ã── editor.scss
| └── stijl.scss
|
ã── blocks.js
ã── common.scss
└── init.php

Het blok directory bevat bestanden voor één blok. Dit omvat:

  • block/block.js — Alle JavaScript voor het blok.
  • blokkeren/editor.scss — Sass gedeeltelijk voor stijlen die specifiek zijn voor de vertaaleditor
  • blok/de stijl.scss — Sass gedeeltelijk voor stijlen die specifiek zijn voor de front-end weergave, d.w.z. wat u ziet wanneer u de weergave van uw pagina/post.

Open nu src/blocks.js:

Ik denk dat van src/blocks.js als een inhoudsopgave voor blokken, vergelijkbaar met de rol van een index.scss of de belangrijkste.scss in een Sass project structuur. Als we wilden twee blokken in onze plugin — laten we zeggen dit was een suite van aangepaste blokken — wij kunnen, in theorie, in tweevoud, het blok map, naam wijzigen, en voegt u iets als dit te src/blocks.js:

importeren ‘new-block/block.js’;>

Dan, wat maken-guten-blok voor ons heeft bereid achter de schermen zou weten om onze nieuwe blok block.js in de main script-bestand gecompileerd in dist (nu is een goed moment om een kijkje te nemen in dist, als u dat nog niet hebt gedaan).

Niet slecht zo ver, toch? We hebben nog niet echt gekregen om alle JavaScript…

Een uitdaging!

Oke, nu is het tijd voor een uitdaging! Open src/block/block.js en neem een paar minuten om te lezen door de auteur, Ahmad ‘ s, uitstekende reacties.

Dan zie als u kunt achterhalen hoe*:

  1. Wijzig de naam van het blok, dat is, de een die laat zien dat in de blok-kiezer
  2. Het pictogram wijzigen van je blok (❤ Dashicons)
  3. De tekst wijzigen die wordt weergegeven op de front-end-dat wil zeggen wanneer u “Bekijk Bericht”
  4. De tekst wijzigen die wordt weergegeven op de back-end d.w.z. editor view
  5. Geef de front-end weergave van een border radius van 30 met een afwijkende
  6. Geef de editor een gradient achtergrond
  7. De tekst in de eerste alinea tag bewerkbaar

* U moet in staat zijn om te werken door middel van (bijna!) al deze in ongeveer 10 minuten. 😉

Hoe was dat?

Welke problemen heb je in? Ben je moe van het herladen van de editor? Heb je het “Dit blok lijkt te zijn gewijzigd extern” bericht vaker dan je zou willen? Ik zeker wel, maar zo is het leven met nieuwe technologie is er veel te wensen over in de developer-ervaring, maar dit is geen prioriteit voor het team aanwezig is en zal komen in de latere stadia van Gutenberg ‘ s de geplande ontwikkeling.

Belangrijker nog, heb je #7?

Als je dat deed, dan zou je het schrijven van deze tutorial! Dat was een gotcha. Ik hoop dat je je voelde op zijn minst een beetje in de war en nieuwsgierig, want dat is hoe wij leren! We komen daar op terug in Deel 3.

Nu hebben we onze lagers, laten we eens dieper graven in de notie van een blok.

Skelet van een blok

Hier is block.js met de opmerkingen gestript — wat we zouden kunnen noemen het skelet van een statisch blok:

// Uitgeklede versie van src/block/block.js

// DEEL 1: Importeren afhankelijkheden
importeren ‘./stijl.scss’;
importeren ‘./editor.scss’;

// DEEL 2: Setup verwijzingen naar externe functies
const { __ } = wp.i18n;
const { registerBlockType } = wp.blokken;

// DEEL 3: het Registreren van het blok!
registerBlockType( ‘cgb/blok-test’, {

// Deel 3.1: de instellingen Blokkeren
titel: __( ‘test – CGB Block’ ),
icoon: ‘schild’,
categorie: ‘gewone’,
trefwoorden: [
__( ‘test — CGB Block’ ),
__( ‘CGB Voorbeeld’ ),
__( ‘maak-guten-block’ ),
],

// DEEL 3.2: Opmaak in editor
edit: functie( rekwisieten ) {
return (
<div>U ziet deze in de editor</div>
);
},

// DEEL 3.3: Opmaak opgeslagen in database
opslaan: functie( rekwisieten ) {
return (
<div>Dit is opgeslagen in de database en kwam terug met een the_content();</div>
);
},
} );

We doen een side-by-side vergelijking met andere statische block, de “Separator” blok van de standaard blokken opgenomen in Gutenberg. Dit bestand bevindt zich in gutenberg/blocks/library/separator/index.js. Als u de map openen in VS-Code of het Sublieme, kunt u gebruik maken van de sneltoets Command + Option + 2 op een Mac, of Weergave > gedeelde-Editor om de bestanden side-by-side.

Als u de volgende tekst editor setup beschreven eerder, je moet iets als dit:

In deze afbeelding, ik kopiëren/plakken is de bovengenoemde uitgeklede versie van het blok in een leeg bestand te vergelijken zonder de opmerkingen. Dat is optioneel!

Welke overeenkomsten ziet u? Welke verschillen? Een paar van de andere blok mappen binnen gutenberg-master/library/ en neem een kijkje in hun bestanden, ze te vergelijken met onze blok skelet. Een paar minuten besteden aan het lezen van de code en zie als u kunt ter plaatse een aantal patronen.

Hier zijn een paar patronen die ik zag:

  1. Er zijn accolades in de variabele declaraties en de functie argumenten all over the place.
  2. Markup verschijnt binnen van terugkeer verklaringen en bevat vaak verzonnen namen van tags (misschien herken je deze zo Reageren componenten).
  3. Alle straten lijken te hebben instellingen een object met entires voor de titel, het pictogram , categorie, enz. In de bibliotheek blokken, verschijnen ze in een export const instellingen = … object, terwijl in onze plugin blok, ze zijn onderdeel van een argument voor registerBlockType.
  4. Alle blokken hebben functies voor het bewerken en opslaan als een deel van de instellingen object.
    • De syntaxis van de functies is iets anders dan onze blok editand opslaan functies:
      • bewerken( { className } ) { … } in separator/index.js
      • edit: functie(rekwisieten) { … } block.js
    • De bibliotheek blokken lijken te verwijzen naar kenmerken en in plaats van rekwisieten
  5. Alle blokken in de bibliotheek bevat een index.js. Sommige bevatten een block.js of andere bestanden bevatten een definitie van een klasse die een Component, bijv. klasse LatestPostsBlock breidt Onderdeel { ….

Wat vindt u? Voel je vrij om bij te dragen in de comments (maar niet stoppen met lezen hier!).

Een enigszins beknopte en relevante raaklijn

Je hebt waarschijnlijk al gemerkt een verklaring importeren @wordpress/i18n in elke index.js en block.js bestand in de bibliotheek, evenals een verwijzing naar wp.i18n in onze plugin ‘ s block.js. i18n staat voor internationalisering net als a11y staat voor toegankelijkheid. Internationalisering verwijst naar de praktijk van de ontwikkeling van uw toepassing eenvoudig worden vertaald naar andere talen. Sinds we bereiden alle statische tekst in onze blokken voor de vertaling, we kennen de wp.i18n om een alias van __voor een beknopte, zeer veel als wij gebruik van de dollar als een alias voor de good ‘ol jQuery. Lees meer over i18n voor WordPress hier

Het is ook de moeite waard te vermelden waar die wp in wp.i18n afkomstig is en waarom het is verwezen als @wordpress/i18n in het Gutenberg-bron. wp is een globale object — globale betekenis van een variabele overal beschikbaar — met alle WordPress’ publiekelijk beschikbaar JavaScript API-methoden. Om dit aan te tonen, open de console, terwijl op een pagina binnen de WordPress admin. Type wp en druk op Enter. Je ziet iets als dit:

Dus, wanneer we referentie iets in die wp-object, alles wat we doen is het openen van een deel van de functionaliteit van WordPress JavaScript-API biedt ons op. @wordpress/i18n in het Gutenberg-bron is hetzelfde te doen, maar het importeren van de functies van een npm-module in plaats van de globale object. De functies in de wp global opzettelijk blootgesteld aan de openbare API door de core van WordPress ontwikkelaars voor gebruik in thema ‘ s en plugins.

Als je iets in mijn interne criticus, je zou denken, “Wat, Lara, ik geef niet over deze gegevens. Vertel me hoe maak je een cool blok met alle JavaScript-al!” Naar wat ik zou antwoorden:

Er zijn zo veel bewegende delen en nieuwe concepten in deze omgeving dat ik heb gevonden, de meer code die ik voor lief nemen, het meer frustrerend en tijdrovend wordt het proces. Elke regel code met nieuwsgierigheid! Als je niet weet wat het doet, doet u Vinden in de Map in het Gutenberg-bron en kijk of je kunt vinden een spoor om te volgen. Voor mij, ten minste, dit is een veel aangenamere manier van benadering van het onbekende code dan te proberen om iets op te bouwen lukraak met kopiëren en plakken.

En met dat, laten we wrap up Deel 2!

Huiswerk

Wat? Huiswerk? Ach ja, er is huiswerk! In Deel 3, Andy 🍉 duik in het moderne JavaScript goodies: Reageren, JSX, en ES6 syntaxis. Hoewel onze serie is geschreven voor degenen die een relatief nieuw JavaScript, is het nuttig om te leren van de code en de concepten uit veel verschillende hoeken en bronnen.

In een poging om nieuwe concepten vroeg op, hier is een overzicht voor wat “Huiswerk” voordat Deel 3:

1. Breng wat tijd (1-2 uur) Reageren tutorial, of totdat u uit kunt leggen in uw eigen woorden:

  • De render methode in Reageren
  • JSX en dat die gemaakt-up tag namen kaart te JavaScript-functies
  • Waarom Reageren maakt gebruik van className in plaats van klasse

Aanbevolen bronnen:

  • Ik hield echt van Leren React.js door Eva op Porcello Lynda.com. Lynda is een betaalde service, maar je kunt gratis kijken met een lenerspas in sommige steden (Los Angeles, voor de zekerheid).
  • Heb ik ook aan deze serie artikelen, Leren Reageren met het maken van-reageren-app door Brandon Richey
  • Er zijn vele, vele opties op Youtube!
  • Ik werk mijn weg door Brian van Holt de Complete Intro om te Reageren natuurlijk op Frontend Masters (betaald) en het is heel goed.
  • Ik kan niet gaan zonder vermelding van Wes Bos ‘ s Reageren voor Beginners cursus(betaald) — ik heb het niet gedaan het zelf, maar ik heb gehoord dat alleen grote dingen, en hij houdt het up-to-date!

Ik zou ook adviseren Reageren Staat uit de Grond hier op CSS-Tricks, door Kingsley Silas, omdat het specifiek duiken in staat te Reageren. Als u een nieuwe om te Reageren, zal dit een veel te verteren, maar ik denk dat het de moeite waard om het in uw hersenen ASAP zelfs als het geen zin heeft helemaal nog.

2. Juist ES6 Destructuring en vind je een paar voorbeelden van het in zowel de Gutenberg bron en onze plugin (dat zal niet moeilijk zijn).

Aanbevolen bronnen:

  • Blog post: Een Dood Eenvoudige Intro te Destructuring Objecten door Wes Bos
  • Video: Destructuring: Wat, Waarom en Hoe je op een Leuke Functie (deze worden door Een+ — bekijk deze over arrow functies terwijl u bij het bent)

3. Comfortabel met een voorwaardelijke of ternaire operatoren.

In een zin, ternaire operatoren zijn een verzamelnaam voor als…else statements. U zult zien dat deze over de Gutenberg-bron — het vinden van een aantal eenvoudige voorbeelden die zorgen voor een vangnet voor een string-waarde, evenals meer robuuste toepassingen, zoals in blocks/library/paragraph/index.js bijvoorbeeld.

Aanbevolen bronnen:

  • De MDN artikel is zeer goed.
  • Kijk ook in de niet-operator — hier is een Stack Overflow post over.
  • Niet te ver naar beneden op deze rabbit hole, maar als je extra ambitieuze, doen wat onderzoek over het type dwang in JavaScript. Dit artikel is op FreeCodeCamp en dit hoofdstuk van Je niet Weet JS door Kyle Simpson zijn vaste uitgangspunten.

Oke! Dank je wel voor het lezen, en zie je in Deel 3 voor de reactie, JSX, en andere goodies.

Opmerkingen

Er Was geen onderdeel van deze tutorial is dat niet logisch? Heb je verloren en overal? We willen graag blijven maken van deze beter, dus laat het ons weten als enig onderdeel van deze moeilijk te volgen of indien de informatie onjuist of verouderd zijn.

Nogmaals bedankt, en veel succes!

Serie Artikelen:

  1. Serie Inleiding
  2. Wat is Gutenberg, Toch?
  3. Een Primer met create-guten-blok (Deze Post)
  4. Moderne JavaScript Syntaxis (Coming Soon!)
  5. Reageren 101 (Coming Soon!)
  6. Het opzetten van een Aangepaste webpack (Coming Soon!)
  7. Een Aangepaste “Kaart” Blok (Coming Soon!)