@wordpress/block-library 9.48.0 → 10.0.1-next.v.202606191442.0

package/src/media-text/media-container.native.js

@@ -1,393 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	mediaUploadSync,
-	requestImageFailedRetryDialog,
-	requestImageUploadCancelDialog,
-	requestImageFullscreenPreview,
-} from '@wordpress/react-native-bridge';
-import {
-	Icon as WCIcon,
-	Image,
-	IMAGE_DEFAULT_FOCAL_POINT,
-} from '@wordpress/components';
-import {
-	MEDIA_TYPE_IMAGE,
-	MEDIA_TYPE_VIDEO,
-	MediaPlaceholder,
-	MediaUpload,
-	MediaUploadProgress,
-	VIDEO_ASPECT_RATIO,
-	VideoPlayer,
-} from '@wordpress/block-editor';
-import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { isURL, getProtocol } from '@wordpress/url';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { media as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import SvgIconRetry from './icon-retry';
-
-/**
- * Constants
- */
-const ALLOWED_MEDIA_TYPES = [ MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ];
-
-const ICON_TYPE = {
-	PLACEHOLDER: 'placeholder',
-	RETRY: 'retry',
-};
-
-class MediaContainer extends Component {
-	constructor() {
-		super( ...arguments );
-		this.updateMediaProgress = this.updateMediaProgress.bind( this );
-		this.finishMediaUploadWithSuccess =
-			this.finishMediaUploadWithSuccess.bind( this );
-		this.finishMediaUploadWithFailure =
-			this.finishMediaUploadWithFailure.bind( this );
-		this.mediaUploadStateReset = this.mediaUploadStateReset.bind( this );
-		this.onSelectMediaUploadOption =
-			this.onSelectMediaUploadOption.bind( this );
-		this.onMediaPressed = this.onMediaPressed.bind( this );
-
-		this.state = {
-			isUploadInProgress: false,
-		};
-	}
-
-	componentDidMount() {
-		const { mediaId, mediaUrl } = this.props;
-
-		// Make sure we mark any temporary images as failed if they failed while
-		// the editor wasn't open.
-		if ( mediaId && mediaUrl && getProtocol( mediaUrl ) === 'file:' ) {
-			mediaUploadSync();
-		}
-	}
-
-	onSelectMediaUploadOption( params ) {
-		const { id, url, type } = params;
-		const { onSelectMedia } = this.props;
-
-		onSelectMedia( {
-			media_type: type,
-			id,
-			url,
-		} );
-	}
-
-	onMediaPressed() {
-		const { isUploadInProgress } = this.state;
-		const {
-			mediaId,
-			mediaUrl,
-			mediaType,
-			isMediaSelected,
-			onMediaSelected,
-		} = this.props;
-
-		if ( isUploadInProgress ) {
-			requestImageUploadCancelDialog( mediaId );
-		} else if ( mediaId && getProtocol( mediaUrl ) === 'file:' ) {
-			requestImageFailedRetryDialog( mediaId );
-		} else if ( mediaType === MEDIA_TYPE_IMAGE && isMediaSelected ) {
-			requestImageFullscreenPreview( mediaUrl );
-		} else if ( mediaType === MEDIA_TYPE_IMAGE ) {
-			onMediaSelected();
-		}
-	}
-
-	getIcon( iconType ) {
-		const { mediaType, getStylesFromColorScheme } = this.props;
-		let iconStyle;
-		switch ( iconType ) {
-			case ICON_TYPE.RETRY:
-				iconStyle =
-					mediaType === MEDIA_TYPE_IMAGE
-						? styles.iconRetry
-						: getStylesFromColorScheme(
-								styles.iconRetryVideo,
-								styles.iconRetryVideoDark
-						  );
-
-				return <WCIcon icon={ SvgIconRetry } { ...iconStyle } />;
-			case ICON_TYPE.PLACEHOLDER:
-				iconStyle = getStylesFromColorScheme(
-					styles.iconPlaceholder,
-					styles.iconPlaceholderDark
-				);
-				break;
-		}
-		return <WCIcon icon={ icon } { ...iconStyle } />;
-	}
-
-	updateMediaProgress( payload ) {
-		const { isUploadInProgress } = this.state;
-		const { mediaUrl, state } = payload;
-		const { mediaType, onMediaThumbnailUpdate } = this.props;
-
-		if ( ! isUploadInProgress ) {
-			this.setState( { isUploadInProgress: true } );
-		}
-
-		if (
-			isUploadInProgress &&
-			mediaType === MEDIA_TYPE_IMAGE &&
-			mediaUrl &&
-			! state
-		) {
-			onMediaThumbnailUpdate( mediaUrl );
-		}
-	}
-
-	finishMediaUploadWithSuccess( payload ) {
-		const { onMediaUpdate } = this.props;
-
-		onMediaUpdate( {
-			id: payload.mediaServerId,
-			url: payload.mediaUrl,
-		} );
-		this.setState( { isUploadInProgress: false } );
-	}
-
-	finishMediaUploadWithFailure() {
-		this.setState( { isUploadInProgress: false } );
-	}
-
-	mediaUploadStateReset() {
-		const { onMediaUpdate } = this.props;
-
-		onMediaUpdate( { id: null, url: null } );
-		this.setState( { isUploadInProgress: false } );
-	}
-
-	renderImage( params, openMediaOptions ) {
-		const { isUploadInProgress } = this.state;
-		const {
-			alignmentStyles,
-			focalPoint,
-			imageFill,
-			isMediaSelected,
-			isSelected,
-			mediaAlt,
-			mediaUrl,
-			mediaWidth,
-			shouldStack,
-		} = this.props;
-		const { isUploadFailed, isUploadPaused, retryMessage } = params;
-		const focalPointValues = ! focalPoint
-			? IMAGE_DEFAULT_FOCAL_POINT
-			: focalPoint;
-
-		return (
-			<View
-				style={ [
-					imageFill && styles.imageWithFocalPoint,
-					imageFill &&
-						shouldStack && {
-							height: styles.imageFill.height,
-						},
-				] }
-			>
-				<TouchableWithoutFeedback
-					accessible={ ! isSelected }
-					onPress={ this.onMediaPressed }
-					disabled={ ! isSelected }
-				>
-					<View
-						style={ [
-							imageFill && styles.imageCropped,
-							styles.mediaImageContainer,
-							! isUploadInProgress && alignmentStyles,
-						] }
-					>
-						<Image
-							align="center"
-							alt={ mediaAlt }
-							focalPoint={ imageFill && focalPointValues }
-							isSelected={ isMediaSelected }
-							isUploadFailed={ isUploadFailed }
-							isUploadPaused={ isUploadPaused }
-							isUploadInProgress={ isUploadInProgress }
-							onSelectMediaUploadOption={
-								this.onSelectMediaUploadOption
-							}
-							openMediaOptions={ openMediaOptions }
-							retryMessage={ retryMessage }
-							url={ mediaUrl }
-							width={ ! isUploadInProgress && mediaWidth }
-						/>
-					</View>
-				</TouchableWithoutFeedback>
-			</View>
-		);
-	}
-
-	renderVideo( params ) {
-		const {
-			alignmentStyles,
-			mediaUrl,
-			isSelected,
-			getStylesFromColorScheme,
-		} = this.props;
-		const { isUploadInProgress } = this.state;
-		const { isUploadFailed, retryMessage } = params;
-		const showVideo =
-			isURL( mediaUrl ) && ! isUploadInProgress && ! isUploadFailed;
-
-		const videoPlaceholderStyles = getStylesFromColorScheme(
-			styles.videoPlaceholder,
-			styles.videoPlaceholderDark
-		);
-		const retryVideoTextStyles = [
-			styles.uploadFailedText,
-			getStylesFromColorScheme(
-				styles.uploadFailedTextVideo,
-				styles.uploadFailedTextVideoDark
-			),
-		];
-
-		return (
-			<View style={ styles.mediaVideo }>
-				<TouchableWithoutFeedback
-					accessible={ ! isSelected }
-					onPress={ this.onMediaPressed }
-					disabled={ ! isSelected }
-				>
-					<View style={ [ styles.videoContainer, alignmentStyles ] }>
-						<View
-							style={ [
-								styles.videoContent,
-								{
-									aspectRatio: VIDEO_ASPECT_RATIO,
-								},
-							] }
-						>
-							{ showVideo && (
-								<View style={ styles.videoPlayer }>
-									<VideoPlayer
-										isSelected={ isSelected }
-										style={ styles.video }
-										source={ { uri: mediaUrl } }
-										paused
-									/>
-								</View>
-							) }
-							{ ! showVideo && (
-								<View style={ videoPlaceholderStyles }>
-									<View style={ styles.modalIcon }>
-										{ isUploadFailed
-											? this.getIcon( ICON_TYPE.RETRY )
-											: this.getIcon(
-													ICON_TYPE.PLACEHOLDER
-											  ) }
-									</View>
-									{ isUploadFailed && (
-										<Text style={ retryVideoTextStyles }>
-											{ retryMessage }
-										</Text>
-									) }
-								</View>
-							) }
-						</View>
-					</View>
-				</TouchableWithoutFeedback>
-			</View>
-		);
-	}
-
-	renderContent( params, openMediaOptions ) {
-		const { mediaType } = this.props;
-		let mediaElement = null;
-
-		switch ( mediaType ) {
-			case MEDIA_TYPE_IMAGE:
-				mediaElement = this.renderImage( params, openMediaOptions );
-				break;
-			case MEDIA_TYPE_VIDEO:
-				mediaElement = this.renderVideo( params );
-				break;
-		}
-		return mediaElement;
-	}
-
-	renderPlaceholder() {
-		return (
-			<MediaPlaceholder
-				icon={ this.getIcon( ICON_TYPE.PLACEHOLDER ) }
-				labels={ {
-					title: __( 'Media area' ),
-				} }
-				onSelect={ this.onSelectMediaUploadOption }
-				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				onFocus={ this.props.onFocus }
-				className="no-block-outline"
-			/>
-		);
-	}
-
-	render() {
-		const { mediaUrl, mediaId, mediaType, onSetOpenPickerRef } = this.props;
-		const coverUrl = mediaType === MEDIA_TYPE_IMAGE ? mediaUrl : null;
-
-		if ( mediaUrl ) {
-			return (
-				<MediaUpload
-					isReplacingMedia
-					onSelect={ this.onSelectMediaUploadOption }
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					value={ mediaId }
-					render={ ( { open, getMediaOptions } ) => {
-						onSetOpenPickerRef( open );
-
-						return (
-							<>
-								{ getMediaOptions() }
-
-								<MediaUploadProgress
-									enablePausedUploads={
-										mediaType === MEDIA_TYPE_IMAGE
-									}
-									coverUrl={ coverUrl }
-									mediaId={ mediaId }
-									onUpdateMediaProgress={
-										this.updateMediaProgress
-									}
-									onFinishMediaUploadWithSuccess={
-										this.finishMediaUploadWithSuccess
-									}
-									onFinishMediaUploadWithFailure={
-										this.finishMediaUploadWithFailure
-									}
-									onMediaUploadStateReset={
-										this.mediaUploadStateReset
-									}
-									renderContent={ ( params ) => {
-										return this.renderContent(
-											params,
-											open
-										);
-									} }
-								/>
-							</>
-						);
-					} }
-				/>
-			);
-		}
-		return this.renderPlaceholder();
-	}
-}
-
-export default compose( [ withPreferredColorScheme ] )( MediaContainer );

package/src/media-text/style.native.scss

@@ -1,191 +0,0 @@
-$media-to-text: 12px;
-
-.wp-block-media-text {
-	display: flex;
-	align-items: flex-start;
-	flex-direction: row;
-}
-
-.has-media-on-the-right {
-	/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
-	flex-direction: row-reverse;
-}
-
-.is-stacked-on-mobile {
-	flex-direction: column;
-
-	&.has-media-on-the-right {
-		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the column-reverse value. */
-		flex-direction: column-reverse;
-	}
-}
-
-.is-vertically-aligned-top {
-	align-items: flex-start;
-}
-
-.is-vertically-aligned-center {
-	align-items: center;
-}
-
-.is-vertically-aligned-bottom {
-	align-items: flex-end;
-}
-
-.is-selected {
-	padding-bottom: 8;
-}
-
-.imageContainer {
-	align-items: center;
-	background-color: $gray-lighten-30;
-	height: 144;
-	justify-content: center;
-}
-
-.modalIcon {
-	width: 24px;
-	height: 24px;
-	justify-content: center;
-	align-items: center;
-}
-
-.iconPlaceholder {
-	fill: $gray-dark;
-	width: 100%;
-	height: 100%;
-}
-
-.iconPlaceholderDark {
-	fill: $white;
-}
-
-.iconRetry {
-	fill: #fff;
-	width: 24px;
-	height: 24px;
-}
-
-.iconRetryVideo {
-	fill: $gray-dark;
-}
-
-.iconRetryVideoDark {
-	fill: #fff;
-}
-
-.mediaVideo {
-	flex: 1;
-}
-
-.video {
-	width: 100%;
-	height: 100%;
-}
-
-.videoContainer {
-	flex: 1;
-	flex-direction: row;
-}
-
-.videoContent {
-	width: 100%;
-}
-
-.videoPlayer {
-	flex: 1;
-	background-color: #000;
-}
-
-.videoPlaceholder {
-	width: 100%;
-	height: 100%;
-	align-items: center;
-	background-color: $gray-light;
-	justify-content: center;
-}
-
-.videoPlaceholderDark {
-	background-color: $gray-90;
-}
-
-.uploadFailed {
-	background-color: rgba(0, 0, 0, 0.5);
-	flex: 1;
-}
-
-.uploadFailedText {
-	color: #fff;
-	font-size: 14;
-	margin-top: 5;
-	text-align: center;
-}
-
-.uploadFailedTextVideo {
-	color: $gray-dark;
-}
-
-.uploadFailedTextVideoDark {
-	color: $white;
-}
-
-// Inner blocks STACK
-.innerBlockStackMediaLeft {
-	margin-top: $media-to-text;
-}
-
-.innerBlockStackMediaRight {
-	margin-bottom: $media-to-text;
-}
-
-// Inner blocks
-.innerBlock {
-	padding-right: $media-to-text;
-	padding-left: $media-to-text;
-}
-
-.innerBlockPaddings {
-	padding: 0 $media-to-text $media-to-text;
-}
-
-// Media STACK
-.mediaStackLeft {
-	margin-bottom: $media-to-text;
-}
-
-.mediaStackRight {
-	margin-top: $media-to-text;
-}
-
-// Media
-.mediaLeft {
-	padding-right: $media-to-text;
-}
-
-.mediaRight {
-	padding-left: $media-to-text;
-}
-
-.imageWithFocalPoint {
-	overflow: hidden;
-	width: 100%;
-	height: 100%;
-	position: relative;
-}
-
-.imageFill {
-	height: 200px;
-}
-
-.imageCropped {
-	min-height: 100px;
-}
-
-.mediaImageContainer {
-	height: 100%;
-	flex-direction: row;
-}
-
-.mediaAreaPadding {
-	width: $media-to-text;
-}

package/src/media-text/test/__snapshots__/transforms.native.js.snap

@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Media & Text block transformations with Image to Columns block 1`] = `
-"<!-- wp:columns -->
-<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
-<div class="wp-block-column" style="flex-basis:100%"><!-- wp:media-text {"align":"wide","mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-4674 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
-<p class="has-large-font-size">Mountain</p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:media-text --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Media & Text block transformations with Image to Cover block 1`] = `
-"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":4674,"dimRatio":50,"align":"wide"} -->
-<div class="wp-block-cover alignwide"><img class="wp-block-cover__image-background wp-image-4674" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"className":"has-large-font-size"} -->
-<p class="has-large-font-size">Mountain</p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:cover -->"
-`;
-
-exports[`Media & Text block transformations with Image to Group block 1`] = `
-"<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide"><!-- wp:media-text {"align":"wide","mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-4674 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
-<p class="has-large-font-size">Mountain</p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:media-text --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Media & Text block transformations with Image to Image block 1`] = `
-"<!-- wp:image {"id":4674} -->
-<figure class="wp-block-image"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-4674"/></figure>
-<!-- /wp:image -->"
-`;
-
-exports[`Media & Text block transformations with Video to Columns block 1`] = `
-"<!-- wp:columns -->
-<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
-<div class="wp-block-column" style="flex-basis:100%"><!-- wp:media-text {"align":"wide","mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
-<p class="has-large-font-size">Cloudup</p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:media-text --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Media & Text block transformations with Video to Cover block 1`] = `
-"<!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":4675,"dimRatio":50,"backgroundType":"video","align":"wide"} -->
-<div class="wp-block-cover alignwide"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" data-object-fit="cover"></video><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"className":"has-large-font-size"} -->
-<p class="has-large-font-size">Cloudup</p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:cover -->"
-`;
-
-exports[`Media & Text block transformations with Video to Group block 1`] = `
-"<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide"><!-- wp:media-text {"align":"wide","mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
-<p class="has-large-font-size">Cloudup</p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:media-text --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Media & Text block transformations with Video to Video block 1`] = `
-"<!-- wp:video {"id":4675} -->
-<figure class="wp-block-video"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure>
-<!-- /wp:video -->"
-`;

package/src/media-text/test/edit.native.js

@@ -1,58 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	addBlock,
-	fireEvent,
-	initializeEditor,
-	screen,
-	setupCoreBlocks,
-} from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import {
-	requestMediaPicker,
-	sendMediaUpload,
-	subscribeMediaUpload,
-} from '@wordpress/react-native-bridge';
-import { MEDIA_UPLOAD_STATE_PAUSED } from '@wordpress/block-editor';
-
-let uploadCallBack;
-subscribeMediaUpload.mockImplementation( ( callback ) => {
-	uploadCallBack = callback;
-} );
-sendMediaUpload.mockImplementation( ( payload ) => {
-	uploadCallBack( payload );
-} );
-
-setupCoreBlocks( [ 'core/media-text' ] );
-
-describe( 'Media & Text block edit', () => {
-	it( 'should display an error message for failed video uploads', async () => {
-		requestMediaPicker.mockImplementation(
-			( source, filter, multiple, callback ) => {
-				callback( {
-					id: 1,
-					url: 'file://video.mp4',
-					type: 'video',
-				} );
-			}
-		);
-		await initializeEditor();
-		await addBlock( screen, 'Media & Text' );
-		fireEvent.press( screen.getByText( 'Add image or video' ) );
-		fireEvent.press( screen.getByText( 'Choose from device' ) );
-
-		sendMediaUpload( {
-			mediaId: 1,
-			state: MEDIA_UPLOAD_STATE_PAUSED,
-			progress: 0,
-		} );
-
-		expect(
-			screen.getByText( 'Failed to insert media.\nTap for more info.' )
-		).toBeVisible();
-	} );
-} );