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
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
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
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.