@wordpress/editor/build/dataviews/fields/content-preview/content-preview-view.js

Enhanced block editor for WordPress posts.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PostPreviewView;
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _data = require("@wordpress/data");
var _coreData = require("@wordpress/core-data");
var _provider = require("../../../components/provider");
var _lockUnlock = require("../../../lock-unlock");
var _store = require("../../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// @ts-ignore

const {
  useGlobalStyle
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function PostPreviewContainer({
  template,
  post
}) {
  const [backgroundColor = 'white'] = useGlobalStyle('color.background');
  const [postBlocks] = (0, _coreData.useEntityBlockEditor)('postType', post.type, {
    id: post.id
  });
  const [templateBlocks] = (0, _coreData.useEntityBlockEditor)('postType', template?.type, {
    id: template?.id
  });
  const blocks = template && templateBlocks ? templateBlocks : postBlocks;
  const isEmpty = !blocks?.length;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "editor-fields-content-preview",
    style: {
      backgroundColor
    },
    children: [isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: "editor-fields-content-preview__empty",
      children: (0, _i18n.__)('Empty content')
    }), !isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockPreview.Async, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockPreview, {
        blocks: blocks
      })
    })]
  });
}
function PostPreviewView({
  item
}) {
  const {
    settings,
    template
  } = (0, _data.useSelect)(select => {
    var _getPostType$viewable;
    const {
      canUser,
      getPostType,
      getTemplateId,
      getEntityRecord
    } = (0, _lockUnlock.unlock)(select(_coreData.store));
    const canViewTemplate = canUser('read', {
      kind: 'postType',
      name: 'wp_template'
    });
    const _settings = select(_store.store).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__*/(0, _jsxRuntime.jsx)(_provider.EditorProvider, {
    post: item,
    settings: settings,
    __unstableTemplate: template,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PostPreviewContainer, {
      template: template,
      post: item
    })
  });
}
//# sourceMappingURL=content-preview-view.js.map