[andrewserong]

What?

Part of #72734

In the Media Editor Route experiment, add the file type and file size to the header. Also, truncate the Title when it runs on too long.

Why?

Overall, to continue polishing the header in the experiment.

This is an exploration into expanding how we use the header for this route. There are heaps of different ways we could use this header but these are the decisions I made while narrowing down to what I'm trying in this PR:

• When you load a media item in the media editor route, it should be very easy to see what the file type is
• However, we don't actually want to use the file name as the header for this screen, as WordPress prioritises the Title over the file name itself. After all the title is what's shown most prominently in the media library
• So, continue to use the Title in the header, but show the file type and file size right next to it as this is information that we'll likely want to be able to see prominently without digging through the Details tab

This PR doesn't solve other challenges like the placement of the undo/redo buttons, etc. But I'm keen to explore those sorts of things in follow-ups further down the track.

How?

• Attempt to re-use the filename field if available, and extract the file extension from it
• Grab the value of the filesize field
• If either field has a value, render these in the "Badges" area of the header, using a middle dot separator, which is a similar-ish kind of way of displaying extra info in the header to the block editor, but without actually lifting the block editor header's UI (which I feel isn't quite appropriate for the media editor)
• Adjust the CSS of the media editor to ensure the title can adequately truncate and shrink

As always with these sorts of PRs, this is a bit of an opinionated change. Happy to go with other iterations if there are better ideas!

Testing Instructions

1. Activate the Media Editor Route experiment:

2. Go to the media library and switch to its list view
3. Edit a media item
4. You should see the file type and file size in the header
5. Repeat for an item with a really long title and ensure it truncates appropriately across various viewport sizes
6. Repeat for a non-image media item (e.g. a PDF)

Screenshots or screencast

A normal length title in a screen size with lots of room:

A long title getting truncated on a screen size with not very much room:

Non-image media (in this case, a PDF):

Use of AI Tools

Claude Code (Opus 5.5)

[github-actions]

🤖 PR meta 🤖

🎉 Props

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

---

Props Bot commands

You can trigger Props Bot actions by commenting on this PR:

• @propsbot add <username> to give props to a GitHub user. Requires write access.
• @propsbot remove <username> to leave a user out of the props. Requires write access.
• @propsbot refresh to refresh this list. Adding the props-bot label works too.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: 0 B

Total Size: 8.58 MB

_{c85edcc Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	38dd79c	trunk	% Change
timeToFirstByte	33.4 ms +6.14% -2.54%	32.4 ms +7.56% -3.7%	3.09%
largestContentfulPaint	60 ms +6.67% -6.67%	56 ms +7.14% -3.57%	7.14%
lcpMinusTtfb	25.4 ms +14.57% -9.84%	23.6 ms +2.12% -8.47%	7.63%
wpBeforeTemplate	17.35 ms +8.41% -0.98%	17.05 ms +7.39% -2.4%	1.76%
wpTemplate	12.9 ms +3.1% -4.57%	12.29 ms +5.37% -2.85%	4.96%
wpTotal	30.59 ms +6.67% -3.47%	29.62 ms +7.63% -4.05%	3.27%
wpMemoryUsage	7.71 MB +0% -0%	7.67 MB +0% -0%	0.43%
wpDbQueries	16 +0% -0%	16 +0% -0%	0%

front-end-classic-theme

Metric	38dd79c	trunk	% Change
timeToFirstByte	24.45 ms +8.59% -1.02%	27.4 ms +4.56% -3.1%	-10.77%
largestContentfulPaint	56 ms +3.57% -0%	60 ms +6.67% -0%	-6.67%
lcpMinusTtfb	31.7 ms +0.79% -1.74%	34 ms +5.88% -2.06%	-6.76%
wpBeforeTemplate	15.23 ms +4.6% -0.98%	15.04 ms +3.92% -1.46%	1.26%
wpTemplate	7.12 ms +8.57% -3.93%	9.5 ms +9.47% -4%	-25.05%
wpTotal	22.29 ms +9.11% -1.35%	24.97 ms +5.29% -3.36%	-10.73%
wpMemoryUsage	6.28 MB +0% -0%	6.36 MB +0% -0%	-1.22%
wpDbQueries	9 +0% -0%	13 +0% -0%	-30.77%

media-processing

Metric	38dd79c	trunk	% Change
mediaProcessingJpeg	212.93 ms +2.32% -0.83%	211.62 ms +0.67% -0.44%	0.62%
mediaProcessingAvif	3451.34 ms +0.34% -0.03%	3462.3 ms +0.34% -0.35%	-0.32%
mediaProcessingJpegToAvif	2428.1 ms +0.13% -0.44%	2431.35 ms +0.11% -0.19%	-0.13%

media-upload

Metric	38dd79c	trunk	% Change
jpegUploadProcessing	1386.58 ms +1.29% -1.3%	1375.06 ms +1.26% -32.04%	0.84%
pngUploadProcessing	161.14 ms +4.34% -4.09%	169.11 ms +11.08% -2.31%	-4.71%
largeJpegUploadProcessing	1388.81 ms +0.2% -0.26%	1387.86 ms +0.28% -0.62%	0.07%
multipleImageUploadProcessing	1426.63 ms +0.54% -0.54%	1427.93 ms +0.27% -0.99%	-0.09%

post-editor

Metric	38dd79c	trunk	% Change
serverResponse	323.43 ms +5.54% -8.04%	309.86 ms +6.3% -6.48%	4.38%
firstPaint	272.73 ms +11.16% -2.12%	300.83 ms +2.43% -21.64%	-9.34%
domContentLoaded	699.51 ms +2.53% -2.58%	685.92 ms +1.34% -1.41%	1.98%
loaded	700.3 ms +2.55% -2.58%	686.72 ms +1.33% -1.42%	1.98%
firstContentfulPaint	408.38 ms +3.58% -2.91%	406.36 ms +3.38% -3.2%	0.5%
firstBlock	1758.89 ms +1.7% -1.94%	1737.54 ms +1.01% -0.58%	1.23%
type	17.04 ms +3.99% -12.15%	15.48 ms +4.97% -6.59%	10.08%
typeWithoutInspector	14.75 ms +2.37% -12.27%	15.8 ms +6.27% -7.72%	-6.65%
typeWithTopToolbar	19.39 ms +10.01% -7.89%	20.18 ms +5.3% -1.98%	-3.91%
typeContainer	6.85 ms +2.92% -1.61%	7.32 ms +7.38% -4.51%	-6.42%
focus	93.67 ms +3.61% -4.04%	90.97 ms +4.52% -1.92%	2.97%
firstFocus	201.35 ms +0% -0%	214.75 ms +0% -0%	-6.24%
selectAll	308.83 ms +3.39% -0.7%	316.66 ms +2.15% -2.65%	-2.47%
undo	24.54 ms +3.42% -4.93%	27.66 ms +1.55% -9.51%	-11.28%
listViewOpen	61.66 ms +9.54% -7.57%	64.63 ms +7.78% -9.08%	-4.6%
inserterOpen	32.44 ms +14.36% -4.01%	35.03 ms +2.17% -11.99%	-7.39%
inserterHover	9.63 ms +11.84% -5.82%	9.77 ms +4.2% -7.16%	-1.43%
inserterSearch	7.16 ms +6.98% -4.61%	7.13 ms +7.29% -5.75%	0.42%
loadPatterns	511.58 ms +2.08% -3.88%	516.24 ms +0.58% -2.64%	-0.9%
wpTotal	314.73 ms +5.28% -8.21%	301.11 ms +6.49% -6.62%	4.52%
wpMemoryUsage	14.75 MB +0% -0%	14.72 MB +0% -0%	0.23%
wpDbQueries	55 +0% -0%	55 +0% -0%	0%

site-editor

Metric	38dd79c	trunk	% Change
serverResponse	320.75 ms +1.72% -3.15%	303.43 ms +4.25% -6.2%	5.71%
firstPaint	317.21 ms +25.2% -19.65%	284.36 ms +17.27% -3.11%	11.55%
domContentLoaded	695.46 ms +2.21% -1.54%	677.4 ms +2.65% -1.49%	2.67%
loaded	696.17 ms +2.2% -1.54%	678.17 ms +2.64% -1.5%	2.65%
firstContentfulPaint	405.12 ms +3.06% -1.9%	391.18 ms +1.62% -1.52%	3.56%
firstBlock	1988.86 ms +2.91% -2.2%	1949.96 ms +1.73% -0.18%	1.99%
type	14.96 ms +2.81% -10.03%	14.57 ms +6.04% -5.83%	2.68%
navigate	96.2 ms +4.51% -3.84%	101.48 ms +1.11% -6.44%	-5.2%
loadPatterns	1020.88 ms +8.29% -5.3%	1013.11 ms +13.36% -5.4%	0.77%
loadPages	1011.06 ms +2.92% -1.22%	1019.92 ms +0.79% -1.82%	-0.87%
wpTotal	312.43 ms +1.74% -3.26%	295.11 ms +4.39% -6.36%	5.87%
wpMemoryUsage	12.77 MB +0% -0%	12.73 MB +0% -0%	0.27%
wpDbQueries	45 +0% -0%	45 +0% -0%	0%

_{c85edcc Run}

🏁 Flaky tests

Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

Undo restores the post selection when another synced entity is loaded in /test/e2e/specs/editor/collaboration/collaboration-undo-redo.spec.ts, passed after 1 failed attempt.

Error: expect(received).toMatchObject(expected)

- Expected  - 2
+ Received  + 2

  Object {
    "attributeKey": "content",
    "blockIndex": 0,
    "content": "abcdef",
-   "endOffset": 3,
-   "offset": 3,
+   "endOffset": 6,
+   "offset": 6,
  }

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/collaboration/collaboration-undo-redo.spec.ts:363:5

should place the caret at the click position when clicking a block that is not selected in /test/e2e/specs/editor/various/writing-flow.spec.js, passed after 1 failed attempt.

Error: expect(received).toMatchObject(expected)

- Expected  - 1
+ Received  + 1

@@ -1,9 +1,9 @@
  Array [
    Object {
      "attributes": Object {
-       "content": "First!",
+       "content": "First",
      },
      "name": "core/paragraph",
    },
    Object {
      "attributes": Object {

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/writing-flow.spec.js:952:41

_{c85edcc Run}

[ramonjd]

Nice change.

Approving in case you want to merge with a follow up for the restore case.

This is in an experiment so all good.

[ramonjd]

I think we need to check the active record for the title. From what I can tell, restoring a cropped image to the original doesn't restore the title here.

[ramonjd]

While testing I noticed that you cannot clear the title field. Not really sure what the best fix here is, it's confusing UX, but I get that it's a guard against empty titles. Trying an alternative here:

• Media editor: Validate attachment titles when editing #86219

[andrewserong]

Thanks @ramonjd!

Approving in case you want to merge with a follow up for the restore case.

I'll actually merge this PR as-is because I'm not too sure yet if for the route-based approach if we want to restore in place, or actually just re-route / navigate to the original instead. For the modal restore-in-place is the best way to do it, but for the route there could be other options.

So I'll merge, and have a play in follow-up(s).

Trying an alternative here:
#86219

Thanks for digging into that!

[andrewserong]

PR for trying out fixing up the restore original behaviour for the route-based media editor:

• Media Editor Route: Switch "Restore original" to "Edit original" for the route, and redirect #86281