@wordpress/block-editor
Version:
381 lines (379 loc) • 13.2 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/components/child-layout-control/index.js
var child_layout_control_exports = {};
__export(child_layout_control_exports, {
childLayoutOrientation: () => childLayoutOrientation,
default: () => ChildLayoutControl
});
module.exports = __toCommonJS(child_layout_control_exports);
var import_components = require("@wordpress/components");
var import_i18n = require("@wordpress/i18n");
var import_element = require("@wordpress/element");
var import_data = require("@wordpress/data");
var import_use_get_number_of_blocks_before_cell = require("../grid/use-get-number-of-blocks-before-cell");
var import_store = require("../../store");
var import_use_settings = require("../use-settings");
var import_jsx_runtime = require("react/jsx-runtime");
function helpText(selfStretch, parentLayout) {
const { orientation = "horizontal" } = parentLayout;
if (selfStretch === "fill") {
return (0, import_i18n.__)("Stretch to fill available space.");
}
if (selfStretch === "fixed" && orientation === "horizontal") {
return (0, import_i18n.__)("Specify a fixed width.");
} else if (selfStretch === "fixed") {
return (0, import_i18n.__)("Specify a fixed height.");
}
return (0, import_i18n.__)("Fit contents.");
}
function ChildLayoutControl({
value: childLayout = {},
onChange,
parentLayout,
isShownByDefault,
panelId
}) {
const {
type: parentType,
default: { type: defaultParentType = "default" } = {}
} = parentLayout ?? {};
const parentLayoutType = parentType || defaultParentType;
if (parentLayoutType === "flex") {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
FlexControls,
{
childLayout,
onChange,
parentLayout,
isShownByDefault,
panelId
}
);
} else if (parentLayoutType === "grid") {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
GridControls,
{
childLayout,
onChange,
parentLayout,
isShownByDefault,
panelId
}
);
}
return null;
}
function FlexControls({
childLayout,
onChange,
parentLayout,
isShownByDefault,
panelId
}) {
const { selfStretch, flexSize } = childLayout;
const { orientation = "horizontal" } = parentLayout ?? {};
const hasFlexValue = () => !!selfStretch;
const flexResetLabel = orientation === "horizontal" ? (0, import_i18n.__)("Width") : (0, import_i18n.__)("Height");
const [availableUnits] = (0, import_use_settings.useSettings)("spacing.units");
const units = (0, import_components.__experimentalUseCustomUnits)({
availableUnits: availableUnits || [
"%",
"px",
"em",
"rem",
"vh",
"vw"
]
});
const resetFlex = () => {
onChange({
selfStretch: void 0,
flexSize: void 0
});
};
(0, import_element.useEffect)(() => {
if (selfStretch === "fixed" && !flexSize) {
onChange({
...childLayout,
selfStretch: "fit"
});
}
}, []);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.__experimentalVStack,
{
as: import_components.__experimentalToolsPanelItem,
spacing: 2,
hasValue: hasFlexValue,
label: flexResetLabel,
onDeselect: resetFlex,
isShownByDefault,
panelId,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.__experimentalToggleGroupControl,
{
__nextHasNoMarginBottom: true,
size: "__unstable-large",
label: childLayoutOrientation(parentLayout),
value: selfStretch || "fit",
help: helpText(selfStretch, parentLayout),
onChange: (value) => {
const newFlexSize = value !== "fixed" ? null : flexSize;
onChange({
selfStretch: value,
flexSize: newFlexSize
});
},
isBlock: true,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToggleGroupControlOption,
{
value: "fit",
label: (0, import_i18n._x)(
"Fit",
"Intrinsic block width in flex layout"
)
},
"fit"
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToggleGroupControlOption,
{
value: "fill",
label: (0, import_i18n._x)(
"Grow",
"Block with expanding width in flex layout"
)
},
"fill"
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToggleGroupControlOption,
{
value: "fixed",
label: (0, import_i18n._x)(
"Fixed",
"Block with fixed width in flex layout"
)
},
"fixed"
)
]
}
),
selfStretch === "fixed" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalUnitControl,
{
size: "__unstable-large",
units,
onChange: (value) => {
onChange({
selfStretch,
flexSize: value
});
},
value: flexSize,
min: 0,
label: flexResetLabel,
hideLabelFromVision: true
}
)
]
}
);
}
function childLayoutOrientation(parentLayout) {
const { orientation = "horizontal" } = parentLayout;
return orientation === "horizontal" ? (0, import_i18n.__)("Width") : (0, import_i18n.__)("Height");
}
function GridControls({
childLayout,
onChange,
parentLayout,
isShownByDefault,
panelId
}) {
const { columnStart, rowStart, columnSpan, rowSpan } = childLayout;
const { columnCount, rowCount } = parentLayout ?? {};
const rootClientId = (0, import_data.useSelect)(
(select) => select(import_store.store).getBlockRootClientId(panelId)
);
const { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } = (0, import_data.useDispatch)(import_store.store);
const getNumberOfBlocksBeforeCell = (0, import_use_get_number_of_blocks_before_cell.useGetNumberOfBlocksBeforeCell)(
rootClientId,
columnCount || 3
);
const hasStartValue = () => !!columnStart || !!rowStart;
const hasSpanValue = () => !!columnSpan || !!rowSpan;
const resetGridStarts = () => {
onChange({
columnStart: void 0,
rowStart: void 0
});
};
const resetGridSpans = () => {
onChange({
columnSpan: void 0,
rowSpan: void 0
});
};
const maxColumnSpan = columnCount ? columnCount - (columnStart ?? 1) + 1 : void 0;
const maxRowSpan = window.__experimentalEnableGridInteractivity && rowCount ? rowCount - (rowStart ?? 1) + 1 : void 0;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.Flex,
{
as: import_components.__experimentalToolsPanelItem,
hasValue: hasSpanValue,
label: (0, import_i18n.__)("Grid span"),
onDeselect: resetGridSpans,
isShownByDefault,
panelId,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalInputControl,
{
size: "__unstable-large",
label: (0, import_i18n.__)("Column span"),
type: "number",
onChange: (value) => {
const newColumnSpan = value === "" ? 1 : parseInt(value, 10);
const constrainedValue = maxColumnSpan ? Math.min(newColumnSpan, maxColumnSpan) : newColumnSpan;
onChange({
columnStart,
rowStart,
rowSpan,
columnSpan: constrainedValue
});
},
value: columnSpan ?? 1,
min: 1,
max: maxColumnSpan
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalInputControl,
{
size: "__unstable-large",
label: (0, import_i18n.__)("Row span"),
type: "number",
onChange: (value) => {
const newRowSpan = value === "" ? 1 : parseInt(value, 10);
const constrainedValue = maxRowSpan ? Math.min(newRowSpan, maxRowSpan) : newRowSpan;
onChange({
columnStart,
rowStart,
columnSpan,
rowSpan: constrainedValue
});
},
value: rowSpan ?? 1,
min: 1,
max: maxRowSpan
}
) })
]
}
),
window.__experimentalEnableGridInteractivity && // Use Flex with an explicit width on the FlexItem instead of HStack to
// work around an issue in webkit where inputs with a max attribute are
// sized incorrectly.
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.Flex,
{
as: import_components.__experimentalToolsPanelItem,
hasValue: hasStartValue,
label: (0, import_i18n.__)("Grid placement"),
onDeselect: resetGridStarts,
isShownByDefault: false,
panelId,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalInputControl,
{
size: "__unstable-large",
label: (0, import_i18n.__)("Column"),
type: "number",
onChange: (value) => {
const newColumnStart = value === "" ? 1 : parseInt(value, 10);
onChange({
columnStart: newColumnStart,
rowStart,
columnSpan,
rowSpan
});
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition(
[panelId],
rootClientId,
rootClientId,
getNumberOfBlocksBeforeCell(
newColumnStart,
rowStart
)
);
},
value: columnStart ?? 1,
min: 1,
max: columnCount ? columnCount - (columnSpan ?? 1) + 1 : void 0
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalInputControl,
{
size: "__unstable-large",
label: (0, import_i18n.__)("Row"),
type: "number",
onChange: (value) => {
const newRowStart = value === "" ? 1 : parseInt(value, 10);
onChange({
columnStart,
rowStart: newRowStart,
columnSpan,
rowSpan
});
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition(
[panelId],
rootClientId,
rootClientId,
getNumberOfBlocksBeforeCell(
columnStart,
newRowStart
)
);
},
value: rowStart ?? 1,
min: 1,
max: rowCount ? rowCount - (rowSpan ?? 1) + 1 : void 0
}
) })
]
}
)
] });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
childLayoutOrientation
});
//# sourceMappingURL=index.js.map