@wordpress/edit-post/build-module/components/sidebar/template/actions.js

Edit Post module for WordPress.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import { kebabCase } from 'lodash';
/**
 * WordPress dependencies
 */

import { __ } from '@wordpress/i18n';
import { Button, Modal, TextControl, Flex, FlexItem } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { store as editorStore } from '@wordpress/editor';
import { store as coreStore } from '@wordpress/core-data';
/**
 * Internal dependencies
 */

import { store as editPostStore } from '../../../store';
import { createBlock, serialize } from '@wordpress/blocks';

function PostTemplateActions() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [title, setTitle] = useState('');
  const {
    template,
    supportsTemplateMode
  } = useSelect(select => {
    var _getPostType$viewable, _getPostType;

    const {
      getCurrentPostType
    } = select(editorStore);
    const {
      getPostType
    } = select(coreStore);
    const {
      getEditedPostTemplate
    } = select(editPostStore);
    const isViewable = (_getPostType$viewable = (_getPostType = getPostType(getCurrentPostType())) === null || _getPostType === void 0 ? void 0 : _getPostType.viewable) !== null && _getPostType$viewable !== void 0 ? _getPostType$viewable : false;

    const _supportsTemplateMode = select(editorStore).getEditorSettings().supportsTemplateMode && isViewable;

    return {
      template: _supportsTemplateMode && getEditedPostTemplate(),
      supportsTemplateMode: _supportsTemplateMode
    };
  }, []);
  const {
    __unstableSwitchToTemplateMode
  } = useDispatch(editPostStore);

  if (!supportsTemplateMode) {
    return null;
  }

  return createElement(Fragment, null, createElement("div", {
    className: "edit-post-template__actions"
  }, !!template && createElement(Button, {
    isLink: true,
    onClick: () => __unstableSwitchToTemplateMode()
  }, __('Edit')), createElement(Button, {
    isLink: true,
    onClick: () => setIsModalOpen(true)
  }, __('New'))), isModalOpen && createElement(Modal, {
    title: __('Create a custom template'),
    closeLabel: __('Close'),
    onRequestClose: () => {
      setIsModalOpen(false);
      setTitle('');
    },
    overlayClassName: "edit-post-template__modal"
  }, createElement("form", {
    onSubmit: event => {
      event.preventDefault();

      const defaultTitle = __('Custom Template');

      const templateContent = [createBlock('core/site-title'), createBlock('core/site-tagline'), createBlock('core/separator'), createBlock('core/post-title'), createBlock('core/post-content')];

      __unstableSwitchToTemplateMode({
        slug: 'wp-custom-template-' + kebabCase(title !== null && title !== void 0 ? title : defaultTitle),
        content: serialize(templateContent),
        title: title !== null && title !== void 0 ? title : defaultTitle
      });

      setIsModalOpen(false);
    }
  }, createElement(TextControl, {
    label: __('Name'),
    value: title,
    onChange: setTitle
  }), createElement(Flex, {
    className: "edit-post-post-template__modal-actions",
    justify: "flex-end"
  }, createElement(FlexItem, null, createElement(Button, {
    isSecondary: true,
    onClick: () => {
      setIsModalOpen(false);
      setTitle('');
    }
  }, __('Cancel'))), createElement(FlexItem, null, createElement(Button, {
    isPrimary: true,
    type: "submit"
  }, __('Create')))))));
}

export default PostTemplateActions;
//# sourceMappingURL=actions.js.map