UNPKG

@wordpress/block-editor

Version:
241 lines (227 loc) 10.4 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.findNearestFontStyle = findNearestFontStyle; exports.findNearestFontWeight = findNearestFontWeight; exports.findNearestStyleAndWeight = findNearestStyleAndWeight; exports.getFluidTypographyOptionsFromSettings = getFluidTypographyOptionsFromSettings; exports.getMergedFontFamiliesAndFontFamilyFaces = getMergedFontFamiliesAndFontFamilyFaces; exports.getTypographyFontSizeValue = getTypographyFontSizeValue; var _fluidUtils = require("../font-sizes/fluid-utils"); var _getFontStylesAndWeights = require("../../utils/get-font-styles-and-weights"); /** * The fluid utilities must match the backend equivalent. * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php * --------------------------------------------------------------- */ /** * Internal dependencies */ /** * @typedef {Object} FluidPreset * @property {string|undefined} max A maximum font size value. * @property {?string|undefined} min A minimum font size value. */ /** * @typedef {Object} Preset * @property {?string|?number} size A default font size. * @property {string} name A font size name, displayed in the UI. * @property {string} slug A font size slug * @property {boolean|FluidPreset|undefined} fluid Specifies the minimum and maximum font size value of a fluid font size. */ /** * @typedef {Object} TypographySettings * @property {?string} minViewportWidth Minimum viewport size from which type will have fluidity. Optional if size is specified. * @property {?string} maxViewportWidth Maximum size up to which type will have fluidity. Optional if size is specified. * @property {?number} scaleFactor A scale factor to determine how fast a font scales within boundaries. Optional. * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional. * @property {?string} minFontSize The smallest a calculated font size may be. Optional. */ /** * Returns a font-size value based on a given font-size preset. * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values. * * The Core PHP equivalent is wp_get_typography_font_size_value(). * * @param {Preset} preset * @param {Object} settings * @param {boolean|TypographySettings} settings.typography.fluid Whether fluid typography is enabled, and, optionally, fluid font size options. * @param {?Object} settings.typography.layout Layout options. * * @return {string|*} A font-size value or the value of preset.size. */ function getTypographyFontSizeValue(preset, settings) { const { size: defaultSize } = preset; /* * Catch falsy values and 0/'0'. Fluid calculations cannot be performed on `0`. * Also return early when a preset font size explicitly disables fluid typography with `false`. */ if (!defaultSize || '0' === defaultSize || false === preset?.fluid) { return defaultSize; } /* * Return early when fluid typography is disabled in the settings, and there * are no local settings to enable it for the individual preset. * * If this condition isn't met, either the settings or individual preset settings * have enabled fluid typography. */ if (!isFluidTypographyEnabled(settings?.typography) && !isFluidTypographyEnabled(preset)) { return defaultSize; } let fluidTypographySettings = getFluidTypographyOptionsFromSettings(settings); fluidTypographySettings = typeof fluidTypographySettings?.fluid === 'object' ? fluidTypographySettings?.fluid : {}; const fluidFontSizeValue = (0, _fluidUtils.getComputedFluidTypographyValue)({ minimumFontSize: preset?.fluid?.min, maximumFontSize: preset?.fluid?.max, fontSize: defaultSize, minimumFontSizeLimit: fluidTypographySettings?.minFontSize, maximumViewportWidth: fluidTypographySettings?.maxViewportWidth, minimumViewportWidth: fluidTypographySettings?.minViewportWidth }); if (!!fluidFontSizeValue) { return fluidFontSizeValue; } return defaultSize; } function isFluidTypographyEnabled(typographySettings) { const fluidSettings = typographySettings?.fluid; return true === fluidSettings || fluidSettings && typeof fluidSettings === 'object' && Object.keys(fluidSettings).length > 0; } /** * Returns fluid typography settings from theme.json setting object. * * @param {Object} settings Theme.json settings * @param {Object} settings.typography Theme.json typography settings * @param {Object} settings.layout Theme.json layout settings * @return {TypographySettings} Fluid typography settings */ function getFluidTypographyOptionsFromSettings(settings) { const typographySettings = settings?.typography; const layoutSettings = settings?.layout; const defaultMaxViewportWidth = (0, _fluidUtils.getTypographyValueAndUnit)(layoutSettings?.wideSize) ? layoutSettings?.wideSize : null; return isFluidTypographyEnabled(typographySettings) && defaultMaxViewportWidth ? { fluid: { maxViewportWidth: defaultMaxViewportWidth, ...typographySettings.fluid } } : { fluid: typographySettings?.fluid }; } /** * Returns an object of merged font families and the font faces from the selected font family * based on the theme.json settings object and the currently selected font family. * * @param {Object} settings Theme.json settings. * @param {string} selectedFontFamily Decoded font family string. * @return {Object} Merged font families and font faces from the selected font family. */ function getMergedFontFamiliesAndFontFamilyFaces(settings, selectedFontFamily) { var _fontFamilies$find$fo; const fontFamiliesFromSettings = settings?.typography?.fontFamilies; const fontFamilies = ['default', 'theme', 'custom'].flatMap(key => { var _fontFamiliesFromSett; return (_fontFamiliesFromSett = fontFamiliesFromSettings?.[key]) !== null && _fontFamiliesFromSett !== void 0 ? _fontFamiliesFromSett : []; }); const fontFamilyFaces = (_fontFamilies$find$fo = fontFamilies.find(family => family.fontFamily === selectedFontFamily)?.fontFace) !== null && _fontFamilies$find$fo !== void 0 ? _fontFamilies$find$fo : []; return { fontFamilies, fontFamilyFaces }; } /** * Returns the nearest font weight value from the available font weight list based on the new font weight. * The nearest font weight is the one with the smallest difference from the new font weight. * * @param {Array} availableFontWeights Array of available font weights. * @param {string} newFontWeightValue New font weight value. * @return {string} Nearest font weight. */ function findNearestFontWeight(availableFontWeights, newFontWeightValue) { newFontWeightValue = 'number' === typeof newFontWeightValue ? newFontWeightValue.toString() : newFontWeightValue; if (!newFontWeightValue || typeof newFontWeightValue !== 'string') { return ''; } if (!availableFontWeights || availableFontWeights.length === 0) { return newFontWeightValue; } const nearestFontWeight = availableFontWeights?.reduce((nearest, { value: fw }) => { const currentDiff = Math.abs(parseInt(fw) - parseInt(newFontWeightValue)); const nearestDiff = Math.abs(parseInt(nearest) - parseInt(newFontWeightValue)); return currentDiff < nearestDiff ? fw : nearest; }, availableFontWeights[0]?.value); return nearestFontWeight; } /** * Returns the nearest font style based on the new font style. * Defaults to an empty string if the new font style is not valid or available. * * @param {Array} availableFontStyles Array of available font weights. * @param {string} newFontStyleValue New font style value. * @return {string} Nearest font style or an empty string. */ function findNearestFontStyle(availableFontStyles, newFontStyleValue) { if (typeof newFontStyleValue !== 'string' || !newFontStyleValue) { return ''; } const validStyles = ['normal', 'italic', 'oblique']; if (!validStyles.includes(newFontStyleValue)) { return ''; } if (!availableFontStyles || availableFontStyles.length === 0 || availableFontStyles.find(style => style.value === newFontStyleValue)) { return newFontStyleValue; } if (newFontStyleValue === 'oblique' && !availableFontStyles.find(style => style.value === 'oblique')) { return 'italic'; } return ''; } /** * Returns the nearest font style and weight based on the available font family faces and the new font style and weight. * * @param {Array} fontFamilyFaces Array of available font family faces. * @param {string} fontStyle New font style. Defaults to previous value. * @param {string} fontWeight New font weight. Defaults to previous value. * @return {Object} Nearest font style and font weight. */ function findNearestStyleAndWeight(fontFamilyFaces, fontStyle, fontWeight) { let nearestFontStyle = fontStyle; let nearestFontWeight = fontWeight; const { fontStyles, fontWeights, combinedStyleAndWeightOptions } = (0, _getFontStylesAndWeights.getFontStylesAndWeights)(fontFamilyFaces); // Check if the new font style and weight are available in the font family faces. const hasFontStyle = fontStyles?.some(({ value: fs }) => fs === fontStyle); const hasFontWeight = fontWeights?.some(({ value: fw }) => fw?.toString() === fontWeight?.toString()); if (!hasFontStyle) { /* * Default to italic if oblique is not available. * Or find the nearest font style based on the nearest font weight. */ nearestFontStyle = fontStyle ? findNearestFontStyle(fontStyles, fontStyle) : combinedStyleAndWeightOptions?.find(option => option.style.fontWeight === findNearestFontWeight(fontWeights, fontWeight))?.style?.fontStyle; } if (!hasFontWeight) { /* * Find the nearest font weight based on available weights. * Or find the nearest font weight based on the nearest font style. */ nearestFontWeight = fontWeight ? findNearestFontWeight(fontWeights, fontWeight) : combinedStyleAndWeightOptions?.find(option => option.style.fontStyle === (nearestFontStyle || fontStyle))?.style?.fontWeight; } return { nearestFontStyle, nearestFontWeight }; } //# sourceMappingURL=typography-utils.js.map