@wordpress/block-library
Version:
Block library for the WordPress editor.
84 lines (82 loc) • 2.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
const Overlay = ({
clientId,
attributes,
setAttributes,
overlayColor,
setOverlayColor
}) => {
const {
dimRatio
} = attributes;
const {
gradientValue,
setGradient
} = (0, _blockEditor.__experimentalUseGradient)();
const colorGradientSettings = (0, _blockEditor.__experimentalUseMultipleOriginColorsAndGradients)();
if (!colorGradientSettings.hasColorsOrGradients) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalColorGradientSettingsDropdown, {
__experimentalIsRenderedInSidebar: true,
settings: [{
colorValue: overlayColor.color,
gradientValue,
label: (0, _i18n.__)('Overlay'),
onColorChange: setOverlayColor,
onGradientChange: setGradient,
isShownByDefault: true,
resetAllFilter: () => ({
overlayColor: undefined,
customOverlayColor: undefined,
gradient: undefined,
customGradient: undefined
}),
clearable: true
}],
panelId: clientId,
...colorGradientSettings
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => dimRatio !== undefined,
label: (0, _i18n.__)('Overlay opacity'),
onDeselect: () => setAttributes({
dimRatio: 0
}),
resetAllFilter: () => ({
dimRatio: 0
}),
isShownByDefault: true,
panelId: clientId,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Overlay opacity'),
value: dimRatio,
onChange: newDimRatio => setAttributes({
dimRatio: newDimRatio
}),
min: 0,
max: 100,
step: 10,
required: true,
__next40pxDefaultSize: true
})
})]
});
};
var _default = exports.default = (0, _compose.compose)([(0, _blockEditor.withColors)({
overlayColor: 'background-color'
})])(Overlay);
//# sourceMappingURL=overlay-controls.js.map