@wordpress/editor/build/components/post-template/create-new-template-modal.js

Enhanced block editor for WordPress posts.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = CreateNewTemplateModal;
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _blocks = require("@wordpress/blocks");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _url = require("@wordpress/url");
var _lockUnlock = require("../../lock-unlock");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const DEFAULT_TITLE = (0, _i18n.__)('Custom Template');
function CreateNewTemplateModal({
  onClose
}) {
  const {
    defaultBlockTemplate,
    onNavigateToEntityRecord
  } = (0, _data.useSelect)(select => {
    const {
      getEditorSettings,
      getCurrentTemplateId
    } = select(_store.store);
    return {
      defaultBlockTemplate: getEditorSettings().defaultBlockTemplate,
      onNavigateToEntityRecord: getEditorSettings().onNavigateToEntityRecord,
      getTemplateId: getCurrentTemplateId
    };
  });
  const {
    createTemplate
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
  const [title, setTitle] = (0, _element.useState)('');
  const [isBusy, setIsBusy] = (0, _element.useState)(false);
  const cancel = () => {
    setTitle('');
    onClose();
  };
  const submit = async event => {
    event.preventDefault();
    if (isBusy) {
      return;
    }
    setIsBusy(true);
    const newTemplateContent = defaultBlockTemplate !== null && defaultBlockTemplate !== void 0 ? defaultBlockTemplate : (0, _blocks.serialize)([(0, _blocks.createBlock)('core/group', {
      tagName: 'header',
      layout: {
        inherit: true
      }
    }, [(0, _blocks.createBlock)('core/site-title'), (0, _blocks.createBlock)('core/site-tagline')]), (0, _blocks.createBlock)('core/separator'), (0, _blocks.createBlock)('core/group', {
      tagName: 'main'
    }, [(0, _blocks.createBlock)('core/group', {
      layout: {
        inherit: true
      }
    }, [(0, _blocks.createBlock)('core/post-title')]), (0, _blocks.createBlock)('core/post-content', {
      layout: {
        inherit: true
      }
    })])]);
    const newTemplate = await createTemplate({
      slug: (0, _url.cleanForSlug)(title || DEFAULT_TITLE),
      content: newTemplateContent,
      title: title || DEFAULT_TITLE
    });
    setIsBusy(false);
    onNavigateToEntityRecord({
      postId: newTemplate.id,
      postType: 'wp_template'
    });
    cancel();
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
    title: (0, _i18n.__)('Create custom template'),
    onRequestClose: cancel,
    focusOnMount: "firstContentElement",
    size: "small",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
      className: "editor-post-template__create-form",
      onSubmit: submit,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
        spacing: "3",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
          __next40pxDefaultSize: true,
          __nextHasNoMarginBottom: true,
          label: (0, _i18n.__)('Name'),
          value: title,
          onChange: setTitle,
          placeholder: DEFAULT_TITLE,
          disabled: isBusy,
          help: (0, _i18n.__)('Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.')
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
          justify: "right",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            variant: "tertiary",
            onClick: cancel,
            children: (0, _i18n.__)('Cancel')
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            variant: "primary",
            type: "submit",
            isBusy: isBusy,
            "aria-disabled": isBusy,
            children: (0, _i18n.__)('Create')
          })]
        })]
      })
    })
  });
}
//# sourceMappingURL=create-new-template-modal.js.map