UNPKG

@wordpress/block-library

Version:
110 lines (103 loc) 4.07 kB
"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