@wordpress/block-library
Version:
Block library for the WordPress editor.
125 lines (123 loc) • 4.05 kB
JavaScript
/* wp:polyfill */
/**
* External dependencies
*/
import { TouchableWithoutFeedback } from 'react-native';
import clsx from 'clsx';
/**
* WordPress dependencies
*/
import { View } from '@wordpress/primitives';
import { BlockCaption, RichText, store as blockEditorStore } from '@wordpress/block-editor';
import { __, sprintf } from '@wordpress/i18n';
import { memo, useState } from '@wordpress/element';
import { SandBox } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { getPhotoHtml } from './util';
import EmbedNoPreview from './embed-no-preview';
import WpEmbedPreview from './wp-embed-preview';
import styles from './styles.scss';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const EmbedPreview = ({
align,
className,
clientId,
icon,
insertBlocksAfter,
isSelected,
label,
onFocus,
preview,
previewable,
isProviderPreviewable,
type,
url,
isDefaultEmbedInfo
}) => {
const [isCaptionSelected, setIsCaptionSelected] = useState(false);
const {
locale
} = useSelect(blockEditorStore).getSettings();
const wrapperStyle = styles['embed-preview__wrapper'];
const wrapperAlignStyle = styles[`embed-preview__wrapper--align-${align}`];
const sandboxAlignStyle = styles[`embed-preview__sandbox--align-${align}`];
function accessibilityLabelCreator(caption) {
return RichText.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);
}
}
const {
provider_url: providerUrl
} = preview;
const html = 'photo' === type ? getPhotoHtml(preview) : preview.html;
const parsedHost = new URL(url).host.split('.');
const parsedHostBaseUrl = parsedHost.splice(parsedHost.length - 2, parsedHost.length - 1).join('.');
const iframeTitle = sprintf(
// translators: %s: host providing embed content e.g: www.youtube.com
__('Embedded content from %s'), parsedHostBaseUrl);
const sandboxClassnames = clsx(type, className, 'wp-block-embed__wrapper');
const PreviewContent = 'wp-embed' === type ? WpEmbedPreview : SandBox;
const embedWrapper = /*#__PURE__*/_jsx(_Fragment, {
children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
onPress: () => {
if (onFocus) {
onFocus();
}
if (isCaptionSelected) {
setIsCaptionSelected(false);
}
},
children: /*#__PURE__*/_jsx(View, {
pointerEvents: "box-only",
style: [wrapperStyle, wrapperAlignStyle],
children: /*#__PURE__*/_jsx(PreviewContent, {
html: html,
lang: locale,
title: iframeTitle,
type: sandboxClassnames,
providerUrl: providerUrl,
url: url,
containerStyle: sandboxAlignStyle
})
})
})
});
return /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
accessible: !isSelected,
onPress: onEmbedPreviewPress,
disabled: !isSelected,
children: /*#__PURE__*/_jsxs(View, {
children: [isProviderPreviewable && previewable ? embedWrapper : /*#__PURE__*/_jsx(EmbedNoPreview, {
label: label,
icon: icon,
isSelected: isSelected,
onPress: () => setIsCaptionSelected(false),
previewable: previewable,
isDefaultEmbedInfo: isDefaultEmbedInfo
}), /*#__PURE__*/_jsx(BlockCaption, {
accessibilityLabelCreator: accessibilityLabelCreator,
accessible: true,
clientId: clientId,
insertBlocksAfter: insertBlocksAfter,
isSelected: isCaptionSelected,
onFocus: onFocusCaption
})]
})
});
};
export default memo(EmbedPreview);
//# sourceMappingURL=embed-preview.native.js.map