@wordpress/block-library/build/cover/overlay-color-settings.native.js

Block library for the WordPress editor.

"use strict";

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

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

var _i18n = require("@wordpress/i18n");

var _blockEditor = require("@wordpress/block-editor");

var _components = require("@wordpress/components");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function OverlayColorSettings(_ref) {
  let {
    overlayColor,
    customOverlayColor,
    gradient,
    customGradient,
    setAttributes
  } = _ref;
  const colors = (0, _components.useMobileGlobalStylesColors)();
  const gradients = (0, _components.useMobileGlobalStylesColors)('gradients');
  const gradientValue = customGradient || (0, _blockEditor.getGradientValueBySlug)(gradients, gradient);
  const colorValue = (0, _blockEditor.getColorObjectByAttributeValues)(colors, overlayColor, customOverlayColor).color;
  const settings = (0, _element.useMemo)(() => {
    const setOverlayAttribute = (attributeName, value) => {
      setAttributes({
        // Clear all related attributes (only one should be set)
        overlayColor: undefined,
        customOverlayColor: undefined,
        gradient: undefined,
        customGradient: undefined,
        [attributeName]: value
      });
    };

    const onColorChange = value => {
      // Do nothing for falsy values.
      if (!value) {
        return;
      }

      const colorObject = (0, _blockEditor.getColorObjectByColorValue)(colors, value);

      if (colorObject !== null && colorObject !== void 0 && colorObject.slug) {
        setOverlayAttribute('overlayColor', colorObject.slug);
      } else {
        setOverlayAttribute('customOverlayColor', value);
      }
    };

    const onGradientChange = value => {
      // Do nothing for falsy values.
      if (!value) {
        return;
      }

      const slug = (0, _blockEditor.getGradientSlugByValue)(gradients, value);

      if (slug) {
        setOverlayAttribute('gradient', slug);
      } else {
        setOverlayAttribute('customGradient', value);
      }
    };

    const onColorCleared = () => {
      setAttributes({
        overlayColor: undefined,
        customOverlayColor: undefined,
        gradient: undefined,
        customGradient: undefined
      });
    };

    return [{
      label: (0, _i18n.__)('Color'),
      onColorChange,
      colorValue,
      gradientValue,
      onGradientChange,
      onColorCleared
    }];
  }, [colorValue, gradientValue, colors, gradients]);
  return (0, _element.createElement)(_blockEditor.__experimentalPanelColorGradientSettings, {
    title: (0, _i18n.__)('Overlay'),
    initialOpen: false,
    settings: settings
  });
}

var _default = OverlayColorSettings;
exports.default = _default;
//# sourceMappingURL=overlay-color-settings.native.js.map