@wordpress/block-library
Version:
Block library for the WordPress editor.
285 lines (281 loc) • 11.3 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = CategoriesEdit;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _blockEditor = require("@wordpress/block-editor");
var _htmlEntities = require("@wordpress/html-entities");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _coreData = require("@wordpress/core-data");
var _hooks = require("../utils/hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function CategoriesEdit({
attributes: {
displayAsDropdown,
showHierarchy,
showPostCounts,
showOnlyTopLevel,
showEmpty,
label,
showLabel,
taxonomy: taxonomySlug
},
setAttributes,
className
}) {
const selectId = (0, _compose.useInstanceId)(CategoriesEdit, 'blocks-category-select');
const {
records: allTaxonomies,
isResolvingTaxonomies
} = (0, _coreData.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
} = (0, _coreData.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 ? (0, _i18n.__)('(Untitled)') : (0, _htmlEntities.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__*/(0, _jsxRuntime.jsxs)("li", {
className: `cat-item cat-item-${id}`,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
href: link,
target: "_blank",
rel: "noreferrer noopener",
children: renderCategoryName(name)
}), showPostCounts && ` (${count})`, isHierarchicalTaxonomy && showHierarchy && !!childCategories.length && /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, {
className: "wp-block-categories__label",
"aria-label": (0, _i18n.__)('Label text'),
placeholder: taxonomy?.name,
withoutInteractiveFormatting: true,
value: label,
onChange: html => setAttributes({
label: html
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
as: "label",
htmlFor: selectId,
children: label ? label : taxonomy?.name
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
id: selectId,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
children: (0, _i18n.sprintf)(/* translators: %s: taxonomy's singular name */
(0, _i18n.__)('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__*/(0, _jsxRuntime.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 = (0, _clsx.default)(className, {
'wp-block-categories-list': !!categories?.length && !displayAsDropdown && !isResolving,
'wp-block-categories-dropdown': !!categories?.length && displayAsDropdown && !isResolving
});
const blockProps = (0, _blockEditor.useBlockProps)({
className: classes
});
const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TagName, {
...blockProps,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
label: (0, _i18n.__)('Settings'),
resetAll: () => {
setAttributes({
taxonomy: 'category',
displayAsDropdown: false,
showHierarchy: false,
showPostCounts: false,
showOnlyTopLevel: false,
showEmpty: false,
showLabel: true
});
},
dropdownMenuProps: dropdownMenuProps,
children: [Array.isArray(taxonomies) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => {
return taxonomySlug !== 'category';
},
label: (0, _i18n.__)('Taxonomy'),
onDeselect: () => {
setAttributes({
taxonomy: 'category'
});
},
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
label: (0, _i18n.__)('Taxonomy'),
options: taxonomies.map(t => ({
label: t.name,
value: t.slug
})),
value: taxonomySlug,
onChange: selectedTaxonomy => setAttributes({
taxonomy: selectedTaxonomy
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!displayAsDropdown,
label: (0, _i18n.__)('Display as dropdown'),
onDeselect: () => setAttributes({
displayAsDropdown: false
}),
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Display as dropdown'),
checked: displayAsDropdown,
onChange: toggleAttribute('displayAsDropdown')
})
}), displayAsDropdown && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !showLabel,
label: (0, _i18n.__)('Show label'),
onDeselect: () => setAttributes({
showLabel: true
}),
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
className: "wp-block-categories__indentation",
label: (0, _i18n.__)('Show label'),
checked: showLabel,
onChange: toggleAttribute('showLabel')
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!showPostCounts,
label: (0, _i18n.__)('Show post counts'),
onDeselect: () => setAttributes({
showPostCounts: false
}),
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Show post counts'),
checked: showPostCounts,
onChange: toggleAttribute('showPostCounts')
})
}), isHierarchicalTaxonomy && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!showOnlyTopLevel,
label: (0, _i18n.__)('Show only top level terms'),
onDeselect: () => setAttributes({
showOnlyTopLevel: false
}),
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Show only top level terms'),
checked: showOnlyTopLevel,
onChange: toggleAttribute('showOnlyTopLevel')
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!showEmpty,
label: (0, _i18n.__)('Show empty terms'),
onDeselect: () => setAttributes({
showEmpty: false
}),
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Show empty terms'),
checked: showEmpty,
onChange: toggleAttribute('showEmpty')
})
}), isHierarchicalTaxonomy && !showOnlyTopLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!showHierarchy,
label: (0, _i18n.__)('Show hierarchy'),
onDeselect: () => setAttributes({
showHierarchy: false
}),
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Show hierarchy'),
checked: showHierarchy,
onChange: toggleAttribute('showHierarchy')
})
})]
})
}), isResolving && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, {
icon: _icons.pin,
label: (0, _i18n.__)('Terms'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
}), !isResolving && categories?.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
children: taxonomy.labels.no_terms
}), !isResolving && categories?.length > 0 && (displayAsDropdown ? renderCategoryDropdown() : renderCategoryList())]
});
}
//# sourceMappingURL=edit.js.map