@wordpress/block-library
Version:
Block library for the WordPress editor.
52 lines (51 loc) • 2.26 kB
JavaScript
// packages/block-library/src/navigation/edit/use-layout-custom-properties.js
import { useSettings, useStyleOverride } from "@wordpress/block-editor";
import { privateApis as globalStylesEnginePrivateApis } from "@wordpress/global-styles-engine";
import { unlock } from "../../lock-unlock.mjs";
var { getResponsiveMediaQueries } = unlock(globalStylesEnginePrivateApis);
var JUSTIFICATION_VALUES = {
left: "flex-start",
center: "center",
right: "flex-end",
"space-between": "space-between"
};
function useLayoutCustomProperties({
clientId,
layout,
style
}) {
const [viewportSettings] = useSettings("viewport");
const selector = `#block-${clientId}`;
const css = Object.entries(getResponsiveMediaQueries(viewportSettings)).map(([viewport, mediaQuery]) => {
const viewportLayout = style?.[viewport]?.layout;
if (!viewportLayout || typeof viewportLayout !== "object" || Array.isArray(viewportLayout) || !Object.keys(viewportLayout).length) {
return "";
}
const effectiveLayout = { ...layout, ...viewportLayout };
const justifyContent = Object.hasOwn(
JUSTIFICATION_VALUES,
effectiveLayout.justifyContent
) ? effectiveLayout.justifyContent : "left";
const justification = JUSTIFICATION_VALUES[justifyContent];
const isVertical = effectiveLayout.orientation === "vertical";
let align = "center";
if (isVertical) {
align = ["center", "right"].includes(justifyContent) ? justification : "flex-start";
}
const justify = isVertical && justifyContent === "left" ? "initial" : justification;
const declarations = {
"--navigation-layout-justification-setting": justification,
"--navigation-layout-direction": isVertical ? "column" : "row",
"--navigation-layout-wrap": effectiveLayout.flexWrap === "nowrap" ? "nowrap" : "wrap",
"--navigation-layout-justify": justify,
"--navigation-layout-align": align
};
const cssDeclarations = Object.entries(declarations).map(([property, value]) => `${property}: ${value};`).join("");
return `${mediaQuery}{${selector} {${cssDeclarations}}}`;
}).join("");
useStyleOverride({ css });
}
export {
useLayoutCustomProperties as default
};
//# sourceMappingURL=use-layout-custom-properties.mjs.map