UNPKG

@wordpress/block-library

Version:
285 lines (281 loc) 11.3 kB
"use strict"; 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