Using join, include, and attributes in YAML (.yml) files with Data Transform Plugin for Pattern Lab

Aleksip’s Data Transform Plugin (DTP) is a tremendous tool for people using Pattern Lab and Drupal together. It allows you to emulate Drupal’s Attribute and Url objects, which is really useful when creating Twig templates that will be consumed by both Pattern Lab and Drupal.

It also includes some useful tools for combining different Pattern Lab partials in the same way as Drupal would eventually compose elements like a form from your form, input, and submit molecules/atoms. I recently used DTP to mock a Drupal form in Pattern Lab and I wanted to share the code here because there aren’t many DTP examples online using YAML. There are a lot of examples using JSON inside Aleksip’s Shila Drupal theme though, so if you’re not super familiar with YAML (like me!) and get stuck, try finding an example in Shila and then use https://www.json2yaml.com to convert it to YAML!

Anyway, here’s an example of using Attribute(), join() and include() together in one file. join() combines either strings of markup, or references described by include() to other patterns (in shorthand format). The example below puts a input (within a wrapping div) and a submit button into the children variable, ready to be output in our search-form.twig file. We use the only: true option to prevent our form’s

Below is the Twig file where children will be output. You can see that inside the Twig template we include some layout and spacing utility classes (provided by Tailwind) to align our form items, but the more opinionated utility classes for things like the border colour, background colour, and text colour are held in the YAML file. This means our search-form.twig file can appear to be styled nicely enough in Pattern Lab, but actually be unstyled enough to use in numerous contexts. For example we might show it in a Drupal block in our footer, and in the template for that block we might add a different background colour utility class to wrapper_attributes before include-ing the form. The contents of wrapper_attributes would be passed to the form Twig file, and so our form would appear with the styling we expect.