Skip to content

Instantly share code, notes, and snippets.

@dmolsen
Created May 31, 2014 19:59
Show Gist options
  • Save dmolsen/027ba305666d0b28a23d to your computer and use it in GitHub Desktop.
Save dmolsen/027ba305666d0b28a23d to your computer and use it in GitHub Desktop.
Exporting Patterns from Pattern Lab

Exporting Patterns from Pattern Lab for Drupal 8 Themes

I'm going to use Drupal as my guinea pig when thinking about this because Marc has shown the most interest in trying to make this happen. The holy grail does seem to be creating a way to have PL live with a remote project. Right now it's very good for the development but falls short or probably requires a lot of work if used as part of maintenance.

In order to work well for Drupal I would assume we'd have to tackle the following three problems:

  1. Develop patterns in the native format (Twig)
  2. Store or export patterns so they match the destination format (theme structure)
  3. Sync the exported patterns with a remote system

Point 1: Native Formats

I think we're at least in the process of addressing point 1. A pattern loader for Twig is now available in the dev branch. It doesn't support everything that the Mustache pattern loader does but it's a step in the right direction.

Point 2: Exporting Patterns

Point 2 is more theoretical but seems like it should be fairly easy to put together. Is this a place where we could create an export config that says something like this?

"templates/*":        "templates/*"        # export all source/_patterns/templates into export/templates
"molecules/blocks/*": "templates/blocks/*" # export all source/_patterns/molecules/blocks into export/templates/blocks
"pages/*":            "templates/pages/*"  # export all source/_patterns/pages into export/templates/pages

This way patterns could be directly moved between the "atomic" structure and an expected theme structure.

Question: What about the patterns that are included via a partial in the template but aren't in the export? Answer: I think we could do sort of a collapse and export feature. All patterns that weren't included in the export would be collapsed into the pattern that included them.

Question: How do we handle updating the pattern partial syntax since Drupal won't recognize it? Answer: Find and replace based on the config.

So an example:

# template file
Hello 
{% include molecules-block-hero %}
World
{% include atoms-avatar %}

Here we have to a) replace molecules-block-hero with the theme location of the partial and b) we need to collapse atoms-avatar because it's not being exported. I think we'd end up with the following being exported.

# template file
Hello
{% include 'templates/blocks/block-hero.twig.html' %}
World
<img src="{{img.avatar.src}}" alt="Avatar" />

Question: What about the other static assets including a theme.info.yml? Answer: They could just be moved enmasse from source/ to export/. One issue would be if assets needed preprocessing. Maybe move things enmasse from public/ instead? Or at least some stuff based on theme.info.yml?

Question: Could we just skip the atomic structure and use the theme structure directly with PL? Answer: This might be another way to approach this problem. There's nothing to say the atomic structure isn't completely skipped. PL should still work.

Point 3: Syncing

I think syncing is a bit outside the scope of Pattern Lab but I could see a way to do it so that folks think it's "easy." If a developer were using the Git Flow pattern they could work mainly in dev. When ready they export and merge with master. When pushing master to a service like GitHub a webhook fires enabling a remote server to download just the export folder and set it up to be used in production.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment