[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 <[email protected]>
WordPress · Jul 2, 2021 · ce5325f · ce5325f
1 parent 829f88e
commit ce5325f
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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;
+}