@wordpress/block-editor
Version:
64 lines (58 loc) • 2.03 kB
JavaScript
import { createElement } from "@wordpress/element";
/**
* External dependencies
*/
import { castArray } from 'lodash';
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { memo, useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
import BlockEditorProvider from '../provider';
import LiveBlockPreview from './live';
import AutoHeightBlockPreview from './auto';
import { store as blockEditorStore } from '../../store';
export function BlockPreview({
blocks,
__experimentalPadding = 0,
viewportWidth = 1200,
__experimentalLive = false,
__experimentalOnClick
}) {
const originalSettings = useSelect(select => select(blockEditorStore).getSettings(), []);
const settings = useMemo(() => {
const _settings = { ...originalSettings
};
_settings.__experimentalBlockPatterns = [];
return _settings;
}, [originalSettings]);
const renderedBlocks = useMemo(() => castArray(blocks), [blocks]);
if (!blocks || blocks.length === 0) {
return null;
}
return createElement(BlockEditorProvider, {
value: renderedBlocks,
settings: settings
}, __experimentalLive ? createElement(LiveBlockPreview, {
onClick: __experimentalOnClick
}) : createElement(AutoHeightBlockPreview, {
viewportWidth: viewportWidth,
__experimentalPadding: __experimentalPadding
}));
}
/**
* BlockPreview renders a preview of a block or array of blocks.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-preview/README.md
*
* @param {Object} preview options for how the preview should be shown
* @param {Array|Object} preview.blocks A block instance (object) or an array of blocks to be previewed.
* @param {number} preview.viewportWidth Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview. Default: 700.
*
* @return {WPComponent} The component to be rendered.
*/
export default memo(BlockPreview);
//# sourceMappingURL=index.js.map