@wordpress/media-fields 0.2.0 → 0.2.1-next.06ee73755.0

package/src/attached_to/edit.tsx

@@ -0,0 +1,185 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
+	store as coreStore,
+} from '@wordpress/core-data';
+import { Button, ComboboxControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, createInterpolateElement } from '@wordpress/element';
+import { debounce } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+import { getRenderedContent } from '../utils/get-rendered-content';
+
+export type SearchResult = {
+	/**
+	 * Post or term id.
+	 */
+	id: number;
+	/**
+	 * Link url.
+	 */
+	url: string;
+	/**
+	 * Title of the link.
+	 */
+	title: string;
+	/**
+	 * The taxonomy or post type slug or type URL.
+	 */
+	type: string;
+	/**
+	 * Link kind of post-type or taxonomy
+	 */
+	kind?: string;
+};
+
+export default function MediaAttachedToEdit( {
+	data,
+	onChange,
+}: DataFormControlProps< MediaItem > ) {
+	const defaultPost =
+		!! data.post && !! data?._embedded?.[ 'wp:attached-to' ]?.[ 0 ]
+			? [
+					{
+						label: getRenderedContent(
+							data._embedded?.[ 'wp:attached-to' ]?.[ 0 ]?.title
+						),
+						value: data.post.toString(),
+					},
+			  ]
+			: [];
+	const [ options, setOptions ] =
+		useState< { label: string; value: string }[] >( defaultPost );
+	const [ searchResults, setSearchResults ] = useState< SearchResult[] >(
+		[]
+	);
+	const [ isLoading, setIsLoading ] = useState( false );
+	const [ value, setValue ] = useState< string | null >(
+		data?.post?.toString() ?? null
+	);
+
+	const postTypes = useSelect(
+		( select ) => select( coreStore ).getPostTypes(),
+		[]
+	);
+	const handleDetach = () => {
+		onChange( {
+			post: 0,
+			_embedded: { ...data?._embedded, 'wp:attached-to': undefined },
+		} );
+		setOptions( [] );
+	};
+
+	const onValueChange = async ( filterValue: string ) => {
+		setIsLoading( true );
+		const results = await fetchLinkSuggestions(
+			filterValue,
+			/*
+			 * @TODO `fetchLinkSuggestions()` should accept `perPage` as an option argument.
+			 * `isInitialSuggestions` limits the result to 3, otherwise it's hardcoded to 20.
+			 */
+			{ type: 'post', isInitialSuggestions: true },
+			{}
+		);
+		setSearchResults( results );
+		const mappedSuggestions = results.map( ( result ) => {
+			return {
+				label: result.title,
+				value: result.id.toString(),
+			};
+		} );
+		setOptions( mappedSuggestions );
+		setIsLoading( false );
+	};
+
+	/**
+	 * Handle selection.
+	 *
+	 * @param {Object} selectedPostId The selected post id.
+	 */
+	const handleSelectOption = (
+		selectedPostId: string | null | undefined
+	) => {
+		if ( ! selectedPostId ) {
+			handleDetach();
+			return;
+		}
+		setValue( selectedPostId );
+		if ( selectedPostId ) {
+			const selectedPost = searchResults.find(
+				( result ) => result.id === Number( selectedPostId )
+			);
+			// Although unlikely, it's technically possible for selectedPost to not be found.
+			// E.g. if the user selects an option just as new search results are loaded.
+			// TODO: Add error handling for when selectedPost is not found.
+			if ( selectedPost && postTypes ) {
+				const postType = postTypes.find(
+					( _postType: { slug: string } ) =>
+						_postType.slug === selectedPost?.type
+				);
+
+				const attachedTo = {
+					...( postType && { type: postType.slug } ),
+					id: Number( selectedPostId ),
+					title: {
+						raw: selectedPost.title,
+						rendered: selectedPost.title,
+					},
+				};
+
+				onChange( {
+					post: Number( selectedPostId ),
+					_embedded: {
+						...data?._embedded,
+						'wp:attached-to': [ attachedTo ],
+					},
+				} );
+			}
+		}
+	};
+
+	const help = !! data.post
+		? createInterpolateElement(
+				__(
+					'Search for a post or page to attach this media to or <button>detach current</button>.'
+				),
+				{
+					button: (
+						<Button
+							__next40pxDefaultSize
+							onClick={ handleDetach }
+							variant="link"
+							accessibleWhenDisabled
+						/>
+					),
+				}
+		  )
+		: __( 'Search for a post or page to attach this media to.' );
+
+	return (
+		<ComboboxControl
+			className="dataviews-media-field__attached-to"
+			__next40pxDefaultSize
+			isLoading={ isLoading }
+			label={ __( 'Attached to' ) }
+			help={ help }
+			value={ value }
+			options={ options }
+			onFilterValueChange={ debounce(
+				( filterValue: unknown ) =>
+					onValueChange( filterValue as string ),
+				300
+			) }
+			onChange={ handleSelectOption }
+			hideLabelFromVision
+		/>
+	);
+}

package/src/attached_to/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+import MediaAttachedToView from './view';
+import MediaAttachedToEdit from './edit';
+
+const attachedToField: Partial< Field< MediaItem > > = {
+	id: 'attached_to',
+	type: 'text',
+	label: __( 'Attached to' ),
+	Edit: MediaAttachedToEdit,
+	render: MediaAttachedToView,
+	enableSorting: false,
+	filterBy: false,
+};
+
+export default attachedToField;

package/src/attached_to/view.tsx

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+import { getRenderedContent } from '../utils/get-rendered-content';
+
+export default function MediaAttachedToView( {
+	item,
+}: DataViewRenderFieldProps< MediaItem > ) {
+	// Store the displayed title in state, as the embedded post may be loaded
+	// asynchronously. This ensures that the title remains stable after it
+	// is updated by the user, and while it is re-fetched from the server.
+	const [ attachedPostTitle, setAttachedPostTitle ] = useState<
+		string | null
+	>( null );
+
+	const parentId = item.post;
+	const embeddedPostId = item._embedded?.[ 'wp:attached-to' ]?.[ 0 ]?.id;
+	const embeddedPostTitle =
+		item._embedded?.[ 'wp:attached-to' ]?.[ 0 ]?.title;
+
+	useEffect( () => {
+		if ( !! parentId && parentId === embeddedPostId ) {
+			setAttachedPostTitle(
+				getRenderedContent( embeddedPostTitle ) ||
+					embeddedPostId?.toString() ||
+					''
+			);
+		}
+
+		if ( ! parentId ) {
+			setAttachedPostTitle( __( '(Unattached)' ) );
+		}
+	}, [ parentId, embeddedPostId, embeddedPostTitle ] );
+
+	return <>{ attachedPostTitle }</>;
+}

package/src/caption/index.tsx

@@ -24,7 +24,6 @@ const captionField: Partial< Field< Updatable< Attachment > > > = {
 				value={ getRawContent( data.caption ) || '' }
 				onChange={ ( value ) => onChange( { caption: value } ) }
 				rows={ 2 }
-				__nextHasNoMarginBottom
 			/>
 		);
 	},

package/src/date_added/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { getSettings } from '@wordpress/date';
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+
+const dateAddedField: Partial< Field< MediaItem > > = {
+	id: 'date',
+	type: 'datetime',
+	label: __( 'Date added' ),
+	filterBy: {
+		operators: [ 'before', 'after' ],
+	},
+	format: {
+		datetime: getSettings().formats.datetimeAbbreviated,
+	},
+	readOnly: true,
+};
+
+export default dateAddedField;

package/src/date_modified/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { getSettings } from '@wordpress/date';
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+
+const dateModifiedField: Partial< Field< MediaItem > > = {
+	id: 'modified',
+	type: 'datetime',
+	label: __( 'Date modified' ),
+	filterBy: {
+		operators: [ 'before', 'after' ],
+	},
+	format: {
+		datetime: getSettings().formats.datetimeAbbreviated,
+	},
+	readOnly: true,
+};
+
+export default dateModifiedField;

package/src/description/index.tsx

@@ -26,7 +26,6 @@ const descriptionField: Partial< Field< Updatable< Attachment > > > = {
 				value={ getRawContent( data.description ) || '' }
 				onChange={ ( value ) => onChange( { description: value } ) }
 				rows={ 5 }
-				__nextHasNoMarginBottom
 			/>
 		);
 	},

package/src/filename/test/index.test.ts

@@ -0,0 +1,59 @@
+/**
+ * Internal dependencies
+ */
+import filenameField from '../index';
+import type { MediaItem } from '../../types';
+
+describe( 'filenameField', () => {
+	it( 'has correct field configuration', () => {
+		expect( filenameField ).toMatchObject( {
+			id: 'filename',
+			type: 'text',
+			label: 'File name',
+			enableSorting: false,
+			filterBy: false,
+			readOnly: true,
+		} );
+	} );
+
+	describe( 'getValue', () => {
+		it( 'extracts filename from source_url', () => {
+			const item: Partial< MediaItem > = {
+				source_url:
+					'https://example.com/wp-content/uploads/2024/image.jpg',
+			};
+
+			const result = filenameField.getValue?.( {
+				item: item as MediaItem,
+			} );
+
+			expect( result ).toBe( 'image.jpg' );
+		} );
+
+		it( 'returns undefined when source_url is undefined', () => {
+			const item: Partial< MediaItem > = {};
+
+			const result = filenameField.getValue?.( {
+				item: item as MediaItem,
+			} );
+
+			expect( result ).toBeUndefined();
+		} );
+
+		it( 'returns undefined when source_url is empty string', () => {
+			const item: Partial< MediaItem > = {
+				source_url: '',
+			};
+
+			const result = filenameField.getValue?.( {
+				item: item as MediaItem,
+			} );
+
+			expect( result ).toBeUndefined();
+		} );
+	} );
+
+	it( 'has a render function', () => {
+		expect( filenameField.render ).toBeDefined();
+	} );
+} );

package/src/filename/test/view.test.tsx

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import type { NormalizedField } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import FileNameView from '../view';
+import filenameField from '../index';
+import type { MediaItem } from '../../types';
+
+describe( 'FileNameView', () => {
+	describe( 'filename rendering', () => {
+		it( 'renders short filename (15 characters or less)', () => {
+			const item: Partial< MediaItem > = {
+				source_url: 'https://example.com/uploads/12345678901.jpg', // exactly 15 chars
+			};
+
+			render(
+				<FileNameView
+					item={ item as MediaItem }
+					field={ filenameField as NormalizedField< MediaItem > }
+				/>
+			);
+
+			// Verify the filename is visible to users
+			expect( screen.getByText( '12345678901.jpg' ) ).toBeInTheDocument();
+		} );
+
+		it( 'renders long filename (more than 15 characters)', () => {
+			const longFilename =
+				'very-long-filename-that-exceeds-fifteen-characters.jpg';
+			const item: Partial< MediaItem > = {
+				source_url: `https://example.com/uploads/${ longFilename }`,
+			};
+
+			render(
+				<FileNameView
+					item={ item as MediaItem }
+					field={ filenameField as NormalizedField< MediaItem > }
+				/>
+			);
+
+			// Verify the full filename text is accessible to users
+			// (the component handles truncation via Truncate/Tooltip, but the text is still present)
+			expect( screen.getByText( longFilename ) ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'edge cases', () => {
+		it( 'renders nothing when source_url is missing', () => {
+			const item: Partial< MediaItem > = {};
+
+			const { container } = render(
+				<FileNameView
+					item={ item as MediaItem }
+					field={ filenameField as NormalizedField< MediaItem > }
+				/>
+			);
+
+			// When there's no source_url, component should render nothing
+			expect( container ).toBeEmptyDOMElement();
+		} );
+
+		it( 'renders nothing when source_url is empty', () => {
+			const item: Partial< MediaItem > = {
+				source_url: '',
+			};
+
+			const { container } = render(
+				<FileNameView
+					item={ item as MediaItem }
+					field={ filenameField as NormalizedField< MediaItem > }
+				/>
+			);
+
+			// When source_url is empty, component should render nothing
+			expect( container ).toBeEmptyDOMElement();
+		} );
+	} );
+} );

package/src/filesize/test/index.test.tsx

@@ -0,0 +1,107 @@
+/**
+ * Internal dependencies
+ */
+import filesizeField from '../index';
+import type { MediaItem } from '../../types';
+
+describe( 'filesizeField', () => {
+	it( 'has correct field configuration', () => {
+		expect( filesizeField ).toMatchObject( {
+			id: 'filesize',
+			type: 'text',
+			label: 'File size',
+			enableSorting: false,
+			filterBy: false,
+			readOnly: true,
+		} );
+	} );
+
+	describe( 'getValue - byte formatting logic', () => {
+		it( 'returns empty string for 0 bytes due to truthy check', () => {
+			const item = {
+				media_details: {
+					filesize: 0,
+					sizes: {},
+				},
+			} as MediaItem;
+
+			const result = filesizeField.getValue?.( {
+				item,
+			} );
+
+			expect( result ).toBe( '' );
+		} );
+
+		it.each( [
+			[ 512, /^512\s+B$/, 'bytes (less than 1 KB)' ],
+			[ 1024 * 50, /^50\s+KB$/, '50 kilobytes' ],
+			[ 1024 * 1024 * 5, /^5\s+MB$/, '5 megabytes' ],
+			[ 1024 * 1024 * 1024 * 2.5, /^2\.5\s+GB$/, '2.5 gigabytes' ],
+			[ 1024 * 1024 * 1024 * 1024 * 1.5, /^1\.5\s+TB$/, '1.5 terabytes' ],
+			[
+				1024 * 1024 * 3.14159,
+				/^3\.14\s+MB$/,
+				'fractional sizes with proper decimals',
+			],
+			[ 1024, /^1\s+KB$/, 'boundary value (exactly 1 KB)' ],
+		] )(
+			'formats %s bytes correctly: %s',
+			( filesize, expected, description ) => {
+				const item = {
+					media_details: {
+						filesize,
+						sizes: {},
+					},
+				} as MediaItem;
+
+				const result = filesizeField.getValue?.( {
+					item,
+				} );
+
+				try {
+					expect( result ).toMatch( expected );
+				} catch ( error ) {
+					const message =
+						error instanceof Error
+							? error.message
+							: String( error );
+					throw new Error(
+						`Failed to format filesize (${ description }): ${ message }`
+					);
+				}
+			}
+		);
+
+		it.each( [
+			[ { media_details: { sizes: {} } }, 'when filesize is missing' ],
+			[ {}, 'when media_details is missing' ],
+		] )( 'returns empty string %s', ( item, description ) => {
+			const result = filesizeField.getValue?.( {
+				item: item as MediaItem,
+			} );
+
+			try {
+				expect( result ).toBe( '' );
+			} catch ( error ) {
+				const message =
+					error instanceof Error ? error.message : String( error );
+				throw new Error(
+					`Failed getValue test (${ description }): ${ message }`
+				);
+			}
+		} );
+	} );
+
+	describe( 'isVisible', () => {
+		it.each( [
+			[ { media_details: { filesize: 1024, sizes: {} } }, true ],
+			[ { media_details: { filesize: 0, sizes: {} } }, false ],
+			[ { media_details: { sizes: {} } }, false ],
+			[ {}, false ],
+		] )( 'returns %s for item %#', ( item, expected ) => {
+			const result = filesizeField.isVisible?.( item as MediaItem );
+
+			expect( result ).toBe( expected );
+		} );
+	} );
+} );

package/src/index.ts

@@ -1,5 +1,8 @@
 export { default as altTextField } from './alt_text';
+export { default as attachedToField } from './attached_to';
 export { default as captionField } from './caption';
+export { default as dateAddedField } from './date_added';
+export { default as dateModifiedField } from './date_modified';
 export { default as descriptionField } from './description';
 export { default as filenameField } from './filename';
 export { default as filesizeField } from './filesize';