Try: a generic Edit config for media

packages/dataviews/src/dataform-controls/index.tsx

@@ -24,6 +24,7 @@ import toggleGroup from './toggle-group';
 import array from './array';
 import color from './color';
 import password from './password';
+import media from './media';
 import hasElements from '../field-types/utils/has-elements';
 
 interface FormControls {
@@ -40,6 +41,7 @@ const FORM_CONTROLS: FormControls = {
 	telephone,
 	url,
 	integer,
+	media,
 	number,
 	password,
 	radio,

packages/dataviews/src/dataform-controls/media.tsx

@@ -0,0 +1,51 @@
+/**
+ * Internal dependencies
+ */
+import type {
+	DataFormControlProps,
+	DataFormControlConfigMedia,
+	View,
+} from '../types';
+import DataViewsPicker from '../components/dataviews-picker';
+import { LAYOUT_PICKER_GRID, LAYOUT_PICKER_TABLE } from '../constants';
+
+const EMPTY_ARRAY: string[] = [];
+const NOOP = () => {};
+
+export default function Media< Item >( {
+	config,
+}: DataFormControlProps< Item > ) {
+	const mediaConfig = config as DataFormControlConfigMedia;
+	const {
+		view,
+		onChangeView,
+		fields,
+		data,
+		actions,
+		selection = EMPTY_ARRAY,
+		onChangeSelection = NOOP,
+		paginationInfo,
+		isLoading,
+		getItemId,
+	} = mediaConfig;
+
+	return (
+		<DataViewsPicker
+			getItemId={ getItemId }
+			actions={ actions }
+			selection={ selection }
+			onChangeSelection={ onChangeSelection }
+			paginationInfo={ paginationInfo }
+			data={ data }
+			isLoading={ isLoading }
+			fields={ fields }
+			view={ view as View }
+			onChangeView={ onChangeView as ( view: View ) => void }
+			itemListLabel="Media"
+			defaultLayouts={ {
+				[ LAYOUT_PICKER_GRID ]: {},
+				[ LAYOUT_PICKER_TABLE ]: { perPage: 20 },
+			} }
+		/>
+	);
+}

packages/dataviews/src/dataform-controls/text.tsx

@@ -6,7 +6,7 @@ import { createElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { DataFormControlProps } from '../types';
+import type { DataFormControlProps, DataFormControlConfigText } from '../types';
 import ValidatedText from './utils/validated-input';
 
 export default function Text< Item >( {
@@ -17,7 +17,7 @@ export default function Text< Item >( {
 	config,
 	validity,
 }: DataFormControlProps< Item > ) {
-	const { prefix, suffix } = config || {};
+	const { prefix, suffix } = ( config as DataFormControlConfigText ) || {};
 
 	return (
 		<ValidatedText

packages/dataviews/src/dataform-controls/textarea.tsx

@@ -7,7 +7,7 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { DataFormControlProps } from '../types';
+import type { DataFormControlProps, DataFormControlConfigText } from '../types';
 import { unlock } from '../lock-unlock';
 import getCustomValidity from './utils/get-custom-validity';
 
@@ -21,7 +21,7 @@ export default function Textarea< Item >( {
 	config,
 	validity,
 }: DataFormControlProps< Item > ) {
-	const { rows = 4 } = config || {};
+	const { rows = 4 } = ( config as DataFormControlConfigText ) || {};
 	const { label, placeholder, description, setValue, isValid } = field;
 	const value = field.getValue( { item: data } );
 

packages/dataviews/src/field-types/media.tsx

@@ -6,7 +6,7 @@ import type { FieldType } from '../types/private';
 export default {
 	type: 'media',
 	render: () => null,
-	Edit: null,
+	Edit: 'media',
 	sort: () => 0,
 	isValid: {
 		elements: true,

packages/dataviews/src/stories/field-types.story.tsx

@@ -116,6 +116,7 @@ type DataType = {
 	password: string;
 	passwordWithElements: string;
 	media: string;
+	mediaName: string;
 	mediaWithElements: string;
 	array: string[];
 	arrayWithElements: string[];
@@ -156,6 +157,7 @@ const data: DataType[] = [
 		password: 'secretpassword123',
 		passwordWithElements: 'secretpassword123',
 		media: 'https://live.staticflickr.com/7398/9458193857_e1256123e3_z.jpg',
+		mediaName: 'Image name',
 		mediaWithElements:
 			'https://live.staticflickr.com/7398/9458193857_e1256123e3_z.jpg',
 		array: [ 'item1', 'item2', 'item3' ],
@@ -410,11 +412,211 @@ const fields: Field< DataType >[] = [
 			{ value: 'userpass789', label: 'User Password' },
 		],
 	},
+	{
+		id: 'mediaName',
+		type: 'text',
+		label: 'Media Name',
+	},
 	{
 		id: 'media',
 		type: 'media',
 		label: 'Media',
 		description: 'Help for media.',
+		Edit: {
+			control: 'media',
+			view: {
+				type: 'pickerGrid',
+				fields: [],
+				titleField: 'title',
+				mediaField: 'image',
+				search: '',
+				page: 1,
+				perPage: 10,
+				filters: [],
+			},
+			onChangeView: () => {},
+			fields: [
+				{
+					label: 'Image',
+					id: 'image',
+					type: 'media',
+					render: ( { item } ) => {
+						return (
+							<img
+								src={ item.image }
+								alt=""
+								style={ { width: '100%' } }
+							/>
+						);
+					},
+				},
+				{
+					label: 'Title',
+					id: 'title',
+					type: 'text',
+					enableHiding: true,
+					enableGlobalSearch: true,
+					filterBy: {
+						operators: [ 'contains', 'notContains', 'startsWith' ],
+					},
+					isValid: {
+						required: true,
+					},
+					getValue: ( { item } ) => item.name.title,
+					setValue: ( { value } ) => ( {
+						name: {
+							title: value,
+						},
+					} ),
+				},
+				{
+					id: 'date',
+					label: 'Date',
+					type: 'date',
+				},
+				{
+					id: 'datetime',
+					label: 'Datetime',
+					type: 'datetime',
+				},
+				{
+					label: 'Type',
+					id: 'type',
+					enableHiding: false,
+					elements: [
+						{ value: 'Satellite', label: 'Satellite' },
+						{ value: 'Ice giant', label: 'Ice giant' },
+						{ value: 'Terrestrial', label: 'Terrestrial' },
+						{ value: 'Gas giant', label: 'Gas giant' },
+						{ value: 'Dwarf planet', label: 'Dwarf planet' },
+						{ value: 'Asteroid', label: 'Asteroid' },
+						{ value: 'Comet', label: 'Comet' },
+						{
+							value: 'Kuiper belt object',
+							label: 'Kuiper belt object',
+						},
+						{ value: 'Protoplanet', label: 'Protoplanet' },
+						{ value: 'Planetesimal', label: 'Planetesimal' },
+						{ value: 'Minor planet', label: 'Minor planet' },
+						{
+							value: 'Trans-Neptunian object',
+							label: 'Trans-Neptunian object',
+						},
+					],
+					filterBy: {
+						operators: [ 'is', 'isNot' ],
+					},
+				},
+				{
+					id: 'isPlanet',
+					label: 'Is Planet',
+					type: 'boolean',
+					setValue: ( { value } ) => ( {
+						isPlanet: value === 'true',
+					} ),
+					elements: [
+						{ value: true, label: 'True' },
+						{ value: false, label: 'False' },
+					],
+				},
+				{
+					label: 'Satellites',
+					id: 'satellites',
+					type: 'integer',
+					enableSorting: true,
+				},
+				{
+					label: 'Description',
+					id: 'description',
+					type: 'text',
+					enableSorting: false,
+					enableGlobalSearch: true,
+					filterBy: {
+						operators: [ 'contains', 'notContains', 'startsWith' ],
+					},
+					getValue: ( { item } ) => item.name.description,
+					setValue: ( { value } ) => ( {
+						name: {
+							description: value,
+						},
+					} ),
+				},
+				{
+					label: 'Email',
+					id: 'email',
+					type: 'email',
+				},
+				{
+					label: 'Categories',
+					id: 'categories',
+					elements: [
+						{ value: 'Solar system', label: 'Solar system' },
+						{ value: 'Satellite', label: 'Satellite' },
+						{ value: 'Moon', label: 'Moon' },
+						{ value: 'Earth', label: 'Earth' },
+						{ value: 'Jupiter', label: 'Jupiter' },
+						{ value: 'Planet', label: 'Planet' },
+						{ value: 'Ice giant', label: 'Ice giant' },
+						{ value: 'Terrestrial', label: 'Terrestrial' },
+						{ value: 'Gas giant', label: 'Gas giant' },
+					],
+					type: 'array',
+					enableGlobalSearch: true,
+				},
+			],
+			data: [
+				{
+					id: 1,
+					name: {
+						title: 'Moon',
+						description:
+							"The Moon is Earth's only natural satellite, orbiting at an average distance of 384,400 kilometers with a synchronous rotation that leads to fixed lunar phases as seen from Earth. Its cratered surface and subtle glow define night skies, inspiring exploration missions and influencing tides and biological rhythms worldwide.",
+					},
+					image: 'https://live.staticflickr.com/7398/9458193857_e1256123e3_z.jpg',
+					type: 'Satellite',
+					isPlanet: false,
+					categories: [
+						'Solar system',
+						'Satellite',
+						'Earth',
+						'Moon',
+					],
+					satellites: 0,
+					date: '2021-01-01',
+					datetime: '2021-01-01T14:30:00Z',
+					email: 'moon@example.com',
+				},
+				{
+					id: 2,
+					name: {
+						title: 'Io',
+						description: 'Moon of Jupiter',
+					},
+					image: 'https://live.staticflickr.com/5482/9460973502_07e8ab81fe_z.jpg',
+					type: 'Satellite',
+					isPlanet: false,
+					categories: [
+						'Solar system',
+						'Satellite',
+						'Jupiter',
+						'Moon',
+					],
+					satellites: 0,
+					date: '2019-01-02',
+					datetime: '2019-01-02T09:15:00Z',
+					email: 'io@example.com',
+				},
+			],
+			actions: [],
+			selection: [],
+			onChangeSelection: () => {},
+			paginationInfo: {
+				totalItems: 2,
+				totalPages: 1,
+			},
+			isLoading: false,
+			getItemId: ( item ) => item.id.toString(),
+		},
 		render: ( { item } ) => {
 			return (
 				<img src={ item.media } alt="" style={ { width: '100%' } } />
@@ -589,8 +791,14 @@ const FieldTypeStory = ( {
 	}, [ _fields, Edit, asyncElements ] );
 	const form = useMemo(
 		() => ( {
-			layout: { type },
-			fields: storyFields.map( ( field ) => field.id ),
+			layout: {
+				type: 'panel',
+				openAs: 'modal',
+				summary: [ 'mediaName' ],
+			},
+			fields: storyFields
+				.filter( ( field ) => field.id !== 'mediaName' )
+				.map( ( field ) => field.id ),
 		} ),
 		[ type, storyFields ]
 	) as Form;
@@ -1013,7 +1221,10 @@ export const MediaComponent = ( {
 	asyncElements: boolean;
 } ) => {
 	const mediaFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'media' ),
+		() =>
+			fields.filter(
+				( field ) => field.id === 'mediaName' || field.id === 'media'
+			),
 		[]
 	);