@wordpress/editor/build/components/create-template-part-modal/index.js

Enhanced block editor for WordPress posts.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CreateTemplatePartModalContents = CreateTemplatePartModalContents;
exports.default = CreateTemplatePartModal;
var _data = require("@wordpress/data");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _notices = require("@wordpress/notices");
var _coreData = require("@wordpress/core-data");
var _icons = require("@wordpress/icons");
var _blocks = require("@wordpress/blocks");
var _store = require("../../store");
var _constants = require("../../store/constants");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function CreateTemplatePartModal({
  modalTitle,
  ...restProps
}) {
  const defaultModalTitle = (0, _data.useSelect)(select => select(_coreData.store).getPostType(_constants.TEMPLATE_PART_POST_TYPE)?.labels?.add_new_item, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
    title: modalTitle || defaultModalTitle,
    onRequestClose: restProps.closeModal,
    overlayClassName: "editor-create-template-part-modal",
    focusOnMount: "firstContentElement",
    size: "medium",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CreateTemplatePartModalContents, {
      ...restProps
    })
  });
}
function CreateTemplatePartModalContents({
  defaultArea = _constants.TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
  blocks = [],
  confirmLabel = (0, _i18n.__)('Add'),
  closeModal,
  onCreate,
  onError,
  defaultTitle = ''
}) {
  const {
    createErrorNotice
  } = (0, _data.useDispatch)(_notices.store);
  const {
    saveEntityRecord
  } = (0, _data.useDispatch)(_coreData.store);
  const existingTemplateParts = (0, _utils.useExistingTemplateParts)();
  const [title, setTitle] = (0, _element.useState)(defaultTitle);
  const [area, setArea] = (0, _element.useState)(defaultArea);
  const [isSubmitting, setIsSubmitting] = (0, _element.useState)(false);
  const instanceId = (0, _compose.useInstanceId)(CreateTemplatePartModal);
  const templatePartAreas = (0, _data.useSelect)(select => select(_store.store).__experimentalGetDefaultTemplatePartAreas(), []);
  async function createTemplatePart() {
    if (!title || isSubmitting) {
      return;
    }
    try {
      setIsSubmitting(true);
      const uniqueTitle = (0, _utils.getUniqueTemplatePartTitle)(title, existingTemplateParts);
      const cleanSlug = (0, _utils.getCleanTemplatePartSlug)(uniqueTitle);
      const templatePart = await saveEntityRecord('postType', _constants.TEMPLATE_PART_POST_TYPE, {
        slug: cleanSlug,
        title: uniqueTitle,
        content: (0, _blocks.serialize)(blocks),
        area
      }, {
        throwOnError: true
      });
      await onCreate(templatePart);

      // TODO: Add a success notice?
    } catch (error) {
      const errorMessage = error.message && error.code !== 'unknown_error' ? error.message : (0, _i18n.__)('An error occurred while creating the template part.');
      createErrorNotice(errorMessage, {
        type: 'snackbar'
      });
      onError?.();
    } finally {
      setIsSubmitting(false);
    }
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
    onSubmit: async event => {
      event.preventDefault();
      await createTemplatePart();
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
      spacing: "4",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        label: (0, _i18n.__)('Name'),
        value: title,
        onChange: setTitle,
        required: true
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl, {
        __nextHasNoMarginBottom: true,
        label: (0, _i18n.__)('Area'),
        id: `editor-create-template-part-modal__area-selection-${instanceId}`,
        className: "editor-create-template-part-modal__area-base-control",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalRadioGroup, {
          label: (0, _i18n.__)('Area'),
          className: "editor-create-template-part-modal__area-radio-group",
          id: `editor-create-template-part-modal__area-selection-${instanceId}`,
          onChange: setArea,
          checked: area,
          children: templatePartAreas.map(({
            icon,
            label,
            area: value,
            description
          }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalRadio, {
            value: value,
            className: "editor-create-template-part-modal__area-radio",
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
              align: "start",
              justify: "start",
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
                  icon: icon
                })
              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.FlexBlock, {
                className: "editor-create-template-part-modal__option-label",
                children: [label, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                  children: description
                })]
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
                className: "editor-create-template-part-modal__checkbox",
                children: area === value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
                  icon: _icons.check
                })
              })]
            })
          }, label))
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
        justify: "right",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
          __next40pxDefaultSize: true,
          variant: "tertiary",
          onClick: () => {
            closeModal();
          },
          children: (0, _i18n.__)('Cancel')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
          __next40pxDefaultSize: true,
          variant: "primary",
          type: "submit",
          "aria-disabled": !title || isSubmitting,
          isBusy: isSubmitting,
          children: confirmLabel
        })]
      })]
    })
  });
}
//# sourceMappingURL=index.js.map