@wordpress/block-editor 15.21.0 → 15.21.1

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

@@ -1,233 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { Spinner } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import {
-	subscribeMediaUpload,
-	requestImageUploadCancel,
-} from '@wordpress/react-native-bridge';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import {
-	MEDIA_UPLOAD_STATE_IDLE,
-	MEDIA_UPLOAD_STATE_UPLOADING,
-	MEDIA_UPLOAD_STATE_SUCCEEDED,
-	MEDIA_UPLOAD_STATE_FAILED,
-	MEDIA_UPLOAD_STATE_RESET,
-	MEDIA_UPLOAD_STATE_PAUSED,
-} from './constants';
-
-export class MediaUploadProgress extends Component {
-	constructor( props ) {
-		super( props );
-
-		this.state = {
-			uploadState: MEDIA_UPLOAD_STATE_IDLE,
-			progress: 0,
-			isUploadInProgress: false,
-			isUploadFailed: false,
-		};
-
-		this.mediaUpload = this.mediaUpload.bind( this );
-		this.getRetryMessage = this.getRetryMessage.bind( this );
-	}
-
-	componentDidMount() {
-		this.addMediaUploadListener();
-	}
-
-	componentWillUnmount() {
-		const { isUploadInProgress, isUploadFailed } = this.state;
-		const { mediaId } = this.props;
-
-		if ( isUploadInProgress || isUploadFailed ) {
-			requestImageUploadCancel( mediaId );
-		}
-		this.removeMediaUploadListener();
-	}
-
-	mediaUpload( payload ) {
-		const { mediaId } = this.props;
-		if (
-			payload.mediaId !== mediaId ||
-			( payload.state === this.state.uploadState &&
-				payload.progress === this.state.progress )
-		) {
-			return;
-		}
-
-		if ( payload?.mediaUrl && ! payload.state ) {
-			this.updateMediaThumbnail( payload );
-			return;
-		}
-
-		switch ( payload.state ) {
-			case MEDIA_UPLOAD_STATE_UPLOADING:
-				this.updateMediaProgress( payload );
-				break;
-			case MEDIA_UPLOAD_STATE_SUCCEEDED:
-				this.finishMediaUploadWithSuccess( payload );
-				break;
-			case MEDIA_UPLOAD_STATE_PAUSED:
-				this.finishMediaUploadWithPause( payload );
-				break;
-			case MEDIA_UPLOAD_STATE_FAILED:
-				this.finishMediaUploadWithFailure( payload );
-				break;
-			case MEDIA_UPLOAD_STATE_RESET:
-				this.mediaUploadStateReset( payload );
-				break;
-		}
-	}
-
-	updateMediaProgress( payload ) {
-		this.setState( {
-			progress: payload.progress,
-			uploadState: payload.state,
-			isUploadInProgress: true,
-			isUploadFailed: false,
-		} );
-		if ( this.props.onUpdateMediaProgress ) {
-			this.props.onUpdateMediaProgress( payload );
-		}
-	}
-
-	updateMediaThumbnail( payload ) {
-		const { onUpdateMediaProgress } = this.props;
-		if ( onUpdateMediaProgress ) {
-			onUpdateMediaProgress( payload );
-		}
-	}
-
-	finishMediaUploadWithSuccess( payload ) {
-		this.setState( {
-			uploadState: payload.state,
-			isUploadInProgress: false,
-		} );
-		if ( this.props.onFinishMediaUploadWithSuccess ) {
-			this.props.onFinishMediaUploadWithSuccess( payload );
-		}
-	}
-
-	finishMediaUploadWithPause( payload ) {
-		if ( ! this.props.enablePausedUploads ) {
-			this.finishMediaUploadWithFailure( payload );
-			return;
-		}
-
-		this.setState( {
-			uploadState: payload.state,
-			isUploadInProgress: true,
-			isUploadFailed: false,
-		} );
-		if ( this.props.onFinishMediaUploadWithFailure ) {
-			this.props.onFinishMediaUploadWithFailure( payload );
-		}
-	}
-
-	finishMediaUploadWithFailure( payload ) {
-		this.setState( {
-			uploadState: payload.state,
-			isUploadInProgress: false,
-			isUploadFailed: true,
-		} );
-		if ( this.props.onFinishMediaUploadWithFailure ) {
-			this.props.onFinishMediaUploadWithFailure( payload );
-		}
-	}
-
-	mediaUploadStateReset( payload ) {
-		this.setState( {
-			uploadState: payload.state,
-			isUploadInProgress: false,
-			isUploadFailed: false,
-		} );
-		if ( this.props.onMediaUploadStateReset ) {
-			this.props.onMediaUploadStateReset( payload );
-		}
-	}
-
-	addMediaUploadListener() {
-		// If we already have a subscription not worth doing it again.
-		if ( this.subscriptionParentMediaUpload ) {
-			return;
-		}
-		this.subscriptionParentMediaUpload = subscribeMediaUpload(
-			( payload ) => {
-				this.mediaUpload( payload );
-			}
-		);
-	}
-
-	removeMediaUploadListener() {
-		if ( this.subscriptionParentMediaUpload ) {
-			this.subscriptionParentMediaUpload.remove();
-		}
-	}
-
-	getRetryMessage() {
-		if (
-			this.state.uploadState === MEDIA_UPLOAD_STATE_PAUSED &&
-			this.props.enablePausedUploads
-		) {
-			return __( 'Waiting for connection' );
-		}
-
-		// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
-		return __( 'Failed to insert media.\nTap for more info.' );
-	}
-
-	render() {
-		const { renderContent = () => null } = this.props;
-		const { isUploadInProgress, isUploadFailed, uploadState } = this.state;
-		const showSpinner = this.state.isUploadInProgress;
-		const progress = this.state.progress * 100;
-		const retryMessage = this.getRetryMessage();
-
-		const progressBarStyle = [
-			styles.progressBar,
-			showSpinner || styles.progressBarHidden,
-			this.props.progressBarStyle,
-		];
-
-		return (
-			<View
-				style={ [
-					styles.mediaUploadProgress,
-					this.props.containerStyle,
-				] }
-				pointerEvents="box-none"
-			>
-				<View style={ progressBarStyle }>
-					{ showSpinner && (
-						<Spinner
-							progress={ progress }
-							style={ this.props.spinnerStyle }
-							testID="spinner"
-						/>
-					) }
-				</View>
-				{ renderContent( {
-					isUploadPaused:
-						uploadState === MEDIA_UPLOAD_STATE_PAUSED &&
-						this.props.enablePausedUploads,
-					isUploadInProgress,
-					isUploadFailed,
-					retryMessage,
-				} ) }
-			</View>
-		);
-	}
-}
-
-export default MediaUploadProgress;

package/src/components/media-upload-progress/styles.native.scss

@@ -1,15 +0,0 @@
-.mediaUploadProgress {
-	flex: 1;
-	z-index: 1;
-}
-
-.progressBar {
-	background-color: $gray-lighten-30;
-	z-index: 1;
-	height: 6px;
-	margin-bottom: -6px;
-}
-
-.progressBarHidden {
-	background-color: transparent;
-}

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

@@ -1,220 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import {
-	subscribeMediaUpload,
-	sendMediaUpload,
-} from '@wordpress/react-native-bridge';
-
-/**
- * Internal dependencies
- */
-import { MediaUploadProgress } from '../';
-import {
-	MEDIA_UPLOAD_STATE_UPLOADING,
-	MEDIA_UPLOAD_STATE_SUCCEEDED,
-	MEDIA_UPLOAD_STATE_FAILED,
-	MEDIA_UPLOAD_STATE_RESET,
-} from '../constants';
-
-let uploadCallBack;
-subscribeMediaUpload.mockImplementation( ( callback ) => {
-	uploadCallBack = callback;
-} );
-sendMediaUpload.mockImplementation( ( payload ) => {
-	uploadCallBack( payload );
-} );
-
-const MEDIA_ID = 123;
-
-describe( 'MediaUploadProgress component', () => {
-	it( 'renders without crashing', () => {
-		const wrapper = render(
-			<MediaUploadProgress renderContent={ () => {} } />
-		);
-		expect( wrapper ).toBeTruthy();
-	} );
-
-	it( 'listens media upload progress', () => {
-		const renderContentMock = jest.fn();
-		const progress = 0.1;
-		const payload = {
-			state: MEDIA_UPLOAD_STATE_UPLOADING,
-			mediaId: MEDIA_ID,
-			progress,
-		};
-
-		const onUpdateMediaProgress = jest.fn();
-
-		const wrapper = render(
-			<MediaUploadProgress
-				onUpdateMediaProgress={ onUpdateMediaProgress }
-				mediaId={ MEDIA_ID }
-				renderContent={ renderContentMock }
-			/>
-		);
-
-		sendMediaUpload( payload );
-
-		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
-		expect( renderContentMock ).toHaveBeenCalledWith(
-			expect.objectContaining( {
-				isUploadInProgress: true,
-				isUploadFailed: false,
-			} )
-		);
-		expect( onUpdateMediaProgress ).toHaveBeenCalledTimes( 1 );
-		expect( onUpdateMediaProgress ).toHaveBeenCalledWith( payload );
-	} );
-
-	it( 'does not get affected by unrelated media uploads', () => {
-		const renderContentMock = jest.fn();
-		const payload = {
-			state: MEDIA_UPLOAD_STATE_UPLOADING,
-			mediaId: 1,
-			progress: 0.2,
-		};
-		const onUpdateMediaProgress = jest.fn();
-		const wrapper = render(
-			<MediaUploadProgress
-				onUpdateMediaProgress={ onUpdateMediaProgress }
-				mediaId={ MEDIA_ID }
-				renderContent={ renderContentMock }
-			/>
-		);
-
-		sendMediaUpload( payload );
-
-		expect( wrapper.queryByTestId( 'spinner' ) ).toBeNull();
-		expect( onUpdateMediaProgress ).toHaveBeenCalledTimes( 0 );
-	} );
-
-	it( 'listens media upload success', () => {
-		const renderContentMock = jest.fn();
-		const progress = 0.1;
-		const payloadSuccess = {
-			state: MEDIA_UPLOAD_STATE_SUCCEEDED,
-			mediaId: MEDIA_ID,
-		};
-		const payloadUploading = {
-			state: MEDIA_UPLOAD_STATE_UPLOADING,
-			mediaId: MEDIA_ID,
-			progress,
-		};
-
-		const onFinishMediaUploadWithSuccess = jest.fn();
-
-		const wrapper = render(
-			<MediaUploadProgress
-				onFinishMediaUploadWithSuccess={
-					onFinishMediaUploadWithSuccess
-				}
-				mediaId={ MEDIA_ID }
-				renderContent={ renderContentMock }
-			/>
-		);
-
-		sendMediaUpload( payloadUploading );
-
-		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
-
-		sendMediaUpload( payloadSuccess );
-
-		expect( renderContentMock ).toHaveBeenCalledWith(
-			expect.objectContaining( {
-				isUploadInProgress: false,
-			} )
-		);
-		expect( onFinishMediaUploadWithSuccess ).toHaveBeenCalledTimes( 1 );
-		expect( onFinishMediaUploadWithSuccess ).toHaveBeenCalledWith(
-			payloadSuccess
-		);
-	} );
-
-	it( 'listens media upload fail', () => {
-		const renderContentMock = jest.fn();
-		const progress = 0.1;
-		const payloadFail = {
-			state: MEDIA_UPLOAD_STATE_FAILED,
-			mediaId: MEDIA_ID,
-		};
-		const payloadUploading = {
-			state: MEDIA_UPLOAD_STATE_UPLOADING,
-			mediaId: MEDIA_ID,
-			progress,
-		};
-
-		const onFinishMediaUploadWithFailure = jest.fn();
-
-		const wrapper = render(
-			<MediaUploadProgress
-				onFinishMediaUploadWithFailure={
-					onFinishMediaUploadWithFailure
-				}
-				mediaId={ MEDIA_ID }
-				renderContent={ renderContentMock }
-			/>
-		);
-
-		sendMediaUpload( payloadUploading );
-
-		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
-
-		sendMediaUpload( payloadFail );
-
-		expect( renderContentMock ).toHaveBeenCalledWith(
-			expect.objectContaining( {
-				isUploadInProgress: false,
-				isUploadFailed: true,
-			} )
-		);
-		expect( onFinishMediaUploadWithFailure ).toHaveBeenCalledTimes( 1 );
-		expect( onFinishMediaUploadWithFailure ).toHaveBeenCalledWith(
-			payloadFail
-		);
-	} );
-
-	it( 'listens media upload reset', () => {
-		const renderContentMock = jest.fn();
-		const progress = 0.1;
-		const payloadReset = {
-			state: MEDIA_UPLOAD_STATE_RESET,
-			mediaId: MEDIA_ID,
-		};
-		const payloadUploading = {
-			state: MEDIA_UPLOAD_STATE_UPLOADING,
-			mediaId: MEDIA_ID,
-			progress,
-		};
-
-		const onMediaUploadStateReset = jest.fn();
-
-		const wrapper = render(
-			<MediaUploadProgress
-				onMediaUploadStateReset={ onMediaUploadStateReset }
-				mediaId={ MEDIA_ID }
-				renderContent={ renderContentMock }
-			/>
-		);
-
-		sendMediaUpload( payloadUploading );
-
-		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
-
-		sendMediaUpload( payloadReset );
-
-		expect( renderContentMock ).toHaveBeenCalledWith(
-			expect.objectContaining( {
-				isUploadInProgress: false,
-				isUploadFailed: false,
-			} )
-		);
-		expect( onMediaUploadStateReset ).toHaveBeenCalledTimes( 1 );
-		expect( onMediaUploadStateReset ).toHaveBeenCalledWith( payloadReset );
-	} );
-} );

package/src/components/plain-text/index.native.js

@@ -1,164 +0,0 @@
-/**
- * External dependencies
- */
-import { TextInput, Platform, Dimensions } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { getPxFromCssUnit } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import RichText from '../rich-text';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-export default class PlainText extends Component {
-	constructor() {
-		super( ...arguments );
-		this.isAndroid = Platform.OS === 'android';
-
-		this.onChangeTextInput = this.onChangeTextInput.bind( this );
-		this.onChangeRichText = this.onChangeRichText.bind( this );
-	}
-
-	componentDidMount() {
-		// If isSelected is true, we should request the focus on this TextInput.
-		if (
-			this._input &&
-			this._input.isFocused() === false &&
-			this.props.isSelected
-		) {
-			if ( this.isAndroid ) {
-				/*
-				 * There seems to be an issue in React Native where the keyboard doesn't show if called shortly after rendering.
-				 * As a common work around this delay is used.
-				 * https://github.com/facebook/react-native/issues/19366#issuecomment-400603928
-				 */
-				this.timeoutID = setTimeout( () => {
-					this._input.focus();
-				}, 100 );
-			} else {
-				this._input.focus();
-			}
-		}
-	}
-
-	componentDidUpdate( prevProps ) {
-		if ( ! this.props.isSelected && prevProps.isSelected ) {
-			this._input?.blur();
-		}
-	}
-
-	componentWillUnmount() {
-		if ( this.isAndroid ) {
-			clearTimeout( this.timeoutID );
-		}
-	}
-
-	focus() {
-		this._input?.focus();
-	}
-
-	blur() {
-		this._input?.blur();
-	}
-
-	getFontSize() {
-		const { style } = this.props;
-
-		if ( ! style?.fontSize ) {
-			return;
-		}
-
-		const { width, height } = Dimensions.get( 'window' );
-		const cssUnitOptions = { height, width };
-
-		return {
-			fontSize: parseFloat(
-				getPxFromCssUnit( style.fontSize, cssUnitOptions )
-			),
-		};
-	}
-
-	replaceLineBreakTags( value ) {
-		return value?.replace( RegExp( '<br>', 'gim' ), '\n' );
-	}
-
-	onChangeTextInput( event ) {
-		const { onChange } = this.props;
-		onChange( event.nativeEvent.text );
-	}
-
-	onChangeRichText( value ) {
-		const { onChange } = this.props;
-		// The <br> tags have to be replaced with new line characters
-		// as the content of plain text shouldn't contain HTML tags.
-		onChange( this.replaceLineBreakTags( value ) );
-	}
-
-	render() {
-		const { style, __experimentalVersion, onFocus, ...otherProps } =
-			this.props;
-		const textStyles = [
-			style || styles[ 'block-editor-plain-text' ],
-			this.getFontSize(),
-		];
-
-		if ( __experimentalVersion === 2 ) {
-			const disableFormattingProps = {
-				withoutInteractiveFormatting: true,
-				disableEditingMenu: true,
-				__unstableDisableFormats: true,
-				disableSuggestions: true,
-			};
-
-			const forcePlainTextProps = {
-				preserveWhiteSpace: true,
-				__unstablePastePlainText: true,
-				multiline: false,
-			};
-
-			const fontProps = {
-				fontFamily: style?.fontFamily,
-				fontSize: style?.fontSize,
-				fontWeight: style?.fontWeight,
-			};
-
-			return (
-				<RichText
-					{ ...otherProps }
-					{ ...disableFormattingProps }
-					{ ...forcePlainTextProps }
-					{ ...fontProps }
-					identifier="content"
-					style={ style }
-					onChange={ this.onChangeRichText }
-					unstableOnFocus={ onFocus }
-				/>
-			);
-		}
-
-		return (
-			<TextInput
-				{ ...this.props }
-				ref={ ( x ) => ( this._input = x ) }
-				onChange={ this.onChangeTextInput }
-				onFocus={ this.props.onFocus } // Always assign onFocus as a props.
-				onBlur={ this.props.onBlur } // Always assign onBlur as a props.
-				fontFamily={
-					( this.props.style && this.props.style.fontFamily ) ||
-					styles[ 'block-editor-plain-text' ].fontFamily
-				}
-				style={ textStyles }
-				scrollEnabled={ false }
-			/>
-		);
-	}
-}

package/src/components/plain-text/style.native.scss

@@ -1,10 +0,0 @@
-
-.block-editor-plain-text {
-	font-family: $default-regular-font;
-	box-shadow: none;
-
-	border-width: 0;
-
-	padding: 0;
-	margin: 0;
-}

package/src/components/provider/index.native.js

@@ -1,32 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import withRegistryProvider from './with-registry-provider';
-import useBlockSync from './use-block-sync';
-import { store as blockEditorStore } from '../../store';
-import { BlockRefsProvider } from './block-refs-provider';
-
-/** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
-
-const BlockEditorProvider = withRegistryProvider( function ( props ) {
-	const { children, settings } = props;
-
-	const { updateSettings } = useDispatch( blockEditorStore );
-	useEffect( () => {
-		updateSettings( settings );
-	}, [ settings ] );
-
-	// Syncs the entity provider with changes in the block-editor store.
-	useBlockSync( props );
-
-	return <BlockRefsProvider>{ children }</BlockRefsProvider>;
-} );
-
-export default BlockEditorProvider;
-export { BlockEditorProvider as ExperimentalBlockEditorProvider };