Sort + View controls for Block Inserter → Media — For better usability with image series!

[porg]

Inserting an ordered image series is a usability horror in WordPress

• Polemically said: I don't want to play 5min Where's Waldo? each time when entering an image series, but instead want to perform an efficient from-to-selection within 5secs.
• Use cases & usability problems already fully described with screenshots & text in the following tickets
  • Original in 2021-10 had proposed for Gutenberg:

    35346

  • Then in 2022-12 as advised re-filed to WP Core: #57369 Insert Media dialog gets ad-hoc controls: Thumbnails squared/proportional + Sort order by date/name asc/desc
• But let's face it: WP Core moves slowly, especially with key widgets, which must be robust.
  • I now see an opportunity WITHIN Gutenberg, where a more rapid/agile improvement (MVP) is possible!

Block Inserter → Media → Images / Videos

• This is a standalone UI, independent from WP Core.
  • ✅ One aspect is better there: Original aspect ratio (full width, height varies)
  • ❌ The other needs are also not fulfilled there.

Proposal: Add ad-hoc sorting + view controls to the UI

• Decently in bottom bar (preferred)
• or more prominently integrated into top bar with search (alternative)

Controls

Sort — Options

• Title A-Z
• Title Z-A
• File A-Z
• File Z-A
• Path A-Z
• Path Z-A
• Modified ↑
• Modified ↓

Sort — Remarks

• MVP: "Title A-Z" in addition to "Modified"
• Notes on particular sort modes
  • Path: If you not only have a fully flat structure, but a clustering into /wp-content/uploads/YYYY-MM/or external-domain.com/animals/pets/cat.jpg, this sort mode can reflect that.
• Other ideas (for later, if the Media Library API provides the info)
  • Portrait → Landscape, Landscape → Portrait — To cluster by aspect ratio
  • Added ↑, Added ↓ — Another date sorting mode

Show

• No metadata
• Title
• Title…
• Tit…le
• …Title
• Filename
• Filename…
• File…name
• …Filename

Show — Remarks

• If metadata is shown, it is shown below the image in a caption style.
• The display modes without ellipsis show the full string, soft wrapped onto multiple lines (to support long file names)
• The display modes with the ellipsis on start mid end shows the string at max 1-2 lines (to be decided) and otherwise places an ellipsis accordingly. Start and end: I know for sure CSS supports this. Mid: Not sure if CSS can do this. If it requires JS and gets to complex, then skip it from the MVP.

[Mamaduka]

Maybe the same or similar design for filtering UI from #53033 could also be used here.