@wordpress/block-library
Version:
Block library for the WordPress editor.
90 lines (89 loc) • 3.2 kB
JavaScript
// packages/block-library/src/template-part/edit/selection-modal.js
import { useMemo, useState } from "@wordpress/element";
import { __, sprintf } from "@wordpress/i18n";
import { store as noticesStore } from "@wordpress/notices";
import { useDispatch } from "@wordpress/data";
import { __experimentalBlockPatternsList as BlockPatternsList } from "@wordpress/block-editor";
import {
SearchControl,
__experimentalHStack as HStack
} from "@wordpress/components";
import {
useAlternativeBlockPatterns,
useAlternativeTemplateParts
} from "./utils/hooks.mjs";
import { mapTemplatePartToBlockPattern } from "./utils/map-template-part-to-block-pattern.mjs";
import { searchPatterns } from "../../utils/search-patterns.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
function TemplatePartSelectionModal({
setAttributes,
onClose,
templatePartId = null,
area,
clientId
}) {
const [searchValue, setSearchValue] = useState("");
const { templateParts } = useAlternativeTemplateParts(
area,
templatePartId
);
const filteredTemplateParts = useMemo(() => {
const partsAsPatterns = templateParts.map(
(templatePart) => mapTemplatePartToBlockPattern(templatePart)
);
return searchPatterns(partsAsPatterns, searchValue);
}, [templateParts, searchValue]);
const blockPatterns = useAlternativeBlockPatterns(area, clientId);
const filteredBlockPatterns = useMemo(() => {
return searchPatterns(blockPatterns, searchValue);
}, [blockPatterns, searchValue]);
const { createSuccessNotice } = useDispatch(noticesStore);
const onTemplatePartSelect = (templatePart) => {
setAttributes({
slug: templatePart.slug,
theme: templatePart.theme,
area: void 0
});
createSuccessNotice(
sprintf(
/* translators: %s: template part title. */
__('Template Part "%s" inserted.'),
templatePart.title?.rendered || templatePart.slug
),
{
type: "snackbar"
}
);
onClose();
};
const hasTemplateParts = !!filteredTemplateParts.length;
const hasBlockPatterns = !!filteredBlockPatterns.length;
return /* @__PURE__ */ jsxs("div", { className: "block-library-template-part__selection-content", children: [
/* @__PURE__ */ jsx("div", { className: "block-library-template-part__selection-search", children: /* @__PURE__ */ jsx(
SearchControl,
{
onChange: setSearchValue,
value: searchValue,
label: __("Search"),
placeholder: __("Search")
}
) }),
hasTemplateParts && /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("h2", { children: __("Existing template parts") }),
/* @__PURE__ */ jsx(
BlockPatternsList,
{
blockPatterns: filteredTemplateParts,
onClickPattern: (pattern) => {
onTemplatePartSelect(pattern.templatePart);
}
}
)
] }),
!hasTemplateParts && !hasBlockPatterns && /* @__PURE__ */ jsx(HStack, { alignment: "center", children: /* @__PURE__ */ jsx("p", { children: __("No results found.") }) })
] });
}
export {
TemplatePartSelectionModal as default
};
//# sourceMappingURL=selection-modal.mjs.map