diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 677efcaadbead4..947f0a2de5119c 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 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 ( + + + + + 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 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; +}