Pattern Lab + Plugin Data Transform

Posted | Updated

You want your Pattern Lab components to have good content to work with, while working seamlessly with Drupal. I'm using Aleksip's Plugin Data Transform extension to do this.

Here is a node template:

{%
  include "@templates/00-layouts/01-class-full.twig"
  with {
    class: {
      title: product_entity.title.value,
      image: product.field_featured_image.0,
      price: product.variation_price.0['#markup'],
      description: product.body.0
    },
    instructor: product.field_instructor,
    organization: product.field_organization,
  }
%}

I am filling the class variable with text I need, and assigning field_instructor and field_organization to instructor and organization. For class, I'll print these variables in a template.

For the other 2, I'll print them with {{ instructor }} and {{ organization }} in order to have them user their own node/user teaser templates.

 

Here is 01-class-full.twig:

{% include "@organisms/class/class-detail.twig" %}

{{ instructor|raw }}

{{ organization|raw }}

The |raw is needed, otherwise it will print the markup.

Here is my class-full.yml:

class_detail: "organisms-class-detail"
instructor: "organisms-class-instructor"
organization: "organisms-class-organization"

And class-detail.twig:

<div class="class">

  {% include "@atoms/02-text/00-headings/_heading.twig" with {
    "heading_level": 1,
    "heading": class.title
  } %}

  {{ class.image|raw }}

  <div class="class-description">
    {% include "@atoms/02-text/text/01-paragraph.twig" with {
      "paragraph_content": class.description
    } %}
  </div>
</div>

And class-detail.yml:

class:
  title: Intro to Woodworking
  description: Learn to turn!
  image:
    include():
      pattern: "atoms-image"
      only: true
      with:
        img_src: https://placeimg.com/1200/400/art

 

Long story short, when I print include class-detail

One problem with this technique is that is breaks some of Pattern Lab's navigation that links to the templates used in the one you're looking at. IE with {{ instructor }} in my template, it's using class-instructor.twig, but this is not mentioned in the template sidebar like it should be. I think this is the issue: https://github.com/aleksip/plugin-data-transform/issues/17

Tags
#Pattern Lab