@wordpress/block-editor
Version:
336 lines (278 loc) • 12.2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useColorsPerOrigin = useColorsPerOrigin;
exports.useGlobalSetting = useGlobalSetting;
exports.useGlobalStyle = useGlobalStyle;
exports.useGlobalStylesReset = void 0;
exports.useGradientsPerOrigin = useGradientsPerOrigin;
exports.useSettingsForBlockElement = useSettingsForBlockElement;
var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
var _lodash = require("lodash");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _blocks = require("@wordpress/blocks");
var _i18n = require("@wordpress/i18n");
var _utils = require("./utils");
var _context = require("./context");
var _lockUnlock = require("../../lock-unlock");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const EMPTY_CONFIG = {
settings: {},
styles: {}
};
const VALID_SETTINGS = ['appearanceTools', 'useRootPaddingAwareAlignments', 'border.color', 'border.radius', 'border.style', 'border.width', 'shadow.presets', 'shadow.defaultPresets', 'color.background', 'color.button', 'color.caption', 'color.custom', 'color.customDuotone', 'color.customGradient', 'color.defaultDuotone', 'color.defaultGradients', 'color.defaultPalette', 'color.duotone', 'color.gradients', 'color.heading', 'color.link', 'color.palette', 'color.text', 'custom', 'dimensions.minHeight', 'layout.contentSize', 'layout.definitions', 'layout.wideSize', 'position.fixed', 'position.sticky', 'spacing.customSpacingSize', 'spacing.spacingSizes', 'spacing.spacingScale', 'spacing.blockGap', 'spacing.margin', 'spacing.padding', 'spacing.units', 'typography.fluid', 'typography.customFontSize', 'typography.dropCap', 'typography.fontFamilies', 'typography.fontSizes', 'typography.fontStyle', 'typography.fontWeight', 'typography.letterSpacing', 'typography.lineHeight', 'typography.textColumns', 'typography.textDecoration', 'typography.textTransform'];
const useGlobalStylesReset = () => {
const {
user: config,
setUserConfig
} = (0, _element.useContext)(_context.GlobalStylesContext);
const canReset = !!config && !(0, _es.default)(config, EMPTY_CONFIG);
return [canReset, (0, _element.useCallback)(() => setUserConfig(() => EMPTY_CONFIG), [setUserConfig])];
};
exports.useGlobalStylesReset = useGlobalStylesReset;
function useGlobalSetting(propertyPath, blockName, source = 'all') {
const {
setUserConfig,
...configs
} = (0, _element.useContext)(_context.GlobalStylesContext);
const appendedBlockPath = blockName ? '.blocks.' + blockName : '';
const appendedPropertyPath = propertyPath ? '.' + propertyPath : '';
const contextualPath = `settings${appendedBlockPath}${appendedPropertyPath}`;
const globalPath = `settings${appendedPropertyPath}`;
const sourceKey = source === 'all' ? 'merged' : source;
const settingValue = (0, _element.useMemo)(() => {
const configToUse = configs[sourceKey];
if (!configToUse) {
throw 'Unsupported source';
}
if (propertyPath) {
var _get;
return (_get = (0, _lodash.get)(configToUse, contextualPath)) !== null && _get !== void 0 ? _get : (0, _lodash.get)(configToUse, globalPath);
}
const result = {};
VALID_SETTINGS.forEach(setting => {
var _get2;
const value = (_get2 = (0, _lodash.get)(configToUse, `settings${appendedBlockPath}.${setting}`)) !== null && _get2 !== void 0 ? _get2 : (0, _lodash.get)(configToUse, `settings.${setting}`);
if (value) {
(0, _lodash.set)(result, setting, value);
}
});
return result;
}, [configs, sourceKey, propertyPath, contextualPath, globalPath, appendedBlockPath]);
const setSetting = newValue => {
setUserConfig(currentConfig => {
// Deep clone `currentConfig` to avoid mutating it later.
const newUserConfig = JSON.parse(JSON.stringify(currentConfig));
(0, _lodash.set)(newUserConfig, contextualPath, newValue);
return newUserConfig;
});
};
return [settingValue, setSetting];
}
function useGlobalStyle(path, blockName, source = 'all', {
shouldDecodeEncode = true
} = {}) {
const {
merged: mergedConfig,
base: baseConfig,
user: userConfig,
setUserConfig
} = (0, _element.useContext)(_context.GlobalStylesContext);
const appendedPath = path ? '.' + path : '';
const finalPath = !blockName ? `styles${appendedPath}` : `styles.blocks.${blockName}${appendedPath}`;
const setStyle = newValue => {
setUserConfig(currentConfig => {
// Deep clone `currentConfig` to avoid mutating it later.
const newUserConfig = JSON.parse(JSON.stringify(currentConfig));
(0, _lodash.set)(newUserConfig, finalPath, shouldDecodeEncode ? (0, _utils.getPresetVariableFromValue)(mergedConfig.settings, blockName, path, newValue) : newValue);
return newUserConfig;
});
};
let rawResult, result;
switch (source) {
case 'all':
rawResult = (0, _lodash.get)(mergedConfig, finalPath);
result = shouldDecodeEncode ? (0, _utils.getValueFromVariable)(mergedConfig, blockName, rawResult) : rawResult;
break;
case 'user':
rawResult = (0, _lodash.get)(userConfig, finalPath);
result = shouldDecodeEncode ? (0, _utils.getValueFromVariable)(mergedConfig, blockName, rawResult) : rawResult;
break;
case 'base':
rawResult = (0, _lodash.get)(baseConfig, finalPath);
result = shouldDecodeEncode ? (0, _utils.getValueFromVariable)(baseConfig, blockName, rawResult) : rawResult;
break;
default:
throw 'Unsupported source';
}
return [result, setStyle];
}
/**
* React hook that overrides a global settings object with block and element specific settings.
*
* @param {Object} parentSettings Settings object.
* @param {blockName?} blockName Block name.
* @param {element?} element Element name.
*
* @return {Object} Merge of settings and supports.
*/
function useSettingsForBlockElement(parentSettings, blockName, element) {
const {
supportedStyles,
supports
} = (0, _data.useSelect)(select => {
return {
supportedStyles: (0, _lockUnlock.unlock)(select(_blocks.store)).getSupportedStyles(blockName, element),
supports: select(_blocks.store).getBlockType(blockName)?.supports
};
}, [blockName, element]);
return (0, _element.useMemo)(() => {
const updatedSettings = { ...parentSettings
};
if (!supportedStyles.includes('fontSize')) {
updatedSettings.typography = { ...updatedSettings.typography,
fontSizes: {},
customFontSize: false
};
}
if (!supportedStyles.includes('fontFamily')) {
updatedSettings.typography = { ...updatedSettings.typography,
fontFamilies: {}
};
}
updatedSettings.color = { ...updatedSettings.color,
text: updatedSettings.color?.text && supportedStyles.includes('color'),
background: updatedSettings.color?.background && (supportedStyles.includes('background') || supportedStyles.includes('backgroundColor')),
button: updatedSettings.color?.button && supportedStyles.includes('buttonColor'),
heading: updatedSettings.color?.heading && supportedStyles.includes('headingColor'),
link: updatedSettings.color?.link && supportedStyles.includes('linkColor'),
caption: updatedSettings.color?.caption && supportedStyles.includes('captionColor')
}; // Some blocks can enable background colors but disable gradients.
if (!supportedStyles.includes('background')) {
updatedSettings.color.gradients = [];
updatedSettings.color.customGradient = false;
} // If filters are not supported by the block/element, disable duotone.
if (!supportedStyles.includes('filter')) {
updatedSettings.color.defaultDuotone = false;
updatedSettings.color.customDuotone = false;
}
['lineHeight', 'fontStyle', 'fontWeight', 'letterSpacing', 'textTransform', 'textDecoration'].forEach(key => {
if (!supportedStyles.includes(key)) {
updatedSettings.typography = { ...updatedSettings.typography,
[key]: false
};
}
}); // The column-count style is named text column to reduce confusion with
// the columns block and manage expectations from the support.
// See: https://github.com/WordPress/gutenberg/pull/33587
if (!supportedStyles.includes('columnCount')) {
updatedSettings.typography = { ...updatedSettings.typography,
textColumns: false
};
}
['contentSize', 'wideSize'].forEach(key => {
if (!supportedStyles.includes(key)) {
updatedSettings.layout = { ...updatedSettings.layout,
[key]: false
};
}
});
['padding', 'margin', 'blockGap'].forEach(key => {
if (!supportedStyles.includes(key)) {
updatedSettings.spacing = { ...updatedSettings.spacing,
[key]: false
};
}
const sides = Array.isArray(supports?.spacing?.[key]) ? supports?.spacing?.[key] : supports?.spacing?.[key]?.sides;
if (sides?.length) {
updatedSettings.spacing = { ...updatedSettings.spacing,
[key]: { ...updatedSettings.spacing?.[key],
sides
}
};
}
});
if (!supportedStyles.includes('minHeight')) {
updatedSettings.dimensions = { ...updatedSettings.dimensions,
minHeight: false
};
}
['radius', 'color', 'style', 'width'].forEach(key => {
if (!supportedStyles.includes('border' + key.charAt(0).toUpperCase() + key.slice(1))) {
updatedSettings.border = { ...updatedSettings.border,
[key]: false
};
}
});
updatedSettings.shadow = supportedStyles.includes('shadow') ? updatedSettings.shadow : false;
return updatedSettings;
}, [parentSettings, supportedStyles, supports]);
}
function useColorsPerOrigin(settings) {
const customColors = settings?.color?.palette?.custom;
const themeColors = settings?.color?.palette?.theme;
const defaultColors = settings?.color?.palette?.default;
const shouldDisplayDefaultColors = settings?.color?.defaultPalette;
return (0, _element.useMemo)(() => {
const result = [];
if (themeColors && themeColors.length) {
result.push({
name: (0, _i18n._x)('Theme', 'Indicates this palette comes from the theme.'),
colors: themeColors
});
}
if (shouldDisplayDefaultColors && defaultColors && defaultColors.length) {
result.push({
name: (0, _i18n._x)('Default', 'Indicates this palette comes from WordPress.'),
colors: defaultColors
});
}
if (customColors && customColors.length) {
result.push({
name: (0, _i18n._x)('Custom', 'Indicates this palette is created by the user.'),
colors: customColors
});
}
return result;
}, [customColors, themeColors, defaultColors, shouldDisplayDefaultColors]);
}
function useGradientsPerOrigin(settings) {
const customGradients = settings?.color?.gradients?.custom;
const themeGradients = settings?.color?.gradients?.theme;
const defaultGradients = settings?.color?.gradients?.default;
const shouldDisplayDefaultGradients = settings?.color?.defaultGradients;
return (0, _element.useMemo)(() => {
const result = [];
if (themeGradients && themeGradients.length) {
result.push({
name: (0, _i18n._x)('Theme', 'Indicates this palette comes from the theme.'),
gradients: themeGradients
});
}
if (shouldDisplayDefaultGradients && defaultGradients && defaultGradients.length) {
result.push({
name: (0, _i18n._x)('Default', 'Indicates this palette comes from WordPress.'),
gradients: defaultGradients
});
}
if (customGradients && customGradients.length) {
result.push({
name: (0, _i18n._x)('Custom', 'Indicates this palette is created by the user.'),
gradients: customGradients
});
}
return result;
}, [customGradients, themeGradients, defaultGradients, shouldDisplayDefaultGradients]);
}
//# sourceMappingURL=hooks.js.map