@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
95 lines (94 loc) • 3.31 kB
JavaScript
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { BlockPreview, privateApis as blockEditorPrivateApis
// @ts-ignore
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
/**
* Internal dependencies
*/
import { EditorProvider } from '../../../components/provider';
import { unlock } from '../../../lock-unlock';
// @ts-ignore
import { store as editorStore } from '../../../store';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const {
useGlobalStyle
} = unlock(blockEditorPrivateApis);
function PostPreviewContainer({
template,
post
}) {
const [backgroundColor = 'white'] = useGlobalStyle('color.background');
const [postBlocks] = useEntityBlockEditor('postType', post.type, {
id: post.id
});
const [templateBlocks] = useEntityBlockEditor('postType', template?.type, {
id: template?.id
});
const blocks = template && templateBlocks ? templateBlocks : postBlocks;
const isEmpty = !blocks?.length;
return /*#__PURE__*/_jsxs("div", {
className: "editor-fields-content-preview",
style: {
backgroundColor
},
children: [isEmpty && /*#__PURE__*/_jsx("span", {
className: "editor-fields-content-preview__empty",
children: __('Empty content')
}), !isEmpty && /*#__PURE__*/_jsx(BlockPreview.Async, {
children: /*#__PURE__*/_jsx(BlockPreview, {
blocks: blocks
})
})]
});
}
export default function PostPreviewView({
item
}) {
const {
settings,
template
} = useSelect(select => {
var _getPostType$viewable;
const {
canUser,
getPostType,
getTemplateId,
getEntityRecord
} = unlock(select(coreStore));
const canViewTemplate = canUser('read', {
kind: 'postType',
name: 'wp_template'
});
const _settings = select(editorStore).getEditorSettings();
// @ts-ignore
const supportsTemplateMode = _settings.supportsTemplateMode;
const isViewable = (_getPostType$viewable = getPostType(item.type)?.viewable) !== null && _getPostType$viewable !== void 0 ? _getPostType$viewable : false;
const templateId = supportsTemplateMode && isViewable && canViewTemplate ? getTemplateId(item.type, item.id) : null;
return {
settings: _settings,
template: templateId ? getEntityRecord('postType', 'wp_template', templateId) : undefined
};
}, [item.type, item.id]);
// Wrap everything in a block editor provider to ensure 'styles' that are needed
// for the previews are synced between the site editor store and the block editor store.
// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
// render patterns inside the previews.
// TODO: Same approach is used in the patterns list and it becomes obvious that some of
// the block editor settings are needed in context where we don't have the block editor.
// Explore how we can solve this in a better way.
return /*#__PURE__*/_jsx(EditorProvider, {
post: item,
settings: settings,
__unstableTemplate: template,
children: /*#__PURE__*/_jsx(PostPreviewContainer, {
template: template,
post: item
})
});
}
//# sourceMappingURL=content-preview-view.js.map