It seems like field divs output through a basic-based template are missing attributes. I just tested on a pretty clean d8 install, with a fresh download of the 8.x-1.2 version, and I saw one attribute for the body field div:

<div property="schema:text">...</div>

The image field div had no attributes at all. It looks like it's not a problem with the template, because when I'm logged in, I see the in-place-editing classes. It's as if the field attributes are being reset in the preprocess. I do see that there is a hook_field_preprocess function in basic.theme. Is it possible that identifying field-classes are being removed by this function?

I see the full array of div attributes when I switch to Bartik.

Comments

safetypin created an issue. See original summary.

safetypin’s picture

safetypin
Location Memphis, Tennessee
commented
Issue summary: View changes
joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Status: Active » Postponed (maintainer needs more info)

Could you post the output of bartik and basic output of the same div in the issue summary please?

safetypin’s picture

safetypin
Location Memphis, Tennessee
commented

Bartik:

<div class="field field--name-field-image field--type-image field--label-hidden field__item">
  <a href="/node/1">
    <img property="schema:image" src="/sites/default/files/styles/medium/public/2016-09/4012-redwhitebgwb.jpg?itok=oq85fyzP" width="220" height="153" alt="Vulputate Bibendum Ornare" typeof="foaf:Image" class="image-style-medium">
  </a>
</div>

Basic:

<div>
  <a href="/node/1">
    <img property="schema:image" src="/sites/default/files/styles/medium/public/2016-09/4012-redwhitebgwb.jpg?itok=oq85fyzP" width="220" height="153" alt="Vulputate Bibendum Ornare" typeof="foaf:Image">
  </a>
</div>
safetypin’s picture

safetypin
Location Memphis, Tennessee
commented

I'm seeing a similar issue with Views container divs. This one has the generic classes, but none of the view-specific classes. like "view-id-gallery"

In Bartik:

<div class="contextual-region view view-gallery view-id-gallery view-display-id-page_1 js-view-dom-id-8f81a341c91eec2e929f57e248cc2dc752d133cbbe4cfd69de8cd7891cbd2211">
  <div data-contextual-id="entity.view.edit_form:view=gallery:location=page&amp;name=gallery&amp;display_id=page_1&amp;langcode=en" class="contextual" role="form">
    <button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open  configuration options</button>
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'links__contextual' -->
    <!-- FILE NAME SUGGESTIONS:
       * links--contextual.html.twig
       x links.html.twig
    -->
    <!-- BEGIN OUTPUT from 'core/themes/stable/templates/navigation/links.html.twig' -->
    <ul class="contextual-links" hidden="">
      <li class="entityviewedit-form">
        <a href="/admin/structure/views/view/gallery/edit/page_1?destination=gallery">Edit view</a>
      </li>
    </ul>
    <!-- END OUTPUT from 'core/themes/stable/templates/navigation/links.html.twig' -->
  </div>
  <div class="view-content">
    <div class="views-row">
      <div class="views-field views-field-field-image-field">
        <div class="field-content">
          <a href="/node/8"><img src="/sites/default/files/styles/thumbnail/public/2016-09/rachels%20Sample%204.jpg?itok=mzzDys2y" width="240" height="240" alt="Rachel's Sample 4" typeof="foaf:Image" class="image-style-thumbnail"></a>
        </div>
      </div>
      <div class="views-field views-field-title">
        <span class="field-content"><a href="/node/8" hreflang="en">Funeral Sprays, Crosses, and Plants</a></span>
      </div>
    </div>
    <div class="views-row">
      <div class="views-field views-field-field-image-field">
        <div class="field-content">
          <a href="/node/7"><img src="/sites/default/files/styles/thumbnail/public/2016-09/IMAG0023_0.jpg?itok=jKR-P45_" width="240" height="240" alt="Sample arrangement" typeof="foaf:Image" class="image-style-thumbnail"></a>
        </div>
      </div>
      <div class="views-field views-field-title">
        <span class="field-content"><a href="/node/7" hreflang="en">Flowers and Plants for all Occasions</a></span>
      </div>
    </div>
  </div>
</div>

And in Basic:

<div class="views-element-container contextual-region">
  <div class="contextual-region js-view-dom-id-14d81191d403fb7eaaf953dc2d51c2f00029993d1a210233a4890a69e11ab8f8">
    <div data-contextual-id="entity.view.edit_form:view=gallery:location=page&amp;name=gallery&amp;display_id=page_1&amp;langcode=en" class="contextual" role="form">
      <button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open  configuration options</button>
      <!-- THEME DEBUG -->
      <!-- THEME HOOK: 'links__contextual' -->
      <!-- FILE NAME SUGGESTIONS:
        * links--contextual.html.twig
        x links.html.twig
      -->
      <!-- BEGIN OUTPUT from 'core/themes/stable/templates/navigation/links.html.twig' -->
      <ul class="contextual-links" hidden="">
        <li class="entityviewedit-form">
          <a href="/admin/structure/views/view/gallery/edit/page_1?destination=gallery">Edit view</a>
        </li>
      </ul>
      <!-- END OUTPUT from 'core/themes/stable/templates/navigation/links.html.twig' -->
    </div>
    <div class="views-row">
      <div class="views-field views-field-field-image-field">
        <div class="field-content">
          <a href="/node/8"><img src="/sites/default/files/styles/thumbnail/public/2016-09/rachels%20Sample%204.jpg?itok=mzzDys2y" width="240" height="240" alt="Rachel's Sample 4" typeof="foaf:Image"></a>
        </div>
      </div>
      <div class="views-field views-field-title">
        <span class="field-content"><a href="/node/8" hreflang="en">Funeral Sprays, Crosses, and Plants</a></span>
      </div>
    </div>
    <div class="views-row">
      <div class="views-field views-field-field-image-field">
        <div class="field-content">
          <a href="/node/7"><img src="/sites/default/files/styles/thumbnail/public/2016-09/IMAG0023_0.jpg?itok=jKR-P45_" width="240" height="240" alt="Sample arrangement" typeof="foaf:Image"></a>
        </div>
      </div>
      <div class="views-field views-field-title">
        <span class="field-content"><a href="/node/7" hreflang="en">Flowers and Plants for all Occasions</a></span>
      </div>
    </div>
  </div>
</div>
joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Status: Postponed (maintainer needs more info) » Closed (works as designed)

Ah that's because we are extending from Stable base theme. We are trying to avoid adding unnecessary and opinionated core classes to Basic, to keep it as "basic" and blank canvas like as we can. You can add them back by copying the field.html.twig template from Classy.

Feel free to re-open if you have some oversight bug that we have overlooked?

safetypin’s picture

safetypin
Location Memphis, Tennessee
commented

Thank you!

calbasi’s picture

calbasi
Primary language Catalan
Location Catalonia
commented
Category: Bug report » Feature request
Priority: Normal » Minor
Status: Closed (works as designed) » Needs review

Hi,

Could we, as alternative to copy the field.html.twig template from Classy, just add this line at basic.info.yml:

base theme: classy

or perhaps this could have unexpected and / or undesired behavior?

Thanks a lot.

Ps.: I like KISS concept, and basic stuff, but having some field classes could be helpful.

calbasi’s picture

calbasi
Primary language Catalan
Location Catalonia
commented
Status: Needs review » Closed (works as designed)
Related issues: +#2728881: Class syntax options in templates

I think there is a better option which is, in fact, integrated at basic code from some months ago: https://www.drupal.org/node/2728881 (just uncomment few lines, and this enable some classes using BEM syntax... it could be done at field and node twig templates.