@wordpress/block-editor
Version:
99 lines (98 loc) • 3.39 kB
JavaScript
// packages/block-editor/src/components/editor-styles/index.js
import { colord, extend } from "colord";
import namesPlugin from "colord/plugins/names";
import a11yPlugin from "colord/plugins/a11y";
import { SVG } from "@wordpress/components";
import { useCallback, useMemo, memo } from "@wordpress/element";
import { useSelect } from "@wordpress/data";
import transformStyles from "../../utils/transform-styles";
import { store as blockEditorStore } from "../../store";
import { unlock } from "../../lock-unlock";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
extend([namesPlugin, a11yPlugin]);
function useDarkThemeBodyClassName(styles, scope) {
return useCallback(
(node) => {
if (!node) {
return;
}
const { ownerDocument } = node;
const { defaultView, body } = ownerDocument;
const canvas = scope ? ownerDocument.querySelector(scope) : body;
let backgroundColor;
if (!canvas) {
const tempCanvas = ownerDocument.createElement("div");
tempCanvas.classList.add("editor-styles-wrapper");
body.appendChild(tempCanvas);
backgroundColor = defaultView?.getComputedStyle(tempCanvas, null).getPropertyValue("background-color");
body.removeChild(tempCanvas);
} else {
backgroundColor = defaultView?.getComputedStyle(canvas, null).getPropertyValue("background-color");
}
const colordBackgroundColor = colord(backgroundColor);
if (colordBackgroundColor.luminance() > 0.5 || colordBackgroundColor.alpha() === 0) {
body.classList.remove("is-dark-theme");
} else {
body.classList.add("is-dark-theme");
}
},
[styles, scope]
);
}
function EditorStyles({ styles, scope, transformOptions }) {
const overrides = useSelect(
(select) => unlock(select(blockEditorStore)).getStyleOverrides(),
[]
);
const [transformedStyles, transformedSvgs] = useMemo(() => {
const _styles = Object.values(styles ?? []);
for (const [id, override] of overrides) {
const index = _styles.findIndex(({ id: _id }) => id === _id);
const overrideWithId = { ...override, id };
if (index === -1) {
_styles.push(overrideWithId);
} else {
_styles[index] = overrideWithId;
}
}
return [
transformStyles(
_styles.filter((style) => style?.css),
scope,
transformOptions
),
_styles.filter((style) => style.__unstableType === "svgs").map((style) => style.assets).join("")
];
}, [styles, overrides, scope, transformOptions]);
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
"style",
{
ref: useDarkThemeBodyClassName(transformedStyles, scope)
}
),
transformedStyles.map((css, index) => /* @__PURE__ */ jsx("style", { children: css }, index)),
/* @__PURE__ */ jsx(
SVG,
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 0 0",
width: "0",
height: "0",
role: "none",
style: {
visibility: "hidden",
position: "absolute",
left: "-9999px",
overflow: "hidden"
},
dangerouslySetInnerHTML: { __html: transformedSvgs }
}
)
] });
}
var editor_styles_default = memo(EditorStyles);
export {
editor_styles_default as default
};
//# sourceMappingURL=index.js.map