diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
index ca5b5d3eb378b..4f89afc19e960 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 (
@@ -279,6 +281,7 @@ const EmbedEdit = ( props ) => {
icon={ icon }
label={ label }
insertBlocksAfter={ insertBlocksAfter }
+ clientId={ clientId }
/>
>
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 0000000000000..5f4e418a4aa91
--- /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 (
+
+
+
+
+ Embed Preview will be directly above the Block Caption
+ component when it is implemented.
+
+
+
+
+
+ );
+};
+
+export default EmbedPreview;
diff --git a/packages/block-library/src/embed/styles.native.scss b/packages/block-library/src/embed/styles.native.scss
index fcadef1655193..ada2e5a07a46d 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;
+}