@wordpress/block-editor
Version:
114 lines (113 loc) • 4.03 kB
JavaScript
// packages/block-editor/src/components/block-preview/auto.js
import { useResizeObserver, useRefEffect } from "@wordpress/compose";
import { useSelect } from "@wordpress/data";
import { memo, useMemo } from "@wordpress/element";
import { Disabled } from "@wordpress/components";
import BlockList from "../block-list";
import Iframe from "../iframe";
import EditorStyles from "../editor-styles";
import { store } from "../../store";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var MemoizedBlockList = memo(BlockList);
var MAX_HEIGHT = 2e3;
var EMPTY_ADDITIONAL_STYLES = [];
function ScaledBlockPreview({
viewportWidth,
containerWidth,
minHeight,
additionalStyles = EMPTY_ADDITIONAL_STYLES
}) {
if (!viewportWidth) {
viewportWidth = containerWidth;
}
const [contentResizeListener, { height: contentHeight }] = useResizeObserver();
const { styles } = useSelect((select) => {
const settings = select(store).getSettings();
return {
styles: settings.styles
};
}, []);
const editorStyles = useMemo(() => {
if (styles) {
return [
...styles,
{
css: "body{height:auto;overflow:hidden;border:none;padding:0;}",
__unstableType: "presets"
},
...additionalStyles
];
}
return styles;
}, [styles, additionalStyles]);
const scale = containerWidth / viewportWidth;
const aspectRatio = contentHeight ? containerWidth / (contentHeight * scale) : 0;
return /* @__PURE__ */ jsx(
Disabled,
{
className: "block-editor-block-preview__content",
style: {
transform: `scale(${scale})`,
// Using width + aspect-ratio instead of height here triggers browsers' native
// handling of scrollbar's visibility. It prevents the flickering issue seen
// in https://github.com/WordPress/gutenberg/issues/52027.
// See https://github.com/WordPress/gutenberg/pull/52921 for more info.
aspectRatio,
maxHeight: contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : void 0,
minHeight
},
children: /* @__PURE__ */ jsxs(
Iframe,
{
contentRef: useRefEffect((bodyElement) => {
const {
ownerDocument: { documentElement }
} = bodyElement;
documentElement.classList.add(
"block-editor-block-preview__content-iframe"
);
documentElement.style.position = "absolute";
documentElement.style.width = "100%";
bodyElement.style.boxSizing = "border-box";
bodyElement.style.position = "absolute";
bodyElement.style.width = "100%";
}, []),
"aria-hidden": true,
tabIndex: -1,
style: {
position: "absolute",
width: viewportWidth,
height: contentHeight,
pointerEvents: "none",
// This is a catch-all max-height for patterns.
// See: https://github.com/WordPress/gutenberg/pull/38175.
maxHeight: MAX_HEIGHT,
minHeight: scale !== 0 && scale < 1 && minHeight ? minHeight / scale : minHeight
},
children: [
/* @__PURE__ */ jsx(EditorStyles, { styles: editorStyles }),
contentResizeListener,
/* @__PURE__ */ jsx(MemoizedBlockList, { renderAppender: false })
]
}
)
}
);
}
function AutoBlockPreview(props) {
const [containerResizeListener, { width: containerWidth }] = useResizeObserver();
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("div", { style: { position: "relative", width: "100%", height: 0 }, children: containerResizeListener }),
/* @__PURE__ */ jsx("div", { className: "block-editor-block-preview__container", children: !!containerWidth && /* @__PURE__ */ jsx(
ScaledBlockPreview,
{
...props,
containerWidth
}
) })
] });
}
export {
AutoBlockPreview as default
};
//# sourceMappingURL=auto.js.map