@wordpress/block-editor
Version:
214 lines (213 loc) • 6.83 kB
JavaScript
// packages/block-editor/src/components/global-styles/background-panel.js
import {
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { useCallback, Platform } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { getValueFromVariable } from "@wordpress/global-styles-engine";
import BackgroundImageControl from "../background-image-control/index.mjs";
import { ColorPanelDropdown } from "./color-panel.mjs";
import { useGradientsPerOrigin } from "./hooks.mjs";
import { useToolsPanelDropdownMenuProps } from "./utils.mjs";
import { setImmutably } from "../../utils/object.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
var DEFAULT_CONTROLS = {
backgroundImage: true,
gradient: true
};
function useHasBackgroundControl(settings, feature) {
return Platform.OS === "web" && settings?.background?.[feature];
}
function useHasBackgroundPanel(settings) {
const { backgroundImage, gradient } = settings?.background || {};
return Platform.OS === "web" && (backgroundImage || gradient);
}
function hasBackgroundSizeValue(style) {
return style?.background?.backgroundPosition !== void 0 || style?.background?.backgroundSize !== void 0;
}
function hasBackgroundImageValue(style) {
return !!style?.background?.backgroundImage?.id || // Supports url() string values in theme.json.
"string" === typeof style?.background?.backgroundImage || !!style?.background?.backgroundImage?.url;
}
function hasBackgroundGradientValue(style) {
return "string" === typeof style?.background?.gradient && style?.background?.gradient !== "";
}
function BackgroundToolsPanel({
resetAllFilter,
onChange,
value,
panelId,
children,
headerLabel
}) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetAll = () => {
const updatedValue = resetAllFilter(value);
onChange(updatedValue);
};
return /* @__PURE__ */ jsx(
ToolsPanel,
{
label: headerLabel,
resetAll,
panelId,
hasInnerWrapper: true,
className: "background-block-support-panel",
__experimentalFirstVisibleItemClass: "first",
__experimentalLastVisibleItemClass: "last",
dropdownMenuProps,
children: /* @__PURE__ */ jsx("div", { className: "background-block-support-panel__inner-wrapper", children })
}
);
}
function BackgroundImagePanel({
as: Wrapper = BackgroundToolsPanel,
value,
onChange,
inheritedValue,
settings,
panelId,
defaultControls = DEFAULT_CONTROLS,
defaultValues = {},
headerLabel = __("Background")
}) {
const gradients = useGradientsPerOrigin(settings);
const areCustomGradientsEnabled = settings?.color?.customGradient;
const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
const hasBackgroundGradientControl = useHasBackgroundControl(
settings,
"gradient"
);
const showBackgroundGradientControl = hasGradientColors && hasBackgroundGradientControl;
const showBackgroundImageControl = useHasBackgroundControl(
settings,
"backgroundImage"
);
const resetAllFilter = useCallback(
(previousValue) => {
return {
...previousValue,
background: {},
color: hasBackgroundGradientControl ? {
...previousValue?.color,
gradient: void 0
} : previousValue?.color
};
},
[hasBackgroundGradientControl]
);
if (!showBackgroundGradientControl && !showBackgroundImageControl) {
return null;
}
const decodeValue = (rawValue) => getValueFromVariable({ settings }, "", rawValue);
const encodeGradientValue = (gradientValue) => {
const allGradients = gradients.flatMap(
({ gradients: originGradients }) => originGradients
);
const gradientObject = allGradients.find(
({ gradient }) => gradient === gradientValue
);
return gradientObject ? "var:preset|gradient|" + gradientObject.slug : gradientValue;
};
const resetBackground = () => onChange(
setImmutably(
value,
["background", "backgroundImage"],
void 0
)
);
const resetGradient = () => {
let newValue = setImmutably(
value,
["background", "gradient"],
void 0
);
newValue = setImmutably(newValue, ["color", "gradient"], void 0);
onChange(newValue);
};
const currentGradient = decodeValue(
value?.background?.gradient ?? value?.color?.gradient
);
const inheritedGradient = decodeValue(
inheritedValue?.background?.gradient ?? inheritedValue?.color?.gradient
);
const setGradient = (newGradient) => {
let newValue = setImmutably(
value,
["background", "gradient"],
encodeGradientValue(newGradient)
);
newValue = setImmutably(newValue, ["color", "gradient"], void 0);
onChange(newValue);
};
return /* @__PURE__ */ jsxs(
Wrapper,
{
resetAllFilter,
value,
onChange,
panelId,
headerLabel,
children: [
showBackgroundImageControl && /* @__PURE__ */ jsx(
ToolsPanelItem,
{
className: "block-editor-background-panel__item",
hasValue: () => hasBackgroundImageValue(value),
label: __("Image"),
onDeselect: resetBackground,
isShownByDefault: defaultControls.backgroundImage,
panelId,
children: /* @__PURE__ */ jsx(
BackgroundImageControl,
{
value,
onChange,
settings,
inheritedValue,
defaultControls,
defaultValues
}
)
}
),
showBackgroundGradientControl && /* @__PURE__ */ jsx(
ColorPanelDropdown,
{
className: "block-editor-background-panel__item",
label: __("Gradient"),
hasValue: () => hasBackgroundGradientValue(value),
resetValue: resetGradient,
isShownByDefault: defaultControls.gradient,
indicators: [currentGradient],
tabs: [
{
key: "gradient",
label: __("Gradient"),
inheritedValue: currentGradient ?? inheritedGradient,
setValue: setGradient,
userValue: currentGradient,
isGradient: true
}
],
colorGradientControlSettings: {
gradients,
disableCustomGradients: !areCustomGradientsEnabled
},
panelId
}
)
]
}
);
}
export {
BackgroundImagePanel as default,
hasBackgroundGradientValue,
hasBackgroundImageValue,
hasBackgroundSizeValue,
useHasBackgroundControl,
useHasBackgroundPanel
};
//# sourceMappingURL=background-panel.mjs.map