@wordpress/block-editor
Version:
380 lines (369 loc) • 13.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _utils = require("./utils");
var _gap = require("../hooks/gap");
var _utils2 = require("../hooks/utils");
var _definitions = require("./definitions");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const 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
};
const units = [{
value: 'px',
label: 'px',
default: 0
}, {
value: 'rem',
label: 'rem',
default: 0
}, {
value: 'em',
label: 'em',
default: 0
}];
var _default = exports.default = {
name: 'grid',
label: (0, _i18n.__)('Grid'),
inspectorControls: function GridLayoutInspectorControls({
layout = {},
onChange,
layoutBlockSupport = {}
}) {
const {
allowSizingOnChildren = false
} = layoutBlockSupport;
// In the experiment we want to also show column control in Auto mode, and
// the minimum width control in Manual mode.
const showColumnsControl = window.__experimentalEnableGridInteractivity || !!layout?.columnCount;
const showMinWidthControl = window.__experimentalEnableGridInteractivity || !layout?.columnCount;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridLayoutTypeControl, {
layout: layout,
onChange: onChange
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
spacing: 4,
children: [showColumnsControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLayoutColumnsAndRowsControl, {
layout: layout,
onChange: onChange,
allowSizingOnChildren: allowSizingOnChildren
}), showMinWidthControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLayoutMinimumWidthControl, {
layout: layout,
onChange: onChange
})]
})]
});
},
toolBarControls: function GridLayoutToolbarControls() {
return null;
},
getLayoutStyle: function getLayoutStyle({
selector,
layout,
style,
blockName,
hasBlockGapSupport,
layoutDefinitions = _definitions.LAYOUT_DEFINITIONS
}) {
const {
minimumColumnWidth = null,
columnCount = null,
rowCount = null
} = layout;
// Check that the grid layout attributes are of the correct type, so that we don't accidentally
// write code that stores a string attribute instead of a number.
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');
}
}
// If a block's block.json skips serialization for spacing or spacing.blockGap,
// don't apply the user-defined value to the styles.
const blockGapValue = style?.spacing?.blockGap && !(0, _utils2.shouldSkipSerialization)(blockName, 'spacing', 'blockGap') ? (0, _gap.getGapCSSValue)(style?.spacing?.blockGap, '0.5em') : undefined;
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) {
// Reason to disable: the extra line breaks added by prettier mess with the unit tests.
// eslint-disable-next-line prettier/prettier
output = `${(0, _utils.appendSelectors)(selector)} { ${rules.join('; ')}; }`;
}
// Output blockGap styles based on rules contained in layout definitions in theme.json.
if (hasBlockGapSupport && blockGapValue) {
output += (0, _utils.getBlockGapCSS)(selector, layoutDefinitions, 'grid', blockGapValue);
}
return output;
},
getOrientation() {
return 'horizontal';
},
getAlignments() {
return [];
}
}; // Enables setting minimum width of grid items.
function GridLayoutMinimumWidthControl({
layout,
onChange
}) {
const {
minimumColumnWidth,
columnCount,
isManualPlacement
} = layout;
const defaultValue = isManualPlacement || columnCount ? null : '12rem';
const value = minimumColumnWidth || defaultValue;
const [quantity, unit = 'rem'] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value);
const handleSliderChange = next => {
onChange({
...layout,
minimumColumnWidth: [next, unit].join('')
});
};
// Mostly copied from HeightControl.
const handleUnitChange = newUnit => {
// Attempt to smooth over differences between currentUnit and newUnit.
// This should slightly improve the experience of switching between unit types.
let newValue;
if (['em', 'rem'].includes(newUnit) && unit === 'px') {
// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
newValue = (quantity / 16).toFixed(2) + newUnit;
} else if (['em', 'rem'].includes(unit) && newUnit === 'px') {
// Convert to pixel value assuming a root size of 16px.
newValue = Math.round(quantity * 16) + newUnit;
}
onChange({
...layout,
minimumColumnWidth: newValue
});
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
as: "legend",
children: (0, _i18n.__)('Minimum column width')
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
gap: 4,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
size: "__unstable-large",
onChange: newValue => {
onChange({
...layout,
minimumColumnWidth: newValue === '' ? undefined : newValue
});
},
onUnitChange: handleUnitChange,
value: value,
units: units,
min: 0,
label: (0, _i18n.__)('Minimum column width'),
hideLabelFromVision: true
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
onChange: handleSliderChange,
value: quantity || 0,
min: 0,
max: RANGE_CONTROL_MAX_VALUES[unit] || 600,
withInputField: false,
label: (0, _i18n.__)('Minimum column width'),
hideLabelFromVision: true
})
})]
})]
});
}
// Enables setting number of grid columns
function GridLayoutColumnsAndRowsControl({
layout,
onChange,
allowSizingOnChildren
}) {
// If the grid interactivity experiment is enabled, allow unsetting the column count.
const defaultColumnCount = window.__experimentalEnableGridInteractivity ? undefined : 3;
const {
columnCount = defaultColumnCount,
rowCount,
isManualPlacement
} = layout;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
children: [(!window.__experimentalEnableGridInteractivity || !isManualPlacement) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
as: "legend",
children: (0, _i18n.__)('Columns')
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
gap: 4,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNumberControl, {
size: "__unstable-large",
onChange: value => {
if (window.__experimentalEnableGridInteractivity) {
// Allow unsetting the column count when in auto mode.
const defaultNewColumnCount = isManualPlacement ? 1 : undefined;
const newColumnCount = value === '' || value === '0' ? defaultNewColumnCount : parseInt(value, 10);
onChange({
...layout,
columnCount: newColumnCount
});
} else {
// Don't allow unsetting the column count.
const newColumnCount = value === '' || value === '0' ? 1 : parseInt(value, 10);
onChange({
...layout,
columnCount: newColumnCount
});
}
},
value: columnCount,
min: 1,
label: (0, _i18n.__)('Columns'),
hideLabelFromVision: !window.__experimentalEnableGridInteractivity || !isManualPlacement
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
isBlock: true,
children: window.__experimentalEnableGridInteractivity && allowSizingOnChildren && isManualPlacement ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNumberControl, {
size: "__unstable-large",
onChange: value => {
// Don't allow unsetting the row count.
const newRowCount = value === '' || value === '0' ? 1 : parseInt(value, 10);
onChange({
...layout,
rowCount: newRowCount
});
},
value: rowCount,
min: 1,
label: (0, _i18n.__)('Rows')
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
value: columnCount !== null && columnCount !== void 0 ? columnCount : 1,
onChange: value => onChange({
...layout,
columnCount: value === '' || value === '0' ? 1 : value
}),
min: 1,
max: 16,
withInputField: false,
label: (0, _i18n.__)('Columns'),
hideLabelFromVision: true
})
})]
})]
})
});
}
// Enables switching between grid types
function GridLayoutTypeControl({
layout,
onChange
}) {
const {
columnCount,
rowCount,
minimumColumnWidth,
isManualPlacement
} = layout;
/**
* When switching, temporarily save any custom values set on the
* previous type so we can switch back without loss.
*/
const [tempColumnCount, setTempColumnCount] = (0, _element.useState)(columnCount || 3);
const [tempRowCount, setTempRowCount] = (0, _element.useState)(rowCount);
const [tempMinimumColumnWidth, setTempMinimumColumnWidth] = (0, _element.useState)(minimumColumnWidth || '12rem');
const gridPlacement = isManualPlacement || !!columnCount && !window.__experimentalEnableGridInteractivity ? 'manual' : 'auto';
const onChangeType = value => {
if (value === 'manual') {
setTempMinimumColumnWidth(minimumColumnWidth || '12rem');
} else {
setTempColumnCount(columnCount || 3);
setTempRowCount(rowCount);
}
onChange({
...layout,
columnCount: value === 'manual' ? tempColumnCount : null,
rowCount: value === 'manual' && window.__experimentalEnableGridInteractivity ? tempRowCount : undefined,
isManualPlacement: value === 'manual' && window.__experimentalEnableGridInteractivity ? true : undefined,
minimumColumnWidth: value === 'auto' ? tempMinimumColumnWidth : null
});
};
const helpText = gridPlacement === 'manual' ? (0, _i18n.__)('Grid items can be manually placed in any position on the grid.') : (0, _i18n.__)('Grid items are placed automatically depending on their order.');
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Grid item position'),
value: gridPlacement,
onChange: onChangeType,
isBlock: true,
help: window.__experimentalEnableGridInteractivity ? helpText : undefined,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
value: "auto",
label: (0, _i18n.__)('Auto')
}, "auto"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
value: "manual",
label: (0, _i18n.__)('Manual')
}, "manual")]
});
}
//# sourceMappingURL=grid.js.map