@wordpress/block-library/build/tag-cloud/edit.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _lodash = require("lodash");

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");

/**
 * External dependencies
 */

/**
 * WordPress 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(_ref) {
  let {
    attributes,
    setAttributes,
    taxonomies
  } = _ref;
  const {
    taxonomy,
    showTagCounts,
    numberOfTags,
    smallestFontSize,
    largestFontSize
  } = attributes;
  const units = (0, _components.__experimentalUseCustomUnits)({
    availableUnits: (0, _blockEditor.useSetting)('spacing.units') || ['%', 'px', 'em', 'rem']
  });

  const getTaxonomyOptions = () => {
    const selectOption = {
      label: (0, _i18n.__)('- Select -'),
      value: '',
      disabled: true
    };
    const taxonomyOptions = (0, _lodash.map)((0, _lodash.filter)(taxonomies, 'show_cloud'), 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(_ref2 => {
      let [attribute, currentValue] = _ref2;
      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);
  };

  const inspectorControls = (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
    title: (0, _i18n.__)('Settings')
  }, (0, _element.createElement)(_components.SelectControl, {
    label: (0, _i18n.__)('Taxonomy'),
    options: getTaxonomyOptions(),
    value: taxonomy,
    onChange: selectedTaxonomy => setAttributes({
      taxonomy: selectedTaxonomy
    })
  }), (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('Show post counts'),
    checked: showTagCounts,
    onChange: () => setAttributes({
      showTagCounts: !showTagCounts
    })
  }), (0, _element.createElement)(_components.RangeControl, {
    label: (0, _i18n.__)('Number of tags'),
    value: numberOfTags,
    onChange: value => setAttributes({
      numberOfTags: value
    }),
    min: MIN_TAGS,
    max: MAX_TAGS,
    required: true
  }), (0, _element.createElement)(_components.Flex, null, (0, _element.createElement)(_components.FlexItem, {
    isBlock: true
  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
    label: (0, _i18n.__)('Smallest size'),
    value: smallestFontSize,
    onChange: value => {
      onFontSizeChange('smallestFontSize', value);
    },
    units: units,
    min: MIN_FONT_SIZE,
    max: MAX_FONT_SIZE
  })), (0, _element.createElement)(_components.FlexItem, {
    isBlock: true
  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
    label: (0, _i18n.__)('Largest size'),
    value: largestFontSize,
    onChange: value => {
      onFontSizeChange('largestFontSize', value);
    },
    units: units,
    min: MIN_FONT_SIZE,
    max: MAX_FONT_SIZE
  })))));
  return (0, _element.createElement)(_element.Fragment, null, inspectorControls, (0, _element.createElement)("div", (0, _blockEditor.useBlockProps)(), (0, _element.createElement)(_serverSideRender.default, {
    key: "tag-cloud",
    block: "core/tag-cloud",
    attributes: attributes
  })));
}

var _default = (0, _data.withSelect)(select => {
  return {
    taxonomies: select(_coreData.store).getTaxonomies({
      per_page: -1
    })
  };
})(TagCloudEdit);

exports.default = _default;
//# sourceMappingURL=edit.js.map