@wordpress/block-editor 15.21.0 → 15.22.1-next.v.202606191442.0

package/src/components/media-upload/index.native.js

@@ -1,356 +0,0 @@
-/**
- * External dependencies
- */
-import { Platform } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Component, React } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
-	BottomSheet,
-	PanelBody,
-	Picker,
-	TextControl,
-} from '@wordpress/components';
-import {
-	getOtherMediaOptions,
-	requestMediaPicker,
-	mediaSources,
-} from '@wordpress/react-native-bridge';
-import {
-	capturePhoto,
-	captureVideo,
-	image,
-	wordpress,
-	mobile,
-	globe,
-} from '@wordpress/icons';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import {
-	MEDIA_TYPE_IMAGE,
-	MEDIA_TYPE_VIDEO,
-	MEDIA_TYPE_AUDIO,
-	MEDIA_TYPE_ANY,
-	OPTION_TAKE_VIDEO,
-	OPTION_TAKE_PHOTO,
-	OPTION_INSERT_FROM_URL,
-	OPTION_WORDPRESS_MEDIA_LIBRARY,
-} from './constants';
-import styles from './style.scss';
-
-const URL_MEDIA_SOURCE = 'URL';
-
-const PICKER_OPENING_DELAY = 200;
-
-export class MediaUpload extends Component {
-	pickerTimeout;
-
-	constructor( props ) {
-		super( props );
-		this.onPickerPresent = this.onPickerPresent.bind( this );
-		this.onPickerSelect = this.onPickerSelect.bind( this );
-		this.getAllSources = this.getAllSources.bind( this );
-		this.state = {
-			url: '',
-			showURLInput: false,
-			otherMediaOptions: [],
-		};
-	}
-
-	componentDidMount() {
-		const { allowedTypes = [], autoOpen } = this.props;
-		getOtherMediaOptions( allowedTypes, ( otherMediaOptions ) => {
-			const otherMediaOptionsWithIcons = otherMediaOptions.map(
-				( option ) => {
-					return {
-						...option,
-						requiresModal: true,
-						types: allowedTypes,
-						id: option.value,
-					};
-				}
-			);
-
-			this.setState( { otherMediaOptions: otherMediaOptionsWithIcons } );
-		} );
-
-		if ( autoOpen ) {
-			this.onPickerPresent();
-		}
-	}
-
-	componentWillUnmount() {
-		clearTimeout( this.pickerTimeout );
-	}
-
-	getAllSources() {
-		const { onSelectURL } = this.props;
-
-		const cameraImageSource = {
-			id: mediaSources.deviceCamera, // ID is the value sent to native.
-			value: mediaSources.deviceCamera + '-IMAGE', // This is needed to diferenciate image-camera from video-camera sources.
-			label: OPTION_TAKE_PHOTO,
-			requiresModal: true,
-			types: [ MEDIA_TYPE_IMAGE ],
-			icon: capturePhoto,
-		};
-
-		const cameraVideoSource = {
-			id: mediaSources.deviceCamera,
-			value: mediaSources.deviceCamera,
-			label: OPTION_TAKE_VIDEO,
-			requiresModal: true,
-			types: [ MEDIA_TYPE_VIDEO ],
-			icon: captureVideo,
-		};
-
-		const deviceLibrarySource = {
-			id: mediaSources.deviceLibrary,
-			value: mediaSources.deviceLibrary,
-			label: __( 'Choose from device' ),
-			requiresModal: true,
-			types: [ MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ],
-			icon: image,
-		};
-
-		const siteLibrarySource = {
-			id: mediaSources.siteMediaLibrary,
-			value: mediaSources.siteMediaLibrary,
-			label: OPTION_WORDPRESS_MEDIA_LIBRARY,
-			requiresModal: true,
-			types: [
-				MEDIA_TYPE_IMAGE,
-				MEDIA_TYPE_VIDEO,
-				MEDIA_TYPE_AUDIO,
-				MEDIA_TYPE_ANY,
-			],
-			icon: wordpress,
-			mediaLibrary: true,
-		};
-
-		const urlSource = {
-			id: URL_MEDIA_SOURCE,
-			value: URL_MEDIA_SOURCE,
-			label: OPTION_INSERT_FROM_URL,
-			types: [ MEDIA_TYPE_AUDIO, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ],
-			icon: globe,
-		};
-
-		// Only include `urlSource` option if `onSelectURL` prop is present, in order to match the web behavior.
-		const internalSources = [
-			deviceLibrarySource,
-			cameraImageSource,
-			cameraVideoSource,
-			siteLibrarySource,
-			...( onSelectURL ? [ urlSource ] : [] ),
-		];
-
-		return internalSources.concat( this.state.otherMediaOptions );
-	}
-
-	getMediaOptionsItems() {
-		const {
-			allowedTypes = [],
-			__experimentalOnlyMediaLibrary,
-			isAudioBlockMediaUploadEnabled,
-		} = this.props;
-
-		return this.getAllSources()
-			.filter( ( source ) => {
-				if ( __experimentalOnlyMediaLibrary ) {
-					return source.mediaLibrary;
-				} else if (
-					allowedTypes.every(
-						( allowedType ) =>
-							allowedType === MEDIA_TYPE_AUDIO &&
-							source.types.includes( allowedType )
-					) &&
-					source.id !== URL_MEDIA_SOURCE
-				) {
-					return isAudioBlockMediaUploadEnabled === true;
-				}
-
-				return allowedTypes.some( ( allowedType ) =>
-					source.types.includes( allowedType )
-				);
-			} )
-			.map( ( source ) => {
-				return {
-					...source,
-					icon: source.icon || this.getChooseFromDeviceIcon(),
-				};
-			} );
-	}
-
-	getChooseFromDeviceIcon() {
-		return mobile;
-	}
-
-	onPickerPresent() {
-		const { autoOpen } = this.props;
-		const isIOS = Platform.OS === 'ios';
-
-		if ( this.picker ) {
-			// the delay below is required because on iOS this action sheet gets dismissed by the close event of the Inserter
-			// so this delay allows the Inserter to be closed fully before presenting action sheet.
-			if ( autoOpen && isIOS ) {
-				this.pickerTimeout = setTimeout(
-					() => this.picker.presentPicker(),
-					PICKER_OPENING_DELAY
-				);
-			} else {
-				this.picker.presentPicker();
-			}
-		}
-	}
-
-	onPickerSelect( value ) {
-		const { allowedTypes = [], onSelect, multiple = false } = this.props;
-
-		if ( value === URL_MEDIA_SOURCE ) {
-			this.setState( { showURLInput: true } );
-			return;
-		}
-
-		const mediaSource = this.getAllSources()
-			.filter( ( source ) => source.value === value )
-			.shift();
-		const types = allowedTypes.filter( ( type ) =>
-			mediaSource.types.includes( type )
-		);
-
-		requestMediaPicker( mediaSource.id, types, multiple, ( media ) => {
-			if ( ( multiple && media ) || ( media && media.id ) ) {
-				onSelect( media );
-			}
-		} );
-	}
-
-	render() {
-		const { allowedTypes = [], isReplacingMedia, multiple } = this.props;
-		const isOneType = allowedTypes.length === 1;
-		const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
-		const isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO );
-		const isAudio = isOneType && allowedTypes.includes( MEDIA_TYPE_AUDIO );
-		const isAnyType = isOneType && allowedTypes.includes( MEDIA_TYPE_ANY );
-
-		const isImageOrVideo =
-			allowedTypes.length === 2 &&
-			allowedTypes.includes( MEDIA_TYPE_IMAGE ) &&
-			allowedTypes.includes( MEDIA_TYPE_VIDEO );
-
-		let pickerTitle;
-		if ( isImage ) {
-			if ( isReplacingMedia ) {
-				pickerTitle = __( 'Replace image' );
-			} else {
-				pickerTitle = multiple
-					? __( 'Choose images' )
-					: __( 'Choose image' );
-			}
-		} else if ( isVideo ) {
-			if ( isReplacingMedia ) {
-				pickerTitle = __( 'Replace video' );
-			} else {
-				pickerTitle = __( 'Choose video' );
-			}
-		} else if ( isImageOrVideo ) {
-			if ( isReplacingMedia ) {
-				pickerTitle = __( 'Replace image or video' );
-			} else {
-				pickerTitle = __( 'Choose image or video' );
-			}
-		} else if ( isAudio ) {
-			if ( isReplacingMedia ) {
-				pickerTitle = __( 'Replace audio' );
-			} else {
-				pickerTitle = __( 'Choose audio' );
-			}
-		} else if ( isAnyType ) {
-			pickerTitle = __( 'Choose file' );
-			if ( isReplacingMedia ) {
-				pickerTitle = __( 'Replace file' );
-			} else {
-				pickerTitle = __( 'Choose file' );
-			}
-		}
-
-		const getMediaOptions = () => (
-			<Picker
-				title={ pickerTitle }
-				hideCancelButton
-				ref={ ( instance ) => ( this.picker = instance ) }
-				options={ this.getMediaOptionsItems() }
-				onChange={ this.onPickerSelect }
-				testID="media-options-picker"
-			/>
-		);
-
-		return (
-			<>
-				<URLInput
-					isVisible={ this.state.showURLInput }
-					onClose={ () => {
-						if ( this.state.url !== '' ) {
-							this.props.onSelectURL( this.state.url );
-						}
-						this.setState( { showURLInput: false, url: '' } );
-					} }
-					onChange={ ( url ) => {
-						this.setState( { url } );
-					} }
-					value={ this.state.url }
-				/>
-				{ this.props.render( {
-					open: this.onPickerPresent,
-					getMediaOptions,
-				} ) }
-			</>
-		);
-	}
-}
-
-function URLInput( props ) {
-	return (
-		<BottomSheet
-			hideHeader
-			isVisible={ props.isVisible }
-			onClose={ props.onClose }
-		>
-			<PanelBody style={ styles[ 'media-upload__link-input' ] }>
-				<TextControl
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
-					// eslint-disable-next-line jsx-a11y/no-autofocus
-					autoFocus
-					autoCapitalize="none"
-					autoCorrect={ false }
-					autoComplete={ Platform.isIOS ? 'url' : 'off' }
-					keyboardType="url"
-					label={ OPTION_INSERT_FROM_URL }
-					onChange={ props.onChange }
-					placeholder={ __( 'Type a URL' ) }
-					value={ props.value }
-				/>
-			</PanelBody>
-		</BottomSheet>
-	);
-}
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { capabilities } = select( blockEditorStore ).getSettings();
-		return {
-			isAudioBlockMediaUploadEnabled:
-				capabilities?.isAudioBlockMediaUploadEnabled === true,
-		};
-	} ),
-] )( MediaUpload );

package/src/components/media-upload/style.native.scss

@@ -1,4 +0,0 @@
-.media-upload__link-input {
-	padding-left: 0;
-	padding-right: 0;
-}

package/src/components/media-upload/test/index.native.js

@@ -1,172 +0,0 @@
-/* eslint jest/expect-expect: ["warn", { "assertFunctionNames": ["expect", "expect*"] }] */
-
-/**
- * External dependencies
- */
-import { render, fireEvent } from 'test/helpers';
-import { Text, TouchableWithoutFeedback } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { requestMediaPicker } from '@wordpress/react-native-bridge';
-
-/**
- * Internal dependencies
- */
-import { MediaUpload } from '../index';
-import {
-	MEDIA_TYPE_IMAGE,
-	MEDIA_TYPE_VIDEO,
-	MEDIA_TYPE_AUDIO,
-	OPTION_TAKE_VIDEO,
-	OPTION_TAKE_PHOTO,
-	OPTION_INSERT_FROM_URL,
-	OPTION_WORDPRESS_MEDIA_LIBRARY,
-} from '../constants';
-
-const MEDIA_URL = 'http://host.media.type';
-const MEDIA_ID = 123;
-
-describe( 'MediaUpload component', () => {
-	it( 'renders without crashing', () => {
-		const wrapper = render(
-			<MediaUpload allowedTypes={ [] } render={ () => null } />
-		);
-		expect( wrapper ).toBeTruthy();
-	} );
-
-	describe( 'Media capture options for different media block types', () => {
-		const expectOptionForMediaType = async (
-			mediaType,
-			expectedOptions
-		) => {
-			const wrapper = render(
-				<MediaUpload
-					allowedTypes={ [ mediaType ] }
-					onSelectURL={ jest.fn() }
-					render={ ( { open, getMediaOptions } ) => {
-						return (
-							<>
-								<TouchableWithoutFeedback onPress={ open }>
-									<Text>Open Picker</Text>
-								</TouchableWithoutFeedback>
-								{ getMediaOptions() }
-							</>
-						);
-					} }
-				/>
-			);
-			fireEvent.press( wrapper.getByText( 'Open Picker' ) );
-
-			expectedOptions.forEach( ( item ) => {
-				const option = wrapper.getByText( item );
-				expect( option ).toBeVisible();
-			} );
-		};
-
-		it( 'shows the correct media capture options for the Image block', () => {
-			expectOptionForMediaType( MEDIA_TYPE_IMAGE, [
-				OPTION_TAKE_PHOTO,
-				OPTION_WORDPRESS_MEDIA_LIBRARY,
-				OPTION_INSERT_FROM_URL,
-			] );
-		} );
-
-		it( 'shows the correct media capture options for the Video block', () => {
-			expectOptionForMediaType( MEDIA_TYPE_VIDEO, [
-				OPTION_TAKE_VIDEO,
-				OPTION_WORDPRESS_MEDIA_LIBRARY,
-			] );
-		} );
-
-		it( 'shows the correct media capture options for the Audio block', () => {
-			expectOptionForMediaType( MEDIA_TYPE_AUDIO, [
-				OPTION_INSERT_FROM_URL,
-			] );
-		} );
-	} );
-
-	const expectMediaPickerForOption = (
-		option,
-		allowMultiple,
-		requestFunction
-	) => {
-		requestFunction.mockImplementation(
-			( source, mediaTypes, multiple, callback ) => {
-				expect( mediaTypes[ 0 ] ).toEqual( MEDIA_TYPE_VIDEO );
-				if ( multiple ) {
-					callback( [ { id: MEDIA_ID, url: MEDIA_URL } ] );
-				} else {
-					callback( { id: MEDIA_ID, url: MEDIA_URL } );
-				}
-			}
-		);
-
-		const onSelect = jest.fn();
-
-		const wrapper = render(
-			<MediaUpload
-				allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
-				onSelect={ onSelect }
-				multiple={ allowMultiple }
-				render={ ( { open, getMediaOptions } ) => {
-					return (
-						<>
-							<TouchableWithoutFeedback onPress={ open }>
-								<Text>Open Picker</Text>
-							</TouchableWithoutFeedback>
-							{ getMediaOptions() }
-						</>
-					);
-				} }
-			/>
-		);
-		fireEvent.press( wrapper.getByText( 'Open Picker' ) );
-		fireEvent.press( wrapper.getByText( option ) );
-		const media = { id: MEDIA_ID, url: MEDIA_URL };
-
-		expect( requestFunction ).toHaveBeenCalledTimes( 1 );
-
-		expect( onSelect ).toHaveBeenCalledTimes( 1 );
-		expect( onSelect ).toHaveBeenCalledWith(
-			allowMultiple ? [ media ] : media
-		);
-	};
-
-	it( 'can select media from device library', () => {
-		expectMediaPickerForOption(
-			'Choose from device',
-			false,
-			requestMediaPicker
-		);
-	} );
-
-	it( 'can select media from WP media library', () => {
-		expectMediaPickerForOption(
-			'WordPress Media Library',
-			false,
-			requestMediaPicker
-		);
-	} );
-
-	it( 'can select media by capturing', () => {
-		expectMediaPickerForOption( 'Take a Video', false, requestMediaPicker );
-	} );
-
-	it( 'can select multiple media from device library', () => {
-		expectMediaPickerForOption(
-			'Choose from device',
-			true,
-			requestMediaPicker
-		);
-	} );
-
-	it( 'can select multiple media from WP media library', () => {
-		expectMediaPickerForOption(
-			'WordPress Media Library',
-			true,
-			requestMediaPicker
-		);
-	} );
-} );

package/src/components/media-upload-progress/README.md

@@ -1,100 +0,0 @@
-# MediaUploadProgress
-
-`MediaUploadProgress` shows a progress bar while a media file associated with a block is being uploaded.
-
-## Usage
-
-Usage example
-
-```jsx
-import { ImageBackground, Text, View } from 'react-native';
-import { MediaUploadProgress } from '@wordpress/block-editor';
-
-function MediaProgress( { url, id } ) {
-	return (
-		<MediaUploadProgress
-			mediaId={ id }
-			renderContent={ ( { isUploadFailed, retryMessage } ) => {
-				return (
-					<ImageBackground
-						resizeMethod="scale"
-						source={ { uri: url } }
-					>
-						{ isUploadFailed && (
-							<View>
-								<Text>{ retryMessage }</Text>
-							</View>
-						) }
-					</ImageBackground>
-				);
-			} }
-		/>
-	);
-}
-```
-
-## Props
-
-### mediaId
-
-A media ID that identifies the current upload.
-
--   Type: `Number`
--   Required: Yes
--   Platform: Mobile
-
-### renderContent
-
-Content to be rendered along with the progress bar, usually the thumbnail of the media being uploaded.
-
--   Type: `React components`
--   Required: Yes
--   Platform: Mobile
-
-It passes an object containing the following properties:
-
-`{ isUploadInProgress, isUploadFailed, retryMessage }`
-
-### onUpdateMediaProgress
-
-Callback called when the progress of the upload is updated.
-
--   Type: `Function`
--   Required: No
--   Platform: Mobile
-
-The argument of the callback is an object containing the following properties:
-
-`{ mediaId, mediaUrl, progress, state }`
-
-### onFinishMediaUploadWithSuccess
-
-Callback called when the media file has been uploaded successfully.
-
--   Type: `Function`
--   Required: No
--   Platform: Mobile
-
-The argument of the callback is an object containing the following properties:
-
-`{ mediaId, mediaServerId, mediaUrl, progress, state }`
-
-### onFinishMediaUploadWithFailure
-
-Callback called when the media file couldn't be uploaded.
-
--   Type: `Function`
--   Required: No
--   Platform: Mobile
-
-The argument of the callback is an object containing the following properties:
-
-`{ mediaId, progress, state }`
-
-### onMediaUploadStateReset
-
-Callback called when the media upload is reset
-
--   Type: `Function`
--   Required: No
--   Platform: Mobile

package/src/components/media-upload-progress/constants.js

@@ -1,6 +0,0 @@
-export const MEDIA_UPLOAD_STATE_IDLE = 0;
-export const MEDIA_UPLOAD_STATE_UPLOADING = 1;
-export const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
-export const MEDIA_UPLOAD_STATE_FAILED = 3;
-export const MEDIA_UPLOAD_STATE_RESET = 4;
-export const MEDIA_UPLOAD_STATE_PAUSED = 11;