[RNMobile] [Embed block] Generic “No Preview” Embed preview UI (#34626)

* pass isProviderPreviewable prop seperately to differentiate use cases * Moved the provider condition to the embed preview component for clarity This was done since the isProviderPreviewable was now needed within the embed preview. Previously only previewable was being passed so there was no way to determine if a provider was enabled and if the contents of the embed could not previewed. * If no preview is available and the provider is enabled show generic UI. * Added entry to CHANGELOG.
WordPress · Sep 11, 2021 · 3fab78d · 3fab78d
1 parent dade300
commit 3fab78d
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/packages/block-library/src/embed/edit.native.js b/packages/block-library/src/embed/edit.native.js
@@ -252,7 +252,8 @@ const EmbedEdit = ( props ) => {
 							label={ title }
 							onFocus={ onFocus }
 							preview={ preview }
-							previewable={ previewable && isProviderPreviewable }
+							isProviderPreviewable={ isProviderPreviewable }
+							previewable={ previewable }
 							type={ type }
 							url={ url }
 						/>

diff --git a/packages/block-library/src/embed/embed-no-preview.native.js b/packages/block-library/src/embed/embed-no-preview.native.js
@@ -23,7 +23,13 @@ import { BlockIcon } from '@wordpress/block-editor';
  */
 import styles from './styles.scss';
 
-const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
+const EmbedNoPreview = ( {
+	label,
+	icon,
+	isSelected,
+	onPress,
+	previewable,
+} ) => {
 	const shouldRequestReview = useRef( false );
 	const [ isSheetVisible, setIsSheetVisible ] = useState( false );
 
@@ -114,7 +120,7 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 		onPressContainer();
 	}
 
-	return (
+	const embedNoProviderPreview = (
 		<>
 			<TouchableWithoutFeedback
 				accessibilityRole={ 'button' }
@@ -194,6 +200,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;
diff --git a/packages/block-library/src/embed/embed-preview.native.js b/packages/block-library/src/embed/embed-preview.native.js
@@ -37,6 +37,7 @@ const EmbedPreview = ( {
 	onFocus,
 	preview,
 	previewable,
+	isProviderPreviewable,
 	type,
 	url,
 } ) => {
@@ -127,14 +128,15 @@ const EmbedPreview = ( {
 			disabled={ ! isSelected }
 		>
 			<View>
-				{ previewable ? (
+				{ isProviderPreviewable && previewable ? (
 					embedWrapper
 				) : (
 					<EmbedNoPreview
 						label={ label }
 						icon={ icon }
 						isSelected={ isSelected }
 						onPress={ () => setIsCaptionSelected( false ) }
+						previewable={ previewable }
 					/>
 				) }
 				<BlockCaption

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -14,6 +14,7 @@ For each user feature we should also add a importance categorization label  to i
 -   [*] [Embed block] Fix content disappearing on Android when switching light/dark mode [#34207]
 -   [*] Embed block: Add device's locale to preview content [#33858]
 -   [**] Fix Android-only issue of main toolbar initial position being wrong when RTL [#34617]
+-   [**] Embed block: Implemented the No Preview UI when an embed is successful, but we're unable to show an inline preview [#34626]
 
 ## 1.61.0
 -   [**] Enable embed preview for a list of providers (for now only YouTube and Twitter) [#34446]