Pattern Lab integreren in Drupal

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.

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!