@wordpress/block-library 9.48.0 → 10.0.0

package/src/embed/embed-loading.native.js

@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import { ActivityIndicator, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-
-const EmbedLoading = () => {
-	const style = usePreferredColorSchemeStyle(
-		styles[ 'embed-preview__loading' ],
-		styles[ 'embed-preview__loading--dark' ]
-	);
-
-	return (
-		<View style={ style }>
-			<ActivityIndicator animating />
-		</View>
-	);
-};
-
-export default EmbedLoading;

package/src/embed/embed-no-preview.native.js

@@ -1,230 +0,0 @@
-/**
- * External dependencies
- */
-import { TouchableOpacity, TouchableWithoutFeedback, Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { View } from '@wordpress/primitives';
-
-import { __, sprintf } from '@wordpress/i18n';
-import { useRef, useState } from '@wordpress/element';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { requestPreview } from '@wordpress/react-native-bridge';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import {
-	BottomSheet,
-	Icon as WCIcon,
-	TextControl,
-} from '@wordpress/components';
-import { help } from '@wordpress/icons';
-import { BlockIcon } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-
-const EmbedNoPreview = ( {
-	label,
-	icon,
-	isSelected,
-	onPress,
-	previewable,
-	isDefaultEmbedInfo,
-} ) => {
-	const shouldRequestReview = useRef( false );
-	const [ isSheetVisible, setIsSheetVisible ] = useState( false );
-
-	const { postType } = useSelect( ( select ) => ( {
-		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
-	} ) );
-
-	const containerStyle = usePreferredColorSchemeStyle(
-		styles.embed__container,
-		styles[ 'embed__container--dark' ]
-	);
-	const labelStyle = usePreferredColorSchemeStyle(
-		styles.embed__label,
-		styles[ 'embed__label--dark' ]
-	);
-	const descriptionStyle = usePreferredColorSchemeStyle(
-		styles.embed__description,
-		styles[ 'embed__description--dark' ]
-	);
-	const helpIconStyle = usePreferredColorSchemeStyle(
-		styles[ 'embed-no-preview__help-icon' ],
-		styles[ 'embed-no-preview__help-icon--dark' ]
-	);
-
-	const sheetIconStyle = usePreferredColorSchemeStyle(
-		styles[ 'embed-no-preview__sheet-icon' ],
-		styles[ 'embed-no-preview__sheet-icon--dark' ]
-	);
-	const sheetTitleStyle = usePreferredColorSchemeStyle(
-		styles[ 'embed-no-preview__sheet-title' ],
-		styles[ 'embed-no-preview__sheet-title--dark' ]
-	);
-	const sheetDescriptionStyle = usePreferredColorSchemeStyle(
-		styles[ 'embed-no-preview__sheet-description' ],
-		styles[ 'embed-no-preview__sheet-description--dark' ]
-	);
-	const sheetButtonStyle = usePreferredColorSchemeStyle(
-		styles[ 'embed-no-preview__sheet-button' ],
-		styles[ 'embed-no-preview__sheet-button--dark' ]
-	);
-
-	const previewButtonA11yHint =
-		postType === 'page'
-			? __( 'Double tap to preview page.' )
-			: __( 'Double tap to preview post.' );
-	const previewButtonText =
-		postType === 'page' ? __( 'Preview page' ) : __( 'Preview post' );
-	const comingSoonDescription =
-		postType === 'page'
-			? sprintf(
-					// translators: %s: embed block variant's label e.g: "Twitter".
-					__(
-						'We’re working hard on adding support for %s previews. In the meantime, you can preview the embedded content on the page.'
-					),
-					label
-			  )
-			: sprintf(
-					// translators: %s: embed block variant's label e.g: "Twitter".
-					__(
-						'We’re working hard on adding support for %s previews. In the meantime, you can preview the embedded content on the post.'
-					),
-					label
-			  );
-
-	function onOpenSheet() {
-		setIsSheetVisible( true );
-	}
-
-	function onCloseSheet() {
-		setIsSheetVisible( false );
-	}
-
-	function onDismissSheet() {
-		// The preview request has to be done after the bottom sheet modal is dismissed,
-		// otherwise the preview native modal is not displayed.
-		if ( shouldRequestReview.current ) {
-			requestPreview();
-		}
-		shouldRequestReview.current = false;
-	}
-
-	function onPressContainer() {
-		onPress();
-		onOpenSheet();
-	}
-
-	function onPressHelp() {
-		onPressContainer();
-	}
-
-	const embedNoProviderPreview = (
-		<>
-			<TouchableWithoutFeedback
-				accessibilityRole="button"
-				accessibilityHint={ previewButtonA11yHint }
-				disabled={ ! isSelected }
-				onPress={ onPressContainer }
-			>
-				<View style={ containerStyle }>
-					<BlockIcon icon={ icon } />
-					<Text style={ labelStyle }>{ label }</Text>
-					<Text style={ descriptionStyle }>
-						{ sprintf(
-							// translators: %s: embed block variant's label e.g: "Twitter".
-							__( '%s previews not yet available' ),
-							label
-						) }
-					</Text>
-					<Text style={ styles.embed__action }>
-						{ previewButtonText.toUpperCase() }
-					</Text>
-					<TouchableOpacity
-						accessibilityHint={ __( 'Tap here to show help' ) }
-						accessibilityLabel={ __( 'Help button' ) }
-						accessibilityRole="button"
-						disabled={ ! isSelected }
-						onPress={ onPressHelp }
-						style={ helpIconStyle }
-					>
-						<WCIcon
-							icon={ help }
-							fill={ helpIconStyle.fill }
-							size={ helpIconStyle.width }
-						/>
-					</TouchableOpacity>
-				</View>
-			</TouchableWithoutFeedback>
-			<BottomSheet
-				isVisible={ isSheetVisible }
-				hideHeader
-				onDismiss={ onDismissSheet }
-				onClose={ onCloseSheet }
-				testID="embed-no-preview-modal"
-			>
-				<View style={ styles[ 'embed-no-preview__container' ] }>
-					<View style={ sheetIconStyle }>
-						<WCIcon
-							icon={ help }
-							fill={ sheetIconStyle.fill }
-							size={ sheetIconStyle.width }
-						/>
-					</View>
-					<Text style={ sheetTitleStyle }>
-						{ isDefaultEmbedInfo
-							? __( 'Embed block previews are coming soon' )
-							: sprintf(
-									// translators: %s: embed block variant's label e.g: "Twitter".
-									__(
-										'%s embed block previews are coming soon'
-									),
-									label
-							  ) }
-					</Text>
-					<Text style={ sheetDescriptionStyle }>
-						{ comingSoonDescription }
-					</Text>
-				</View>
-				<TextControl
-					label={ previewButtonText }
-					separatorType="topFullWidth"
-					onPress={ () => {
-						shouldRequestReview.current = true;
-						onCloseSheet();
-					} }
-					labelStyle={ sheetButtonStyle }
-				/>
-				<TextControl
-					label={ __( 'Dismiss' ) }
-					separatorType="topFullWidth"
-					onPress={ onCloseSheet }
-					labelStyle={ sheetButtonStyle }
-				/>
-			</BottomSheet>
-		</>
-	);
-
-	return (
-		<>
-			{ previewable ? (
-				embedNoProviderPreview
-			) : (
-				<View style={ containerStyle }>
-					<BlockIcon icon={ icon } />
-					<Text style={ labelStyle }>
-						{ __( 'No preview available' ) }
-					</Text>
-				</View>
-			) }
-		</>
-	);
-};
-
-export default EmbedNoPreview;

package/src/embed/embed-placeholder.native.js

@@ -1,178 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text, TouchableOpacity } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { Icon as WCIcon, Picker } from '@wordpress/components';
-import { BlockIcon } from '@wordpress/block-editor';
-import { useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import { noticeOutline } from '../../../components/src/mobile/gridicons';
-
-const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
-
-const EmbedPlaceholder = ( {
-	icon,
-	isSelected,
-	label,
-	onPress,
-	cannotEmbed,
-	fallback,
-	tryAgain,
-	openEmbedLinkSettings,
-} ) => {
-	const containerSelectedStyle = usePreferredColorSchemeStyle(
-		styles[ 'embed__container-selected' ],
-		styles[ 'embed__container-selected--dark' ]
-	);
-	const containerStyle = [
-		usePreferredColorSchemeStyle(
-			styles.embed__container,
-			styles[ 'embed__container--dark' ]
-		),
-		isSelected && containerSelectedStyle,
-	];
-	const labelStyle = usePreferredColorSchemeStyle(
-		styles.embed__label,
-		styles[ 'embed__label--dark' ]
-	);
-	const descriptionStyle = styles.embed__description;
-	const descriptionErrorStyle = styles[ 'embed__description--error' ];
-	const actionStyle = usePreferredColorSchemeStyle(
-		styles.embed__action,
-		styles[ 'embed__action--dark' ]
-	);
-	const embedIconErrorStyle = styles[ 'embed__icon--error' ];
-
-	const buttonStyles = usePreferredColorSchemeStyle(
-		styles.embed__button,
-		styles[ 'embed__button--dark' ]
-	);
-	const iconStyles = usePreferredColorSchemeStyle(
-		styles.embed__icon,
-		styles[ 'embed__icon--dark' ]
-	);
-
-	const cannotEmbedMenuPickerRef = useRef();
-
-	const errorPickerOptions = {
-		retry: {
-			id: 'retryOption',
-			label: __( 'Retry' ),
-			value: 'retryOption',
-			onSelect: tryAgain,
-		},
-		convertToLink: {
-			id: 'convertToLinkOption',
-			label: __( 'Convert to link' ),
-			value: 'convertToLinkOption',
-			onSelect: fallback,
-		},
-		editLink: {
-			id: 'editLinkOption',
-			label: __( 'Edit link' ),
-			value: 'editLinkOption',
-			onSelect: openEmbedLinkSettings,
-		},
-	};
-
-	const options = [
-		cannotEmbed && errorPickerOptions.retry,
-		cannotEmbed && errorPickerOptions.convertToLink,
-		cannotEmbed && errorPickerOptions.editLink,
-	].filter( Boolean );
-
-	function onPickerSelect( value ) {
-		const selectedItem = options.find( ( item ) => item.value === value );
-		selectedItem.onSelect();
-	}
-
-	// When the content cannot be embedded the onPress should trigger the Picker instead of the onPress prop.
-	function resolveOnPressEvent() {
-		if ( cannotEmbed ) {
-			cannotEmbedMenuPickerRef.current?.presentPicker();
-		} else {
-			onPress();
-		}
-	}
-
-	return (
-		<>
-			<View style={ containerStyle }>
-				{ cannotEmbed ? (
-					<>
-						<WCIcon
-							icon={ noticeOutline }
-							fill={ embedIconErrorStyle.fill }
-							style={ embedIconErrorStyle }
-						/>
-						<Text
-							style={ [
-								descriptionStyle,
-								descriptionErrorStyle,
-							] }
-						>
-							{ __( 'Unable to embed media' ) }
-						</Text>
-						<TouchableOpacity
-							activeOpacity={ 0.5 }
-							accessibilityRole="button"
-							accessibilityHint={ __(
-								'Double tap to view embed options.'
-							) }
-							style={ buttonStyles }
-							hitSlop={ hitSlop }
-							onPress={ resolveOnPressEvent }
-							disabled={ ! isSelected }
-						>
-							<Text style={ actionStyle }>
-								{ __( 'More options' ) }
-							</Text>
-						</TouchableOpacity>
-						<Picker
-							title={ __( 'Embed options' ) }
-							ref={ cannotEmbedMenuPickerRef }
-							options={ options }
-							onChange={ onPickerSelect }
-							hideCancelButton
-							leftAlign
-						/>
-					</>
-				) : (
-					<>
-						<View style={ styles[ 'embed__placeholder-header' ] }>
-							<BlockIcon icon={ icon } fill={ iconStyles.fill } />
-							<Text style={ labelStyle }>{ label }</Text>
-						</View>
-						<TouchableOpacity
-							activeOpacity={ 0.5 }
-							accessibilityRole="button"
-							accessibilityHint={ __(
-								'Double tap to add a link.'
-							) }
-							style={ buttonStyles }
-							hitSlop={ hitSlop }
-							onPress={ resolveOnPressEvent }
-							disabled={ ! isSelected }
-						>
-							<Text style={ actionStyle }>
-								{ __( 'Add link' ) }
-							</Text>
-						</TouchableOpacity>
-					</>
-				) }
-			</View>
-		</>
-	);
-};
-
-export default EmbedPlaceholder;

package/src/embed/embed-preview.native.js

@@ -1,157 +0,0 @@
-/**
- * External dependencies
- */
-import { TouchableWithoutFeedback } from 'react-native';
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { View } from '@wordpress/primitives';
-import {
-	BlockCaption,
-	RichText,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { __, sprintf } from '@wordpress/i18n';
-import { memo, useState } from '@wordpress/element';
-import { SandBox } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { getPhotoHtml } from './util';
-import EmbedNoPreview from './embed-no-preview';
-import WpEmbedPreview from './wp-embed-preview';
-import styles from './styles.scss';
-
-const EmbedPreview = ( {
-	align,
-	className,
-	clientId,
-	icon,
-	insertBlocksAfter,
-	isSelected,
-	label,
-	onFocus,
-	preview,
-	previewable,
-	isProviderPreviewable,
-	type,
-	url,
-	isDefaultEmbedInfo,
-} ) => {
-	const [ isCaptionSelected, setIsCaptionSelected ] = useState( false );
-	const { locale } = useSelect( blockEditorStore ).getSettings();
-
-	const wrapperStyle = styles[ 'embed-preview__wrapper' ];
-	const wrapperAlignStyle =
-		styles[ `embed-preview__wrapper--align-${ align }` ];
-	const sandboxAlignStyle =
-		styles[ `embed-preview__sandbox--align-${ align }` ];
-
-	function accessibilityLabelCreator( caption ) {
-		return RichText.isEmpty( caption )
-			? /* translators: accessibility text. Empty Embed caption. */
-			  __( 'Embed caption. Empty' )
-			: sprintf(
-					/* translators: accessibility text. %s: Embed caption. */
-					__( 'Embed caption. %s' ),
-					caption
-			  );
-	}
-
-	function onEmbedPreviewPress() {
-		setIsCaptionSelected( false );
-	}
-
-	function onFocusCaption() {
-		if ( onFocus ) {
-			onFocus();
-		}
-		if ( ! isCaptionSelected ) {
-			setIsCaptionSelected( true );
-		}
-	}
-
-	const { provider_url: providerUrl } = preview;
-	const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;
-	const parsedHost = new URL( url ).host.split( '.' );
-	const parsedHostBaseUrl = parsedHost
-		.splice( parsedHost.length - 2, parsedHost.length - 1 )
-		.join( '.' );
-	const iframeTitle = sprintf(
-		// translators: %s: host providing embed content e.g: www.youtube.com
-		__( 'Embedded content from %s' ),
-		parsedHostBaseUrl
-	);
-	const sandboxClassnames = clsx(
-		type,
-		className,
-		'wp-block-embed__wrapper'
-	);
-
-	const PreviewContent = 'wp-embed' === type ? WpEmbedPreview : SandBox;
-	const embedWrapper = (
-		<>
-			<TouchableWithoutFeedback
-				onPress={ () => {
-					if ( onFocus ) {
-						onFocus();
-					}
-					if ( isCaptionSelected ) {
-						setIsCaptionSelected( false );
-					}
-				} }
-			>
-				<View
-					pointerEvents="box-only"
-					style={ [ wrapperStyle, wrapperAlignStyle ] }
-				>
-					<PreviewContent
-						html={ html }
-						lang={ locale }
-						title={ iframeTitle }
-						type={ sandboxClassnames }
-						providerUrl={ providerUrl }
-						url={ url }
-						containerStyle={ sandboxAlignStyle }
-					/>
-				</View>
-			</TouchableWithoutFeedback>
-		</>
-	);
-	return (
-		<TouchableWithoutFeedback
-			accessible={ ! isSelected }
-			onPress={ onEmbedPreviewPress }
-			disabled={ ! isSelected }
-		>
-			<View>
-				{ isProviderPreviewable && previewable ? (
-					embedWrapper
-				) : (
-					<EmbedNoPreview
-						label={ label }
-						icon={ icon }
-						isSelected={ isSelected }
-						onPress={ () => setIsCaptionSelected( false ) }
-						previewable={ previewable }
-						isDefaultEmbedInfo={ isDefaultEmbedInfo }
-					/>
-				) }
-				<BlockCaption
-					accessibilityLabelCreator={ accessibilityLabelCreator }
-					accessible
-					clientId={ clientId }
-					insertBlocksAfter={ insertBlocksAfter }
-					isSelected={ isCaptionSelected }
-					onFocus={ onFocusCaption }
-				/>
-			</View>
-		</TouchableWithoutFeedback>
-	);
-};
-
-export default memo( EmbedPreview );