@wordpress/block-editor 13.2.0 → 13.4.0

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

@@ -3,9 +3,14 @@
 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
@@ -106,4 +111,120 @@ function getFluidTypographyOptionsFromSettings(settings) {
     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) {
+  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 === fontWeight);
+  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

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

@@ -1 +1 @@
-{"version":3,"names":["_fluidUtils","require","getTypographyFontSizeValue","preset","settings","size","defaultSize","isFluidTypographyEnabled","typography","fluid","fluidTypographySettings","getFluidTypographyOptionsFromSettings","fluidFontSizeValue","getComputedFluidTypographyValue","minimumFontSize","min","maximumFontSize","max","fontSize","minimumFontSizeLimit","minFontSize","maximumViewportWidth","maxViewportWidth","minimumViewportWidth","minViewportWidth","typographySettings","fluidSettings","Object","keys","length","layoutSettings","layout","defaultMaxViewportWidth","getTypographyValueAndUnit","wideSize"],"sources":["@wordpress/block-editor/src/components/global-styles/typography-utils.js"],"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 * Internal dependencies\n */\nimport {\n\tgetComputedFluidTypographyValue,\n\tgetTypographyValueAndUnit,\n} from '../font-sizes/fluid-utils';\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 Specifies the minimum and maximum font size value of a fluid font size.\n */\n\n/**\n * @typedef {Object} TypographySettings\n * @property {?string} minViewportWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.\n * @property {?string} maxViewportWidth  Maximum size up to which type will have fluidity. Optional if size is specified.\n * @property {?number} scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.\n * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.\n * @property {?string} minFontSize       The smallest a calculated font size may be. Optional.\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}                     settings\n * @param {boolean|TypographySettings} settings.typography.fluid  Whether fluid typography is enabled, and, optionally, fluid font size options.\n * @param {Object?}                    settings.typography.layout Layout options.\n *\n * @return {string|*} A font-size value or the value of preset.size.\n */\nexport function getTypographyFontSizeValue( preset, settings ) {\n\tconst { size: defaultSize } = preset;\n\n\tif ( ! isFluidTypographyEnabled( settings?.typography ) ) {\n\t\treturn defaultSize;\n\t}\n\t/*\n\t * Checks whether a font size has explicitly bypassed fluid calculations.\n\t * Also catches falsy values and 0/'0'.\n\t * Fluid calculations cannot be performed on `0`.\n\t */\n\tif ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\tlet fluidTypographySettings =\n\t\tgetFluidTypographyOptionsFromSettings( settings );\n\tfluidTypographySettings =\n\t\ttypeof fluidTypographySettings?.fluid === 'object'\n\t\t\t? fluidTypographySettings?.fluid\n\t\t\t: {};\n\n\tconst fluidFontSizeValue = getComputedFluidTypographyValue( {\n\t\tminimumFontSize: preset?.fluid?.min,\n\t\tmaximumFontSize: preset?.fluid?.max,\n\t\tfontSize: defaultSize,\n\t\tminimumFontSizeLimit: fluidTypographySettings?.minFontSize,\n\t\tmaximumViewportWidth: fluidTypographySettings?.maxViewportWidth,\n\t\tminimumViewportWidth: fluidTypographySettings?.minViewportWidth,\n\t} );\n\n\tif ( !! fluidFontSizeValue ) {\n\t\treturn fluidFontSizeValue;\n\t}\n\n\treturn defaultSize;\n}\n\nfunction isFluidTypographyEnabled( typographySettings ) {\n\tconst fluidSettings = typographySettings?.fluid;\n\treturn (\n\t\ttrue === fluidSettings ||\n\t\t( fluidSettings &&\n\t\t\ttypeof fluidSettings === 'object' &&\n\t\t\tObject.keys( fluidSettings ).length > 0 )\n\t);\n}\n\n/**\n * Returns fluid typography settings from theme.json setting object.\n *\n * @param {Object} settings            Theme.json settings\n * @param {Object} settings.typography Theme.json typography settings\n * @param {Object} settings.layout     Theme.json layout settings\n * @return {TypographySettings} Fluid typography settings\n */\nexport function getFluidTypographyOptionsFromSettings( settings ) {\n\tconst typographySettings = settings?.typography;\n\tconst layoutSettings = settings?.layout;\n\tconst defaultMaxViewportWidth = getTypographyValueAndUnit(\n\t\tlayoutSettings?.wideSize\n\t)\n\t\t? layoutSettings?.wideSize\n\t\t: null;\n\treturn isFluidTypographyEnabled( typographySettings ) &&\n\t\tdefaultMaxViewportWidth\n\t\t? {\n\t\t\t\tfluid: {\n\t\t\t\t\tmaxViewportWidth: defaultMaxViewportWidth,\n\t\t\t\t\t...typographySettings.fluid,\n\t\t\t\t},\n\t\t  }\n\t\t: {\n\t\t\t\tfluid: typographySettings?.fluid,\n\t\t  };\n}\n"],"mappings":";;;;;;;AASA,IAAAA,WAAA,GAAAC,OAAA;AATA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,0BAA0BA,CAAEC,MAAM,EAAEC,QAAQ,EAAG;EAC9D,MAAM;IAAEC,IAAI,EAAEC;EAAY,CAAC,GAAGH,MAAM;EAEpC,IAAK,CAAEI,wBAAwB,CAAEH,QAAQ,EAAEI,UAAW,CAAC,EAAG;IACzD,OAAOF,WAAW;EACnB;EACA;AACD;AACA;AACA;AACA;EACC,IAAK,CAAEA,WAAW,IAAI,GAAG,KAAKA,WAAW,IAAI,KAAK,KAAKH,MAAM,EAAEM,KAAK,EAAG;IACtE,OAAOH,WAAW;EACnB;EAEA,IAAII,uBAAuB,GAC1BC,qCAAqC,CAAEP,QAAS,CAAC;EAClDM,uBAAuB,GACtB,OAAOA,uBAAuB,EAAED,KAAK,KAAK,QAAQ,GAC/CC,uBAAuB,EAAED,KAAK,GAC9B,CAAC,CAAC;EAEN,MAAMG,kBAAkB,GAAG,IAAAC,2CAA+B,EAAE;IAC3DC,eAAe,EAAEX,MAAM,EAAEM,KAAK,EAAEM,GAAG;IACnCC,eAAe,EAAEb,MAAM,EAAEM,KAAK,EAAEQ,GAAG;IACnCC,QAAQ,EAAEZ,WAAW;IACrBa,oBAAoB,EAAET,uBAAuB,EAAEU,WAAW;IAC1DC,oBAAoB,EAAEX,uBAAuB,EAAEY,gBAAgB;IAC/DC,oBAAoB,EAAEb,uBAAuB,EAAEc;EAChD,CAAE,CAAC;EAEH,IAAK,CAAC,CAAEZ,kBAAkB,EAAG;IAC5B,OAAOA,kBAAkB;EAC1B;EAEA,OAAON,WAAW;AACnB;AAEA,SAASC,wBAAwBA,CAAEkB,kBAAkB,EAAG;EACvD,MAAMC,aAAa,GAAGD,kBAAkB,EAAEhB,KAAK;EAC/C,OACC,IAAI,KAAKiB,aAAa,IACpBA,aAAa,IACd,OAAOA,aAAa,KAAK,QAAQ,IACjCC,MAAM,CAACC,IAAI,CAAEF,aAAc,CAAC,CAACG,MAAM,GAAG,CAAG;AAE5C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASlB,qCAAqCA,CAAEP,QAAQ,EAAG;EACjE,MAAMqB,kBAAkB,GAAGrB,QAAQ,EAAEI,UAAU;EAC/C,MAAMsB,cAAc,GAAG1B,QAAQ,EAAE2B,MAAM;EACvC,MAAMC,uBAAuB,GAAG,IAAAC,qCAAyB,EACxDH,cAAc,EAAEI,QACjB,CAAC,GACEJ,cAAc,EAAEI,QAAQ,GACxB,IAAI;EACP,OAAO3B,wBAAwB,CAAEkB,kBAAmB,CAAC,IACpDO,uBAAuB,GACrB;IACAvB,KAAK,EAAE;MACNa,gBAAgB,EAAEU,uBAAuB;MACzC,GAAGP,kBAAkB,CAAChB;IACvB;EACA,CAAC,GACD;IACAA,KAAK,EAAEgB,kBAAkB,EAAEhB;EAC3B,CAAC;AACL","ignoreList":[]}
+{"version":3,"names":["_fluidUtils","require","_getFontStylesAndWeights","getTypographyFontSizeValue","preset","settings","size","defaultSize","isFluidTypographyEnabled","typography","fluid","fluidTypographySettings","getFluidTypographyOptionsFromSettings","fluidFontSizeValue","getComputedFluidTypographyValue","minimumFontSize","min","maximumFontSize","max","fontSize","minimumFontSizeLimit","minFontSize","maximumViewportWidth","maxViewportWidth","minimumViewportWidth","minViewportWidth","typographySettings","fluidSettings","Object","keys","length","layoutSettings","layout","defaultMaxViewportWidth","getTypographyValueAndUnit","wideSize","getMergedFontFamiliesAndFontFamilyFaces","selectedFontFamily","_fontFamilies$find$fo","fontFamiliesFromSettings","fontFamilies","flatMap","key","_fontFamiliesFromSett","fontFamilyFaces","find","family","fontFamily","fontFace","findNearestFontWeight","availableFontWeights","newFontWeightValue","nearestFontWeight","reduce","nearest","value","fw","currentDiff","Math","abs","parseInt","nearestDiff","findNearestFontStyle","availableFontStyles","newFontStyleValue","validStyles","includes","style","findNearestStyleAndWeight","fontStyle","fontWeight","nearestFontStyle","fontStyles","fontWeights","combinedStyleAndWeightOptions","getFontStylesAndWeights","hasFontStyle","some","fs","hasFontWeight","option"],"sources":["@wordpress/block-editor/src/components/global-styles/typography-utils.js"],"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 * Internal dependencies\n */\nimport {\n\tgetComputedFluidTypographyValue,\n\tgetTypographyValueAndUnit,\n} from '../font-sizes/fluid-utils';\nimport { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';\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 Specifies the minimum and maximum font size value of a fluid font size.\n */\n\n/**\n * @typedef {Object} TypographySettings\n * @property {?string} minViewportWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.\n * @property {?string} maxViewportWidth  Maximum size up to which type will have fluidity. Optional if size is specified.\n * @property {?number} scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.\n * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.\n * @property {?string} minFontSize       The smallest a calculated font size may be. Optional.\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}                     settings\n * @param {boolean|TypographySettings} settings.typography.fluid  Whether fluid typography is enabled, and, optionally, fluid font size options.\n * @param {Object?}                    settings.typography.layout Layout options.\n *\n * @return {string|*} A font-size value or the value of preset.size.\n */\nexport function getTypographyFontSizeValue( preset, settings ) {\n\tconst { size: defaultSize } = preset;\n\n\tif ( ! isFluidTypographyEnabled( settings?.typography ) ) {\n\t\treturn defaultSize;\n\t}\n\t/*\n\t * Checks whether a font size has explicitly bypassed fluid calculations.\n\t * Also catches falsy values and 0/'0'.\n\t * Fluid calculations cannot be performed on `0`.\n\t */\n\tif ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\tlet fluidTypographySettings =\n\t\tgetFluidTypographyOptionsFromSettings( settings );\n\tfluidTypographySettings =\n\t\ttypeof fluidTypographySettings?.fluid === 'object'\n\t\t\t? fluidTypographySettings?.fluid\n\t\t\t: {};\n\n\tconst fluidFontSizeValue = getComputedFluidTypographyValue( {\n\t\tminimumFontSize: preset?.fluid?.min,\n\t\tmaximumFontSize: preset?.fluid?.max,\n\t\tfontSize: defaultSize,\n\t\tminimumFontSizeLimit: fluidTypographySettings?.minFontSize,\n\t\tmaximumViewportWidth: fluidTypographySettings?.maxViewportWidth,\n\t\tminimumViewportWidth: fluidTypographySettings?.minViewportWidth,\n\t} );\n\n\tif ( !! fluidFontSizeValue ) {\n\t\treturn fluidFontSizeValue;\n\t}\n\n\treturn defaultSize;\n}\n\nfunction isFluidTypographyEnabled( typographySettings ) {\n\tconst fluidSettings = typographySettings?.fluid;\n\treturn (\n\t\ttrue === fluidSettings ||\n\t\t( fluidSettings &&\n\t\t\ttypeof fluidSettings === 'object' &&\n\t\t\tObject.keys( fluidSettings ).length > 0 )\n\t);\n}\n\n/**\n * Returns fluid typography settings from theme.json setting object.\n *\n * @param {Object} settings            Theme.json settings\n * @param {Object} settings.typography Theme.json typography settings\n * @param {Object} settings.layout     Theme.json layout settings\n * @return {TypographySettings} Fluid typography settings\n */\nexport function getFluidTypographyOptionsFromSettings( settings ) {\n\tconst typographySettings = settings?.typography;\n\tconst layoutSettings = settings?.layout;\n\tconst defaultMaxViewportWidth = getTypographyValueAndUnit(\n\t\tlayoutSettings?.wideSize\n\t)\n\t\t? layoutSettings?.wideSize\n\t\t: null;\n\treturn isFluidTypographyEnabled( typographySettings ) &&\n\t\tdefaultMaxViewportWidth\n\t\t? {\n\t\t\t\tfluid: {\n\t\t\t\t\tmaxViewportWidth: defaultMaxViewportWidth,\n\t\t\t\t\t...typographySettings.fluid,\n\t\t\t\t},\n\t\t  }\n\t\t: {\n\t\t\t\tfluid: typographySettings?.fluid,\n\t\t  };\n}\n\n/**\n * Returns an object of merged font families and the font faces from the selected font family\n * based on the theme.json settings object and the currently selected font family.\n *\n * @param {Object} settings           Theme.json settings.\n * @param {string} selectedFontFamily Decoded font family string.\n * @return {Object} Merged font families and font faces from the selected font family.\n */\nexport function getMergedFontFamiliesAndFontFamilyFaces(\n\tsettings,\n\tselectedFontFamily\n) {\n\tconst fontFamiliesFromSettings = settings?.typography?.fontFamilies;\n\n\tconst fontFamilies = [ 'default', 'theme', 'custom' ].flatMap(\n\t\t( key ) => fontFamiliesFromSettings?.[ key ] ?? []\n\t);\n\n\tconst fontFamilyFaces =\n\t\tfontFamilies.find(\n\t\t\t( family ) => family.fontFamily === selectedFontFamily\n\t\t)?.fontFace ?? [];\n\n\treturn { fontFamilies, fontFamilyFaces };\n}\n\n/**\n * Returns the nearest font weight value from the available font weight list based on the new font weight.\n * The nearest font weight is the one with the smallest difference from the new font weight.\n *\n * @param {Array}  availableFontWeights Array of available font weights.\n * @param {string} newFontWeightValue   New font weight value.\n * @return {string} Nearest font weight.\n */\nexport function findNearestFontWeight(\n\tavailableFontWeights,\n\tnewFontWeightValue\n) {\n\tif ( ! newFontWeightValue || typeof newFontWeightValue !== 'string' ) {\n\t\treturn '';\n\t}\n\n\tif ( ! availableFontWeights || availableFontWeights.length === 0 ) {\n\t\treturn newFontWeightValue;\n\t}\n\n\tconst nearestFontWeight = availableFontWeights?.reduce(\n\t\t( nearest, { value: fw } ) => {\n\t\t\tconst currentDiff = Math.abs(\n\t\t\t\tparseInt( fw ) - parseInt( newFontWeightValue )\n\t\t\t);\n\t\t\tconst nearestDiff = Math.abs(\n\t\t\t\tparseInt( nearest ) - parseInt( newFontWeightValue )\n\t\t\t);\n\t\t\treturn currentDiff < nearestDiff ? fw : nearest;\n\t\t},\n\t\tavailableFontWeights[ 0 ]?.value\n\t);\n\n\treturn nearestFontWeight;\n}\n\n/**\n * Returns the nearest font style based on the new font style.\n * Defaults to an empty string if the new font style is not valid or available.\n *\n * @param {Array}  availableFontStyles Array of available font weights.\n * @param {string} newFontStyleValue   New font style value.\n * @return {string} Nearest font style or an empty string.\n */\nexport function findNearestFontStyle( availableFontStyles, newFontStyleValue ) {\n\tif ( typeof newFontStyleValue !== 'string' || ! newFontStyleValue ) {\n\t\treturn '';\n\t}\n\n\tconst validStyles = [ 'normal', 'italic', 'oblique' ];\n\tif ( ! validStyles.includes( newFontStyleValue ) ) {\n\t\treturn '';\n\t}\n\n\tif (\n\t\t! availableFontStyles ||\n\t\tavailableFontStyles.length === 0 ||\n\t\tavailableFontStyles.find(\n\t\t\t( style ) => style.value === newFontStyleValue\n\t\t)\n\t) {\n\t\treturn newFontStyleValue;\n\t}\n\n\tif (\n\t\tnewFontStyleValue === 'oblique' &&\n\t\t! availableFontStyles.find( ( style ) => style.value === 'oblique' )\n\t) {\n\t\treturn 'italic';\n\t}\n\n\treturn '';\n}\n\n/**\n * Returns the nearest font style and weight based on the available font family faces and the new font style and weight.\n *\n * @param {Array}  fontFamilyFaces Array of available font family faces.\n * @param {string} fontStyle       New font style. Defaults to previous value.\n * @param {string} fontWeight      New font weight. Defaults to previous value.\n * @return {Object} Nearest font style and font weight.\n */\nexport function findNearestStyleAndWeight(\n\tfontFamilyFaces,\n\tfontStyle,\n\tfontWeight\n) {\n\tlet nearestFontStyle = fontStyle;\n\tlet nearestFontWeight = fontWeight;\n\n\tconst { fontStyles, fontWeights, combinedStyleAndWeightOptions } =\n\t\tgetFontStylesAndWeights( fontFamilyFaces );\n\n\t// Check if the new font style and weight are available in the font family faces.\n\tconst hasFontStyle = fontStyles?.some(\n\t\t( { value: fs } ) => fs === fontStyle\n\t);\n\tconst hasFontWeight = fontWeights?.some(\n\t\t( { value: fw } ) => fw === fontWeight\n\t);\n\n\tif ( ! hasFontStyle ) {\n\t\t/*\n\t\t * Default to italic if oblique is not available.\n\t\t * Or find the nearest font style based on the nearest font weight.\n\t\t */\n\t\tnearestFontStyle = fontStyle\n\t\t\t? findNearestFontStyle( fontStyles, fontStyle )\n\t\t\t: combinedStyleAndWeightOptions?.find(\n\t\t\t\t\t( option ) =>\n\t\t\t\t\t\toption.style.fontWeight ===\n\t\t\t\t\t\tfindNearestFontWeight( fontWeights, fontWeight )\n\t\t\t  )?.style?.fontStyle;\n\t}\n\n\tif ( ! hasFontWeight ) {\n\t\t/*\n\t\t * Find the nearest font weight based on available weights.\n\t\t * Or find the nearest font weight based on the nearest font style.\n\t\t */\n\t\tnearestFontWeight = fontWeight\n\t\t\t? findNearestFontWeight( fontWeights, fontWeight )\n\t\t\t: combinedStyleAndWeightOptions?.find(\n\t\t\t\t\t( option ) =>\n\t\t\t\t\t\toption.style.fontStyle ===\n\t\t\t\t\t\t( nearestFontStyle || fontStyle )\n\t\t\t  )?.style?.fontWeight;\n\t}\n\n\treturn { nearestFontStyle, nearestFontWeight };\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -24,6 +24,7 @@ var _context = require("./context");
 var _hooks = require("./hooks");
 var _utils2 = require("../duotone/utils");
 var _gap = require("../../hooks/gap");
+var _background = require("../../hooks/background");
 var _store = require("../../store");
 var _definitions = require("../../layouts/definitions");
 var _object = require("../../utils/object");
@@ -37,6 +38,12 @@ var _themeFileUriUtils = require("./theme-file-uri-utils");
  * Internal dependencies
  */
 
+// Elements that rely on class names in their selectors.
+const ELEMENT_CLASS_NAMES = {
+  button: 'wp-element-button',
+  caption: 'wp-element-caption'
+};
+
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
 const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
@@ -292,6 +299,20 @@ function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAl
     return declarations;
   }, []);
 
+  /*
+   * Set background defaults.
+   * Applies to all background styles except the top-level site background.
+   */
+  if (!isRoot && !!blockStyles.background) {
+    blockStyles = {
+      ...blockStyles,
+      background: {
+        ...blockStyles.background,
+        ...(0, _background.setBackgroundStyleDefaults)(blockStyles.background)
+      }
+    };
+  }
+
   // The goal is to move everything to server side generated engine styles
   // This is temporary as we absorb more and more styles into the engine.
   const extraRules = (0, _styleEngine.getCSSRules)(blockStyles);
@@ -458,14 +479,20 @@ const getNodesWithStyles = (tree, blockSelectors) => {
   if (styles) {
     nodes.push({
       styles,
-      selector: _utils.ROOT_BLOCK_SELECTOR
+      selector: _utils.ROOT_BLOCK_SELECTOR,
+      // Root selector (body) styles should not be wrapped in `:root where()` to keep
+      // specificity at (0,0,1) and maintain backwards compatibility.
+      skipSelectorWrapper: true
     });
   }
   Object.entries(_blocks.__EXPERIMENTAL_ELEMENTS).forEach(([name, selector]) => {
     if (tree.styles?.elements?.[name]) {
       nodes.push({
         styles: tree.styles?.elements?.[name],
-        selector
+        selector,
+        // Top level elements that don't use a class name should not receive the
+        // `:root :where()` wrapper to maintain backwards compatibility.
+        skipSelectorWrapper: !ELEMENT_CLASS_NAMES[name]
       });
     }
   });
@@ -482,7 +509,7 @@ const getNodesWithStyles = (tree, blockSelectors) => {
         if (variation?.css) {
           variations[variationName].css = variation.css;
         }
-        const variationSelector = blockSelectors[blockName].styleVariationSelectors?.[variationName];
+        const variationSelector = blockSelectors[blockName]?.styleVariationSelectors?.[variationName];
 
         // Process the variation's inner element styles.
         // This comes before the inner block styles so the
@@ -500,9 +527,9 @@ const getNodesWithStyles = (tree, blockSelectors) => {
         // Process the variations inner block type styles.
         Object.entries((_variation$blocks = variation?.blocks) !== null && _variation$blocks !== void 0 ? _variation$blocks : {}).forEach(([variationBlockName, variationBlockStyles]) => {
           var _variationBlockStyles;
-          const variationBlockSelector = (0, _utils.scopeSelector)(variationSelector, blockSelectors[variationBlockName].selector);
-          const variationDuotoneSelector = (0, _utils.scopeSelector)(variationSelector, blockSelectors[variationBlockName].duotoneSelector);
-          const variationFeatureSelectors = (0, _utils.scopeFeatureSelectors)(variationSelector, blockSelectors[variationBlockName].featureSelectors);
+          const variationBlockSelector = (0, _utils.scopeSelector)(variationSelector, blockSelectors[variationBlockName]?.selector);
+          const variationDuotoneSelector = (0, _utils.scopeSelector)(variationSelector, blockSelectors[variationBlockName]?.duotoneSelector);
+          const variationFeatureSelectors = (0, _utils.scopeFeatureSelectors)(variationSelector, blockSelectors[variationBlockName]?.featureSelectors);
           const variationBlockStyleNodes = pickStyleKeys(variationBlockStyles);
           if (variationBlockStyles?.css) {
             variationBlockStyleNodes.css = variationBlockStyles.css;
@@ -511,8 +538,8 @@ const getNodesWithStyles = (tree, blockSelectors) => {
             selector: variationBlockSelector,
             duotoneSelector: variationDuotoneSelector,
             featureSelectors: variationFeatureSelectors,
-            fallbackGapValue: blockSelectors[variationBlockName].fallbackGapValue,
-            hasLayoutSupport: blockSelectors[variationBlockName].hasLayoutSupport,
+            fallbackGapValue: blockSelectors[variationBlockName]?.fallbackGapValue,
+            hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport,
             styles: variationBlockStyleNodes
           });
 
@@ -668,8 +695,8 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
       ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
 				.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
 				.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
-				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
-				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0;
 				`;
     }
     ruleset += '}';
@@ -682,7 +709,8 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
       fallbackGapValue,
       hasLayoutSupport,
       featureSelectors,
-      styleVariationSelectors
+      styleVariationSelectors,
+      skipSelectorWrapper
     }) => {
       // Process styles for block support features with custom feature level
       // CSS selectors set.
@@ -723,7 +751,8 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
       // Process the remaining block styles (they use either normal block class or __experimentalSelector).
       const styleDeclarations = getStylesDeclarations(styles, selector, useRootPaddingAlign, tree, disableRootPadding);
       if (styleDeclarations?.length) {
-        ruleset += `:root :where(${selector}){${styleDeclarations.join(';')};}`;
+        const generalSelector = skipSelectorWrapper ? selector : `:root :where(${selector})`;
+        ruleset += `${generalSelector}{${styleDeclarations.join(';')};}`;
       }
       if (styles?.css) {
         ruleset += processCSSNesting(styles.css, `:root :where(${selector})`);
@@ -773,7 +802,12 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
           // Split and append pseudo selector to create
           // the proper rules to target the elements.
           const _selector = selector.split(',').map(sel => sel + pseudoKey).join(',');
-          const pseudoRule = `${_selector}{${pseudoDeclarations.join(';')};}`;
+
+          // As pseudo classes such as :hover, :focus etc. have class-level
+          // specificity, they must use the `:root :where()` wrapper. This.
+          // caps the specificity at `0-1-0` to allow proper nesting of variations
+          // and block type element styles.
+          const pseudoRule = `:root :where(${_selector}){${pseudoDeclarations.join(';')};}`;
           ruleset += pseudoRule;
         });
       }