@wordpress/block-editor
Version:
131 lines (126 loc) • 4.52 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = AutoBlockPreview;
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _blockList = _interopRequireDefault(require("../block-list"));
var _iframe = _interopRequireDefault(require("../iframe"));
var _editorStyles = _interopRequireDefault(require("../editor-styles"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// This is used to avoid rendering the block list if the sizes change.
const MemoizedBlockList = (0, _element.memo)(_blockList.default);
const MAX_HEIGHT = 2000;
const EMPTY_ADDITIONAL_STYLES = [];
function ScaledBlockPreview({
viewportWidth,
containerWidth,
minHeight,
additionalStyles = EMPTY_ADDITIONAL_STYLES
}) {
if (!viewportWidth) {
viewportWidth = containerWidth;
}
const [contentResizeListener, {
height: contentHeight
}] = (0, _compose.useResizeObserver)();
const {
styles
} = (0, _data.useSelect)(select => {
const settings = select(_store.store).getSettings();
return {
styles: settings.styles
};
}, []);
// Avoid scrollbars for pattern previews.
const editorStyles = (0, _element.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__*/(0, _jsxRuntime.jsx)(_components.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 : undefined,
minHeight
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_iframe.default, {
contentRef: (0, _compose.useRefEffect)(bodyElement => {
const {
ownerDocument: {
documentElement
}
} = bodyElement;
documentElement.classList.add('block-editor-block-preview__content-iframe');
documentElement.style.position = 'absolute';
documentElement.style.width = '100%';
// Necessary for contentResizeListener to work.
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__*/(0, _jsxRuntime.jsx)(_editorStyles.default, {
styles: editorStyles
}), contentResizeListener, /*#__PURE__*/(0, _jsxRuntime.jsx)(MemoizedBlockList, {
renderAppender: false
})]
})
});
}
function AutoBlockPreview(props) {
const [containerResizeListener, {
width: containerWidth
}] = (0, _compose.useResizeObserver)();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
position: 'relative',
width: '100%',
height: 0
},
children: containerResizeListener
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-block-preview__container",
children: !!containerWidth && /*#__PURE__*/(0, _jsxRuntime.jsx)(ScaledBlockPreview, {
...props,
containerWidth: containerWidth
})
})]
});
}
//# sourceMappingURL=auto.js.map