From ce5325f952f59d2d9e5b15b0922d62cc95ebd6bc Mon Sep 17 00:00:00 2001
From: Joel Dean <jdeanjj1000@gmail.com>
Date: Fri, 2 Jul 2021 08:45:37 -0500
Subject: [PATCH] [RNMobile] Embed Block caption field (#32226)

* Created an EmbedPreview component to house the caption.

* Disabled the placeholder mode temporarily until the linking is enabled.

* Update placeholder of embed preview and small refactor

* Add dark mode to embed preview placeholder

* [TEST] Set always a url attribute in embed block

* Add comment as a reminder to remove testing code

* Add workaround for embed preview in native

* Revert workaround for embed preview in native

Co-authored-by: Carlos Garcia <fluiddot@gmail.com>
---
 packages/block-library/src/embed/edit.js      |  3 +
 .../src/embed/embed-preview.native.js         | 91 +++++++++++++++++++
 .../src/embed/styles.native.scss              | 23 +++++
 3 files changed, 117 insertions(+)
 create mode 100644 packages/block-library/src/embed/embed-preview.native.js

diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
index ca5b5d3eb378b6..4f89afc19e960c 100644
--- a/packages/block-library/src/embed/edit.js
+++ b/packages/block-library/src/embed/edit.js
@@ -53,6 +53,7 @@ const EmbedEdit = ( props ) => {
 		setAttributes,
 		insertBlocksAfter,
 		onFocus,
+		clientId,
 	} = props;
 
 	const defaultEmbedInfo = {
@@ -214,6 +215,7 @@ const EmbedEdit = ( props ) => {
 
 	// No preview, or we can't embed the current URL, or we've clicked the edit button.
 	const showEmbedPlaceholder = ! preview || cannotEmbed || isEditingURL;
+
 	if ( showEmbedPlaceholder ) {
 		return (
 			<View { ...blockProps }>
@@ -279,6 +281,7 @@ const EmbedEdit = ( props ) => {
 					icon={ icon }
 					label={ label }
 					insertBlocksAfter={ insertBlocksAfter }
+					clientId={ clientId }
 				/>
 			</View>
 		</>
diff --git a/packages/block-library/src/embed/embed-preview.native.js b/packages/block-library/src/embed/embed-preview.native.js
new file mode 100644
index 00000000000000..5f4e418a4aa919
--- /dev/null
+++ b/packages/block-library/src/embed/embed-preview.native.js
@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import { TouchableWithoutFeedback, Text } from 'react-native';
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { View } from '@wordpress/primitives';
+
+import { BlockCaption } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const EmbedPreview = ( {
+	clientId,
+	insertBlocksAfter,
+	isSelected,
+	onBlur,
+	onFocus,
+} ) => {
+	const [ isCaptionSelected, setIsCaptionSelected ] = useState( false );
+	const stylePlaceholder = usePreferredColorSchemeStyle(
+		styles[ 'embed-preview__placeholder' ],
+		styles[ 'embed-preview__placeholder--dark' ]
+	);
+	const stylePlaceholderText = usePreferredColorSchemeStyle(
+		styles[ 'embed-preview__placeholder-text' ],
+		styles[ 'embed-preview__placeholder-text--dark' ]
+	);
+
+	function accessibilityLabelCreator( caption ) {
+		return 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 );
+		}
+	}
+
+	// Currently returning a Text component that act's as the Embed Preview to simulate the caption's isSelected state.
+	return (
+		<TouchableWithoutFeedback
+			accessible={ ! isSelected }
+			onPress={ onEmbedPreviewPress }
+			disabled={ ! isSelected }
+		>
+			<View>
+				<View style={ stylePlaceholder }>
+					<Text style={ stylePlaceholderText }>
+						Embed Preview will be directly above the Block Caption
+						component when it is implemented.
+					</Text>
+				</View>
+				<BlockCaption
+					accessibilityLabelCreator={ accessibilityLabelCreator }
+					accessible
+					clientId={ clientId }
+					insertBlocksAfter={ insertBlocksAfter }
+					isSelected={ isCaptionSelected }
+					onBlur={ onBlur }
+					onFocus={ onFocusCaption }
+				/>
+			</View>
+		</TouchableWithoutFeedback>
+	);
+};
+
+export default EmbedPreview;
diff --git a/packages/block-library/src/embed/styles.native.scss b/packages/block-library/src/embed/styles.native.scss
index fcadef16551930..ada2e5a07a46d3 100644
--- a/packages/block-library/src/embed/styles.native.scss
+++ b/packages/block-library/src/embed/styles.native.scss
@@ -46,3 +46,26 @@
 	align-items: center;
 	fill: $gray-dark;
 }
+
+.embed-preview__placeholder {
+	flex: 1;
+	padding-left: 12px;
+	padding-right: 12px;
+	padding-top: 40px;
+	padding-bottom: 40px;
+	background-color: $gray-lighten-30;
+}
+
+.embed-preview__placeholder--dark {
+	background-color: $gray-darken-30;
+}
+
+.embed-preview__placeholder-text {
+	font-size: $default-font-size;
+	text-align: center;
+	color: $light-primary;
+}
+
+.embed-preview__placeholder-text--dark {
+	color: $dark-primary;
+}