@wordpress/block-editor
Version:
157 lines (151 loc) • 5.02 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TEXT_ALIGN_SUPPORT_KEY = void 0;
exports.addAssignedTextAlign = addAssignedTextAlign;
exports.default = void 0;
exports.getValidTextAlignments = getValidTextAlignments;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _blocks = require("@wordpress/blocks");
var _icons = require("@wordpress/icons");
var _components = require("../components");
var _blockEditingMode = require("../components/block-editing-mode");
var _utils = require("./utils");
var _typography = require("./typography");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const TEXT_ALIGN_SUPPORT_KEY = exports.TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
const TEXT_ALIGNMENT_OPTIONS = [{
icon: _icons.alignLeft,
title: (0, _i18n.__)('Align text left'),
align: 'left'
}, {
icon: _icons.alignCenter,
title: (0, _i18n.__)('Align text center'),
align: 'center'
}, {
icon: _icons.alignRight,
title: (0, _i18n.__)('Align text right'),
align: 'right'
}];
const VALID_TEXT_ALIGNMENTS = ['left', 'center', 'right'];
const NO_TEXT_ALIGNMENTS = [];
/**
* Returns the valid text alignments.
* Takes into consideration the text aligns supported by a block.
* Exported just for testing purposes, not exported outside the module.
*
* @param {?boolean|string[]} blockTextAlign Text aligns supported by the block.
*
* @return {string[]} Valid text alignments.
*/
function getValidTextAlignments(blockTextAlign) {
if (Array.isArray(blockTextAlign)) {
return VALID_TEXT_ALIGNMENTS.filter(textAlign => blockTextAlign.includes(textAlign));
}
return blockTextAlign === true ? VALID_TEXT_ALIGNMENTS : NO_TEXT_ALIGNMENTS;
}
function BlockEditTextAlignmentToolbarControlsPure({
style,
name: blockName,
setAttributes
}) {
const settings = (0, _utils.useBlockSettings)(blockName);
const hasTextAlignControl = settings?.typography?.textAlign;
const blockEditingMode = (0, _blockEditingMode.useBlockEditingMode)();
if (!hasTextAlignControl || blockEditingMode !== 'default') {
return null;
}
const validTextAlignments = getValidTextAlignments((0, _blocks.getBlockSupport)(blockName, TEXT_ALIGN_SUPPORT_KEY));
if (!validTextAlignments.length) {
return null;
}
const textAlignmentControls = TEXT_ALIGNMENT_OPTIONS.filter(control => validTextAlignments.includes(control.align));
const onChange = newTextAlignValue => {
const newStyle = {
...style,
typography: {
...style?.typography,
textAlign: newTextAlignValue
}
};
setAttributes({
style: (0, _utils.cleanEmptyObject)(newStyle)
});
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BlockControls, {
group: "block",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AlignmentControl, {
value: style?.typography?.textAlign,
onChange: onChange,
alignmentControls: textAlignmentControls
})
});
}
var _default = exports.default = {
edit: BlockEditTextAlignmentToolbarControlsPure,
useBlockProps,
addSaveProps: addAssignedTextAlign,
attributeKeys: ['style'],
hasSupport(name) {
return (0, _blocks.hasBlockSupport)(name, TEXT_ALIGN_SUPPORT_KEY, false);
}
};
function useBlockProps({
name,
style
}) {
if (!style?.typography?.textAlign) {
return null;
}
const validTextAlignments = getValidTextAlignments((0, _blocks.getBlockSupport)(name, TEXT_ALIGN_SUPPORT_KEY));
if (!validTextAlignments.length) {
return null;
}
if ((0, _utils.shouldSkipSerialization)(name, _typography.TYPOGRAPHY_SUPPORT_KEY, 'textAlign')) {
return null;
}
const textAlign = style.typography.textAlign;
const className = (0, _clsx.default)({
[`has-text-align-${textAlign}`]: textAlign
});
return {
className
};
}
/**
* Override props assigned to save component to inject text alignment class
* name if block supports it.
*
* @param {Object} props Additional props applied to save element.
* @param {Object} blockType Block type.
* @param {Object} attributes Block attributes.
*
* @return {Object} Filtered props applied to save element.
*/
function addAssignedTextAlign(props, blockType, attributes) {
if (!attributes?.style?.typography?.textAlign) {
return props;
}
const {
textAlign
} = attributes.style.typography;
const blockTextAlign = (0, _blocks.getBlockSupport)(blockType, TEXT_ALIGN_SUPPORT_KEY);
const isTextAlignValid = getValidTextAlignments(blockTextAlign).includes(textAlign);
if (isTextAlignValid && !(0, _utils.shouldSkipSerialization)(blockType, _typography.TYPOGRAPHY_SUPPORT_KEY, 'textAlign')) {
props.className = (0, _clsx.default)(`has-text-align-${textAlign}`, props.className);
}
return props;
}
//# sourceMappingURL=text-align.js.map