@wordpress/block-library
Version:
Block library for the WordPress editor.
320 lines (319 loc) • 11.7 kB
JavaScript
// packages/block-library/src/categories/edit.js
import clsx from "clsx";
import {
Placeholder,
SelectControl,
Spinner,
ToggleControl,
VisuallyHidden,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { useInstanceId } from "@wordpress/compose";
import {
InspectorControls,
useBlockProps,
RichText
} from "@wordpress/block-editor";
import { decodeEntities } from "@wordpress/html-entities";
import { __, sprintf } from "@wordpress/i18n";
import { pin } from "@wordpress/icons";
import { useEntityRecords } from "@wordpress/core-data";
import { useDispatch } from "@wordpress/data";
import { store as noticeStore } from "@wordpress/notices";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function CategoriesEdit({
attributes: {
displayAsDropdown,
showHierarchy,
showPostCounts,
showOnlyTopLevel,
showEmpty,
label,
showLabel,
taxonomy: taxonomySlug
},
setAttributes,
className,
clientId
}) {
const selectId = useInstanceId(CategoriesEdit, "blocks-category-select");
const { records: allTaxonomies, isResolvingTaxonomies } = useEntityRecords(
"root",
"taxonomy",
{ per_page: -1 }
);
const taxonomies = allTaxonomies?.filter((t) => t.visibility.public);
const taxonomy = taxonomies?.find((t) => t.slug === taxonomySlug);
const isHierarchicalTaxonomy = !isResolvingTaxonomies && taxonomy?.hierarchical;
const query = { per_page: -1, hide_empty: !showEmpty, context: "view" };
if (isHierarchicalTaxonomy && showOnlyTopLevel) {
query.parent = 0;
}
const { records: categories, isResolving } = useEntityRecords(
"taxonomy",
taxonomySlug,
query
);
const { createWarningNotice } = useDispatch(noticeStore);
const showRedirectionPreventedNotice = (event) => {
event.preventDefault();
createWarningNotice(__("Links are disabled in the editor."), {
id: `block-library/core/categories/redirection-prevented/${clientId}`,
type: "snackbar"
});
};
const getCategoriesList = (parentId) => {
if (!categories?.length) {
return [];
}
if (parentId === null) {
return categories;
}
return categories.filter(({ parent }) => parent === parentId);
};
const toggleAttribute = (attributeName) => (newValue) => setAttributes({ [attributeName]: newValue });
const renderCategoryName = (name) => !name ? __("(Untitled)") : decodeEntities(name).trim();
const renderCategoryList = () => {
const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null;
const categoriesList = getCategoriesList(parentId);
return categoriesList.map(
(category) => renderCategoryListItem(category)
);
};
const renderCategoryListItem = (category) => {
const childCategories = getCategoriesList(category.id);
const { id, link, count, name } = category;
return /* @__PURE__ */ jsxs("li", { className: `cat-item cat-item-${id}`, children: [
/* @__PURE__ */ jsx("a", { href: link, onClick: showRedirectionPreventedNotice, children: renderCategoryName(name) }),
showPostCounts && ` (${count})`,
isHierarchicalTaxonomy && showHierarchy && !!childCategories.length && /* @__PURE__ */ jsx("ul", { className: "children", children: childCategories.map(
(childCategory) => renderCategoryListItem(childCategory)
) })
] }, id);
};
const renderCategoryDropdown = () => {
const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null;
const categoriesList = getCategoriesList(parentId);
return /* @__PURE__ */ jsxs(Fragment, { children: [
showLabel ? /* @__PURE__ */ jsx(
RichText,
{
className: "wp-block-categories__label",
"aria-label": __("Label text"),
placeholder: taxonomy?.name,
withoutInteractiveFormatting: true,
value: label,
onChange: (html) => setAttributes({ label: html })
}
) : /* @__PURE__ */ jsx(VisuallyHidden, { as: "label", htmlFor: selectId, children: label ? label : taxonomy?.name }),
/* @__PURE__ */ jsxs("select", { id: selectId, children: [
/* @__PURE__ */ jsx("option", { children: sprintf(
/* translators: %s: taxonomy's singular name */
__("Select %s"),
taxonomy?.labels?.singular_name
) }),
categoriesList.map(
(category) => renderCategoryDropdownItem(category, 0)
)
] })
] });
};
const renderCategoryDropdownItem = (category, level) => {
const { id, count, name } = category;
const childCategories = getCategoriesList(id);
return [
/* @__PURE__ */ jsxs("option", { className: `level-${level}`, children: [
Array.from({ length: level * 3 }).map(() => "\xA0"),
renderCategoryName(name),
showPostCounts && ` (${count})`
] }, id),
isHierarchicalTaxonomy && showHierarchy && !!childCategories.length && childCategories.map(
(childCategory) => renderCategoryDropdownItem(childCategory, level + 1)
)
];
};
const TagName = !!categories?.length && !displayAsDropdown && !isResolving ? "ul" : "div";
const classes = clsx(
className,
`wp-block-categories-taxonomy-${taxonomySlug}`,
{
"wp-block-categories-list": !!categories?.length && !displayAsDropdown && !isResolving,
"wp-block-categories-dropdown": !!categories?.length && displayAsDropdown && !isResolving
}
);
const blockProps = useBlockProps({
className: classes
});
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
return /* @__PURE__ */ jsxs(TagName, { ...blockProps, children: [
/* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
ToolsPanel,
{
label: __("Settings"),
resetAll: () => {
setAttributes({
taxonomy: "category",
displayAsDropdown: false,
showHierarchy: false,
showPostCounts: false,
showOnlyTopLevel: false,
showEmpty: false,
showLabel: true
});
},
dropdownMenuProps,
children: [
Array.isArray(taxonomies) && /* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: () => {
return taxonomySlug !== "category";
},
label: __("Taxonomy"),
onDeselect: () => {
setAttributes({ taxonomy: "category" });
},
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
SelectControl,
{
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
label: __("Taxonomy"),
options: taxonomies.map((t) => ({
label: t.name,
value: t.slug
})),
value: taxonomySlug,
onChange: (selectedTaxonomy) => setAttributes({
taxonomy: selectedTaxonomy
})
}
)
}
),
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: () => !!displayAsDropdown,
label: __("Display as dropdown"),
onDeselect: () => setAttributes({ displayAsDropdown: false }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
ToggleControl,
{
__nextHasNoMarginBottom: true,
label: __("Display as dropdown"),
checked: displayAsDropdown,
onChange: toggleAttribute("displayAsDropdown")
}
)
}
),
displayAsDropdown && /* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: () => !showLabel,
label: __("Show label"),
onDeselect: () => setAttributes({ showLabel: true }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
ToggleControl,
{
__nextHasNoMarginBottom: true,
className: "wp-block-categories__indentation",
label: __("Show label"),
checked: showLabel,
onChange: toggleAttribute("showLabel")
}
)
}
),
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: () => !!showPostCounts,
label: __("Show post counts"),
onDeselect: () => setAttributes({ showPostCounts: false }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
ToggleControl,
{
__nextHasNoMarginBottom: true,
label: __("Show post counts"),
checked: showPostCounts,
onChange: toggleAttribute("showPostCounts")
}
)
}
),
isHierarchicalTaxonomy && /* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: () => !!showOnlyTopLevel,
label: __("Show only top level terms"),
onDeselect: () => setAttributes({ showOnlyTopLevel: false }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
ToggleControl,
{
__nextHasNoMarginBottom: true,
label: __("Show only top level terms"),
checked: showOnlyTopLevel,
onChange: toggleAttribute(
"showOnlyTopLevel"
)
}
)
}
),
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: () => !!showEmpty,
label: __("Show empty terms"),
onDeselect: () => setAttributes({ showEmpty: false }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
ToggleControl,
{
__nextHasNoMarginBottom: true,
label: __("Show empty terms"),
checked: showEmpty,
onChange: toggleAttribute("showEmpty")
}
)
}
),
isHierarchicalTaxonomy && !showOnlyTopLevel && /* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: () => !!showHierarchy,
label: __("Show hierarchy"),
onDeselect: () => setAttributes({ showHierarchy: false }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
ToggleControl,
{
__nextHasNoMarginBottom: true,
label: __("Show hierarchy"),
checked: showHierarchy,
onChange: toggleAttribute("showHierarchy")
}
)
}
)
]
}
) }),
isResolving && /* @__PURE__ */ jsx(Placeholder, { icon: pin, label: __("Terms"), children: /* @__PURE__ */ jsx(Spinner, {}) }),
!isResolving && categories?.length === 0 && /* @__PURE__ */ jsx("p", { children: taxonomy.labels.no_terms }),
!isResolving && categories?.length > 0 && (displayAsDropdown ? renderCategoryDropdown() : renderCategoryList())
] });
}
export {
CategoriesEdit as default
};
//# sourceMappingURL=edit.js.map