@wordpress/block-editor
Version:
265 lines (232 loc) • 8.15 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _styleEngine = require("@wordpress/style-engine");
var _useSetting = _interopRequireDefault(require("../components/use-setting"));
var _utils = require("./utils");
var _gap = require("../hooks/gap");
var _utils2 = require("../hooks/utils");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
var _default = {
name: 'constrained',
label: (0, _i18n.__)('Constrained'),
inspectorControls: function DefaultLayoutInspectorControls({
layout,
onChange,
layoutBlockSupport = {}
}) {
const {
wideSize,
contentSize,
justifyContent = 'center'
} = layout;
const {
allowJustification = 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 units = (0, _components.__experimentalUseCustomUnits)({
availableUnits: (0, _useSetting.default)('spacing.units') || ['%', 'px', 'em', 'rem', 'vw']
});
return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
className: "block-editor-hooks__layout-controls"
}, (0, _element.createElement)("div", {
className: "block-editor-hooks__layout-controls-unit"
}, (0, _element.createElement)(_components.__experimentalUnitControl, {
className: "block-editor-hooks__layout-controls-unit-input",
label: (0, _i18n.__)('Content'),
labelPosition: "top",
__unstableInputWidth: "80px",
value: contentSize || wideSize || '',
onChange: nextWidth => {
nextWidth = 0 > parseFloat(nextWidth) ? '0' : nextWidth;
onChange({ ...layout,
contentSize: nextWidth
});
},
units: units
}), (0, _element.createElement)(_icons.Icon, {
icon: _icons.positionCenter
})), (0, _element.createElement)("div", {
className: "block-editor-hooks__layout-controls-unit"
}, (0, _element.createElement)(_components.__experimentalUnitControl, {
className: "block-editor-hooks__layout-controls-unit-input",
label: (0, _i18n.__)('Wide'),
labelPosition: "top",
__unstableInputWidth: "80px",
value: wideSize || contentSize || '',
onChange: nextWidth => {
nextWidth = 0 > parseFloat(nextWidth) ? '0' : nextWidth;
onChange({ ...layout,
wideSize: nextWidth
});
},
units: units
}), (0, _element.createElement)(_icons.Icon, {
icon: _icons.stretchWide
}))), (0, _element.createElement)("p", {
className: "block-editor-hooks__layout-controls-helptext"
}, (0, _i18n.__)('Customize the width for all elements that are assigned to the center or wide columns.')), allowJustification && (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Justification'),
value: justifyContent,
onChange: onJustificationChange
}, justificationOptions.map(({
value,
icon,
label
}) => {
return (0, _element.createElement)(_components.__experimentalToggleGroupControlOptionIcon, {
key: value,
value: value,
icon: icon,
label: label
});
})));
},
toolBarControls: function DefaultLayoutToolbarControls() {
return null;
},
getLayoutStyle: function getLayoutStyle({
selector,
layout = {},
style,
blockName,
hasBlockGapSupport,
layoutDefinitions
}) {
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') {
output += `
${(0, _utils.appendSelectors)(selector, '> .alignfull')} {
margin-right: calc(${rule.value} * -1);
}
`;
} else if (rule.key === 'paddingLeft') {
output += `
${(0, _utils.appendSelectors)(selector, '> .alignfull')} {
margin-left: calc(${rule.value} * -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;
}
};
exports.default = _default;
//# sourceMappingURL=constrained.js.map