[RNMobile] Embed Block caption field

packages/block-library/src/embed/edit.js

@@ -53,6 +53,7 @@ const EmbedEdit = ( props ) => {
 		setAttributes,
 		insertBlocksAfter,
 		onFocus,
+		clientId,
 	} = props;
 
 	const defaultEmbedInfo = {
@@ -179,6 +180,15 @@ const EmbedEdit = ( props ) => {
 
 	const blockProps = useBlockProps();
 
+	// NOTE: This effect is only required for testing the caption element in the native version,
+	// once the PR is approved this code block should be removed.
+	// Reference: https://github.com/WordPress/gutenberg/pull/32226
+	useEffect( () => {
+		if ( ! url ) {
+			setAttributes( { url: 'http://wordpress.com' } );
+		}
+	}, [] );
+
 	if ( fetching ) {
 		return (
 			<View { ...blockProps }>
@@ -193,7 +203,9 @@ const EmbedEdit = ( props ) => {
 		native: title,
 	} );
 	// No preview, or we can't embed the current URL, or we've clicked the edit button.
-	const showEmbedPlaceholder = ! preview || cannotEmbed || isEditingURL;
+	//const showEmbedPlaceholder = ! preview || cannotEmbed || isEditingURL;
+	const showEmbedPlaceholder = false;
+
 	if ( showEmbedPlaceholder ) {
 		return (
 			<View { ...blockProps }>
@@ -262,6 +274,7 @@ const EmbedEdit = ( props ) => {
 					icon={ icon }
 					label={ label }
 					insertBlocksAfter={ insertBlocksAfter }
+					clientId={ clientId }
 				/>
 			</View>
 		</>

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;

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;
+}