Simplify the HTML of field.html.twig

Created on 7 September 2022, about 2 years ago
Updated 21 June 2024, 5 months ago

Problem/Motivation

The Drupal field template is quite verbose and can be hard to read. We start off checking for the label, then put in a conditional for if there are more than 1 field item (whether it's a multivalue field or not), then output certain divs depending on if the field has multiple values, then give an else version if not, and back to checking again about that label ... it gets tiresome.

Steps to reproduce

Open field.html.twig and see for yourself

Proposed resolution

Wouldn't it be great if we could simplify this to:

Be easier to read

  • Out the same markup, whether there is one item in my field or multiple (so we don't have different CSS/JS depending on how many values we output)
  • Have a conditional for styling differently if there is multiple (but this place as a modifier on the .field class, not as an additional .field__items class

Remaining tasks

Rewrite the field.html.twig template

User interface changes

None

API changes

None - my patch is against the starterkit_theme, but I'd like if we could (in D10) have this approach in our other themes too.

Data model changes

None

Release notes snippet

We have simplified the field.html.twig template. The only breaking change here is that we have a .field__items class wrapping the .field__item in all cases now, whether the field outputs multiple items or not. This is to make sure you can write the same CSS for single and multiple items. If you need to style something differently because it has multiple items, there is a .field--has-multiple-items modifier class at the .field level

This is based on a blog post I wrote called Simplified Drupal Field Template (but the same markup rendered)

✨ Feature request
Status

Needs work

Version

11.0 🔥

Component
Starterkit  →

Last updated about 1 month ago

No maintainer
Created by

🇮🇪Ireland markconroy

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • last update 8 months ago
    Custom Commands Failed
  • last update 8 months ago
    28,534 pass, 6 fail
  • Merge request !7416Simplify the HTML of field.html.twig → (Closed) created by kostask
  • Pipeline finished with Failed
    8 months ago
    Total: 1085s
    #142888
  • Pipeline finished with Failed
    8 months ago
    Total: 989s
    #143015
  • Pipeline finished with Failed
    8 months ago
    Total: 990s
    #143058
  • Pipeline finished with Failed
    7 months ago
    Total: 973s
    #143569
  • 🇮🇪Ireland markconroy

    At DrupalCon Prague we decided that field--has-multiple-items and field--has-single-item were not communicating the correct information. We need to communicate the field cardinality in the database. When a user sees has-multiple or has-single they will connect this information what is rendered. A multivalue field can have just one entry, but in the original patch it would get a has-multiple-items class.

    Just for clarity, the way field.html.twig currently works is that if it's a multivalue field - even if it only has one item in it - it gets the .field__items wrapper. If it has only one item, that item is wrapped in a div and if it has more than one item it uses ul.

    The class we are intending to add here field--multiple will denote that this is a multivalue field, not how many items are in the field.
    Perhaps we could add another class field--has-N-items to denote how many items we actually have.

    Suggestion for classes:

      'field--name-' ~ field_name|clean_class,
      'field--type-' ~ field_type|clean_class,
      'field--label-' ~ label_display,
      multiple ? 'field--multivalue-field' : 'field--single-value-field',
      multiple ? 'field--has' ~ items|length ~ 'items'|clean_class : 'field--has-1-item',
      label_display == 'inline' ? 'clearfix',
    

    Note: we will need to update the issue summary with new notes for the change record.

  • Pipeline finished with Failed
    5 months ago
    Total: 586s
    #204686
  • Pipeline finished with Failed
    5 months ago
    Total: 539s
    #204701
  • Pipeline finished with Failed
    5 months ago
    Total: 551s
    #209802
Production build 0.71.5 2024