@wordpress/block-editor
Version:
72 lines (71 loc) • 2.4 kB
JavaScript
// packages/block-editor/src/components/inserter/preview-panel.js
import {
isReusableBlock,
createBlock,
getBlockFromExample
} from "@wordpress/blocks";
import { useMemo } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import BlockCard from "../block-card";
import BlockPreview from "../block-preview";
import { jsx, jsxs } from "react/jsx-runtime";
function InserterPreviewPanel({ item }) {
const { name, title, icon, description, initialAttributes, example } = item;
const isReusable = isReusableBlock(item);
const blocks = useMemo(() => {
if (!example) {
return createBlock(name, initialAttributes);
}
return getBlockFromExample(name, {
attributes: {
...example.attributes,
...initialAttributes
},
innerBlocks: example.innerBlocks
});
}, [name, example, initialAttributes]);
const previewHeight = 144;
const sidebarWidth = 280;
const viewportWidth = example?.viewportWidth ?? 500;
const scale = sidebarWidth / viewportWidth;
const minHeight = scale !== 0 && scale < 1 && previewHeight ? previewHeight / scale : previewHeight;
return /* @__PURE__ */ jsxs("div", { className: "block-editor-inserter__preview-container", children: [
/* @__PURE__ */ jsx("div", { className: "block-editor-inserter__preview", children: isReusable || example ? /* @__PURE__ */ jsx("div", { className: "block-editor-inserter__preview-content", children: /* @__PURE__ */ jsx(
BlockPreview,
{
blocks,
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__ */ jsx("div", { className: "block-editor-inserter__preview-content-missing", children: __("No preview available.") }) }),
!isReusable && /* @__PURE__ */ jsx(
BlockCard,
{
title,
icon,
description
}
)
] });
}
var preview_panel_default = InserterPreviewPanel;
export {
preview_panel_default as default
};
//# sourceMappingURL=preview-panel.js.map