@wordpress/block-library
Version:
Block library for the WordPress editor.
110 lines (103 loc) • 4.07 kB
JavaScript
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
;