Examples. Needs lots of examples.

[rupl]

I've been using Emulsify and want to contribute my experiences to the wiki. I'm running into problems stitching my PL components to Drupal stuff. For example, the most basic examples I can provide are far more complex than the two examples in the wiki:

• I want to combine to fields to make a byline in a node template but content.field_one ~ ', ' ~ content.field_two just outputs ARRAY, ARRAY. Each field works fine when I output it in its own. They break when combined.
• I want to build some custom markup with an image field.. I can't extract the src/alt without doing some crazy gymnastics. This could take many forms (an <img> or a div with a bg-image, <picture> etc)

Here are other even more complex situations I have to solve on my project that I suspect aren't even possible. I'd love to be wrong but here they are to start discussion:

• I want to build a Views display using a molecule and an organism. The organism is the views-view-unformatted.html.twig scope and the molecule is the row scope in that template. How to pass a template to a template? embed? What pattern does a dev need to look out for so they can build PL in a Drupal-friendly way?
• I want to theme a node submission form. I suspect this is also impossible using the include/with pattern because theming a form means the children var is flattened HTML when the template receives it. I would have to go back and create templates per Drupal component which is the exact opposite of what Emulsify intends to accomplish.

Other Drupal 101 stuff that must have examples for this to be usable by casual passerby:

• Entityref example
• Navigation example
• Attaching JS to a component (yes I know there are some notes but an example code block is better)

Anyway, I have examples for some of this that I can provide, but I am brand new to Emulsify so I just did whatever didn't crash my site and moved on. It's probably not as solid as could be. Hoping y'all have stuff you can pull from a previous implementation that you can generalize and share.

[C13L0]

Yes, please! Solid examples would truly be appreciated.

[EvanLovely]

@rupl For the first point you should try content.field_one | render ~ ', ' ~ content.field_two | render

[evanmwillhite]

So @rupl these aren't really Emulsify-specific, but it's a valid topic for sure. These are the kinds of problems tackled during any kind of Component-Based Theming using Twig. I'll answer what I can below, but first I'll tell you a group of us had a discussion at DrupalCon Baltimore (including @EvanLovely above who built Pattern Lab Starter, the original Component-based theming tool that uses Pattern Lab & Drupal), because we all struggle to solve these kinds of problems regardless of the tooling. We decided it would be best to extract our examples/docs on this topic from our starterkits into a single place that could contain working examples of these kinds of things and be shared. We talked about using Drupal Lab, just because it's an existing project that could feasibly contain this kind of thing. We haven't gotten to that yet, but I would recommend we contribute somewhere outside of Emulsify for this kind of documentation because it would be helpful for non-Emulsify users as well.

Ok, so here goes:

I want to build some custom markup with an image field.. I can't extract the src/alt without doing some crazy gymnastics. This could take many forms (an or a div with a bg-image, etc)

Without using a 3rd party module (never used it but this is available), this is annoyingly involved. For the most part, I avoid the hoops of digging down into image tags by just using Drupal's markup for the image tags, especially when it involves responsive images. That said, below is an example of some code that will get you the url of the image, which we've used for background images:

file_url(content.FIELDNAME['#items'].entity.uri.value)

I want to build a Views display using a molecule and an organism. The organism is the views-view-unformatted.html.twig scope and the molecule is the row scope in that template. How to pass a template to a template? embed? What pattern does a dev need to look out for so they can build PL in a Drupal-friendly way?

So far, we have avoided nesting in a single file by using the respective templates for those items instead. So, let's say you are building a view of node teasers. Your views-view-unformatted.html.twig would contain your organism include, and would just pass in the vague rows. This would control the outer markup around your teaser listing. The molecule markup however would be included in the node--NAME--teaser.html.twig file. You could maybe accomplish this with embed as well since you can pass in custom blocks, but this approach seems to keep things tidy.

I want to theme a node submission form. I suspect this is also impossible using the include/with pattern because theming a form means the children var is flattened HTML when the template receives it. I would have to go back and create templates per Drupal component which is the exact opposite of what Emulsify intends to accomplish

I haven't gotten very granular with fully component-izing form code, and I know @EvanLovely mentioned at DrupalCon this wouldn't be his idea of a fun day either. We keep Drupal's files inside the _components dir just to make sure custom markup stays in a certain place, but so far we've kept it within Drupal's template files instead of trying to break it out into individual components (just making sure classes, etc. are the same in both). This is the same for navigation code actually - we still use the provided files from Stable. Not ideal in terms of getting to write all your own markup, but you avoid this headache.

Attaching JS to a component.

With Emulsify and I think Pattern Lab Starter as well, you can write your JS anywhere and it will automatically work in Pattern Lab (just lumps it into a single JS file that gets served to all pages). For Drupal, the process is 2-fold:

1. Register Library in emulsify.libraries.yml file (requires a cache rebuild)

   tabs:
   js:
   components/_patterns/02-molecules/menus/tabs/tabs.js: {}

2. Use the attach_library function in your Drupal twig file (wherever you're including your component).

   {{ attach_library('emulsify/tabs') }}

   This approach takes advantage of Drupal's aggregation system but also doesn't add your JS where it's not needed.

Finally, I'd say jump into the #components channel of drupaltwig.slack.com. We all gather there regardless of tooling to ask these very (hard) things. :) Also, this is an article I've kept bookmarked that is older but lists the available Twig modules available - might be good: http://www.xenomedia.com/blog/top-thirteen-drupal-twig-helper-modules. Stay strong - the first project I did this on felt like a very uphill climb until about the last 1/4 of the project, but then it felt really amazing. Prototyping new components became blazingly fast, and so did Drupal integration for the most part (because you reuse a lot of the same code). I promise it's worth it! 👍

[rupl]

Thanks for the explanations even though they were not all specifically Emulsify questions. The info is good and will help me write some onboarder docs more thoroughly. Even identifying to a potential newbie where it's D8 and where it's Emulsify can help cut down on frustrated folks filing panicky issues like this one in the future. 🙃

I am still wondering about the forms.. seems really tricky and in the end might require some sort of boilerplate in Emulsify to indicate that you can't just write bespoke markup and expect to push it through into Drupal.

[a-fro]

@evanmwillhite I'm interested in helping with examples and have some time to work on them if you'd like.

[evanmwillhite]

Absolutely @a-fro! Thanks for offering to pitch in!

[a-fro]

@evanmwillhite what if we used the code from demo.patternlab.io and build a simple integration with Drupal that uses those components in views, paragraphs, blocks, etc.? Or, can you recommend a different implementation to use, as opposed to building one from scratch?

Other recommendations from interested folks on the best way to build out an examples project? Or is the wiki a better place for this?

[EvanLovely]

Let's flesh out Drupal Lab more for examples; I've forked it over on our shared GitHub Org: https://github.com/drupal-pattern-lab/drupal-lab so we can update it. The theme code is about a year old, but it still is good stuff even though it could use a little bit of a clean up. Great stuff in there as it shows off a lot of good fundamentals. I could see that getting fleshed out more, perhaps other themes if we wanted to take it really far, but there's a lot that could be demoed there very well.

For docs, examples, and how tos, I'd suggest the community focus on the Drupal Pattern Lab website: https://github.com/drupal-pattern-lab/drupal-pattern-lab.github.io

And @evanmwillhite totally nailed all points above very well!

@rupl know that you could control form markup, but just know that it's a pain and that your reasons are strong for wanting to do so. I avoid it (and menus) as the pros don't outweigh the cons for me in those ares, but your pros might be weightier!

[evanmwillhite]

Totally agree with @EvanLovely, @a-fro. Anything not Emulsify-specific let's try and put into a shared location all of us component-based FE devs can use. If it is Emulsify-specific, we have been using the GH wiki but I am open to other things as well (better code comments, etc.).

[a-fro]

@EvanLovely works for me. Issue added to the roadmap.

[EvanLovely]

Thanks!

[sghoweri]

👆🏼 Completely agree with @EvanLovely's recommendation about using Drupal Lab over on Drupal Pattern Lab's Github org for hosting the latest practical examples and techniques in integrating PL with Drupal + we focus on documentation and discussions over on the Github Pages site so we can keep the conversation going.

My buddy https://github.com/charginghawk and I were just talking about this yesterday!

[rupl]

@EvanLovely yeah that's good confirmation, I also think it's more trouble than it's worth. I tend to stick to Drupal's output anyway (never been too much of a markup hater) so if the general opinion is that it's difficult to reshape form output that's good to know.

[evanmwillhite]

@rupl are you OK closing this issue?