@wordpress/block-library
Version:
Block library for the WordPress editor.
225 lines (219 loc) • 8.01 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _serverSideRender = _interopRequireDefault(require("@wordpress/server-side-render"));
var _coreData = require("@wordpress/core-data");
var _hooks = require("../utils/hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Minimum number of tags a user can show using this block.
*
* @type {number}
*/const MIN_TAGS = 1;
/**
* Maximum number of tags a user can show using this block.
*
* @type {number}
*/
const MAX_TAGS = 100;
const MIN_FONT_SIZE = 0.1;
const MAX_FONT_SIZE = 100;
function TagCloudEdit({
attributes,
setAttributes
}) {
const {
taxonomy,
showTagCounts,
numberOfTags,
smallestFontSize,
largestFontSize
} = attributes;
const [availableUnits] = (0, _blockEditor.useSettings)('spacing.units');
const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
// The `pt` unit is used as the default value and is therefore
// always considered an available unit.
const units = (0, _components.__experimentalUseCustomUnits)({
availableUnits: availableUnits ? [...availableUnits, 'pt'] : ['%', 'px', 'em', 'rem', 'pt']
});
const taxonomies = (0, _data.useSelect)(select => select(_coreData.store).getTaxonomies({
per_page: -1
}), []);
const getTaxonomyOptions = () => {
const selectOption = {
label: (0, _i18n.__)('- Select -'),
value: '',
disabled: true
};
const taxonomyOptions = (taxonomies !== null && taxonomies !== void 0 ? taxonomies : []).filter(tax => !!tax.show_cloud).map(item => {
return {
value: item.slug,
label: item.name
};
});
return [selectOption, ...taxonomyOptions];
};
const onFontSizeChange = (fontSizeLabel, newValue) => {
// eslint-disable-next-line @wordpress/no-unused-vars-before-return
const [quantity, newUnit] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(newValue);
if (!Number.isFinite(quantity)) {
return;
}
const updateObj = {
[fontSizeLabel]: newValue
};
// We need to keep in sync the `unit` changes to both `smallestFontSize`
// and `largestFontSize` attributes.
Object.entries({
smallestFontSize,
largestFontSize
}).forEach(([attribute, currentValue]) => {
const [currentQuantity, currentUnit] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(currentValue);
// Only add an update if the other font size attribute has a different unit.
if (attribute !== fontSizeLabel && currentUnit !== newUnit) {
updateObj[attribute] = `${currentQuantity}${newUnit}`;
}
});
setAttributes(updateObj);
};
// Remove border styles from the server-side attributes to prevent duplicate border.
const serverSideAttributes = {
...attributes,
style: {
...attributes?.style,
border: undefined
}
};
const inspectorControls = /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
label: (0, _i18n.__)('Settings'),
resetAll: () => {
setAttributes({
taxonomy: 'post_tag',
showTagCounts: false,
numberOfTags: 45,
smallestFontSize: '8pt',
largestFontSize: '22pt'
});
},
dropdownMenuProps: dropdownMenuProps,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => taxonomy !== 'post_tag',
label: (0, _i18n.__)('Taxonomy'),
onDeselect: () => setAttributes({
taxonomy: 'post_tag'
}),
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
label: (0, _i18n.__)('Taxonomy'),
options: getTaxonomyOptions(),
value: taxonomy,
onChange: selectedTaxonomy => setAttributes({
taxonomy: selectedTaxonomy
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => smallestFontSize !== '8pt' || largestFontSize !== '22pt',
label: (0, _i18n.__)('Font size'),
onDeselect: () => setAttributes({
smallestFontSize: '8pt',
largestFontSize: '22pt'
}),
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
gap: 4,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
label: (0, _i18n.__)('Smallest size'),
value: smallestFontSize,
onChange: value => {
onFontSizeChange('smallestFontSize', value);
},
units: units,
min: MIN_FONT_SIZE,
max: MAX_FONT_SIZE,
size: "__unstable-large"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
label: (0, _i18n.__)('Largest size'),
value: largestFontSize,
onChange: value => {
onFontSizeChange('largestFontSize', value);
},
units: units,
min: MIN_FONT_SIZE,
max: MAX_FONT_SIZE,
size: "__unstable-large"
})
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => numberOfTags !== 45,
label: (0, _i18n.__)('Number of tags'),
onDeselect: () => setAttributes({
numberOfTags: 45
}),
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
label: (0, _i18n.__)('Number of tags'),
value: numberOfTags,
onChange: value => setAttributes({
numberOfTags: value
}),
min: MIN_TAGS,
max: MAX_TAGS,
required: true
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => showTagCounts !== false,
label: (0, _i18n.__)('Show tag counts'),
onDeselect: () => setAttributes({
showTagCounts: false
}),
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Show tag counts'),
checked: showTagCounts,
onChange: () => setAttributes({
showTagCounts: !showTagCounts
})
})
})]
})
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [inspectorControls, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
...(0, _blockEditor.useBlockProps)(),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Disabled, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_serverSideRender.default, {
skipBlockSupportAttributes: true,
block: "core/tag-cloud",
attributes: serverSideAttributes
})
})
})]
});
}
var _default = exports.default = TagCloudEdit;
//# sourceMappingURL=edit.js.map