Simplify the HTML of field.html.twig

Created on 7 September 2022, over 2 years ago
Updated 10 April 2024, 9 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 11 days 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 9 months ago
    Custom Commands Failed
  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update 9 months ago
    28,534 pass, 6 fail
  • Merge request !7416Simplify the HTML of field.html.twig → (Closed) created by kostask
  • Pipeline finished with Failed
    9 months ago
    Total: 1085s
    #142888
  • Pipeline finished with Failed
    9 months ago
    Total: 989s
    #143015
  • Pipeline finished with Failed
    9 months ago
    Total: 990s
    #143058
  • Pipeline finished with Failed
    9 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
    6 months ago
    Total: 586s
    #204686
  • Pipeline finished with Failed
    6 months ago
    Total: 539s
    #204701
  • Pipeline finished with Failed
    6 months ago
    Total: 551s
    #209802
  • 🇬🇷Greece bserem

    bserem changed the visibility of the branch 3308309-simplify-the-html to hidden.

  • Pipeline finished with Failed
    16 days ago
    Total: 635s
    #364440
  • 🇬🇷Greece bserem

    LB related tests fixed, working on CKEditor ones (the ones we haven't solved in years)

    In the meanwhile, I don't really like the naming conventions and some of the classes that we are introducing here

    - field--multivalue-field -> field--multiple-value-field, or field--multiple which is what already exists in Core
    - field--single-value-field -> as is, or field--single which is what already exists Core
    - field--has-multiple-items
    - field--has-single-item -> field--has-one-item
    - field--items-count-X -> is this really needed? Do we care about something like that or do we just pollute the DOM?

  • Pipeline finished with Failed
    16 days ago
    Total: 449s
    #364494
  • 🇬🇷Greece bserem

    PS, `field_items` class is introduced to single value fields with the work on the branch. Thinking about it too

  • Pipeline finished with Failed
    16 days ago
    Total: 454s
    #364604
  • 🇬🇷Greece vensires

    Since it's a long standing issue I also add the "Needs Review Queue Initiative" tag for others to check the solution provided too.

  • 🇺🇸United States smustgrave

    Before reviewing think this needs a rebase, 600+ commits

    Will need some screenshots during testing to make sure nothing has broke.

    The tests that had to be updated to pass, surprised they are using starterkit_theme maybe follow ups are needed to correct that.

  • 🇬🇷Greece vensires

    I went on with the rebase of the commits. I think the tests do need a check from someone who knows what he's doing + also check what @smustgrave said about the use of the starterkit_theme.

  • 🇬🇷Greece bserem

    I believe we need to change the target branch to 11.1 or something. The commits are awfully wrong in Gitlab after the rebase.
    It's been less than 10 commits, we are seeing things already merged in Core.

Production build 0.71.5 2024