@wordpress/block-library 6.0.1-next.253d9b6e21.0 → 6.0.3

package/src/cover/transforms.js

@@ -13,11 +13,12 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/image' ],
-			transform: ( { caption, url, align, id, anchor, style } ) =>
+			transform: ( { caption, url, alt, align, id, anchor, style } ) =>
 				createBlock(
 					'core/cover',
 					{
 						url,
+						alt,
 						align,
 						id,
 						anchor,
@@ -117,10 +118,11 @@ const transforms = {
 					! customGradient
 				);
 			},
-			transform: ( { title, url, align, id, anchor, style } ) =>
+			transform: ( { title, url, alt, align, id, anchor, style } ) =>
 				createBlock( 'core/image', {
 					caption: title,
 					url,
+					alt,
 					align,
 					id,
 					anchor,

package/src/editor.scss

@@ -1,8 +1,3 @@
-// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#start-resizable-editor-section {
-	display: none;
-}
-
 @import "./archives/editor.scss";
 @import "./audio/editor.scss";
 @import "./block/editor.scss";
@@ -16,7 +11,6 @@
 @import "./freeform/editor.scss";
 @import "./gallery/editor.scss";
 @import "./group/editor.scss";
-@import "./heading/editor.scss";
 @import "./html/editor.scss";
 @import "./image/editor.scss";
 @import "./latest-posts/editor.scss";
@@ -24,12 +18,11 @@
 @import "./more/editor.scss";
 @import "./navigation/editor.scss";
 @import "./navigation-link/editor.scss";
+@import "./navigation-submenu/editor.scss";
 @import "./nextpage/editor.scss";
 @import "./page-list/editor.scss";
 @import "./paragraph/editor.scss";
-@import "./post-content/editor.scss";
 @import "./post-excerpt/editor.scss";
-@import "./post-author/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./rss/editor.scss";
 @import "./search/editor.scss";
@@ -45,47 +38,27 @@
 @import "./template-part/editor.scss";
 @import "./text-columns/editor.scss";
 @import "./video/editor.scss";
-@import "./query-title/editor.scss";
 @import "./post-template/editor.scss";
 @import "./query/editor.scss";
 @import "./query-pagination/editor.scss";
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
-@import "./term-description/editor.scss";
 
 :root .editor-styles-wrapper {
-	// Background colors.
 	@include background-colors-deprecated();
-
-	// Foreground colors.
 	@include foreground-colors-deprecated();
-
-	// Gradients
 	@include gradient-colors-deprecated();
 }
 
-// Font sizes.
+// Font sizes (not used now, kept because of backward compatibility).
+//
 // The reason we add the editor class wrapper here is
 // to avoid enqueing the classes twice: here and in ./editor.scss
-.editor-styles-wrapper .has-small-font-size {
-	font-size: 13px;
-}
-
-.editor-styles-wrapper .has-regular-font-size, // Not used now, kept because of backward compatibility.
-.editor-styles-wrapper .has-normal-font-size {
+.editor-styles-wrapper .has-regular-font-size {
 	font-size: 16px;
 }
 
-.editor-styles-wrapper .has-medium-font-size {
-	font-size: 20px;
-}
-
-.editor-styles-wrapper .has-large-font-size {
-	font-size: 36px;
-}
-
-.editor-styles-wrapper .has-larger-font-size, // Not used now, kept because of backward compatibility.
-.editor-styles-wrapper .has-huge-font-size {
+.editor-styles-wrapper .has-larger-font-size {
 	font-size: 42px;
 }
 
@@ -95,8 +68,3 @@
  * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper.
  * This allows us to create normalization styles that are easily overridden by editor styles.
  */
-
-// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#end-resizable-editor-section {
-	display: none;
-}

package/src/embed/edit.js

@@ -29,16 +29,6 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
 
-function getResponsiveHelp( checked ) {
-	return checked
-		? __(
-				'This embed will preserve its aspect ratio when the browser is resized.'
-		  )
-		: __(
-				'This embed may not preserve its aspect ratio when the browser is resized.'
-		  );
-}
-
 const EmbedEdit = ( props ) => {
 	const {
 		attributes: {
@@ -227,6 +217,7 @@ const EmbedEdit = ( props ) => {
 	// after the preview has been rendered can result in unwanted
 	// clipping or scrollbars. The `getAttributesFromPreview` function
 	// that `getMergedAttributes` uses is memoized so that we're not
+	// calculating them on every render.
 	const {
 		caption,
 		type,
@@ -242,7 +233,6 @@ const EmbedEdit = ( props ) => {
 				themeSupportsResponsive={ themeSupportsResponsive }
 				blockSupportsResponsive={ responsive }
 				allowResponsive={ allowResponsive }
-				getResponsiveHelp={ getResponsiveHelp }
 				toggleResponsive={ toggleResponsive }
 				switchBackToURLInput={ () => setIsEditingURL( true ) }
 			/>

package/src/embed/edit.native.js

@@ -3,6 +3,8 @@
  */
 import {
 	createUpgradedEmbedBlock,
+	getClassNames,
+	fallback,
 	getAttributesFromPreview,
 	getEmbedInfoByProvider,
 } from './util';
@@ -23,7 +25,7 @@ import classnames from 'classnames';
  */
 import { _x } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	useBlockProps,
 	store as blockEditorStore,
@@ -31,9 +33,18 @@ import {
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
 
+// The inline preview feature will be released progressible, for this reason
+// the embed will only be considered previewable for the following providers list.
+const PREVIEWABLE_PROVIDERS = [ 'youtube', 'twitter', 'instagram', 'vimeo' ];
+// Some providers are rendering the inline preview as a WordPress embed and
+// are not supported yet, so we need to disallow them with a fixed providers list.
+const NOT_PREVIEWABLE_WP_EMBED_PROVIDERS = [ 'pinterest' ];
+
+const WP_EMBED_TYPE = 'wp-embed';
+
 const EmbedEdit = ( props ) => {
 	const {
-		attributes: { providerNameSlug, previewable, responsive, url },
+		attributes: { align, providerNameSlug, previewable, responsive, url },
 		attributes,
 		isSelected,
 		onReplace,
@@ -47,8 +58,8 @@ const EmbedEdit = ( props ) => {
 		title: _x( 'Embed', 'block title' ),
 		icon: embedContentIcon,
 	};
-	const { icon, title } =
-		getEmbedInfoByProvider( providerNameSlug ) || defaultEmbedInfo;
+	const embedInfoByProvider = getEmbedInfoByProvider( providerNameSlug );
+	const { icon, title } = embedInfoByProvider || defaultEmbedInfo;
 
 	const { wasBlockJustInserted } = useSelect(
 		( select ) => ( {
@@ -61,19 +72,33 @@ const EmbedEdit = ( props ) => {
 	const [ isEditingURL, setIsEditingURL ] = useState(
 		isSelected && wasBlockJustInserted && ! url
 	);
+	const [ showEmbedBottomSheet, setShowEmbedBottomSheet ] = useState(
+		isEditingURL
+	);
+	const { invalidateResolution } = useDispatch( coreStore );
 
-	const { preview, fetching, cannotEmbed } = useSelect(
+	const {
+		preview,
+		fetching,
+		themeSupportsResponsive,
+		cannotEmbed,
+	} = useSelect(
 		( select ) => {
 			const {
 				getEmbedPreview,
+				hasFinishedResolution,
 				isPreviewEmbedFallback,
-				isRequestingEmbedPreview,
+				getThemeSupports,
 			} = select( coreStore );
 			if ( ! url ) {
 				return { fetching: false, cannotEmbed: false };
 			}
 
 			const embedPreview = getEmbedPreview( url );
+			const hasResolvedEmbedPreview = hasFinishedResolution(
+				'getEmbedPreview',
+				[ url ]
+			);
 			const previewIsFallback = isPreviewEmbedFallback( url );
 
 			// The external oEmbed provider does not exist. We got no type info and no html.
@@ -87,16 +112,12 @@ const EmbedEdit = ( props ) => {
 			const validPreview =
 				!! embedPreview && ! badEmbedProvider && ! wordpressCantEmbed;
 
-			// `isRequestingEmbedPreview` is returning false just before an
-			// `apiFetch` is triggered. We're assuming that a fetch is happening
-			// if there is an `attributesUrl` set but there is no data in
-			// `embedPreview` which represents the response returned from the API.
-			const isFetching =
-				isRequestingEmbedPreview( url ) || ( url && ! embedPreview );
-
 			return {
 				preview: validPreview ? embedPreview : undefined,
-				fetching: isFetching,
+				fetching: ! hasResolvedEmbedPreview,
+				themeSupportsResponsive: getThemeSupports()[
+					'responsive-embeds'
+				],
 				cannotEmbed: ! validPreview || previewIsFallback,
 			};
 		},
@@ -104,22 +125,40 @@ const EmbedEdit = ( props ) => {
 	);
 
 	/**
-	 * @return {Object} Attributes derived from the preview, merged with the current attributes.
+	 * Returns the attributes derived from the preview, merged with the current attributes.
+	 *
+	 * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
+	 * @return {Object} Merged attributes.
 	 */
-	const getMergedAttributes = () => {
+	const getMergedAttributes = ( ignorePreviousClassName = false ) => {
 		const { allowResponsive, className } = attributes;
 		return {
 			...attributes,
 			...getAttributesFromPreview(
 				preview,
 				title,
-				className,
+				ignorePreviousClassName ? undefined : className,
 				responsive,
 				allowResponsive
 			),
 		};
 	};
 
+	const toggleResponsive = () => {
+		const { allowResponsive, className } = attributes;
+		const { html } = preview;
+		const newAllowResponsive = ! allowResponsive;
+
+		setAttributes( {
+			allowResponsive: newAllowResponsive,
+			className: getClassNames(
+				html,
+				className,
+				responsive && newAllowResponsive
+			),
+		} );
+	};
+
 	useEffect( () => {
 		if ( ! preview?.html || ! cannotEmbed || fetching ) {
 			return;
@@ -134,15 +173,12 @@ const EmbedEdit = ( props ) => {
 	// Handle incoming preview
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {
-			// Even though we set attributes that get derived from the preview,
-			// we don't access them directly because for the initial render,
-			// the `setAttributes` call will not have taken effect. If we're
-			// rendering responsive content, setting the responsive classes
-			// after the preview has been rendered can result in unwanted
-			// clipping or scrollbars. The `getAttributesFromPreview` function
-			// that `getMergedAttributes` uses is memoized so that we're not
-			// calculating them on every render.
-			setAttributes( getMergedAttributes() );
+			// When obtaining an incoming preview, we set the attributes derived from
+			// the preview data. In this case when getting the merged attributes,
+			// we ignore the previous classname because it might not match the expected
+			// classes by the new preview.
+			setAttributes( getMergedAttributes( true ) );
+
 			if ( onReplace ) {
 				const upgradedBlock = createUpgradedEmbedBlock(
 					props,
@@ -156,6 +192,10 @@ const EmbedEdit = ( props ) => {
 		}
 	}, [ preview, isEditingURL ] );
 
+	useEffect( () => setShowEmbedBottomSheet( isEditingURL ), [
+		isEditingURL,
+	] );
+
 	const blockProps = useBlockProps();
 
 	if ( fetching ) {
@@ -167,32 +207,71 @@ const EmbedEdit = ( props ) => {
 	}
 
 	const showEmbedPlaceholder = ! preview || cannotEmbed;
-	const { type, className: classFromPreview } = getMergedAttributes();
+
+	// Even though we set attributes that get derived from the preview,
+	// we don't access them directly because for the initial render,
+	// the `setAttributes` call will not have taken effect. If we're
+	// rendering responsive content, setting the responsive classes
+	// after the preview has been rendered can result in unwanted
+	// clipping or scrollbars. The `getAttributesFromPreview` function
+	// that `getMergedAttributes` uses is memoized so that we're not
+	// calculating them on every render.
+	const {
+		type,
+		allowResponsive,
+		className: classFromPreview,
+	} = getMergedAttributes();
 	const className = classnames( classFromPreview, props.className );
 
+	const isProviderPreviewable =
+		PREVIEWABLE_PROVIDERS.includes( providerNameSlug ) ||
+		// For WordPress embeds, we enable the inline preview for all its providers
+		// except the ones that are not supported yet.
+		( WP_EMBED_TYPE === type &&
+			! NOT_PREVIEWABLE_WP_EMBED_PROVIDERS.includes( providerNameSlug ) );
+
+	const bottomSheetLabel = WP_EMBED_TYPE === type ? 'WordPress' : title;
+
 	return (
 		<>
 			{ showEmbedPlaceholder ? (
-				<View { ...blockProps }>
-					<EmbedPlaceholder
-						icon={ icon }
-						isSelected={ isSelected }
-						label={ title }
-						onPress={ ( event ) => {
-							onFocus( event );
-							setIsEditingURL( true );
-						} }
-						cannotEmbed={ cannotEmbed }
+				<>
+					<EmbedControls
+						showEditButton={ cannotEmbed }
+						switchBackToURLInput={ () => setIsEditingURL( true ) }
 					/>
-				</View>
+					<View { ...blockProps }>
+						<EmbedPlaceholder
+							icon={ icon }
+							isSelected={ isSelected }
+							label={ title }
+							onPress={ ( event ) => {
+								onFocus( event );
+								setIsEditingURL( true );
+							} }
+							cannotEmbed={ cannotEmbed }
+							fallback={ () => fallback( url, onReplace ) }
+							tryAgain={ () => {
+								invalidateResolution( 'getEmbedPreview', [
+									url,
+								] );
+							} }
+						/>
+					</View>
+				</>
 			) : (
 				<>
 					<EmbedControls
 						showEditButton={ preview && ! cannotEmbed }
+						themeSupportsResponsive={ themeSupportsResponsive }
+						blockSupportsResponsive={ responsive }
+						allowResponsive={ allowResponsive }
+						toggleResponsive={ toggleResponsive }
 						switchBackToURLInput={ () => setIsEditingURL( true ) }
 					/>
 					<View { ...blockProps }>
 						<EmbedPreview
+							align={ align }
 							className={ className }
 							clientId={ clientId }
 							icon={ icon }
@@ -201,20 +280,26 @@ const EmbedEdit = ( props ) => {
 							label={ title }
 							onFocus={ onFocus }
 							preview={ preview }
+							isProviderPreviewable={ isProviderPreviewable }
 							previewable={ previewable }
 							type={ type }
 							url={ url }
+							isDefaultEmbedInfo={ ! embedInfoByProvider }
 						/>
 					</View>
 				</>
 			) }
 			<EmbedBottomSheet
 				value={ url }
-				isVisible={ isEditingURL }
-				onClose={ () => setIsEditingURL( false ) }
+				label={ bottomSheetLabel }
+				isVisible={ showEmbedBottomSheet }
+				onClose={ () => setShowEmbedBottomSheet( false ) }
 				onSubmit={ ( value ) => {
-					setIsEditingURL( false );
+					// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
+					// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
+					// for creating the new block.
 					setAttributes( { url: value } );
+					setIsEditingURL( false );
 				} }
 			/>
 		</>

package/src/embed/embed-bottom-sheet.native.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	LinkSettingsNavigation,
 	FooterMessageLink,
@@ -11,28 +11,34 @@ import { useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { useCallback, useState } from '@wordpress/element';
 
-const linkSettingsOptions = {
-	url: {
-		label: __( 'Embed link' ),
-		placeholder: __( 'Add link' ),
-		autoFocus: true,
-		autoFill: true,
-	},
-	footer: {
-		label: (
-			<FooterMessageLink
-				href={ __( 'https://wordpress.org/support/article/embeds/' ) }
-				value={ __( 'Learn more about embeds' ) }
-			/>
-		),
-		separatorType: 'topFullWidth',
-	},
-};
-
-const EmbedBottomSheet = ( { value, isVisible, onClose, onSubmit } ) => {
+const EmbedBottomSheet = ( { value, label, isVisible, onClose, onSubmit } ) => {
 	const [ url, setURL ] = useState( value );
 	const { createErrorNotice } = useDispatch( noticesStore );
 
+	const linkSettingsOptions = {
+		url: {
+			label: sprintf(
+				// translators: %s: embed block variant's label e.g: "Twitter".
+				__( '%s link' ),
+				label
+			),
+			placeholder: __( 'Add link' ),
+			autoFocus: true,
+			autoFill: true,
+		},
+		footer: {
+			label: (
+				<FooterMessageLink
+					href={ __(
+						'https://wordpress.org/support/article/embeds/'
+					) }
+					value={ __( 'Learn more about embeds' ) }
+				/>
+			),
+			separatorType: 'topFullWidth',
+		},
+	};
+
 	const onDismiss = useCallback( () => {
 		if ( url !== '' ) {
 			if ( isURL( url ) ) {
@@ -42,12 +48,10 @@ const EmbedBottomSheet = ( { value, isVisible, onClose, onSubmit } ) => {
 					__( 'Invalid URL. Please enter a valid URL.' )
 				);
 				// If the URL was already defined, we submit it to stop showing the embed placeholder.
-				if ( value !== '' ) {
-					onSubmit( value );
-				}
+				onSubmit( value );
 			}
-		} else if ( value !== '' ) {
-			// Resets the URL when new value is empty and URL was already defined.
+		} else {
+			// Resets the URL when new value is empty
 			onSubmit( '' );
 		}
 	}, [ url, onSubmit, value ] );
@@ -64,6 +68,7 @@ const EmbedBottomSheet = ( { value, isVisible, onClose, onSubmit } ) => {
 			onDismiss={ onDismiss }
 			setAttributes={ setAttributes }
 			options={ linkSettingsOptions }
+			testID="embed-edit-url-modal"
 			withBottomSheet
 			showIcon
 		/>

package/src/embed/embed-controls.js

@@ -11,12 +11,21 @@ import {
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import { edit } from '@wordpress/icons';
 
+function getResponsiveHelp( checked ) {
+	return checked
+		? __(
+				'This embed will preserve its aspect ratio when the browser is resized.'
+		  )
+		: __(
+				'This embed may not preserve its aspect ratio when the browser is resized.'
+		  );
+}
+
 const EmbedControls = ( {
 	blockSupportsResponsive,
 	showEditButton,
 	themeSupportsResponsive,
 	allowResponsive,
-	getResponsiveHelp,
 	toggleResponsive,
 	switchBackToURLInput,
 } ) => (

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

@@ -8,7 +8,7 @@ import { TouchableOpacity, TouchableWithoutFeedback, Text } from 'react-native';
  */
 import { View } from '@wordpress/primitives';
 
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useRef, useState } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { requestPreview } from '@wordpress/react-native-bridge';
@@ -16,13 +16,21 @@ import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { BottomSheet, Icon, 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 } ) => {
+const EmbedNoPreview = ( {
+	label,
+	icon,
+	isSelected,
+	onPress,
+	previewable,
+	isDefaultEmbedInfo,
+} ) => {
 	const shouldRequestReview = useRef( false );
 	const [ isSheetVisible, setIsSheetVisible ] = useState( false );
 
@@ -38,10 +46,6 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 		styles.embed__label,
 		styles[ 'embed__label--dark' ]
 	);
-	const embedIconStyle = usePreferredColorSchemeStyle(
-		styles.embed__icon,
-		styles[ 'embed__icon--dark' ]
-	);
 	const descriptionStyle = usePreferredColorSchemeStyle(
 		styles.embed__description,
 		styles[ 'embed__description--dark' ]
@@ -76,11 +80,19 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 		postType === 'page' ? __( 'Preview page' ) : __( 'Preview post' );
 	const comingSoonDescription =
 		postType === 'page'
-			? __(
-					'We’re working hard on adding support for embed previews. In the meantime, you can preview the embedded content on the 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
 			  )
-			: __(
-					'We’re working hard on adding support for embed previews. In the meantime, you can preview the embedded content on the post.'
+			: 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() {
@@ -109,7 +121,7 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 		onPressContainer();
 	}
 
-	return (
+	const embedNoProviderPreview = (
 		<>
 			<TouchableWithoutFeedback
 				accessibilityRole={ 'button' }
@@ -118,10 +130,14 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 				onPress={ onPressContainer }
 			>
 				<View style={ containerStyle }>
-					<Icon icon={ icon } fill={ embedIconStyle.fill } />
+					<BlockIcon icon={ icon } />
 					<Text style={ labelStyle }>{ label }</Text>
 					<Text style={ descriptionStyle }>
-						{ __( 'Embed previews not yet available' ) }
+						{ 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() }
@@ -147,6 +163,7 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 				hideHeader
 				onDismiss={ onDismissSheet }
 				onClose={ onCloseSheet }
+				testID="embed-no-preview-modal"
 			>
 				<View style={ styles[ 'embed-no-preview__container' ] }>
 					<View style={ sheetIconStyle }>
@@ -157,7 +174,15 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 						/>
 					</View>
 					<Text style={ sheetTitleStyle }>
-						{ __( 'Embed block previews are coming soon' ) }
+						{ 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 }
@@ -181,6 +206,21 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 			</BottomSheet>
 		</>
 	);
+
+	return (
+		<>
+			{ previewable ? (
+				embedNoProviderPreview
+			) : (
+				<View style={ containerStyle }>
+					<BlockIcon icon={ icon } />
+					<Text style={ labelStyle }>
+						{ __( 'No preview available' ) }
+					</Text>
+				</View>
+			) }
+		</>
+	);
 };
 
 export default EmbedNoPreview;