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; }