Ga naar hoofdinhoud

Van eigen componenten naar open source “blocks” voor WordPress

Met NL Design System community blocks wordt het nog makkelijker om NL Design System-componenten te gebruiken in WordPress. De grote aanjager van deze plug-in is de gemeente Den Haag, die hier met hun leverancier Acato aan werkten. We spraken Tom Dekker van Acato over het proces.

Terwijl de gemeente Den Haag met hun leveranciers werkte aan de nieuwe DenHaag.nl, ontstond al snel de behoefte herbruikbare onderdelen open source beschikbaar te maken. Met deze vraag gingen zij naar hun leveranciers. Dat resulteerde in zogenaamde ‘community blocks'. Het team wilde graag terugleveren aan de maatschappij, en slim omgaan met design en code. Dat maakte de keuze voor het NL Design System eenvoudig.

Wat zijn de NL Design System community blocks precies?

NL Design System community blocks is een plug-in die je in een WordPress-omgeving kan installeren. De plug-in bevat blokken voor de Gutenberg-editor, zodat redacties pagina's kunnen opbouwen met NL Design System-componenten. Ze worden gebruikt door de gemeente Den Haag, maar kunnen in de basis juist ook in andere organisaties worden ingezet. De componenten maken namelijk van je NL Design System-thema, via design tokens. Goed om te weten: de gebruikte componenten worden nog getoetst op bijvoorbeeld toegankelijkheid volgens het estafettemodel.

Behoefte aan breed inzetbare componenten

Tom vertelt: “We merken dat er steeds meer vraag is naar breed inzetbare componenten. De ontwikkeling van deze community blocks is oorspronkelijk ontstaan vanuit de behoefte van de gemeente Den Haag. Want componenten voor de Gutenberg WordPress-editor waren er nog niet. We zien dat de WordPress-community ontzettend groot is, net als de groeiende community van het NL Design System. Deze community's brengen we graag samen.”

Inmiddels staat er een eerste versie klaar van 15 componenten. Ook zijn er 17 componenten gemaakt om verder te ontwikkelen. Volgens Tom is er ook steeds meer behoefte aan het hergebruiken van code.

Tom legt uit dat ze nauw samenwerken met andere leveranciers, zoals Yard en Draad: “Hoe kunnen we ervoor zorgen dat al die gemeenten die zijn aangesloten bij het Open Webconcept eenvoudig kunnen aanhaken op het NL Design System? En hoe zorgen we ervoor dat de beschikbare financiële middelen slim worden gebruikt door middel van hergebruik? Daar kijken we samen met deze andere leveranciers naar. Overkoepelend kun je de NL Design System community blocks zien als een schakel voor organisaties om aan te sluiten bij het NL Design System. Ook is deze plug-in vrij te gebruiken, omdat er is gekozen voor de EUPL 1.2 licentie.”

‘Hoe kunnen we er nou aan zorgen dat de plug-in beter wordt?’

Volgens Tom is de kracht van de NL Design System-community heel fijn: “Het leuke is dat het verder ontwikkelen van de community blocks echt een gezamenlijke inspanning is. Er was onlangs een samenwerkdag tussen Acato, Yard en Robbert en Yolijn vanuit het NL Design System-kernteam. Samen keken we naar wat er nu staat en vooral: hoe kunnen we zorgen dat de plug-in nóg beter wordt? Maar ook hoe het gebruikt kan worden door andere organisaties en leveranciers.”

Tom vertelt dat de ambitie er is om NL Design System, Open Webconcept én WordPress verder samen te brengen en met elkaar te verweven. “Voor dat zover is, willen we de plug-in eerst verder toetsen met andere partijen. Waar lopen zij tegenaan en vooral: wat zijn de wensen van andere organisaties? Daarom zijn die samenwerkdagen ook zo belangrijk. Op die manier komt er feedback vanuit de community en dus ook automatisch vanuit andere organisaties.”

Meer weten?

Ben je benieuwd naar de gehele presentatie mét demo die Tom onlangs gaf tijdens de Heartbeat van het NL Design System? Kijk de opname dan terug via ons YouTube-kanaal. Tip: abonneer je om op de hoogte te blijven van alle updates vanuit het NL Design System!

De community van het NL Design System is op zoek naar organisaties die hierover willen meedenken. Vind jij het leuk om jouw feedback te geven? Maak een issue aan op GitHub, of stel je vraag in het #nl-design-system-developers kanaal in de Code for NL Slack.