@wordpress/block-editor
Version:
116 lines (115 loc) • 3.8 kB
JavaScript
// packages/block-editor/src/components/block-manager/index.js
import { store as blocksStore } from "@wordpress/blocks";
import { useSelect } from "@wordpress/data";
import {
SearchControl,
CheckboxControl,
__experimentalVStack as VStack
} from "@wordpress/components";
import { __, _n, sprintf } from "@wordpress/i18n";
import { useEffect, useState } from "@wordpress/element";
import { useDebounce } from "@wordpress/compose";
import { speak } from "@wordpress/a11y";
import BlockManagerCategory from "./category";
import { jsx, jsxs } from "react/jsx-runtime";
function BlockManager({
blockTypes,
selectedBlockTypes,
onChange,
showSelectAll = true
}) {
const debouncedSpeak = useDebounce(speak, 500);
const [search, setSearch] = useState("");
const { categories, isMatchingSearchTerm } = useSelect((select) => {
return {
categories: select(blocksStore).getCategories(),
isMatchingSearchTerm: select(blocksStore).isMatchingSearchTerm
};
}, []);
const filteredBlockTypes = blockTypes.filter((blockType) => {
return !search || isMatchingSearchTerm(blockType, search);
});
const isIndeterminate = selectedBlockTypes.length > 0 && selectedBlockTypes.length !== blockTypes.length;
const isAllChecked = blockTypes.length > 0 && selectedBlockTypes.length === blockTypes.length;
useEffect(() => {
if (!search) {
return;
}
const count = filteredBlockTypes.length;
const resultsFoundMessage = sprintf(
/* translators: %d: number of results. */
_n("%d result found.", "%d results found.", count),
count
);
debouncedSpeak(resultsFoundMessage);
}, [filteredBlockTypes?.length, search, debouncedSpeak]);
return /* @__PURE__ */ jsxs(VStack, { className: "block-editor-block-manager__content", spacing: 4, children: [
/* @__PURE__ */ jsx(
SearchControl,
{
__nextHasNoMarginBottom: true,
label: __("Search for a block"),
placeholder: __("Search for a block"),
value: search,
onChange: (nextSearch) => setSearch(nextSearch),
className: "block-editor-block-manager__search"
}
),
showSelectAll && /* @__PURE__ */ jsx(
CheckboxControl,
{
className: "block-editor-block-manager__select-all",
label: __("Select all"),
checked: isAllChecked,
onChange: () => {
if (isAllChecked) {
onChange([]);
} else {
onChange(blockTypes);
}
},
indeterminate: isIndeterminate,
__nextHasNoMarginBottom: true
}
),
/* @__PURE__ */ jsxs(
"div",
{
tabIndex: "0",
role: "region",
"aria-label": __("Available block types"),
className: "block-editor-block-manager__results",
children: [
filteredBlockTypes.length === 0 && /* @__PURE__ */ jsx("p", { className: "block-editor-block-manager__no-results", children: __("No blocks found.") }),
categories.map((category) => /* @__PURE__ */ jsx(
BlockManagerCategory,
{
title: category.title,
blockTypes: filteredBlockTypes.filter(
(blockType) => blockType.category === category.slug
),
selectedBlockTypes,
onChange
},
category.slug
)),
/* @__PURE__ */ jsx(
BlockManagerCategory,
{
title: __("Uncategorized"),
blockTypes: filteredBlockTypes.filter(
({ category }) => !category
),
selectedBlockTypes,
onChange
}
)
]
}
)
] });
}
export {
BlockManager as default
};
//# sourceMappingURL=index.js.map