@wordpress/edit-site 4.16.0 → 4.17.0

package/build/components/global-styles/screen-style-variations.js

@@ -23,6 +23,8 @@ var _components = require("@wordpress/components");
 
 var _i18n = require("@wordpress/i18n");
 
+var _blockEditor = require("@wordpress/block-editor");
+
 var _globalStylesProvider = require("./global-styles-provider");
 
 var _context = require("./context");
@@ -107,16 +109,19 @@ function Variation(_ref) {
     className: "edit-site-global-styles-variations_item-preview"
   }, (0, _element.createElement)(_preview.default, {
     label: variation === null || variation === void 0 ? void 0 : variation.title,
-    isFocused: isFocused
+    isFocused: isFocused,
+    withHoverView: true
   }))));
 }
 
 function ScreenStyleVariations() {
   const {
-    variations
+    variations,
+    mode
   } = (0, _data.useSelect)(select => {
     return {
-      variations: select(_coreData.store).__experimentalGetCurrentThemeGlobalStylesVariations()
+      variations: select(_coreData.store).__experimentalGetCurrentThemeGlobalStylesVariations(),
+      mode: select(_blockEditor.store).__unstableGetEditorMode()
     };
   }, []);
   const withEmptyVariation = (0, _element.useMemo)(() => {
@@ -133,10 +138,36 @@ function ScreenStyleVariations() {
       };
     })];
   }, [variations]);
+  const {
+    __unstableSetEditorMode
+  } = (0, _data.useDispatch)(_blockEditor.store);
+  const shouldRevertInitialMode = (0, _element.useRef)(null);
+  (0, _element.useEffect)(() => {
+    // ignore changes to zoom-out mode as we explictily change to it on mount.
+    if (mode !== 'zoom-out') {
+      shouldRevertInitialMode.current = false;
+    }
+  }, [mode]); // Intentionality left without any dependency.
+  // This effect should only run the first time the component is rendered.
+  // The effect opens the zoom-out view if it is not open before when applying a style variation.
+
+  (0, _element.useEffect)(() => {
+    if (mode !== 'zoom-out') {
+      __unstableSetEditorMode('zoom-out');
+
+      shouldRevertInitialMode.current = true;
+      return () => {
+        // if there were not mode changes revert to the initial mode when unmounting.
+        if (shouldRevertInitialMode.current) {
+          __unstableSetEditorMode(mode);
+        }
+      };
+    }
+  }, []);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     back: "/",
     title: (0, _i18n.__)('Browse styles'),
-    description: (0, _i18n.__)('Choose a different style combination for the theme styles')
+    description: (0, _i18n.__)('Choose a variation to change the look of the site.')
   }), (0, _element.createElement)(_components.Card, {
     size: "small",
     isBorderless: true

package/build/components/global-styles/screen-style-variations.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","GlobalStylesContext","context","merged","selectVariation","selectOnEnter","event","keyCode","ENTER","preventDefault","isActive","title","ScreenStyleVariations","variations","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","map","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { GlobalStylesContext } from './context';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\n\nfunction compareVariations( a, b ) {\n\treturn isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\taria-label={ variation?.title }\n\t\t\t\taria-current={ isActive }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations.map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a different style combination for the theme styles'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card size=\"small\" isBorderless>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","GlobalStylesContext","context","merged","selectVariation","selectOnEnter","event","keyCode","ENTER","preventDefault","isActive","title","ScreenStyleVariations","variations","mode","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","blockEditorStore","__unstableGetEditorMode","withEmptyVariation","map","__unstableSetEditorMode","shouldRevertInitialMode","current","index"],"mappings":";;;;;;;;;AAWA;;AARA;;AACA;;AAKA;;AACA;;AAQA;;AACA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAjCA;AACA;AACA;;AAIA;AACA;AACA;;AAmBA;AACA;AACA;AAMA,SAASA,iBAAT,CAA4BC,CAA5B,EAA+BC,CAA/B,EAAmC;AAClC,SAAO,qBAASD,CAAC,CAACE,MAAX,EAAmBD,CAAC,CAACC,MAArB,KAAiC,qBAASF,CAAC,CAACG,QAAX,EAAqBF,CAAC,CAACE,QAAvB,CAAxC;AACA;;AAED,SAASC,SAAT,OAAoC;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AACnC,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8B,uBAAU,KAAV,CAApC;AACA,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,IAAR;AAAcC,IAAAA;AAAd,MAAgC,yBAAYC,4BAAZ,CAAtC;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAAA;;AAC9B,WAAO;AACNH,MAAAA,IAAI,EAAE;AACLN,QAAAA,QAAQ,yBAAEE,SAAS,CAACF,QAAZ,qEAAwB,EAD3B;AAELD,QAAAA,MAAM,uBAAEG,SAAS,CAACH,MAAZ,iEAAsB;AAFvB,OADA;AAKNM,MAAAA,IALM;AAMNK,MAAAA,MAAM,EAAE,mDAAyBL,IAAzB,EAA+BH,SAA/B,CANF;AAONK,MAAAA,aAAa,EAAE,MAAM,CAAE;AAPjB,KAAP;AASA,GAVe,EAUb,CAAEL,SAAF,EAAaG,IAAb,CAVa,CAAhB;;AAYA,QAAMM,eAAe,GAAG,MAAM;AAC7BJ,IAAAA,aAAa,CAAE,MAAM;AACpB,aAAO;AACNP,QAAAA,QAAQ,EAAEE,SAAS,CAACF,QADd;AAEND,QAAAA,MAAM,EAAEG,SAAS,CAACH;AAFZ,OAAP;AAIA,KALY,CAAb;AAMA,GAPD;;AASA,QAAMa,aAAa,GAAKC,KAAF,IAAa;AAClC,QAAKA,KAAK,CAACC,OAAN,KAAkBC,eAAvB,EAA+B;AAC9BF,MAAAA,KAAK,CAACG,cAAN;AACAL,MAAAA,eAAe;AACf;AACD,GALD;;AAOA,QAAMM,QAAQ,GAAG,sBAAS,MAAM;AAC/B,WAAOrB,iBAAiB,CAAEU,IAAF,EAAQJ,SAAR,CAAxB;AACA,GAFgB,EAEd,CAAEI,IAAF,EAAQJ,SAAR,CAFc,CAAjB;AAIA,SACC,4BAAC,4BAAD,CAAqB,QAArB;AAA8B,IAAA,KAAK,EAAGO;AAAtC,KACC;AACC,IAAA,SAAS,EAAG,yBACX,yCADW,EAEX;AACC,mBAAaQ;AADd,KAFW,CADb;AAOC,IAAA,IAAI,EAAC,QAPN;AAQC,IAAA,OAAO,EAAGN,eARX;AASC,IAAA,SAAS,EAAGC,aATb;AAUC,IAAA,QAAQ,EAAC,GAVV;AAWC,kBAAaV,SAAb,aAAaA,SAAb,uBAAaA,SAAS,CAAEgB,KAXzB;AAYC,oBAAeD,QAZhB;AAaC,IAAA,OAAO,EAAG,MAAMb,YAAY,CAAE,IAAF,CAb7B;AAcC,IAAA,MAAM,EAAG,MAAMA,YAAY,CAAE,KAAF;AAd5B,KAgBC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,gBAAD;AACC,IAAA,KAAK,EAAGF,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAEgB,KADpB;AAEC,IAAA,SAAS,EAAGf,SAFb;AAGC,IAAA,aAAa;AAHd,IADD,CAhBD,CADD,CADD;AA4BA;;AAED,SAASgB,qBAAT,GAAiC;AAChC,QAAM;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAAuB,qBAAaC,MAAF,IAAc;AACrD,WAAO;AACNF,MAAAA,UAAU,EACTE,MAAM,CACLC,eADK,CAAN,CAEEC,mDAFF,EAFK;AAMNH,MAAAA,IAAI,EAAEC,MAAM,CAAEG,kBAAF,CAAN,CAA2BC,uBAA3B;AANA,KAAP;AAQA,GAT4B,EAS1B,EAT0B,CAA7B;AAWA,QAAMC,kBAAkB,GAAG,sBAAS,MAAM;AACzC,WAAO,CACN;AACCT,MAAAA,KAAK,EAAE,cAAI,SAAJ,CADR;AAEClB,MAAAA,QAAQ,EAAE,EAFX;AAGCD,MAAAA,MAAM,EAAE;AAHT,KADM,EAMN,GAAGqB,UAAU,CAACQ,GAAX,CAAkB1B,SAAF;AAAA;;AAAA,aAAmB,EACrC,GAAGA,SADkC;AAErCF,QAAAA,QAAQ,0BAAEE,SAAS,CAACF,QAAZ,uEAAwB,EAFK;AAGrCD,QAAAA,MAAM,wBAAEG,SAAS,CAACH,MAAZ,mEAAsB;AAHS,OAAnB;AAAA,KAAhB,CANG,CAAP;AAYA,GAb0B,EAaxB,CAAEqB,UAAF,CAbwB,CAA3B;AAeA,QAAM;AAAES,IAAAA;AAAF,MAA8B,uBAAaJ,kBAAb,CAApC;AACA,QAAMK,uBAAuB,GAAG,qBAAQ,IAAR,CAAhC;AACA,0BAAW,MAAM;AAChB;AACA,QAAKT,IAAI,KAAK,UAAd,EAA2B;AAC1BS,MAAAA,uBAAuB,CAACC,OAAxB,GAAkC,KAAlC;AACA;AACD,GALD,EAKG,CAAEV,IAAF,CALH,EA7BgC,CAoChC;AACA;AACA;;AACA,0BAAW,MAAM;AAChB,QAAKA,IAAI,KAAK,UAAd,EAA2B;AAC1BQ,MAAAA,uBAAuB,CAAE,UAAF,CAAvB;;AACAC,MAAAA,uBAAuB,CAACC,OAAxB,GAAkC,IAAlC;AACA,aAAO,MAAM;AACZ;AACA,YAAKD,uBAAuB,CAACC,OAA7B,EAAuC;AACtCF,UAAAA,uBAAuB,CAAER,IAAF,CAAvB;AACA;AACD,OALD;AAMA;AACD,GAXD,EAWG,EAXH;AAaA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,EAAC,GADN;AAEC,IAAA,KAAK,EAAG,cAAI,eAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,oDADa;AAHf,IADD,EASC,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC,OAAX;AAAmB,IAAA,YAAY;AAA/B,KACC,4BAAC,oBAAD,QACC,4BAAC,8BAAD;AAAM,IAAA,OAAO,EAAG;AAAhB,KACGM,kBADH,aACGA,kBADH,uBACGA,kBAAkB,CAAEC,GAApB,CAAyB,CAAE1B,SAAF,EAAa8B,KAAb,KAC1B,4BAAC,SAAD;AAAW,IAAA,GAAG,EAAGA,KAAjB;AAAyB,IAAA,SAAS,EAAG9B;AAArC,IADC,CADH,CADD,CADD,CATD,CADD;AAqBA;;eAEciB,qB","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseMemo,\n\tuseContext,\n\tuseState,\n\tuseEffect,\n\tuseRef,\n} from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { GlobalStylesContext } from './context';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\n\nfunction compareVariations( a, b ) {\n\treturn isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\taria-label={ variation?.title }\n\t\t\t\taria-current={ isActive }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\twithHoverView\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations, mode } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\n\t\t\tmode: select( blockEditorStore ).__unstableGetEditorMode(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations.map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\tconst shouldRevertInitialMode = useRef( null );\n\tuseEffect( () => {\n\t\t// ignore changes to zoom-out mode as we explictily change to it on mount.\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\tshouldRevertInitialMode.current = false;\n\t\t}\n\t}, [ mode ] );\n\n\t// Intentionality left without any dependency.\n\t// This effect should only run the first time the component is rendered.\n\t// The effect opens the zoom-out view if it is not open before when applying a style variation.\n\tuseEffect( () => {\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\t__unstableSetEditorMode( 'zoom-out' );\n\t\t\tshouldRevertInitialMode.current = true;\n\t\t\treturn () => {\n\t\t\t\t// if there were not mode changes revert to the initial mode when unmounting.\n\t\t\t\tif ( shouldRevertInitialMode.current ) {\n\t\t\t\t\t__unstableSetEditorMode( mode );\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card size=\"small\" isBorderless>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}

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

@@ -16,6 +16,8 @@ var _i18n = require("@wordpress/i18n");
 
 var _hooks = require("./hooks");
 
+var _typographyUtils = require("./typography-utils");
+
 /**
  * WordPress dependencies
  */
@@ -145,7 +147,18 @@ function TypographyPanel(_ref) {
     prefix = `elements.${element}.`;
   }
 
-  const [fontSizes] = (0, _hooks.useSetting)('typography.fontSizes', name);
+  const [fluidTypography] = (0, _hooks.useSetting)('typography.fluid', name);
+  const [fontSizes] = (0, _hooks.useSetting)('typography.fontSizes', name); // Convert static font size values to fluid font sizes if fluidTypography is activated.
+
+  const fontSizesWithFluidValues = fontSizes.map(font => {
+    if (!!fluidTypography) {
+      font.size = (0, _typographyUtils.getTypographyFontSizeValue)(font, {
+        fluid: fluidTypography
+      });
+    }
+
+    return font;
+  });
   const disableCustomFontSizes = !(0, _hooks.useSetting)('typography.customFontSize', name)[0];
   const [fontFamilies] = (0, _hooks.useSetting)('typography.fontFamilies', name);
   const hasFontStyles = (0, _hooks.useSetting)('typography.fontStyle', name)[0] && supports.includes('fontStyle');
@@ -209,7 +222,7 @@ function TypographyPanel(_ref) {
   }, (0, _element.createElement)(_components.FontSizePicker, {
     value: fontSize,
     onChange: setFontSize,
-    fontSizes: fontSizes,
+    fontSizes: fontSizesWithFluidValues,
     disableCustomFontSizes: disableCustomFontSizes,
     withReset: false,
     size: "__unstable-large",

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-panel.js"],"names":["useHasTypographyPanel","name","hasFontFamily","useHasFontFamilyControl","hasLineHeight","useHasLineHeightControl","hasFontAppearance","useHasAppearanceControl","hasLetterSpacing","useHasLetterSpacingControl","supports","includes","fontFamilies","length","hasFontStyles","hasFontWeights","useAppearanceControlLabel","element","setting","useHasTextTransformControl","useStyleWithReset","path","blockName","style","setStyle","userStyle","hasStyle","resetStyle","undefined","useFontAppearance","prefix","fontStyle","setFontStyle","userFontStyle","fontWeight","setFontWeight","userFontWeight","resetFontAppearance","TypographyPanel","headingLevel","fontSizes","disableCustomFontSizes","hasFontFamilyEnabled","hasLineHeightEnabled","hasAppearanceControl","appearanceControlLabel","hasLetterSpacingControl","hasTextTransformControl","hasFontSizeEnabled","fontFamily","setFontFamily","resetFontFamily","fontSize","setFontSize","hasFontSize","resetFontSize","lineHeight","setLineHeight","resetLineHeight","letterSpacing","setLetterSpacing","resetLetterSpacing","textTransform","setTextTransform","hasTextTransform","resetTextTransform","resetAll","newFontStyle","newFontWeight"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tLineHeightControl,\n\t__experimentalFontFamilyControl as FontFamilyControl,\n\t__experimentalFontAppearanceControl as FontAppearanceControl,\n\t__experimentalLetterSpacingControl as LetterSpacingControl,\n\t__experimentalTextTransformControl as TextTransformControl,\n} from '@wordpress/block-editor';\nimport {\n\tFontSizePicker,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\n\nexport function useHasTypographyPanel( name ) {\n\tconst hasFontFamily = useHasFontFamilyControl( name );\n\tconst hasLineHeight = useHasLineHeightControl( name );\n\tconst hasFontAppearance = useHasAppearanceControl( name );\n\tconst hasLetterSpacing = useHasLetterSpacingControl( name );\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\thasFontFamily ||\n\t\thasLineHeight ||\n\t\thasFontAppearance ||\n\t\thasLetterSpacing ||\n\t\tsupports.includes( 'fontSize' )\n\t);\n}\n\nfunction useHasFontFamilyControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );\n\treturn supports.includes( 'fontFamily' ) && !! fontFamilies?.length;\n}\n\nfunction useHasLineHeightControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'typography.lineHeight', name )[ 0 ] &&\n\t\tsupports.includes( 'lineHeight' )\n\t);\n}\n\nfunction useHasAppearanceControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\treturn hasFontStyles || hasFontWeights;\n}\n\nfunction useAppearanceControlLabel( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\tif ( ! hasFontStyles ) {\n\t\treturn __( 'Font weight' );\n\t}\n\tif ( ! hasFontWeights ) {\n\t\treturn __( 'Font style' );\n\t}\n\treturn __( 'Appearance' );\n}\n\nfunction useHasLetterSpacingControl( name, element ) {\n\tconst setting = useSetting( 'typography.letterSpacing', name )[ 0 ];\n\tif ( ! setting ) {\n\t\treturn false;\n\t}\n\tif ( ! name && element === 'heading' ) {\n\t\treturn true;\n\t}\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn supports.includes( 'letterSpacing' );\n}\n\nfunction useHasTextTransformControl( name, element ) {\n\tconst setting = useSetting( 'typography.textTransform', name )[ 0 ];\n\tif ( ! setting ) {\n\t\treturn false;\n\t}\n\tif ( ! name && element === 'heading' ) {\n\t\treturn true;\n\t}\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn supports.includes( 'textTransform' );\n}\n\nfunction useStyleWithReset( path, blockName ) {\n\tconst [ style, setStyle ] = useStyle( path, blockName );\n\tconst [ userStyle ] = useStyle( path, blockName, 'user' );\n\tconst hasStyle = () => !! userStyle;\n\tconst resetStyle = () => setStyle( undefined );\n\treturn [ style, setStyle, hasStyle, resetStyle ];\n}\n\nfunction useFontAppearance( prefix, name ) {\n\tconst [ fontStyle, setFontStyle ] = useStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ userFontStyle ] = useStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ fontWeight, setFontWeight ] = useStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ userFontWeight ] = useStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname,\n\t\t'user'\n\t);\n\tconst hasFontAppearance = () => !! userFontStyle || !! userFontWeight;\n\tconst resetFontAppearance = () => {\n\t\tsetFontStyle( undefined );\n\t\tsetFontWeight( undefined );\n\t};\n\treturn {\n\t\tfontStyle,\n\t\tsetFontStyle,\n\t\tfontWeight,\n\t\tsetFontWeight,\n\t\thasFontAppearance,\n\t\tresetFontAppearance,\n\t};\n}\n\nexport default function TypographyPanel( { name, element, headingLevel } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tlet prefix = '';\n\tif ( element === 'heading' ) {\n\t\tprefix = `elements.${ headingLevel }.`;\n\t} else if ( element && element !== 'text' ) {\n\t\tprefix = `elements.${ element }.`;\n\t}\n\tconst [ fontSizes ] = useSetting( 'typography.fontSizes', name );\n\tconst disableCustomFontSizes = ! useSetting(\n\t\t'typography.customFontSize',\n\t\tname\n\t)[ 0 ];\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\tconst hasFontFamilyEnabled = useHasFontFamilyControl( name );\n\tconst hasLineHeightEnabled = useHasLineHeightControl( name );\n\tconst hasAppearanceControl = useHasAppearanceControl( name );\n\tconst appearanceControlLabel = useAppearanceControlLabel( name );\n\tconst hasLetterSpacingControl = useHasLetterSpacingControl( name, element );\n\tconst hasTextTransformControl = useHasTextTransformControl( name, element );\n\n\t/* Disable font size controls when the option to style all headings is selected. */\n\tlet hasFontSizeEnabled = supports.includes( 'fontSize' );\n\tif ( element === 'heading' && headingLevel === 'heading' ) {\n\t\thasFontSizeEnabled = false;\n\t}\n\n\tconst [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =\n\t\tuseStyleWithReset( prefix + 'typography.fontFamily', name );\n\tconst [ fontSize, setFontSize, hasFontSize, resetFontSize ] =\n\t\tuseStyleWithReset( prefix + 'typography.fontSize', name );\n\tconst {\n\t\tfontStyle,\n\t\tsetFontStyle,\n\t\tfontWeight,\n\t\tsetFontWeight,\n\t\thasFontAppearance,\n\t\tresetFontAppearance,\n\t} = useFontAppearance( prefix, name );\n\tconst [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =\n\t\tuseStyleWithReset( prefix + 'typography.lineHeight', name );\n\tconst [\n\t\tletterSpacing,\n\t\tsetLetterSpacing,\n\t\thasLetterSpacing,\n\t\tresetLetterSpacing,\n\t] = useStyleWithReset( prefix + 'typography.letterSpacing', name );\n\tconst [\n\t\ttextTransform,\n\t\tsetTextTransform,\n\t\thasTextTransform,\n\t\tresetTextTransform,\n\t] = useStyleWithReset( prefix + 'typography.textTransform', name );\n\n\tconst resetAll = () => {\n\t\tresetFontFamily();\n\t\tresetFontSize();\n\t\tresetFontAppearance();\n\t\tresetLineHeight();\n\t\tresetLetterSpacing();\n\t\tresetTextTransform();\n\t};\n\n\treturn (\n\t\t<ToolsPanel label={ __( 'Typography' ) } resetAll={ resetAll }>\n\t\t\t{ hasFontFamilyEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font family' ) }\n\t\t\t\t\thasValue={ hasFontFamily }\n\t\t\t\t\tonDeselect={ resetFontFamily }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontFamilyControl\n\t\t\t\t\t\tfontFamilies={ fontFamilies }\n\t\t\t\t\t\tvalue={ fontFamily }\n\t\t\t\t\t\tonChange={ setFontFamily }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasFontSizeEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\thasValue={ hasFontSize }\n\t\t\t\t\tonDeselect={ resetFontSize }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontSizePicker\n\t\t\t\t\t\tvalue={ fontSize }\n\t\t\t\t\t\tonChange={ setFontSize }\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\twithReset={ false }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasAppearanceControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ appearanceControlLabel }\n\t\t\t\t\thasValue={ hasFontAppearance }\n\t\t\t\t\tonDeselect={ resetFontAppearance }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontAppearanceControl\n\t\t\t\t\t\tvalue={ {\n\t\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( {\n\t\t\t\t\t\t\tfontStyle: newFontStyle,\n\t\t\t\t\t\t\tfontWeight: newFontWeight,\n\t\t\t\t\t\t} ) => {\n\t\t\t\t\t\t\tsetFontStyle( newFontStyle );\n\t\t\t\t\t\t\tsetFontWeight( newFontWeight );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\thasFontStyles={ hasFontStyles }\n\t\t\t\t\t\thasFontWeights={ hasFontWeights }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLineHeightEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Line height' ) }\n\t\t\t\t\thasValue={ hasLineHeight }\n\t\t\t\t\tonDeselect={ resetLineHeight }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<LineHeightControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t\tvalue={ lineHeight }\n\t\t\t\t\t\tonChange={ setLineHeight }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLetterSpacingControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Letter spacing' ) }\n\t\t\t\t\thasValue={ hasLetterSpacing }\n\t\t\t\t\tonDeselect={ resetLetterSpacing }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<LetterSpacingControl\n\t\t\t\t\t\tvalue={ letterSpacing }\n\t\t\t\t\t\tonChange={ setLetterSpacing }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextTransformControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Letter case' ) }\n\t\t\t\t\thasValue={ hasTextTransform }\n\t\t\t\t\tonDeselect={ resetTextTransform }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<TextTransformControl\n\t\t\t\t\t\tvalue={ textTransform }\n\t\t\t\t\t\tonChange={ setTextTransform }\n\t\t\t\t\t\tshowNone\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</ToolsPanel>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-panel.js"],"names":["useHasTypographyPanel","name","hasFontFamily","useHasFontFamilyControl","hasLineHeight","useHasLineHeightControl","hasFontAppearance","useHasAppearanceControl","hasLetterSpacing","useHasLetterSpacingControl","supports","includes","fontFamilies","length","hasFontStyles","hasFontWeights","useAppearanceControlLabel","element","setting","useHasTextTransformControl","useStyleWithReset","path","blockName","style","setStyle","userStyle","hasStyle","resetStyle","undefined","useFontAppearance","prefix","fontStyle","setFontStyle","userFontStyle","fontWeight","setFontWeight","userFontWeight","resetFontAppearance","TypographyPanel","headingLevel","fluidTypography","fontSizes","fontSizesWithFluidValues","map","font","size","fluid","disableCustomFontSizes","hasFontFamilyEnabled","hasLineHeightEnabled","hasAppearanceControl","appearanceControlLabel","hasLetterSpacingControl","hasTextTransformControl","hasFontSizeEnabled","fontFamily","setFontFamily","resetFontFamily","fontSize","setFontSize","hasFontSize","resetFontSize","lineHeight","setLineHeight","resetLineHeight","letterSpacing","setLetterSpacing","resetLetterSpacing","textTransform","setTextTransform","hasTextTransform","resetTextTransform","resetAll","newFontStyle","newFontWeight"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tLineHeightControl,\n\t__experimentalFontFamilyControl as FontFamilyControl,\n\t__experimentalFontAppearanceControl as FontAppearanceControl,\n\t__experimentalLetterSpacingControl as LetterSpacingControl,\n\t__experimentalTextTransformControl as TextTransformControl,\n} from '@wordpress/block-editor';\nimport {\n\tFontSizePicker,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\nimport { getTypographyFontSizeValue } from './typography-utils';\n\nexport function useHasTypographyPanel( name ) {\n\tconst hasFontFamily = useHasFontFamilyControl( name );\n\tconst hasLineHeight = useHasLineHeightControl( name );\n\tconst hasFontAppearance = useHasAppearanceControl( name );\n\tconst hasLetterSpacing = useHasLetterSpacingControl( name );\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\thasFontFamily ||\n\t\thasLineHeight ||\n\t\thasFontAppearance ||\n\t\thasLetterSpacing ||\n\t\tsupports.includes( 'fontSize' )\n\t);\n}\n\nfunction useHasFontFamilyControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );\n\treturn supports.includes( 'fontFamily' ) && !! fontFamilies?.length;\n}\n\nfunction useHasLineHeightControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'typography.lineHeight', name )[ 0 ] &&\n\t\tsupports.includes( 'lineHeight' )\n\t);\n}\n\nfunction useHasAppearanceControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\treturn hasFontStyles || hasFontWeights;\n}\n\nfunction useAppearanceControlLabel( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\tif ( ! hasFontStyles ) {\n\t\treturn __( 'Font weight' );\n\t}\n\tif ( ! hasFontWeights ) {\n\t\treturn __( 'Font style' );\n\t}\n\treturn __( 'Appearance' );\n}\n\nfunction useHasLetterSpacingControl( name, element ) {\n\tconst setting = useSetting( 'typography.letterSpacing', name )[ 0 ];\n\tif ( ! setting ) {\n\t\treturn false;\n\t}\n\tif ( ! name && element === 'heading' ) {\n\t\treturn true;\n\t}\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn supports.includes( 'letterSpacing' );\n}\n\nfunction useHasTextTransformControl( name, element ) {\n\tconst setting = useSetting( 'typography.textTransform', name )[ 0 ];\n\tif ( ! setting ) {\n\t\treturn false;\n\t}\n\tif ( ! name && element === 'heading' ) {\n\t\treturn true;\n\t}\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn supports.includes( 'textTransform' );\n}\n\nfunction useStyleWithReset( path, blockName ) {\n\tconst [ style, setStyle ] = useStyle( path, blockName );\n\tconst [ userStyle ] = useStyle( path, blockName, 'user' );\n\tconst hasStyle = () => !! userStyle;\n\tconst resetStyle = () => setStyle( undefined );\n\treturn [ style, setStyle, hasStyle, resetStyle ];\n}\n\nfunction useFontAppearance( prefix, name ) {\n\tconst [ fontStyle, setFontStyle ] = useStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ userFontStyle ] = useStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ fontWeight, setFontWeight ] = useStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ userFontWeight ] = useStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname,\n\t\t'user'\n\t);\n\tconst hasFontAppearance = () => !! userFontStyle || !! userFontWeight;\n\tconst resetFontAppearance = () => {\n\t\tsetFontStyle( undefined );\n\t\tsetFontWeight( undefined );\n\t};\n\treturn {\n\t\tfontStyle,\n\t\tsetFontStyle,\n\t\tfontWeight,\n\t\tsetFontWeight,\n\t\thasFontAppearance,\n\t\tresetFontAppearance,\n\t};\n}\n\nexport default function TypographyPanel( { name, element, headingLevel } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tlet prefix = '';\n\tif ( element === 'heading' ) {\n\t\tprefix = `elements.${ headingLevel }.`;\n\t} else if ( element && element !== 'text' ) {\n\t\tprefix = `elements.${ element }.`;\n\t}\n\tconst [ fluidTypography ] = useSetting( 'typography.fluid', name );\n\tconst [ fontSizes ] = useSetting( 'typography.fontSizes', name );\n\n\t// Convert static font size values to fluid font sizes if fluidTypography is activated.\n\tconst fontSizesWithFluidValues = fontSizes.map( ( font ) => {\n\t\tif ( !! fluidTypography ) {\n\t\t\tfont.size = getTypographyFontSizeValue( font, {\n\t\t\t\tfluid: fluidTypography,\n\t\t\t} );\n\t\t}\n\t\treturn font;\n\t} );\n\n\tconst disableCustomFontSizes = ! useSetting(\n\t\t'typography.customFontSize',\n\t\tname\n\t)[ 0 ];\n\tconst [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );\n\tconst hasFontStyles =\n\t\tuseSetting( 'typography.fontStyle', name )[ 0 ] &&\n\t\tsupports.includes( 'fontStyle' );\n\tconst hasFontWeights =\n\t\tuseSetting( 'typography.fontWeight', name )[ 0 ] &&\n\t\tsupports.includes( 'fontWeight' );\n\tconst hasFontFamilyEnabled = useHasFontFamilyControl( name );\n\tconst hasLineHeightEnabled = useHasLineHeightControl( name );\n\tconst hasAppearanceControl = useHasAppearanceControl( name );\n\tconst appearanceControlLabel = useAppearanceControlLabel( name );\n\tconst hasLetterSpacingControl = useHasLetterSpacingControl( name, element );\n\tconst hasTextTransformControl = useHasTextTransformControl( name, element );\n\n\t/* Disable font size controls when the option to style all headings is selected. */\n\tlet hasFontSizeEnabled = supports.includes( 'fontSize' );\n\tif ( element === 'heading' && headingLevel === 'heading' ) {\n\t\thasFontSizeEnabled = false;\n\t}\n\n\tconst [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =\n\t\tuseStyleWithReset( prefix + 'typography.fontFamily', name );\n\tconst [ fontSize, setFontSize, hasFontSize, resetFontSize ] =\n\t\tuseStyleWithReset( prefix + 'typography.fontSize', name );\n\tconst {\n\t\tfontStyle,\n\t\tsetFontStyle,\n\t\tfontWeight,\n\t\tsetFontWeight,\n\t\thasFontAppearance,\n\t\tresetFontAppearance,\n\t} = useFontAppearance( prefix, name );\n\tconst [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =\n\t\tuseStyleWithReset( prefix + 'typography.lineHeight', name );\n\tconst [\n\t\tletterSpacing,\n\t\tsetLetterSpacing,\n\t\thasLetterSpacing,\n\t\tresetLetterSpacing,\n\t] = useStyleWithReset( prefix + 'typography.letterSpacing', name );\n\tconst [\n\t\ttextTransform,\n\t\tsetTextTransform,\n\t\thasTextTransform,\n\t\tresetTextTransform,\n\t] = useStyleWithReset( prefix + 'typography.textTransform', name );\n\n\tconst resetAll = () => {\n\t\tresetFontFamily();\n\t\tresetFontSize();\n\t\tresetFontAppearance();\n\t\tresetLineHeight();\n\t\tresetLetterSpacing();\n\t\tresetTextTransform();\n\t};\n\n\treturn (\n\t\t<ToolsPanel label={ __( 'Typography' ) } resetAll={ resetAll }>\n\t\t\t{ hasFontFamilyEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font family' ) }\n\t\t\t\t\thasValue={ hasFontFamily }\n\t\t\t\t\tonDeselect={ resetFontFamily }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontFamilyControl\n\t\t\t\t\t\tfontFamilies={ fontFamilies }\n\t\t\t\t\t\tvalue={ fontFamily }\n\t\t\t\t\t\tonChange={ setFontFamily }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasFontSizeEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\thasValue={ hasFontSize }\n\t\t\t\t\tonDeselect={ resetFontSize }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontSizePicker\n\t\t\t\t\t\tvalue={ fontSize }\n\t\t\t\t\t\tonChange={ setFontSize }\n\t\t\t\t\t\tfontSizes={ fontSizesWithFluidValues }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\twithReset={ false }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasAppearanceControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ appearanceControlLabel }\n\t\t\t\t\thasValue={ hasFontAppearance }\n\t\t\t\t\tonDeselect={ resetFontAppearance }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<FontAppearanceControl\n\t\t\t\t\t\tvalue={ {\n\t\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( {\n\t\t\t\t\t\t\tfontStyle: newFontStyle,\n\t\t\t\t\t\t\tfontWeight: newFontWeight,\n\t\t\t\t\t\t} ) => {\n\t\t\t\t\t\t\tsetFontStyle( newFontStyle );\n\t\t\t\t\t\t\tsetFontWeight( newFontWeight );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\thasFontStyles={ hasFontStyles }\n\t\t\t\t\t\thasFontWeights={ hasFontWeights }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLineHeightEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Line height' ) }\n\t\t\t\t\thasValue={ hasLineHeight }\n\t\t\t\t\tonDeselect={ resetLineHeight }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<LineHeightControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t\tvalue={ lineHeight }\n\t\t\t\t\t\tonChange={ setLineHeight }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasLetterSpacingControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\tlabel={ __( 'Letter spacing' ) }\n\t\t\t\t\thasValue={ hasLetterSpacing }\n\t\t\t\t\tonDeselect={ resetLetterSpacing }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<LetterSpacingControl\n\t\t\t\t\t\tvalue={ letterSpacing }\n\t\t\t\t\t\tonChange={ setLetterSpacing }\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__unstableInputWidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasTextTransformControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Letter case' ) }\n\t\t\t\t\thasValue={ hasTextTransform }\n\t\t\t\t\tonDeselect={ resetTextTransform }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<TextTransformControl\n\t\t\t\t\t\tvalue={ textTransform }\n\t\t\t\t\t\tonChange={ setTextTransform }\n\t\t\t\t\t\tshowNone\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</ToolsPanel>\n\t);\n}\n"]}

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getComputedFluidTypographyValue = getComputedFluidTypographyValue;
 exports.getTypographyFontSizeValue = getTypographyFontSizeValue;
-exports.getTypographyValueAndUnit = getTypographyValueAndUnit;
-exports.roundToPrecision = roundToPrecision;
+
+var _blockEditor = require("@wordpress/block-editor");
 
 /**
  * The fluid utilities must match the backend equivalent.
@@ -14,68 +13,62 @@ exports.roundToPrecision = roundToPrecision;
  * ---------------------------------------------------------------
  */
 
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * @typedef {Object} FluidPreset
+ * @property {string|undefined}  max A maximum font size value.
+ * @property {?string|undefined} min A minimum font size value.
+ */
+
+/**
+ * @typedef {Object} Preset
+ * @property {?string|?number}               size  A default font size.
+ * @property {string}                        name  A font size name, displayed in the UI.
+ * @property {string}                        slug  A font size slug
+ * @property {boolean|FluidPreset|undefined} fluid 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.
  */
 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
+  const fluidFontSizeValue = (0, _blockEditor.getComputedFluidTypographyValue)({
+    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) {
@@ -84,134 +77,4 @@ 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().
- */
-
-
-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.
- */
-
-
-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.
- */
-
-
-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/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":["getTypographyFontSizeValue","preset","typographySettings","size","defaultSize","fluid","fluidFontSizeValue","minimumFontSize","min","maximumFontSize","max","fontSize"],"mappings":";;;;;;;AASA;;AATA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,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,GAAG,kDAAiC;AAC3DC,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,GAAjC,CAA3B;;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"]}