diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 303db67..3abfe99 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1990,17 +1990,15 @@ function template_preprocess_field(&$variables, $hook) {
// Add default CSS classes. Since there can be many fields rendered on a page,
// save some overhead by calling strtr() directly instead of
- // drupal_html_class().
- $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'],
- );
+ $variables['field_name'] = strtr($element['#field_name'], '_', '-');
+ $variables['field_type'] = strtr($element['#field_type'], '_', '-');
+ $variables['field_label'] = strtr($element['#label_display'], '_', '-');
+
+ // Are there multiple field items.
+ $variables['multiple'] = FALSE;
+ if (isset($element['#items']) && is_callable($element['#items']->getFieldDefinition(), 'isMultiple')) {
+ $variables['multiple'] = $element['#items']->getFieldDefinition()->isMultiple();
+ }
// 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.
@@ -2018,6 +2016,19 @@ function template_preprocess_field(&$variables, $hook) {
$default_attributes = new Attribute;
}
+ // Merge the attributes when its a multiple fields with hidden label
+ if ($element['#label_display'] == 'hidden' && $variables['multiple']) {
+ $variables['attributes'] = NestedArray::mergeDeep($variables['attributes'], $variables['content_attributes']);
+ }
+ // Merge the attributes when its a single field with a label
+ if ($element['#label_display'] != 'hidden' && !$variables['multiple']) {
+ $variables['content_attributes'] = NestedArray::mergeDeep($variables['content_attributes'], (array) $element['#items'][0]->_attributes);
+ }
+ // Merge the attributes when its a single field with hidden label
+ if ($element['#label_display'] == 'hidden' && !$variables['multiple']) {
+ $variables['attributes'] = NestedArray::mergeDeep($variables['attributes'], $variables['content_attributes'], (array) $element['#items'][0]->_attributes);
+ }
+
// We want other preprocess functions and the theme implementation to have
// fast access to the field item render arrays. The item render array keys
// (deltas) should always be numerically indexed starting from 0, and looping
diff --git a/core/lib/Drupal/Core/Field/WidgetBase.php b/core/lib/Drupal/Core/Field/WidgetBase.php
index 7b36c56..3478088 100644
--- a/core/lib/Drupal/Core/Field/WidgetBase.php
+++ b/core/lib/Drupal/Core/Field/WidgetBase.php
@@ -126,9 +126,9 @@ public function form(FieldItemListInterface $items, array &$form, FormStateInter
'#parents' => array_merge($parents, array($field_name . '_wrapper')),
'#attributes' => array(
'class' => array(
- 'field-type-' . drupal_html_class($this->fieldDefinition->getType()),
- 'field-name-' . drupal_html_class($field_name),
- 'field-widget-' . drupal_html_class($this->getPluginId()),
+ 'field--type-' . drupal_html_class($this->fieldDefinition->getType()),
+ 'field--name-' . drupal_html_class($field_name),
+ 'field--widget-' . drupal_html_class($this->getPluginId()),
),
),
'widget' => $elements,
diff --git a/core/modules/field_ui/src/FieldOverview.php b/core/modules/field_ui/src/FieldOverview.php
index 838c116..988e8f4 100644
--- a/core/modules/field_ui/src/FieldOverview.php
+++ b/core/modules/field_ui/src/FieldOverview.php
@@ -204,7 +204,7 @@ public function buildForm(array $form, FormStateInterface $form_state, $entity_t
'#options' => $field_type_options,
'#empty_option' => $this->t('- Select a field type -'),
'#description' => $this->t('Type of data to store.'),
- '#attributes' => array('class' => array('field-type-select')),
+ '#attributes' => array('class' => array('field-type--select')),
'#cell_attributes' => array('colspan' => 2),
'#prefix' => '
',
),
diff --git a/core/modules/image/src/Tests/ImageFieldDisplayTest.php b/core/modules/image/src/Tests/ImageFieldDisplayTest.php
index c49af3c..7344833 100644
--- a/core/modules/image/src/Tests/ImageFieldDisplayTest.php
+++ b/core/modules/image/src/Tests/ImageFieldDisplayTest.php
@@ -276,7 +276,7 @@ function testImageFieldDefaultImage() {
$this->drupalGet('node/' . $node->id());
// Verify that no image is displayed on the page by checking for the class
// that would be used on the image field.
- $this->assertNoPattern('', 'No image displayed when no image is attached and no default image specified.');
+ $this->assertNoPattern('
', 'No image displayed when no image is attached and no default image specified.');
$cache_tags_header = $this->drupalGetHeader('X-Drupal-Cache-Tags');
$this->assertTrue(!preg_match('/ image_style\:/', $cache_tags_header), 'No image style cache tag found.');
diff --git a/core/modules/search/src/Tests/SearchExcerptTest.php b/core/modules/search/src/Tests/SearchExcerptTest.php
index 6bea2cb..0e1ee07 100644
--- a/core/modules/search/src/Tests/SearchExcerptTest.php
+++ b/core/modules/search/src/Tests/SearchExcerptTest.php
@@ -69,7 +69,7 @@ function testSearchExcerpt() {
// The node body that will produce this rendered $text is:
// 123456789 HTMLTest +123456789+‘ +‘ +‘ +‘ +12345678 +‘ +‘ +‘ ‘
- $text = "
123456789 HTMLTest +123456789+‘ +‘ +‘ +‘ +12345678 +‘ +‘ +‘ ‘
\n
";
+ $text = "
123456789 HTMLTest +123456789+‘ +‘ +‘ +‘ +12345678 +‘ +‘ +‘ ‘
\n
";
$result = search_excerpt('HTMLTest', $text);
$this->assertFalse(empty($result), 'Rendered Multi-byte HTML encodings are not corrupted in search excerpts');
}
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index 2cc44e7..036c322 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -588,21 +588,22 @@ table tr.error {
.messages--error p.error {
color: #a51b00;
}
-
+
/* Field display */
-.field .field-label {
+.field__label {
font-weight: bold;
+ vertical-align: top;
}
-.field-label-inline .field-label,
-.field-label-inline .field-items {
- float:left; /*LTR*/
- margin-right: 0.5em; /*LTR*/
+.field--label-inline .field__label,
+.field--label-inline > .field__item,
+.field--label-inline .field__items {
+ display: inline-block;
+ padding-right: 0.5em;
}
-[dir="rtl"] .field-label-inline .field-label,
-[dir="rtl"] .field-label-inline .field-items {
- float: right;
- margin-left: 0.5em;
- margin-right: 0;
+[dir="rtl"] .field--label-inline .field__label,
+[dir="rtl"] .field--label-inline .field__items {
+ padding-left: 0.5em;
+ padding-right: 0;
}
.field-label-inline .field-label::after {
content: ':';
diff --git a/core/modules/system/templates/field.html.twig b/core/modules/system/templates/field.html.twig
index 04fd875..610009e 100644
--- a/core/modules/system/templates/field.html.twig
+++ b/core/modules/system/templates/field.html.twig
@@ -24,19 +24,40 @@
* - items: List of all the field items. Each item contains:
* - attributes: List of HTML attributes for each item.
* - content: The field item's content.
+ * - field_type: @todo: needs description
+ * - field_name: @todo: needs description
+ * - field_label: @todo: needs description
*
* @see template_preprocess_field()
*
* @ingroup themeable
*/
#}
-
- {% if not label_hidden %}
-
{{ label }}
- {% endif %}
-
+{% if multiple and not label_hidden %}
+
+
{{ label }}:
+
+ {% for item in items %}
+
{{ item }}
+ {% endfor %}
+
+
+
+{% elseif multiple and label_hidden %}
+ {% for item in items %}
+
{{ item }}
+ {% endfor %}
+{% elseif not multiple and not label_hidden %}
+
+
{{ label }}:
+ {% for item in items %}
+
{{ item }}
+ {% endfor %}
+
+{% elseif not multiple and label_hidden %}
+
{% for item in items %}
-
{{ item.content }}
+
{{ item.content }}
{% endfor %}
-
+{% endif %}
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index c55134d..dc88424 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -142,7 +142,7 @@ ul.contextual-links,
ul.links,
ul.primary,
.pager__items,
-div.field-type-taxonomy-term-reference,
+.field--type-taxonomy-term-reference,
div.messages,
.node__meta,
p.comment-time,
@@ -784,46 +784,45 @@ h1#page-title {
color: #68696b;
margin-bottom: -5px;
}
-.node__meta .field-name-field-user-picture img {
+.submitted .field--name-field-user-picture img {
float: left; /* LTR */
margin: 1px 20px 0 0; /* LTR */
}
-[dir="rtl"] .node__meta .field-name-field-user-picture img {
- float: right;
+[dir="rtl"] .submitted .field--name-field-user-picture img {
margin-left: 20px;
margin-right: 0;
}
-.field-type-taxonomy-term-reference {
+.field--type-taxonomy-term-reference {
margin: 0 0 1.2em;
}
-.field-type-taxonomy-term-reference .field-label {
+.field--type-taxonomy-term-reference .field__label {
font-weight: normal;
margin: 0;
padding-right: 5px; /* LTR */
}
-[dir="rtl"] .field-type-taxonomy-term-reference .field-label {
+[dir="rtl"] .field--type-taxonomy-term-reference .field__label {
padding-left: 5px;
padding-right: 0;
}
-.field-type-taxonomy-term-reference .field-label,
-.field-type-taxonomy-term-reference ul.links {
+.field--type-taxonomy-term-reference .field__label,
+.field--type-taxonomy-term-reference ul.links {
font-size: 0.8em;
}
-.node--view-mode-teaser .field-type-taxonomy-term-reference .field-label,
-.node--view-mode-teaser .field-type-taxonomy-term-reference ul.links {
+.view-mode-teaser .field--type-taxonomy-term-reference .field__label,
+.view-mode-teaser .field--type-taxonomy-term-reference ul.links {
font-size: 0.821em;
}
-.field-type-taxonomy-term-reference ul.links {
+.field--type-taxonomy-term-reference ul.links {
padding: 0;
margin: 0;
list-style: none;
}
-.field-type-taxonomy-term-reference ul.links li {
+.field--type-taxonomy-term-reference ul.links li {
float: left; /* LTR */
padding: 0 1em 0 0; /* LTR */
white-space: nowrap;
}
-[dir="rtl"] .field-type-taxonomy-term-reference ul.links li {
+[dir="rtl"] .field--type-taxonomy-term-reference ul.links li {
padding: 0 0 0 1em;
float: right;
}
@@ -835,8 +834,8 @@ h1#page-title {
margin-right: 236px;
margin-left: 0;
}
-.field-type-image img,
-.field-name-field-user-picture img {
+.field--type-image img,
+.field--name-field-user-picture img {
margin: 0 0 1em;
}
ul.links {
@@ -919,10 +918,10 @@ ul.links {
.comment h2.title {
margin-bottom: 1em;
}
-.comment .field-name-field-user-picture img {
+.comment .field--name-field-user-picture img {
margin-left: 0; /* LTR */
}
-[dir="rtl"] .comment .field-name-field-user-picture img {
+[dir="rtl"] .comment .field--name-field-user-picture img {
margin-right: 0;
}
.comment {
@@ -1384,7 +1383,7 @@ div.messages,
/* -------------- User Profile -------------- */
-.profile .field-name-field-user-picture {
+.profile .field--name-field-user-picture {
float: none;
}