@wordpress/block-library 9.47.0 → 9.48.1

package/src/video/edit.native.js

@@ -1,406 +0,0 @@
-/**
- * External dependencies
- */
-import { View, TouchableWithoutFeedback, Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import {
-	mediaUploadSync,
-	requestImageFailedRetryDialog,
-	requestImageUploadCancelDialog,
-} from '@wordpress/react-native-bridge';
-import {
-	Icon as WCIcon,
-	ToolbarButton,
-	ToolbarGroup,
-	PanelBody,
-} from '@wordpress/components';
-import { withPreferredColorScheme, compose } from '@wordpress/compose';
-import {
-	BlockCaption,
-	MediaPlaceholder,
-	MediaUpload,
-	MediaUploadProgress,
-	MEDIA_TYPE_VIDEO,
-	BlockControls,
-	VIDEO_ASPECT_RATIO,
-	VideoPlayer,
-	InspectorControls,
-	RichText,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { __, sprintf } from '@wordpress/i18n';
-import { isURL, getProtocol } from '@wordpress/url';
-import { doAction, hasAction } from '@wordpress/hooks';
-import { video as SvgIcon, replace } from '@wordpress/icons';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import { createUpgradedEmbedBlock } from '../embed/util';
-import style from './style.scss';
-import SvgIconRetry from './icon-retry';
-import VideoCommonSettings from './edit-common-settings';
-
-const ICON_TYPE = {
-	PLACEHOLDER: 'placeholder',
-	RETRY: 'retry',
-	UPLOAD: 'upload',
-};
-
-class VideoEdit extends Component {
-	constructor( props ) {
-		super( props );
-
-		this.state = {
-			isCaptionSelected: false,
-			videoContainerHeight: 0,
-		};
-
-		this.mediaUploadStateReset = this.mediaUploadStateReset.bind( this );
-		this.onSelectMediaUploadOption =
-			this.onSelectMediaUploadOption.bind( this );
-		this.onSelectURL = this.onSelectURL.bind( this );
-		this.finishMediaUploadWithSuccess =
-			this.finishMediaUploadWithSuccess.bind( this );
-		this.finishMediaUploadWithFailure =
-			this.finishMediaUploadWithFailure.bind( this );
-		this.updateMediaProgress = this.updateMediaProgress.bind( this );
-		this.onVideoPressed = this.onVideoPressed.bind( this );
-		this.onVideoContainerLayout = this.onVideoContainerLayout.bind( this );
-		this.onFocusCaption = this.onFocusCaption.bind( this );
-	}
-
-	componentDidMount() {
-		const { attributes } = this.props;
-		if ( attributes.id && getProtocol( attributes.src ) === 'file:' ) {
-			mediaUploadSync();
-		}
-	}
-
-	componentWillUnmount() {
-		// This action will only exist if the user pressed the trash button on the block holder.
-		if (
-			hasAction( 'blocks.onRemoveBlockCheckUpload' ) &&
-			this.state.isUploadInProgress
-		) {
-			doAction(
-				'blocks.onRemoveBlockCheckUpload',
-				this.props.attributes.id
-			);
-		}
-	}
-
-	static getDerivedStateFromProps( props, state ) {
-		// Avoid a UI flicker in the toolbar by insuring that isCaptionSelected
-		// is updated immediately any time the isSelected prop becomes false.
-		return {
-			isCaptionSelected: props.isSelected && state.isCaptionSelected,
-		};
-	}
-
-	onVideoPressed() {
-		const { attributes } = this.props;
-
-		if ( this.state.isUploadInProgress ) {
-			requestImageUploadCancelDialog( attributes.id );
-		} else if (
-			attributes.id &&
-			getProtocol( attributes.src ) === 'file:'
-		) {
-			requestImageFailedRetryDialog( attributes.id );
-		}
-
-		this.setState( {
-			isCaptionSelected: false,
-		} );
-	}
-
-	onFocusCaption() {
-		if ( ! this.state.isCaptionSelected ) {
-			this.setState( { isCaptionSelected: true } );
-		}
-	}
-
-	updateMediaProgress( payload ) {
-		const { setAttributes } = this.props;
-		if ( payload.mediaUrl ) {
-			setAttributes( { url: payload.mediaUrl } );
-		}
-		if ( ! this.state.isUploadInProgress ) {
-			this.setState( { isUploadInProgress: true } );
-		}
-	}
-
-	finishMediaUploadWithSuccess( payload ) {
-		const { setAttributes } = this.props;
-		setAttributes( { src: payload.mediaUrl, id: payload.mediaServerId } );
-		this.setState( { isUploadInProgress: false } );
-	}
-
-	finishMediaUploadWithFailure( payload ) {
-		const { setAttributes } = this.props;
-		setAttributes( { id: payload.mediaId } );
-		this.setState( { isUploadInProgress: false } );
-	}
-
-	mediaUploadStateReset() {
-		const { setAttributes } = this.props;
-		setAttributes( { id: null, src: null } );
-		this.setState( { isUploadInProgress: false } );
-	}
-
-	onSelectMediaUploadOption( { id, url } ) {
-		const { setAttributes } = this.props;
-		setAttributes( { id, src: url } );
-	}
-
-	onSelectURL( url ) {
-		const { createErrorNotice, onReplace, setAttributes } = this.props;
-
-		if ( isURL( url ) && /^https?:/.test( getProtocol( url ) ) ) {
-			// Check if there's an embed block that handles this URL.
-			const embedBlock = createUpgradedEmbedBlock( {
-				attributes: { url },
-			} );
-			if ( undefined !== embedBlock ) {
-				onReplace( embedBlock );
-				return;
-			}
-
-			setAttributes( { src: url, id: undefined, poster: undefined } );
-		} else {
-			createErrorNotice( __( 'Invalid URL.' ) );
-		}
-	}
-
-	onVideoContainerLayout( event ) {
-		const { width } = event.nativeEvent.layout;
-		const height = width / VIDEO_ASPECT_RATIO;
-		if ( height !== this.state.videoContainerHeight ) {
-			this.setState( { videoContainerHeight: height } );
-		}
-	}
-
-	getIcon( iconType ) {
-		let iconStyle;
-		switch ( iconType ) {
-			case ICON_TYPE.RETRY:
-				return <WCIcon icon={ SvgIconRetry } { ...style.icon } />;
-			case ICON_TYPE.PLACEHOLDER:
-				iconStyle = this.props.getStylesFromColorScheme(
-					style.icon,
-					style.iconDark
-				);
-				break;
-			case ICON_TYPE.UPLOAD:
-				iconStyle = this.props.getStylesFromColorScheme(
-					style.iconUploading,
-					style.iconUploadingDark
-				);
-				break;
-		}
-
-		return <WCIcon icon={ SvgIcon } { ...iconStyle } />;
-	}
-
-	render() {
-		const { setAttributes, attributes, isSelected, wasBlockJustInserted } =
-			this.props;
-		const { id, src } = attributes;
-		const { videoContainerHeight } = this.state;
-
-		const toolbarEditButton = (
-			<MediaUpload
-				allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
-				isReplacingMedia
-				onSelect={ this.onSelectMediaUploadOption }
-				onSelectURL={ this.onSelectURL }
-				render={ ( { open, getMediaOptions } ) => {
-					return (
-						<ToolbarGroup>
-							{ getMediaOptions() }
-							<ToolbarButton
-								label={ __( 'Edit video' ) }
-								icon={ replace }
-								onClick={ open }
-							/>
-						</ToolbarGroup>
-					);
-				} }
-			></MediaUpload>
-		);
-
-		if ( ! src ) {
-			return (
-				<View style={ { flex: 1 } }>
-					<MediaPlaceholder
-						allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
-						onSelect={ this.onSelectMediaUploadOption }
-						onSelectURL={ this.onSelectURL }
-						icon={ this.getIcon( ICON_TYPE.PLACEHOLDER ) }
-						onFocus={ this.props.onFocus }
-						autoOpenMediaUpload={
-							isSelected && wasBlockJustInserted
-						}
-					/>
-				</View>
-			);
-		}
-
-		return (
-			<TouchableWithoutFeedback
-				accessible={ ! isSelected }
-				onPress={ this.onVideoPressed }
-				disabled={ ! isSelected }
-			>
-				<View style={ { flex: 1 } }>
-					{ ! this.state.isCaptionSelected && (
-						<BlockControls>{ toolbarEditButton }</BlockControls>
-					) }
-					{ isSelected && (
-						<InspectorControls>
-							<PanelBody title={ __( 'Settings' ) }>
-								<VideoCommonSettings
-									setAttributes={ setAttributes }
-									attributes={ attributes }
-								/>
-							</PanelBody>
-						</InspectorControls>
-					) }
-					<MediaUploadProgress
-						mediaId={ id }
-						onFinishMediaUploadWithSuccess={
-							this.finishMediaUploadWithSuccess
-						}
-						onFinishMediaUploadWithFailure={
-							this.finishMediaUploadWithFailure
-						}
-						onUpdateMediaProgress={ this.updateMediaProgress }
-						onMediaUploadStateReset={ this.mediaUploadStateReset }
-						renderContent={ ( {
-							isUploadInProgress,
-							isUploadFailed,
-							retryMessage,
-						} ) => {
-							const showVideo =
-								isURL( src ) &&
-								getProtocol( attributes.src ) !== 'file:' &&
-								! isUploadInProgress &&
-								! isUploadFailed;
-
-							const icon = this.getIcon(
-								isUploadFailed
-									? ICON_TYPE.RETRY
-									: ICON_TYPE.UPLOAD
-							);
-							const styleIconContainer = isUploadFailed
-								? style.modalIconRetry
-								: style.modalIcon;
-
-							const iconContainer = (
-								<View style={ styleIconContainer }>
-									{ icon }
-								</View>
-							);
-
-							const videoStyle = {
-								height: videoContainerHeight,
-								...style.video,
-							};
-
-							const containerStyle =
-								showVideo && isSelected
-									? style.containerFocused
-									: style.container;
-
-							return (
-								<View
-									onLayout={ this.onVideoContainerLayout }
-									style={ containerStyle }
-								>
-									{ showVideo && (
-										<View style={ style.videoContainer }>
-											<VideoPlayer
-												isSelected={
-													isSelected &&
-													! this.state
-														.isCaptionSelected
-												}
-												style={ videoStyle }
-												source={ { uri: src } }
-												paused
-											/>
-										</View>
-									) }
-									{ ! showVideo && (
-										<View
-											style={ {
-												height: videoContainerHeight,
-												width: '100%',
-												...this.props.getStylesFromColorScheme(
-													style.placeholderContainer,
-													style.placeholderContainerDark
-												),
-											} }
-										>
-											{ videoContainerHeight > 0 &&
-												iconContainer }
-											{ isUploadFailed && (
-												<Text
-													style={
-														style.uploadFailedText
-													}
-												>
-													{ retryMessage }
-												</Text>
-											) }
-										</View>
-									) }
-								</View>
-							);
-						} }
-					/>
-					<BlockCaption
-						accessible
-						accessibilityLabelCreator={ ( caption ) =>
-							RichText.isEmpty( caption )
-								? /* translators: accessibility text. Empty video caption. */
-								  __( 'Video caption. Empty' )
-								: sprintf(
-										/* translators: accessibility text. %s: video caption. */
-										__( 'Video caption. %s' ),
-										caption
-								  )
-						}
-						clientId={ this.props.clientId }
-						isSelected={ this.state.isCaptionSelected }
-						onFocus={ this.onFocusCaption }
-						onBlur={ this.props.onBlur } // Always assign onBlur as props.
-						insertBlocksAfter={ this.props.insertBlocksAfter }
-					/>
-				</View>
-			</TouchableWithoutFeedback>
-		);
-	}
-}
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => ( {
-		wasBlockJustInserted: select( blockEditorStore ).wasBlockJustInserted(
-			clientId,
-			'inserter_menu'
-		),
-	} ) ),
-	withDispatch( ( dispatch ) => {
-		const { createErrorNotice } = dispatch( noticesStore );
-
-		return { createErrorNotice };
-	} ),
-	withPreferredColorScheme,
-] )( VideoEdit );

package/src/video/icon-retry.native.js

@@ -1,11 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/components';
-
-export default (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
-		<Path d="M0 0h24v24H0z" fill="none" />
-	</SVG>
-);

package/src/video/style.native.scss

@@ -1,81 +0,0 @@
-// @format
-
-.video {
-	width: 100%;
-	height: auto;
-}
-
-.videoContainer {
-	flex: 1;
-	background-color: #000;
-}
-
-.placeholderContainer {
-	flex: 1;
-	justify-content: center;
-	align-items: center;
-	background-color: $gray-light;
-}
-
-.placeholderContainerDark {
-	background-color: $gray-90;
-}
-
-.placeholderIcon {
-	justify-content: center;
-	align-items: center;
-	fill: $gray-dark;
-	background-color: $gray-lighten-30;
-}
-
-.uploadFailedText {
-	color: $gray-dark;
-	font-size: 14;
-	margin-top: 5;
-	text-align: center;
-}
-
-.modalIcon {
-	width: 40px;
-	height: 40px;
-	justify-content: center;
-	align-items: center;
-}
-
-.modalIconRetry {
-	width: 80px;
-	height: 80px;
-	justify-content: center;
-	align-items: center;
-}
-
-.container {
-	flex: 1;
-}
-
-.containerFocused {
-	flex: 1;
-	border-color: $blue-medium;
-	border-width: 2px;
-	border-style: solid;
-}
-
-.icon {
-	fill: $gray-dark;
-	width: 100%;
-	height: 100%;
-}
-
-.iconDark {
-	fill: $white;
-}
-
-.iconUploading {
-	fill: $gray-lighten-20;
-	width: 100%;
-	height: 100%;
-}
-
-.iconUploadingDark {
-	fill: $gray-70;
-}

package/src/video/test/__snapshots__/transforms.native.js.snap

@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Video block transforms 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:video -->
-<figure class="wp-block-video"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video><figcaption class="wp-element-caption">Cloudup video</figcaption></figure>
-<!-- /wp:video --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Video block transforms to Cover block 1`] = `
-"<!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","dimRatio":50,"backgroundType":"video"} -->
-<div class="wp-block-cover"><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 {"align":"center","fontSize":"large"} -->
-<p class="has-text-align-center has-large-font-size">Cloudup video</p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:cover -->"
-`;
-
-exports[`Video block transforms to File block 1`] = `
-"<!-- wp:file {"href":"https://i.cloudup.com/YtZFJbuQCE.mov"} -->
-<div class="wp-block-file"><a href="https://i.cloudup.com/YtZFJbuQCE.mov">Cloudup video</a><a href="https://i.cloudup.com/YtZFJbuQCE.mov" class="wp-block-file__button wp-element-button" download>Download</a></div>
-<!-- /wp:file -->"
-`;
-
-exports[`Video block transforms to Group block 1`] = `
-"<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:video -->
-<figure class="wp-block-video"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video><figcaption class="wp-element-caption">Cloudup video</figcaption></figure>
-<!-- /wp:video --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Video block transforms to Media & Text block 1`] = `
-"<!-- wp:media-text {"mediaType":"video"} -->
-<div class="wp-block-media-text 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 -->
-<p></p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:media-text -->"
-`;

package/src/video/test/edit.native.js

@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	addBlock,
-	dismissModal,
-	fireEvent,
-	initializeEditor,
-	screen,
-	setupCoreBlocks,
-} from 'test/helpers';
-
-setupCoreBlocks( [ 'core/video' ] );
-
-describe( 'Video block', () => {
-	it( 'should gracefully handle invalid URLs', async () => {
-		await initializeEditor();
-
-		await addBlock( screen, 'Video' );
-		fireEvent.press( screen.getByText( 'Insert from URL' ) );
-		fireEvent.changeText(
-			screen.getByPlaceholderText( 'Type a URL' ),
-			'h://wordpress.org/video.mp4'
-		);
-		dismissModal( screen.getByTestId( 'bottom-sheet' ) );
-
-		expect( screen.getByText( 'Invalid URL.' ) ).toBeVisible();
-	} );
-
-	it( 'should render empty state when source is not present', async () => {
-		await initializeEditor( {
-			initialHtml: `
-<!-- wp:video -->
-<figure class="wp-block-video"></figure>
-<!-- /wp:video -->
-		`,
-		} );
-		const addVideoButton = screen.queryByText( 'Add video' );
-		expect( addVideoButton ).toBeVisible();
-	} );
-
-	it( 'should not render empty state when video source is present', async () => {
-		await initializeEditor( {
-			initialHtml: `
-<!-- wp:video {"id":1234} -->
-<figure class="wp-block-video"><video controls src="https://VIDEO_URL.mp4"></video></figure>
-<!-- /wp:video -->
-		`,
-		} );
-		const addVideoButton = screen.queryByText( 'Add video' );
-		expect( addVideoButton ).toBeNull();
-	} );
-} );

package/src/video/test/transforms.native.js

@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlockTransformOptions,
-} from 'test/helpers';
-
-const block = 'Video';
-const initialHtml = `
-<!-- wp:video -->
-<figure class="wp-block-video"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video><figcaption class="wp-element-caption">Cloudup video</figcaption></figure>
-<!-- /wp:video -->`;
-
-const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const nonMediaTransforms = [ 'File' ];
-const blockTransforms = [
-	'Cover',
-	'Media & Text',
-	...transformsWithInnerBlocks,
-	...nonMediaTransforms,
-];
-
-setupCoreBlocks();
-
-describe( `${ block } block transforms`, () => {
-	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
-		const screen = await initializeEditor( { initialHtml } );
-		const newBlock = await transformBlock( screen, block, blockTransform, {
-			isMediaBlock: ! nonMediaTransforms.includes( blockTransform ),
-			hasInnerBlocks:
-				transformsWithInnerBlocks.includes( blockTransform ),
-		} );
-		expect( newBlock ).toBeVisible();
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'matches expected transformation options', async () => {
-		const screen = await initializeEditor( { initialHtml } );
-		const transformOptions = await getBlockTransformOptions(
-			screen,
-			block
-		);
-		expect( transformOptions ).toHaveLength( blockTransforms.length );
-	} );
-} );

package/src/video/transforms.native.js

@@ -1,12 +0,0 @@
-/**
- * Internal dependencies
- */
-import webTransforms from './transforms.js';
-import transformationCategories from '../utils/transformation-categories';
-
-const transforms = {
-	...webTransforms,
-	supportedMobileTransforms: transformationCategories.media,
-};
-
-export default transforms;