Issue #2217731 by crowdcg, lauriii, davidhernandez, aczietlow, jjcarrion,...

Issue #2217731 by crowdcg, lauriii, davidhernandez, aczietlow, jjcarrion, mortendk, karolus, pakmanlh, LewisNyman, aboros, joshua.boltz: Move field classes out of preprocess and into templates

core/includes/theme.inc

@@ -1631,37 +1631,18 @@ function template_preprocess_region(&$variables) {
 function template_preprocess_field(&$variables, $hook) {
   $element = $variables['element'];
 
+  // Creating variables for the template.
+  $variables['entity_type'] = $element['#entity_type'];
+  $variables['field_name'] = $element['#field_name'];
+  $variables['field_type'] = $element['#field_type'];
+  $variables['label_display'] = $element['#label_display'];
+
   $variables['label_hidden'] = ($element['#label_display'] == 'hidden');
   // Always set the field label - allow themes to decide whether to display it.
   // In addition the label should be rendered but hidden to support screen
   // readers.
   $variables['label'] = String::checkPlain($element['#title']);
 
-  // Add default CSS classes. Since there can be many fields rendered on a page,
-  // save some overhead by calling strtr() directly instead of
-  // \Drupal\Component\Utility\Html::getClass().
-  $variables['entity_type_css'] = strtr($element['#entity_type'], '_', '-');
-  $variables['field_name_css'] = strtr($element['#field_name'], '_', '-');
-  $variables['field_type_css'] = strtr($element['#field_type'], '_', '-');
-  $variables['attributes']['class'] = array(
-    'field',
-    'field-' . $variables['entity_type_css'] . '--' . $variables['field_name_css'],
-    'field-name-' . $variables['field_name_css'],
-    'field-type-' . $variables['field_type_css'],
-    'field-label-' . $element['#label_display'],
-  );
-
-  // Add a "clearfix" class to the wrapper since we float the label and the
-  // field items in field.module.css if the label is inline.
-  if ($element['#label_display'] == 'inline') {
-    $variables['attributes']['class'][] = 'clearfix';
-  }
-
-  // Hide labels visually, but display them to screenreaders if applicable.
-  if ($element['#label_display'] == 'visually_hidden') {
-    $variables['title_attributes']['class'][] = 'visually-hidden';
-  }
-
   static $default_attributes;
   if (!isset($default_attributes)) {
     $default_attributes = new Attribute;

core/modules/comment/comment.module

@@ -814,17 +814,12 @@ function comment_preprocess_field(&$variables) {
     $variables['comment_display_mode'] = $element[0]['#comment_display_mode'];
     $variables['comment_type'] = $element[0]['#comment_type'];
 
-    // Adjust a comment field's attributes.
-    $variables['attributes']['class'][] = 'comment-wrapper';
-    $variables['title_attributes']['class'][] = 'title';
-
     // Append additional attributes (eg. RDFa) from the first field item.
     $variables['attributes'] += $variables['items'][0]['attributes']->storage();
 
     // Create separate variables for the comments and comment form.
     $variables['comments'] = $element[0]['comments'];
     $variables['comment_form'] = $element[0]['comment_form'];
-    $variables['content_attributes']['class'] = array('title', 'comment-form__title');
   }
 }
 

core/modules/comment/templates/field--comment.html.twig

@@ -17,22 +17,44 @@
  * - comment_form: The 'Add new comment' form.
  * - comment_display_mode: Is the comments are threaded.
  * - comment_type: The comment type bundle ID for the comment field.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
  *
  * @see template_preprocess_field()
  * @see comment_preprocess_field()
  */
 #}
-<section{{ attributes }}>
+{% set field_name_class = field_name|clean_class %}
+{%
+  set classes = [
+    'field',
+    'field-' ~ entity_type|clean_class ~ '--' ~ field_name_class,
+    'field-name-' ~ field_name_class,
+    'field-type-' ~ field_type|clean_class,
+    'field-label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+    'comment-wrapper',
+  ]
+%}
+{%
+  set title_classes = [
+    'title',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+<section{{ attributes.addClass(classes) }}>
   {% if comments and not label_hidden %}
     {{ title_prefix }}
-    <h2{{ title_attributes }}>{{ label }}</h2>
+    <h2{{ title_attributes.addClass(title_classes) }}>{{ label }}</h2>
     {{ title_suffix }}
   {% endif %}
 
   {{ comments }}
 
   {% if comment_form %}
-    <h2{{ content_attributes }}>{{ 'Add new comment'|t }}</h2>
+    <h2{{ content_attributes.addClass('title', 'comment-form__title') }}>{{ 'Add new comment'|t }}</h2>
     {{ comment_form }}
   {% endif %}
 

core/modules/entity_reference/src/Tests/EntityReferenceFormatterTest.php

@@ -172,7 +172,7 @@ public function testEntityFormatter() {
       </div>
 </div>
 ';
-    $expected_rendered_body_field_1 = '<div class="field field-entity-test--body field-name-body field-type-text field-label-above clearfix">
+    $expected_rendered_body_field_1 = '<div class="clearfix field field-entity-test--body field-name-body field-type-text field-label-above">
       <div class="field-label">Body</div>
     <div class="field-items">
           <div class="field-item"><p>Hello, world!</p></div>

core/modules/node/templates/field--node--created.html.twig

@@ -11,13 +11,27 @@
  * - items: List of all the field items. Each item contains:
  *   - attributes: List of HTML attributes for each item.
  *   - content: The field item content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
  *
  * @see field.html.twig
  *
  * @ingroup themeable
  */
 #}
-<span{{ attributes }}>
+{% set field_name_class = field_name|clean_class %}
+{%
+  set classes = [
+    'field',
+    'field-' ~ entity_type|clean_class ~ '--' ~ field_name_class,
+    'field-name-' ~ field_name_class,
+    'field-type-' ~ field_type|clean_class,
+    'field-label-' ~ label_display,
+  ]
+%}
+<span{{ attributes.addClass(classes) }}>
   {%- for item in items -%}
     {{ item.content }}
   {%- endfor -%}

core/modules/node/templates/field--node--title.html.twig

@@ -11,13 +11,27 @@
  * - items: List of all the field items. Each item contains:
  *   - attributes: List of HTML attributes for each item.
  *   - content: The field item content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
  *
  * @see field.html.twig
  *
  * @ingroup themeable
  */
 #}
-<span{{ attributes }}>
+{% set field_name_class = field_name|clean_class %}
+{%
+  set classes = [
+    'field',
+    'field-' ~ entity_type|clean_class ~ '--' ~ field_name_class,
+    'field-name-' ~ field_name_class,
+    'field-type-' ~ field_type|clean_class,
+    'field-label-' ~ label_display,
+  ]
+%}
+<span{{ attributes.addClass(classes) }}>
   {%- for item in items -%}
     {{ item.content }}
   {%- endfor -%}

core/modules/node/templates/field--node--uid.html.twig

@@ -11,13 +11,27 @@
  * - items: List of all the field items. Each item contains:
  *   - attributes: List of HTML attributes for each item.
  *   - content: The field item content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
  *
  * @see field.html.twig
  *
  * @ingroup themeable
  */
 #}
-<span{{ attributes }}>
+{% set field_name_class = field_name|clean_class %}
+{%
+  set classes = [
+    'field',
+    'field-' ~ entity_type|clean_class ~ '--' ~ field_name_class,
+    'field-name-' ~ field_name_class,
+    'field-type-' ~ field_type|clean_class,
+    'field-label-' ~ label_display,
+  ]
+%}
+<span{{ attributes.addClass(classes) }}>
   {%- for item in items -%}
     {{ item.content }}
   {%- endfor -%}

core/modules/system/templates/field.html.twig

@@ -24,15 +24,36 @@
  * - items: List of all the field items. Each item contains:
  *   - attributes: List of HTML attributes for each item.
  *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
  *
  * @see template_preprocess_field()
  *
  * @ingroup themeable
  */
 #}
-<div{{ attributes }}>
+{% set field_name_class = field_name|clean_class %}
+{%
+  set classes = [
+    'field',
+    'field-' ~ entity_type|clean_class ~ '--' ~ field_name_class,
+    'field-name-' ~ field_name_class,
+    'field-type-' ~ field_type|clean_class,
+    'field-label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field-label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
   {% if not label_hidden %}
-    <div{{ title_attributes.addClass('field-label') }}>{{ label }}</div>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
   {% endif %}
   <div{{ content_attributes.addClass('field-items') }}>
     {% for item in items %}

core/themes/bartik/bartik.theme

@@ -121,21 +121,6 @@ function bartik_preprocess_menu(&$variables) {
   $variables['attributes']['class'][] = 'clearfix';
 }
 
-/**
- * Implements hook_preprocess_HOOK() for field.html.twig.
- *
- * @see template_preprocess_field()
- */
-function bartik_preprocess_field(&$variables) {
-  $element = $variables['element'];
-  if ($element['#field_type'] == 'taxonomy_term_reference') {
-    $variables['title_attributes']['class'][] = 'field-label';
-    if ($variables['element']['#label_display'] == 'inline') {
-      $variables['title_attributes']['class'][] = 'inline';
-    }
-  }
-}
-
 /**
  * Helper function for handling the site name and slogan.
  */

core/themes/bartik/templates/field--taxonomy-term-reference.html.twig

@@ -12,14 +12,35 @@
  * - items: List of all the field items. Each item contains:
  *   - attributes: List of HTML attributes for each item.
  *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
  *
  * @see template_preprocess_field()
  * @see bartik_preprocess_field()
  */
 #}
-<div{{ attributes.addClass('clearfix') }}>
+{% set field_name_class = field_name|clean_class %}
+{%
+  set classes = [
+    'field',
+    'field-' ~ entity_type|clean_class ~ '--' ~ field_name_class,
+    'field-name-' ~ field_name_class,
+    'field-type-' ~ field_type|clean_class,
+    'field-label-' ~ label_display,
+    'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field-label',
+    label_display == 'inline' ? 'inline',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
   {% if not label_hidden %}
-    <h3{{ title_attributes }}>{{ label }}</h3>
+    <h3{{ title_attributes.addClass(title_classes) }}>{{ label }}</h3>
   {% endif %}
   <ul{{ content_attributes.addClass('links', 'field-items') }}>
     {% for item in items %}