Try: add icons to media type dropdowns

[adamsilverstein]

Description

The new Customizable Select API enables HTML select elements that can include images to make select elements more helpful for users.

This PR uses this new feature to add icons next to the media type dropdown in the media library.

Screenshots

Before PR

Before this PR, the media filter looks like this:

Grid view

List view

After PR

Grid view

List view

Notes

• Uses existing core dashicons for all images.
• Non-supporting browsers show the standard select element, ignoring the icons.
• Still works exactly like a regular select element
• I only added minimal styling, we probably want to have the background match other dropdowns.
• Issue: after selecting a filter, the selected item shown at the top does not include the icon, possibly because we are manually setting this value?
  

Trac ticket: None: this is an experiment so far.

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[adamsilverstein]

@argyleink any tips on showing the icon in the selected element at the top, do I need to handle that manually? (see note in PR description & screenshots)

[argyleink]

I got you: codepen doing exactly what you want

1. add some HTML for the selected option inside the select:

  <button>
    <selectedcontent></selectedcontent>
  </button>

2. style that selectedcontent element how you like:

    selectedcontent {
      display: flex;
      align-items: center;
      gap: .5ch;
    }

you can also use this technique to have the selected state only show the icon

[adamsilverstein]

I got you: codepen doing exactly what you want

Excellent, thank you! I suspected I was missing something.