@wordpress/block-editor
Version:
293 lines (292 loc) • 9.44 kB
JavaScript
// packages/block-editor/src/layouts/constrained.js
import {
__experimentalUseCustomUnits as useCustomUnits,
__experimentalUnitControl as UnitControl,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
__experimentalVStack as VStack
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import {
Icon,
alignNone,
stretchWide,
justifyLeft,
justifyCenter,
justifyRight
} from "@wordpress/icons";
import { getCSSRules } from "@wordpress/style-engine";
import { useSettings } from "../components/use-settings";
import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from "./utils";
import { getGapCSSValue } from "../hooks/gap";
import { BlockControls, JustifyContentControl } from "../components";
import { shouldSkipSerialization } from "../hooks/utils";
import { LAYOUT_DEFINITIONS } from "./definitions";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var constrained_default = {
name: "constrained",
label: __("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: justifyLeft,
label: __("Justify items left")
},
{
value: "center",
icon: justifyCenter,
label: __("Justify items center")
},
{
value: "right",
icon: justifyRight,
label: __("Justify items right")
}
];
const [availableUnits] = useSettings("spacing.units");
const units = useCustomUnits({
availableUnits: availableUnits || ["%", "px", "em", "rem", "vw"]
});
return /* @__PURE__ */ jsxs(
VStack,
{
spacing: 4,
className: "block-editor-hooks__layout-constrained",
children: [
allowCustomContentAndWideSize && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
UnitControl,
{
__next40pxDefaultSize: true,
label: __("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__ */ jsx(InputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ jsx(Icon, { icon: alignNone }) })
}
),
/* @__PURE__ */ jsx(
UnitControl,
{
__next40pxDefaultSize: true,
label: __("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__ */ jsx(InputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ jsx(Icon, { icon: stretchWide }) })
}
),
/* @__PURE__ */ jsx("p", { className: "block-editor-hooks__layout-constrained-helptext", children: __(
"Customize the width for all elements that are assigned to the center or wide columns."
) })
] }),
allowJustification && /* @__PURE__ */ jsx(
ToggleGroupControl,
{
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: __("Justification"),
value: justifyContent,
onChange: onJustificationChange,
children: justificationOptions.map(
({ value, icon, label }) => {
return /* @__PURE__ */ jsx(
ToggleGroupControlOptionIcon,
{
value,
icon,
label
},
value
);
}
)
}
)
]
}
);
},
toolBarControls: function DefaultLayoutToolbarControls({
layout = {},
onChange,
layoutBlockSupport
}) {
const { allowJustification = true } = layoutBlockSupport;
if (!allowJustification) {
return null;
}
return /* @__PURE__ */ jsx(BlockControls, { group: "block", __experimentalShareWithChildBlocks: true, children: /* @__PURE__ */ jsx(
DefaultLayoutJustifyContentControl,
{
layout,
onChange
}
) });
},
getLayoutStyle: function getLayoutStyle({
selector,
layout = {},
style,
blockName,
hasBlockGapSupport,
layoutDefinitions = LAYOUT_DEFINITIONS
}) {
const { contentSize, wideSize, justifyContent } = layout;
const blockGapStyleValue = getGapCSSValue(style?.spacing?.blockGap);
let blockGapValue = "";
if (!shouldSkipSerialization(blockName, "spacing", "blockGap")) {
if (blockGapStyleValue?.top) {
blockGapValue = getGapCSSValue(blockGapStyleValue?.top);
} else if (typeof blockGapStyleValue === "string") {
blockGapValue = getGapCSSValue(blockGapStyleValue);
}
}
const marginLeft = justifyContent === "left" ? "0 !important" : "auto !important";
const marginRight = justifyContent === "right" ? "0 !important" : "auto !important";
let output = !!contentSize || !!wideSize ? `
${appendSelectors(
selector,
"> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
)} {
max-width: ${contentSize ?? wideSize};
margin-left: ${marginLeft};
margin-right: ${marginRight};
}
${appendSelectors(selector, "> .alignwide")} {
max-width: ${wideSize ?? contentSize};
}
${appendSelectors(selector, "> .alignfull")} {
max-width: none;
}
` : "";
if (justifyContent === "left") {
output += `${appendSelectors(
selector,
"> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
)}
{ margin-left: ${marginLeft}; }`;
} else if (justifyContent === "right") {
output += `${appendSelectors(
selector,
"> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
)}
{ margin-right: ${marginRight}; }`;
}
if (style?.spacing?.padding) {
const paddingValues = getCSSRules(style);
paddingValues.forEach((rule) => {
if (rule.key === "paddingRight") {
const paddingRightValue = rule.value === "0" ? "0px" : rule.value;
output += `
${appendSelectors(selector, "> .alignfull")} {
margin-right: calc(${paddingRightValue} * -1);
}
`;
} else if (rule.key === "paddingLeft") {
const paddingLeftValue = rule.value === "0" ? "0px" : rule.value;
output += `
${appendSelectors(selector, "> .alignfull")} {
margin-left: calc(${paddingLeftValue} * -1);
}
`;
}
});
}
if (hasBlockGapSupport && blockGapValue) {
output += getBlockGapCSS(
selector,
layoutDefinitions,
"constrained",
blockGapValue
);
}
return output;
},
getOrientation() {
return "vertical";
},
getAlignments(layout) {
const alignmentInfo = 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__ */ jsx(
JustifyContentControl,
{
allowedControls,
value: justifyContent,
onChange: onJustificationChange,
popoverProps: POPOVER_PROPS
}
);
}
export {
constrained_default as default
};
//# sourceMappingURL=constrained.js.map