@wordpress/block-editor
Version:
378 lines (376 loc) • 13.3 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/grid.js
var grid_exports = {};
__export(grid_exports, {
default: () => grid_default
});
module.exports = __toCommonJS(grid_exports);
var import_i18n = require("@wordpress/i18n");
var import_components = require("@wordpress/components");
var import_element = require("@wordpress/element");
var import_utils = require("./utils");
var import_gap = require("../hooks/gap");
var import_utils2 = require("../hooks/utils");
var import_definitions = require("./definitions");
var import_jsx_runtime = require("react/jsx-runtime");
var RANGE_CONTROL_MAX_VALUES = {
px: 600,
"%": 100,
vw: 100,
vh: 100,
em: 38,
rem: 38,
svw: 100,
lvw: 100,
dvw: 100,
svh: 100,
lvh: 100,
dvh: 100,
vi: 100,
svi: 100,
lvi: 100,
dvi: 100,
vb: 100,
svb: 100,
lvb: 100,
dvb: 100,
vmin: 100,
svmin: 100,
lvmin: 100,
dvmin: 100,
vmax: 100,
svmax: 100,
lvmax: 100,
dvmax: 100
};
var units = [
{ value: "px", label: "px", default: 0 },
{ value: "rem", label: "rem", default: 0 },
{ value: "em", label: "em", default: 0 }
];
var grid_default = {
name: "grid",
label: (0, import_i18n.__)("Grid"),
inspectorControls: function GridLayoutInspectorControls({
layout = {},
onChange,
layoutBlockSupport = {}
}) {
const { allowSizingOnChildren = false } = layoutBlockSupport;
const showColumnsControl = true;
const showMinWidthControl = !layout?.isManualPlacement || window.__experimentalEnableGridInteractivity;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
window.__experimentalEnableGridInteractivity && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
GridLayoutTypeControl,
{
layout,
onChange
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, children: [
showColumnsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
GridLayoutColumnsAndRowsControl,
{
layout,
onChange,
allowSizingOnChildren
}
),
showMinWidthControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
GridLayoutMinimumWidthControl,
{
layout,
onChange
}
)
] })
] });
},
toolBarControls: function GridLayoutToolbarControls() {
return null;
},
getLayoutStyle: function getLayoutStyle({
selector,
layout,
style,
blockName,
hasBlockGapSupport,
layoutDefinitions = import_definitions.LAYOUT_DEFINITIONS
}) {
const {
minimumColumnWidth = null,
columnCount = null,
rowCount = null
} = layout;
if (process.env.NODE_ENV === "development") {
if (minimumColumnWidth && typeof minimumColumnWidth !== "string") {
throw new Error("minimumColumnWidth must be a string");
}
if (columnCount && typeof columnCount !== "number") {
throw new Error("columnCount must be a number");
}
if (rowCount && typeof rowCount !== "number") {
throw new Error("rowCount must be a number");
}
}
const blockGapValue = style?.spacing?.blockGap && !(0, import_utils2.shouldSkipSerialization)(blockName, "spacing", "blockGap") ? (0, import_gap.getGapCSSValue)(style?.spacing?.blockGap, "0.5em") : void 0;
let output = "";
const rules = [];
if (minimumColumnWidth && columnCount > 0) {
const maxValue = `max(${minimumColumnWidth}, ( 100% - (${blockGapValue || "1.2rem"}*${columnCount - 1}) ) / ${columnCount})`;
rules.push(
`grid-template-columns: repeat(auto-fill, minmax(${maxValue}, 1fr))`,
`container-type: inline-size`
);
if (rowCount) {
rules.push(
`grid-template-rows: repeat(${rowCount}, minmax(1rem, auto))`
);
}
} else if (columnCount) {
rules.push(
`grid-template-columns: repeat(${columnCount}, minmax(0, 1fr))`
);
if (rowCount) {
rules.push(
`grid-template-rows: repeat(${rowCount}, minmax(1rem, auto))`
);
}
} else {
rules.push(
`grid-template-columns: repeat(auto-fill, minmax(min(${minimumColumnWidth || "12rem"}, 100%), 1fr))`,
"container-type: inline-size"
);
}
if (rules.length) {
output = `${(0, import_utils.appendSelectors)(selector)} { ${rules.join(
"; "
)}; }`;
}
if (hasBlockGapSupport && blockGapValue) {
output += (0, import_utils.getBlockGapCSS)(
selector,
layoutDefinitions,
"grid",
blockGapValue
);
}
return output;
},
getOrientation() {
return "horizontal";
},
getAlignments() {
return [];
}
};
function GridLayoutMinimumWidthControl({ layout, onChange }) {
const { minimumColumnWidth, columnCount, isManualPlacement } = layout;
const defaultValue = isManualPlacement || columnCount ? null : "12rem";
const value = minimumColumnWidth || defaultValue;
const [quantity, unit = "rem"] = (0, import_components.__experimentalParseQuantityAndUnitFromRawValue)(value);
const handleSliderChange = (next) => {
onChange({
...layout,
minimumColumnWidth: [next, unit].join("")
});
};
const handleUnitChange = (newUnit) => {
let newValue;
if (["em", "rem"].includes(newUnit) && unit === "px") {
newValue = (quantity / 16).toFixed(2) + newUnit;
} else if (["em", "rem"].includes(unit) && newUnit === "px") {
newValue = Math.round(quantity * 16) + newUnit;
}
onChange({
...layout,
minimumColumnWidth: newValue
});
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "block-editor-hooks__grid-layout-minimum-width-control", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { as: "legend", children: (0, import_i18n.__)("Min. column width") }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Flex, { gap: 4, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalUnitControl,
{
size: "__unstable-large",
onChange: (newValue) => {
onChange({
...layout,
minimumColumnWidth: newValue === "" ? void 0 : newValue
});
},
onUnitChange: handleUnitChange,
value,
units,
min: 0,
label: (0, import_i18n.__)("Minimum column width"),
hideLabelFromVision: true
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.RangeControl,
{
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
onChange: handleSliderChange,
value: quantity || 0,
min: 0,
max: RANGE_CONTROL_MAX_VALUES[unit] || 600,
withInputField: false,
label: (0, import_i18n.__)("Minimum column width"),
hideLabelFromVision: true
}
) })
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "components-base-control__help", children: (0, import_i18n.__)(
"Columns will wrap to fewer per row when they can no longer maintain the minimum width."
) })
] });
}
function GridLayoutColumnsAndRowsControl({
layout,
onChange,
allowSizingOnChildren
}) {
const defaultColumnCount = void 0;
const {
columnCount = defaultColumnCount,
rowCount,
isManualPlacement
} = layout;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "block-editor-hooks__grid-layout-columns-and-rows-controls", children: [
!isManualPlacement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { as: "legend", children: (0, import_i18n.__)("Max. columns") }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Flex, { gap: 4, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalNumberControl,
{
size: "__unstable-large",
onChange: (value) => {
const defaultNewColumnCount = isManualPlacement ? 1 : void 0;
const newColumnCount = value === "" || value === "0" ? defaultNewColumnCount : parseInt(value, 10);
onChange({
...layout,
columnCount: newColumnCount
});
},
value: columnCount,
min: 1,
label: (0, import_i18n.__)("Columns"),
hideLabelFromVision: !isManualPlacement
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: allowSizingOnChildren && isManualPlacement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalNumberControl,
{
size: "__unstable-large",
onChange: (value) => {
const newRowCount = value === "" || value === "0" ? 1 : parseInt(value, 10);
onChange({
...layout,
rowCount: newRowCount
});
},
value: rowCount,
min: 1,
label: (0, import_i18n.__)("Rows")
}
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.RangeControl,
{
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
value: columnCount ?? 1,
onChange: (value) => onChange({
...layout,
columnCount: value === "" || value === "0" ? 1 : value
}),
min: 1,
max: 16,
withInputField: false,
label: (0, import_i18n.__)("Columns"),
hideLabelFromVision: true
}
) })
] })
] }) });
}
function GridLayoutTypeControl({ layout, onChange }) {
const { columnCount, rowCount, minimumColumnWidth, isManualPlacement } = layout;
const [tempColumnCount, setTempColumnCount] = (0, import_element.useState)(
columnCount || 3
);
const [tempRowCount, setTempRowCount] = (0, import_element.useState)(rowCount);
const [tempMinimumColumnWidth, setTempMinimumColumnWidth] = (0, import_element.useState)(
minimumColumnWidth || "12rem"
);
const gridPlacement = isManualPlacement ? "manual" : "auto";
const onChangeType = (value) => {
if (value === "manual") {
setTempMinimumColumnWidth(minimumColumnWidth || "12rem");
} else {
setTempColumnCount(columnCount || 3);
setTempRowCount(rowCount);
}
onChange({
...layout,
columnCount: value === "manual" ? tempColumnCount : tempColumnCount,
rowCount: value === "manual" ? tempRowCount : void 0,
isManualPlacement: value === "manual" ? true : void 0,
minimumColumnWidth: value === "auto" ? tempMinimumColumnWidth : null
});
};
const helpText = gridPlacement === "manual" ? (0, import_i18n.__)(
"Grid items can be manually placed in any position on the grid."
) : (0, import_i18n.__)(
"Grid items are placed automatically depending on their order."
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.__experimentalToggleGroupControl,
{
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0, import_i18n.__)("Grid item position"),
value: gridPlacement,
onChange: onChangeType,
isBlock: true,
help: helpText,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToggleGroupControlOption,
{
value: "auto",
label: (0, import_i18n.__)("Auto")
},
"auto"
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToggleGroupControlOption,
{
value: "manual",
label: (0, import_i18n.__)("Manual")
},
"manual"
)
]
}
);
}
//# sourceMappingURL=grid.js.map