index.js

/**
 * WordPress dependencies
 */
import {
	Button,
	Icon,
	__experimentalGrid as Grid,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import {
	audio as audioIcon,
	image as imageIcon,
	media as mediaIcon,
	video as videoIcon,
} from '@wordpress/icons';

/**
 * Internal dependencies
 */
import MediaReplaceFlow from '../../../components/media-replace-flow';
import MediaUploadCheck from '../../../components/media-upload/check';
import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';
import { getMediaSelectKey } from '../../../store/private-keys';
import { store as blockEditorStore } from '../../../store';
import { getValue, setValue } from '../utils';

function MediaThumbnail( { data, field, attachment } ) {
	const config = field.config || {};
	const { allowedTypes = [], multiple = false } = config;

	if ( multiple ) {
		return 'todo multiple';
	}

	if ( attachment?.media_type === 'image' || attachment?.poster ) {
		return (
			<div className="block-editor-content-only-controls__media-thumbnail">
				<img
					alt=""
					width={ 24 }
					height={ 24 }
					src={
						attachment.media_type === 'image'
							? attachment.source_url
							: attachment.poster
					}
				/>
			</div>
		);
	}

	if ( allowedTypes.length === 1 ) {
		const value = getValue( data, config.fieldDef );
		const url = value?.url;

		if ( url ) {
			return (
				<div className="block-editor-content-only-controls__media-thumbnail">
					<img alt="" width={ 24 } height={ 24 } src={ url } />
				</div>
			);
		}

		let icon;
		if ( allowedTypes[ 0 ] === 'image' ) {
			icon = imageIcon;
		} else if ( allowedTypes[ 0 ] === 'video' ) {
			icon = videoIcon;
		} else if ( allowedTypes[ 0 ] === 'audio' ) {
			icon = audioIcon;
		} else {
			icon = mediaIcon;
		}

		if ( icon ) {
			return <Icon icon={ icon } size={ 24 } />;
		}
	}

	return <Icon icon={ mediaIcon } size={ 24 } />;
}

export default function Media( { data, field, onChange, config = {} } ) {
	const { popoverProps } = useInspectorPopoverPlacement( {
		isControl: true,
	} );
	const { fieldDef } = config;
	const { allowedTypes = [], multiple = false } = fieldDef.args || {};

	// Check if featured image is supported by checking if it's in the mapping
	const hasFeaturedImageSupport =
		fieldDef?.properties && 'featuredImage' in fieldDef.properties;

	const value = getValue( data, fieldDef );

	const id = value?.id;
	const url = value?.url;

	const attachment = useSelect(
		( select ) => {
			if ( ! id ) {
				return;
			}

			const settings = select( blockEditorStore ).getSettings();
			const getMedia = settings[ getMediaSelectKey ];

			if ( ! getMedia ) {
				return;
			}

			return getMedia( select, id );
		},
		[ id ]
	);

	// TODO - pluralize when multiple.
	let chooseItemLabel;
	if ( allowedTypes.length === 1 ) {
		const allowedType = allowedTypes[ 0 ];
		if ( allowedType === 'image' ) {
			chooseItemLabel = __( 'Choose an image…' );
		} else if ( allowedType === 'video' ) {
			chooseItemLabel = __( 'Choose a video…' );
		} else if ( allowedType === 'application' ) {
			chooseItemLabel = __( 'Choose a file…' );
		} else {
			chooseItemLabel = __( 'Choose a media item…' );
		}
	} else {
		chooseItemLabel = __( 'Choose a media item…' );
	}

	return (
		<MediaUploadCheck>
			<MediaReplaceFlow
				className="block-editor-content-only-controls__media-replace-flow"
				allowedTypes={ allowedTypes }
				mediaId={ id }
				mediaURL={ url }
				multiple={ multiple }
				popoverProps={ popoverProps }
				onReset={ () => {
					const resetValue = {};

					if ( fieldDef?.properties ) {
						Object.keys( fieldDef.properties ).forEach( ( key ) => {
							if ( key === 'caption' || key === 'alt' ) {
								resetValue[ key ] = '';
							}
							resetValue[ key ] = undefined;
						} );
					}

					// Turn off featured image when resetting (only if it's in the properties)
					if ( hasFeaturedImageSupport ) {
						resetValue.featuredImage = false;
					}

					// Merge with existing value to preserve other field properties
					onChange( setValue( resetValue, fieldDef ) );
				} }
				{ ...( hasFeaturedImageSupport && {
					useFeaturedImage: !! data?.featuredImage,
					onToggleFeaturedImage: () => {
						// TODO - this should unset id, src, etc.
						onChange(
							setValue(
								{
									featuredImage: ! data?.featuredImage,
								},
								fieldDef
							)
						);
					},
				} ) }
				onSelect={ ( selectedMedia ) => {
					if ( selectedMedia.id && selectedMedia.url ) {
						const newValue = {};

						// Iterate over properties keys and pick only values for supported properties.
						// The properties used by the field should closely match those returned
						// by the media API to ensure no mapping of keys is required.
						if ( fieldDef?.properties ) {
							Object.keys( fieldDef.properties ).forEach(
								( key ) => {
									if ( selectedMedia[ key ] ) {
										newValue[ key ] = selectedMedia[ key ];
									}
								}
							);
						}

						// Turn off featured image when manually selecting media
						if ( hasFeaturedImageSupport ) {
							newValue.featuredImage = false;
						}

						// Merge with existing value to preserve other field properties
						onChange( setValue( newValue, fieldDef ) );
					}
				} }
				renderToggle={ ( buttonProps ) => (
					<Button
						__next40pxDefaultSize
						className="block-editor-content-only-controls__media"
						{ ...buttonProps }
					>
						<Grid
							rowGap={ 0 }
							columnGap={ 8 }
							templateColumns="24px 1fr"
							className="block-editor-content-only-controls__media-row"
						>
							{ url && (
								<>
									<MediaThumbnail
										attachment={ attachment }
										field={ field }
										data={ data }
									/>
									<span className="block-editor-content-only-controls__media-title">
										{
											// TODO - truncate long titles or url smartly (e.g. show filename).
											attachment?.title?.raw &&
											attachment?.title?.raw !== ''
												? attachment?.title?.raw
												: url
										}
									</span>
								</>
							) }
							{ ! url && (
								<>
									<span
										className="block-editor-content-only-controls__media-placeholder"
										style={ {
											width: '24px',
											height: '24px',
										} }
									/>
									<span className="block-editor-content-only-controls__media-title">
										{ chooseItemLabel }
									</span>
								</>
							) }
						</Grid>
					</Button>
				) }
			/>
		</MediaUploadCheck>
	);
}