Remove title and wrapper div from item-list.html.twig

Created on 15 November 2012, about 12 years ago
Updated 29 January 2023, almost 2 years ago

Proposed commit message

Issue #1842140 by mdrummond, tonystar, gavin.hughes, killerpoke, lauriii, droweski, stevector, omg-its-maggie, jenlampton, Renee S: Remove title and wrapper div from theme_item_list.

Problem/Motivation

We are currently printing a title and wrapper div in item list templates. Templates really should be as concise and semantic as possible, and only print a div when it's really needed, the title should be a separate element. The class from the wrapper div can be moved to the ul/ol tag, and the CSS can be updated to match.

Proposed resolution

When we need a heading tag and/or a wrapper div, we should call theme_links instead. That theme function can then call theme('item_list') which will generate a nice clean list. When we only need a nice clean list, we can call this function directly.

Proposed code fo the item list template:

{% spaceless %}
  {%- if list_type == 'ul' -%}
    <ul{{ attributes }}>
  {%- else -%}
    <ol{{ attributes }}>
  {%- endif %}
    {%- for item in items -%}
      <li{{ item['#wrapper_attributes'] }}>{{ item }}</li>
    {%- endfor -%}
  {%- if list_type == 'ul' -%}
    </ul>
  {%- else -%}
    </ol>
  {%- endif %}
{% endspaceless %}

Remaining tasks

  • Remove the title from theme_links
  • Move the class from the wrapper div onto the ul itself, and delete the wrapper div
  • Update all CSS to reflect the new location of the class
<!-- See https://drupal.org/core-mentoring/novice-tasks for tips on identifying novice tasks. Delete or add "Novice" from the Novice? column in the table below as appropriate. Uncomment tasks as the issue advances. Update the Complete? column to indicate when they are done, and maybe reference the comment number where they were done. -->

User interface changes

None.

API changes

Call theme('links') when you need a wrapper div and/or a title.
Call theme(item_list) when you only need a list.

Related

📌 Replace links.html.twig with item-list--links.html.twig Needs work
#2032645: Replace calls to theme('item_list') with calls to theme('links') for links, when a heading or wrapper div is warranted
#891112: Replace theme_item_list()'s 'data' items with render elements
#1777326: Replace theme_links() with theme_item_list()
#1910996: Update theme_item_list to call theme_ol or theme_ul
#1980004: [meta] Creating Dream Markup

📌 Task
Status

Needs work

Version

10.1

Component
Theme 

Last updated about 9 hours ago

Created by

🇺🇸United States jenlampton

Live updates comments and jobs are added and updated live.
  • Needs screenshots

    The change alters the user interface, so before and after screenshots should be added to document the UI change. Make sure to capture the relevant region only. Use a tool such as Aviary on Windows or Skitch on Mac OS X.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Comments & Activities

Not all content is available!

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

Production build 0.71.5 2024