@wordpress/block-library/build-module/embed/embed-preview.native.js

Block library for the WordPress editor.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import { TouchableWithoutFeedback } from 'react-native';
import { isEmpty } from 'lodash';
import classnames from 'classnames/dedupe';
/**
 * WordPress dependencies
 */

import { View } from '@wordpress/primitives';
import { BlockCaption, 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';

const EmbedPreview = _ref => {
  let {
    align,
    className,
    clientId,
    icon,
    insertBlocksAfter,
    isSelected,
    label,
    onFocus,
    preview,
    previewable,
    isProviderPreviewable,
    type,
    url,
    isDefaultEmbedInfo
  } = _ref;
  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 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 = classnames(type, className, 'wp-block-embed__wrapper');
  const PreviewContent = 'wp-embed' === type ? WpEmbedPreview : SandBox;
  const embedWrapper = createElement(Fragment, null, createElement(TouchableWithoutFeedback, {
    onPress: () => {
      if (onFocus) {
        onFocus();
      }

      if (isCaptionSelected) {
        setIsCaptionSelected(false);
      }
    }
  }, createElement(View, {
    pointerEvents: "box-only",
    style: [wrapperStyle, wrapperAlignStyle]
  }, createElement(PreviewContent, {
    html: html,
    lang: locale,
    title: iframeTitle,
    type: sandboxClassnames,
    providerUrl: providerUrl,
    url: url,
    containerStyle: sandboxAlignStyle
  }))));
  return createElement(TouchableWithoutFeedback, {
    accessible: !isSelected,
    onPress: onEmbedPreviewPress,
    disabled: !isSelected
  }, createElement(View, null, isProviderPreviewable && previewable ? embedWrapper : createElement(EmbedNoPreview, {
    label: label,
    icon: icon,
    isSelected: isSelected,
    onPress: () => setIsCaptionSelected(false),
    previewable: previewable,
    isDefaultEmbedInfo: isDefaultEmbedInfo
  }), createElement(BlockCaption, {
    accessibilityLabelCreator: accessibilityLabelCreator,
    accessible: true,
    clientId: clientId,
    insertBlocksAfter: insertBlocksAfter,
    isSelected: isCaptionSelected,
    onFocus: onFocusCaption
  })));
};

export default memo(EmbedPreview);
//# sourceMappingURL=embed-preview.native.js.map