@wordpress/block-editor
Version:
89 lines (86 loc) • 2.95 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _blocks = require("@wordpress/blocks");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _blockCard = _interopRequireDefault(require("../block-card"));
var _blockPreview = _interopRequireDefault(require("../block-preview"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function InserterPreviewPanel({
item
}) {
var _example$viewportWidt;
const {
name,
title,
icon,
description,
initialAttributes,
example
} = item;
const isReusable = (0, _blocks.isReusableBlock)(item);
const blocks = (0, _element.useMemo)(() => {
if (!example) {
return (0, _blocks.createBlock)(name, initialAttributes);
}
return (0, _blocks.getBlockFromExample)(name, {
attributes: {
...example.attributes,
...initialAttributes
},
innerBlocks: example.innerBlocks
});
}, [name, example, initialAttributes]);
// Same as height of BlockPreviewPanel.
const previewHeight = 144;
const sidebarWidth = 280;
const viewportWidth = (_example$viewportWidt = example?.viewportWidth) !== null && _example$viewportWidt !== void 0 ? _example$viewportWidt : 500;
const scale = sidebarWidth / viewportWidth;
const minHeight = scale !== 0 && scale < 1 && previewHeight ? previewHeight / scale : previewHeight;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "block-editor-inserter__preview-container",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-inserter__preview",
children: isReusable || example ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-inserter__preview-content",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPreview.default, {
blocks: blocks,
viewportWidth: viewportWidth,
minHeight: previewHeight,
additionalStyles:
//We want this CSS to be in sync with the one in BlockPreviewPanel.
[{
css: `
body {
padding: 24px;
min-height:${Math.round(minHeight)}px;
display:flex;
align-items:center;
}
.is-root-container { width: 100%; }
`
}]
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-inserter__preview-content-missing",
children: (0, _i18n.__)('No preview available.')
})
}), !isReusable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockCard.default, {
title: title,
icon: icon,
description: description
})]
});
}
var _default = exports.default = InserterPreviewPanel;
//# sourceMappingURL=preview-panel.js.map