@wordpress/block-library/build/post-content/edit.js

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PostContentEdit;
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _blocks = require("@wordpress/blocks");
var _coreData = require("@wordpress/core-data");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _hooks = require("../utils/hooks");
var _lockUnlock = require("../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  HTMLElementControl
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function ReadOnlyContent({
  parentLayout,
  layoutClassNames,
  userCanEdit,
  postType,
  postId,
  tagName: TagName = 'div'
}) {
  const [,, content] = (0, _coreData.useEntityProp)('postType', postType, 'content', postId);
  const blockProps = (0, _blockEditor.useBlockProps)({
    className: layoutClassNames
  });
  const blocks = (0, _element.useMemo)(() => {
    return content?.raw ? (0, _blocks.parse)(content.raw) : [];
  }, [content?.raw]);
  const blockPreviewProps = (0, _blockEditor.__experimentalUseBlockPreview)({
    blocks,
    props: blockProps,
    layout: parentLayout
  });
  if (userCanEdit) {
    /*
     * Rendering the block preview using the raw content blocks allows for
     * block support styles to be generated and applied by the editor.
     *
     * The preview using the raw blocks can only be presented to users with
     * edit permissions for the post to prevent potential exposure of private
     * block content.
     */
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ...blockPreviewProps
    });
  }
  return content?.protected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, {
    ...blockProps,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.Warning, {
      children: (0, _i18n.__)('This content is password protected.')
    })
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, {
    ...blockProps,
    dangerouslySetInnerHTML: {
      __html: content?.rendered
    }
  });
}
function EditableContent({
  context = {},
  tagName: TagName = 'div'
}) {
  const {
    postType,
    postId
  } = context;
  const [blocks, onInput, onChange] = (0, _coreData.useEntityBlockEditor)('postType', postType, {
    id: postId
  });
  const entityRecord = (0, _data.useSelect)(select => {
    return select(_coreData.store).getEntityRecord('postType', postType, postId);
  }, [postType, postId]);
  const hasInnerBlocks = !!entityRecord?.content?.raw || blocks?.length;
  const initialInnerBlocks = [['core/paragraph']];
  const props = (0, _blockEditor.useInnerBlocksProps)((0, _blockEditor.useBlockProps)({
    className: 'entry-content'
  }), {
    value: blocks,
    onInput,
    onChange,
    template: !hasInnerBlocks ? initialInnerBlocks : undefined
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, {
    ...props
  });
}
function Content(props) {
  const {
    context: {
      queryId,
      postType,
      postId
    } = {},
    layoutClassNames,
    tagName
  } = props;
  const userCanEdit = (0, _hooks.useCanEditEntity)('postType', postType, postId);
  if (userCanEdit === undefined) {
    return null;
  }
  const isDescendentOfQueryLoop = Number.isFinite(queryId);
  const isEditable = userCanEdit && !isDescendentOfQueryLoop;
  return isEditable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableContent, {
    ...props
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ReadOnlyContent, {
    parentLayout: props.parentLayout,
    layoutClassNames: layoutClassNames,
    userCanEdit: userCanEdit,
    postType: postType,
    postId: postId,
    tagName: tagName
  });
}
function Placeholder({
  layoutClassNames
}) {
  const blockProps = (0, _blockEditor.useBlockProps)({
    className: layoutClassNames
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    ...blockProps,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      children: (0, _i18n.__)('This is the Content block, it will display all the blocks in any single post or page.')
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      children: (0, _i18n.__)('That might be a simple arrangement like consecutive paragraphs in a blog post, or a more elaborate composition that includes image galleries, videos, tables, columns, and any other block types.')
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      children: (0, _i18n.__)('If there are any Custom Post Types registered at your site, the Content block can display the contents of those entries as well.')
    })]
  });
}
function RecursionError() {
  const blockProps = (0, _blockEditor.useBlockProps)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    ...blockProps,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.Warning, {
      children: (0, _i18n.__)('Block cannot be rendered inside itself.')
    })
  });
}

/**
 * Render inspector controls for the PostContent block.
 *
 * @param {Object}   props                 Component props.
 * @param {string}   props.tagName         The HTML tag name.
 * @param {Function} props.onSelectTagName onChange function for the SelectControl.
 * @param {string}   props.clientId        The client ID of the current block.
 *
 * @return {JSX.Element}                The control group.
 */
function PostContentEditControls({
  tagName,
  onSelectTagName,
  clientId
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
    group: "advanced",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HTMLElementControl, {
      tagName: tagName,
      onChange: onSelectTagName,
      clientId: clientId,
      options: [{
        label: (0, _i18n.__)('Default (<div>)'),
        value: 'div'
      }, {
        label: '<main>',
        value: 'main'
      }, {
        label: '<section>',
        value: 'section'
      }, {
        label: '<article>',
        value: 'article'
      }]
    })
  });
}
function PostContentEdit({
  context,
  attributes: {
    tagName = 'div'
  },
  setAttributes,
  clientId,
  __unstableLayoutClassNames: layoutClassNames,
  __unstableParentLayout: parentLayout
}) {
  const {
    postId: contextPostId,
    postType: contextPostType
  } = context;
  const hasAlreadyRendered = (0, _blockEditor.useHasRecursion)(contextPostId);
  if (contextPostId && contextPostType && hasAlreadyRendered) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(RecursionError, {});
  }
  const handleSelectTagName = value => {
    setAttributes({
      tagName: value
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PostContentEditControls, {
      tagName: tagName,
      onSelectTagName: handleSelectTagName,
      clientId: clientId
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RecursionProvider, {
      uniqueId: contextPostId,
      children: contextPostId && contextPostType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
        context: context,
        parentLayout: parentLayout,
        layoutClassNames: layoutClassNames
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Placeholder, {
        layoutClassNames: layoutClassNames
      })
    })]
  });
}
//# sourceMappingURL=edit.js.map