@wordpress/block-editor
Version:
335 lines (329 loc) • 10.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
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");
var _definitions = require("./definitions");
var _jsxRuntime = require("react/jsx-runtime");
/**
* 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 = exports.default = {
name: 'flex',
label: (0, _i18n.__)('Flex'),
inspectorControls: function FlexLayoutInspectorControls({
layout = {},
onChange,
layoutBlockSupport = {}
}) {
const {
allowOrientation = true,
allowJustification = true
} = layoutBlockSupport;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
children: [allowJustification && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexLayoutJustifyContentControl, {
layout: layout,
onChange: onChange
})
}), allowOrientation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OrientationControl, {
layout: layout,
onChange: onChange
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexWrapControl, {
layout: layout,
onChange: onChange
})]
});
},
toolBarControls: function FlexLayoutToolbarControls({
layout = {},
onChange,
layoutBlockSupport
}) {
const {
allowVerticalAlignment = true,
allowJustification = true
} = layoutBlockSupport;
if (!allowJustification && !allowVerticalAlignment) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components2.BlockControls, {
group: "block",
__experimentalShareWithChildBlocks: true,
children: [allowJustification && /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexLayoutJustifyContentControl, {
layout: layout,
onChange: onChange,
isToolbar: true
}), allowVerticalAlignment && /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexLayoutVerticalAlignmentControl, {
layout: layout,
onChange: onChange
})]
});
},
getLayoutStyle: function getLayoutStyle({
selector,
layout,
style,
blockName,
hasBlockGapSupport,
layoutDefinitions = _definitions.LAYOUT_DEFINITIONS
}) {
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 [];
}
};
function FlexLayoutVerticalAlignmentControl({
layout,
onChange
}) {
const {
orientation = 'horizontal'
} = layout;
const defaultVerticalAlignment = orientation === 'horizontal' ? verticalAlignmentMap.center : verticalAlignmentMap.top;
const {
verticalAlignment = defaultVerticalAlignment
} = layout;
const onVerticalAlignmentChange = value => {
onChange({
...layout,
verticalAlignment: value
});
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components2.BlockVerticalAlignmentControl, {
onChange: onVerticalAlignmentChange,
value: verticalAlignment,
controls: orientation === 'horizontal' ? ['top', 'center', 'bottom', 'stretch'] : ['top', 'center', 'bottom', 'space-between']
});
}
const POPOVER_PROPS = {
placement: 'bottom-start'
};
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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_components2.JustifyContentControl, {
allowedControls: allowedControls,
value: justifyContent,
onChange: onJustificationChange,
popoverProps: POPOVER_PROPS
});
}
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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Justification'),
value: justifyContent,
onChange: onJustificationChange,
className: "block-editor-hooks__flex-layout-justification-controls",
children: justificationOptions.map(({
value,
icon,
label
}) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
value: value,
icon: icon,
label: label
}, value);
})
});
}
function FlexWrapControl({
layout,
onChange
}) {
const {
flexWrap = 'wrap'
} = layout;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_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 /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
__next40pxDefaultSize: true,
__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
});
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
icon: _icons.arrowRight,
value: "horizontal",
label: (0, _i18n.__)('Horizontal')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
icon: _icons.arrowDown,
value: "vertical",
label: (0, _i18n.__)('Vertical')
})]
});
}
//# sourceMappingURL=flex.js.map