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

Block library for the WordPress editor.

// packages/block-library/src/post-content/edit.js
import { __ } from "@wordpress/i18n";
import {
  InspectorControls,
  useBlockProps,
  useInnerBlocksProps,
  RecursionProvider,
  useHasRecursion,
  Warning,
  privateApis as blockEditorPrivateApis,
  __experimentalUseBlockPreview as useBlockPreview
} from "@wordpress/block-editor";
import { parse } from "@wordpress/blocks";
import {
  useEntityProp,
  useEntityBlockEditor,
  store as coreStore
} from "@wordpress/core-data";
import { useSelect } from "@wordpress/data";
import { useMemo } from "@wordpress/element";
import { useCanEditEntity } from "../utils/hooks";
import { unlock } from "../lock-unlock";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var { HTMLElementControl } = unlock(blockEditorPrivateApis);
function ReadOnlyContent({
  parentLayout,
  layoutClassNames,
  userCanEdit,
  postType,
  postId,
  tagName: TagName = "div"
}) {
  const [, , content] = useEntityProp(
    "postType",
    postType,
    "content",
    postId
  );
  const blockProps = useBlockProps({ className: layoutClassNames });
  const blocks = useMemo(() => {
    return content?.raw ? parse(content.raw) : [];
  }, [content?.raw]);
  const blockPreviewProps = useBlockPreview({
    blocks,
    props: blockProps,
    layout: parentLayout
  });
  if (userCanEdit) {
    return /* @__PURE__ */ jsx("div", { ...blockPreviewProps });
  }
  return content?.protected ? /* @__PURE__ */ jsx(TagName, { ...blockProps, children: /* @__PURE__ */ jsx(Warning, { children: __("This content is password protected.") }) }) : /* @__PURE__ */ jsx(
    TagName,
    {
      ...blockProps,
      dangerouslySetInnerHTML: { __html: content?.rendered }
    }
  );
}
function EditableContent({ context = {}, tagName: TagName = "div" }) {
  const { postType, postId } = context;
  const [blocks, onInput, onChange] = useEntityBlockEditor(
    "postType",
    postType,
    { id: postId }
  );
  const entityRecord = useSelect(
    (select) => {
      return select(coreStore).getEntityRecord(
        "postType",
        postType,
        postId
      );
    },
    [postType, postId]
  );
  const hasInnerBlocks = !!entityRecord?.content?.raw || blocks?.length;
  const initialInnerBlocks = [["core/paragraph"]];
  const props = useInnerBlocksProps(
    useBlockProps({ className: "entry-content" }),
    {
      value: blocks,
      onInput,
      onChange,
      template: !hasInnerBlocks ? initialInnerBlocks : void 0
    }
  );
  return /* @__PURE__ */ jsx(TagName, { ...props });
}
function Content(props) {
  const {
    context: { queryId, postType, postId } = {},
    layoutClassNames,
    tagName
  } = props;
  const userCanEdit = useCanEditEntity("postType", postType, postId);
  if (userCanEdit === void 0) {
    return null;
  }
  const isDescendentOfQueryLoop = Number.isFinite(queryId);
  const isEditable = userCanEdit && !isDescendentOfQueryLoop;
  return isEditable ? /* @__PURE__ */ jsx(EditableContent, { ...props }) : /* @__PURE__ */ jsx(
    ReadOnlyContent,
    {
      parentLayout: props.parentLayout,
      layoutClassNames,
      userCanEdit,
      postType,
      postId,
      tagName
    }
  );
}
function Placeholder({ layoutClassNames }) {
  const blockProps = useBlockProps({ className: layoutClassNames });
  return /* @__PURE__ */ jsxs("div", { ...blockProps, children: [
    /* @__PURE__ */ jsx("p", { children: __(
      "This is the Content block, it will display all the blocks in any single post or page."
    ) }),
    /* @__PURE__ */ jsx("p", { children: __(
      "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__ */ jsx("p", { children: __(
      "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 = useBlockProps();
  return /* @__PURE__ */ jsx("div", { ...blockProps, children: /* @__PURE__ */ jsx(Warning, { children: __("Block cannot be rendered inside itself.") }) });
}
function PostContentEditControls({ tagName, onSelectTagName, clientId }) {
  return /* @__PURE__ */ jsx(InspectorControls, { group: "advanced", children: /* @__PURE__ */ jsx(
    HTMLElementControl,
    {
      tagName,
      onChange: onSelectTagName,
      clientId,
      options: [
        { label: __("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 = useHasRecursion(contextPostId);
  if (contextPostId && contextPostType && hasAlreadyRendered) {
    return /* @__PURE__ */ jsx(RecursionError, {});
  }
  const handleSelectTagName = (value) => {
    setAttributes({ tagName: value });
  };
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      PostContentEditControls,
      {
        tagName,
        onSelectTagName: handleSelectTagName,
        clientId
      }
    ),
    /* @__PURE__ */ jsx(RecursionProvider, { uniqueId: contextPostId, children: contextPostId && contextPostType ? /* @__PURE__ */ jsx(
      Content,
      {
        context,
        parentLayout,
        layoutClassNames
      }
    ) : /* @__PURE__ */ jsx(Placeholder, { layoutClassNames }) })
  ] });
}
export {
  PostContentEdit as default
};
//# sourceMappingURL=edit.js.map