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

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = EmbedPreview;
var _util = require("./util");
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _element = require("@wordpress/element");
var _url = require("@wordpress/url");
var _wpEmbedPreview = _interopRequireDefault(require("./wp-embed-preview"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * Internal dependencies
 */

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function EmbedPreview({
  preview,
  previewable,
  url,
  type,
  isSelected,
  className,
  icon,
  label
}) {
  const [interactive, setInteractive] = (0, _element.useState)(false);
  if (!isSelected && interactive) {
    // We only want to change this when the block is not selected, because changing it when
    // the block becomes selected makes the overlap disappear too early. Hiding the overlay
    // happens on mouseup when the overlay is clicked.
    setInteractive(false);
  }
  const hideOverlay = () => {
    // This is called onMouseUp on the overlay. We can't respond to the `isSelected` prop
    // changing, because that happens on mouse down, and the overlay immediately disappears,
    // and the mouse event can end up in the preview content. We can't use onClick on
    // the overlay to hide it either, because then the editor misses the mouseup event, and
    // thinks we're multi-selecting blocks.
    setInteractive(true);
  };
  const {
    scripts
  } = preview;
  const html = 'photo' === type ? (0, _util.getPhotoHtml)(preview) : preview.html;
  const embedSourceUrl = (0, _url.getAuthority)(url);
  const iframeTitle = (0, _i18n.sprintf)(
  // translators: %s: host providing embed content e.g: www.youtube.com
  (0, _i18n.__)('Embedded content from %s'), embedSourceUrl);
  const sandboxClassnames = (0, _clsx.default)(type, className, 'wp-block-embed__wrapper');

  // Disabled because the overlay div doesn't actually have a role or functionality
  // as far as the user is concerned. We're just catching the first click so that
  // the block can be selected without interacting with the embed preview that the overlay covers.
  /* eslint-disable jsx-a11y/no-static-element-interactions */
  const embedWrapper = 'wp-embed' === type ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_wpEmbedPreview.default, {
    html: html
  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "wp-block-embed__wrapper",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SandBox, {
      html: html,
      scripts: scripts,
      title: iframeTitle,
      type: sandboxClassnames,
      onFocus: hideOverlay
    }), !interactive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "block-library-embed__interactive-overlay",
      onMouseUp: hideOverlay
    })]
  });
  /* eslint-enable jsx-a11y/no-static-element-interactions */

  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: previewable ? embedWrapper : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Placeholder, {
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockIcon, {
        icon: icon,
        showColors: true
      }),
      label: label,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        className: "components-placeholder__error",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
          href: url,
          children: url
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        className: "components-placeholder__error",
        children: (0, _i18n.sprintf)(/* translators: %s: host providing embed content e.g: www.youtube.com */
        (0, _i18n.__)("Embedded content from %s can't be previewed in the editor."), embedSourceUrl)
      })]
    })
  });
}
//# sourceMappingURL=embed-preview.js.map