@wordpress/block-editor
Version:
297 lines (293 loc) • 10.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _styleEngine = require("@wordpress/style-engine");
var _useSettings = require("../components/use-settings");
var _utils = require("./utils");
var _gap = require("../hooks/gap");
var _components2 = require("../components");
var _utils2 = require("../hooks/utils");
var _definitions = require("./definitions");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
var _default = exports.default = {
name: 'constrained',
label: (0, _i18n.__)('Constrained'),
inspectorControls: function DefaultLayoutInspectorControls({
layout,
onChange,
layoutBlockSupport = {}
}) {
const {
wideSize,
contentSize,
justifyContent = 'center'
} = layout;
const {
allowJustification = true,
allowCustomContentAndWideSize = true
} = layoutBlockSupport;
const onJustificationChange = value => {
onChange({
...layout,
justifyContent: value
});
};
const justificationOptions = [{
value: 'left',
icon: _icons.justifyLeft,
label: (0, _i18n.__)('Justify items left')
}, {
value: 'center',
icon: _icons.justifyCenter,
label: (0, _i18n.__)('Justify items center')
}, {
value: 'right',
icon: _icons.justifyRight,
label: (0, _i18n.__)('Justify items right')
}];
const [availableUnits] = (0, _useSettings.useSettings)('spacing.units');
const units = (0, _components.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['%', 'px', 'em', 'rem', 'vw']
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
spacing: 4,
className: "block-editor-hooks__layout-constrained",
children: [allowCustomContentAndWideSize && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
__next40pxDefaultSize: true,
label: (0, _i18n.__)('Content width'),
labelPosition: "top",
value: contentSize || wideSize || '',
onChange: nextWidth => {
nextWidth = 0 > parseFloat(nextWidth) ? '0' : nextWidth;
onChange({
...layout,
contentSize: nextWidth
});
},
units: units,
prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControlPrefixWrapper, {
variant: "icon",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.alignNone
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
__next40pxDefaultSize: true,
label: (0, _i18n.__)('Wide width'),
labelPosition: "top",
value: wideSize || contentSize || '',
onChange: nextWidth => {
nextWidth = 0 > parseFloat(nextWidth) ? '0' : nextWidth;
onChange({
...layout,
wideSize: nextWidth
});
},
units: units,
prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControlPrefixWrapper, {
variant: "icon",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.stretchWide
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: "block-editor-hooks__layout-constrained-helptext",
children: (0, _i18n.__)('Customize the width for all elements that are assigned to the center or wide columns.')
})]
}), allowJustification && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Justification'),
value: justifyContent,
onChange: onJustificationChange,
children: justificationOptions.map(({
value,
icon,
label
}) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
value: value,
icon: icon,
label: label
}, value);
})
})]
});
},
toolBarControls: function DefaultLayoutToolbarControls({
layout = {},
onChange,
layoutBlockSupport
}) {
const {
allowJustification = true
} = layoutBlockSupport;
if (!allowJustification) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components2.BlockControls, {
group: "block",
__experimentalShareWithChildBlocks: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultLayoutJustifyContentControl, {
layout: layout,
onChange: onChange
})
});
},
getLayoutStyle: function getLayoutStyle({
selector,
layout = {},
style,
blockName,
hasBlockGapSupport,
layoutDefinitions = _definitions.LAYOUT_DEFINITIONS
}) {
const {
contentSize,
wideSize,
justifyContent
} = layout;
const blockGapStyleValue = (0, _gap.getGapCSSValue)(style?.spacing?.blockGap);
// If a block's block.json skips serialization for spacing or
// spacing.blockGap, don't apply the user-defined value to the styles.
let blockGapValue = '';
if (!(0, _utils2.shouldSkipSerialization)(blockName, 'spacing', 'blockGap')) {
// If an object is provided only use the 'top' value for this kind of gap.
if (blockGapStyleValue?.top) {
blockGapValue = (0, _gap.getGapCSSValue)(blockGapStyleValue?.top);
} else if (typeof blockGapStyleValue === 'string') {
blockGapValue = (0, _gap.getGapCSSValue)(blockGapStyleValue);
}
}
const marginLeft = justifyContent === 'left' ? '0 !important' : 'auto !important';
const marginRight = justifyContent === 'right' ? '0 !important' : 'auto !important';
let output = !!contentSize || !!wideSize ? `
${(0, _utils.appendSelectors)(selector, '> :where(:not(.alignleft):not(.alignright):not(.alignfull))')} {
max-width: ${contentSize !== null && contentSize !== void 0 ? contentSize : wideSize};
margin-left: ${marginLeft};
margin-right: ${marginRight};
}
${(0, _utils.appendSelectors)(selector, '> .alignwide')} {
max-width: ${wideSize !== null && wideSize !== void 0 ? wideSize : contentSize};
}
${(0, _utils.appendSelectors)(selector, '> .alignfull')} {
max-width: none;
}
` : '';
if (justifyContent === 'left') {
output += `${(0, _utils.appendSelectors)(selector, '> :where(:not(.alignleft):not(.alignright):not(.alignfull))')}
{ margin-left: ${marginLeft}; }`;
} else if (justifyContent === 'right') {
output += `${(0, _utils.appendSelectors)(selector, '> :where(:not(.alignleft):not(.alignright):not(.alignfull))')}
{ margin-right: ${marginRight}; }`;
}
// If there is custom padding, add negative margins for alignfull blocks.
if (style?.spacing?.padding) {
// The style object might be storing a preset so we need to make sure we get a usable value.
const paddingValues = (0, _styleEngine.getCSSRules)(style);
paddingValues.forEach(rule => {
if (rule.key === 'paddingRight') {
// Add unit if 0, to avoid calc(0 * -1) which is invalid.
const paddingRightValue = rule.value === '0' ? '0px' : rule.value;
output += `
${(0, _utils.appendSelectors)(selector, '> .alignfull')} {
margin-right: calc(${paddingRightValue} * -1);
}
`;
} else if (rule.key === 'paddingLeft') {
// Add unit if 0, to avoid calc(0 * -1) which is invalid.
const paddingLeftValue = rule.value === '0' ? '0px' : rule.value;
output += `
${(0, _utils.appendSelectors)(selector, '> .alignfull')} {
margin-left: calc(${paddingLeftValue} * -1);
}
`;
}
});
}
// Output blockGap styles based on rules contained in layout definitions in theme.json.
if (hasBlockGapSupport && blockGapValue) {
output += (0, _utils.getBlockGapCSS)(selector, layoutDefinitions, 'constrained', blockGapValue);
}
return output;
},
getOrientation() {
return 'vertical';
},
getAlignments(layout) {
const alignmentInfo = (0, _utils.getAlignmentsInfo)(layout);
if (layout.alignments !== undefined) {
if (!layout.alignments.includes('none')) {
layout.alignments.unshift('none');
}
return layout.alignments.map(alignment => ({
name: alignment,
info: alignmentInfo[alignment]
}));
}
const {
contentSize,
wideSize
} = layout;
const alignments = [{
name: 'left'
}, {
name: 'center'
}, {
name: 'right'
}];
if (contentSize) {
alignments.unshift({
name: 'full'
});
}
if (wideSize) {
alignments.unshift({
name: 'wide',
info: alignmentInfo.wide
});
}
alignments.unshift({
name: 'none',
info: alignmentInfo.none
});
return alignments;
}
};
const POPOVER_PROPS = {
placement: 'bottom-start'
};
function DefaultLayoutJustifyContentControl({
layout,
onChange
}) {
const {
justifyContent = 'center'
} = layout;
const onJustificationChange = value => {
onChange({
...layout,
justifyContent: value
});
};
const allowedControls = ['left', 'center', 'right'];
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components2.JustifyContentControl, {
allowedControls: allowedControls,
value: justifyContent,
onChange: onJustificationChange,
popoverProps: POPOVER_PROPS
});
}
//# sourceMappingURL=constrained.js.map