@wordpress/block-library
Version:
Block library for the WordPress editor.
91 lines (90 loc) • 2.62 kB
JavaScript
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import {
RangeControl,
__experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import {
withColors,
__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
__experimentalUseGradient as useGradient,
__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients
} from "@wordpress/block-editor";
import { compose } from "@wordpress/compose";
import { __ } from "@wordpress/i18n";
const Overlay = ({
clientId,
attributes,
setAttributes,
overlayColor,
setOverlayColor
}) => {
const { dimRatio } = attributes;
const { gradientValue, setGradient } = useGradient();
const colorGradientSettings = useMultipleOriginColorsAndGradients();
if (!colorGradientSettings.hasColorsOrGradients) {
return null;
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
ColorGradientSettingsDropdown,
{
__experimentalIsRenderedInSidebar: true,
settings: [
{
colorValue: overlayColor.color,
gradientValue,
label: __("Overlay"),
onColorChange: setOverlayColor,
onGradientChange: setGradient,
isShownByDefault: true,
resetAllFilter: () => ({
overlayColor: void 0,
customOverlayColor: void 0,
gradient: void 0,
customGradient: void 0
}),
clearable: true
}
],
panelId: clientId,
...colorGradientSettings
}
),
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: () => dimRatio !== void 0,
label: __("Overlay opacity"),
onDeselect: () => setAttributes({ dimRatio: 0 }),
resetAllFilter: () => ({
dimRatio: 0
}),
isShownByDefault: true,
panelId: clientId,
children: /* @__PURE__ */ jsx(
RangeControl,
{
__nextHasNoMarginBottom: true,
label: __("Overlay opacity"),
value: dimRatio,
onChange: (newDimRatio) => setAttributes({
dimRatio: newDimRatio
}),
min: 0,
max: 100,
step: 10,
required: true,
__next40pxDefaultSize: true
}
)
}
)
] });
};
var overlay_controls_default = compose([
withColors({ overlayColor: "background-color" })
])(Overlay);
export {
overlay_controls_default as default
};
//# sourceMappingURL=overlay-controls.js.map