@wordpress/block-editor
Version:
333 lines (327 loc) • 11.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.childLayoutOrientation = childLayoutOrientation;
exports.default = ChildLayoutControl;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _useGetNumberOfBlocksBeforeCell = require("../grid/use-get-number-of-blocks-before-cell");
var _store = require("../../store");
var _useSettings = require("../use-settings");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function helpText(selfStretch, parentLayout) {
const {
orientation = 'horizontal'
} = parentLayout;
if (selfStretch === 'fill') {
return (0, _i18n.__)('Stretch to fill available space.');
}
if (selfStretch === 'fixed' && orientation === 'horizontal') {
return (0, _i18n.__)('Specify a fixed width.');
} else if (selfStretch === 'fixed') {
return (0, _i18n.__)('Specify a fixed height.');
}
return (0, _i18n.__)('Fit contents.');
}
/**
* Form to edit the child layout value.
*
* @param {Object} props Props.
* @param {Object} props.value The child layout value.
* @param {Function} props.onChange Function to update the child layout value.
* @param {Object} props.parentLayout The parent layout value.
*
* @param {boolean} props.isShownByDefault
* @param {string} props.panelId
* @return {Element} child layout edit element.
*/
function ChildLayoutControl({
value: childLayout = {},
onChange,
parentLayout,
isShownByDefault,
panelId
}) {
const {
type: parentType,
default: {
type: defaultParentType = 'default'
} = {}
} = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
const parentLayoutType = parentType || defaultParentType;
if (parentLayoutType === 'flex') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexControls, {
childLayout: childLayout,
onChange: onChange,
parentLayout: parentLayout,
isShownByDefault: isShownByDefault,
panelId: panelId
});
} else if (parentLayoutType === 'grid') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridControls, {
childLayout: childLayout,
onChange: onChange,
parentLayout: parentLayout,
isShownByDefault: isShownByDefault,
panelId: panelId
});
}
return null;
}
function FlexControls({
childLayout,
onChange,
parentLayout,
isShownByDefault,
panelId
}) {
const {
selfStretch,
flexSize
} = childLayout;
const {
orientation = 'horizontal'
} = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
const hasFlexValue = () => !!selfStretch;
const flexResetLabel = orientation === 'horizontal' ? (0, _i18n.__)('Width') : (0, _i18n.__)('Height');
const [availableUnits] = (0, _useSettings.useSettings)('spacing.units');
const units = (0, _components.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['%', 'px', 'em', 'rem', 'vh', 'vw']
});
const resetFlex = () => {
onChange({
selfStretch: undefined,
flexSize: undefined
});
};
(0, _element.useEffect)(() => {
if (selfStretch === 'fixed' && !flexSize) {
onChange({
...childLayout,
selfStretch: 'fit'
});
}
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
as: _components.__experimentalToolsPanelItem,
spacing: 2,
hasValue: hasFlexValue,
label: flexResetLabel,
onDeselect: resetFlex,
isShownByDefault: isShownByDefault,
panelId: panelId,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_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, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
value: "fit",
label: (0, _i18n._x)('Fit', 'Intrinsic block width in flex layout')
}, "fit"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
value: "fill",
label: (0, _i18n._x)('Grow', 'Block with expanding width in flex layout')
}, "fill"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
value: "fixed",
label: (0, _i18n._x)('Fixed', 'Block with fixed width in flex layout')
}, "fixed")]
}), selfStretch === 'fixed' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
size: "__unstable-large",
units: 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, _i18n.__)('Width') : (0, _i18n.__)('Height');
}
function GridControls({
childLayout,
onChange,
parentLayout,
isShownByDefault,
panelId
}) {
const {
columnStart,
rowStart,
columnSpan,
rowSpan
} = childLayout;
const {
columnCount,
rowCount
} = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
const rootClientId = (0, _data.useSelect)(select => select(_store.store).getBlockRootClientId(panelId));
const {
moveBlocksToPosition,
__unstableMarkNextChangeAsNotPersistent
} = (0, _data.useDispatch)(_store.store);
const getNumberOfBlocksBeforeCell = (0, _useGetNumberOfBlocksBeforeCell.useGetNumberOfBlocksBeforeCell)(rootClientId, columnCount || 3);
const hasStartValue = () => !!columnStart || !!rowStart;
const hasSpanValue = () => !!columnSpan || !!rowSpan;
const resetGridStarts = () => {
onChange({
columnStart: undefined,
rowStart: undefined
});
};
const resetGridSpans = () => {
onChange({
columnSpan: undefined,
rowSpan: undefined
});
};
// Calculate max column span based on current position and grid width
const maxColumnSpan = columnCount ? columnCount - (columnStart !== null && columnStart !== void 0 ? columnStart : 1) + 1 : undefined;
// Calculate max row span based on current position and grid height
const maxRowSpan = window.__experimentalEnableGridInteractivity && rowCount ? rowCount - (rowStart !== null && rowStart !== void 0 ? rowStart : 1) + 1 : undefined;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
as: _components.__experimentalToolsPanelItem,
hasValue: hasSpanValue,
label: (0, _i18n.__)('Grid span'),
onDeselect: resetGridSpans,
isShownByDefault: isShownByDefault,
panelId: panelId,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
style: {
width: '50%'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
size: "__unstable-large",
label: (0, _i18n.__)('Column span'),
type: "number",
onChange: value => {
// Don't allow unsetting.
const newColumnSpan = value === '' ? 1 : parseInt(value, 10);
const constrainedValue = maxColumnSpan ? Math.min(newColumnSpan, maxColumnSpan) : newColumnSpan;
onChange({
columnStart,
rowStart,
rowSpan,
columnSpan: constrainedValue
});
},
value: columnSpan !== null && columnSpan !== void 0 ? columnSpan : 1,
min: 1,
max: maxColumnSpan
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
style: {
width: '50%'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
size: "__unstable-large",
label: (0, _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 !== null && rowSpan !== void 0 ? rowSpan : 1,
min: 1,
max: maxRowSpan
})
})]
}), window.__experimentalEnableGridInteractivity &&
/*#__PURE__*/
// 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.
(0, _jsxRuntime.jsxs)(_components.Flex, {
as: _components.__experimentalToolsPanelItem,
hasValue: hasStartValue,
label: (0, _i18n.__)('Grid placement'),
onDeselect: resetGridStarts,
isShownByDefault: false,
panelId: panelId,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
style: {
width: '50%'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
size: "__unstable-large",
label: (0, _i18n.__)('Column'),
type: "number",
onChange: value => {
// Don't allow unsetting.
const newColumnStart = value === '' ? 1 : parseInt(value, 10);
onChange({
columnStart: newColumnStart,
rowStart,
columnSpan,
rowSpan
});
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition([panelId], rootClientId, rootClientId, getNumberOfBlocksBeforeCell(newColumnStart, rowStart));
},
value: columnStart !== null && columnStart !== void 0 ? columnStart : 1,
min: 1,
max: columnCount ? columnCount - (columnSpan !== null && columnSpan !== void 0 ? columnSpan : 1) + 1 : undefined
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
style: {
width: '50%'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
size: "__unstable-large",
label: (0, _i18n.__)('Row'),
type: "number",
onChange: value => {
// Don't allow unsetting.
const newRowStart = value === '' ? 1 : parseInt(value, 10);
onChange({
columnStart,
rowStart: newRowStart,
columnSpan,
rowSpan
});
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition([panelId], rootClientId, rootClientId, getNumberOfBlocksBeforeCell(columnStart, newRowStart));
},
value: rowStart !== null && rowStart !== void 0 ? rowStart : 1,
min: 1,
max: rowCount ? rowCount - (rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1) + 1 : undefined
})
})]
})]
});
}
//# sourceMappingURL=index.js.map