@wordpress/block-editor
Version:
146 lines (141 loc) • 6.41 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
Object.defineProperty(exports, "useHasColorPanel", {
enumerable: true,
get: function () {
return _colorPanel.useHasColorPanel;
}
});
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _panelColorGradientSettings = _interopRequireDefault(require("../colors-gradients/panel-color-gradient-settings"));
var _hooks = require("./hooks");
var _utils = require("./utils");
var _object = require("../../utils/object");
var _contrastChecker = _interopRequireDefault(require("../contrast-checker"));
var _inspectorControls = _interopRequireDefault(require("../inspector-controls"));
var _colorPanel = require("./color-panel.js");
var _useGlobalStylesContext = require("./use-global-styles-context");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ColorPanel = ({
value,
inheritedValue = value,
onChange,
settings
}) => {
const colors = (0, _hooks.useColorsPerOrigin)(settings);
const gradients = (0, _hooks.useGradientsPerOrigin)(settings);
const globalStyles = (0, _useGlobalStylesContext.useGlobalStyles)();
const [detectedBackgroundColor, setDetectedBackgroundColor] = (0, _element.useState)();
const [detectedTextColor, setDetectedTextColor] = (0, _element.useState)();
const {
baseGlobalStyles
} = (0, _data.useSelect)(select => {
const {
getSettings
} = select(_blockEditor.store);
return {
baseGlobalStyles: getSettings()?.__experimentalGlobalStylesBaseStyles?.color
};
});
const decodeValue = rawValue => (0, _utils.getValueFromVariable)({
settings
}, '', rawValue);
const encodeColorValue = (0, _element.useCallback)(colorValue => {
const allColors = colors.flatMap(({
colors: originColors
}) => originColors);
const colorObject = allColors.find(({
color
}) => color === colorValue);
return colorObject ? 'var:preset|color|' + colorObject.slug : colorValue;
}, [colors]);
const encodeGradientValue = (0, _element.useCallback)(gradientValue => {
const allGradients = gradients.flatMap(({
gradients: originGradients
}) => originGradients);
const gradientObject = allGradients.find(({
gradient
}) => gradient === gradientValue);
return gradientObject ? 'var:preset|gradient|' + gradientObject.slug : gradientValue;
}, [gradients]);
// Text Color
const showTextPanel = (0, _colorPanel.useHasTextPanel)(settings);
const textColor = decodeValue(inheritedValue?.color?.text);
const setTextColor = (0, _element.useCallback)(newColor => {
onChange((0, _object.setImmutably)(value, ['color', 'text'], encodeColorValue(newColor)));
}, [encodeColorValue, onChange, value]);
const resetTextColor = (0, _element.useCallback)(() => setTextColor(undefined), [setTextColor]);
// BackgroundColor
const showBackgroundPanel = (0, _colorPanel.useHasBackgroundColorPanel)(settings);
const backgroundColor = decodeValue(inheritedValue?.color?.background);
const gradient = decodeValue(inheritedValue?.color?.gradient);
const setBackgroundColor = (0, _element.useCallback)(newColor => {
const newValue = (0, _object.setImmutably)(value, ['color', 'background'], encodeColorValue(newColor));
newValue.color.gradient = undefined;
onChange(newValue);
}, [encodeColorValue, onChange, value]);
const setGradient = (0, _element.useCallback)(newGradient => {
const newValue = (0, _object.setImmutably)(value, ['color', 'gradient'], encodeGradientValue(newGradient));
newValue.color.background = undefined;
onChange(newValue);
}, [encodeGradientValue, onChange, value]);
const resetBackground = (0, _element.useCallback)(() => {
const newValue = (0, _object.setImmutably)(value, ['color', 'background'], undefined);
newValue.color.gradient = undefined;
onChange(newValue);
}, [onChange, value]);
const currentGradients = settings?.color?.gradients;
const withoutGradientsSupport = Array.isArray(currentGradients) && currentGradients.length === 0;
const items = (0, _element.useMemo)(() => [showTextPanel && {
label: (0, _i18n.__)('Text'),
colorValue: textColor,
onColorChange: setTextColor,
onColorCleared: resetTextColor
}, showBackgroundPanel && {
label: (0, _i18n.__)('Background'),
colorValue: backgroundColor,
onColorChange: setBackgroundColor,
onColorCleared: resetBackground,
onGradientChange: !withoutGradientsSupport ? setGradient : undefined,
gradientValue: gradient
}].filter(Boolean), [backgroundColor, gradient, resetBackground, resetTextColor, setBackgroundColor, setGradient, setTextColor, showBackgroundPanel, showTextPanel, textColor, withoutGradientsSupport]);
(0, _element.useEffect)(() => {
// The following logic is used to determine current text/background colors:
// 1. The globalStyles object is queried to determine whether a color has been
// set via a block's settings.
// 2. If a block-based theme is in use and no globalStyles exist, the theme's
// default/base colors are used.
// 3. If no globalStyles exist and a theme isn't block-based, there is no way
// to determine the default text/background color and the checker won't run.
const currentDetectedTextColor = globalStyles?.color || baseGlobalStyles?.text;
const currentDetectedBackgroundColor = globalStyles?.backgroundColor || baseGlobalStyles?.background;
setDetectedTextColor(currentDetectedTextColor);
setDetectedBackgroundColor(currentDetectedBackgroundColor);
}, [globalStyles, baseGlobalStyles]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelColorGradientSettings.default, {
title: (0, _i18n.__)('Color'),
initialOpen: false,
settings: items,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_contrastChecker.default, {
backgroundColor: detectedBackgroundColor,
textColor: detectedTextColor
})
})
});
};
var _default = exports.default = ColorPanel;
//# sourceMappingURL=color-panel.native.js.map