@wordpress/block-editor
Version:
48 lines (45 loc) • 1.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getGapBoxControlValueFromStyle = getGapBoxControlValueFromStyle;
exports.getGapCSSValue = getGapCSSValue;
var _utils = require("../components/spacing-sizes-control/utils");
/**
* Internal dependencies
*/
/**
* Returns a BoxControl object value from a given blockGap style value.
* The string check is for backwards compatibility before Gutenberg supported
* split gap values (row and column) and the value was a string n + unit.
*
* @param {?string | ?Object} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
* @return {Object|null} A value to pass to the BoxControl component.
*/
function getGapBoxControlValueFromStyle(blockGapValue) {
if (!blockGapValue) {
return null;
}
const isValueString = typeof blockGapValue === 'string';
return {
top: isValueString ? blockGapValue : blockGapValue?.top,
left: isValueString ? blockGapValue : blockGapValue?.left
};
}
/**
* Returns a CSS value for the `gap` property from a given blockGap style.
*
* @param {?string | ?Object} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
* @param {?string} defaultValue A default gap value.
* @return {string|null} The concatenated gap value (row and column).
*/
function getGapCSSValue(blockGapValue, defaultValue = '0') {
const blockGapBoxControlValue = getGapBoxControlValueFromStyle(blockGapValue);
if (!blockGapBoxControlValue) {
return null;
}
const row = (0, _utils.getSpacingPresetCssVar)(blockGapBoxControlValue?.top) || defaultValue;
const column = (0, _utils.getSpacingPresetCssVar)(blockGapBoxControlValue?.left) || defaultValue;
return row === column ? row : `${row} ${column}`;
}
//# sourceMappingURL=gap.js.map