Media Editor Modal: Reorder details fields so the editable regular layout fields appear at the top

packages/media-editor/src/components/media-form/index.tsx

@@ -6,15 +6,13 @@ import type { Form, Field } from '@wordpress/dataviews';
 import { Spinner, __experimentalVStack as VStack } from '@wordpress/components';
 import { VisuallyHidden } from '@wordpress/ui';
 import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
 import type { ReactNode } from 'react';
 
 /**
  * Internal dependencies
  */
 import { useMediaEditorContext } from '../media-editor-provider';
 import type { Media } from '../media-editor-provider';
-import SidebarDatetimeView from './sidebar-datetime-view';
 
 /**
  * Props for MediaForm component.
@@ -41,18 +39,6 @@ export default function MediaForm( {
 }: MediaFormProps ) {
 	const { media, fields, onChange } = useMediaEditorContext();
 
-	// Render readonly datetime fields compactly in the sidebar: date only,
-	// with the full datetime exposed on hover via Tooltip and `title`.
-	const formFields = useMemo(
-		() =>
-			fields.map( ( field: Field< Media > ) =>
-				field.type === 'datetime' && field.readOnly
-					? { ...field, render: SidebarDatetimeView }
-					: field
-			),
-		[ fields ]
-	);
-
 	if ( ! media || ! onChange ) {
 		return (
 			<div className="media-editor-form media-editor-form--loading">
@@ -61,18 +47,28 @@ export default function MediaForm( {
 		);
 	}
 
+	// Fields that use a regular (non-panel) layout, rendered at the top.
+	const regularFieldIds = [ 'title', 'alt_text', 'caption', 'description' ];
+
+	// Place the non-panel (regular layout) fields at the top of the array,
+	// with the remaining panel fields below.
+	const sortedFields = [
+		...fields.filter( ( field: Field< Media > ) =>
+			regularFieldIds.includes( field.id )
+		),
+		...fields.filter(
+			( field: Field< Media > ) => ! regularFieldIds.includes( field.id )
+		),
+	];
+
 	// Default form structure with panel layout
 	const defaultForm: Form = {
 		layout: {
 			type: 'panel',
 		},
-		fields: fields.map( ( field: Field< Media > ) => {
+		fields: sortedFields.map( ( field: Field< Media > ) => {
 			// Use regular layout for main editable fields
-			if (
-				[ 'title', 'alt_text', 'caption', 'description' ].includes(
-					field.id
-				)
-			) {
+			if ( regularFieldIds.includes( field.id ) ) {
 				return {
 					id: field.id,
 					layout: {
@@ -96,7 +92,7 @@ export default function MediaForm( {
 				{ header }
 				<DataForm
 					data={ media }
-					fields={ formFields }
+					fields={ fields }
 					form={ form }
 					onChange={ onChange }
 				/>

packages/media-editor/src/components/media-form/style.scss

@@ -0,0 +1,6 @@
+// Discourage an orphaned "am/pm" (or other single-word widow) when a read-only
+// value wraps in the narrow Details panel. Progressive enhancement: browsers
+// without `text-wrap: pretty` simply wrap normally.
+.media-editor-form .dataforms-layouts-panel__field-control {
+	text-wrap: pretty;
+}

packages/media-editor/src/style.scss

@@ -2,6 +2,7 @@
 @use "./components/media-preview/style.scss" as *;
 @use "./image-editor/style.scss" as *;
 @use "./components/media-editor/style.scss" as *;
+@use "./components/media-form/style.scss" as *;
 @use "./components/media-editor-modal/style.scss" as *;
 @use "./components/media-editor-canvas/style.scss" as *;
 @use "./components/media-editor-transform-controls/style.scss" as *;

packages/media-fields/src/date_added/index.tsx

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { getSettings } from '@wordpress/date';
 import type { Field } from '@wordpress/dataviews';
 
 /**
@@ -17,9 +16,6 @@ const dateAddedField: Partial< Field< MediaItem > > = {
 	filterBy: {
 		operators: [ 'before', 'after' ],
 	},
-	format: {
-		datetime: getSettings().formats.datetimeAbbreviated,
-	},
 	readOnly: true,
 };
 

packages/media-fields/src/date_modified/index.tsx

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { getSettings } from '@wordpress/date';
 import type { Field } from '@wordpress/dataviews';
 
 /**
@@ -17,9 +16,6 @@ const dateModifiedField: Partial< Field< MediaItem > > = {
 	filterBy: {
 		operators: [ 'before', 'after' ],
 	},
-	format: {
-		datetime: getSettings().formats.datetimeAbbreviated,
-	},
 	readOnly: true,
 };
 

packages/media-fields/src/filename/style.scss

@@ -1,14 +1,23 @@
-// CSS-based truncation (rather than `__experimentalTruncate`) so the full
-// filename stays in the DOM — keeps it available to assistive technology
-// reading the row, and lets the cell respond to column width changes.
-.dataviews-media-field__filename {
-	display: inline-block;
-	max-inline-size: 15ch;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	// Snap to the top of the line box so the cell aligns correctly in the
-	// DataViews Grid layout — without this the inline-block sits on the
-	// baseline and pushes the row out of alignment.
-	vertical-align: top;
+// Truncation is a DataViews layout concern, so it's scoped to the table/grid/
+// list containers. The same `FileNameView` render is also used in a DataForm
+// (e.g. the media editor modal Details panel) where there's room to show the
+// full name — outside these containers the filename is left to wrap naturally.
+//
+// CSS-based truncation (rather than `__experimentalTruncate`) keeps the full
+// filename in the DOM — available to assistive technology reading the row, and
+// lets the cell respond to column width changes.
+.dataviews-view-table,
+.dataviews-view-grid,
+.dataviews-view-list {
+	.dataviews-media-field__filename {
+		display: inline-block;
+		max-inline-size: 15ch;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		// Snap to the top of the line box so the cell aligns correctly in the
+		// DataViews Grid layout — without this the inline-block sits on the
+		// baseline and pushes the row out of alignment.
+		vertical-align: top;
+	}
 }

packages/media-fields/src/filename/view.tsx

@@ -37,11 +37,10 @@ export default function FileNameView( {
 		);
 	}
 
-	// The Tooltip exposes the full filename on hover when the cell is
-	// visually truncated by CSS (see `TRUNCATE_LENGTH` above). No extra AT
-	// plumbing is needed — the full filename is already in the DOM inside
-	// the `<span>`, so assistive technology reading the row gets the
-	// complete name.
+	// The full filename is always in the DOM, so assistive tech gets it
+	// regardless. The Tooltip aids mouse users where the cell visually clips
+	// (DataViews layouts); in a non-truncating context like the DataForm the
+	// name wraps in full, making it redundant but harmless.
 	return (
 		<Tooltip.Root>
 			<Tooltip.Trigger