@wordpress/block-editor
Version:
654 lines (652 loc) • 24.9 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-editor/src/components/global-styles/dimensions-panel.js
var dimensions_panel_exports = {};
__export(dimensions_panel_exports, {
default: () => DimensionsPanel,
useHasDimensionsPanel: () => useHasDimensionsPanel
});
module.exports = __toCommonJS(dimensions_panel_exports);
var import_clsx = __toESM(require("clsx"));
var import_i18n = require("@wordpress/i18n");
var import_components = require("@wordpress/components");
var import_icons = require("@wordpress/icons");
var import_element = require("@wordpress/element");
var import_global_styles_engine = require("@wordpress/global-styles-engine");
var import_utils = require("./utils");
var import_spacing_sizes_control = __toESM(require("../spacing-sizes-control"));
var import_height_control = __toESM(require("../height-control"));
var import_child_layout_control = __toESM(require("../child-layout-control"));
var import_aspect_ratio_tool = __toESM(require("../dimensions-tool/aspect-ratio-tool"));
var import_utils2 = require("../../hooks/utils");
var import_object = require("../../utils/object");
var import_jsx_runtime = require("react/jsx-runtime");
var AXIAL_SIDES = ["horizontal", "vertical"];
function useHasDimensionsPanel(settings) {
const hasContentSize = useHasContentSize(settings);
const hasWideSize = useHasWideSize(settings);
const hasPadding = useHasPadding(settings);
const hasMargin = useHasMargin(settings);
const hasGap = useHasGap(settings);
const hasMinHeight = useHasMinHeight(settings);
const hasWidth = useHasWidth(settings);
const hasAspectRatio = useHasAspectRatio(settings);
const hasChildLayout = useHasChildLayout(settings);
return import_element.Platform.OS === "web" && (hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap || hasMinHeight || hasWidth || hasAspectRatio || hasChildLayout);
}
function useHasContentSize(settings) {
return settings?.layout?.contentSize;
}
function useHasWideSize(settings) {
return settings?.layout?.wideSize;
}
function useHasPadding(settings) {
return settings?.spacing?.padding;
}
function useHasMargin(settings) {
return settings?.spacing?.margin;
}
function useHasGap(settings) {
return settings?.spacing?.blockGap;
}
function useHasMinHeight(settings) {
return settings?.dimensions?.minHeight;
}
function useHasWidth(settings) {
return settings?.dimensions?.width;
}
function useHasAspectRatio(settings) {
return settings?.dimensions?.aspectRatio;
}
function useHasChildLayout(settings) {
const {
type: parentLayoutType = "default",
default: { type: defaultParentLayoutType = "default" } = {},
allowSizingOnChildren = false
} = settings?.parentLayout ?? {};
const support = (defaultParentLayoutType === "flex" || parentLayoutType === "flex" || defaultParentLayoutType === "grid" || parentLayoutType === "grid") && allowSizingOnChildren;
return !!settings?.layout && support;
}
function useHasSpacingPresets(settings) {
const { defaultSpacingSizes, spacingSizes } = settings?.spacing || {};
return defaultSpacingSizes !== false && spacingSizes?.default?.length > 0 || spacingSizes?.theme?.length > 0 || spacingSizes?.custom?.length > 0;
}
function filterValuesBySides(values, sides) {
if (!sides || !values) {
return values;
}
const filteredValues = {};
sides.forEach((side) => {
if (side === "vertical") {
filteredValues.top = values.top;
filteredValues.bottom = values.bottom;
}
if (side === "horizontal") {
filteredValues.left = values.left;
filteredValues.right = values.right;
}
filteredValues[side] = values?.[side];
});
return filteredValues;
}
function splitStyleValue(value) {
if (value && typeof value === "string") {
return {
top: value,
right: value,
bottom: value,
left: value
};
}
return value;
}
function splitGapValue(value, isAxialGap) {
if (!value) {
return value;
}
if (typeof value === "string") {
return isAxialGap ? { top: value, right: value, bottom: value, left: value } : { top: value };
}
return {
...value,
right: value?.left,
bottom: value?.top
};
}
function DimensionsToolsPanel({
resetAllFilter,
onChange,
value,
panelId,
children
}) {
const dropdownMenuProps = (0, import_utils.useToolsPanelDropdownMenuProps)();
const resetAll = () => {
const updatedValue = resetAllFilter(value);
onChange(updatedValue);
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToolsPanel,
{
label: (0, import_i18n.__)("Dimensions"),
resetAll,
panelId,
dropdownMenuProps,
children
}
);
}
var DEFAULT_CONTROLS = {
contentSize: true,
wideSize: true,
padding: true,
margin: true,
blockGap: true,
minHeight: true,
width: true,
aspectRatio: true,
childLayout: true
};
function DimensionsPanel({
as: Wrapper = DimensionsToolsPanel,
value,
onChange,
inheritedValue = value,
settings,
panelId,
defaultControls = DEFAULT_CONTROLS,
onVisualize = () => {
},
// Special case because the layout controls are not part of the dimensions panel
// in global styles but not in block inspector.
includeLayoutControls = false
}) {
const { dimensions, spacing } = settings;
const decodeValue = (rawValue) => {
if (rawValue && typeof rawValue === "object") {
return Object.keys(rawValue).reduce((acc, key) => {
acc[key] = (0, import_global_styles_engine.getValueFromVariable)(
{ settings: { dimensions, spacing } },
"",
rawValue[key]
);
return acc;
}, {});
}
return (0, import_global_styles_engine.getValueFromVariable)(
{ settings: { dimensions, spacing } },
"",
rawValue
);
};
const showSpacingPresetsControl = useHasSpacingPresets(settings);
const units = (0, import_components.__experimentalUseCustomUnits)({
availableUnits: settings?.spacing?.units || [
"%",
"px",
"em",
"rem",
"vw"
]
});
const minimumMargin = -Infinity;
const [minMarginValue, setMinMarginValue] = (0, import_element.useState)(minimumMargin);
const showContentSizeControl = useHasContentSize(settings) && includeLayoutControls;
const contentSizeValue = decodeValue(inheritedValue?.layout?.contentSize);
const setContentSizeValue = (newValue) => {
onChange(
(0, import_object.setImmutably)(
value,
["layout", "contentSize"],
newValue || void 0
)
);
};
const hasUserSetContentSizeValue = () => !!value?.layout?.contentSize;
const resetContentSizeValue = () => setContentSizeValue(void 0);
const showWideSizeControl = useHasWideSize(settings) && includeLayoutControls;
const wideSizeValue = decodeValue(inheritedValue?.layout?.wideSize);
const setWideSizeValue = (newValue) => {
onChange(
(0, import_object.setImmutably)(
value,
["layout", "wideSize"],
newValue || void 0
)
);
};
const hasUserSetWideSizeValue = () => !!value?.layout?.wideSize;
const resetWideSizeValue = () => setWideSizeValue(void 0);
const showPaddingControl = useHasPadding(settings);
const rawPadding = decodeValue(inheritedValue?.spacing?.padding);
const paddingValues = splitStyleValue(rawPadding);
const paddingSides = Array.isArray(settings?.spacing?.padding) ? settings?.spacing?.padding : settings?.spacing?.padding?.sides;
const isAxialPadding = paddingSides && paddingSides.some((side) => AXIAL_SIDES.includes(side));
const setPaddingValues = (newPaddingValues) => {
const padding = filterValuesBySides(newPaddingValues, paddingSides);
onChange((0, import_object.setImmutably)(value, ["spacing", "padding"], padding));
};
const hasPaddingValue = () => !!value?.spacing?.padding && Object.keys(value?.spacing?.padding).length;
const resetPaddingValue = () => setPaddingValues(void 0);
const onMouseOverPadding = () => onVisualize("padding");
const showMarginControl = useHasMargin(settings);
const rawMargin = decodeValue(inheritedValue?.spacing?.margin);
const marginValues = splitStyleValue(rawMargin);
const marginSides = Array.isArray(settings?.spacing?.margin) ? settings?.spacing?.margin : settings?.spacing?.margin?.sides;
const isAxialMargin = marginSides && marginSides.some((side) => AXIAL_SIDES.includes(side));
const setMarginValues = (newMarginValues) => {
const margin = filterValuesBySides(newMarginValues, marginSides);
onChange((0, import_object.setImmutably)(value, ["spacing", "margin"], margin));
};
const hasMarginValue = () => !!value?.spacing?.margin && Object.keys(value?.spacing?.margin).length;
const resetMarginValue = () => setMarginValues(void 0);
const onMouseOverMargin = () => onVisualize("margin");
const showGapControl = useHasGap(settings);
const gapSides = Array.isArray(settings?.spacing?.blockGap) ? settings?.spacing?.blockGap : settings?.spacing?.blockGap?.sides;
const isAxialGap = gapSides && gapSides.some((side) => AXIAL_SIDES.includes(side));
const gapValue = decodeValue(inheritedValue?.spacing?.blockGap);
const gapValues = splitGapValue(gapValue, isAxialGap);
const setGapValue = (newGapValue) => {
onChange(
(0, import_object.setImmutably)(value, ["spacing", "blockGap"], newGapValue)
);
};
const setGapValues = (nextBoxGapValue) => {
if (!nextBoxGapValue) {
setGapValue(null);
}
if (!isAxialGap && nextBoxGapValue?.hasOwnProperty("top")) {
setGapValue(nextBoxGapValue.top);
} else {
setGapValue({
top: nextBoxGapValue?.top,
left: nextBoxGapValue?.left
});
}
};
const resetGapValue = () => setGapValue(void 0);
const hasGapValue = () => !!value?.spacing?.blockGap;
const showMinHeightControl = useHasMinHeight(settings);
const minHeightValue = decodeValue(inheritedValue?.dimensions?.minHeight);
const setMinHeightValue = (newValue) => {
const tempValue = (0, import_object.setImmutably)(
value,
["dimensions", "minHeight"],
newValue
);
onChange(
(0, import_object.setImmutably)(
tempValue,
["dimensions", "aspectRatio"],
void 0
)
);
};
const resetMinHeightValue = () => {
setMinHeightValue(void 0);
};
const hasMinHeightValue = () => !!value?.dimensions?.minHeight;
const showWidthControl = useHasWidth(settings);
const widthValue = decodeValue(inheritedValue?.dimensions?.width);
const setWidthValue = (newValue) => {
onChange((0, import_object.setImmutably)(value, ["dimensions", "width"], newValue));
};
const resetWidthValue = () => {
setWidthValue(void 0);
};
const hasWidthValue = () => !!value?.dimensions?.width;
const showAspectRatioControl = useHasAspectRatio(settings);
const aspectRatioValue = decodeValue(
inheritedValue?.dimensions?.aspectRatio
);
const setAspectRatioValue = (newValue) => {
const tempValue = (0, import_object.setImmutably)(
value,
["dimensions", "aspectRatio"],
newValue
);
onChange(
(0, import_object.setImmutably)(tempValue, ["dimensions", "minHeight"], void 0)
);
};
const hasAspectRatioValue = () => !!value?.dimensions?.aspectRatio;
const showChildLayoutControl = useHasChildLayout(settings);
const childLayout = inheritedValue?.layout;
const setChildLayout = (newChildLayout) => {
onChange({
...value,
layout: {
...newChildLayout
}
});
};
const resetAllFilter = (0, import_element.useCallback)((previousValue) => {
return {
...previousValue,
layout: (0, import_utils2.cleanEmptyObject)({
...previousValue?.layout,
contentSize: void 0,
wideSize: void 0,
selfStretch: void 0,
flexSize: void 0,
columnStart: void 0,
rowStart: void 0,
columnSpan: void 0,
rowSpan: void 0
}),
spacing: {
...previousValue?.spacing,
padding: void 0,
margin: void 0,
blockGap: void 0
},
dimensions: {
...previousValue?.dimensions,
minHeight: void 0,
aspectRatio: void 0,
width: void 0
}
};
}, []);
const onMouseLeaveControls = () => onVisualize(false);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
Wrapper,
{
resetAllFilter,
value,
onChange,
panelId,
children: [
(showContentSizeControl || showWideSizeControl) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "span-columns", children: (0, import_i18n.__)("Set the width of the main content area.") }),
showContentSizeControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToolsPanelItem,
{
label: (0, import_i18n.__)("Content width"),
hasValue: hasUserSetContentSizeValue,
onDeselect: resetContentSizeValue,
isShownByDefault: defaultControls.contentSize ?? DEFAULT_CONTROLS.contentSize,
panelId,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalUnitControl,
{
__next40pxDefaultSize: true,
label: (0, import_i18n.__)("Content width"),
labelPosition: "top",
value: contentSizeValue || "",
onChange: (nextContentSize) => {
setContentSizeValue(nextContentSize);
},
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 }) })
}
)
}
),
showWideSizeControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToolsPanelItem,
{
label: (0, import_i18n.__)("Wide width"),
hasValue: hasUserSetWideSizeValue,
onDeselect: resetWideSizeValue,
isShownByDefault: defaultControls.wideSize ?? DEFAULT_CONTROLS.wideSize,
panelId,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalUnitControl,
{
__next40pxDefaultSize: true,
label: (0, import_i18n.__)("Wide width"),
labelPosition: "top",
value: wideSizeValue || "",
onChange: (nextWideSize) => {
setWideSizeValue(nextWideSize);
},
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 }) })
}
)
}
),
showPaddingControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.__experimentalToolsPanelItem,
{
hasValue: hasPaddingValue,
label: (0, import_i18n.__)("Padding"),
onDeselect: resetPaddingValue,
isShownByDefault: defaultControls.padding ?? DEFAULT_CONTROLS.padding,
className: (0, import_clsx.default)({
"tools-panel-item-spacing": showSpacingPresetsControl
}),
panelId,
children: [
!showSpacingPresetsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.BoxControl,
{
__next40pxDefaultSize: true,
values: paddingValues,
onChange: setPaddingValues,
label: (0, import_i18n.__)("Padding"),
sides: paddingSides,
units,
allowReset: false,
splitOnAxis: isAxialPadding,
inputProps: {
onMouseOver: onMouseOverPadding,
onMouseOut: onMouseLeaveControls
}
}
),
showSpacingPresetsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_spacing_sizes_control.default,
{
values: paddingValues,
onChange: setPaddingValues,
label: (0, import_i18n.__)("Padding"),
sides: paddingSides,
units,
allowReset: false,
onMouseOver: onMouseOverPadding,
onMouseOut: onMouseLeaveControls
}
)
]
}
),
showMarginControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.__experimentalToolsPanelItem,
{
hasValue: hasMarginValue,
label: (0, import_i18n.__)("Margin"),
onDeselect: resetMarginValue,
isShownByDefault: defaultControls.margin ?? DEFAULT_CONTROLS.margin,
className: (0, import_clsx.default)({
"tools-panel-item-spacing": showSpacingPresetsControl
}),
panelId,
children: [
!showSpacingPresetsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.BoxControl,
{
__next40pxDefaultSize: true,
values: marginValues,
onChange: setMarginValues,
inputProps: {
min: minMarginValue,
onDragStart: () => {
setMinMarginValue(0);
},
onDragEnd: () => {
setMinMarginValue(minimumMargin);
},
onMouseOver: onMouseOverMargin,
onMouseOut: onMouseLeaveControls
},
label: (0, import_i18n.__)("Margin"),
sides: marginSides,
units,
allowReset: false,
splitOnAxis: isAxialMargin
}
),
showSpacingPresetsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_spacing_sizes_control.default,
{
values: marginValues,
onChange: setMarginValues,
minimumCustomValue: -Infinity,
label: (0, import_i18n.__)("Margin"),
sides: marginSides,
units,
allowReset: false,
onMouseOver: onMouseOverMargin,
onMouseOut: onMouseLeaveControls
}
)
]
}
),
showGapControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.__experimentalToolsPanelItem,
{
hasValue: hasGapValue,
label: (0, import_i18n.__)("Block spacing"),
onDeselect: resetGapValue,
isShownByDefault: defaultControls.blockGap ?? DEFAULT_CONTROLS.blockGap,
className: (0, import_clsx.default)({
"tools-panel-item-spacing": showSpacingPresetsControl,
"single-column": (
// If UnitControl is used, should be single-column.
!showSpacingPresetsControl && !isAxialGap
)
}),
panelId,
children: [
!showSpacingPresetsControl && (isAxialGap ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.BoxControl,
{
__next40pxDefaultSize: true,
label: (0, import_i18n.__)("Block spacing"),
min: 0,
onChange: setGapValues,
units,
sides: gapSides,
values: gapValues,
allowReset: false,
splitOnAxis: isAxialGap
}
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalUnitControl,
{
__next40pxDefaultSize: true,
label: (0, import_i18n.__)("Block spacing"),
min: 0,
onChange: setGapValue,
units,
value: gapValue
}
)),
showSpacingPresetsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_spacing_sizes_control.default,
{
label: (0, import_i18n.__)("Block spacing"),
min: 0,
onChange: setGapValues,
showSideInLabel: false,
sides: isAxialGap ? gapSides : ["top"],
values: gapValues,
allowReset: false
}
)
]
}
),
showChildLayoutControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_child_layout_control.default,
{
value: childLayout,
onChange: setChildLayout,
parentLayout: settings?.parentLayout,
panelId,
isShownByDefault: defaultControls.childLayout ?? DEFAULT_CONTROLS.childLayout
}
),
showMinHeightControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToolsPanelItem,
{
hasValue: hasMinHeightValue,
label: (0, import_i18n.__)("Minimum height"),
onDeselect: resetMinHeightValue,
isShownByDefault: defaultControls.minHeight ?? DEFAULT_CONTROLS.minHeight,
panelId,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_height_control.default,
{
label: (0, import_i18n.__)("Minimum height"),
value: minHeightValue,
onChange: setMinHeightValue
}
)
}
),
showWidthControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToolsPanelItem,
{
hasValue: hasWidthValue,
label: (0, import_i18n.__)("Width"),
onDeselect: resetWidthValue,
isShownByDefault: defaultControls.width ?? DEFAULT_CONTROLS.width,
panelId,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_height_control.default,
{
label: (0, import_i18n.__)("Width"),
value: widthValue,
onChange: setWidthValue
}
)
}
),
showAspectRatioControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_aspect_ratio_tool.default,
{
hasValue: hasAspectRatioValue,
value: aspectRatioValue,
onChange: setAspectRatioValue,
panelId,
isShownByDefault: defaultControls.aspectRatio ?? DEFAULT_CONTROLS.aspectRatio
}
)
]
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
useHasDimensionsPanel
});
//# sourceMappingURL=dimensions-panel.js.map