Problem/Motivation

The css/theme/media-library.css file contains the following lines.

/**
 * @todo Use a class instead of the li element.
 *   @see https://www.drupal.org/project/drupal/issues/3029227
 */
.media-library-menu li {
  display: block;
  padding: 0;
  list-style: none;
}

Proposed resolution

  • Use a CSS class for .media-library-menu li
  • Update template files and hook implementations to use the new class
  • Remove the @todo note

Steps to check the Merge request

  • Create a new content type with a Media field; the field needs to accept more than a single media type
  • Create a new node using that content type; the media-library-menu__item class is added to the vertical tabs in the dialog box that allows to add media to the created node
CommentFileSizeAuthor
#14 Screenshot from 2025-11-06 16-05-48.png216.66 KBsantanu mondal

Issue fork seven-3546836

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

avpaderno created an issue. See original summary.

sourabhsisodia_’s picture

sourabhsisodia_ commented
Assigned: Unassigned » sourabhsisodia_
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Assigned: sourabhsisodia_ » Unassigned

I am resetting the Assigned field, since the assigned person has not posted any update in the past 10 days.

santanu mondal’s picture

santanu mondal commented

@avpaderno
✅ Tested on Drupal 10.2 with Seven and Claro.
The li and a elements already have the expected classes:

media-library-menu__item

media-library-menu__link
I was unable to reproduce the issue.
It seems resolved — possibly can be closed or marked as fixed.

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented

Assuming that .media-library-menu li is supposed to be replaced by media-library-menu__item, the issue is not yet resolved, since:

I am not convinced the assumption is correct, though.

santanu mondal’s picture

santanu mondal commented

Working On It.

santanu mondal opened merge request !226

santanu mondal’s picture

santanu mondal commented

Hi @avpaderno I have update this please check.

santanu mondal’s picture

santanu mondal commented
Status: Active » Needs review
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Issue summary: View changes
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented

Reading #3029227: Allow setting attributes to li element from render array for links.html.twig, I cannot understand on which page the CSS selector changed in this merge request appears. That issue is referenced by #3020716: Add vertical tabs style menu to media library, which could give an hint about which page should be checked, but I am not able to understand that.

santanu mondal’s picture

santanu mondal commented

“The .media-library-menu__item class appears in the Media Library modal when adding or selecting media in a content form (e.g., Article → Image field using Media Library widget).
The tabs at the top of the modal (Document, Image, Video, Remote video) are

  • elements with this class.
    Example screenshot attached or see inspect element in the modal.”
    • avpaderno’s picture

    avpaderno
    he/him
    Primary language Italian
    Location Brescia, 🇮🇹 🇪🇺
    commented
    Status: Needs review » Needs work
    Issue tags: +Needs screenshots

    I guess screenshots showing the page and the markup used in that page are necessary. On the dialog box used to select a media from the media library, I cannot see any class whose name starts with media-library-menu. There are many classes whose name starts with media-library-item.

    santanu mondal’s picture

    santanu mondal commented
    StatusFileSize
    new Screenshot from 2025-11-06 16-05-48.png216.66 KB

    error
    i am talking about the UL class="js-media-library-menu media-library-menu" and
    li with class="media-library-menu-document media-library-menu__item"

    avpaderno’s picture

    avpaderno
    he/him
    Primary language Italian
    Location Brescia, 🇮🇹 🇪🇺
    commented
    Issue tags: -Needs screenshots +Needs issue summary update

    Thank you!

    I will update the issue summary to make clear how to find that page. It requires a content type where the media is added via the media library, where more than a media type is allowed. I enabled a single media type, and that is why I was not seeing any element using that CSS selector.

    I can confirm the changes in the merge request are correct. I did not change status, since I need to update the issue summary.

    avpaderno’s picture

    avpaderno
    he/him
    Primary language Italian
    Location Brescia, 🇮🇹 🇪🇺
    commented
    Issue summary: View changes
    Status: Needs work » Reviewed & tested by the community
    avpaderno’s picture

    avpaderno
    he/him
    Primary language Italian
    Location Brescia, 🇮🇹 🇪🇺
    commented
    Issue tags: -Needs issue summary update

    avpaderno’s picture

    avpaderno
    he/him
    Primary language Italian
    Location Brescia, 🇮🇹 🇪🇺
    commented
    Status: Reviewed & tested by the community » Fixed

    Now that this issue is closed, review the contribution record.

    As a contributor, attribute any organization that helped you, or if you volunteered your own time.

    Maintainers, credit people who helped resolve this issue.

    Status: Fixed » Closed (fixed)

    Automatically closed - issue fixed for 2 weeks with no activity.