@wordpress/components
Version:
UI components for WordPress.
64 lines (60 loc) • 3.04 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";
/**
* WordPress dependencies
*/
import { createContext, useContext } from '@wordpress/element';
/**
* Internal dependencies
*/
import { BLOCK_STYLE_ATTRIBUTES, getBlockPaddings, getBlockColors, getBlockTypography } from './utils';
const GlobalStylesContext = createContext({
style: {}
});
GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES;
export const getMergedGlobalStyles = (baseGlobalStyles, globalStyle, wrapperPropsStyle, blockAttributes, defaultColors, blockName, fontSizes) => {
var _baseGlobalStyles$ele, _baseGlobalStyles$blo;
// Current support for general styles and blocks.
const baseGlobalColors = {
baseColors: {
color: baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : baseGlobalStyles.color,
typography: baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : baseGlobalStyles.typography,
elements: {
link: baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$ele = baseGlobalStyles.elements) === null || _baseGlobalStyles$ele === void 0 ? void 0 : _baseGlobalStyles$ele.link
},
blocks: {
'core/button': baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$blo = baseGlobalStyles.blocks) === null || _baseGlobalStyles$blo === void 0 ? void 0 : _baseGlobalStyles$blo['core/button']
}
}
};
const blockStyleAttributes = Object.fromEntries(Object.entries(blockAttributes !== null && blockAttributes !== void 0 ? blockAttributes : {}).filter(_ref => {
let [key] = _ref;
return BLOCK_STYLE_ATTRIBUTES.includes(key);
})); // This prevents certain wrapper styles from being applied to blocks that
// don't support them yet.
const wrapperPropsStyleFiltered = Object.fromEntries(Object.entries(wrapperPropsStyle !== null && wrapperPropsStyle !== void 0 ? wrapperPropsStyle : {}).filter(_ref2 => {
let [key] = _ref2;
return BLOCK_STYLE_ATTRIBUTES.includes(key);
}));
const mergedStyle = { ...baseGlobalColors,
...globalStyle,
...wrapperPropsStyleFiltered
};
const blockColors = getBlockColors(blockStyleAttributes, defaultColors, blockName, baseGlobalStyles);
const blockPaddings = getBlockPaddings(mergedStyle, wrapperPropsStyle, blockStyleAttributes, blockColors);
const blockTypography = getBlockTypography(blockStyleAttributes, fontSizes, blockName, baseGlobalStyles);
return { ...mergedStyle,
...blockPaddings,
...blockColors,
...blockTypography
};
};
export const useGlobalStyles = () => {
const globalStyles = useContext(GlobalStylesContext);
return globalStyles;
};
export const withGlobalStyles = WrappedComponent => props => createElement(GlobalStylesContext.Consumer, null, globalStyles => createElement(WrappedComponent, _extends({}, props, {
globalStyles: globalStyles
})));
export default GlobalStylesContext;
//# sourceMappingURL=index.native.js.map