@wordpress/block-editor 10.0.5 → 10.0.6

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+### Bug Fix
+
+-   `FontSizePicker`: Update fluid utils so that only string, floats and integers are treated as valid font sizes for the purposes of fluid typography ([#44847](https://github.com/WordPress/gutenberg/pull/44847))
+-   `getTypographyClassesAndStyles()`: Ensure that font sizes are transformed into fluid values if fluid typography is activated ([#44852](https://github.com/WordPress/gutenberg/pull/44852))
+
+## 10.2.0 (2022-10-05)
+
+## 10.1.0 (2022-09-21)
+
 ## 10.0.0 (2022-09-13)
 
 ### Breaking change

package/README.md

@@ -395,6 +395,45 @@ _Returns_
 
 -   `?Object`: Color object included in the colors array whose color property equals colorValue. Returns undefined if no color object matches this requirement.
 
+### getComputedFluidTypographyValue
+
+Computes a fluid font-size value that uses clamp(). A minimum and maxinmum
+font size OR a single font size can be specified.
+
+If a single font size is specified, it is scaled up and down by
+minimumFontSizeFactor and maximumFontSizeFactor to arrive at the minimum and
+maximum sizes.
+
+_Usage_
+
+```js
+// Calculate fluid font-size value from a minimum and maximum value.
+const fontSize = getComputedFluidTypographyValue( {
+	minimumFontSize: '20px',
+	maximumFontSize: '45px',
+} );
+// Calculate fluid font-size value from a single font size.
+const fontSize = getComputedFluidTypographyValue( {
+	fontSize: '30px',
+} );
+```
+
+_Parameters_
+
+-   _args_ `Object`:
+-   _args.minimumViewPortWidth_ `?string`: Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
+-   _args.maximumViewPortWidth_ `?string`: Maximum size up to which type will have fluidity. Optional if fontSize is specified.
+-   _args.fontSize_ `[string|number]`: Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
+-   _args.maximumFontSize_ `?string`: Maximum font size for any clamp() calculation. Optional.
+-   _args.minimumFontSize_ `?string`: Minimum font size for any clamp() calculation. Optional.
+-   _args.scaleFactor_ `?number`: A scale factor to determine how fast a font scales within boundaries. Optional.
+-   _args.minimumFontSizeFactor_ `?number`: How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+-   _args.maximumFontSizeFactor_ `?number`: How much to scale defaultFontSize by to derive maximumFontSize. Optional.
+
+_Returns_
+
+-   `string|null`: A font-size value using clamp().
+
 ### getFontSize
 
 Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
@@ -482,6 +521,7 @@ attributes.
 _Parameters_
 
 -   _attributes_ `Object`: Block attributes.
+-   _isFluidFontSizeActive_ `boolean`: Whether the function should try to convert font sizes to fluid values.
 
 _Returns_
 

package/build/components/font-sizes/fluid-utils.js

@@ -0,0 +1,208 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getComputedFluidTypographyValue = getComputedFluidTypographyValue;
+exports.getTypographyValueAndUnit = getTypographyValueAndUnit;
+exports.roundToPrecision = roundToPrecision;
+
+/**
+ * The fluid utilities must match the backend equivalent.
+ * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php
+ * ---------------------------------------------------------------
+ */
+// Defaults.
+const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
+const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
+const DEFAULT_SCALE_FACTOR = 1;
+const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
+const DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;
+/**
+ * Computes a fluid font-size value that uses clamp(). A minimum and maxinmum
+ * font size OR a single font size can be specified.
+ *
+ * If a single font size is specified, it is scaled up and down by
+ * minimumFontSizeFactor and maximumFontSizeFactor to arrive at the minimum and
+ * maximum sizes.
+ *
+ * @example
+ * ```js
+ * // Calculate fluid font-size value from a minimum and maximum value.
+ * const fontSize = getComputedFluidTypographyValue( {
+ *     minimumFontSize: '20px',
+ *     maximumFontSize: '45px'
+ * } );
+ * // Calculate fluid font-size value from a single font size.
+ * const fontSize = getComputedFluidTypographyValue( {
+ *     fontSize: '30px',
+ * } );
+ * ```
+ *
+ * @param {Object}        args
+ * @param {?string}       args.minimumViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
+ * @param {?string}       args.maximumViewPortWidth  Maximum size up to which type will have fluidity. Optional if fontSize is specified.
+ * @param {string|number} [args.fontSize]            Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
+ * @param {?string}       args.maximumFontSize       Maximum font size for any clamp() calculation. Optional.
+ * @param {?string}       args.minimumFontSize       Minimum font size for any clamp() calculation. Optional.
+ * @param {?number}       args.scaleFactor           A scale factor to determine how fast a font scales within boundaries. Optional.
+ * @param {?number}       args.minimumFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+ * @param {?number}       args.maximumFontSizeFactor How much to scale defaultFontSize by to derive maximumFontSize. Optional.
+ *
+ * @return {string|null} A font-size value using clamp().
+ */
+
+function getComputedFluidTypographyValue(_ref) {
+  let {
+    minimumFontSize,
+    maximumFontSize,
+    fontSize,
+    minimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
+    maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
+    scaleFactor = DEFAULT_SCALE_FACTOR,
+    minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,
+    maximumFontSizeFactor = DEFAULT_MAXIMUM_FONT_SIZE_FACTOR
+  } = _ref;
+
+  // Calculate missing minimumFontSize and maximumFontSize from
+  // defaultFontSize if provided.
+  if (fontSize && (!minimumFontSize || !maximumFontSize)) {
+    // Parse default font size.
+    const fontSizeParsed = getTypographyValueAndUnit(fontSize); // Protect against invalid units.
+
+    if (!(fontSizeParsed !== null && fontSizeParsed !== void 0 && fontSizeParsed.unit)) {
+      return null;
+    } // If no minimumFontSize is provided, derive using min scale factor.
+
+
+    if (!minimumFontSize) {
+      minimumFontSize = fontSizeParsed.value * minimumFontSizeFactor + fontSizeParsed.unit;
+    } // If no maximumFontSize is provided, derive using max scale factor.
+
+
+    if (!maximumFontSize) {
+      maximumFontSize = fontSizeParsed.value * maximumFontSizeFactor + fontSizeParsed.unit;
+    }
+  } // Return early if one of the provided inputs is not provided.
+
+
+  if (!minimumFontSize || !maximumFontSize) {
+    return null;
+  } // 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})`;
+}
+/**
+ * Internal method that checks a string for a unit and value and returns an array consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ].
+ * A raw font size of `value + unit` is expected. If the value is an integer, it will convert to `value + 'px'`.
+ *
+ * @param {string|number}    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.
+ */
+
+
+function getTypographyValueAndUnit(rawValue) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  if (typeof rawValue !== 'string' && typeof rawValue !== 'number') {
+    return null;
+  } // Converts numeric values to pixel values by default.
+
+
+  if (isFinite(rawValue)) {
+    rawValue = `${rawValue}px`;
+  }
+
+  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.
+ */
+
+
+function roundToPrecision(value) {
+  let digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  return Number.isFinite(value) ? parseFloat(value.toFixed(digits)) : undefined;
+}
+//# sourceMappingURL=fluid-utils.js.map

package/build/components/font-sizes/fluid-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/font-sizes/fluid-utils.js"],"names":["DEFAULT_MAXIMUM_VIEWPORT_WIDTH","DEFAULT_MINIMUM_VIEWPORT_WIDTH","DEFAULT_SCALE_FACTOR","DEFAULT_MINIMUM_FONT_SIZE_FACTOR","DEFAULT_MAXIMUM_FONT_SIZE_FACTOR","getComputedFluidTypographyValue","minimumFontSize","maximumFontSize","fontSize","minimumViewPortWidth","maximumViewPortWidth","scaleFactor","minimumFontSizeFactor","maximumFontSizeFactor","fontSizeParsed","getTypographyValueAndUnit","unit","value","minimumFontSizeParsed","fontSizeUnit","maximumFontSizeParsed","coerceTo","minimumFontSizeRem","maximumViewPortWidthParsed","minumumViewPortWidthParsed","minViewPortWidthOffsetValue","roundToPrecision","viewPortWidthOffset","linearFactor","linearFactorScaled","fluidTargetFontSize","rawValue","options","isFinite","rootSizeValue","acceptableUnits","acceptableUnitsGroup","join","regexUnits","RegExp","matches","match","length","returnValue","parseFloat","digits","Number","toFixed","undefined"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA,MAAMA,8BAA8B,GAAG,QAAvC;AACA,MAAMC,8BAA8B,GAAG,OAAvC;AACA,MAAMC,oBAAoB,GAAG,CAA7B;AACA,MAAMC,gCAAgC,GAAG,IAAzC;AACA,MAAMC,gCAAgC,GAAG,GAAzC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,+BAAT,OASH;AAAA,MAT6C;AAChDC,IAAAA,eADgD;AAEhDC,IAAAA,eAFgD;AAGhDC,IAAAA,QAHgD;AAIhDC,IAAAA,oBAAoB,GAAGR,8BAJyB;AAKhDS,IAAAA,oBAAoB,GAAGV,8BALyB;AAMhDW,IAAAA,WAAW,GAAGT,oBANkC;AAOhDU,IAAAA,qBAAqB,GAAGT,gCAPwB;AAQhDU,IAAAA,qBAAqB,GAAGT;AARwB,GAS7C;;AACH;AACA;AACA,MAAKI,QAAQ,KAAM,CAAEF,eAAF,IAAqB,CAAEC,eAA7B,CAAb,EAA8D;AAC7D;AACA,UAAMO,cAAc,GAAGC,yBAAyB,CAAEP,QAAF,CAAhD,CAF6D,CAI7D;;AACA,QAAK,EAAEM,cAAF,aAAEA,cAAF,eAAEA,cAAc,CAAEE,IAAlB,CAAL,EAA8B;AAC7B,aAAO,IAAP;AACA,KAP4D,CAS7D;;;AACA,QAAK,CAAEV,eAAP,EAAyB;AACxBA,MAAAA,eAAe,GACdQ,cAAc,CAACG,KAAf,GAAuBL,qBAAvB,GACAE,cAAc,CAACE,IAFhB;AAGA,KAd4D,CAgB7D;;;AACA,QAAK,CAAET,eAAP,EAAyB;AACxBA,MAAAA,eAAe,GACdO,cAAc,CAACG,KAAf,GAAuBJ,qBAAvB,GACAC,cAAc,CAACE,IAFhB;AAGA;AACD,GAzBE,CA2BH;;;AACA,MAAK,CAAEV,eAAF,IAAqB,CAAEC,eAA5B,EAA8C;AAC7C,WAAO,IAAP;AACA,GA9BE,CAgCH;;;AACA,QAAMW,qBAAqB,GAAGH,yBAAyB,CAAET,eAAF,CAAvD,CAjCG,CAmCH;AACA;;AACA,QAAMa,YAAY,GAAG,CAAAD,qBAAqB,SAArB,IAAAA,qBAAqB,WAArB,YAAAA,qBAAqB,CAAEF,IAAvB,KAA+B,KAApD,CArCG,CAuCH;;AACA,QAAMI,qBAAqB,GAAGL,yBAAyB,CAAER,eAAF,EAAmB;AACzEc,IAAAA,QAAQ,EAAEF;AAD+D,GAAnB,CAAvD,CAxCG,CA4CH;;AACA,MAAK,CAAED,qBAAF,IAA2B,CAAEE,qBAAlC,EAA0D;AACzD,WAAO,IAAP;AACA,GA/CE,CAiDH;;;AACA,QAAME,kBAAkB,GAAGP,yBAAyB,CAAET,eAAF,EAAmB;AACtEe,IAAAA,QAAQ,EAAE;AAD4D,GAAnB,CAApD,CAlDG,CAsDH;;AACA,QAAME,0BAA0B,GAAGR,yBAAyB,CAC3DL,oBAD2D,EAE3D;AAAEW,IAAAA,QAAQ,EAAEF;AAAZ,GAF2D,CAA5D;AAIA,QAAMK,0BAA0B,GAAGT,yBAAyB,CAC3DN,oBAD2D,EAE3D;AAAEY,IAAAA,QAAQ,EAAEF;AAAZ,GAF2D,CAA5D,CA3DG,CAgEH;;AACA,MACC,CAAEI,0BAAF,IACA,CAAEC,0BADF,IAEA,CAAEF,kBAHH,EAIE;AACD,WAAO,IAAP;AACA,GAvEE,CAyEH;AACA;;;AACA,QAAMG,2BAA2B,GAAGC,gBAAgB,CACnDF,0BAA0B,CAACP,KAA3B,GAAmC,GADgB,EAEnD,CAFmD,CAApD;AAKA,QAAMU,mBAAmB,GAAGF,2BAA2B,GAAGN,YAA1D;AACA,MAAIS,YAAY,GACf,OACE,CAAER,qBAAqB,CAACH,KAAtB,GAA8BC,qBAAqB,CAACD,KAAtD,KACCM,0BAA0B,CAACN,KAA3B,GACDO,0BAA0B,CAACP,KAF3B,CADF,CADD;AAKAW,EAAAA,YAAY,GAAGF,gBAAgB,CAAEE,YAAF,EAAgB,CAAhB,CAAhB,IAAuC,CAAtD;AACA,QAAMC,kBAAkB,GAAGD,YAAY,GAAGjB,WAA1C;AACA,QAAMmB,mBAAmB,GAAI,GAAGR,kBAAkB,CAACL,KAAO,GAAGK,kBAAkB,CAACN,IAAM,cAAcW,mBAAqB,OAAOE,kBAAoB,GAApJ;AAEA,SAAQ,SAASvB,eAAiB,KAAKwB,mBAAqB,KAAKvB,eAAiB,GAAlF;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASQ,yBAAT,CAAoCgB,QAApC,EAA6D;AAAA,MAAfC,OAAe,uEAAL,EAAK;;AACnE,MAAK,OAAOD,QAAP,KAAoB,QAApB,IAAgC,OAAOA,QAAP,KAAoB,QAAzD,EAAoE;AACnE,WAAO,IAAP;AACA,GAHkE,CAKnE;;;AACA,MAAKE,QAAQ,CAAEF,QAAF,CAAb,EAA4B;AAC3BA,IAAAA,QAAQ,GAAI,GAAGA,QAAU,IAAzB;AACA;;AAED,QAAM;AAAEV,IAAAA,QAAF;AAAYa,IAAAA,aAAZ;AAA2BC,IAAAA;AAA3B,MAA+C;AACpDd,IAAAA,QAAQ,EAAE,EAD0C;AAEpD;AACAa,IAAAA,aAAa,EAAE,EAHqC;AAIpDC,IAAAA,eAAe,EAAE,CAAE,KAAF,EAAS,IAAT,EAAe,IAAf,CAJmC;AAKpD,OAAGH;AALiD,GAArD;AAQA,QAAMI,oBAAoB,GAAGD,eAAH,aAAGA,eAAH,uBAAGA,eAAe,CAAEE,IAAjB,CAAuB,GAAvB,CAA7B;AACA,QAAMC,UAAU,GAAG,IAAIC,MAAJ,CACjB,mBAAmBH,oBAAsB,SADxB,CAAnB;AAIA,QAAMI,OAAO,GAAGT,QAAQ,CAACU,KAAT,CAAgBH,UAAhB,CAAhB,CAvBmE,CAyBnE;;AACA,MAAK,CAAEE,OAAF,IAAaA,OAAO,CAACE,MAAR,GAAiB,CAAnC,EAAuC;AACtC,WAAO,IAAP;AACA;;AAED,MAAI,GAAIzB,KAAJ,EAAWD,IAAX,IAAoBwB,OAAxB;AAEA,MAAIG,WAAW,GAAGC,UAAU,CAAE3B,KAAF,CAA5B;;AAEA,MAAK,SAASI,QAAT,KAAuB,SAASL,IAAT,IAAiB,UAAUA,IAAlD,CAAL,EAAgE;AAC/D2B,IAAAA,WAAW,GAAGA,WAAW,GAAGT,aAA5B;AACAlB,IAAAA,IAAI,GAAGK,QAAP;AACA;;AAED,MAAK,SAASL,IAAT,KAAmB,SAASK,QAAT,IAAqB,UAAUA,QAAlD,CAAL,EAAoE;AACnEsB,IAAAA,WAAW,GAAGA,WAAW,GAAGT,aAA5B;AACAlB,IAAAA,IAAI,GAAGK,QAAP;AACA;;AAED,SAAO;AACNJ,IAAAA,KAAK,EAAE0B,WADD;AAEN3B,IAAAA;AAFM,GAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASU,gBAAT,CAA2BT,KAA3B,EAA+C;AAAA,MAAb4B,MAAa,uEAAJ,CAAI;AACrD,SAAOC,MAAM,CAACb,QAAP,CAAiBhB,KAAjB,IACJ2B,UAAU,CAAE3B,KAAK,CAAC8B,OAAN,CAAeF,MAAf,CAAF,CADN,GAEJG,SAFH;AAGA","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// Defaults.\nconst DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';\nconst DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';\nconst DEFAULT_SCALE_FACTOR = 1;\nconst DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;\nconst DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;\n\n/**\n * Computes a fluid font-size value that uses clamp(). A minimum and maxinmum\n * font size OR a single font size can be specified.\n *\n * If a single font size is specified, it is scaled up and down by\n * minimumFontSizeFactor and maximumFontSizeFactor to arrive at the minimum and\n * maximum sizes.\n *\n * @example\n * ```js\n * // Calculate fluid font-size value from a minimum and maximum value.\n * const fontSize = getComputedFluidTypographyValue( {\n *     minimumFontSize: '20px',\n *     maximumFontSize: '45px'\n * } );\n * // Calculate fluid font-size value from a single font size.\n * const fontSize = getComputedFluidTypographyValue( {\n *     fontSize: '30px',\n * } );\n * ```\n *\n * @param {Object}        args\n * @param {?string}       args.minimumViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.\n * @param {?string}       args.maximumViewPortWidth  Maximum size up to which type will have fluidity. Optional if fontSize is specified.\n * @param {string|number} [args.fontSize]            Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.\n * @param {?string}       args.maximumFontSize       Maximum font size for any clamp() calculation. Optional.\n * @param {?string}       args.minimumFontSize       Minimum font size for any clamp() calculation. Optional.\n * @param {?number}       args.scaleFactor           A scale factor to determine how fast a font scales within boundaries. Optional.\n * @param {?number}       args.minimumFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.\n * @param {?number}       args.maximumFontSizeFactor How much to scale defaultFontSize by to derive maximumFontSize. Optional.\n *\n * @return {string|null} A font-size value using clamp().\n */\nexport function getComputedFluidTypographyValue( {\n\tminimumFontSize,\n\tmaximumFontSize,\n\tfontSize,\n\tminimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,\n\tmaximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,\n\tscaleFactor = DEFAULT_SCALE_FACTOR,\n\tminimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,\n\tmaximumFontSizeFactor = DEFAULT_MAXIMUM_FONT_SIZE_FACTOR,\n} ) {\n\t// Calculate missing minimumFontSize and maximumFontSize from\n\t// defaultFontSize if provided.\n\tif ( fontSize && ( ! minimumFontSize || ! maximumFontSize ) ) {\n\t\t// Parse default font size.\n\t\tconst fontSizeParsed = getTypographyValueAndUnit( fontSize );\n\n\t\t// Protect against invalid units.\n\t\tif ( ! fontSizeParsed?.unit ) {\n\t\t\treturn null;\n\t\t}\n\n\t\t// If no minimumFontSize is provided, derive using min scale factor.\n\t\tif ( ! minimumFontSize ) {\n\t\t\tminimumFontSize =\n\t\t\t\tfontSizeParsed.value * minimumFontSizeFactor +\n\t\t\t\tfontSizeParsed.unit;\n\t\t}\n\n\t\t// If no maximumFontSize is provided, derive using max scale factor.\n\t\tif ( ! maximumFontSize ) {\n\t\t\tmaximumFontSize =\n\t\t\t\tfontSizeParsed.value * maximumFontSizeFactor +\n\t\t\t\tfontSizeParsed.unit;\n\t\t}\n\t}\n\n\t// Return early if one of the provided inputs is not provided.\n\tif ( ! minimumFontSize || ! maximumFontSize ) {\n\t\treturn null;\n\t}\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 * Internal method that checks a string for a unit and value and returns an array consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ].\n * A raw font size of `value + unit` is expected. If the value is an integer, it will convert to `value + 'px'`.\n *\n * @param {string|number}    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 ( typeof rawValue !== 'string' && typeof rawValue !== 'number' ) {\n\t\treturn null;\n\t}\n\n\t// Converts numeric values to pixel values by default.\n\tif ( isFinite( rawValue ) ) {\n\t\trawValue = `${ rawValue }px`;\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"]}

package/build/components/font-sizes/index.js

@@ -11,6 +11,12 @@ Object.defineProperty(exports, "FontSizePicker", {
     return _fontSizePicker.default;
   }
 });
+Object.defineProperty(exports, "getComputedFluidTypographyValue", {
+  enumerable: true,
+  get: function () {
+    return _fluidUtils.getComputedFluidTypographyValue;
+  }
+});
 Object.defineProperty(exports, "getFontSize", {
   enumerable: true,
   get: function () {
@@ -38,6 +44,8 @@ Object.defineProperty(exports, "withFontSizes", {
 
 var _utils = require("./utils");
 
+var _fluidUtils = require("./fluid-utils");
+
 var _fontSizePicker = _interopRequireDefault(require("./font-size-picker"));
 
 var _withFontSizes = _interopRequireDefault(require("./with-font-sizes"));

package/build/components/font-sizes/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/font-sizes/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAKA;;AACA","sourcesContent":["export {\n\tgetFontSize,\n\tgetFontSizeClass,\n\tgetFontSizeObjectByValue,\n} from './utils';\nexport { default as FontSizePicker } from './font-size-picker';\nexport { default as withFontSizes } from './with-font-sizes';\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/font-sizes/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAKA;;AACA;;AACA","sourcesContent":["export {\n\tgetFontSize,\n\tgetFontSizeClass,\n\tgetFontSizeObjectByValue,\n} from './utils';\nexport { getComputedFluidTypographyValue } from './fluid-utils';\nexport { default as FontSizePicker } from './font-size-picker';\nexport { default as withFontSizes } from './with-font-sizes';\n"]}

package/build/hooks/font-size.js

@@ -22,6 +22,8 @@ var _tokenList = _interopRequireDefault(require("@wordpress/token-list"));
 
 var _compose = require("@wordpress/compose");
 
+var _data = require("@wordpress/data");
+
 var _fontSizes = require("../components/font-sizes");
 
 var _typography = require("./typography");
@@ -30,6 +32,8 @@ var _utils = require("./utils");
 
 var _useSetting = _interopRequireDefault(require("../components/use-setting"));
 
+var _store = require("../store");
+
 /**
  * WordPress dependencies
  */
@@ -278,10 +282,66 @@ function addTransforms(result, source, index, results) {
   };
   return (0, _utils.transformStyles)(activeSupports, MIGRATION_PATHS, result, source, index, results);
 }
+/**
+ * Allow custom font sizes to appear fluid when fluid typography is enabled at
+ * the theme level.
+ *
+ * Adds a custom getEditWrapperProps() callback to all block types that support
+ * font sizes. Then, if fluid typography is enabled, this callback will swap any
+ * custom font size in style.fontSize with a fluid font size (i.e. one that uses
+ * clamp()).
+ *
+ * It's important that this hook runs after 'core/style/addEditProps' sets
+ * style.fontSize as otherwise fontSize will be overwritten.
+ *
+ * @param {Object} blockType Block settings object.
+ */
+
+
+function addEditPropsForFluidCustomFontSizes(blockType) {
+  if (!(0, _blocks.hasBlockSupport)(blockType, FONT_SIZE_SUPPORT_KEY) || (0, _utils.shouldSkipSerialization)(blockType, _typography.TYPOGRAPHY_SUPPORT_KEY, 'fontSize')) {
+    return blockType;
+  }
+
+  const existingGetEditWrapperProps = blockType.getEditWrapperProps;
+
+  blockType.getEditWrapperProps = attributes => {
+    var _wrapperProps$style, _select$getSettings$_, _select$getSettings$_2;
+
+    const wrapperProps = existingGetEditWrapperProps ? existingGetEditWrapperProps(attributes) : {};
+    const fontSize = wrapperProps === null || wrapperProps === void 0 ? void 0 : (_wrapperProps$style = wrapperProps.style) === null || _wrapperProps$style === void 0 ? void 0 : _wrapperProps$style.fontSize; // TODO: This sucks! We should be using useSetting( 'typography.fluid' )
+    // or even useSelect( blockEditorStore ). We can't do either here
+    // because getEditWrapperProps is a plain JavaScript function called by
+    // BlockListBlock and not a React component rendered within
+    // BlockListContext.Provider. If we set fontSize using editor.
+    // BlockListBlock instead of using getEditWrapperProps then the value is
+    // clobbered when the core/style/addEditProps filter runs.
+
+    const isFluidTypographyEnabled = !!((_select$getSettings$_ = (0, _data.select)(_store.store).getSettings().__experimentalFeatures) !== null && _select$getSettings$_ !== void 0 && (_select$getSettings$_2 = _select$getSettings$_.typography) !== null && _select$getSettings$_2 !== void 0 && _select$getSettings$_2.fluid);
+    const newFontSize = fontSize && isFluidTypographyEnabled ? (0, _fontSizes.getComputedFluidTypographyValue)({
+      fontSize
+    }) : null;
+
+    if (newFontSize === null) {
+      return wrapperProps;
+    }
+
+    return { ...wrapperProps,
+      style: { ...(wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style),
+        fontSize: newFontSize
+      }
+    };
+  };
+
+  return blockType;
+}
 
 (0, _hooks.addFilter)('blocks.registerBlockType', 'core/font/addAttribute', addAttributes);
 (0, _hooks.addFilter)('blocks.getSaveContent.extraProps', 'core/font/addSaveProps', addSaveProps);
 (0, _hooks.addFilter)('blocks.registerBlockType', 'core/font/addEditProps', addEditProps);
 (0, _hooks.addFilter)('editor.BlockListBlock', 'core/font-size/with-font-size-inline-styles', withFontSizeInlineStyles);
 (0, _hooks.addFilter)('blocks.switchToBlockType.transformedBlock', 'core/font-size/addTransforms', addTransforms);
+(0, _hooks.addFilter)('blocks.registerBlockType', 'core/font-size/addEditPropsForFluidCustomFontSizes', addEditPropsForFluidCustomFontSizes, // Run after 'core/style/addEditProps' so that the style object has already
+// been translated into inline CSS.
+11);
 //# sourceMappingURL=font-size.js.map

package/build/hooks/font-size.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/font-size.js"],"names":["FONT_SIZE_SUPPORT_KEY","addAttributes","settings","attributes","fontSize","Object","assign","type","addSaveProps","props","blockType","TYPOGRAPHY_SUPPORT_KEY","classes","TokenList","className","add","newClassName","value","undefined","addEditProps","existingGetEditWrapperProps","getEditWrapperProps","FontSizeEdit","style","setAttributes","fontSizes","onChange","fontSizeSlug","slug","typography","fontSizeObject","fontSizeValue","size","hasFontSizeValue","resetFontSize","useIsFontSizeDisabled","name","blockName","hasFontSizes","length","withFontSizeInlineStyles","BlockListBlock","wrapperProps","newProps","MIGRATION_PATHS","addTransforms","result","source","index","results","destinationBlockType","activeSupports"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport TokenList from '@wordpress/token-list';\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetFontSize,\n\tgetFontSizeClass,\n\tgetFontSizeObjectByValue,\n\tFontSizePicker,\n} from '../components/font-sizes';\nimport { TYPOGRAPHY_SUPPORT_KEY } from './typography';\nimport {\n\tcleanEmptyObject,\n\ttransformStyles,\n\tshouldSkipSerialization,\n} from './utils';\nimport useSetting from '../components/use-setting';\n\nexport const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';\n\n/**\n * Filters registered block settings, extending attributes to include\n * `fontSize` and `fontWeight` attributes.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBlockSupport( settings, FONT_SIZE_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify a default value if needed.\n\tif ( ! settings.attributes.fontSize ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tfontSize: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override props assigned to save component to inject font size.\n *\n * @param {Object} props      Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nfunction addSaveProps( props, blockType, attributes ) {\n\tif ( ! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ) {\n\t\treturn props;\n\t}\n\n\tif (\n\t\tshouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' )\n\t) {\n\t\treturn props;\n\t}\n\n\t// Use TokenList to dedupe classes.\n\tconst classes = new TokenList( props.className );\n\tclasses.add( getFontSizeClass( attributes.fontSize ) );\n\tconst newClassName = classes.value;\n\tprops.className = newClassName ? newClassName : undefined;\n\n\treturn props;\n}\n\n/**\n * Filters registered block settings to expand the block edit wrapper\n * by applying the desired styles and classnames.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addEditProps( settings ) {\n\tif ( ! hasBlockSupport( settings, FONT_SIZE_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\tconst existingGetEditWrapperProps = settings.getEditWrapperProps;\n\tsettings.getEditWrapperProps = ( attributes ) => {\n\t\tlet props = {};\n\t\tif ( existingGetEditWrapperProps ) {\n\t\t\tprops = existingGetEditWrapperProps( attributes );\n\t\t}\n\t\treturn addSaveProps( props, settings, attributes );\n\t};\n\n\treturn settings;\n}\n\n/**\n * Inspector control panel containing the font size related configuration\n *\n * @param {Object} props\n *\n * @return {WPElement} Font size edit element.\n */\nexport function FontSizeEdit( props ) {\n\tconst {\n\t\tattributes: { fontSize, style },\n\t\tsetAttributes,\n\t} = props;\n\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\n\tconst onChange = ( value ) => {\n\t\tconst fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;\n\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( {\n\t\t\t\t...style,\n\t\t\t\ttypography: {\n\t\t\t\t\t...style?.typography,\n\t\t\t\t\tfontSize: fontSizeSlug ? undefined : value,\n\t\t\t\t},\n\t\t\t} ),\n\t\t\tfontSize: fontSizeSlug,\n\t\t} );\n\t};\n\n\tconst fontSizeObject = getFontSize(\n\t\tfontSizes,\n\t\tfontSize,\n\t\tstyle?.typography?.fontSize\n\t);\n\n\tconst fontSizeValue =\n\t\tfontSizeObject?.size || style?.typography?.fontSize || fontSize;\n\n\treturn (\n\t\t<FontSizePicker\n\t\t\tonChange={ onChange }\n\t\t\tvalue={ fontSizeValue }\n\t\t\twithReset={ false }\n\t\t\tsize=\"__unstable-large\"\n\t\t\t__nextHasNoMarginBottom\n\t\t/>\n\t);\n}\n\n/**\n * Checks if there is a current value set for the font size block support.\n *\n * @param {Object} props Block props.\n * @return {boolean}     Whether or not the block has a font size value set.\n */\nexport function hasFontSizeValue( props ) {\n\tconst { fontSize, style } = props.attributes;\n\treturn !! fontSize || !! style?.typography?.fontSize;\n}\n\n/**\n * Resets the font size block support attribute. This can be used when\n * disabling the font size support controls for a block via a progressive\n * discovery panel.\n *\n * @param {Object} props               Block props.\n * @param {Object} props.attributes    Block's attributes.\n * @param {Object} props.setAttributes Function to set block's attributes.\n */\nexport function resetFontSize( { attributes = {}, setAttributes } ) {\n\tconst { style } = attributes;\n\n\tsetAttributes( {\n\t\tfontSize: undefined,\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\ttypography: {\n\t\t\t\t...style?.typography,\n\t\t\t\tfontSize: undefined,\n\t\t\t},\n\t\t} ),\n\t} );\n}\n\n/**\n * Custom hook that checks if font-size settings have been disabled.\n *\n * @param {string} name The name of the block.\n * @return {boolean} Whether setting is disabled.\n */\nexport function useIsFontSizeDisabled( { name: blockName } = {} ) {\n\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\tconst hasFontSizes = !! fontSizes?.length;\n\n\treturn (\n\t\t! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) || ! hasFontSizes\n\t);\n}\n\n/**\n * Add inline styles for font sizes.\n * Ideally, this is not needed and themes load the font-size classes on the\n * editor.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nconst withFontSizeInlineStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\t\tconst {\n\t\t\tname: blockName,\n\t\t\tattributes: { fontSize, style },\n\t\t\twrapperProps,\n\t\t} = props;\n\n\t\t// Only add inline styles if the block supports font sizes,\n\t\t// doesn't skip serialization of font sizes,\n\t\t// doesn't already have an inline font size,\n\t\t// and does have a class to extract the font size from.\n\t\tif (\n\t\t\t! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) ||\n\t\t\tshouldSkipSerialization(\n\t\t\t\tblockName,\n\t\t\t\tTYPOGRAPHY_SUPPORT_KEY,\n\t\t\t\t'fontSize'\n\t\t\t) ||\n\t\t\t! fontSize ||\n\t\t\tstyle?.typography?.fontSize\n\t\t) {\n\t\t\treturn <BlockListBlock { ...props } />;\n\t\t}\n\n\t\tconst fontSizeValue = getFontSize(\n\t\t\tfontSizes,\n\t\t\tfontSize,\n\t\t\tstyle?.typography?.fontSize\n\t\t).size;\n\n\t\tconst newProps = {\n\t\t\t...props,\n\t\t\twrapperProps: {\n\t\t\t\t...wrapperProps,\n\t\t\t\tstyle: {\n\t\t\t\t\tfontSize: fontSizeValue,\n\t\t\t\t\t...wrapperProps?.style,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\n\t\treturn <BlockListBlock { ...newProps } />;\n\t},\n\t'withFontSizeInlineStyles'\n);\n\nconst MIGRATION_PATHS = {\n\tfontSize: [ [ 'fontSize' ], [ 'style', 'typography', 'fontSize' ] ],\n};\n\nexport function addTransforms( result, source, index, results ) {\n\tconst destinationBlockType = result.name;\n\tconst activeSupports = {\n\t\tfontSize: hasBlockSupport(\n\t\t\tdestinationBlockType,\n\t\t\tFONT_SIZE_SUPPORT_KEY\n\t\t),\n\t};\n\treturn transformStyles(\n\t\tactiveSupports,\n\t\tMIGRATION_PATHS,\n\t\tresult,\n\t\tsource,\n\t\tindex,\n\t\tresults\n\t);\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/font/addAttribute',\n\taddAttributes\n);\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/font/addSaveProps',\n\taddSaveProps\n);\n\naddFilter( 'blocks.registerBlockType', 'core/font/addEditProps', addEditProps );\n\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/font-size/with-font-size-inline-styles',\n\twithFontSizeInlineStyles\n);\n\naddFilter(\n\t'blocks.switchToBlockType.transformedBlock',\n\t'core/font-size/addTransforms',\n\taddTransforms\n);\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/font-size.js"],"names":["FONT_SIZE_SUPPORT_KEY","addAttributes","settings","attributes","fontSize","Object","assign","type","addSaveProps","props","blockType","TYPOGRAPHY_SUPPORT_KEY","classes","TokenList","className","add","newClassName","value","undefined","addEditProps","existingGetEditWrapperProps","getEditWrapperProps","FontSizeEdit","style","setAttributes","fontSizes","onChange","fontSizeSlug","slug","typography","fontSizeObject","fontSizeValue","size","hasFontSizeValue","resetFontSize","useIsFontSizeDisabled","name","blockName","hasFontSizes","length","withFontSizeInlineStyles","BlockListBlock","wrapperProps","newProps","MIGRATION_PATHS","addTransforms","result","source","index","results","destinationBlockType","activeSupports","addEditPropsForFluidCustomFontSizes","isFluidTypographyEnabled","blockEditorStore","getSettings","__experimentalFeatures","fluid","newFontSize"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport TokenList from '@wordpress/token-list';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { select } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetFontSize,\n\tgetFontSizeClass,\n\tgetFontSizeObjectByValue,\n\tFontSizePicker,\n\tgetComputedFluidTypographyValue,\n} from '../components/font-sizes';\nimport { TYPOGRAPHY_SUPPORT_KEY } from './typography';\nimport {\n\tcleanEmptyObject,\n\ttransformStyles,\n\tshouldSkipSerialization,\n} from './utils';\nimport useSetting from '../components/use-setting';\nimport { store as blockEditorStore } from '../store';\n\nexport const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';\n\n/**\n * Filters registered block settings, extending attributes to include\n * `fontSize` and `fontWeight` attributes.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBlockSupport( settings, FONT_SIZE_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify a default value if needed.\n\tif ( ! settings.attributes.fontSize ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tfontSize: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override props assigned to save component to inject font size.\n *\n * @param {Object} props      Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nfunction addSaveProps( props, blockType, attributes ) {\n\tif ( ! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ) {\n\t\treturn props;\n\t}\n\n\tif (\n\t\tshouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' )\n\t) {\n\t\treturn props;\n\t}\n\n\t// Use TokenList to dedupe classes.\n\tconst classes = new TokenList( props.className );\n\tclasses.add( getFontSizeClass( attributes.fontSize ) );\n\tconst newClassName = classes.value;\n\tprops.className = newClassName ? newClassName : undefined;\n\n\treturn props;\n}\n\n/**\n * Filters registered block settings to expand the block edit wrapper\n * by applying the desired styles and classnames.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addEditProps( settings ) {\n\tif ( ! hasBlockSupport( settings, FONT_SIZE_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\tconst existingGetEditWrapperProps = settings.getEditWrapperProps;\n\tsettings.getEditWrapperProps = ( attributes ) => {\n\t\tlet props = {};\n\t\tif ( existingGetEditWrapperProps ) {\n\t\t\tprops = existingGetEditWrapperProps( attributes );\n\t\t}\n\t\treturn addSaveProps( props, settings, attributes );\n\t};\n\n\treturn settings;\n}\n\n/**\n * Inspector control panel containing the font size related configuration\n *\n * @param {Object} props\n *\n * @return {WPElement} Font size edit element.\n */\nexport function FontSizeEdit( props ) {\n\tconst {\n\t\tattributes: { fontSize, style },\n\t\tsetAttributes,\n\t} = props;\n\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\n\tconst onChange = ( value ) => {\n\t\tconst fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;\n\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( {\n\t\t\t\t...style,\n\t\t\t\ttypography: {\n\t\t\t\t\t...style?.typography,\n\t\t\t\t\tfontSize: fontSizeSlug ? undefined : value,\n\t\t\t\t},\n\t\t\t} ),\n\t\t\tfontSize: fontSizeSlug,\n\t\t} );\n\t};\n\n\tconst fontSizeObject = getFontSize(\n\t\tfontSizes,\n\t\tfontSize,\n\t\tstyle?.typography?.fontSize\n\t);\n\n\tconst fontSizeValue =\n\t\tfontSizeObject?.size || style?.typography?.fontSize || fontSize;\n\n\treturn (\n\t\t<FontSizePicker\n\t\t\tonChange={ onChange }\n\t\t\tvalue={ fontSizeValue }\n\t\t\twithReset={ false }\n\t\t\tsize=\"__unstable-large\"\n\t\t\t__nextHasNoMarginBottom\n\t\t/>\n\t);\n}\n\n/**\n * Checks if there is a current value set for the font size block support.\n *\n * @param {Object} props Block props.\n * @return {boolean}     Whether or not the block has a font size value set.\n */\nexport function hasFontSizeValue( props ) {\n\tconst { fontSize, style } = props.attributes;\n\treturn !! fontSize || !! style?.typography?.fontSize;\n}\n\n/**\n * Resets the font size block support attribute. This can be used when\n * disabling the font size support controls for a block via a progressive\n * discovery panel.\n *\n * @param {Object} props               Block props.\n * @param {Object} props.attributes    Block's attributes.\n * @param {Object} props.setAttributes Function to set block's attributes.\n */\nexport function resetFontSize( { attributes = {}, setAttributes } ) {\n\tconst { style } = attributes;\n\n\tsetAttributes( {\n\t\tfontSize: undefined,\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\ttypography: {\n\t\t\t\t...style?.typography,\n\t\t\t\tfontSize: undefined,\n\t\t\t},\n\t\t} ),\n\t} );\n}\n\n/**\n * Custom hook that checks if font-size settings have been disabled.\n *\n * @param {string} name The name of the block.\n * @return {boolean} Whether setting is disabled.\n */\nexport function useIsFontSizeDisabled( { name: blockName } = {} ) {\n\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\tconst hasFontSizes = !! fontSizes?.length;\n\n\treturn (\n\t\t! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) || ! hasFontSizes\n\t);\n}\n\n/**\n * Add inline styles for font sizes.\n * Ideally, this is not needed and themes load the font-size classes on the\n * editor.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nconst withFontSizeInlineStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst fontSizes = useSetting( 'typography.fontSizes' );\n\t\tconst {\n\t\t\tname: blockName,\n\t\t\tattributes: { fontSize, style },\n\t\t\twrapperProps,\n\t\t} = props;\n\n\t\t// Only add inline styles if the block supports font sizes,\n\t\t// doesn't skip serialization of font sizes,\n\t\t// doesn't already have an inline font size,\n\t\t// and does have a class to extract the font size from.\n\t\tif (\n\t\t\t! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) ||\n\t\t\tshouldSkipSerialization(\n\t\t\t\tblockName,\n\t\t\t\tTYPOGRAPHY_SUPPORT_KEY,\n\t\t\t\t'fontSize'\n\t\t\t) ||\n\t\t\t! fontSize ||\n\t\t\tstyle?.typography?.fontSize\n\t\t) {\n\t\t\treturn <BlockListBlock { ...props } />;\n\t\t}\n\n\t\tconst fontSizeValue = getFontSize(\n\t\t\tfontSizes,\n\t\t\tfontSize,\n\t\t\tstyle?.typography?.fontSize\n\t\t).size;\n\n\t\tconst newProps = {\n\t\t\t...props,\n\t\t\twrapperProps: {\n\t\t\t\t...wrapperProps,\n\t\t\t\tstyle: {\n\t\t\t\t\tfontSize: fontSizeValue,\n\t\t\t\t\t...wrapperProps?.style,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\n\t\treturn <BlockListBlock { ...newProps } />;\n\t},\n\t'withFontSizeInlineStyles'\n);\n\nconst MIGRATION_PATHS = {\n\tfontSize: [ [ 'fontSize' ], [ 'style', 'typography', 'fontSize' ] ],\n};\n\nexport function addTransforms( result, source, index, results ) {\n\tconst destinationBlockType = result.name;\n\tconst activeSupports = {\n\t\tfontSize: hasBlockSupport(\n\t\t\tdestinationBlockType,\n\t\t\tFONT_SIZE_SUPPORT_KEY\n\t\t),\n\t};\n\treturn transformStyles(\n\t\tactiveSupports,\n\t\tMIGRATION_PATHS,\n\t\tresult,\n\t\tsource,\n\t\tindex,\n\t\tresults\n\t);\n}\n\n/**\n * Allow custom font sizes to appear fluid when fluid typography is enabled at\n * the theme level.\n *\n * Adds a custom getEditWrapperProps() callback to all block types that support\n * font sizes. Then, if fluid typography is enabled, this callback will swap any\n * custom font size in style.fontSize with a fluid font size (i.e. one that uses\n * clamp()).\n *\n * It's important that this hook runs after 'core/style/addEditProps' sets\n * style.fontSize as otherwise fontSize will be overwritten.\n *\n * @param {Object} blockType Block settings object.\n */\nfunction addEditPropsForFluidCustomFontSizes( blockType ) {\n\tif (\n\t\t! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ||\n\t\tshouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' )\n\t) {\n\t\treturn blockType;\n\t}\n\n\tconst existingGetEditWrapperProps = blockType.getEditWrapperProps;\n\n\tblockType.getEditWrapperProps = ( attributes ) => {\n\t\tconst wrapperProps = existingGetEditWrapperProps\n\t\t\t? existingGetEditWrapperProps( attributes )\n\t\t\t: {};\n\n\t\tconst fontSize = wrapperProps?.style?.fontSize;\n\n\t\t// TODO: This sucks! We should be using useSetting( 'typography.fluid' )\n\t\t// or even useSelect( blockEditorStore ). We can't do either here\n\t\t// because getEditWrapperProps is a plain JavaScript function called by\n\t\t// BlockListBlock and not a React component rendered within\n\t\t// BlockListContext.Provider. If we set fontSize using editor.\n\t\t// BlockListBlock instead of using getEditWrapperProps then the value is\n\t\t// clobbered when the core/style/addEditProps filter runs.\n\t\tconst isFluidTypographyEnabled =\n\t\t\t!! select( blockEditorStore ).getSettings().__experimentalFeatures\n\t\t\t\t?.typography?.fluid;\n\n\t\tconst newFontSize =\n\t\t\tfontSize && isFluidTypographyEnabled\n\t\t\t\t? getComputedFluidTypographyValue( { fontSize } )\n\t\t\t\t: null;\n\n\t\tif ( newFontSize === null ) {\n\t\t\treturn wrapperProps;\n\t\t}\n\n\t\treturn {\n\t\t\t...wrapperProps,\n\t\t\tstyle: {\n\t\t\t\t...wrapperProps?.style,\n\t\t\t\tfontSize: newFontSize,\n\t\t\t},\n\t\t};\n\t};\n\n\treturn blockType;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/font/addAttribute',\n\taddAttributes\n);\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/font/addSaveProps',\n\taddSaveProps\n);\n\naddFilter( 'blocks.registerBlockType', 'core/font/addEditProps', addEditProps );\n\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/font-size/with-font-size-inline-styles',\n\twithFontSizeInlineStyles\n);\n\naddFilter(\n\t'blocks.switchToBlockType.transformedBlock',\n\t'core/font-size/addTransforms',\n\taddTransforms\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/font-size/addEditPropsForFluidCustomFontSizes',\n\taddEditPropsForFluidCustomFontSizes,\n\t// Run after 'core/style/addEditProps' so that the style object has already\n\t// been translated into inline CSS.\n\t11\n);\n"]}

package/build/hooks/use-typography-props.js

@@ -15,6 +15,8 @@ var _style = require("./style");
 
 var _fontSizes = require("../components/font-sizes");
 
+var _fluidUtils = require("../components/font-sizes/fluid-utils");
+
 /**
  * External dependencies
  */
@@ -30,14 +32,26 @@ var _fontSizes = require("../components/font-sizes");
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object} attributes Block attributes.
+ * @param {Object}  attributes            Block attributes.
+ * @param {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values.
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
-function getTypographyClassesAndStyles(attributes) {
+function getTypographyClassesAndStyles(attributes, isFluidFontSizeActive) {
   var _attributes$style;
 
-  const typographyStyles = (attributes === null || attributes === void 0 ? void 0 : (_attributes$style = attributes.style) === null || _attributes$style === void 0 ? void 0 : _attributes$style.typography) || {};
+  let typographyStyles = (attributes === null || attributes === void 0 ? void 0 : (_attributes$style = attributes.style) === null || _attributes$style === void 0 ? void 0 : _attributes$style.typography) || {};
+
+  if (isFluidFontSizeActive) {
+    var _attributes$style2, _attributes$style2$ty;
+
+    typographyStyles = { ...typographyStyles,
+      fontSize: (0, _fluidUtils.getComputedFluidTypographyValue)({
+        fontSize: attributes === null || attributes === void 0 ? void 0 : (_attributes$style2 = attributes.style) === null || _attributes$style2 === void 0 ? void 0 : (_attributes$style2$ty = _attributes$style2.typography) === null || _attributes$style2$ty === void 0 ? void 0 : _attributes$style2$ty.fontSize
+      })
+    };
+  }
+
   const style = (0, _style.getInlineStyles)({
     typography: typographyStyles
   });

package/build/hooks/use-typography-props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/use-typography-props.js"],"names":["getTypographyClassesAndStyles","attributes","typographyStyles","style","typography","fontFamilyClassName","fontFamily","className","fontSize"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAIA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,6BAAT,CAAwCC,UAAxC,EAAqD;AAAA;;AAC3D,QAAMC,gBAAgB,GAAG,CAAAD,UAAU,SAAV,IAAAA,UAAU,WAAV,iCAAAA,UAAU,CAAEE,KAAZ,wEAAmBC,UAAnB,KAAiC,EAA1D;AACA,QAAMD,KAAK,GAAG,4BAAiB;AAAEC,IAAAA,UAAU,EAAEF;AAAd,GAAjB,CAAd;AACA,QAAMG,mBAAmB,GAAG,CAAC,EAAEJ,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEK,UAAd,CAAD,GACxB,OAAO,uBAAWL,UAAU,CAACK,UAAtB,CAAoC,cADnB,GAEzB,EAFH;AAIA,QAAMC,SAAS,GAAG,yBACjBF,mBADiB,EAEjB,iCAAkBJ,UAAlB,aAAkBA,UAAlB,uBAAkBA,UAAU,CAAEO,QAA9B,CAFiB,CAAlB;AAKA,SAAO;AACND,IAAAA,SADM;AAENJ,IAAAA;AAFM,GAAP;AAIA","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { getInlineStyles } from './style';\nimport { getFontSizeClass } from '../components/font-sizes';\n\n// This utility is intended to assist where the serialization of the typography\n// block support is being skipped for a block but the typography related CSS\n// styles still need to be generated so they can be applied to inner elements.\n\n/**\n * Provides the CSS class names and inline styles for a block's typography support\n * attributes.\n *\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} Typography block support derived CSS classes & styles.\n */\nexport function getTypographyClassesAndStyles( attributes ) {\n\tconst typographyStyles = attributes?.style?.typography || {};\n\tconst style = getInlineStyles( { typography: typographyStyles } );\n\tconst fontFamilyClassName = !! attributes?.fontFamily\n\t\t? `has-${ kebabCase( attributes.fontFamily ) }-font-family`\n\t\t: '';\n\n\tconst className = classnames(\n\t\tfontFamilyClassName,\n\t\tgetFontSizeClass( attributes?.fontSize )\n\t);\n\n\treturn {\n\t\tclassName,\n\t\tstyle,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/use-typography-props.js"],"names":["getTypographyClassesAndStyles","attributes","isFluidFontSizeActive","typographyStyles","style","typography","fontSize","fontFamilyClassName","fontFamily","className"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AAXA;AACA;AACA;;AAIA;AACA;AACA;AAKA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,6BAAT,CACNC,UADM,EAENC,qBAFM,EAGL;AAAA;;AACD,MAAIC,gBAAgB,GAAG,CAAAF,UAAU,SAAV,IAAAA,UAAU,WAAV,iCAAAA,UAAU,CAAEG,KAAZ,wEAAmBC,UAAnB,KAAiC,EAAxD;;AAEA,MAAKH,qBAAL,EAA6B;AAAA;;AAC5BC,IAAAA,gBAAgB,GAAG,EAClB,GAAGA,gBADe;AAElBG,MAAAA,QAAQ,EAAE,iDAAiC;AAC1CA,QAAAA,QAAQ,EAAEL,UAAF,aAAEA,UAAF,6CAAEA,UAAU,CAAEG,KAAd,gFAAE,mBAAmBC,UAArB,0DAAE,sBAA+BC;AADC,OAAjC;AAFQ,KAAnB;AAMA;;AAED,QAAMF,KAAK,GAAG,4BAAiB;AAAEC,IAAAA,UAAU,EAAEF;AAAd,GAAjB,CAAd;AACA,QAAMI,mBAAmB,GAAG,CAAC,EAAEN,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEO,UAAd,CAAD,GACxB,OAAO,uBAAWP,UAAU,CAACO,UAAtB,CAAoC,cADnB,GAEzB,EAFH;AAIA,QAAMC,SAAS,GAAG,yBACjBF,mBADiB,EAEjB,iCAAkBN,UAAlB,aAAkBA,UAAlB,uBAAkBA,UAAU,CAAEK,QAA9B,CAFiB,CAAlB;AAKA,SAAO;AACNG,IAAAA,SADM;AAENL,IAAAA;AAFM,GAAP;AAIA","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { getInlineStyles } from './style';\nimport { getFontSizeClass } from '../components/font-sizes';\nimport { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils';\n\n// This utility is intended to assist where the serialization of the typography\n// block support is being skipped for a block but the typography related CSS\n// styles still need to be generated so they can be applied to inner elements.\n\n/**\n * Provides the CSS class names and inline styles for a block's typography support\n * attributes.\n *\n * @param {Object}  attributes            Block attributes.\n * @param {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values.\n *\n * @return {Object} Typography block support derived CSS classes & styles.\n */\nexport function getTypographyClassesAndStyles(\n\tattributes,\n\tisFluidFontSizeActive\n) {\n\tlet typographyStyles = attributes?.style?.typography || {};\n\n\tif ( isFluidFontSizeActive ) {\n\t\ttypographyStyles = {\n\t\t\t...typographyStyles,\n\t\t\tfontSize: getComputedFluidTypographyValue( {\n\t\t\t\tfontSize: attributes?.style?.typography?.fontSize,\n\t\t\t} ),\n\t\t};\n\t}\n\n\tconst style = getInlineStyles( { typography: typographyStyles } );\n\tconst fontFamilyClassName = !! attributes?.fontFamily\n\t\t? `has-${ kebabCase( attributes.fontFamily ) }-font-family`\n\t\t: '';\n\n\tconst className = classnames(\n\t\tfontFamilyClassName,\n\t\tgetFontSizeClass( attributes?.fontSize )\n\t);\n\n\treturn {\n\t\tclassName,\n\t\tstyle,\n\t};\n}\n"]}