@wordpress/block-editor/build-module/components/colors-gradients/control.js

Generic block editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
import { every, isEmpty } from 'lodash';
/**
 * WordPress dependencies
 */

import { useState } from '@wordpress/element';
import { BaseControl, Button, ButtonGroup, ColorIndicator, ColorPalette, __experimentalGradientPicker as GradientPicker } from '@wordpress/components';
import { sprintf, __ } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

import { getColorObjectByColorValue } from '../colors';
import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
import useEditorFeature from '../use-editor-feature'; // translators: first %s: the color name or value (e.g. red or #ff0000)

const colorIndicatorAriaLabel = __('(Color: %s)'); // translators: first %s: the gradient name or value (e.g. red to green or linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)


const gradientIndicatorAriaLabel = __('(Gradient: %s)');

const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];

function VisualLabel({
  colors,
  gradients,
  label,
  currentTab,
  colorValue,
  gradientValue
}) {
  let value, ariaLabel;

  if (currentTab === 'color') {
    if (colorValue) {
      value = colorValue;
      const colorObject = getColorObjectByColorValue(colors, value);
      const colorName = colorObject && colorObject.name;
      ariaLabel = sprintf(colorIndicatorAriaLabel, colorName || value);
    }
  } else if (currentTab === 'gradient' && gradientValue) {
    value = gradientValue;

    const gradientObject = __experimentalGetGradientObjectByGradientValue(gradients, value);

    const gradientName = gradientObject && gradientObject.name;
    ariaLabel = sprintf(gradientIndicatorAriaLabel, gradientName || value);
  }

  return createElement(Fragment, null, label, !!value && createElement(ColorIndicator, {
    colorValue: value,
    "aria-label": ariaLabel
  }));
}

function ColorGradientControlInner({
  colors,
  gradients,
  disableCustomColors,
  disableCustomGradients,
  className,
  label,
  onColorChange,
  onGradientChange,
  colorValue,
  gradientValue,
  clearable
}) {
  const canChooseAColor = onColorChange && (!isEmpty(colors) || !disableCustomColors);
  const canChooseAGradient = onGradientChange && (!isEmpty(gradients) || !disableCustomGradients);
  const [currentTab, setCurrentTab] = useState(gradientValue ? 'gradient' : !!canChooseAColor && 'color');

  if (!canChooseAColor && !canChooseAGradient) {
    return null;
  }

  return createElement(BaseControl, {
    className: classnames('block-editor-color-gradient-control', className)
  }, createElement("fieldset", null, createElement("legend", null, createElement("div", {
    className: "block-editor-color-gradient-control__color-indicator"
  }, createElement(BaseControl.VisualLabel, null, createElement(VisualLabel, {
    currentTab: currentTab,
    label: label,
    colorValue: colorValue,
    gradientValue: gradientValue
  })))), canChooseAColor && canChooseAGradient && createElement(ButtonGroup, {
    className: "block-editor-color-gradient-control__button-tabs"
  }, createElement(Button, {
    isSmall: true,
    isPressed: currentTab === 'color',
    onClick: () => setCurrentTab('color')
  }, __('Solid')), createElement(Button, {
    isSmall: true,
    isPressed: currentTab === 'gradient',
    onClick: () => setCurrentTab('gradient')
  }, __('Gradient'))), (currentTab === 'color' || !canChooseAGradient) && createElement(ColorPalette, {
    value: colorValue,
    onChange: canChooseAGradient ? newColor => {
      onColorChange(newColor);
      onGradientChange();
    } : onColorChange,
    colors,
    disableCustomColors,
    clearable: clearable
  }), (currentTab === 'gradient' || !canChooseAColor) && createElement(GradientPicker, {
    value: gradientValue,
    onChange: canChooseAColor ? newGradient => {
      onGradientChange(newGradient);
      onColorChange();
    } : onGradientChange,
    gradients,
    disableCustomGradients,
    clearable: clearable
  })));
}

function ColorGradientControlSelect(props) {
  const colorGradientSettings = {};
  colorGradientSettings.colors = useEditorFeature('color.palette');
  colorGradientSettings.gradients = useEditorFeature('color.gradients');
  colorGradientSettings.disableCustomColors = !useEditorFeature('color.custom');
  colorGradientSettings.disableCustomGradients = !useEditorFeature('color.customGradient');
  return createElement(ColorGradientControlInner, _extends({}, colorGradientSettings, props));
}

function ColorGradientControl(props) {
  if (every(colorsAndGradientKeys, key => props.hasOwnProperty(key))) {
    return createElement(ColorGradientControlInner, props);
  }

  return createElement(ColorGradientControlSelect, props);
}

export default ColorGradientControl;
//# sourceMappingURL=control.js.map