@wordpress/block-editor
Version:
134 lines (133 loc) • 4.94 kB
JavaScript
// packages/block-editor/src/components/font-sizes/with-font-sizes.js
import { createHigherOrderComponent, compose } from "@wordpress/compose";
import { Component } from "@wordpress/element";
import { getFontSize, getFontSizeClass } from "./utils.mjs";
import { useSettings } from "../use-settings/index.mjs";
import { jsx } from "react/jsx-runtime";
var DEFAULT_FONT_SIZES = [];
var upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.join("");
var with_font_sizes_default = (...fontSizeNames) => {
const fontSizeAttributeNames = fontSizeNames.reduce(
(fontSizeAttributeNamesAccumulator, fontSizeAttributeName) => {
fontSizeAttributeNamesAccumulator[fontSizeAttributeName] = `custom${upperFirst(fontSizeAttributeName)}`;
return fontSizeAttributeNamesAccumulator;
},
{}
);
return createHigherOrderComponent(
compose([
createHigherOrderComponent(
(WrappedComponent) => (props) => {
const [fontSizes] = useSettings("typography.fontSizes");
return /* @__PURE__ */ jsx(
WrappedComponent,
{
...props,
fontSizes: fontSizes || DEFAULT_FONT_SIZES
}
);
},
"withFontSizes"
),
(WrappedComponent) => {
return class extends Component {
constructor(props) {
super(props);
this.setters = this.createSetters();
this.state = {};
}
createSetters() {
return Object.entries(fontSizeAttributeNames).reduce(
(settersAccumulator, [
fontSizeAttributeName,
customFontSizeAttributeName
]) => {
const upperFirstFontSizeAttributeName = upperFirst(fontSizeAttributeName);
settersAccumulator[`set${upperFirstFontSizeAttributeName}`] = this.createSetFontSize(
fontSizeAttributeName,
customFontSizeAttributeName
);
return settersAccumulator;
},
{}
);
}
createSetFontSize(fontSizeAttributeName, customFontSizeAttributeName) {
return (fontSizeValue) => {
const fontSizeObject = this.props.fontSizes?.find(
({ size }) => size === Number(fontSizeValue)
);
this.props.setAttributes({
[fontSizeAttributeName]: fontSizeObject && fontSizeObject.slug ? fontSizeObject.slug : void 0,
[customFontSizeAttributeName]: fontSizeObject && fontSizeObject.slug ? void 0 : fontSizeValue
});
};
}
static getDerivedStateFromProps({ attributes, fontSizes }, previousState) {
const didAttributesChange = (customFontSizeAttributeName, fontSizeAttributeName) => {
if (previousState[fontSizeAttributeName]) {
if (attributes[fontSizeAttributeName]) {
return attributes[fontSizeAttributeName] !== previousState[fontSizeAttributeName].slug;
}
return previousState[fontSizeAttributeName].size !== attributes[customFontSizeAttributeName];
}
return true;
};
if (!Object.values(fontSizeAttributeNames).some(
didAttributesChange
)) {
return null;
}
const newState = Object.entries(
fontSizeAttributeNames
).filter(
([key, value]) => didAttributesChange(value, key)
).reduce(
(newStateAccumulator, [
fontSizeAttributeName,
customFontSizeAttributeName
]) => {
const fontSizeAttributeValue = attributes[fontSizeAttributeName];
const fontSizeObject = getFontSize(
fontSizes,
fontSizeAttributeValue,
attributes[customFontSizeAttributeName]
);
newStateAccumulator[fontSizeAttributeName] = {
...fontSizeObject,
class: getFontSizeClass(
fontSizeAttributeValue
)
};
return newStateAccumulator;
},
{}
);
return {
...previousState,
...newState
};
}
render() {
return /* @__PURE__ */ jsx(
WrappedComponent,
{
...{
...this.props,
fontSizes: void 0,
...this.state,
...this.setters
}
}
);
}
};
}
]),
"withFontSizes"
);
};
export {
with_font_sizes_default as default
};
//# sourceMappingURL=with-font-sizes.mjs.map