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

Generic block editor.

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

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { BaseControl, __experimentalVStack as VStack, TabPanel, ColorPalette, GradientPicker } from '@wordpress/components';
/**
 * Internal dependencies
 */

import useSetting from '../use-setting';
const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
const TAB_COLOR = {
  name: 'color',
  title: 'Solid',
  value: 'color'
};
const TAB_GRADIENT = {
  name: 'gradient',
  title: 'Gradient',
  value: 'gradient'
};
const TABS_SETTINGS = [TAB_COLOR, TAB_GRADIENT];

function ColorGradientControlInner({
  colors,
  gradients,
  disableCustomColors,
  disableCustomGradients,
  __experimentalIsRenderedInSidebar,
  className,
  label,
  onColorChange,
  onGradientChange,
  colorValue,
  gradientValue,
  clearable,
  showTitle = true,
  enableAlpha,
  headingLevel
}) {
  const canChooseAColor = onColorChange && (colors && colors.length > 0 || !disableCustomColors);
  const canChooseAGradient = onGradientChange && (gradients && gradients.length > 0 || !disableCustomGradients);

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

  const tabPanels = {
    [TAB_COLOR.value]: createElement(ColorPalette, {
      value: colorValue,
      onChange: canChooseAGradient ? newColor => {
        onColorChange(newColor);
        onGradientChange();
      } : onColorChange,
      colors,
      disableCustomColors,
      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
      clearable: clearable,
      enableAlpha: enableAlpha,
      headingLevel: headingLevel
    }),
    [TAB_GRADIENT.value]: createElement(GradientPicker, {
      __nextHasNoMargin: true,
      value: gradientValue,
      onChange: canChooseAColor ? newGradient => {
        onGradientChange(newGradient);
        onColorChange();
      } : onGradientChange,
      gradients,
      disableCustomGradients,
      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
      clearable: clearable,
      headingLevel: headingLevel
    })
  };

  const renderPanelType = type => createElement("div", {
    className: "block-editor-color-gradient-control__panel"
  }, tabPanels[type]);

  return createElement(BaseControl, {
    __nextHasNoMarginBottom: true,
    className: classnames('block-editor-color-gradient-control', className)
  }, createElement("fieldset", {
    className: "block-editor-color-gradient-control__fieldset"
  }, createElement(VStack, {
    spacing: 1
  }, showTitle && createElement("legend", null, createElement("div", {
    className: "block-editor-color-gradient-control__color-indicator"
  }, createElement(BaseControl.VisualLabel, null, label))), canChooseAColor && canChooseAGradient && createElement(TabPanel, {
    className: "block-editor-color-gradient-control__tabs",
    tabs: TABS_SETTINGS,
    initialTabName: gradientValue ? TAB_GRADIENT.value : !!canChooseAColor && TAB_COLOR.value
  }, tab => renderPanelType(tab.value)), !canChooseAGradient && renderPanelType(TAB_COLOR.value), !canChooseAColor && renderPanelType(TAB_GRADIENT.value))));
}

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

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

  return createElement(ColorGradientControlSelect, props);
}

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