@wordpress/block-editor
Version:
238 lines (211 loc) • 9.18 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.cleanEmptyObject = void 0;
exports.shouldSkipSerialization = shouldSkipSerialization;
exports.transformStyles = transformStyles;
exports.useBlockSettings = useBlockSettings;
var _lodash = require("lodash");
var _blocks = require("@wordpress/blocks");
var _element = require("@wordpress/element");
var _components = require("../components");
var _hooks = require("../components/global-styles/hooks");
var _object = require("../utils/object");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Removed falsy values from nested object.
*
* @param {*} object
* @return {*} Object cleaned from falsy values
*/
const cleanEmptyObject = object => {
if (object === null || typeof object !== 'object' || Array.isArray(object)) {
return object;
}
const cleanedNestedObjects = Object.entries(object).map(([key, value]) => [key, cleanEmptyObject(value)]).filter(([, value]) => value !== undefined);
return !cleanedNestedObjects.length ? undefined : Object.fromEntries(cleanedNestedObjects);
};
exports.cleanEmptyObject = cleanEmptyObject;
function transformStyles(activeSupports, migrationPaths, result, source, index, results) {
// If there are no active supports return early.
if (Object.values(activeSupports !== null && activeSupports !== void 0 ? activeSupports : {}).every(isActive => !isActive)) {
return result;
} // If the condition verifies we are probably in the presence of a wrapping transform
// e.g: nesting paragraphs in a group or columns and in that case the styles should not be transformed.
if (results.length === 1 && result.innerBlocks.length === source.length) {
return result;
} // For cases where we have a transform from one block to multiple blocks
// or multiple blocks to one block we apply the styles of the first source block
// to the result(s).
let referenceBlockAttributes = source[0]?.attributes; // If we are in presence of transform between more than one block in the source
// that has more than one block in the result
// we apply the styles on source N to the result N,
// if source N does not exists we do nothing.
if (results.length > 1 && source.length > 1) {
if (source[index]) {
referenceBlockAttributes = source[index]?.attributes;
} else {
return result;
}
}
let returnBlock = result;
Object.entries(activeSupports).forEach(([support, isActive]) => {
if (isActive) {
migrationPaths[support].forEach(path => {
const styleValue = (0, _lodash.get)(referenceBlockAttributes, path);
if (styleValue) {
returnBlock = { ...returnBlock,
attributes: (0, _object.setImmutably)(returnBlock.attributes, path, styleValue)
};
}
});
}
});
return returnBlock;
}
/**
* Check whether serialization of specific block support feature or set should
* be skipped.
*
* @param {string|Object} blockType Block name or block type object.
* @param {string} featureSet Name of block support feature set.
* @param {string} feature Name of the individual feature to check.
*
* @return {boolean} Whether serialization should occur.
*/
function shouldSkipSerialization(blockType, featureSet, feature) {
const support = (0, _blocks.getBlockSupport)(blockType, featureSet);
const skipSerialization = support?.__experimentalSkipSerialization;
if (Array.isArray(skipSerialization)) {
return skipSerialization.includes(feature);
}
return skipSerialization;
}
/**
* Based on the block and its context, returns an object of all the block settings.
* This object can be passed as a prop to all the Styles UI components
* (TypographyPanel, DimensionsPanel...).
*
* @param {string} name Block name.
* @param {*} parentLayout Parent layout.
*
* @return {Object} Settings object.
*/
function useBlockSettings(name, parentLayout) {
const fontFamilies = (0, _components.useSetting)('typography.fontFamilies');
const fontSizes = (0, _components.useSetting)('typography.fontSizes');
const customFontSize = (0, _components.useSetting)('typography.customFontSize');
const fontStyle = (0, _components.useSetting)('typography.fontStyle');
const fontWeight = (0, _components.useSetting)('typography.fontWeight');
const lineHeight = (0, _components.useSetting)('typography.lineHeight');
const textColumns = (0, _components.useSetting)('typography.textColumns');
const textDecoration = (0, _components.useSetting)('typography.textDecoration');
const textTransform = (0, _components.useSetting)('typography.textTransform');
const letterSpacing = (0, _components.useSetting)('typography.letterSpacing');
const padding = (0, _components.useSetting)('spacing.padding');
const margin = (0, _components.useSetting)('spacing.margin');
const blockGap = (0, _components.useSetting)('spacing.blockGap');
const spacingSizes = (0, _components.useSetting)('spacing.spacingSizes');
const units = (0, _components.useSetting)('spacing.units');
const minHeight = (0, _components.useSetting)('dimensions.minHeight');
const layout = (0, _components.useSetting)('layout');
const borderColor = (0, _components.useSetting)('border.color');
const borderRadius = (0, _components.useSetting)('border.radius');
const borderStyle = (0, _components.useSetting)('border.style');
const borderWidth = (0, _components.useSetting)('border.width');
const customColorsEnabled = (0, _components.useSetting)('color.custom');
const customColors = (0, _components.useSetting)('color.palette.custom');
const customDuotone = (0, _components.useSetting)('color.customDuotone');
const themeColors = (0, _components.useSetting)('color.palette.theme');
const defaultColors = (0, _components.useSetting)('color.palette.default');
const defaultPalette = (0, _components.useSetting)('color.defaultPalette');
const defaultDuotone = (0, _components.useSetting)('color.defaultDuotone');
const userDuotonePalette = (0, _components.useSetting)('color.duotone.custom');
const themeDuotonePalette = (0, _components.useSetting)('color.duotone.theme');
const defaultDuotonePalette = (0, _components.useSetting)('color.duotone.default');
const userGradientPalette = (0, _components.useSetting)('color.gradients.custom');
const themeGradientPalette = (0, _components.useSetting)('color.gradients.theme');
const defaultGradientPalette = (0, _components.useSetting)('color.gradients.default');
const defaultGradients = (0, _components.useSetting)('color.defaultGradients');
const areCustomGradientsEnabled = (0, _components.useSetting)('color.customGradient');
const isBackgroundEnabled = (0, _components.useSetting)('color.background');
const isLinkEnabled = (0, _components.useSetting)('color.link');
const isTextEnabled = (0, _components.useSetting)('color.text');
const rawSettings = (0, _element.useMemo)(() => {
return {
color: {
palette: {
custom: customColors,
theme: themeColors,
default: defaultColors
},
gradients: {
custom: userGradientPalette,
theme: themeGradientPalette,
default: defaultGradientPalette
},
duotone: {
custom: userDuotonePalette,
theme: themeDuotonePalette,
default: defaultDuotonePalette
},
defaultGradients,
defaultPalette,
defaultDuotone,
custom: customColorsEnabled,
customGradient: areCustomGradientsEnabled,
customDuotone,
background: isBackgroundEnabled,
link: isLinkEnabled,
text: isTextEnabled
},
typography: {
fontFamilies: {
custom: fontFamilies
},
fontSizes: {
custom: fontSizes
},
customFontSize,
fontStyle,
fontWeight,
lineHeight,
textColumns,
textDecoration,
textTransform,
letterSpacing
},
spacing: {
spacingSizes: {
custom: spacingSizes
},
padding,
margin,
blockGap,
units
},
border: {
color: borderColor,
radius: borderRadius,
style: borderStyle,
width: borderWidth
},
dimensions: {
minHeight
},
layout,
parentLayout
};
}, [fontFamilies, fontSizes, customFontSize, fontStyle, fontWeight, lineHeight, textColumns, textDecoration, textTransform, letterSpacing, padding, margin, blockGap, spacingSizes, units, minHeight, layout, parentLayout, borderColor, borderRadius, borderStyle, borderWidth, customColorsEnabled, customColors, customDuotone, themeColors, defaultColors, defaultPalette, defaultDuotone, userDuotonePalette, themeDuotonePalette, defaultDuotonePalette, userGradientPalette, themeGradientPalette, defaultGradientPalette, defaultGradients, areCustomGradientsEnabled, isBackgroundEnabled, isLinkEnabled, isTextEnabled]);
return (0, _hooks.useSettingsForBlockElement)(rawSettings, name);
}
//# sourceMappingURL=utils.js.map