@wordpress/block-editor
Version:
376 lines (333 loc) • 10.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _components = require("@wordpress/components");
var _utils = require("./utils");
var _gap = require("../hooks/gap");
var _components2 = require("../components");
var _utils2 = require("../hooks/utils");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// Used with the default, horizontal flex orientation.
const justifyContentMap = {
left: 'flex-start',
right: 'flex-end',
center: 'center',
'space-between': 'space-between'
}; // Used with the vertical (column) flex orientation.
const alignItemsMap = {
left: 'flex-start',
right: 'flex-end',
center: 'center',
stretch: 'stretch'
};
const verticalAlignmentMap = {
top: 'flex-start',
center: 'center',
bottom: 'flex-end',
stretch: 'stretch',
'space-between': 'space-between'
};
const flexWrapOptions = ['wrap', 'nowrap'];
var _default = {
name: 'flex',
label: (0, _i18n.__)('Flex'),
inspectorControls: function FlexLayoutInspectorControls({
layout = {},
onChange,
layoutBlockSupport = {}
}) {
const {
allowOrientation = true
} = layoutBlockSupport;
return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Flex, null, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(FlexLayoutJustifyContentControl, {
layout: layout,
onChange: onChange
})), (0, _element.createElement)(_components.FlexItem, null, allowOrientation && (0, _element.createElement)(OrientationControl, {
layout: layout,
onChange: onChange
}))), (0, _element.createElement)(FlexWrapControl, {
layout: layout,
onChange: onChange
}));
},
toolBarControls: function FlexLayoutToolbarControls({
layout = {},
onChange,
layoutBlockSupport
}) {
if (layoutBlockSupport?.allowSwitching) {
return null;
}
const {
allowVerticalAlignment = true
} = layoutBlockSupport;
return (0, _element.createElement)(_components2.BlockControls, {
group: "block",
__experimentalShareWithChildBlocks: true
}, (0, _element.createElement)(FlexLayoutJustifyContentControl, {
layout: layout,
onChange: onChange,
isToolbar: true
}), allowVerticalAlignment && (0, _element.createElement)(FlexLayoutVerticalAlignmentControl, {
layout: layout,
onChange: onChange,
isToolbar: true
}));
},
getLayoutStyle: function getLayoutStyle({
selector,
layout,
style,
blockName,
hasBlockGapSupport,
layoutDefinitions
}) {
const {
orientation = 'horizontal'
} = layout; // 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;
const justifyContent = justifyContentMap[layout.justifyContent];
const flexWrap = flexWrapOptions.includes(layout.flexWrap) ? layout.flexWrap : 'wrap';
const verticalAlignment = verticalAlignmentMap[layout.verticalAlignment];
const alignItems = alignItemsMap[layout.justifyContent] || alignItemsMap.left;
let output = '';
const rules = [];
if (flexWrap && flexWrap !== 'wrap') {
rules.push(`flex-wrap: ${flexWrap}`);
}
if (orientation === 'horizontal') {
if (verticalAlignment) {
rules.push(`align-items: ${verticalAlignment}`);
}
if (justifyContent) {
rules.push(`justify-content: ${justifyContent}`);
}
} else {
if (verticalAlignment) {
rules.push(`justify-content: ${verticalAlignment}`);
}
rules.push('flex-direction: column');
rules.push(`align-items: ${alignItems}`);
}
if (rules.length) {
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, 'flex', blockGapValue);
}
return output;
},
getOrientation(layout) {
const {
orientation = 'horizontal'
} = layout;
return orientation;
},
getAlignments() {
return [];
}
};
exports.default = _default;
function FlexLayoutVerticalAlignmentControl({
layout,
onChange,
isToolbar = false
}) {
const {
orientation = 'horizontal'
} = layout;
const defaultVerticalAlignment = orientation === 'horizontal' ? verticalAlignmentMap.center : verticalAlignmentMap.top;
const {
verticalAlignment = defaultVerticalAlignment
} = layout;
const onVerticalAlignmentChange = value => {
onChange({ ...layout,
verticalAlignment: value
});
};
if (isToolbar) {
return (0, _element.createElement)(_components2.BlockVerticalAlignmentControl, {
onChange: onVerticalAlignmentChange,
value: verticalAlignment,
controls: orientation === 'horizontal' ? ['top', 'center', 'bottom', 'stretch'] : ['top', 'center', 'bottom', 'space-between']
});
}
const verticalAlignmentOptions = [{
value: 'flex-start',
label: (0, _i18n.__)('Align items top')
}, {
value: 'center',
label: (0, _i18n.__)('Align items center')
}, {
value: 'flex-end',
label: (0, _i18n.__)('Align items bottom')
}];
return (0, _element.createElement)("fieldset", {
className: "block-editor-hooks__flex-layout-vertical-alignment-control"
}, (0, _element.createElement)("legend", null, (0, _i18n.__)('Vertical alignment')), (0, _element.createElement)("div", null, verticalAlignmentOptions.map((value, icon, label) => {
return (0, _element.createElement)(_components.Button, {
key: value,
label: label,
icon: icon,
isPressed: verticalAlignment === value,
onClick: () => onVerticalAlignmentChange(value)
});
})));
}
function FlexLayoutJustifyContentControl({
layout,
onChange,
isToolbar = false
}) {
const {
justifyContent = 'left',
orientation = 'horizontal'
} = layout;
const onJustificationChange = value => {
onChange({ ...layout,
justifyContent: value
});
};
const allowedControls = ['left', 'center', 'right'];
if (orientation === 'horizontal') {
allowedControls.push('space-between');
} else {
allowedControls.push('stretch');
}
if (isToolbar) {
return (0, _element.createElement)(_components2.JustifyContentControl, {
allowedControls: allowedControls,
value: justifyContent,
onChange: onJustificationChange,
popoverProps: {
position: 'bottom right',
variant: 'toolbar'
}
});
}
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')
}];
if (orientation === 'horizontal') {
justificationOptions.push({
value: 'space-between',
icon: _icons.justifySpaceBetween,
label: (0, _i18n.__)('Space between items')
});
} else {
justificationOptions.push({
value: 'stretch',
icon: _icons.justifyStretch,
label: (0, _i18n.__)('Stretch items')
});
}
return (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Justification'),
value: justifyContent,
onChange: onJustificationChange,
className: "block-editor-hooks__flex-layout-justification-controls"
}, justificationOptions.map(({
value,
icon,
label
}) => {
return (0, _element.createElement)(_components.__experimentalToggleGroupControlOptionIcon, {
key: value,
value: value,
icon: icon,
label: label
});
}));
}
function FlexWrapControl({
layout,
onChange
}) {
const {
flexWrap = 'wrap'
} = layout;
return (0, _element.createElement)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Allow to wrap to multiple lines'),
onChange: value => {
onChange({ ...layout,
flexWrap: value ? 'wrap' : 'nowrap'
});
},
checked: flexWrap === 'wrap'
});
}
function OrientationControl({
layout,
onChange
}) {
const {
orientation = 'horizontal',
verticalAlignment,
justifyContent
} = layout;
return (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
__nextHasNoMarginBottom: true,
className: "block-editor-hooks__flex-layout-orientation-controls",
label: (0, _i18n.__)('Orientation'),
value: orientation,
onChange: value => {
// Make sure the vertical alignment and justification are compatible with the new orientation.
let newVerticalAlignment = verticalAlignment;
let newJustification = justifyContent;
if (value === 'horizontal') {
if (verticalAlignment === 'space-between') {
newVerticalAlignment = 'center';
}
if (justifyContent === 'stretch') {
newJustification = 'left';
}
} else {
if (verticalAlignment === 'stretch') {
newVerticalAlignment = 'top';
}
if (justifyContent === 'space-between') {
newJustification = 'left';
}
}
return onChange({ ...layout,
orientation: value,
verticalAlignment: newVerticalAlignment,
justifyContent: newJustification
});
}
}, (0, _element.createElement)(_components.__experimentalToggleGroupControlOptionIcon, {
icon: _icons.arrowRight,
value: 'horizontal',
label: (0, _i18n.__)('Horizontal')
}), (0, _element.createElement)(_components.__experimentalToggleGroupControlOptionIcon, {
icon: _icons.arrowDown,
value: 'vertical',
label: (0, _i18n.__)('Vertical')
}));
}
//# sourceMappingURL=flex.js.map