@wordpress/editor/build/components/post-template/swap-template-button.js

Enhanced block editor for WordPress posts.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SwapTemplateButton;
var _element = require("@wordpress/element");
var _htmlEntities = require("@wordpress/html-entities");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _coreData = require("@wordpress/core-data");
var _blocks = require("@wordpress/blocks");
var _compose = require("@wordpress/compose");
var _hooks = require("./hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function SwapTemplateButton({
  onClick
}) {
  const [showModal, setShowModal] = (0, _element.useState)(false);
  const {
    postType,
    postId
  } = (0, _hooks.useEditedPostContext)();
  const availableTemplates = (0, _hooks.useAvailableTemplates)(postType);
  const {
    editEntityRecord
  } = (0, _data.useDispatch)(_coreData.store);
  if (!availableTemplates?.length) {
    return null;
  }
  const onTemplateSelect = async template => {
    editEntityRecord('postType', postType, postId, {
      template: template.name
    }, {
      undoIgnore: true
    });
    setShowModal(false); // Close the template suggestions modal first.
    onClick();
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
      onClick: () => setShowModal(true),
      children: (0, _i18n.__)('Swap template')
    }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
      title: (0, _i18n.__)('Choose a template'),
      onRequestClose: () => setShowModal(false),
      overlayClassName: "editor-post-template__swap-template-modal",
      isFullScreen: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "editor-post-template__swap-template-modal-content",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TemplatesList, {
          postType: postType,
          onSelect: onTemplateSelect
        })
      })
    })]
  });
}
function TemplatesList({
  postType,
  onSelect
}) {
  const availableTemplates = (0, _hooks.useAvailableTemplates)(postType);
  const templatesAsPatterns = (0, _element.useMemo)(() => availableTemplates.map(template => ({
    name: template.slug,
    blocks: (0, _blocks.parse)(template.content.raw),
    title: (0, _htmlEntities.decodeEntities)(template.title.rendered),
    id: template.id
  })), [availableTemplates]);
  const shownTemplates = (0, _compose.useAsyncList)(templatesAsPatterns);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalBlockPatternsList, {
    label: (0, _i18n.__)('Templates'),
    blockPatterns: templatesAsPatterns,
    shownPatterns: shownTemplates,
    onClickPattern: onSelect
  });
}
//# sourceMappingURL=swap-template-button.js.map