@wordpress/block-library
Version:
Block library for the WordPress editor.
73 lines (71 loc) • 3.29 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-library/src/navigation/edit/use-layout-custom-properties.js
var use_layout_custom_properties_exports = {};
__export(use_layout_custom_properties_exports, {
default: () => useLayoutCustomProperties
});
module.exports = __toCommonJS(use_layout_custom_properties_exports);
var import_block_editor = require("@wordpress/block-editor");
var import_global_styles_engine = require("@wordpress/global-styles-engine");
var import_lock_unlock = require("../../lock-unlock.cjs");
var { getResponsiveMediaQueries } = (0, import_lock_unlock.unlock)(import_global_styles_engine.privateApis);
var JUSTIFICATION_VALUES = {
left: "flex-start",
center: "center",
right: "flex-end",
"space-between": "space-between"
};
function useLayoutCustomProperties({
clientId,
layout,
style
}) {
const [viewportSettings] = (0, import_block_editor.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("");
(0, import_block_editor.useStyleOverride)({ css });
}
//# sourceMappingURL=use-layout-custom-properties.cjs.map