@wordpress/media-fields 0.1.1-next.6deb34194.0

package/build-types/filename/view.d.ts

@@ -0,0 +1,7 @@
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+export default function FileNameView({ item, }: DataViewRenderFieldProps<MediaItem>): "" | import("react").JSX.Element;
+//# sourceMappingURL=view.d.ts.map

package/build-types/filename/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/filename/view.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AACrE;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAM1C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,IAAI,GACJ,EAAE,wBAAwB,CAAE,SAAS,CAAE,oCAiBvC"}

package/build-types/filesize/index.d.ts

@@ -0,0 +1,8 @@
+import type { Field } from '@wordpress/dataviews';
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+declare const filesizeField: Partial<Field<MediaItem>>;
+export default filesizeField;
+//# sourceMappingURL=index.d.ts.map

package/build-types/filesize/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/filesize/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAsE1C,QAAA,MAAM,aAAa,EAAE,OAAO,CAAE,KAAK,CAAE,SAAS,CAAE,CAc/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/build-types/index.d.ts

@@ -0,0 +1,10 @@
+export { default as altTextField } from './alt_text';
+export { default as captionField } from './caption';
+export { default as descriptionField } from './description';
+export { default as filenameField } from './filename';
+export { default as filesizeField } from './filesize';
+export { default as mediaDimensionsField } from './media_dimensions';
+export { default as mediaThumbnailField } from './media_thumbnail';
+export { default as mimeTypeField } from './mime_type';
+export type { MediaItem, MediaKind, MediaType, MediaItemUpdatable, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/build-types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,aAAa,CAAC;AAEvD,YAAY,EACX,SAAS,EACT,SAAS,EACT,SAAS,EACT,kBAAkB,GAClB,MAAM,SAAS,CAAC"}

package/build-types/media_dimensions/index.d.ts

@@ -0,0 +1,5 @@
+import type { Attachment, Updatable } from '@wordpress/core-data';
+import type { Field } from '@wordpress/dataviews';
+declare const mediaDimensionsField: Partial<Field<Updatable<Attachment>>>;
+export default mediaDimensionsField;
+//# sourceMappingURL=index.d.ts.map

package/build-types/media_dimensions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/media_dimensions/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD,QAAA,MAAM,oBAAoB,EAAE,OAAO,CAAE,KAAK,CAAE,SAAS,CAAE,UAAU,CAAE,CAAE,CAmBpE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/build-types/media_thumbnail/index.d.ts

@@ -0,0 +1,8 @@
+import type { Field } from '@wordpress/dataviews';
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+declare const mediaThumbnailField: Partial<Field<MediaItem>>;
+export default mediaThumbnailField;
+//# sourceMappingURL=index.d.ts.map

package/build-types/media_thumbnail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/media_thumbnail/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1C,QAAA,MAAM,mBAAmB,EAAE,OAAO,CAAE,KAAK,CAAE,SAAS,CAAE,CAOrD,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/build-types/media_thumbnail/view.d.ts

@@ -0,0 +1,4 @@
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+import type { MediaItem } from '../types';
+export default function MediaThumbnailView({ item, config, }: DataViewRenderFieldProps<MediaItem>): import("react").JSX.Element | null;
+//# sourceMappingURL=view.d.ts.map

package/build-types/media_thumbnail/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/media_thumbnail/view.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAKrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAE,EAC3C,IAAI,EACJ,MAAM,GACN,EAAE,wBAAwB,CAAE,SAAS,CAAE,sCAiFvC"}

package/build-types/mime_type/index.d.ts

@@ -0,0 +1,5 @@
+import type { Attachment, Updatable } from '@wordpress/core-data';
+import type { Field } from '@wordpress/dataviews';
+declare const mimeTypeField: Partial<Field<Updatable<Attachment>>>;
+export default mimeTypeField;
+//# sourceMappingURL=index.d.ts.map

package/build-types/mime_type/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/mime_type/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD,QAAA,MAAM,aAAa,EAAE,OAAO,CAAE,KAAK,CAAE,SAAS,CAAE,UAAU,CAAE,CAAE,CAS7D,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/build-types/stories/index.story.d.ts

@@ -0,0 +1,25 @@
+import { DataForm } from '@wordpress/dataviews';
+declare const _default: {
+    title: string;
+    component: typeof DataForm;
+};
+export default _default;
+export declare const DataFormsPreview: {
+    render: ({ type }: {
+        type: "regular" | "panel";
+    }) => import("react").JSX.Element;
+    argTypes: {
+        type: {
+            control: {
+                type: string;
+            };
+            description: string;
+            options: string[];
+        };
+    };
+    args: {
+        type: string;
+    };
+};
+export declare const DataViewsPreview: () => import("react").JSX.Element;
+//# sourceMappingURL=index.story.d.ts.map

package/build-types/stories/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAwB,MAAM,sBAAsB,CAAC;;;;;AAkBtE,wBAGE;AA8MF,eAAO,MAAM,gBAAgB;uBA1CU;QAAE,IAAI,EAAE,SAAS,GAAG,OAAO,CAAA;KAAE;;;;;;;;;;;;;CAsDnE,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCA4C5B,CAAC"}

package/build-types/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import type { Attachment, Updatable, Post } from '@wordpress/core-data';
+export type MediaKind = 'image' | 'video' | 'audio' | 'application';
+export interface MediaType {
+    type: MediaKind;
+    label: string;
+    icon: JSX.Element;
+}
+export interface MediaItem extends Attachment<'edit'> {
+    featured_media: number;
+    _embedded?: {
+        'wp:attached-to'?: Post[] | Partial<Post>[];
+    };
+}
+export type MediaItemUpdatable = Updatable<Attachment>;
+//# sourceMappingURL=types.d.ts.map

package/build-types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAExE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEpE,MAAM,WAAW,SAAS;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;CAClB;AAGD,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAE,MAAM,CAAE;IAEtD,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE;QAEX,gBAAgB,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,CAAE,IAAI,CAAE,EAAE,CAAC;KAC9C,CAAC;CACF;AAED,MAAM,MAAM,kBAAkB,GAAG,SAAS,CAAE,UAAU,CAAE,CAAC"}

package/build-types/utils/get-media-type-from-mime-type.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import type { MediaType } from '../types';
+/**
+ * Get the media type from a mime type, including an icon.
+ * TODO - media types should be formalized somewhere.
+ *
+ * References:
+ * https://developer.wordpress.org/reference/functions/wp_mime_type_icon/
+ * https://developer.wordpress.org/reference/hooks/mime_types/
+ * https://developer.wordpress.org/reference/functions/wp_get_mime_types/
+ *
+ * @param mimeType - The mime type to get the media type from.
+ * @return The media type.
+ */
+export declare function getMediaTypeFromMimeType(mimeType: string): MediaType;
+//# sourceMappingURL=get-media-type-from-mime-type.d.ts.map

package/build-types/utils/get-media-type-from-mime-type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-media-type-from-mime-type.d.ts","sourceRoot":"","sources":["../../src/utils/get-media-type-from-mime-type.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C;;;;;;;;;;;GAWG;AACH,wBAAgB,wBAAwB,CAAE,QAAQ,EAAE,MAAM,GAAI,SAAS,CA8BtE"}

package/build-types/utils/get-raw-content.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Utility function to extract raw content from either a string or an object
+ * containing raw and rendered properties.
+ *
+ * This handles the inconsistency in WordPress REST API responses where
+ * some fields like caption and description can be either:
+ * - A simple string
+ * - An object with { raw: string, rendered: string }
+ *
+ * @param content - The content to extract raw value from
+ * @return The raw content string, or empty string if content is falsy
+ */
+export declare function getRawContent(content: string | {
+    raw: string;
+    rendered: string;
+} | undefined | null): string;
+//# sourceMappingURL=get-raw-content.d.ts.map

package/build-types/utils/get-raw-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-raw-content.d.ts","sourceRoot":"","sources":["../../src/utils/get-raw-content.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAC5B,OAAO,EAAE,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,GAAG,IAAI,GACpE,MAAM,CAiBR"}

package/build-types/utils/get-rendered-content.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Utility function to extract rendered content from either a string or an object
+ * containing raw and rendered properties.
+ *
+ * This handles the inconsistency in WordPress REST API responses where
+ * some fields like caption and description can be either:
+ * - A simple string
+ * - An object with { raw: string, rendered: string }
+ *
+ * @param content - The content to extract raw value from
+ * @return The rendered content string, falling back to raw or empty string if content is falsy
+ */
+export declare function getRenderedContent(content: string | {
+    raw: string;
+    rendered: string;
+} | undefined | null): string;
+//# sourceMappingURL=get-rendered-content.d.ts.map

package/build-types/utils/get-rendered-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-rendered-content.d.ts","sourceRoot":"","sources":["../../src/utils/get-rendered-content.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CACjC,OAAO,EAAE,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,GAAG,IAAI,GACpE,MAAM,CAiBR"}

package/package.json

@@ -0,0 +1,61 @@
+{
+	"name": "@wordpress/media-fields",
+	"version": "0.1.1-next.6deb34194.0",
+	"description": "Reusable field definitions for displaying and editing media attachment properties in WordPress.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"media",
+		"fields",
+		"dataviews"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/media-fields/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/media-fields"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"exports": {
+		".": {
+			"types": "./build-types/index.d.ts",
+			"import": "./build-module/index.js",
+			"require": "./build/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"react-native": "src/index",
+	"types": "build-types",
+	"sideEffects": [
+		"build-style/**",
+		"src/**/*.scss"
+	],
+	"dependencies": {
+		"@wordpress/components": "^31.0.1-next.6deb34194.0",
+		"@wordpress/core-data": "^7.36.1-next.6deb34194.0",
+		"@wordpress/data": "^10.36.1-next.6deb34194.0",
+		"@wordpress/dataviews": "^11.1.1-next.6deb34194.0",
+		"@wordpress/element": "^6.36.1-next.6deb34194.0",
+		"@wordpress/i18n": "^6.9.1-next.6deb34194.0",
+		"@wordpress/icons": "^11.3.1-next.6deb34194.0",
+		"@wordpress/primitives": "^4.36.1-next.6deb34194.0",
+		"@wordpress/url": "^4.36.1-next.6deb34194.0"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"gitHead": "457096e9e9b3896d2d4fe54fc19d7fb571ee9a44"
+}

package/src/alt_text/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { TextareaControl } from '@wordpress/components';
+import type { Field } from '@wordpress/dataviews';
+import type { Attachment, Updatable } from '@wordpress/core-data';
+
+const altTextField: Partial< Field< Updatable< Attachment > > > = {
+	id: 'alt_text',
+	type: 'text',
+	label: __( 'Alt text' ),
+	isVisible: ( item ) => item?.media_type === 'image',
+	render: ( { item } ) => item?.alt_text || '-',
+	Edit: ( { field, onChange, data } ) => {
+		return (
+			<TextareaControl
+				label={ field.label }
+				value={ data.alt_text || '' }
+				onChange={ ( value ) => onChange( { alt_text: value } ) }
+				rows={ 2 }
+				__nextHasNoMarginBottom
+			/>
+		);
+	},
+	enableSorting: false,
+	filterBy: false,
+};
+
+export default altTextField;

package/src/caption/index.tsx

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { TextareaControl } from '@wordpress/components';
+import type { Attachment, Updatable } from '@wordpress/core-data';
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { getRawContent } from '../utils/get-raw-content';
+
+const captionField: Partial< Field< Updatable< Attachment > > > = {
+	id: 'caption',
+	type: 'text',
+	label: __( 'Caption' ),
+	getValue: ( { item } ) => getRawContent( item?.caption ),
+	render: ( { item } ) => getRawContent( item?.caption ) || '-',
+	Edit: ( { field, onChange, data } ) => {
+		return (
+			<TextareaControl
+				label={ field.label }
+				value={ getRawContent( data.caption ) || '' }
+				onChange={ ( value ) => onChange( { caption: value } ) }
+				rows={ 2 }
+				__nextHasNoMarginBottom
+			/>
+		);
+	},
+	enableSorting: false,
+	filterBy: false,
+};
+
+export default captionField;

package/src/description/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { TextareaControl } from '@wordpress/components';
+import type { Attachment, Updatable } from '@wordpress/core-data';
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { getRawContent } from '../utils/get-raw-content';
+
+const descriptionField: Partial< Field< Updatable< Attachment > > > = {
+	id: 'description',
+	type: 'text',
+	label: __( 'Description' ),
+	getValue: ( { item } ) => getRawContent( item?.description ),
+	render: ( { item } ) => (
+		<div>{ getRawContent( item?.description ) || '-' }</div>
+	),
+	Edit: ( { field, onChange, data } ) => {
+		return (
+			<TextareaControl
+				label={ field.label }
+				value={ getRawContent( data.description ) || '' }
+				onChange={ ( value ) => onChange( { description: value } ) }
+				rows={ 5 }
+				__nextHasNoMarginBottom
+			/>
+		);
+	},
+	enableSorting: false,
+	filterBy: false,
+};
+
+export default descriptionField;

package/src/filename/index.ts

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { getFilename } from '@wordpress/url';
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+import FileNameView from './view';
+
+const filenameField: Partial< Field< MediaItem > > = {
+	id: 'filename',
+	type: 'text',
+	label: __( 'File name' ),
+	getValue: ( { item }: { item: MediaItem } ) =>
+		getFilename( item?.source_url || '' ),
+	render: FileNameView,
+	enableSorting: false,
+	filterBy: false,
+	readOnly: true,
+};
+
+export default filenameField;

package/src/filename/view.tsx

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Tooltip,
+	__experimentalTruncate as Truncate,
+} from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import { getFilename } from '@wordpress/url';
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+
+// Hard-coded truncate length to match the available area in the media sidebar.
+// Longer file names will be truncated and wrapped in a tooltip showing the full name.
+const TRUNCATE_LENGTH = 15;
+
+export default function FileNameView( {
+	item,
+}: DataViewRenderFieldProps< MediaItem > ) {
+	const fileName = useMemo(
+		() => ( item?.source_url ? getFilename( item.source_url ) : null ),
+		[ item?.source_url ]
+	);
+
+	if ( ! fileName ) {
+		return '';
+	}
+
+	return fileName.length > TRUNCATE_LENGTH ? (
+		<Tooltip text={ fileName }>
+			<Truncate>{ fileName }</Truncate>
+		</Tooltip>
+	) : (
+		<>{ fileName }</>
+	);
+}

package/src/filesize/index.tsx

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf, _x } from '@wordpress/i18n';
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+
+const KB_IN_BYTES = 1024;
+const MB_IN_BYTES = 1024 * KB_IN_BYTES;
+const GB_IN_BYTES = 1024 * MB_IN_BYTES;
+const TB_IN_BYTES = 1024 * GB_IN_BYTES;
+const PB_IN_BYTES = 1024 * TB_IN_BYTES;
+const EB_IN_BYTES = 1024 * PB_IN_BYTES;
+const ZB_IN_BYTES = 1024 * EB_IN_BYTES;
+const YB_IN_BYTES = 1024 * ZB_IN_BYTES;
+
+function getBytesString(
+	bytes: number,
+	unitSymbol: string,
+	decimals = 2
+): string {
+	return sprintf(
+		// translators: 1: Actual bytes of a file. 2: The unit symbol (e.g. MB).
+		_x( '%1$s %2$s', 'file size' ),
+		bytes.toLocaleString( undefined, {
+			minimumFractionDigits: 0,
+			maximumFractionDigits: decimals,
+		} ),
+		unitSymbol
+	);
+}
+
+/**
+ * Converts bytes to a human-readable file size string with a specified number of decimal places.
+ *
+ * This logic is comparable to core's `size_format()` function.
+ *
+ * @param bytes    The size in bytes.
+ * @param decimals The number of decimal places to include in the result.
+ * @return         The human-readable file size string.
+ */
+function formatFileSize( bytes: number, decimals = 2 ): string {
+	if ( bytes === 0 ) {
+		return getBytesString( 0, _x( 'B', 'unit symbol' ), decimals );
+	}
+	const quant = {
+		/* translators: Unit symbol for yottabyte. */
+		[ _x( 'YB', 'unit symbol' ) ]: YB_IN_BYTES,
+		/* translators: Unit symbol for zettabyte. */
+		[ _x( 'ZB', 'unit symbol' ) ]: ZB_IN_BYTES,
+		/* translators: Unit symbol for exabyte. */
+		[ _x( 'EB', 'unit symbol' ) ]: EB_IN_BYTES,
+		/* translators: Unit symbol for petabyte. */
+		[ _x( 'PB', 'unit symbol' ) ]: PB_IN_BYTES,
+		/* translators: Unit symbol for terabyte. */
+		[ _x( 'TB', 'unit symbol' ) ]: TB_IN_BYTES,
+		/* translators: Unit symbol for gigabyte. */
+		[ _x( 'GB', 'unit symbol' ) ]: GB_IN_BYTES,
+		/* translators: Unit symbol for megabyte. */
+		[ _x( 'MB', 'unit symbol' ) ]: MB_IN_BYTES,
+		/* translators: Unit symbol for kilobyte. */
+		[ _x( 'KB', 'unit symbol' ) ]: KB_IN_BYTES,
+		/* translators: Unit symbol for byte. */
+		[ _x( 'B', 'unit symbol' ) ]: 1,
+	};
+
+	for ( const [ unit, mag ] of Object.entries( quant ) ) {
+		if ( bytes >= mag ) {
+			return getBytesString( bytes / mag, unit, decimals );
+		}
+	}
+
+	return ''; // Fallback in case no unit matches, though this should not happen.
+}
+
+const filesizeField: Partial< Field< MediaItem > > = {
+	id: 'filesize',
+	type: 'text',
+	label: __( 'File size' ),
+	getValue: ( { item }: { item: MediaItem } ) =>
+		item?.media_details?.filesize
+			? formatFileSize( item?.media_details?.filesize )
+			: '',
+	isVisible: ( item: MediaItem ) => {
+		return !! item?.media_details?.filesize;
+	},
+	enableSorting: false,
+	filterBy: false,
+	readOnly: true,
+};
+
+export default filesizeField;

package/src/index.ts

@@ -0,0 +1,15 @@
+export { default as altTextField } from './alt_text';
+export { default as captionField } from './caption';
+export { default as descriptionField } from './description';
+export { default as filenameField } from './filename';
+export { default as filesizeField } from './filesize';
+export { default as mediaDimensionsField } from './media_dimensions';
+export { default as mediaThumbnailField } from './media_thumbnail';
+export { default as mimeTypeField } from './mime_type';
+
+export type {
+	MediaItem,
+	MediaKind,
+	MediaType,
+	MediaItemUpdatable,
+} from './types';

package/src/media_dimensions/index.ts

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x, sprintf } from '@wordpress/i18n';
+import type { Attachment, Updatable } from '@wordpress/core-data';
+import type { Field } from '@wordpress/dataviews';
+
+const mediaDimensionsField: Partial< Field< Updatable< Attachment > > > = {
+	id: 'media_dimensions',
+	type: 'text',
+	label: __( 'Dimensions' ),
+	getValue: ( { item } ) =>
+		item?.media_details?.width && item?.media_details?.height
+			? sprintf(
+					// translators: 1: Width. 2: Height.
+					_x( '%1$s × %2$s', 'image dimensions' ),
+					item?.media_details?.width?.toString(),
+					item?.media_details?.height?.toString()
+			  )
+			: '',
+	isVisible: ( item ) => {
+		return !! ( item?.media_details?.width && item?.media_details?.height );
+	},
+	enableSorting: false,
+	filterBy: false,
+	readOnly: true,
+};
+
+export default mediaDimensionsField;

package/src/media_thumbnail/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+import MediaThumbnailView from './view';
+
+const mediaThumbnailField: Partial< Field< MediaItem > > = {
+	id: 'media_thumbnail',
+	type: 'media',
+	label: __( 'Thumbnail' ),
+	render: MediaThumbnailView,
+	enableSorting: false,
+	filterBy: false,
+};
+
+export default mediaThumbnailField;

package/src/media_thumbnail/style.scss

@@ -0,0 +1,49 @@
+@use "@wordpress/base-styles/mixins";
+@use "@wordpress/base-styles/colors";
+@use "@wordpress/base-styles/variables";
+
+.dataviews-media-field__media-thumbnail {
+	display: flex;
+	align-items: center;
+	position: relative;
+	height: 100%;
+}
+
+.dataviews-media-field__media-thumbnail--image {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.dataviews-media-field__media-thumbnail__stack {
+	color: colors.$gray-700;
+	box-sizing: border-box;
+	width: 100%;
+	height: 100%;
+}
+
+.dataviews-media-field__media-thumbnail--icon {
+	color: colors.$gray-700;
+	fill: currentColor;
+}
+
+.dataviews-media-field__media-thumbnail__filename {
+	box-sizing: border-box;
+	text-align: center;
+	padding: 0 variables.$grid-unit-20;
+	width: 100%;
+	container-type: inline-size;
+	@include mixins.body-small();
+
+	&__truncate {
+		// Use a top margin instead of gap on the parent, as the text will not
+		// always be rendered. This ensures the icon is vertically centered in all contexts.
+		margin-top: variables.$grid-unit-05;
+
+		// Hide filename when previews are very small, as rendered in list views.
+		@container (max-width: 90px) {
+			display: none !important;
+		}
+	}
+}