Issue with theme override for a field

[sinyayadynya]

Hi, While updating to the last version of Emulsify (Emulsify 2.x), I'm having some issue with a theme override for a field.

What I had working with the previous version is the following:

• /components/_patterns/01-atoms/_field-headline.twig

  <div{{ attributes }}>
  {% for item in items %}
  <h3{{ item.attributes.addClass('heading-3 headline') }}>{{ item.content }}</h3>
  {% endfor %}
  </div>

• /templates/fields/field--field-headline.html.twig {% include "@atoms/_field-headline.twig" %}

But this is now broken, giving the following error:

Twig_Error_Loader: Template "@atoms/_field-headline.twig" is not defined (Drupal\Core\Template\Loader\ThemeRegistryLoader: Unable to find template "@atoms/_field-headline.twig" in the Drupal theme registry.) in "themes/custom/corp/templates/fields/field--field-headline.html.twig" at line 40. in Twig_Loader_Chain->getCacheKey() (line 129 of .../vendor/twig/twig/lib/Twig/Loader/Chain.php).

Thanks for help.

[ModulesUnraveled]

@sinyayadynya Can you provide details on what your issue is?

[sinyayadynya]

@ModulesUnraveled yes, sorry I sent the issue hitting 'return' before typing the description. Now updated above.

The issue is a bit similar to the one I had in https://github.com/fourkitchens/emulsify/issues/82, but can't find here a workaround as with the logo.

[ModulesUnraveled]

First of all, it looks like there's an issue with your file path. themes/custom/corpcomponents/_patterns should probably be themes/custom/corp/components/_patterns (specifically with a slash in corp/components)

I'm not familiar with the way you're including the file. Here's what I'd recommend:

You should have the following in your .info.yml file:

component-libraries:
  base:
    paths:
      - components/_patterns/00-base
  atoms:
    paths:
      - components/_patterns/01-atoms
  molecules:
    paths:
      - components/_patterns/02-molecules
  organisms:
    paths:
      - components/_patterns/03-organisms
  templates:
    paths:
      - components/_patterns/04-templates
  pages:
    paths:
      - components/_patterns/05-pages

Once that's there, you can simplify your /templates/fields/field--field-headline.html.twig to this:

{% include "@atoms/_field-headline.twig" %}

[sinyayadynya]

Sorry as I messed it up a bit in the description about my templates/fields/field--field-headline.html.twig as originally it contained as you suggested :

{% include "@atoms/_field-headline.twig" %}

And yes, my .info.yml is how you mentioned.

Indeed my error message is still something like:

Twig_Error_Loader: Template "@atoms/_field-headline.twig" is not defined (Drupal\Core\Template\Loader\ThemeRegistryLoader: Unable to find template "@atoms/_field-headline.twig" in the Drupal theme registry.) in "themes/custom/corp/templates/fields/field--field-headline.html.twig" at line 40. in Twig_Loader_Chain->getCacheKey() (line 129 of .../vendor/twig/twig/lib/Twig/Loader/Chain.php).

Only don't understand why and how to define @atoms/_field-headline.twig.

PS: I have now also corrected the issue description

[ModulesUnraveled]

Do you have the components module enabled? That's what picks up the component-libraries in the info.yml file.

It's a part of the Install steps: https://github.com/fourkitchens/emulsify#in-a-composer-based-drupal-install-recommended

[sinyayadynya]

Yes, the components module is enabled:

$ drush en emulsify components unified_twig_ext -y
 [notice] components is already enabled.
 [notice] unified_twig_ext is already enabled.
 [notice] emulsify is already enabled.
The following extensions will be enabled: emulsify
Do you really want to continue? (y/n): y
 [notice] emulsify was enabled successfully.

[ModulesUnraveled]

That's a tough one, everything you've provided looks correct. I assume you've cleared cache etc.?

[sinyayadynya]

Sure, I have cleared the cache many times

[evanmwillhite]

This is a common path error (when the path referencing a Twig file from another is incorrect), but I've actually seen this in unexplainable times before, one of which required disabling and reenabling the theme. Can you do that by chance?

[ccjjmartin]

@sinyayadynya When you are defining the twig includes you need to include the directories also. Looking at your include:

{% include "@atoms/_field-headline.twig" %}

Should probably be something like:

{% include "@atoms/component_directory/subdirectory/_field-headline.twig" %}

Also, I think you can remove the leading underscore from the name as that generally means you aren't actually using the file.

[sinyayadynya]

@evanmwillhite when disabling/enabling the theme, it did not got better. Then, I uninstalled/reinstalled the theme (took a while putting back all the blocks) and I have no more error message, but what is strange is that I also have lost the intended markup, with:

<div>Technical highlights</div>

instead of:

<h2 data-quickedit-field-id="paragraph/173/field_technical_highlights/en/default" class="text-long heading-2">Technical highlights</h2>

@ccjjmartin do you mean that I should move /components/_patterns/01-atoms/_field-headline.twig to /components/_patterns/01-atoms/02-text/00-headings/field-headline.twig ?

I have done that too, but still not having the the intended markup.

Cannot really understand what is going on, specially as it is a few months old project that I'm updating to Emulsify v2. But in short I would like to replace the naked <div> around paragraphs labels by a <h2> header. If you have any better suggestion, then welcome.

[ccjjmartin]

@sinyayadynya:

The components module will define paths that you can reference like @atoms in your .info (Brian mentioned above). If your other atoms are loading properly then this probably isn't the issue.

component-libraries:
  atoms:
    paths:
      - components/_patterns/01-atoms

After that you can include your twig files in templates using the previous reference:

{% include "@atoms/_field-headline.twig" %}

Should expand out to:

/components/_patterns/01-atoms/_field-headline.twig

So if that is where the file is (and it is readable), Drupal should be able to use the file. Are you using Kalabox or some sort of VM that might not be syncing the files into the virtual environment?

Also, one time I was editing the files in the Emulsify theme instead of my custom theme. Maybe shutdown all your open windows and reopen everything to make sure you are in the right directories?

[sinyayadynya]

Actually, it was another unlinked issue that I thought it was linked, but was not.

In /components/_patterns/01-atoms/_field.twig, line 55 changed from <h2{{ attributes.addClass('heading-2') }}>{{ label }}</h2> to <div{{ title_attributes }}>{{ label }}</div>

And that what put my paragraphs labels into simple <div> instead of <h2> heading.

However, I have 2 questions from that point:

1. Is it ok to just replace that <div> line by the old <h2>, or is there a better practice?
2. It seems that .heading-x classes were replaced by .hx classes, any special reason?

@ModulesUnraveled, @evanmwillhite and @ccjjmartin thanks a lot for the help, as coming back to my project after nearly 2 months and updating to Emulsify v2 was a bit challenging. As mentioned in https://github.com/fourkitchens/emulsify/issues/82, I will try to follow closer your updates. Only I'm curious about Emulsify roadmap and would be glad if you can share any information about further development or simply about the best way to keep updated.

[evanmwillhite]

No problem! 2.x is a major version change, one in which we streamlined a lot of things (including simplifying class names in places) and made some major updates to the installation/upgrade process. If you try to update to 2.x like you would a Drupal module, there will definitely be breaking changes in /components. This is actually why we created the drush script in the 2.x release - because Emulsify has some notable differences from a module or even a base theme. If anything about the Emulsify components are updated then it will likely break (or just change the output of) files that rely on them. Don't get me wrong - it's OK to update Emulsify, but we recommend only pulling in changes to the /components directory manually.

I hope this helps, and thank you for trying out the new version!

[sinyayadynya]

Yes, thanks for the information. I noticed that many updates were going on last 2 months. That's why I wanted to update my project. Great works, like your approach and support. Looking forward to use Emulsify on my next D8 projects too.