@wordpress/block-library
Version:
Block library for the WordPress editor.
277 lines (275 loc) • 10.2 kB
JavaScript
/**
* External dependencies
*/
import clsx from 'clsx';
/**
* WordPress dependencies
*/
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';
/**
* Internal dependencies
*/
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default function CategoriesEdit({
attributes: {
displayAsDropdown,
showHierarchy,
showPostCounts,
showOnlyTopLevel,
showEmpty,
label,
showLabel,
taxonomy: taxonomySlug
},
setAttributes,
className
}) {
const selectId = useInstanceId(CategoriesEdit, 'blocks-category-select');
const {
records: allTaxonomies,
isResolvingTaxonomies
} = useEntityRecords('root', 'taxonomy');
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 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,
target: "_blank",
rel: "noreferrer noopener",
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-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: 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())]
});
}
//# sourceMappingURL=edit.js.map