@wordpress/block-editor
Version:
300 lines (298 loc) • 11.1 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-editor/src/layouts/constrained.js
var constrained_exports = {};
__export(constrained_exports, {
default: () => constrained_default
});
module.exports = __toCommonJS(constrained_exports);
var import_components = require("@wordpress/components");
var import_i18n = require("@wordpress/i18n");
var import_icons = require("@wordpress/icons");
var import_style_engine = require("@wordpress/style-engine");
var import_use_settings = require("../components/use-settings");
var import_utils = require("./utils");
var import_gap = require("../hooks/gap");
var import_components2 = require("../components");
var import_utils2 = require("../hooks/utils");
var import_definitions = require("./definitions");
var import_jsx_runtime = require("react/jsx-runtime");
var constrained_default = {
name: "constrained",
label: (0, import_i18n.__)("Constrained"),
inspectorControls: function DefaultLayoutInspectorControls({
layout,
onChange,
layoutBlockSupport = {}
}) {
const { wideSize, contentSize, justifyContent = "center" } = layout;
const {
allowJustification = true,
allowCustomContentAndWideSize = true
} = layoutBlockSupport;
const onJustificationChange = (value) => {
onChange({
...layout,
justifyContent: value
});
};
const justificationOptions = [
{
value: "left",
icon: import_icons.justifyLeft,
label: (0, import_i18n.__)("Justify items left")
},
{
value: "center",
icon: import_icons.justifyCenter,
label: (0, import_i18n.__)("Justify items center")
},
{
value: "right",
icon: import_icons.justifyRight,
label: (0, import_i18n.__)("Justify items right")
}
];
const [availableUnits] = (0, import_use_settings.useSettings)("spacing.units");
const units = (0, import_components.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ["%", "px", "em", "rem", "vw"]
});
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.__experimentalVStack,
{
spacing: 4,
className: "block-editor-hooks__layout-constrained",
children: [
allowCustomContentAndWideSize && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalUnitControl,
{
__next40pxDefaultSize: true,
label: (0, import_i18n.__)("Content width"),
labelPosition: "top",
value: contentSize || wideSize || "",
onChange: (nextWidth) => {
nextWidth = 0 > parseFloat(nextWidth) ? "0" : nextWidth;
onChange({
...layout,
contentSize: nextWidth !== "" ? nextWidth : void 0
});
},
units,
prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalInputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.alignNone }) })
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalUnitControl,
{
__next40pxDefaultSize: true,
label: (0, import_i18n.__)("Wide width"),
labelPosition: "top",
value: wideSize || contentSize || "",
onChange: (nextWidth) => {
nextWidth = 0 > parseFloat(nextWidth) ? "0" : nextWidth;
onChange({
...layout,
wideSize: nextWidth !== "" ? nextWidth : void 0
});
},
units,
prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalInputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.stretchWide }) })
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "block-editor-hooks__layout-constrained-helptext", children: (0, import_i18n.__)(
"Customize the width for all elements that are assigned to the center or wide columns."
) })
] }),
allowJustification && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToggleGroupControl,
{
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0, import_i18n.__)("Justification"),
value: justifyContent,
onChange: onJustificationChange,
children: justificationOptions.map(
({ value, icon, label }) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToggleGroupControlOptionIcon,
{
value,
icon,
label
},
value
);
}
)
}
)
]
}
);
},
toolBarControls: function DefaultLayoutToolbarControls({
layout = {},
onChange,
layoutBlockSupport
}) {
const { allowJustification = true } = layoutBlockSupport;
if (!allowJustification) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components2.BlockControls, { group: "block", __experimentalShareWithChildBlocks: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DefaultLayoutJustifyContentControl,
{
layout,
onChange
}
) });
},
getLayoutStyle: function getLayoutStyle({
selector,
layout = {},
style,
blockName,
hasBlockGapSupport,
layoutDefinitions = import_definitions.LAYOUT_DEFINITIONS
}) {
const { contentSize, wideSize, justifyContent } = layout;
const blockGapStyleValue = (0, import_gap.getGapCSSValue)(style?.spacing?.blockGap);
let blockGapValue = "";
if (!(0, import_utils2.shouldSkipSerialization)(blockName, "spacing", "blockGap")) {
if (blockGapStyleValue?.top) {
blockGapValue = (0, import_gap.getGapCSSValue)(blockGapStyleValue?.top);
} else if (typeof blockGapStyleValue === "string") {
blockGapValue = (0, import_gap.getGapCSSValue)(blockGapStyleValue);
}
}
const marginLeft = justifyContent === "left" ? "0 !important" : "auto !important";
const marginRight = justifyContent === "right" ? "0 !important" : "auto !important";
let output = !!contentSize || !!wideSize ? `
${(0, import_utils.appendSelectors)(
selector,
"> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
)} {
max-width: ${contentSize ?? wideSize};
margin-left: ${marginLeft};
margin-right: ${marginRight};
}
${(0, import_utils.appendSelectors)(selector, "> .alignwide")} {
max-width: ${wideSize ?? contentSize};
}
${(0, import_utils.appendSelectors)(selector, "> .alignfull")} {
max-width: none;
}
` : "";
if (justifyContent === "left") {
output += `${(0, import_utils.appendSelectors)(
selector,
"> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
)}
{ margin-left: ${marginLeft}; }`;
} else if (justifyContent === "right") {
output += `${(0, import_utils.appendSelectors)(
selector,
"> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
)}
{ margin-right: ${marginRight}; }`;
}
if (style?.spacing?.padding) {
const paddingValues = (0, import_style_engine.getCSSRules)(style);
paddingValues.forEach((rule) => {
if (rule.key === "paddingRight") {
const paddingRightValue = rule.value === "0" ? "0px" : rule.value;
output += `
${(0, import_utils.appendSelectors)(selector, "> .alignfull")} {
margin-right: calc(${paddingRightValue} * -1);
}
`;
} else if (rule.key === "paddingLeft") {
const paddingLeftValue = rule.value === "0" ? "0px" : rule.value;
output += `
${(0, import_utils.appendSelectors)(selector, "> .alignfull")} {
margin-left: calc(${paddingLeftValue} * -1);
}
`;
}
});
}
if (hasBlockGapSupport && blockGapValue) {
output += (0, import_utils.getBlockGapCSS)(
selector,
layoutDefinitions,
"constrained",
blockGapValue
);
}
return output;
},
getOrientation() {
return "vertical";
},
getAlignments(layout) {
const alignmentInfo = (0, import_utils.getAlignmentsInfo)(layout);
if (layout.alignments !== void 0) {
if (!layout.alignments.includes("none")) {
layout.alignments.unshift("none");
}
return layout.alignments.map((alignment) => ({
name: alignment,
info: alignmentInfo[alignment]
}));
}
const { contentSize, wideSize } = layout;
const alignments = [
{ name: "left" },
{ name: "center" },
{ name: "right" }
];
if (contentSize) {
alignments.unshift({ name: "full" });
}
if (wideSize) {
alignments.unshift({ name: "wide", info: alignmentInfo.wide });
}
alignments.unshift({ name: "none", info: alignmentInfo.none });
return alignments;
}
};
var POPOVER_PROPS = {
placement: "bottom-start"
};
function DefaultLayoutJustifyContentControl({ layout, onChange }) {
const { justifyContent = "center" } = layout;
const onJustificationChange = (value) => {
onChange({
...layout,
justifyContent: value
});
};
const allowedControls = ["left", "center", "right"];
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components2.JustifyContentControl,
{
allowedControls,
value: justifyContent,
onChange: onJustificationChange,
popoverProps: POPOVER_PROPS
}
);
}
//# sourceMappingURL=constrained.js.map