Problem/Motivation
The markup that is produced for a field is having a serious case of divitis - Looking at the discussions and the principles we build the frontend on for twig, that is wrong(tm)
Single value fields
A single field gets wrapped into 3 divs that is making the field fugly to work with out of the box, we should follow the waypoints of theming in drupal8 that is start with a minimum then build on top of that if a theme needs it.
Proposed resolution
A field can be rendeded in 4 differnt variations:
single field
single field with label
multiple field
multiple field with label
For a single field we will combine it all into a one div wrapper:
<div class="field field--[modifiers] field__item">
foo
</div>With label we add a wrapper cause it make sense
<div class="field field--[modifiers] field--label-[mod]">
<div class="field__label">label</div>
<div class="field__item field__item--[modifiers]">foo</div>
</div>For the multiple fields with label we add in all the divs:
<div class="field field--[modifiers] field--label-[mod]">
<div class="field__label">label</div>
<div class="field__items">
<div class="field__item field__item--[modifiers]">foo</div>
<div class="field__item field__item--[modifiers]">bar</div>
</div>
</div>and for a multiple value field without a label we remove the unnecessary divs for wrappers
<div class="field field--[modifiers] field__items">
<div class="field__item field__item--[modifiers]">foo</div>
<div class="field__item field__item--[modifiers]">bar</div>
</div>field.twig template:
{%
set classes = [
'field',
'field--type-' ~ field_type|clean_class,
'field--name-' ~ field_name|clean_class,
'field--label-' ~ label_display,
]
%}
{#
The field template is divided into 4 different variations all depending
on how the field is configured.
We create 4 variations of the markup to prevent divits & make it easier to
modify later on
* Label & multiple fields
*
#}
{% if not label_hidden %}
{# The field have a label. #}
{% if multiple %}
{# Multiple items field with a label #}
<div{{ attributes.addClass(classes) }}>
<div{{ title_attributes.addClass('field__label') }}>{{ label }}:</div>
<div{{ content_attributes.addClass('field__items') }}>
{% for item in items %}
<div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
{% endfor %}
</div>
</div> {% else %}
{# Single item field with a label #}
<div{{ attributes.addClass(classes) }}>
<div{{ title_attributes.addClass('field__label') }}>{{ label }}:</div>
{% for item in items %}
<div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
{% endfor %}
<div>
{% endif %}
{% else %}
{# The field have no label. #}
{% if multiple %}
{# Multiple items field with no label #}
<div{{ attributes.addClass(classes).addClass('field__items') }}>
{% for item in items %}
<div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
{% endfor %}
</div>
{% else %}
{# single item field with no label #}
{% for item in items %}
<div{{ item.attributes.addClass(classes).addClass('field__item') }}>{{ item.content }}</div>
{% endfor %}
{% endif %}
{% endif %}
Remaining tasks
wait for theme_field to be removed #1987398: field.module - Convert theme_ functions to Twig
wait for theme_field__node__title #2231505: Convert theme_field__node__title() to Twig
User interface changes
none