From 3fab78d097c6cf4475751f79d80ffa338fdc2ae6 Mon Sep 17 00:00:00 2001
From: Joel Dean <jdeanjj1000@gmail.com>
Date: Sat, 11 Sep 2021 17:13:10 -0500
Subject: [PATCH] =?UTF-8?q?[RNMobile]=20[Embed=20block]=20Generic=20?=
 =?UTF-8?q?=E2=80=9CNo=20Preview=E2=80=9D=20Embed=20preview=20UI=20(#34626?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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.
---
 .../block-library/src/embed/edit.native.js    |  3 ++-
 .../src/embed/embed-no-preview.native.js      | 25 +++++++++++++++++--
 .../src/embed/embed-preview.native.js         |  4 ++-
 packages/react-native-editor/CHANGELOG.md     |  1 +
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/embed/edit.native.js b/packages/block-library/src/embed/edit.native.js
index ac9e1f372be027..9320f9f196d485 100644
--- 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
index c76ea855eff5f8..bb3affcfb3b23e 100644
--- 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
index a0a677cfcbe2d6..be5828fbc3121f 100644
--- 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,7 +128,7 @@ const EmbedPreview = ( {
 			disabled={ ! isSelected }
 		>
 			<View>
-				{ previewable ? (
+				{ isProviderPreviewable && previewable ? (
 					embedWrapper
 				) : (
 					<EmbedNoPreview
@@ -135,6 +136,7 @@ const EmbedPreview = ( {
 						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
index 73195ba07da8c6..b70b9a44e55f5e 100644
--- 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]