@wordpress/block-library/build-module/template-part/edit/placeholder.js

Block library for the WordPress editor.

// packages/block-library/src/template-part/edit/placeholder.js
import { __, sprintf } from "@wordpress/i18n";
import { Placeholder, Button, Spinner } from "@wordpress/components";
import { useState } from "@wordpress/element";
import { useSelect } from "@wordpress/data";
import { store as coreStore } from "@wordpress/core-data";
import {
  useAlternativeBlockPatterns,
  useAlternativeTemplateParts,
  useCreateTemplatePartFromBlocks,
  useTemplatePartArea
} from "./utils/hooks";
import TitleModal from "./title-modal";
import { getTemplatePartIcon } from "./utils/get-template-part-icon";
import { jsx, jsxs } from "react/jsx-runtime";
function TemplatePartPlaceholder({
  area,
  clientId,
  templatePartId,
  onOpenSelectionModal,
  setAttributes
}) {
  const { templateParts, isResolving } = useAlternativeTemplateParts(
    area,
    templatePartId
  );
  const blockPatterns = useAlternativeBlockPatterns(area, clientId);
  const { isBlockBasedTheme, canCreateTemplatePart } = useSelect(
    (select) => {
      const { getCurrentTheme, canUser } = select(coreStore);
      return {
        isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
        canCreateTemplatePart: canUser("create", {
          kind: "postType",
          name: "wp_template_part"
        })
      };
    },
    []
  );
  const [showTitleModal, setShowTitleModal] = useState(false);
  const areaObject = useTemplatePartArea(area);
  const createFromBlocks = useCreateTemplatePartFromBlocks(
    area,
    setAttributes
  );
  return /* @__PURE__ */ jsxs(
    Placeholder,
    {
      icon: getTemplatePartIcon(areaObject.icon),
      label: areaObject.label,
      instructions: isBlockBasedTheme ? sprintf(
        // Translators: %s as template part area title ("Header", "Footer", etc.).
        __("Choose an existing %s or create a new one."),
        areaObject.label.toLowerCase()
      ) : sprintf(
        // Translators: %s as template part area title ("Header", "Footer", etc.).
        __("Choose an existing %s."),
        areaObject.label.toLowerCase()
      ),
      children: [
        isResolving && /* @__PURE__ */ jsx(Spinner, {}),
        !isResolving && !!(templateParts.length || blockPatterns.length) && /* @__PURE__ */ jsx(
          Button,
          {
            __next40pxDefaultSize: true,
            variant: "primary",
            onClick: onOpenSelectionModal,
            children: __("Choose")
          }
        ),
        !isResolving && isBlockBasedTheme && canCreateTemplatePart && /* @__PURE__ */ jsx(
          Button,
          {
            __next40pxDefaultSize: true,
            variant: "secondary",
            onClick: () => {
              setShowTitleModal(true);
            },
            children: __("Start blank")
          }
        ),
        showTitleModal && /* @__PURE__ */ jsx(
          TitleModal,
          {
            areaLabel: areaObject.label,
            onClose: () => setShowTitleModal(false),
            onSubmit: (title) => {
              createFromBlocks([], title);
            }
          }
        )
      ]
    }
  );
}
export {
  TemplatePartPlaceholder as default
};
//# sourceMappingURL=placeholder.js.map