Media Editor Modal: Add custom datetime view for the sidebar to ensure minimal display of dates#78265
Merged
Conversation
…e minimal display of dates
andrewserong
added
[Feature] Media
|
Size Change: +118 B (0%) Total Size: 7.95 MB 📦 View Changed
ℹ️ View Unchanged
|
ramonjd
approved these changes
May 14, 2026
Member
ramonjd
left a comment
ramonjd
left a comment
There was a problem hiding this comment.
Tests well for me.
| Before | After |
|---|---|
 |
 |
🚀
Comment on lines
+46
to
+54
| const formFields = useMemo( | ||
| () => | ||
| fields.map( ( field: Field< Media > ) => | ||
| field.type === 'datetime' && field.readOnly | ||
| ? { ...field, render: SidebarDatetimeView } | ||
| : field | ||
| ), | ||
| [ fields ] | ||
| ); |
Member
There was a problem hiding this comment.
Makes sense to have an exception to @wordpress/media-fields date field if it's just for this context.
Contributor
Author
There was a problem hiding this comment.
Cheers! I figure this is the safest way to go about it. We can always look at a more complex change (or updating the fields themselves) if we find that we'd like this logic in other places, too.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Flaky tests detected in d56eda9. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25838611690
|
This was referenced May 14, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Part of:
In the experimental Media Editor Modal swap out datetime fields' rendering to use a compact form that just shows the date, with the full datetime available on hover.
Why?
Currently, the date added field has a tendency to wrap. Not always, but depending on the particular date and time it can extend just beyond the available room for it visually. To tidy this up, I thought we could try just showing the date, but revealing the full string on hover. This is similar to how it's dealt with in Github.
The reason I went with this approach is that I believe we want an opinionated rendering of datetime strings for this particular UI, rather than to change the fields themselves. This ensures that in the full media library or media upload modal, we continue to render the full datetime string, which is important when it comes to sorting data of many media items.
How?
SidebarDatetimeViewcomponentTesting Instructions
Screenshots or screencast
Media Editor Modal (simplified string with full string available on hover)
Media Upload Modal (still uses the full string)
Use of AI Tools
Claude Code