UNPKG

@wordpress/block-library

Version:
277 lines (275 loc) 10.2 kB
/** * 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