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

Block library for the WordPress editor.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import { map, filter } from 'lodash';
/**
 * WordPress dependencies
 */

import { Flex, FlexItem, PanelBody, ToggleControl, SelectControl, RangeControl, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { InspectorControls, useBlockProps, useSetting } from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';
import { store as coreStore } from '@wordpress/core-data';
/**
 * 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 = useCustomUnits({
    availableUnits: useSetting('spacing.units') || ['%', 'px', 'em', 'rem']
  });

  const getTaxonomyOptions = () => {
    const selectOption = {
      label: __('- Select -'),
      value: '',
      disabled: true
    };
    const taxonomyOptions = map(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] = parseQuantityAndUnitFromRawValue(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] = parseQuantityAndUnitFromRawValue(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 = createElement(InspectorControls, null, createElement(PanelBody, {
    title: __('Settings')
  }, createElement(SelectControl, {
    label: __('Taxonomy'),
    options: getTaxonomyOptions(),
    value: taxonomy,
    onChange: selectedTaxonomy => setAttributes({
      taxonomy: selectedTaxonomy
    })
  }), createElement(ToggleControl, {
    label: __('Show post counts'),
    checked: showTagCounts,
    onChange: () => setAttributes({
      showTagCounts: !showTagCounts
    })
  }), createElement(RangeControl, {
    label: __('Number of tags'),
    value: numberOfTags,
    onChange: value => setAttributes({
      numberOfTags: value
    }),
    min: MIN_TAGS,
    max: MAX_TAGS,
    required: true
  }), createElement(Flex, null, createElement(FlexItem, {
    isBlock: true
  }, createElement(UnitControl, {
    label: __('Smallest size'),
    value: smallestFontSize,
    onChange: value => {
      onFontSizeChange('smallestFontSize', value);
    },
    units: units,
    min: MIN_FONT_SIZE,
    max: MAX_FONT_SIZE
  })), createElement(FlexItem, {
    isBlock: true
  }, createElement(UnitControl, {
    label: __('Largest size'),
    value: largestFontSize,
    onChange: value => {
      onFontSizeChange('largestFontSize', value);
    },
    units: units,
    min: MIN_FONT_SIZE,
    max: MAX_FONT_SIZE
  })))));
  return createElement(Fragment, null, inspectorControls, createElement("div", useBlockProps(), createElement(ServerSideRender, {
    key: "tag-cloud",
    block: "core/tag-cloud",
    attributes: attributes
  })));
}

export default withSelect(select => {
  return {
    taxonomies: select(coreStore).getTaxonomies({
      per_page: -1
    })
  };
})(TagCloudEdit);
//# sourceMappingURL=edit.js.map