@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
104 lines (103 loc) • 3.52 kB
JavaScript
// packages/editor/src/components/post-template/swap-template-button.js
import { useMemo, useState } from "@wordpress/element";
import { decodeEntities } from "@wordpress/html-entities";
import { __experimentalBlockPatternsList as BlockPatternsList } from "@wordpress/block-editor";
import { MenuItem, Modal, SearchControl } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { useDispatch } from "@wordpress/data";
import { store as coreStore } from "@wordpress/core-data";
import { parse } from "@wordpress/blocks";
import { useAvailableTemplates, useEditedPostContext } from "./hooks.mjs";
import { searchTemplates } from "../../utils/search-templates.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function SwapTemplateModal({ onRequestClose, onSelect }) {
const { postType, postId } = useEditedPostContext();
const { editEntityRecord } = useDispatch(coreStore);
const onTemplateSelect = async (template) => {
editEntityRecord(
"postType",
postType,
postId,
// Since we append the default template we need to properly
// update to an empty string.
{ template: template.isDefault ? "" : template.name },
{ undoIgnore: true }
);
onRequestClose();
onSelect?.();
};
return /* @__PURE__ */ jsx(
Modal,
{
title: __("Choose a template"),
onRequestClose,
overlayClassName: "editor-post-template__swap-template-modal",
isFullScreen: true,
children: /* @__PURE__ */ jsx("div", { className: "editor-post-template__swap-template-modal-content", children: /* @__PURE__ */ jsx(TemplatesList, { onSelect: onTemplateSelect }) })
}
);
}
function SwapTemplateButton({ onClick }) {
const [showModal, setShowModal] = useState(false);
const availableTemplates = useAvailableTemplates();
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
MenuItem,
{
disabled: !availableTemplates?.length,
accessibleWhenDisabled: true,
onClick: () => setShowModal(true),
children: __("Change template")
}
),
showModal && /* @__PURE__ */ jsx(
SwapTemplateModal,
{
onRequestClose: () => setShowModal(false),
onSelect: onClick
}
)
] });
}
function TemplatesList({ onSelect }) {
const [searchValue, setSearchValue] = useState("");
const availableTemplates = useAvailableTemplates();
const templatesAsPatterns = useMemo(
() => availableTemplates.map((template) => ({
name: template.slug,
blocks: parse(template.content.raw),
title: decodeEntities(template.title.rendered),
id: template.id,
isDefault: template.isDefault
})),
[availableTemplates]
);
const filteredBlockTemplates = useMemo(() => {
return searchTemplates(templatesAsPatterns, searchValue);
}, [templatesAsPatterns, searchValue]);
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
SearchControl,
{
onChange: setSearchValue,
value: searchValue,
label: __("Search"),
placeholder: __("Search"),
className: "editor-post-template__swap-template-search"
}
),
/* @__PURE__ */ jsx(
BlockPatternsList,
{
label: __("Templates"),
blockPatterns: filteredBlockTemplates,
onClickPattern: onSelect
}
)
] });
}
export {
SwapTemplateModal,
SwapTemplateButton as default
};
//# sourceMappingURL=swap-template-button.mjs.map