@wordpress/block-editor 11.5.0 → 11.7.0

package/build/components/global-styles/color-panel.js

@@ -0,0 +1,583 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ColorPanel;
+exports.useHasBackgroundPanel = useHasBackgroundPanel;
+exports.useHasButtonPanel = useHasButtonPanel;
+exports.useHasCaptionPanel = useHasCaptionPanel;
+exports.useHasColorPanel = useHasColorPanel;
+exports.useHasHeadingPanel = useHasHeadingPanel;
+exports.useHasLinkPanel = useHasLinkPanel;
+exports.useHasTextPanel = useHasTextPanel;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _control = _interopRequireDefault(require("../colors-gradients/control"));
+
+var _hooks = require("./hooks");
+
+var _utils = require("./utils");
+
+var _object = require("../../utils/object");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function useHasColorPanel(settings) {
+  const hasTextPanel = useHasTextPanel(settings);
+  const hasBackgroundPanel = useHasBackgroundPanel(settings);
+  const hasLinkPanel = useHasLinkPanel(settings);
+  const hasHeadingPanel = useHasHeadingPanel(settings);
+  const hasButtonPanel = useHasHeadingPanel(settings);
+  const hasCaptionPanel = useHasCaptionPanel(settings);
+  return hasTextPanel || hasBackgroundPanel || hasLinkPanel || hasHeadingPanel || hasButtonPanel || hasCaptionPanel;
+}
+
+function useHasTextPanel(settings) {
+  var _settings$color, _settings$color2;
+
+  const colors = (0, _hooks.useColorsPerOrigin)(settings);
+  return (settings === null || settings === void 0 ? void 0 : (_settings$color = settings.color) === null || _settings$color === void 0 ? void 0 : _settings$color.text) && ((colors === null || colors === void 0 ? void 0 : colors.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color2 = settings.color) === null || _settings$color2 === void 0 ? void 0 : _settings$color2.custom));
+}
+
+function useHasLinkPanel(settings) {
+  var _settings$color3, _settings$color4;
+
+  const colors = (0, _hooks.useColorsPerOrigin)(settings);
+  return (settings === null || settings === void 0 ? void 0 : (_settings$color3 = settings.color) === null || _settings$color3 === void 0 ? void 0 : _settings$color3.link) && ((colors === null || colors === void 0 ? void 0 : colors.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color4 = settings.color) === null || _settings$color4 === void 0 ? void 0 : _settings$color4.custom));
+}
+
+function useHasCaptionPanel(settings) {
+  var _settings$color5, _settings$color6;
+
+  const colors = (0, _hooks.useColorsPerOrigin)(settings);
+  return (settings === null || settings === void 0 ? void 0 : (_settings$color5 = settings.color) === null || _settings$color5 === void 0 ? void 0 : _settings$color5.caption) && ((colors === null || colors === void 0 ? void 0 : colors.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color6 = settings.color) === null || _settings$color6 === void 0 ? void 0 : _settings$color6.custom));
+}
+
+function useHasHeadingPanel(settings) {
+  var _settings$color7, _settings$color8, _settings$color9;
+
+  const colors = (0, _hooks.useColorsPerOrigin)(settings);
+  const gradients = (0, _hooks.useGradientsPerOrigin)(settings);
+  return (settings === null || settings === void 0 ? void 0 : (_settings$color7 = settings.color) === null || _settings$color7 === void 0 ? void 0 : _settings$color7.heading) && ((colors === null || colors === void 0 ? void 0 : colors.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color8 = settings.color) === null || _settings$color8 === void 0 ? void 0 : _settings$color8.custom) || (gradients === null || gradients === void 0 ? void 0 : gradients.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color9 = settings.color) === null || _settings$color9 === void 0 ? void 0 : _settings$color9.customGradient));
+}
+
+function useHasButtonPanel(settings) {
+  var _settings$color10, _settings$color11, _settings$color12;
+
+  const colors = (0, _hooks.useColorsPerOrigin)(settings);
+  const gradients = (0, _hooks.useGradientsPerOrigin)(settings);
+  return (settings === null || settings === void 0 ? void 0 : (_settings$color10 = settings.color) === null || _settings$color10 === void 0 ? void 0 : _settings$color10.button) && ((colors === null || colors === void 0 ? void 0 : colors.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color11 = settings.color) === null || _settings$color11 === void 0 ? void 0 : _settings$color11.custom) || (gradients === null || gradients === void 0 ? void 0 : gradients.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color12 = settings.color) === null || _settings$color12 === void 0 ? void 0 : _settings$color12.customGradient));
+}
+
+function useHasBackgroundPanel(settings) {
+  var _settings$color13, _settings$color14, _settings$color15;
+
+  const colors = (0, _hooks.useColorsPerOrigin)(settings);
+  const gradients = (0, _hooks.useGradientsPerOrigin)(settings);
+  return (settings === null || settings === void 0 ? void 0 : (_settings$color13 = settings.color) === null || _settings$color13 === void 0 ? void 0 : _settings$color13.background) && ((colors === null || colors === void 0 ? void 0 : colors.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color14 = settings.color) === null || _settings$color14 === void 0 ? void 0 : _settings$color14.custom) || (gradients === null || gradients === void 0 ? void 0 : gradients.length) > 0 || (settings === null || settings === void 0 ? void 0 : (_settings$color15 = settings.color) === null || _settings$color15 === void 0 ? void 0 : _settings$color15.customGradient));
+}
+
+function ColorToolsPanel(_ref) {
+  let {
+    resetAllFilter,
+    onChange,
+    value,
+    panelId,
+    children
+  } = _ref;
+
+  const resetAll = () => {
+    const updatedValue = resetAllFilter(value);
+    onChange(updatedValue);
+  };
+
+  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
+    label: (0, _i18n.__)('Color'),
+    resetAll: resetAll,
+    panelId: panelId,
+    hasInnerWrapper: true,
+    className: "color-block-support-panel",
+    __experimentalFirstVisibleItemClass: "first",
+    __experimentalLastVisibleItemClass: "last"
+  }, (0, _element.createElement)("div", {
+    className: "color-block-support-panel__inner-wrapper"
+  }, children));
+}
+
+const DEFAULT_CONTROLS = {
+  text: true,
+  background: true,
+  link: true,
+  heading: true,
+  button: true,
+  caption: true
+};
+const popoverProps = {
+  placement: 'left-start',
+  offset: 36,
+  shift: true
+};
+
+const LabeledColorIndicators = _ref2 => {
+  let {
+    indicators,
+    label
+  } = _ref2;
+  return (0, _element.createElement)(_components.__experimentalHStack, {
+    justify: "flex-start"
+  }, (0, _element.createElement)(_components.__experimentalZStack, {
+    isLayered: false,
+    offset: -8
+  }, indicators.map((indicator, index) => (0, _element.createElement)(_components.Flex, {
+    key: index,
+    expanded: false
+  }, (0, _element.createElement)(_components.ColorIndicator, {
+    colorValue: indicator
+  })))), (0, _element.createElement)(_components.FlexItem, {
+    className: "block-editor-panel-color-gradient-settings__color-name",
+    title: label
+  }, label));
+};
+
+function ColorPanelTab(_ref3) {
+  let {
+    isGradient,
+    inheritedValue,
+    userValue,
+    setValue,
+    colorGradientControlSettings
+  } = _ref3;
+  return (0, _element.createElement)(_control.default, (0, _extends2.default)({}, colorGradientControlSettings, {
+    showTitle: false,
+    enableAlpha: true,
+    __experimentalIsRenderedInSidebar: true,
+    colorValue: isGradient ? undefined : inheritedValue,
+    gradientValue: isGradient ? inheritedValue : undefined,
+    onColorChange: isGradient ? undefined : setValue,
+    onGradientChange: isGradient ? setValue : undefined,
+    clearable: inheritedValue === userValue,
+    headingLevel: 3
+  }));
+}
+
+function ColorPanelDropdown(_ref4) {
+  let {
+    label,
+    hasValue,
+    resetValue,
+    isShownByDefault,
+    indicators,
+    tabs,
+    colorGradientControlSettings,
+    panelId
+  } = _ref4;
+  const tabConfigs = tabs.map(_ref5 => {
+    let {
+      key,
+      label: tabLabel
+    } = _ref5;
+    return {
+      name: key,
+      title: tabLabel
+    };
+  });
+  return (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "block-editor-tools-panel-color-gradient-settings__item",
+    hasValue: hasValue,
+    label: label,
+    onDeselect: resetValue,
+    isShownByDefault: isShownByDefault,
+    panelId: panelId
+  }, (0, _element.createElement)(_components.Dropdown, {
+    popoverProps: popoverProps,
+    className: "block-editor-tools-panel-color-gradient-settings__dropdown",
+    renderToggle: _ref6 => {
+      let {
+        onToggle,
+        isOpen
+      } = _ref6;
+      const toggleProps = {
+        onClick: onToggle,
+        className: (0, _classnames.default)('block-editor-panel-color-gradient-settings__dropdown', {
+          'is-open': isOpen
+        }),
+        'aria-expanded': isOpen
+      };
+      return (0, _element.createElement)(_components.Button, toggleProps, (0, _element.createElement)(LabeledColorIndicators, {
+        indicators: indicators,
+        label: label
+      }));
+    },
+    renderContent: () => (0, _element.createElement)(_components.__experimentalDropdownContentWrapper, {
+      paddingSize: "none"
+    }, (0, _element.createElement)("div", {
+      className: "block-editor-panel-color-gradient-settings__dropdown-content"
+    }, tabs.length === 1 && (0, _element.createElement)(ColorPanelTab, (0, _extends2.default)({}, tabs[0], {
+      colorGradientControlSettings: colorGradientControlSettings
+    })), tabs.length > 1 && (0, _element.createElement)(_components.TabPanel, {
+      tabs: tabConfigs
+    }, tab => {
+      const selectedTab = tabs.find(t => t.key === tab.name);
+
+      if (!selectedTab) {
+        return null;
+      }
+
+      return (0, _element.createElement)(ColorPanelTab, (0, _extends2.default)({}, selectedTab, {
+        colorGradientControlSettings: colorGradientControlSettings
+      }));
+    })))
+  }));
+}
+
+function ColorPanel(_ref7) {
+  var _settings$color16, _settings$color17, _inheritedValue$color, _value$color, _inheritedValue$color2, _value$color2, _inheritedValue$color3, _value$color3, _inheritedValue$eleme, _inheritedValue$eleme2, _inheritedValue$eleme3, _value$elements, _value$elements$link, _value$elements$link$, _inheritedValue$eleme4, _inheritedValue$eleme5, _inheritedValue$eleme6, _inheritedValue$eleme7, _value$elements2, _value$elements2$link, _value$elements2$link2, _value$elements2$link3;
+
+  let {
+    as: Wrapper = ColorToolsPanel,
+    value,
+    onChange,
+    inheritedValue = value,
+    settings,
+    panelId,
+    defaultControls = DEFAULT_CONTROLS,
+    children
+  } = _ref7;
+  const colors = (0, _hooks.useColorsPerOrigin)(settings);
+  const gradients = (0, _hooks.useGradientsPerOrigin)(settings);
+  const areCustomSolidsEnabled = settings === null || settings === void 0 ? void 0 : (_settings$color16 = settings.color) === null || _settings$color16 === void 0 ? void 0 : _settings$color16.custom;
+  const areCustomGradientsEnabled = settings === null || settings === void 0 ? void 0 : (_settings$color17 = settings.color) === null || _settings$color17 === void 0 ? void 0 : _settings$color17.customGradient;
+  const hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;
+  const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+
+  const decodeValue = rawValue => (0, _utils.getValueFromVariable)({
+    settings
+  }, '', rawValue);
+
+  const encodeColorValue = colorValue => {
+    const allColors = colors.flatMap(_ref8 => {
+      let {
+        colors: originColors
+      } = _ref8;
+      return originColors;
+    });
+    const colorObject = allColors.find(_ref9 => {
+      let {
+        color
+      } = _ref9;
+      return color === colorValue;
+    });
+    return colorObject ? 'var:preset|color|' + colorObject.slug : colorValue;
+  };
+
+  const encodeGradientValue = gradientValue => {
+    const allGradients = gradients.flatMap(_ref10 => {
+      let {
+        gradients: originGradients
+      } = _ref10;
+      return originGradients;
+    });
+    const gradientObject = allGradients.find(_ref11 => {
+      let {
+        gradient
+      } = _ref11;
+      return gradient === gradientValue;
+    });
+    return gradientObject ? 'var:preset|gradient|' + gradientObject.slug : gradientValue;
+  }; // Text Color
+
+
+  const showTextPanel = useHasTextPanel(settings);
+  const textColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$color = inheritedValue.color) === null || _inheritedValue$color === void 0 ? void 0 : _inheritedValue$color.text);
+  const userTextColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$color = value.color) === null || _value$color === void 0 ? void 0 : _value$color.text);
+
+  const hasTextColor = () => !!userTextColor;
+
+  const setTextColor = newColor => {
+    onChange((0, _object.immutableSet)(value, ['color', 'text'], encodeColorValue(newColor)));
+  };
+
+  const resetTextColor = () => setTextColor(undefined); // BackgroundColor
+
+
+  const showBackgroundPanel = useHasBackgroundPanel(settings);
+  const backgroundColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$color2 = inheritedValue.color) === null || _inheritedValue$color2 === void 0 ? void 0 : _inheritedValue$color2.background);
+  const userBackgroundColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$color2 = value.color) === null || _value$color2 === void 0 ? void 0 : _value$color2.background);
+  const gradient = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$color3 = inheritedValue.color) === null || _inheritedValue$color3 === void 0 ? void 0 : _inheritedValue$color3.gradient);
+  const userGradient = decodeValue(value === null || value === void 0 ? void 0 : (_value$color3 = value.color) === null || _value$color3 === void 0 ? void 0 : _value$color3.gradient);
+
+  const hasBackground = () => !!userBackgroundColor || !!userGradient;
+
+  const setBackgroundColor = newColor => {
+    const newValue = (0, _object.immutableSet)(value, ['color', 'background'], encodeColorValue(newColor));
+    newValue.color.gradient = undefined;
+    onChange(newValue);
+  };
+
+  const setGradient = newGradient => {
+    const newValue = (0, _object.immutableSet)(value, ['color', 'gradient'], encodeGradientValue(newGradient));
+    newValue.color.background = undefined;
+    onChange(newValue);
+  };
+
+  const resetBackground = () => {
+    const newValue = (0, _object.immutableSet)(value, ['color', 'background'], undefined);
+    newValue.color.gradient = undefined;
+    onChange(newValue);
+  }; // Links
+
+
+  const showLinkPanel = useHasLinkPanel(settings);
+  const linkColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$eleme = inheritedValue.elements) === null || _inheritedValue$eleme === void 0 ? void 0 : (_inheritedValue$eleme2 = _inheritedValue$eleme.link) === null || _inheritedValue$eleme2 === void 0 ? void 0 : (_inheritedValue$eleme3 = _inheritedValue$eleme2.color) === null || _inheritedValue$eleme3 === void 0 ? void 0 : _inheritedValue$eleme3.text);
+  const userLinkColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$elements = value.elements) === null || _value$elements === void 0 ? void 0 : (_value$elements$link = _value$elements.link) === null || _value$elements$link === void 0 ? void 0 : (_value$elements$link$ = _value$elements$link.color) === null || _value$elements$link$ === void 0 ? void 0 : _value$elements$link$.text);
+
+  const setLinkColor = newColor => {
+    onChange((0, _object.immutableSet)(value, ['elements', 'link', 'color', 'text'], encodeColorValue(newColor)));
+  };
+
+  const hoverLinkColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$eleme4 = inheritedValue.elements) === null || _inheritedValue$eleme4 === void 0 ? void 0 : (_inheritedValue$eleme5 = _inheritedValue$eleme4.link) === null || _inheritedValue$eleme5 === void 0 ? void 0 : (_inheritedValue$eleme6 = _inheritedValue$eleme5[':hover']) === null || _inheritedValue$eleme6 === void 0 ? void 0 : (_inheritedValue$eleme7 = _inheritedValue$eleme6.color) === null || _inheritedValue$eleme7 === void 0 ? void 0 : _inheritedValue$eleme7.text);
+  const userHoverLinkColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$elements2 = value.elements) === null || _value$elements2 === void 0 ? void 0 : (_value$elements2$link = _value$elements2.link) === null || _value$elements2$link === void 0 ? void 0 : (_value$elements2$link2 = _value$elements2$link[':hover']) === null || _value$elements2$link2 === void 0 ? void 0 : (_value$elements2$link3 = _value$elements2$link2.color) === null || _value$elements2$link3 === void 0 ? void 0 : _value$elements2$link3.text);
+
+  const setHoverLinkColor = newColor => {
+    onChange((0, _object.immutableSet)(value, ['elements', 'link', ':hover', 'color', 'text'], encodeColorValue(newColor)));
+  };
+
+  const hasLink = () => !!userLinkColor || !!userHoverLinkColor;
+
+  const resetLink = () => {
+    let newValue = (0, _object.immutableSet)(value, ['elements', 'link', ':hover', 'color', 'text'], undefined);
+    newValue = (0, _object.immutableSet)(newValue, ['elements', 'link', 'color', 'text'], undefined);
+    onChange(newValue);
+  }; // Elements
+
+
+  const elements = [{
+    name: 'caption',
+    label: (0, _i18n.__)('Captions'),
+    showPanel: useHasCaptionPanel(settings)
+  }, {
+    name: 'button',
+    label: (0, _i18n.__)('Button'),
+    showPanel: useHasButtonPanel(settings)
+  }, {
+    name: 'heading',
+    label: (0, _i18n.__)('Heading'),
+    showPanel: useHasHeadingPanel(settings)
+  }, {
+    name: 'h1',
+    label: (0, _i18n.__)('H1'),
+    showPanel: useHasHeadingPanel(settings)
+  }, {
+    name: 'h2',
+    label: (0, _i18n.__)('H2'),
+    showPanel: useHasHeadingPanel(settings)
+  }, {
+    name: 'h3',
+    label: (0, _i18n.__)('H3'),
+    showPanel: useHasHeadingPanel(settings)
+  }, {
+    name: 'h4',
+    label: (0, _i18n.__)('H4'),
+    showPanel: useHasHeadingPanel(settings)
+  }, {
+    name: 'h5',
+    label: (0, _i18n.__)('H5'),
+    showPanel: useHasHeadingPanel(settings)
+  }, {
+    name: 'h6',
+    label: (0, _i18n.__)('H6'),
+    showPanel: useHasHeadingPanel(settings)
+  }];
+  const resetAllFilter = (0, _element.useCallback)(previousValue => {
+    var _previousValue$elemen;
+
+    return { ...previousValue,
+      color: undefined,
+      elements: { ...(previousValue === null || previousValue === void 0 ? void 0 : previousValue.elements),
+        link: { ...(previousValue === null || previousValue === void 0 ? void 0 : (_previousValue$elemen = previousValue.elements) === null || _previousValue$elemen === void 0 ? void 0 : _previousValue$elemen.link),
+          color: undefined,
+          ':hover': {
+            color: undefined
+          }
+        },
+        ...elements.reduce((acc, element) => {
+          var _previousValue$elemen2;
+
+          return { ...acc,
+            [element.name]: { ...(previousValue === null || previousValue === void 0 ? void 0 : (_previousValue$elemen2 = previousValue.elements) === null || _previousValue$elemen2 === void 0 ? void 0 : _previousValue$elemen2[element.name]),
+              color: undefined
+            }
+          };
+        }, {})
+      }
+    };
+  }, []);
+  const items = [showTextPanel && {
+    key: 'text',
+    label: (0, _i18n.__)('Text'),
+    hasValue: hasTextColor,
+    resetValue: resetTextColor,
+    isShownByDefault: defaultControls.text,
+    indicators: [textColor],
+    tabs: [{
+      key: 'text',
+      label: (0, _i18n.__)('Text'),
+      inheritedValue: textColor,
+      setValue: setTextColor,
+      userValue: userTextColor
+    }]
+  }, showBackgroundPanel && {
+    key: 'background',
+    label: (0, _i18n.__)('Background'),
+    hasValue: hasBackground,
+    resetValue: resetBackground,
+    isShownByDefault: defaultControls.background,
+    indicators: [gradient !== null && gradient !== void 0 ? gradient : backgroundColor],
+    tabs: [{
+      key: 'background',
+      label: (0, _i18n.__)('Solid'),
+      inheritedValue: backgroundColor,
+      setValue: setBackgroundColor,
+      userValue: userBackgroundColor
+    }, {
+      key: 'gradient',
+      label: (0, _i18n.__)('Gradient'),
+      inheritedValue: gradient,
+      setValue: setGradient,
+      userValue: userGradient,
+      isGradient: true
+    }]
+  }, showLinkPanel && {
+    key: 'link',
+    label: (0, _i18n.__)('Link'),
+    hasValue: hasLink,
+    resetValue: resetLink,
+    isShownByDefault: defaultControls.link,
+    indicators: [linkColor, hoverLinkColor],
+    tabs: [{
+      key: 'link',
+      label: (0, _i18n.__)('Default'),
+      inheritedValue: linkColor,
+      setValue: setLinkColor,
+      userValue: userLinkColor
+    }, {
+      key: 'hover',
+      label: (0, _i18n.__)('Hover'),
+      inheritedValue: hoverLinkColor,
+      setValue: setHoverLinkColor,
+      userValue: userHoverLinkColor
+    }]
+  }].filter(Boolean);
+  elements.forEach(_ref12 => {
+    var _inheritedValue$eleme8, _inheritedValue$eleme9, _inheritedValue$eleme10, _inheritedValue$eleme11, _inheritedValue$eleme12, _inheritedValue$eleme13, _inheritedValue$eleme14, _inheritedValue$eleme15, _inheritedValue$eleme16, _value$elements3, _value$elements3$name, _value$elements3$name2, _value$elements4, _value$elements4$name, _value$elements4$name2, _value$elements5, _value$elements5$name, _value$elements5$name2;
+
+    let {
+      name,
+      label,
+      showPanel
+    } = _ref12;
+    if (!showPanel) return;
+    const elementBackgroundColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$eleme8 = inheritedValue.elements) === null || _inheritedValue$eleme8 === void 0 ? void 0 : (_inheritedValue$eleme9 = _inheritedValue$eleme8[name]) === null || _inheritedValue$eleme9 === void 0 ? void 0 : (_inheritedValue$eleme10 = _inheritedValue$eleme9.color) === null || _inheritedValue$eleme10 === void 0 ? void 0 : _inheritedValue$eleme10.background);
+    const elementGradient = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$eleme11 = inheritedValue.elements) === null || _inheritedValue$eleme11 === void 0 ? void 0 : (_inheritedValue$eleme12 = _inheritedValue$eleme11[name]) === null || _inheritedValue$eleme12 === void 0 ? void 0 : (_inheritedValue$eleme13 = _inheritedValue$eleme12.color) === null || _inheritedValue$eleme13 === void 0 ? void 0 : _inheritedValue$eleme13.gradient);
+    const elementTextColor = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$eleme14 = inheritedValue.elements) === null || _inheritedValue$eleme14 === void 0 ? void 0 : (_inheritedValue$eleme15 = _inheritedValue$eleme14[name]) === null || _inheritedValue$eleme15 === void 0 ? void 0 : (_inheritedValue$eleme16 = _inheritedValue$eleme15.color) === null || _inheritedValue$eleme16 === void 0 ? void 0 : _inheritedValue$eleme16.text);
+    const elementBackgroundUserColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$elements3 = value.elements) === null || _value$elements3 === void 0 ? void 0 : (_value$elements3$name = _value$elements3[name]) === null || _value$elements3$name === void 0 ? void 0 : (_value$elements3$name2 = _value$elements3$name.color) === null || _value$elements3$name2 === void 0 ? void 0 : _value$elements3$name2.background);
+    const elementGradientUserColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$elements4 = value.elements) === null || _value$elements4 === void 0 ? void 0 : (_value$elements4$name = _value$elements4[name]) === null || _value$elements4$name === void 0 ? void 0 : (_value$elements4$name2 = _value$elements4$name.color) === null || _value$elements4$name2 === void 0 ? void 0 : _value$elements4$name2.gradient);
+    const elementTextUserColor = decodeValue(value === null || value === void 0 ? void 0 : (_value$elements5 = value.elements) === null || _value$elements5 === void 0 ? void 0 : (_value$elements5$name = _value$elements5[name]) === null || _value$elements5$name === void 0 ? void 0 : (_value$elements5$name2 = _value$elements5$name.color) === null || _value$elements5$name2 === void 0 ? void 0 : _value$elements5$name2.text);
+
+    const hasElement = () => !!(elementTextUserColor || elementBackgroundUserColor || elementGradientUserColor);
+
+    const resetElement = () => {
+      const newValue = (0, _object.immutableSet)(value, ['elements', name, 'color', 'background'], undefined);
+      newValue.elements[name].color.gradient = undefined;
+      newValue.elements[name].color.text = undefined;
+      onChange(newValue);
+    };
+
+    const setElementTextColor = newTextColor => {
+      onChange((0, _object.immutableSet)(value, ['elements', name, 'color', 'text'], encodeColorValue(newTextColor)));
+    };
+
+    const setElementBackgroundColor = newBackgroundColor => {
+      const newValue = (0, _object.immutableSet)(value, ['elements', name, 'color', 'background'], encodeColorValue(newBackgroundColor));
+      newValue.elements[name].color.gradient = undefined;
+      onChange(newValue);
+    };
+
+    const setElementGradient = newGradient => {
+      const newValue = (0, _object.immutableSet)(value, ['elements', name, 'color', 'gradient'], encodeGradientValue(newGradient));
+      newValue.elements[name].color.background = undefined;
+      onChange(newValue);
+    };
+
+    const supportsTextColor = true; // Background color is not supported for `caption`
+    // as there isn't yet a way to set padding for the element.
+
+    const supportsBackground = name !== 'caption';
+    items.push({
+      key: name,
+      label,
+      hasValue: hasElement,
+      resetValue: resetElement,
+      isShownByDefault: defaultControls[name],
+      indicators: supportsTextColor && supportsBackground ? [elementTextColor, elementGradient !== null && elementGradient !== void 0 ? elementGradient : elementBackgroundColor] : [supportsTextColor ? elementTextColor : elementGradient !== null && elementGradient !== void 0 ? elementGradient : elementBackgroundColor],
+      tabs: [hasSolidColors && supportsTextColor && {
+        key: 'text',
+        label: (0, _i18n.__)('Text'),
+        inheritedValue: elementTextColor,
+        setValue: setElementTextColor,
+        userValue: elementTextUserColor
+      }, hasSolidColors && supportsBackground && {
+        key: 'background',
+        label: (0, _i18n.__)('Background'),
+        inheritedValue: elementBackgroundColor,
+        setValue: setElementBackgroundColor,
+        userValue: elementBackgroundUserColor
+      }, hasGradientColors && supportsBackground && {
+        key: 'gradient',
+        label: (0, _i18n.__)('Gradient'),
+        inheritedValue: elementGradient,
+        setValue: setElementGradient,
+        userValue: elementGradientUserColor,
+        isGradient: true
+      }].filter(Boolean)
+    });
+  });
+  return (0, _element.createElement)(Wrapper, {
+    resetAllFilter: resetAllFilter,
+    value: value,
+    onChange: onChange,
+    panelId: panelId
+  }, items.map(item => (0, _element.createElement)(ColorPanelDropdown, (0, _extends2.default)({
+    key: item.key
+  }, item, {
+    colorGradientControlSettings: {
+      colors,
+      disableCustomColors: !areCustomSolidsEnabled,
+      gradients,
+      disableCustomGradients: !areCustomGradientsEnabled
+    },
+    panelId: panelId
+  }))), children);
+}
+//# sourceMappingURL=color-panel.js.map