@wordpress/edit-site 4.16.0 → 4.18.0

package/build-module/components/global-styles/typography-utils.js

@@ -4,68 +4,63 @@
  * ---------------------------------------------------------------
  */
 
+/**
+ * WordPress dependencies
+ */
+import { getComputedFluidTypographyValue } from '@wordpress/block-editor';
+/**
+ * @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 A font size slug
+ */
+
 /**
  * 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.
  *
- * @param {Object}           preset
- * @param {string}           preset.size              A default font size.
- * @param {string}           preset.name              A font size name, displayed in the UI.
- * @param {string}           preset.slug              A font size slug.
- * @param {Object}           preset.fluid
- * @param {string|undefined} preset.fluid.max         A maximum font size value.
- * @param {string|undefined} preset.fluid.min         A minimum font size value.
- * @param {Object}           typographySettings
- * @param {boolean}          typographySettings.fluid Whether fluid typography is enabled.
+ * @param {Preset}  preset
+ * @param {Object}  typographySettings
+ * @param {boolean} typographySettings.fluid Whether fluid typography is enabled.
  *
- * @return {string} An font-size value
+ * @return {string|*} A font-size value or the value of preset.size.
  */
+
 export function getTypographyFontSizeValue(preset, typographySettings) {
+  var _preset$fluid, _preset$fluid2;
+
   const {
     size: defaultSize
   } = preset;
+  /*
+   * Catches falsy values and 0/'0'.
+   * Fluid calculations cannot be performed on 0.
+   */
 
-  if (true !== (typographySettings === null || typographySettings === void 0 ? void 0 : typographySettings.fluid)) {
-    return defaultSize;
-  } // Defaults.
-
-
-  const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
-  const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
-  const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
-  const DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;
-  const DEFAULT_SCALE_FACTOR = 1; // Font sizes.
-  // A font size has explicitly bypassed fluid calculations.
-
-  if (false === (preset === null || preset === void 0 ? void 0 : preset.fluid)) {
+  if (!defaultSize || '0' === defaultSize) {
     return defaultSize;
   }
 
-  const fluidFontSizeSettings = (preset === null || preset === void 0 ? void 0 : preset.fluid) || {}; // Try to grab explicit min and max fluid font sizes.
-
-  let minimumFontSizeRaw = fluidFontSizeSettings === null || fluidFontSizeSettings === void 0 ? void 0 : fluidFontSizeSettings.min;
-  let maximumFontSizeRaw = fluidFontSizeSettings === null || fluidFontSizeSettings === void 0 ? void 0 : fluidFontSizeSettings.max;
-  const preferredSize = getTypographyValueAndUnit(defaultSize); // Protect against unsupported units.
-
-  if (!(preferredSize !== null && preferredSize !== void 0 && preferredSize.unit)) {
+  if (true !== (typographySettings === null || typographySettings === void 0 ? void 0 : typographySettings.fluid)) {
     return defaultSize;
-  } // If no fluid min or max font sizes are available, create some using min/max font size factors.
-
+  } // A font size has explicitly bypassed fluid calculations.
 
-  if (!minimumFontSizeRaw) {
-    minimumFontSizeRaw = preferredSize.value * DEFAULT_MINIMUM_FONT_SIZE_FACTOR + preferredSize.unit;
-  }
 
-  if (!maximumFontSizeRaw) {
-    maximumFontSizeRaw = preferredSize.value * DEFAULT_MAXIMUM_FONT_SIZE_FACTOR + preferredSize.unit;
+  if (false === (preset === null || preset === void 0 ? void 0 : preset.fluid)) {
+    return defaultSize;
   }
 
   const fluidFontSizeValue = getComputedFluidTypographyValue({
-    maximumViewPortWidth: DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
-    minimumViewPortWidth: DEFAULT_MINIMUM_VIEWPORT_WIDTH,
-    maximumFontSize: maximumFontSizeRaw,
-    minimumFontSize: minimumFontSizeRaw,
-    scaleFactor: DEFAULT_SCALE_FACTOR
+    minimumFontSize: preset === null || preset === void 0 ? void 0 : (_preset$fluid = preset.fluid) === null || _preset$fluid === void 0 ? void 0 : _preset$fluid.min,
+    maximumFontSize: preset === null || preset === void 0 ? void 0 : (_preset$fluid2 = preset.fluid) === null || _preset$fluid2 === void 0 ? void 0 : _preset$fluid2.max,
+    fontSize: defaultSize
   });
 
   if (!!fluidFontSizeValue) {
@@ -74,131 +69,4 @@ export function getTypographyFontSizeValue(preset, typographySettings) {
 
   return defaultSize;
 }
-/**
- * Internal implementation of clamp() based on available min/max viewport width, and min/max font sizes.
- *
- * @param {Object} args
- * @param {string} args.maximumViewPortWidth Maximum size up to which type will have fluidity.
- * @param {string} args.minimumViewPortWidth Minimum viewport size from which type will have fluidity.
- * @param {string} args.maximumFontSize      Maximum font size for any clamp() calculation.
- * @param {string} args.minimumFontSize      Minimum font size for any clamp() calculation.
- * @param {number} args.scaleFactor          A scale factor to determine how fast a font scales within boundaries.
- *
- * @return {string|null} A font-size value using clamp().
- */
-
-export function getComputedFluidTypographyValue(_ref) {
-  let {
-    maximumViewPortWidth,
-    minimumViewPortWidth,
-    maximumFontSize,
-    minimumFontSize,
-    scaleFactor
-  } = _ref;
-  // Grab the minimum font size and normalize it in order to use the value for calculations.
-  const minimumFontSizeParsed = getTypographyValueAndUnit(minimumFontSize); // We get a 'preferred' unit to keep units consistent when calculating,
-  // otherwise the result will not be accurate.
-
-  const fontSizeUnit = (minimumFontSizeParsed === null || minimumFontSizeParsed === void 0 ? void 0 : minimumFontSizeParsed.unit) || 'rem'; // Grab the maximum font size and normalize it in order to use the value for calculations.
-
-  const maximumFontSizeParsed = getTypographyValueAndUnit(maximumFontSize, {
-    coerceTo: fontSizeUnit
-  }); // Protect against unsupported units.
-
-  if (!minimumFontSizeParsed || !maximumFontSizeParsed) {
-    return null;
-  } // Use rem for accessible fluid target font scaling.
-
-
-  const minimumFontSizeRem = getTypographyValueAndUnit(minimumFontSize, {
-    coerceTo: 'rem'
-  }); // Viewport widths defined for fluid typography. Normalize units
-
-  const maximumViewPortWidthParsed = getTypographyValueAndUnit(maximumViewPortWidth, {
-    coerceTo: fontSizeUnit
-  });
-  const minumumViewPortWidthParsed = getTypographyValueAndUnit(minimumViewPortWidth, {
-    coerceTo: fontSizeUnit
-  }); // Protect against unsupported units.
-
-  if (!maximumViewPortWidthParsed || !minumumViewPortWidthParsed || !minimumFontSizeRem) {
-    return null;
-  } // Build CSS rule.
-  // Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
-
-
-  const minViewPortWidthOffsetValue = roundToPrecision(minumumViewPortWidthParsed.value / 100, 3);
-  const viewPortWidthOffset = minViewPortWidthOffsetValue + fontSizeUnit;
-  let linearFactor = 100 * ((maximumFontSizeParsed.value - minimumFontSizeParsed.value) / (maximumViewPortWidthParsed.value - minumumViewPortWidthParsed.value));
-  linearFactor = roundToPrecision(linearFactor, 3) || 1;
-  const linearFactorScaled = linearFactor * scaleFactor;
-  const fluidTargetFontSize = `${minimumFontSizeRem.value}${minimumFontSizeRem.unit} + ((1vw - ${viewPortWidthOffset}) * ${linearFactorScaled})`;
-  return `clamp(${minimumFontSize}, ${fluidTargetFontSize}, ${maximumFontSize})`;
-}
-/**
- *
- * @param {string}           rawValue Raw size value from theme.json.
- * @param {Object|undefined} options  Calculation options.
- *
- * @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties.
- */
-
-export function getTypographyValueAndUnit(rawValue) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-  if (!rawValue) {
-    return null;
-  }
-
-  const {
-    coerceTo,
-    rootSizeValue,
-    acceptableUnits
-  } = {
-    coerceTo: '',
-    // Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
-    rootSizeValue: 16,
-    acceptableUnits: ['rem', 'px', 'em'],
-    ...options
-  };
-  const acceptableUnitsGroup = acceptableUnits === null || acceptableUnits === void 0 ? void 0 : acceptableUnits.join('|');
-  const regexUnits = new RegExp(`^(\\d*\\.?\\d+)(${acceptableUnitsGroup}){1,1}$`);
-  const matches = rawValue.match(regexUnits); // We need a number value and a unit.
-
-  if (!matches || matches.length < 3) {
-    return null;
-  }
-
-  let [, value, unit] = matches;
-  let returnValue = parseFloat(value);
-
-  if ('px' === coerceTo && ('em' === unit || 'rem' === unit)) {
-    returnValue = returnValue * rootSizeValue;
-    unit = coerceTo;
-  }
-
-  if ('px' === unit && ('em' === coerceTo || 'rem' === coerceTo)) {
-    returnValue = returnValue / rootSizeValue;
-    unit = coerceTo;
-  }
-
-  return {
-    value: returnValue,
-    unit
-  };
-}
-/**
- * Returns a value rounded to defined precision.
- * Returns `undefined` if the value is not a valid finite number.
- *
- * @param {number} value  Raw value.
- * @param {number} digits The number of digits to appear after the decimal point
- *
- * @return {number|undefined} Value rounded to standard precision.
- */
-
-export function roundToPrecision(value) {
-  let digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
-  return Number.isFinite(value) ? parseFloat(value.toFixed(digits)) : undefined;
-}
 //# sourceMappingURL=typography-utils.js.map

package/build-module/components/global-styles/typography-utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-utils.js"],"names":["getTypographyFontSizeValue","preset","typographySettings","size","defaultSize","fluid","DEFAULT_MAXIMUM_VIEWPORT_WIDTH","DEFAULT_MINIMUM_VIEWPORT_WIDTH","DEFAULT_MINIMUM_FONT_SIZE_FACTOR","DEFAULT_MAXIMUM_FONT_SIZE_FACTOR","DEFAULT_SCALE_FACTOR","fluidFontSizeSettings","minimumFontSizeRaw","min","maximumFontSizeRaw","max","preferredSize","getTypographyValueAndUnit","unit","value","fluidFontSizeValue","getComputedFluidTypographyValue","maximumViewPortWidth","minimumViewPortWidth","maximumFontSize","minimumFontSize","scaleFactor","minimumFontSizeParsed","fontSizeUnit","maximumFontSizeParsed","coerceTo","minimumFontSizeRem","maximumViewPortWidthParsed","minumumViewPortWidthParsed","minViewPortWidthOffsetValue","roundToPrecision","viewPortWidthOffset","linearFactor","linearFactorScaled","fluidTargetFontSize","rawValue","options","rootSizeValue","acceptableUnits","acceptableUnitsGroup","join","regexUnits","RegExp","matches","match","length","returnValue","parseFloat","digits","Number","isFinite","toFixed","undefined"],"mappings":"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","sourcesContent":["/**\n * The fluid utilities must match the backend equivalent.\n * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php\n * ---------------------------------------------------------------\n */\n\n/**\n * Returns a font-size value based on a given font-size preset.\n * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.\n *\n * @param {Object}           preset\n * @param {string}           preset.size              A default font size.\n * @param {string}           preset.name              A font size name, displayed in the UI.\n * @param {string}           preset.slug              A font size slug.\n * @param {Object}           preset.fluid\n * @param {string|undefined} preset.fluid.max         A maximum font size value.\n * @param {string|undefined} preset.fluid.min         A minimum font size value.\n * @param {Object}           typographySettings\n * @param {boolean}          typographySettings.fluid Whether fluid typography is enabled.\n *\n * @return {string} An font-size value\n */\nexport function getTypographyFontSizeValue( preset, typographySettings ) {\n\tconst { size: defaultSize } = preset;\n\n\tif ( true !== typographySettings?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\t// Defaults.\n\tconst DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';\n\tconst DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';\n\tconst DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;\n\tconst DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;\n\tconst DEFAULT_SCALE_FACTOR = 1;\n\n\t// Font sizes.\n\t// A font size has explicitly bypassed fluid calculations.\n\tif ( false === preset?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\tconst fluidFontSizeSettings = preset?.fluid || {};\n\n\t// Try to grab explicit min and max fluid font sizes.\n\tlet minimumFontSizeRaw = fluidFontSizeSettings?.min;\n\tlet maximumFontSizeRaw = fluidFontSizeSettings?.max;\n\tconst preferredSize = getTypographyValueAndUnit( defaultSize );\n\n\t// Protect against unsupported units.\n\tif ( ! preferredSize?.unit ) {\n\t\treturn defaultSize;\n\t}\n\n\t// If no fluid min or max font sizes are available, create some using min/max font size factors.\n\tif ( ! minimumFontSizeRaw ) {\n\t\tminimumFontSizeRaw =\n\t\t\tpreferredSize.value * DEFAULT_MINIMUM_FONT_SIZE_FACTOR +\n\t\t\tpreferredSize.unit;\n\t}\n\n\tif ( ! maximumFontSizeRaw ) {\n\t\tmaximumFontSizeRaw =\n\t\t\tpreferredSize.value * DEFAULT_MAXIMUM_FONT_SIZE_FACTOR +\n\t\t\tpreferredSize.unit;\n\t}\n\n\tconst fluidFontSizeValue = getComputedFluidTypographyValue( {\n\t\tmaximumViewPortWidth: DEFAULT_MAXIMUM_VIEWPORT_WIDTH,\n\t\tminimumViewPortWidth: DEFAULT_MINIMUM_VIEWPORT_WIDTH,\n\t\tmaximumFontSize: maximumFontSizeRaw,\n\t\tminimumFontSize: minimumFontSizeRaw,\n\t\tscaleFactor: DEFAULT_SCALE_FACTOR,\n\t} );\n\n\tif ( !! fluidFontSizeValue ) {\n\t\treturn fluidFontSizeValue;\n\t}\n\n\treturn defaultSize;\n}\n\n/**\n * Internal implementation of clamp() based on available min/max viewport width, and min/max font sizes.\n *\n * @param {Object} args\n * @param {string} args.maximumViewPortWidth Maximum size up to which type will have fluidity.\n * @param {string} args.minimumViewPortWidth Minimum viewport size from which type will have fluidity.\n * @param {string} args.maximumFontSize      Maximum font size for any clamp() calculation.\n * @param {string} args.minimumFontSize      Minimum font size for any clamp() calculation.\n * @param {number} args.scaleFactor          A scale factor to determine how fast a font scales within boundaries.\n *\n * @return {string|null} A font-size value using clamp().\n */\nexport function getComputedFluidTypographyValue( {\n\tmaximumViewPortWidth,\n\tminimumViewPortWidth,\n\tmaximumFontSize,\n\tminimumFontSize,\n\tscaleFactor,\n} ) {\n\t// Grab the minimum font size and normalize it in order to use the value for calculations.\n\tconst minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );\n\n\t// We get a 'preferred' unit to keep units consistent when calculating,\n\t// otherwise the result will not be accurate.\n\tconst fontSizeUnit = minimumFontSizeParsed?.unit || 'rem';\n\n\t// Grab the maximum font size and normalize it in order to use the value for calculations.\n\tconst maximumFontSizeParsed = getTypographyValueAndUnit( maximumFontSize, {\n\t\tcoerceTo: fontSizeUnit,\n\t} );\n\n\t// Protect against unsupported units.\n\tif ( ! minimumFontSizeParsed || ! maximumFontSizeParsed ) {\n\t\treturn null;\n\t}\n\n\t// Use rem for accessible fluid target font scaling.\n\tconst minimumFontSizeRem = getTypographyValueAndUnit( minimumFontSize, {\n\t\tcoerceTo: 'rem',\n\t} );\n\n\t// Viewport widths defined for fluid typography. Normalize units\n\tconst maximumViewPortWidthParsed = getTypographyValueAndUnit(\n\t\tmaximumViewPortWidth,\n\t\t{ coerceTo: fontSizeUnit }\n\t);\n\tconst minumumViewPortWidthParsed = getTypographyValueAndUnit(\n\t\tminimumViewPortWidth,\n\t\t{ coerceTo: fontSizeUnit }\n\t);\n\n\t// Protect against unsupported units.\n\tif (\n\t\t! maximumViewPortWidthParsed ||\n\t\t! minumumViewPortWidthParsed ||\n\t\t! minimumFontSizeRem\n\t) {\n\t\treturn null;\n\t}\n\n\t// Build CSS rule.\n\t// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.\n\tconst minViewPortWidthOffsetValue = roundToPrecision(\n\t\tminumumViewPortWidthParsed.value / 100,\n\t\t3\n\t);\n\n\tconst viewPortWidthOffset = minViewPortWidthOffsetValue + fontSizeUnit;\n\tlet linearFactor =\n\t\t100 *\n\t\t( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) /\n\t\t\t( maximumViewPortWidthParsed.value -\n\t\t\t\tminumumViewPortWidthParsed.value ) );\n\tlinearFactor = roundToPrecision( linearFactor, 3 ) || 1;\n\tconst linearFactorScaled = linearFactor * scaleFactor;\n\tconst fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;\n\n\treturn `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;\n}\n\n/**\n *\n * @param {string}           rawValue Raw size value from theme.json.\n * @param {Object|undefined} options  Calculation options.\n *\n * @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties.\n */\nexport function getTypographyValueAndUnit( rawValue, options = {} ) {\n\tif ( ! rawValue ) {\n\t\treturn null;\n\t}\n\n\tconst { coerceTo, rootSizeValue, acceptableUnits } = {\n\t\tcoerceTo: '',\n\t\t// Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( \"html\" ) ).fontSize`.\n\t\trootSizeValue: 16,\n\t\tacceptableUnits: [ 'rem', 'px', 'em' ],\n\t\t...options,\n\t};\n\n\tconst acceptableUnitsGroup = acceptableUnits?.join( '|' );\n\tconst regexUnits = new RegExp(\n\t\t`^(\\\\d*\\\\.?\\\\d+)(${ acceptableUnitsGroup }){1,1}$`\n\t);\n\n\tconst matches = rawValue.match( regexUnits );\n\n\t// We need a number value and a unit.\n\tif ( ! matches || matches.length < 3 ) {\n\t\treturn null;\n\t}\n\n\tlet [ , value, unit ] = matches;\n\n\tlet returnValue = parseFloat( value );\n\n\tif ( 'px' === coerceTo && ( 'em' === unit || 'rem' === unit ) ) {\n\t\treturnValue = returnValue * rootSizeValue;\n\t\tunit = coerceTo;\n\t}\n\n\tif ( 'px' === unit && ( 'em' === coerceTo || 'rem' === coerceTo ) ) {\n\t\treturnValue = returnValue / rootSizeValue;\n\t\tunit = coerceTo;\n\t}\n\n\treturn {\n\t\tvalue: returnValue,\n\t\tunit,\n\t};\n}\n\n/**\n * Returns a value rounded to defined precision.\n * Returns `undefined` if the value is not a valid finite number.\n *\n * @param {number} value  Raw value.\n * @param {number} digits The number of digits to appear after the decimal point\n *\n * @return {number|undefined} Value rounded to standard precision.\n */\nexport function roundToPrecision( value, digits = 3 ) {\n\treturn Number.isFinite( value )\n\t\t? parseFloat( value.toFixed( digits ) )\n\t\t: undefined;\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-utils.js"],"names":["getComputedFluidTypographyValue","getTypographyFontSizeValue","preset","typographySettings","size","defaultSize","fluid","fluidFontSizeValue","minimumFontSize","min","maximumFontSize","max","fontSize"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,SAASA,+BAAT,QAAgD,yBAAhD;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,0BAAT,CAAqCC,MAArC,EAA6CC,kBAA7C,EAAkE;AAAA;;AACxE,QAAM;AAAEC,IAAAA,IAAI,EAAEC;AAAR,MAAwBH,MAA9B;AAEA;AACD;AACA;AACA;;AACC,MAAK,CAAEG,WAAF,IAAiB,QAAQA,WAA9B,EAA4C;AAC3C,WAAOA,WAAP;AACA;;AAED,MAAK,UAASF,kBAAT,aAASA,kBAAT,uBAASA,kBAAkB,CAAEG,KAA7B,CAAL,EAA0C;AACzC,WAAOD,WAAP;AACA,GAbuE,CAexE;;;AACA,MAAK,WAAUH,MAAV,aAAUA,MAAV,uBAAUA,MAAM,CAAEI,KAAlB,CAAL,EAA+B;AAC9B,WAAOD,WAAP;AACA;;AAED,QAAME,kBAAkB,GAAGP,+BAA+B,CAAE;AAC3DQ,IAAAA,eAAe,EAAEN,MAAF,aAAEA,MAAF,wCAAEA,MAAM,CAAEI,KAAV,kDAAE,cAAeG,GAD2B;AAE3DC,IAAAA,eAAe,EAAER,MAAF,aAAEA,MAAF,yCAAEA,MAAM,CAAEI,KAAV,mDAAE,eAAeK,GAF2B;AAG3DC,IAAAA,QAAQ,EAAEP;AAHiD,GAAF,CAA1D;;AAMA,MAAK,CAAC,CAAEE,kBAAR,EAA6B;AAC5B,WAAOA,kBAAP;AACA;;AAED,SAAOF,WAAP;AACA","sourcesContent":["/**\n * The fluid utilities must match the backend equivalent.\n * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php\n * ---------------------------------------------------------------\n */\n\n/**\n * WordPress dependencies\n */\nimport { getComputedFluidTypographyValue } from '@wordpress/block-editor';\n\n/**\n * @typedef {Object} FluidPreset\n * @property {string|undefined}  max A maximum font size value.\n * @property {?string|undefined} min A minimum font size value.\n */\n\n/**\n * @typedef {Object} Preset\n * @property {?string|?number}               size  A default font size.\n * @property {string}                        name  A font size name, displayed in the UI.\n * @property {string}                        slug  A font size slug\n * @property {boolean|FluidPreset|undefined} fluid A font size slug\n */\n\n/**\n * Returns a font-size value based on a given font-size preset.\n * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.\n *\n * @param {Preset}  preset\n * @param {Object}  typographySettings\n * @param {boolean} typographySettings.fluid Whether fluid typography is enabled.\n *\n * @return {string|*} A font-size value or the value of preset.size.\n */\nexport function getTypographyFontSizeValue( preset, typographySettings ) {\n\tconst { size: defaultSize } = preset;\n\n\t/*\n\t * Catches falsy values and 0/'0'.\n\t * Fluid calculations cannot be performed on 0.\n\t */\n\tif ( ! defaultSize || '0' === defaultSize ) {\n\t\treturn defaultSize;\n\t}\n\n\tif ( true !== typographySettings?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\t// A font size has explicitly bypassed fluid calculations.\n\tif ( false === preset?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\tconst fluidFontSizeValue = getComputedFluidTypographyValue( {\n\t\tminimumFontSize: preset?.fluid?.min,\n\t\tmaximumFontSize: preset?.fluid?.max,\n\t\tfontSize: defaultSize,\n\t} );\n\n\tif ( !! fluidFontSizeValue ) {\n\t\treturn fluidFontSizeValue;\n\t}\n\n\treturn defaultSize;\n}\n"]}

package/build-module/components/global-styles/use-global-styles-output.js

@@ -18,6 +18,7 @@ import { __unstablePresetDuotoneFilter as PresetDuotoneFilter, __experimentalGet
  */
 
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
+import { getTypographyFontSizeValue } from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useSetting } from './hooks'; // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -245,6 +246,22 @@ export function getStylesDeclarations() {
       if (!ruleValue || !!((_ruleValue2 = ruleValue) !== null && _ruleValue2 !== void 0 && _ruleValue2.ref)) {
         return;
       }
+    } // Calculate fluid typography rules where available.
+
+
+    if (cssProperty === 'font-size') {
+      var _tree$settings;
+
+      /*
+       * getTypographyFontSizeValue() will check
+       * if fluid typography has been activated and also
+       * whether the incoming value can be converted to a fluid value.
+       * Values that already have a "clamp()" function will not pass the test,
+       * and therefore the original $value will be returned.
+       */
+      ruleValue = getTypographyFontSizeValue({
+        size: ruleValue
+      }, tree === null || tree === void 0 ? void 0 : (_tree$settings = tree.settings) === null || _tree$settings === void 0 ? void 0 : _tree$settings.typography);
     }
 
     output.push(`${cssProperty}: ${ruleValue}`);
@@ -266,7 +283,7 @@ export function getStylesDeclarations() {
  */
 
 export function getLayoutStyles(_ref6) {
-  var _style$spacing, _tree$settings, _tree$settings$layout, _tree$settings2, _tree$settings2$layou;
+  var _style$spacing, _tree$settings2, _tree$settings2$layou, _tree$settings3, _tree$settings3$layou;
 
   let {
     tree,
@@ -288,7 +305,7 @@ export function getLayoutStyles(_ref6) {
     }
   }
 
-  if (gapValue && tree !== null && tree !== void 0 && (_tree$settings = tree.settings) !== null && _tree$settings !== void 0 && (_tree$settings$layout = _tree$settings.layout) !== null && _tree$settings$layout !== void 0 && _tree$settings$layout.definitions) {
+  if (gapValue && tree !== null && tree !== void 0 && (_tree$settings2 = tree.settings) !== null && _tree$settings2 !== void 0 && (_tree$settings2$layou = _tree$settings2.layout) !== null && _tree$settings2$layou !== void 0 && _tree$settings2$layou.definitions) {
     Object.values(tree.settings.layout.definitions).forEach(_ref7 => {
       let {
         className,
@@ -334,7 +351,7 @@ export function getLayoutStyles(_ref6) {
   } // Output base styles
 
 
-  if (selector === ROOT_BLOCK_SELECTOR && tree !== null && tree !== void 0 && (_tree$settings2 = tree.settings) !== null && _tree$settings2 !== void 0 && (_tree$settings2$layou = _tree$settings2.layout) !== null && _tree$settings2$layou !== void 0 && _tree$settings2$layou.definitions) {
+  if (selector === ROOT_BLOCK_SELECTOR && tree !== null && tree !== void 0 && (_tree$settings3 = tree.settings) !== null && _tree$settings3 !== void 0 && (_tree$settings3$layou = _tree$settings3.layout) !== null && _tree$settings3$layou !== void 0 && _tree$settings3$layou.definitions) {
     const validDisplayModes = ['block', 'flex', 'grid'];
     Object.values(tree.settings.layout.definitions).forEach(_ref9 => {
       let {
@@ -439,7 +456,7 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
   return nodes;
 };
 export const getNodesWithSettings = (tree, blockSelectors) => {
-  var _tree$settings3, _tree$settings$blocks, _tree$settings4;
+  var _tree$settings4, _tree$settings$blocks, _tree$settings5;
 
   const nodes = [];
 
@@ -464,7 +481,7 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
 
 
   const presets = pickPresets(tree.settings);
-  const custom = (_tree$settings3 = tree.settings) === null || _tree$settings3 === void 0 ? void 0 : _tree$settings3.custom;
+  const custom = (_tree$settings4 = tree.settings) === null || _tree$settings4 === void 0 ? void 0 : _tree$settings4.custom;
 
   if (!isEmpty(presets) || !!custom) {
     nodes.push({
@@ -475,7 +492,7 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
   } // Blocks.
 
 
-  Object.entries((_tree$settings$blocks = (_tree$settings4 = tree.settings) === null || _tree$settings4 === void 0 ? void 0 : _tree$settings4.blocks) !== null && _tree$settings$blocks !== void 0 ? _tree$settings$blocks : {}).forEach(_ref15 => {
+  Object.entries((_tree$settings$blocks = (_tree$settings5 = tree.settings) === null || _tree$settings5 === void 0 ? void 0 : _tree$settings5.blocks) !== null && _tree$settings$blocks !== void 0 ? _tree$settings$blocks : {}).forEach(_ref15 => {
     let [blockName, node] = _ref15;
     const blockPresets = pickPresets(node);
     const blockCustom = node.custom;
@@ -513,16 +530,16 @@ export const toCustomProperties = (tree, blockSelectors) => {
   return ruleset;
 };
 export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport) {
-  var _tree$settings5, _tree$settings6;
+  var _tree$settings6, _tree$settings7;
 
   let disableLayoutStyles = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  const useRootPaddingAlign = tree === null || tree === void 0 ? void 0 : (_tree$settings5 = tree.settings) === null || _tree$settings5 === void 0 ? void 0 : _tree$settings5.useRootPaddingAwareAlignments;
+  const useRootPaddingAlign = tree === null || tree === void 0 ? void 0 : (_tree$settings6 = tree.settings) === null || _tree$settings6 === void 0 ? void 0 : _tree$settings6.useRootPaddingAwareAlignments;
   const {
     contentSize,
     wideSize
-  } = (tree === null || tree === void 0 ? void 0 : (_tree$settings6 = tree.settings) === null || _tree$settings6 === void 0 ? void 0 : _tree$settings6.layout) || {};
+  } = (tree === null || tree === void 0 ? void 0 : (_tree$settings7 = tree.settings) === null || _tree$settings7 === void 0 ? void 0 : _tree$settings7.layout) || {};
   /*
    * Reset default browser margin on the root body element.
    * This is set on the root selector **before** generating the ruleset