Pattern Lab integreren in Drupal
In de vorige blogpost gaven we een introductie over Pattern Lab, en vertelden we wat component based design precies is. In deze post gaan we verder om Pattern Lab te integreren in een Drupal-systeem.
Drupal als CMS laat zich uitzonderlijk goed matchen met een component based design. Een van de sterktes van Drupal is het hergebruiken van content op verschillende plaatsen in verschillende weergaves.
Maar ook entities en fields kunnen heel eenvoudig naar componenten worden gematcht. Als daarbij gebruik gemaakt wordt van paragraphs voor content kunnen ook hier eenvoudig componenten op gemapt worden.
Emulsify
Uiteraard moeten we de Pattern Lab-component matchen aan de specifieke Drupal-templates. Op basis van de Components-module kunnen we twig-elementen definiëren buiten de standaard Drupal namespaces. Op deze manier kunnen we onze Pattern Lab-componenten benaderen vanuit Drupal.
Om deze setup niet zelf te moeten opzetten kunnen we ook gebruik maken van een aantal kant-en-klare (base) themes binnen Drupal, die een basis frontend-workflow en Pattern Lab-integratie voorzien. Onze favoriet is Emulsify.
Emulsify voorziet naast een kant-en-klare frontend-developmenttoolbox (SCSS, Gulp, Yarn …) ook out-of-the-box integratie met Pattern Lab. Zo zie je meteen resultaat in de gegenereerde Pattern Lab-website.
Daarnaast voorziet Emulsify ook Drupal-support voor een aantal componenten. Ook worden een aantal Drupal-specifieke twig-functies gemapt, zodat ze ook gebruikt kunnen worden in Pattern Lab, en kan ook JS op een Drupal-compatibele manier gebruikt worden.
Een voorbeeld: card-molecule
In onze vorige blogpost hebben we voorbeelden gezien voor een card-molecule. Die moeten we nu ook nog mappen aan de corresponderende Drupal-component.
In ons voorbeeld gaan we de card-molecule gebruiken als basis voor de teaser-weergave van een artikel.
-
template/node--article--teaser.html.twig
Door gebruik te maken van de twig embed-functie roepen we hier de Pattern Lab-template in, waar we de Drupal-data doorgeven aan de Pattern Lab-template. Met behulp van de twig block-functie kunnen we delen van de embed vervangen door specifieke Drupal-elementen waar we de mapping definiëren op veldniveau.
Belangrijk punt hierbij is dat we geen HTML-elementen definiëren in onze Drupal-templates. De effectief gebruikte elementen nemen we op in de Pattern Lab-template die de ‘leading’ implementatie is.
JavaScript voor extra functionaliteit
Binnen een Pattern Lab-component kunnen we ook JavaScript-files toevoegen die extra functionaliteit geven. In Drupal moeten we deze JS-files ook registreren, zodat ze door Drupal ingeladen kunnen worden.
Hiervoor moeten we in onze theme een library definiëren die verwijst naar de JS-file.
-
our_theme.libraries.yml
Hierna kunnen we deze library includen in onze twig-template. Op deze manier zullen zowel in Drupal als in Pattern Lab de JS-files op de correcte manier toegevoegd worden.
-
components/_patterns/02-molecules/accordion-item/accordion-item.twig
Conclusie
Emulsify laat ons op deze manier toe om Pattern Lab en Drupal volledig van elkaar los te koppelen. De gebruikte componenten en hun HTML-structuur worden volledig in Pattern Lab beheerd. Drupal is enkel verantwoordelijk om de data op de juiste manier door te geven.
Dit maakt ook dat er duidelijke afspraken gemaakt kunnen worden zodat frontend-developers en Drupal-developers elkaar niet voor de voeten lopen. Een vlotte samenwerking gegarandeerd!
Lees ook
Blog
Pattern Lab: de kracht van component-based design
Een website bestaat al lang niet meer uit 'handgemaakte' pagina's, tegenwoordig is het een heel ecosysteem. Backend-expert Tim legt in deze introductie over Pattern Lab uit hoe hij componenten, atomen en molecules bouwt waar bijna letterlijk online platformen uit groeien.
Blog