@wordpress/block-editor
Version:
203 lines (202 loc) • 6.44 kB
JavaScript
// packages/block-editor/src/hooks/background.js
import clsx from "clsx";
import { getBlockSupport } from "@wordpress/blocks";
import { useSelect } from "@wordpress/data";
import { useCallback } from "@wordpress/element";
import InspectorControls from "../components/inspector-controls/index.mjs";
import { cleanEmptyObject } from "./utils.mjs";
import { store as blockEditorStore } from "../store/index.mjs";
import {
default as StylesBackgroundPanel,
useHasBackgroundPanel,
hasBackgroundImageValue,
hasBackgroundGradientValue
} from "../components/global-styles/background-panel.mjs";
import { globalStylesDataKey } from "../store/private-keys.mjs";
import { jsx } from "react/jsx-runtime";
var BACKGROUND_SUPPORT_KEY = "background";
var BACKGROUND_BLOCK_DEFAULT_VALUES = {
backgroundSize: "cover",
backgroundPosition: "50% 50%"
// used only when backgroundSize is 'contain'.
};
function hasBackgroundSupport(blockName, feature = "any") {
const support = getBlockSupport(blockName, BACKGROUND_SUPPORT_KEY);
if (support === true) {
return true;
}
if (feature === "any") {
return !!support?.backgroundImage || !!support?.backgroundSize || !!support?.backgroundRepeat || !!support?.gradient;
}
return !!support?.[feature];
}
function setBackgroundStyleDefaults(backgroundStyle) {
if (!backgroundStyle || !backgroundStyle?.backgroundImage?.url) {
return;
}
let backgroundStylesWithDefaults;
if (!backgroundStyle?.backgroundSize) {
backgroundStylesWithDefaults = {
backgroundSize: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize
};
}
if ("contain" === backgroundStyle?.backgroundSize && !backgroundStyle?.backgroundPosition) {
backgroundStylesWithDefaults = {
backgroundPosition: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition
};
}
return backgroundStylesWithDefaults;
}
function useBlockProps({ name, style }) {
if (!hasBackgroundSupport(name) || !style?.background?.backgroundImage) {
return;
}
const backgroundStyles = setBackgroundStyleDefaults(style?.background);
if (!backgroundStyles) {
return;
}
return {
style: {
...backgroundStyles
}
};
}
function getBackgroundImageClasses(style) {
return hasBackgroundImageValue(style) || hasBackgroundGradientValue(style) ? "has-background" : "";
}
function BackgroundInspectorControl({
children,
backgroundGradientSupported = false
}) {
const resetAllFilter = useCallback(
(attributes) => {
const updatedClassName = attributes.className?.includes(
"has-background"
) ? attributes.className.split(" ").filter((c) => c !== "has-background").join(" ") || void 0 : attributes.className;
return {
...attributes,
className: updatedClassName,
style: cleanEmptyObject({
...attributes.style,
background: void 0,
color: backgroundGradientSupported ? {
...attributes.style?.color,
gradient: void 0
} : attributes.style?.color
})
};
},
[backgroundGradientSupported]
);
return /* @__PURE__ */ jsx(InspectorControls, { group: "background", resetAllFilter, children });
}
function BackgroundImagePanel({
clientId,
name,
setAttributes,
settings
}) {
const { style, className, inheritedValue } = useSelect(
(select) => {
const { getBlockAttributes, getSettings } = select(blockEditorStore);
const _settings = getSettings();
const blockAttributes = getBlockAttributes(clientId);
return {
style: blockAttributes?.style,
className: blockAttributes?.className,
/*
* To ensure we pass down the right inherited values:
* @TODO 1. Pass inherited value down to all block style controls,
* See: packages/block-editor/src/hooks/style.js
* @TODO 2. Add support for block style variations,
* See implementation: packages/block-editor/src/hooks/block-style-variation.js
*/
inheritedValue: _settings[globalStylesDataKey]?.blocks?.[name]
};
},
[clientId, name]
);
const backgroundGradientSupported = hasBackgroundSupport(
name,
"gradient"
);
const as = useCallback(
({ children }) => /* @__PURE__ */ jsx(
BackgroundInspectorControl,
{
backgroundGradientSupported,
children
}
),
[backgroundGradientSupported]
);
if (!useHasBackgroundPanel(settings) || !hasBackgroundSupport(name)) {
return null;
}
const onChange = (newStyle) => {
const isMigrating = backgroundGradientSupported && !!style?.color?.gradient;
const newAttributes = {
style: cleanEmptyObject(
backgroundGradientSupported ? {
...newStyle,
color: {
...newStyle?.color,
gradient: void 0
}
} : newStyle
)
};
if (isMigrating && !!newStyle?.background?.gradient) {
newAttributes.className = clsx(className, "has-background");
} else if (!newStyle?.background?.gradient && className?.includes("has-background")) {
newAttributes.className = className.split(" ").filter((c) => c !== "has-background").join(" ") || void 0;
}
setAttributes(newAttributes);
};
const styleValue = backgroundGradientSupported && !style?.background?.gradient && style?.color?.gradient ? {
...style,
background: {
...style?.background,
gradient: style?.color?.gradient
}
} : style;
const updatedSettings = {
...settings,
background: {
...settings.background,
backgroundSize: settings?.background?.backgroundSize && hasBackgroundSupport(name, "backgroundSize")
}
};
const defaultControls = getBlockSupport(name, [
BACKGROUND_SUPPORT_KEY,
"__experimentalDefaultControls"
]);
return /* @__PURE__ */ jsx(
StylesBackgroundPanel,
{
inheritedValue,
as,
panelId: clientId,
defaultValues: BACKGROUND_BLOCK_DEFAULT_VALUES,
settings: updatedSettings,
onChange,
defaultControls,
value: styleValue
}
);
}
var background_default = {
useBlockProps,
attributeKeys: ["style"],
hasSupport: hasBackgroundSupport
};
export {
BACKGROUND_BLOCK_DEFAULT_VALUES,
BACKGROUND_SUPPORT_KEY,
BackgroundImagePanel,
background_default as default,
getBackgroundImageClasses,
hasBackgroundSupport,
setBackgroundStyleDefaults
};
//# sourceMappingURL=background.mjs.map