@wordpress/edit-site 5.28.3 → 5.28.4

package/build/components/global-styles/font-library-modal/collection-font-variant.js

@@ -37,7 +37,7 @@ function CollectionFontVariant({
   } = (0, _lockUnlock.unlock)(_components.privateApis);
   const checkboxId = kebabCase(`${font.slug}-${(0, _utils.getFontFaceVariantName)(face)}`);
   return (0, _react.createElement)("div", {
-    className: "font-library-modal__library-font-variant"
+    className: "font-library-modal__font-card"
   }, (0, _react.createElement)(_components.Flex, {
     justify: "flex-start",
     align: "center",
@@ -50,7 +50,7 @@ function CollectionFontVariant({
   }), (0, _react.createElement)("label", {
     htmlFor: checkboxId
   }, (0, _react.createElement)(_fontDemo.default, {
-    fontFace: face,
+    font: face,
     text: displayName,
     onClick: handleToggleActivation
   }))));

package/build/components/global-styles/font-library-modal/collection-font-variant.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_utils","_fontDemo","_interopRequireDefault","_lockUnlock","CollectionFontVariant","face","font","handleToggleVariant","selected","handleToggleActivation","fontFace","displayName","name","getFontFaceVariantName","kebabCase","unlock","componentsPrivateApis","checkboxId","slug","_react","createElement","className","Flex","justify","align","gap","CheckboxControl","checked","onChange","__nextHasNoMarginBottom","id","htmlFor","default","text","onClick","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tCheckboxControl,\n\tFlex,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { getFontFaceVariantName } from './utils';\nimport FontFaceDemo from './font-demo';\nimport { unlock } from '../../../lock-unlock';\n\nfunction CollectionFontVariant( {\n\tface,\n\tfont,\n\thandleToggleVariant,\n\tselected,\n} ) {\n\tconst handleToggleActivation = () => {\n\t\tif ( font?.fontFace ) {\n\t\t\thandleToggleVariant( font, face );\n\t\t\treturn;\n\t\t}\n\t\thandleToggleVariant( font );\n\t};\n\n\tconst displayName = font.name + ' ' + getFontFaceVariantName( face );\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\tconst checkboxId = kebabCase(\n\t\t`${ font.slug }-${ getFontFaceVariantName( face ) }`\n\t);\n\n\treturn (\n\t\t<div className=\"font-library-modal__library-font-variant\">\n\t\t\t<Flex justify=\"flex-start\" align=\"center\" gap=\"1rem\">\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tchecked={ selected }\n\t\t\t\t\tonChange={ handleToggleActivation }\n\t\t\t\t\t__nextHasNoMarginBottom={ true }\n\t\t\t\t\tid={ checkboxId }\n\t\t\t\t/>\n\t\t\t\t<label htmlFor={ checkboxId }>\n\t\t\t\t\t<FontFaceDemo\n\t\t\t\t\t\tfontFace={ face }\n\t\t\t\t\t\ttext={ displayName }\n\t\t\t\t\t\tonClick={ handleToggleActivation }\n\t\t\t\t\t/>\n\t\t\t\t</label>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n\nexport default CollectionFontVariant;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AASA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAdA;AACA;AACA;;AAOA;AACA;AACA;;AAKA,SAASK,qBAAqBA,CAAE;EAC/BC,IAAI;EACJC,IAAI;EACJC,mBAAmB;EACnBC;AACD,CAAC,EAAG;EACH,MAAMC,sBAAsB,GAAGA,CAAA,KAAM;IACpC,IAAKH,IAAI,EAAEI,QAAQ,EAAG;MACrBH,mBAAmB,CAAED,IAAI,EAAED,IAAK,CAAC;MACjC;IACD;IACAE,mBAAmB,CAAED,IAAK,CAAC;EAC5B,CAAC;EAED,MAAMK,WAAW,GAAGL,IAAI,CAACM,IAAI,GAAG,GAAG,GAAG,IAAAC,6BAAsB,EAAER,IAAK,CAAC;EACpE,MAAM;IAAES;EAAU,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;EACrD,MAAMC,UAAU,GAAGH,SAAS,CAC1B,GAAGR,IAAI,CAACY,IAAM,IAAI,IAAAL,6BAAsB,EAAER,IAAK,CAAG,EACpD,CAAC;EAED,OACC,IAAAc,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA0C,GACxD,IAAAF,MAAA,CAAAC,aAAA,EAACtB,WAAA,CAAAwB,IAAI;IAACC,OAAO,EAAC,YAAY;IAACC,KAAK,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAM,GACnD,IAAAN,MAAA,CAAAC,aAAA,EAACtB,WAAA,CAAA4B,eAAe;IACfC,OAAO,EAAGnB,QAAU;IACpBoB,QAAQ,EAAGnB,sBAAwB;IACnCoB,uBAAuB,EAAG,IAAM;IAChCC,EAAE,EAAGb;EAAY,CACjB,CAAC,EACF,IAAAE,MAAA,CAAAC,aAAA;IAAOW,OAAO,EAAGd;EAAY,GAC5B,IAAAE,MAAA,CAAAC,aAAA,EAACnB,SAAA,CAAA+B,OAAY;IACZtB,QAAQ,EAAGL,IAAM;IACjB4B,IAAI,EAAGtB,WAAa;IACpBuB,OAAO,EAAGzB;EAAwB,CAClC,CACK,CACF,CACF,CAAC;AAER;AAAC,IAAA0B,QAAA,GAAAC,OAAA,CAAAJ,OAAA,GAEc5B,qBAAqB"}
+{"version":3,"names":["_components","require","_utils","_fontDemo","_interopRequireDefault","_lockUnlock","CollectionFontVariant","face","font","handleToggleVariant","selected","handleToggleActivation","fontFace","displayName","name","getFontFaceVariantName","kebabCase","unlock","componentsPrivateApis","checkboxId","slug","_react","createElement","className","Flex","justify","align","gap","CheckboxControl","checked","onChange","__nextHasNoMarginBottom","id","htmlFor","default","text","onClick","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tCheckboxControl,\n\tFlex,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { getFontFaceVariantName } from './utils';\nimport FontDemo from './font-demo';\nimport { unlock } from '../../../lock-unlock';\n\nfunction CollectionFontVariant( {\n\tface,\n\tfont,\n\thandleToggleVariant,\n\tselected,\n} ) {\n\tconst handleToggleActivation = () => {\n\t\tif ( font?.fontFace ) {\n\t\t\thandleToggleVariant( font, face );\n\t\t\treturn;\n\t\t}\n\t\thandleToggleVariant( font );\n\t};\n\n\tconst displayName = font.name + ' ' + getFontFaceVariantName( face );\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\tconst checkboxId = kebabCase(\n\t\t`${ font.slug }-${ getFontFaceVariantName( face ) }`\n\t);\n\n\treturn (\n\t\t<div className=\"font-library-modal__font-card\">\n\t\t\t<Flex justify=\"flex-start\" align=\"center\" gap=\"1rem\">\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tchecked={ selected }\n\t\t\t\t\tonChange={ handleToggleActivation }\n\t\t\t\t\t__nextHasNoMarginBottom={ true }\n\t\t\t\t\tid={ checkboxId }\n\t\t\t\t/>\n\t\t\t\t<label htmlFor={ checkboxId }>\n\t\t\t\t\t<FontDemo\n\t\t\t\t\t\tfont={ face }\n\t\t\t\t\t\ttext={ displayName }\n\t\t\t\t\t\tonClick={ handleToggleActivation }\n\t\t\t\t\t/>\n\t\t\t\t</label>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n\nexport default CollectionFontVariant;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AASA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAdA;AACA;AACA;;AAOA;AACA;AACA;;AAKA,SAASK,qBAAqBA,CAAE;EAC/BC,IAAI;EACJC,IAAI;EACJC,mBAAmB;EACnBC;AACD,CAAC,EAAG;EACH,MAAMC,sBAAsB,GAAGA,CAAA,KAAM;IACpC,IAAKH,IAAI,EAAEI,QAAQ,EAAG;MACrBH,mBAAmB,CAAED,IAAI,EAAED,IAAK,CAAC;MACjC;IACD;IACAE,mBAAmB,CAAED,IAAK,CAAC;EAC5B,CAAC;EAED,MAAMK,WAAW,GAAGL,IAAI,CAACM,IAAI,GAAG,GAAG,GAAG,IAAAC,6BAAsB,EAAER,IAAK,CAAC;EACpE,MAAM;IAAES;EAAU,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;EACrD,MAAMC,UAAU,GAAGH,SAAS,CAC1B,GAAGR,IAAI,CAACY,IAAM,IAAI,IAAAL,6BAAsB,EAAER,IAAK,CAAG,EACpD,CAAC;EAED,OACC,IAAAc,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA+B,GAC7C,IAAAF,MAAA,CAAAC,aAAA,EAACtB,WAAA,CAAAwB,IAAI;IAACC,OAAO,EAAC,YAAY;IAACC,KAAK,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAM,GACnD,IAAAN,MAAA,CAAAC,aAAA,EAACtB,WAAA,CAAA4B,eAAe;IACfC,OAAO,EAAGnB,QAAU;IACpBoB,QAAQ,EAAGnB,sBAAwB;IACnCoB,uBAAuB,EAAG,IAAM;IAChCC,EAAE,EAAGb;EAAY,CACjB,CAAC,EACF,IAAAE,MAAA,CAAAC,aAAA;IAAOW,OAAO,EAAGd;EAAY,GAC5B,IAAAE,MAAA,CAAAC,aAAA,EAACnB,SAAA,CAAA+B,OAAQ;IACR1B,IAAI,EAAGD,IAAM;IACb4B,IAAI,EAAGtB,WAAa;IACpBuB,OAAO,EAAGzB;EAAwB,CAClC,CACK,CACF,CACF,CAAC;AAER;AAAC,IAAA0B,QAAA,GAAAC,OAAA,CAAAJ,OAAA,GAEc5B,qBAAqB"}

package/build/components/global-styles/font-library-modal/font-card.js

@@ -9,7 +9,6 @@ var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _fontDemo = _interopRequireDefault(require("./font-demo"));
-var _previewStyles = require("./utils/preview-styles");
 var _icons = require("@wordpress/icons");
 /**
  * WordPress dependencies
@@ -22,32 +21,28 @@ var _icons = require("@wordpress/icons");
 function FontCard({
   font,
   onClick,
-  variantsText
+  variantsText,
+  navigatorPath
 }) {
-  const fakeFontFace = {
-    fontStyle: 'normal',
-    fontWeight: '400',
-    fontFamily: font.fontFamily,
-    fake: true
-  };
-  const displayFontFace = font.fontFace && font.fontFace.length ? font?.fontFace?.find(face => face.fontStyle === 'normal' && face.fontWeight === '400') || font.fontFace[0] : fakeFontFace;
-  const demoStyle = (0, _previewStyles.getFamilyPreviewStyle)(font);
   const variantsCount = font.fontFace?.length || 1;
   const style = {
     cursor: !!onClick ? 'pointer' : 'default'
   };
+  const navigator = (0, _components.__experimentalUseNavigator)();
   return (0, _react.createElement)(_components.Button, {
-    onClick: onClick,
+    onClick: () => {
+      onClick();
+      if (navigatorPath) {
+        navigator.goTo(navigatorPath);
+      }
+    },
     style: style,
     className: "font-library-modal__font-card"
   }, (0, _react.createElement)(_components.Flex, {
     justify: "space-between",
     wrap: false
   }, (0, _react.createElement)(_fontDemo.default, {
-    customPreviewUrl: font.preview,
-    fontFace: displayFontFace,
-    text: font.name,
-    style: demoStyle
+    font: font
   }), (0, _react.createElement)(_components.Flex, {
     justify: "flex-end"
   }, (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)(_components.__experimentalText, {

package/build/components/global-styles/font-library-modal/font-card.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_components","_fontDemo","_interopRequireDefault","_previewStyles","_icons","FontCard","font","onClick","variantsText","fakeFontFace","fontStyle","fontWeight","fontFamily","fake","displayFontFace","fontFace","length","find","face","demoStyle","getFamilyPreviewStyle","variantsCount","style","cursor","_react","createElement","Button","className","Flex","justify","wrap","default","customPreviewUrl","preview","text","name","FlexItem","__experimentalText","sprintf","_n","Icon","icon","chevronRight","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-card.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _n, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalText as Text,\n\tButton,\n\tFlex,\n\tFlexItem,\n\tIcon,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport FontDemo from './font-demo';\nimport { getFamilyPreviewStyle } from './utils/preview-styles';\nimport { chevronRight } from '@wordpress/icons';\n\nfunction FontCard( { font, onClick, variantsText } ) {\n\tconst fakeFontFace = {\n\t\tfontStyle: 'normal',\n\t\tfontWeight: '400',\n\t\tfontFamily: font.fontFamily,\n\t\tfake: true,\n\t};\n\n\tconst displayFontFace =\n\t\tfont.fontFace && font.fontFace.length\n\t\t\t? font?.fontFace?.find(\n\t\t\t\t\t( face ) =>\n\t\t\t\t\t\tface.fontStyle === 'normal' && face.fontWeight === '400'\n\t\t\t  ) || font.fontFace[ 0 ]\n\t\t\t: fakeFontFace;\n\n\tconst demoStyle = getFamilyPreviewStyle( font );\n\n\tconst variantsCount = font.fontFace?.length || 1;\n\n\tconst style = {\n\t\tcursor: !! onClick ? 'pointer' : 'default',\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\tonClick={ onClick }\n\t\t\tstyle={ style }\n\t\t\tclassName=\"font-library-modal__font-card\"\n\t\t>\n\t\t\t<Flex justify=\"space-between\" wrap={ false }>\n\t\t\t\t<FontDemo\n\t\t\t\t\tcustomPreviewUrl={ font.preview }\n\t\t\t\t\tfontFace={ displayFontFace }\n\t\t\t\t\ttext={ font.name }\n\t\t\t\t\tstyle={ demoStyle }\n\t\t\t\t/>\n\t\t\t\t<Flex justify=\"flex-end\">\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Text className=\"font-library-modal__font-card__count\">\n\t\t\t\t\t\t\t{ variantsText ||\n\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %d: Number of font variants. */\n\t\t\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t\t\t'%d variant',\n\t\t\t\t\t\t\t\t\t\t'%d variants',\n\t\t\t\t\t\t\t\t\t\tvariantsCount\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tvariantsCount\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Icon icon={ chevronRight } />\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t</Flex>\n\t\t</Button>\n\t);\n}\n\nexport default FontCard;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAWA,IAAAE,SAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAjBA;AACA;AACA;;AAUA;AACA;AACA;;AAKA,SAASM,QAAQA,CAAE;EAAEC,IAAI;EAAEC,OAAO;EAAEC;AAAa,CAAC,EAAG;EACpD,MAAMC,YAAY,GAAG;IACpBC,SAAS,EAAE,QAAQ;IACnBC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAEN,IAAI,CAACM,UAAU;IAC3BC,IAAI,EAAE;EACP,CAAC;EAED,MAAMC,eAAe,GACpBR,IAAI,CAACS,QAAQ,IAAIT,IAAI,CAACS,QAAQ,CAACC,MAAM,GAClCV,IAAI,EAAES,QAAQ,EAAEE,IAAI,CAClBC,IAAI,IACLA,IAAI,CAACR,SAAS,KAAK,QAAQ,IAAIQ,IAAI,CAACP,UAAU,KAAK,KACpD,CAAC,IAAIL,IAAI,CAACS,QAAQ,CAAE,CAAC,CAAE,GACvBN,YAAY;EAEhB,MAAMU,SAAS,GAAG,IAAAC,oCAAqB,EAAEd,IAAK,CAAC;EAE/C,MAAMe,aAAa,GAAGf,IAAI,CAACS,QAAQ,EAAEC,MAAM,IAAI,CAAC;EAEhD,MAAMM,KAAK,GAAG;IACbC,MAAM,EAAE,CAAC,CAAEhB,OAAO,GAAG,SAAS,GAAG;EAClC,CAAC;EAED,OACC,IAAAiB,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA0B,MAAM;IACNnB,OAAO,EAAGA,OAAS;IACnBe,KAAK,EAAGA,KAAO;IACfK,SAAS,EAAC;EAA+B,GAEzC,IAAAH,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA4B,IAAI;IAACC,OAAO,EAAC,eAAe;IAACC,IAAI,EAAG;EAAO,GAC3C,IAAAN,MAAA,CAAAC,aAAA,EAACxB,SAAA,CAAA8B,OAAQ;IACRC,gBAAgB,EAAG1B,IAAI,CAAC2B,OAAS;IACjClB,QAAQ,EAAGD,eAAiB;IAC5BoB,IAAI,EAAG5B,IAAI,CAAC6B,IAAM;IAClBb,KAAK,EAAGH;EAAW,CACnB,CAAC,EACF,IAAAK,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA4B,IAAI;IAACC,OAAO,EAAC;EAAU,GACvB,IAAAL,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAAoC,QAAQ,QACR,IAAAZ,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAAqC,kBAAI;IAACV,SAAS,EAAC;EAAsC,GACnDnB,YAAY,IACb,IAAA8B,aAAO,GACN;EACA,IAAAC,QAAE,EACD,YAAY,EACZ,aAAa,EACblB,aACD,CAAC,EACDA,aACD,CACI,CACG,CAAC,EACX,IAAAG,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAAoC,QAAQ,QACR,IAAAZ,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAAwC,IAAI;IAACC,IAAI,EAAGC;EAAc,CAAE,CACpB,CACL,CACD,CACC,CAAC;AAEX;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAb,OAAA,GAEc1B,QAAQ"}
+{"version":3,"names":["_i18n","require","_components","_fontDemo","_interopRequireDefault","_icons","FontCard","font","onClick","variantsText","navigatorPath","variantsCount","fontFace","length","style","cursor","navigator","useNavigator","_react","createElement","Button","goTo","className","Flex","justify","wrap","default","FlexItem","__experimentalText","sprintf","_n","Icon","icon","chevronRight","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-card.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _n, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalText as Text,\n\tButton,\n\tFlex,\n\tFlexItem,\n\tIcon,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport FontDemo from './font-demo';\nimport { chevronRight } from '@wordpress/icons';\n\nfunction FontCard( { font, onClick, variantsText, navigatorPath } ) {\n\tconst variantsCount = font.fontFace?.length || 1;\n\n\tconst style = {\n\t\tcursor: !! onClick ? 'pointer' : 'default',\n\t};\n\n\tconst navigator = useNavigator();\n\n\treturn (\n\t\t<Button\n\t\t\tonClick={ () => {\n\t\t\t\tonClick();\n\t\t\t\tif ( navigatorPath ) {\n\t\t\t\t\tnavigator.goTo( navigatorPath );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tstyle={ style }\n\t\t\tclassName=\"font-library-modal__font-card\"\n\t\t>\n\t\t\t<Flex justify=\"space-between\" wrap={ false }>\n\t\t\t\t<FontDemo font={ font } />\n\t\t\t\t<Flex justify=\"flex-end\">\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Text className=\"font-library-modal__font-card__count\">\n\t\t\t\t\t\t\t{ variantsText ||\n\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %d: Number of font variants. */\n\t\t\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t\t\t'%d variant',\n\t\t\t\t\t\t\t\t\t\t'%d variants',\n\t\t\t\t\t\t\t\t\t\tvariantsCount\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tvariantsCount\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Icon icon={ chevronRight } />\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t</Flex>\n\t\t</Button>\n\t);\n}\n\nexport default FontCard;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAYA,IAAAE,SAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAjBA;AACA;AACA;;AAWA;AACA;AACA;;AAIA,SAASK,QAAQA,CAAE;EAAEC,IAAI;EAAEC,OAAO;EAAEC,YAAY;EAAEC;AAAc,CAAC,EAAG;EACnE,MAAMC,aAAa,GAAGJ,IAAI,CAACK,QAAQ,EAAEC,MAAM,IAAI,CAAC;EAEhD,MAAMC,KAAK,GAAG;IACbC,MAAM,EAAE,CAAC,CAAEP,OAAO,GAAG,SAAS,GAAG;EAClC,CAAC;EAED,MAAMQ,SAAS,GAAG,IAAAC,sCAAY,EAAC,CAAC;EAEhC,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAAkB,MAAM;IACNZ,OAAO,EAAGA,CAAA,KAAM;MACfA,OAAO,CAAC,CAAC;MACT,IAAKE,aAAa,EAAG;QACpBM,SAAS,CAACK,IAAI,CAAEX,aAAc,CAAC;MAChC;IACD,CAAG;IACHI,KAAK,EAAGA,KAAO;IACfQ,SAAS,EAAC;EAA+B,GAEzC,IAAAJ,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAAqB,IAAI;IAACC,OAAO,EAAC,eAAe;IAACC,IAAI,EAAG;EAAO,GAC3C,IAAAP,MAAA,CAAAC,aAAA,EAAChB,SAAA,CAAAuB,OAAQ;IAACnB,IAAI,EAAGA;EAAM,CAAE,CAAC,EAC1B,IAAAW,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAAqB,IAAI;IAACC,OAAO,EAAC;EAAU,GACvB,IAAAN,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAAyB,QAAQ,QACR,IAAAT,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAA0B,kBAAI;IAACN,SAAS,EAAC;EAAsC,GACnDb,YAAY,IACb,IAAAoB,aAAO,GACN;EACA,IAAAC,QAAE,EACD,YAAY,EACZ,aAAa,EACbnB,aACD,CAAC,EACDA,aACD,CACI,CACG,CAAC,EACX,IAAAO,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAAyB,QAAQ,QACR,IAAAT,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAA6B,IAAI;IAACC,IAAI,EAAGC;EAAc,CAAE,CACpB,CACL,CACD,CACC,CAAC;AAEX;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAT,OAAA,GAEcpB,QAAQ"}

package/build/components/global-styles/font-library-modal/font-collection.js

@@ -11,15 +11,15 @@ var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
-var _tabPanelLayout = _interopRequireDefault(require("./tab-panel-layout"));
 var _context = require("./context");
 var _fontCard = _interopRequireDefault(require("./font-card"));
 var _filterFonts = _interopRequireDefault(require("./utils/filter-fonts"));
-var _collectionFontDetails = _interopRequireDefault(require("./collection-font-details"));
 var _toggleFont = require("./utils/toggleFont");
 var _fontsOutline = require("./utils/fonts-outline");
 var _googleFontsConfirmDialog = _interopRequireDefault(require("./google-fonts-confirm-dialog"));
 var _utils = require("./utils");
+var _sortFontFaces = require("./utils/sort-font-faces");
+var _collectionFontVariant = _interopRequireDefault(require("./collection-font-variant"));
 /**
  * WordPress dependencies
  */
@@ -32,13 +32,15 @@ const DEFAULT_CATEGORY = {
   slug: 'all',
   name: (0, _i18n._x)('All', 'font categories')
 };
+const LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission';
+const MIN_WINDOW_HEIGHT = 500;
 function FontCollection({
   slug
 }) {
   var _selectedCollection$c;
   const requiresPermission = slug === 'google-fonts';
   const getGoogleFontsPermissionFromStorage = () => {
-    return window.localStorage.getItem('wp-font-library-google-fonts-permission') === 'true';
+    return window.localStorage.getItem(LOCAL_STORAGE_ITEM) === 'true';
   };
   const [selectedFont, setSelectedFont] = (0, _element.useState)(null);
   const [fontsToInstall, setFontsToInstall] = (0, _element.useState)([]);
@@ -49,6 +51,7 @@ function FontCollection({
     collections,
     getFontCollection,
     installFont,
+    isInstalling,
     notice,
     setNotice
   } = (0, _element.useContext)(_context.FontLibraryContext);
@@ -61,6 +64,10 @@ function FontCollection({
     window.addEventListener('storage', handleStorage);
     return () => window.removeEventListener('storage', handleStorage);
   }, [slug, requiresPermission]);
+  const revokeAccess = () => {
+    window.localStorage.setItem(LOCAL_STORAGE_ITEM, 'false');
+    window.dispatchEvent(new Event('storage'));
+  };
   (0, _element.useEffect)(() => {
     const fetchFontCollection = async () => {
       try {
@@ -95,7 +102,8 @@ function FontCollection({
 
   // NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px
   // The height of each font family item is 61px.
-  const pageSize = Math.floor((window.innerHeight - 417) / 61);
+  const windowHeight = Math.max(window.innerHeight, MIN_WINDOW_HEIGHT);
+  const pageSize = Math.floor((windowHeight - 417) / 61);
   const totalPages = Math.ceil(fonts.length / pageSize);
   const itemsStart = (page - 1) * pageSize;
   const itemsLimit = page * pageSize;
@@ -126,9 +134,6 @@ function FontCollection({
     });
     setPage(1);
   };
-  const handleUnselectFont = () => {
-    setSelectedFont(null);
-  };
   const handleToggleVariant = (font, face) => {
     const newFontsToInstall = (0, _toggleFont.toggleFont)(font, face, fontsToInstall);
     setFontsToInstall(newFontsToInstall);
@@ -171,28 +176,53 @@ function FontCollection({
     }
     resetFontsToInstall();
   };
-  let footerComponent = null;
-  if (selectedFont) {
-    footerComponent = (0, _react.createElement)(InstallFooter, {
-      handleInstall: handleInstall,
-      isDisabled: fontsToInstall.length === 0
-    });
-  } else if (!renderConfirmDialog && totalPages > 1) {
-    footerComponent = (0, _react.createElement)(PaginationFooter, {
-      page: page,
-      totalPages: totalPages,
-      setPage: setPage
-    });
+  const getSortedFontFaces = fontFamily => {
+    if (!fontFamily) {
+      return [];
+    }
+    if (!fontFamily.fontFace || !fontFamily.fontFace.length) {
+      return [{
+        fontFamily: fontFamily.fontFamily,
+        fontStyle: 'normal',
+        fontWeight: '400'
+      }];
+    }
+    return (0, _sortFontFaces.sortFontFaces)(fontFamily.fontFace);
+  };
+  if (renderConfirmDialog) {
+    return (0, _react.createElement)(_googleFontsConfirmDialog.default, null);
   }
-  return (0, _react.createElement)(_tabPanelLayout.default, {
-    title: !selectedFont ? selectedCollection.name : selectedFont.name,
-    description: !selectedFont ? selectedCollection.description : (0, _i18n.__)('Select font variants to install.'),
-    notice: notice,
-    handleBack: !!selectedFont && handleUnselectFont,
-    footer: footerComponent
-  }, renderConfirmDialog && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 8
-  }), (0, _react.createElement)(_googleFontsConfirmDialog.default, null)), !renderConfirmDialog && !selectedFont && (0, _react.createElement)(_components.Flex, null, (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)(_components.__experimentalInputControl, {
+  const ActionsComponent = () => {
+    if (slug !== 'google-fonts' || renderConfirmDialog || selectedFont) {
+      return null;
+    }
+    return (0, _react.createElement)(_components.DropdownMenu, {
+      icon: _icons.moreVertical,
+      label: (0, _i18n.__)('Actions'),
+      popoverProps: {
+        position: 'bottom left'
+      },
+      controls: [{
+        title: (0, _i18n.__)('Revoke access to Google Fonts'),
+        onClick: revokeAccess
+      }]
+    });
+  };
+  return (0, _react.createElement)("div", {
+    className: "font-library-modal__tabpanel-layout"
+  }, (0, _react.createElement)(_components.__experimentalNavigatorProvider, {
+    initialPath: "/",
+    className: "font-library-modal__tabpanel-layout"
+  }, (0, _react.createElement)(_components.__experimentalNavigatorScreen, {
+    path: "/"
+  }, (0, _react.createElement)(_components.__experimentalHStack, {
+    justify: "space-between"
+  }, (0, _react.createElement)(_components.__experimentalHeading, {
+    level: 2,
+    size: 13
+  }, selectedCollection.name), (0, _react.createElement)(ActionsComponent, null)), (0, _react.createElement)(_components.__experimentalText, null, selectedCollection.description), (0, _react.createElement)(_components.__experimentalSpacer, {
+    margin: 4
+  }), (0, _react.createElement)(_components.Flex, null, (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)(_components.__experimentalInputControl, {
     value: filters.search,
     placeholder: (0, _i18n.__)('Font name…'),
     label: (0, _i18n.__)('Search'),
@@ -213,27 +243,67 @@ function FontCollection({
     key: category.slug
   }, category.name))))), (0, _react.createElement)(_components.__experimentalSpacer, {
     margin: 4
-  }), !renderConfirmDialog && !selectedCollection?.font_families && !notice && (0, _react.createElement)(_components.Spinner, null), !renderConfirmDialog && !!selectedCollection?.font_families?.length && !fonts.length && (0, _react.createElement)(_components.__experimentalText, null, (0, _i18n.__)('No fonts found. Try with a different search term')), !renderConfirmDialog && selectedFont && (0, _react.createElement)(_collectionFontDetails.default, {
-    font: selectedFont,
-    handleToggleVariant: handleToggleVariant,
-    fontToInstallOutline: fontToInstallOutline
-  }), !renderConfirmDialog && !selectedFont && (0, _react.createElement)("div", {
+  }), !selectedCollection?.font_families && !notice && (0, _react.createElement)(_components.Spinner, null), !!selectedCollection?.font_families?.length && !fonts.length && (0, _react.createElement)(_components.__experimentalText, null, (0, _i18n.__)('No fonts found. Try with a different search term')), (0, _react.createElement)("div", {
     className: "font-library-modal__fonts-grid__main"
   }, items.map(font => (0, _react.createElement)(_fontCard.default, {
     key: font.font_family_settings.slug,
     font: font.font_family_settings,
+    navigatorPath: '/fontFamily',
     onClick: () => {
       setSelectedFont(font.font_family_settings);
     }
-  }))));
-}
-function PaginationFooter({
-  page,
-  totalPages,
-  setPage
-}) {
-  return (0, _react.createElement)(_components.Flex, {
-    justify: "center"
+  })))), (0, _react.createElement)(_components.__experimentalNavigatorScreen, {
+    path: "/fontFamily"
+  }, (0, _react.createElement)(_components.Flex, {
+    justify: "flex-start"
+  }, (0, _react.createElement)(_components.__experimentalNavigatorToParentButton, {
+    icon: _icons.chevronLeft,
+    isSmall: true,
+    onClick: () => {
+      setSelectedFont(null);
+    },
+    "aria-label": (0, _i18n.__)('Navigate to the previous view')
+  }), (0, _react.createElement)(_components.__experimentalHeading, {
+    level: 2,
+    size: 13,
+    className: "edit-site-global-styles-header"
+  }, selectedFont?.name)), notice && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.__experimentalSpacer, {
+    margin: 1
+  }), (0, _react.createElement)(_components.Notice, {
+    status: notice.type,
+    onRemove: () => setNotice(null)
+  }, notice.message), (0, _react.createElement)(_components.__experimentalSpacer, {
+    margin: 1
+  })), (0, _react.createElement)(_components.__experimentalSpacer, {
+    margin: 4
+  }), (0, _react.createElement)(_components.__experimentalText, null, " ", (0, _i18n.__)('Select font variants to install.'), " "), (0, _react.createElement)(_components.__experimentalSpacer, {
+    margin: 4
+  }), (0, _react.createElement)(_components.__experimentalVStack, {
+    spacing: 0
+  }, (0, _react.createElement)(_components.__experimentalSpacer, {
+    margin: 8
+  }), getSortedFontFaces(selectedFont).map((face, i) => (0, _react.createElement)(_collectionFontVariant.default, {
+    font: selectedFont,
+    face: face,
+    key: `face${i}`,
+    handleToggleVariant: handleToggleVariant,
+    selected: (0, _fontsOutline.isFontFontFaceInOutline)(selectedFont.slug, selectedFont.fontFace ? face : null,
+    // If the font has no fontFace, we want to check if the font is in the outline
+    fontToInstallOutline)
+  }))), (0, _react.createElement)(_components.__experimentalSpacer, {
+    margin: 16
+  }))), selectedFont && (0, _react.createElement)(_components.Flex, {
+    justify: "flex-end",
+    className: "font-library-modal__tabpanel-layout__footer"
+  }, (0, _react.createElement)(_components.Button, {
+    variant: "primary",
+    onClick: handleInstall,
+    isBusy: isInstalling,
+    disabled: fontsToInstall.length === 0 || isInstalling,
+    __experimentalIsFocusable: true
+  }, (0, _i18n.__)('Install'))), !selectedFont && (0, _react.createElement)(_components.Flex, {
+    justify: "center",
+    className: "font-library-modal__tabpanel-layout__footer"
   }, (0, _react.createElement)(_components.Button, {
     label: (0, _i18n.__)('First page'),
     size: "compact",
@@ -278,24 +348,7 @@ function PaginationFooter({
     onClick: () => setPage(totalPages),
     disabled: page === totalPages,
     __experimentalIsFocusable: true
-  }, (0, _react.createElement)("span", null, "\xBB")));
-}
-function InstallFooter({
-  handleInstall,
-  isDisabled
-}) {
-  const {
-    isInstalling
-  } = (0, _element.useContext)(_context.FontLibraryContext);
-  return (0, _react.createElement)(_components.Flex, {
-    justify: "flex-end"
-  }, (0, _react.createElement)(_components.Button, {
-    variant: "primary",
-    onClick: handleInstall,
-    isBusy: isInstalling,
-    disabled: isDisabled || isInstalling,
-    __experimentalIsFocusable: true
-  }, (0, _i18n.__)('Install')));
+  }, (0, _react.createElement)("span", null, "\xBB"))));
 }
 var _default = exports.default = FontCollection;
 //# sourceMappingURL=font-collection.js.map

package/build/components/global-styles/font-library-modal/font-collection.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_components","_compose","_i18n","_icons","_tabPanelLayout","_interopRequireDefault","_context","_fontCard","_filterFonts","_collectionFontDetails","_toggleFont","_fontsOutline","_googleFontsConfirmDialog","_utils","DEFAULT_CATEGORY","slug","name","_x","FontCollection","_selectedCollection$c","requiresPermission","getGoogleFontsPermissionFromStorage","window","localStorage","getItem","selectedFont","setSelectedFont","useState","fontsToInstall","setFontsToInstall","page","setPage","filters","setFilters","renderConfirmDialog","setRenderConfirmDialog","collections","getFontCollection","installFont","notice","setNotice","useContext","FontLibraryContext","selectedCollection","find","collection","useEffect","handleStorage","addEventListener","removeEventListener","fetchFontCollection","resetFilters","e","type","message","collectionFonts","useMemo","_selectedCollection$f","font_families","collectionCategories","categories","fonts","filterFonts","pageSize","Math","floor","innerHeight","totalPages","ceil","length","itemsStart","itemsLimit","items","slice","handleCategoryFilter","category","handleUpdateSearchInput","value","search","debouncedUpdateSearchInput","debounce","resetSearch","handleUnselectFont","handleToggleVariant","font","face","newFontsToInstall","toggleFont","fontToInstallOutline","getFontsOutline","resetFontsToInstall","handleInstall","fontFamily","fontFace","Promise","all","map","src","file","downloadFontFaceAssets","error","__","footerComponent","_react","createElement","InstallFooter","isDisabled","PaginationFooter","default","title","description","handleBack","footer","Fragment","__experimentalSpacer","margin","Flex","FlexItem","__experimentalInputControl","placeholder","label","onChange","prefix","Icon","icon","suffix","closeSmall","onClick","SelectControl","key","Spinner","__experimentalText","className","font_family_settings","justify","Button","size","disabled","__experimentalIsFocusable","__experimentalHStack","expanded","spacing","createInterpolateElement","sprintf","CurrenPageControl","options","Array","i","newPage","parseInt","__nextHasNoMarginBottom","isInstalling","variant","isBusy","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-collection.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseState,\n\tuseMemo,\n\tcreateInterpolateElement,\n} from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalInputControl as InputControl,\n\t__experimentalText as Text,\n\t__experimentalHStack as HStack,\n\tSelectControl,\n\tSpinner,\n\tIcon,\n\tFlexItem,\n\tFlex,\n\tButton,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { sprintf, __, _x } from '@wordpress/i18n';\nimport { search, closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport TabPanelLayout from './tab-panel-layout';\nimport { FontLibraryContext } from './context';\nimport FontCard from './font-card';\nimport filterFonts from './utils/filter-fonts';\nimport CollectionFontDetails from './collection-font-details';\nimport { toggleFont } from './utils/toggleFont';\nimport { getFontsOutline } from './utils/fonts-outline';\nimport GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';\nimport { downloadFontFaceAssets } from './utils';\n\nconst DEFAULT_CATEGORY = {\n\tslug: 'all',\n\tname: _x( 'All', 'font categories' ),\n};\nfunction FontCollection( { slug } ) {\n\tconst requiresPermission = slug === 'google-fonts';\n\n\tconst getGoogleFontsPermissionFromStorage = () => {\n\t\treturn (\n\t\t\twindow.localStorage.getItem(\n\t\t\t\t'wp-font-library-google-fonts-permission'\n\t\t\t) === 'true'\n\t\t);\n\t};\n\n\tconst [ selectedFont, setSelectedFont ] = useState( null );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState( [] );\n\tconst [ page, setPage ] = useState( 1 );\n\tconst [ filters, setFilters ] = useState( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { collections, getFontCollection, installFont, notice, setNotice } =\n\t\tuseContext( FontLibraryContext );\n\tconst selectedCollection = collections.find(\n\t\t( collection ) => collection.slug === slug\n\t);\n\n\tuseEffect( () => {\n\t\tconst handleStorage = () => {\n\t\t\tsetRenderConfirmDialog(\n\t\t\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t\t\t);\n\t\t};\n\t\thandleStorage();\n\t\twindow.addEventListener( 'storage', handleStorage );\n\t\treturn () => window.removeEventListener( 'storage', handleStorage );\n\t}, [ slug, requiresPermission ] );\n\n\tuseEffect( () => {\n\t\tconst fetchFontCollection = async () => {\n\t\t\ttry {\n\t\t\t\tawait getFontCollection( slug );\n\t\t\t\tresetFilters();\n\t\t\t} catch ( e ) {\n\t\t\t\tif ( ! notice ) {\n\t\t\t\t\tsetNotice( {\n\t\t\t\t\t\ttype: 'error',\n\t\t\t\t\t\tmessage: e?.message,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tfetchFontCollection();\n\t}, [ slug, getFontCollection, setNotice, notice ] );\n\n\tuseEffect( () => {\n\t\tsetSelectedFont( null );\n\t\tsetNotice( null );\n\t}, [ slug, setNotice ] );\n\n\tuseEffect( () => {\n\t\t// If the selected fonts change, reset the selected fonts to install\n\t\tsetFontsToInstall( [] );\n\t}, [ selectedFont ] );\n\n\tconst collectionFonts = useMemo(\n\t\t() => selectedCollection?.font_families ?? [],\n\t\t[ selectedCollection ]\n\t);\n\tconst collectionCategories = selectedCollection?.categories ?? [];\n\n\tconst categories = [ DEFAULT_CATEGORY, ...collectionCategories ];\n\n\tconst fonts = useMemo(\n\t\t() => filterFonts( collectionFonts, filters ),\n\t\t[ collectionFonts, filters ]\n\t);\n\n\t// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px\n\t// The height of each font family item is 61px.\n\tconst pageSize = Math.floor( ( window.innerHeight - 417 ) / 61 );\n\tconst totalPages = Math.ceil( fonts.length / pageSize );\n\tconst itemsStart = ( page - 1 ) * pageSize;\n\tconst itemsLimit = page * pageSize;\n\tconst items = fonts.slice( itemsStart, itemsLimit );\n\n\tconst handleCategoryFilter = ( category ) => {\n\t\tsetFilters( { ...filters, category } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleUpdateSearchInput = ( value ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst resetFilters = () => {\n\t\tsetFilters( {} );\n\t\tsetPage( 1 );\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetFilters( { ...filters, search: '' } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleUnselectFont = () => {\n\t\tsetSelectedFont( null );\n\t};\n\n\tconst handleToggleVariant = ( font, face ) => {\n\t\tconst newFontsToInstall = toggleFont( font, face, fontsToInstall );\n\t\tsetFontsToInstall( newFontsToInstall );\n\t};\n\n\tconst fontToInstallOutline = getFontsOutline( fontsToInstall );\n\n\tconst resetFontsToInstall = () => {\n\t\tsetFontsToInstall( [] );\n\t};\n\n\tconst handleInstall = async () => {\n\t\tsetNotice( null );\n\n\t\tconst fontFamily = fontsToInstall[ 0 ];\n\n\t\ttry {\n\t\t\tif ( fontFamily?.fontFace ) {\n\t\t\t\tawait Promise.all(\n\t\t\t\t\tfontFamily.fontFace.map( async ( fontFace ) => {\n\t\t\t\t\t\tif ( fontFace.src ) {\n\t\t\t\t\t\t\tfontFace.file = await downloadFontFaceAssets(\n\t\t\t\t\t\t\t\tfontFace.src\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} )\n\t\t\t\t);\n\t\t\t}\n\t\t} catch ( error ) {\n\t\t\t// If any of the fonts fail to download,\n\t\t\t// show an error notice and stop the request from being sent.\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: __(\n\t\t\t\t\t'Error installing the fonts, could not be downloaded.'\n\t\t\t\t),\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait installFont( fontFamily );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Fonts were installed successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: error.message,\n\t\t\t} );\n\t\t}\n\t\tresetFontsToInstall();\n\t};\n\n\tlet footerComponent = null;\n\tif ( selectedFont ) {\n\t\tfooterComponent = (\n\t\t\t<InstallFooter\n\t\t\t\thandleInstall={ handleInstall }\n\t\t\t\tisDisabled={ fontsToInstall.length === 0 }\n\t\t\t/>\n\t\t);\n\t} else if ( ! renderConfirmDialog && totalPages > 1 ) {\n\t\tfooterComponent = (\n\t\t\t<PaginationFooter\n\t\t\t\tpage={ page }\n\t\t\t\ttotalPages={ totalPages }\n\t\t\t\tsetPage={ setPage }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<TabPanelLayout\n\t\t\ttitle={\n\t\t\t\t! selectedFont ? selectedCollection.name : selectedFont.name\n\t\t\t}\n\t\t\tdescription={\n\t\t\t\t! selectedFont\n\t\t\t\t\t? selectedCollection.description\n\t\t\t\t\t: __( 'Select font variants to install.' )\n\t\t\t}\n\t\t\tnotice={ notice }\n\t\t\thandleBack={ !! selectedFont && handleUnselectFont }\n\t\t\tfooter={ footerComponent }\n\t\t>\n\t\t\t{ renderConfirmDialog && (\n\t\t\t\t<>\n\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t<GoogleFontsConfirmDialog />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedFont && (\n\t\t\t\t<Flex>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\tplaceholder={ __( 'Font name…' ) }\n\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\tprefix={ <Icon icon={ search } /> }\n\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\tfilters?.search ? (\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\t\tonClick={ resetSearch }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tvalue={ category.slug }\n\t\t\t\t\t\t\t\t\t\tkey={ category.slug }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ category.name }\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t) }\n\n\t\t\t<Spacer margin={ 4 } />\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t! selectedCollection?.font_families &&\n\t\t\t\t! notice && <Spinner /> }\n\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t!! selectedCollection?.font_families?.length &&\n\t\t\t\t! fonts.length && (\n\t\t\t\t\t<Text>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'No fonts found. Try with a different search term'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && selectedFont && (\n\t\t\t\t<CollectionFontDetails\n\t\t\t\t\tfont={ selectedFont }\n\t\t\t\t\thandleToggleVariant={ handleToggleVariant }\n\t\t\t\t\tfontToInstallOutline={ fontToInstallOutline }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedFont && (\n\t\t\t\t<div className=\"font-library-modal__fonts-grid__main\">\n\t\t\t\t\t{ items.map( ( font ) => (\n\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\tkey={ font.font_family_settings.slug }\n\t\t\t\t\t\t\tfont={ font.font_family_settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetSelectedFont( font.font_family_settings );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</TabPanelLayout>\n\t);\n}\n\nfunction PaginationFooter( { page, totalPages, setPage } ) {\n\treturn (\n\t\t<Flex justify=\"center\">\n\t\t\t<Button\n\t\t\t\tlabel={ __( 'First page' ) }\n\t\t\t\tsize=\"compact\"\n\t\t\t\tonClick={ () => setPage( 1 ) }\n\t\t\t\tdisabled={ page === 1 }\n\t\t\t\t__experimentalIsFocusable\n\t\t\t>\n\t\t\t\t<span>«</span>\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\tsize=\"compact\"\n\t\t\t\tonClick={ () => setPage( page - 1 ) }\n\t\t\t\tdisabled={ page === 1 }\n\t\t\t\t__experimentalIsFocusable\n\t\t\t>\n\t\t\t\t<span>‹</span>\n\t\t\t</Button>\n\t\t\t<HStack justify=\"flex-start\" expanded={ false } spacing={ 2 }>\n\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t// translators: %s: Total number of pages.\n\t\t\t\t\t\t_x( 'Page <CurrenPageControl /> of %s', 'paging' ),\n\t\t\t\t\t\ttotalPages\n\t\t\t\t\t),\n\t\t\t\t\t{\n\t\t\t\t\t\tCurrenPageControl: (\n\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\taria-label={ __( 'Current page' ) }\n\t\t\t\t\t\t\t\tvalue={ page }\n\t\t\t\t\t\t\t\toptions={ [ ...Array( totalPages ) ].map(\n\t\t\t\t\t\t\t\t\t( e, i ) => {\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\tlabel: i + 1,\n\t\t\t\t\t\t\t\t\t\t\tvalue: i + 1,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ ( newPage ) =>\n\t\t\t\t\t\t\t\t\tsetPage( parseInt( newPage ) )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsize={ 'compact' }\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t<Button\n\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\tsize=\"compact\"\n\t\t\t\tonClick={ () => setPage( page + 1 ) }\n\t\t\t\tdisabled={ page === totalPages }\n\t\t\t\t__experimentalIsFocusable\n\t\t\t>\n\t\t\t\t<span>›</span>\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tlabel={ __( 'Last page' ) }\n\t\t\t\tsize=\"compact\"\n\t\t\t\tonClick={ () => setPage( totalPages ) }\n\t\t\t\tdisabled={ page === totalPages }\n\t\t\t\t__experimentalIsFocusable\n\t\t\t>\n\t\t\t\t<span>»</span>\n\t\t\t</Button>\n\t\t</Flex>\n\t);\n}\n\nfunction InstallFooter( { handleInstall, isDisabled } ) {\n\tconst { isInstalling } = useContext( FontLibraryContext );\n\n\treturn (\n\t\t<Flex justify=\"flex-end\">\n\t\t\t<Button\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ handleInstall }\n\t\t\t\tisBusy={ isInstalling }\n\t\t\t\tdisabled={ isDisabled || isInstalling }\n\t\t\t\t__experimentalIsFocusable\n\t\t\t>\n\t\t\t\t{ __( 'Install' ) }\n\t\t\t</Button>\n\t\t</Flex>\n\t);\n}\n\nexport default FontCollection;\n"],"mappings":"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"}
+{"version":3,"names":["_element","require","_components","_compose","_i18n","_icons","_context","_fontCard","_interopRequireDefault","_filterFonts","_toggleFont","_fontsOutline","_googleFontsConfirmDialog","_utils","_sortFontFaces","_collectionFontVariant","DEFAULT_CATEGORY","slug","name","_x","LOCAL_STORAGE_ITEM","MIN_WINDOW_HEIGHT","FontCollection","_selectedCollection$c","requiresPermission","getGoogleFontsPermissionFromStorage","window","localStorage","getItem","selectedFont","setSelectedFont","useState","fontsToInstall","setFontsToInstall","page","setPage","filters","setFilters","renderConfirmDialog","setRenderConfirmDialog","collections","getFontCollection","installFont","isInstalling","notice","setNotice","useContext","FontLibraryContext","selectedCollection","find","collection","useEffect","handleStorage","addEventListener","removeEventListener","revokeAccess","setItem","dispatchEvent","Event","fetchFontCollection","resetFilters","e","type","message","collectionFonts","useMemo","_selectedCollection$f","font_families","collectionCategories","categories","fonts","filterFonts","windowHeight","Math","max","innerHeight","pageSize","floor","totalPages","ceil","length","itemsStart","itemsLimit","items","slice","handleCategoryFilter","category","handleUpdateSearchInput","value","search","debouncedUpdateSearchInput","debounce","resetSearch","handleToggleVariant","font","face","newFontsToInstall","toggleFont","fontToInstallOutline","getFontsOutline","resetFontsToInstall","handleInstall","fontFamily","fontFace","Promise","all","map","src","file","downloadFontFaceAssets","error","__","getSortedFontFaces","fontStyle","fontWeight","sortFontFaces","_react","createElement","default","ActionsComponent","DropdownMenu","icon","moreVertical","label","popoverProps","position","controls","title","onClick","className","__experimentalNavigatorProvider","initialPath","__experimentalNavigatorScreen","path","__experimentalHStack","justify","__experimentalHeading","level","size","__experimentalText","description","__experimentalSpacer","margin","Flex","FlexItem","__experimentalInputControl","placeholder","onChange","prefix","Icon","suffix","closeSmall","SelectControl","key","Spinner","font_family_settings","navigatorPath","__experimentalNavigatorToParentButton","chevronLeft","isSmall","Fragment","Notice","status","onRemove","__experimentalVStack","spacing","i","selected","isFontFontFaceInOutline","Button","variant","isBusy","disabled","__experimentalIsFocusable","expanded","createInterpolateElement","sprintf","CurrenPageControl","options","Array","newPage","parseInt","__nextHasNoMarginBottom","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-collection.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseState,\n\tuseMemo,\n\tcreateInterpolateElement,\n} from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalInputControl as InputControl,\n\t__experimentalText as Text,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n\t__experimentalHeading as Heading,\n\tNotice,\n\tSelectControl,\n\tSpinner,\n\tIcon,\n\tFlexItem,\n\tFlex,\n\tButton,\n\tDropdownMenu,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { sprintf, __, _x } from '@wordpress/i18n';\nimport {\n\tsearch,\n\tcloseSmall,\n\tmoreVertical,\n\tchevronLeft,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport FontCard from './font-card';\nimport filterFonts from './utils/filter-fonts';\nimport { toggleFont } from './utils/toggleFont';\nimport {\n\tgetFontsOutline,\n\tisFontFontFaceInOutline,\n} from './utils/fonts-outline';\nimport GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';\nimport { downloadFontFaceAssets } from './utils';\nimport { sortFontFaces } from './utils/sort-font-faces';\nimport CollectionFontVariant from './collection-font-variant';\n\nconst DEFAULT_CATEGORY = {\n\tslug: 'all',\n\tname: _x( 'All', 'font categories' ),\n};\n\nconst LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission';\nconst MIN_WINDOW_HEIGHT = 500;\n\nfunction FontCollection( { slug } ) {\n\tconst requiresPermission = slug === 'google-fonts';\n\n\tconst getGoogleFontsPermissionFromStorage = () => {\n\t\treturn window.localStorage.getItem( LOCAL_STORAGE_ITEM ) === 'true';\n\t};\n\n\tconst [ selectedFont, setSelectedFont ] = useState( null );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState( [] );\n\tconst [ page, setPage ] = useState( 1 );\n\tconst [ filters, setFilters ] = useState( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst {\n\t\tcollections,\n\t\tgetFontCollection,\n\t\tinstallFont,\n\t\tisInstalling,\n\t\tnotice,\n\t\tsetNotice,\n\t} = useContext( FontLibraryContext );\n\tconst selectedCollection = collections.find(\n\t\t( collection ) => collection.slug === slug\n\t);\n\n\tuseEffect( () => {\n\t\tconst handleStorage = () => {\n\t\t\tsetRenderConfirmDialog(\n\t\t\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t\t\t);\n\t\t};\n\t\thandleStorage();\n\t\twindow.addEventListener( 'storage', handleStorage );\n\t\treturn () => window.removeEventListener( 'storage', handleStorage );\n\t}, [ slug, requiresPermission ] );\n\n\tconst revokeAccess = () => {\n\t\twindow.localStorage.setItem( LOCAL_STORAGE_ITEM, 'false' );\n\t\twindow.dispatchEvent( new Event( 'storage' ) );\n\t};\n\n\tuseEffect( () => {\n\t\tconst fetchFontCollection = async () => {\n\t\t\ttry {\n\t\t\t\tawait getFontCollection( slug );\n\t\t\t\tresetFilters();\n\t\t\t} catch ( e ) {\n\t\t\t\tif ( ! notice ) {\n\t\t\t\t\tsetNotice( {\n\t\t\t\t\t\ttype: 'error',\n\t\t\t\t\t\tmessage: e?.message,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tfetchFontCollection();\n\t}, [ slug, getFontCollection, setNotice, notice ] );\n\n\tuseEffect( () => {\n\t\tsetSelectedFont( null );\n\t\tsetNotice( null );\n\t}, [ slug, setNotice ] );\n\n\tuseEffect( () => {\n\t\t// If the selected fonts change, reset the selected fonts to install\n\t\tsetFontsToInstall( [] );\n\t}, [ selectedFont ] );\n\n\tconst collectionFonts = useMemo(\n\t\t() => selectedCollection?.font_families ?? [],\n\t\t[ selectedCollection ]\n\t);\n\tconst collectionCategories = selectedCollection?.categories ?? [];\n\n\tconst categories = [ DEFAULT_CATEGORY, ...collectionCategories ];\n\n\tconst fonts = useMemo(\n\t\t() => filterFonts( collectionFonts, filters ),\n\t\t[ collectionFonts, filters ]\n\t);\n\n\t// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px\n\t// The height of each font family item is 61px.\n\tconst windowHeight = Math.max( window.innerHeight, MIN_WINDOW_HEIGHT );\n\tconst pageSize = Math.floor( ( windowHeight - 417 ) / 61 );\n\tconst totalPages = Math.ceil( fonts.length / pageSize );\n\tconst itemsStart = ( page - 1 ) * pageSize;\n\tconst itemsLimit = page * pageSize;\n\tconst items = fonts.slice( itemsStart, itemsLimit );\n\n\tconst handleCategoryFilter = ( category ) => {\n\t\tsetFilters( { ...filters, category } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleUpdateSearchInput = ( value ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst resetFilters = () => {\n\t\tsetFilters( {} );\n\t\tsetPage( 1 );\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetFilters( { ...filters, search: '' } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleToggleVariant = ( font, face ) => {\n\t\tconst newFontsToInstall = toggleFont( font, face, fontsToInstall );\n\t\tsetFontsToInstall( newFontsToInstall );\n\t};\n\n\tconst fontToInstallOutline = getFontsOutline( fontsToInstall );\n\n\tconst resetFontsToInstall = () => {\n\t\tsetFontsToInstall( [] );\n\t};\n\n\tconst handleInstall = async () => {\n\t\tsetNotice( null );\n\n\t\tconst fontFamily = fontsToInstall[ 0 ];\n\n\t\ttry {\n\t\t\tif ( fontFamily?.fontFace ) {\n\t\t\t\tawait Promise.all(\n\t\t\t\t\tfontFamily.fontFace.map( async ( fontFace ) => {\n\t\t\t\t\t\tif ( fontFace.src ) {\n\t\t\t\t\t\t\tfontFace.file = await downloadFontFaceAssets(\n\t\t\t\t\t\t\t\tfontFace.src\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} )\n\t\t\t\t);\n\t\t\t}\n\t\t} catch ( error ) {\n\t\t\t// If any of the fonts fail to download,\n\t\t\t// show an error notice and stop the request from being sent.\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: __(\n\t\t\t\t\t'Error installing the fonts, could not be downloaded.'\n\t\t\t\t),\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait installFont( fontFamily );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Fonts were installed successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: error.message,\n\t\t\t} );\n\t\t}\n\t\tresetFontsToInstall();\n\t};\n\n\tconst getSortedFontFaces = ( fontFamily ) => {\n\t\tif ( ! fontFamily ) {\n\t\t\treturn [];\n\t\t}\n\t\tif ( ! fontFamily.fontFace || ! fontFamily.fontFace.length ) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tfontFamily: fontFamily.fontFamily,\n\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\tfontWeight: '400',\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\t\treturn sortFontFaces( fontFamily.fontFace );\n\t};\n\n\tif ( renderConfirmDialog ) {\n\t\treturn <GoogleFontsConfirmDialog />;\n\t}\n\n\tconst ActionsComponent = () => {\n\t\tif ( slug !== 'google-fonts' || renderConfirmDialog || selectedFont ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<DropdownMenu\n\t\t\t\ticon={ moreVertical }\n\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tposition: 'bottom left',\n\t\t\t\t} }\n\t\t\t\tcontrols={ [\n\t\t\t\t\t{\n\t\t\t\t\t\ttitle: __( 'Revoke access to Google Fonts' ),\n\t\t\t\t\t\tonClick: revokeAccess,\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t/>\n\t\t);\n\t};\n\n\treturn (\n\t\t<div className=\"font-library-modal__tabpanel-layout\">\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"font-library-modal__tabpanel-layout\"\n\t\t\t>\n\t\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t\t\t{ selectedCollection.name }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t<ActionsComponent />\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<Text>{ selectedCollection.description }</Text>\n\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t<Flex>\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\t\tplaceholder={ __( 'Font name…' ) }\n\t\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\t\tprefix={ <Icon icon={ search } /> }\n\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\tfilters?.search ? (\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\t\t\tonClick={ resetSearch }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) : null\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\tvalue={ category.slug }\n\t\t\t\t\t\t\t\t\t\t\tkey={ category.slug }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ category.name }\n\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t</Flex>\n\n\t\t\t\t\t<Spacer margin={ 4 } />\n\n\t\t\t\t\t{ ! selectedCollection?.font_families && ! notice && (\n\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ !! selectedCollection?.font_families?.length &&\n\t\t\t\t\t\t! fonts.length && (\n\t\t\t\t\t\t\t<Text>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'No fonts found. Try with a different search term'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t<div className=\"font-library-modal__fonts-grid__main\">\n\t\t\t\t\t\t{ items.map( ( font ) => (\n\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\tkey={ font.font_family_settings.slug }\n\t\t\t\t\t\t\t\tfont={ font.font_family_settings }\n\t\t\t\t\t\t\t\tnavigatorPath={ '/fontFamily' }\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tsetSelectedFont(\n\t\t\t\t\t\t\t\t\t\tfont.font_family_settings\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</div>\n\t\t\t\t</NavigatorScreen>\n\n\t\t\t\t<NavigatorScreen path=\"/fontFamily\">\n\t\t\t\t\t<Flex justify=\"flex-start\">\n\t\t\t\t\t\t<NavigatorToParentButton\n\t\t\t\t\t\t\ticon={ chevronLeft }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetSelectedFont( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taria-label={ __( 'Navigate to the previous view' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-header\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ selectedFont?.name }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t</Flex>\n\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t<Text> { __( 'Select font variants to install.' ) } </Text>\n\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t{ getSortedFontFaces( selectedFont ).map(\n\t\t\t\t\t\t\t( face, i ) => (\n\t\t\t\t\t\t\t\t<CollectionFontVariant\n\t\t\t\t\t\t\t\t\tfont={ selectedFont }\n\t\t\t\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t\thandleToggleVariant={ handleToggleVariant }\n\t\t\t\t\t\t\t\t\tselected={ isFontFontFaceInOutline(\n\t\t\t\t\t\t\t\t\t\tselectedFont.slug,\n\t\t\t\t\t\t\t\t\t\tselectedFont.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline\n\t\t\t\t\t\t\t\t\t\tfontToInstallOutline\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t\t<Spacer margin={ 16 } />\n\t\t\t\t</NavigatorScreen>\n\t\t\t</NavigatorProvider>\n\n\t\t\t{ selectedFont && (\n\t\t\t\t<Flex\n\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\tclassName=\"font-library-modal__tabpanel-layout__footer\"\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ handleInstall }\n\t\t\t\t\t\tisBusy={ isInstalling }\n\t\t\t\t\t\tdisabled={ fontsToInstall.length === 0 || isInstalling }\n\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Install' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</Flex>\n\t\t\t) }\n\n\t\t\t{ ! selectedFont && (\n\t\t\t\t<Flex\n\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\tclassName=\"font-library-modal__tabpanel-layout__footer\"\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ __( 'First page' ) }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ () => setPage( 1 ) }\n\t\t\t\t\t\tdisabled={ page === 1 }\n\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>«</span>\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ () => setPage( page - 1 ) }\n\t\t\t\t\t\tdisabled={ page === 1 }\n\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>‹</span>\n\t\t\t\t\t</Button>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t// translators: %s: Total number of pages.\n\t\t\t\t\t\t\t\t_x(\n\t\t\t\t\t\t\t\t\t'Page <CurrenPageControl /> of %s',\n\t\t\t\t\t\t\t\t\t'paging'\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tCurrenPageControl: (\n\t\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t\taria-label={ __( 'Current page' ) }\n\t\t\t\t\t\t\t\t\t\tvalue={ page }\n\t\t\t\t\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t\t\t\t\t...Array( totalPages ),\n\t\t\t\t\t\t\t\t\t\t].map( ( e, i ) => {\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\tlabel: i + 1,\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: i + 1,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newPage ) =>\n\t\t\t\t\t\t\t\t\t\t\tsetPage( parseInt( newPage ) )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsize={ 'compact' }\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ () => setPage( page + 1 ) }\n\t\t\t\t\t\tdisabled={ page === totalPages }\n\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>›</span>\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ __( 'Last page' ) }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ () => setPage( totalPages ) }\n\t\t\t\t\t\tdisabled={ page === totalPages }\n\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>»</span>\n\t\t\t\t\t</Button>\n\t\t\t\t</Flex>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontCollection;\n"],"mappings":"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"}

package/build/components/global-styles/font-library-modal/font-demo.js

@@ -25,13 +25,34 @@ function getPreviewUrl(fontFace) {
     return Array.isArray(fontFace.src) ? fontFace.src[0] : fontFace.src;
   }
 }
-function FontFaceDemo({
-  customPreviewUrl,
-  fontFace,
-  text,
-  style = {}
+function getDisplayFontFace(font) {
+  // if this IS a font face return it
+  if (font.fontStyle || font.fontWeight) {
+    return font;
+  }
+  // if this is a font family with a collection of font faces
+  // return the first one that is normal and 400 OR just the first one
+  if (font.fontFace && font.fontFace.length) {
+    return font.fontFace.find(face => face.fontStyle === 'normal' && face.fontWeight === '400') || font.fontFace[0];
+  }
+  // This must be a font family with no font faces
+  // return a fake font face
+  return {
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontFamily: font.fontFamily,
+    fake: true
+  };
+}
+function FontDemo({
+  font,
+  text
 }) {
   const ref = (0, _element.useRef)(null);
+  const fontFace = getDisplayFontFace(font);
+  const style = (0, _previewStyles.getFamilyPreviewStyle)(font);
+  text = text || font.name;
+  const customPreviewUrl = font.preview;
   const [isIntersecting, setIsIntersecting] = (0, _element.useState)(false);
   const [isAssetLoaded, setIsAssetLoaded] = (0, _element.useState)(false);
   const {
@@ -44,8 +65,8 @@ function FontFaceDemo({
     fontSize: '18px',
     lineHeight: 1,
     opacity: isAssetLoaded ? '1' : '0',
-    ...faceStyles,
-    ...style
+    ...style,
+    ...faceStyles
   };
   (0, _element.useEffect)(() => {
     const observer = new window.IntersectionObserver(([entry]) => {
@@ -77,5 +98,5 @@ function FontFaceDemo({
     className: "font-library-modal__font-variant_demo-text"
   }, text));
 }
-var _default = exports.default = FontFaceDemo;
+var _default = exports.default = FontDemo;
 //# sourceMappingURL=font-demo.js.map

package/build/components/global-styles/font-library-modal/font-demo.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_context","_previewStyles","getPreviewUrl","fontFace","preview","src","Array","isArray","FontFaceDemo","customPreviewUrl","text","style","ref","useRef","isIntersecting","setIsIntersecting","useState","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","useContext","FontLibraryContext","previewUrl","isPreviewImage","match","faceStyles","getFacePreviewStyle","textDemoStyle","fontSize","lineHeight","opacity","useEffect","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","_react","createElement","loading","alt","className","__experimentalText","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-demo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalText as Text } from '@wordpress/components';\nimport { useContext, useEffect, useState, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport { getFacePreviewStyle } from './utils/preview-styles';\n\nfunction getPreviewUrl( fontFace ) {\n\tif ( fontFace.preview ) {\n\t\treturn fontFace.preview;\n\t}\n\tif ( fontFace.src ) {\n\t\treturn Array.isArray( fontFace.src ) ? fontFace.src[ 0 ] : fontFace.src;\n\t}\n}\n\nfunction FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {\n\tconst ref = useRef( null );\n\tconst [ isIntersecting, setIsIntersecting ] = useState( false );\n\tconst [ isAssetLoaded, setIsAssetLoaded ] = useState( false );\n\tconst { loadFontFaceAsset } = useContext( FontLibraryContext );\n\n\tconst previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );\n\tconst isPreviewImage =\n\t\tpreviewUrl && previewUrl.match( /\\.(png|jpg|jpeg|gif|svg)$/i );\n\n\tconst faceStyles = getFacePreviewStyle( fontFace );\n\tconst textDemoStyle = {\n\t\tfontSize: '18px',\n\t\tlineHeight: 1,\n\t\topacity: isAssetLoaded ? '1' : '0',\n\t\t...faceStyles,\n\t\t...style,\n\t};\n\n\tuseEffect( () => {\n\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\tsetIsIntersecting( entry.isIntersecting );\n\t\t}, {} );\n\t\tobserver.observe( ref.current );\n\t\treturn () => observer.disconnect();\n\t}, [ ref ] );\n\n\tuseEffect( () => {\n\t\tconst loadAsset = async () => {\n\t\t\tif ( isIntersecting ) {\n\t\t\t\tif ( ! isPreviewImage && fontFace.src ) {\n\t\t\t\t\tawait loadFontFaceAsset( fontFace );\n\t\t\t\t}\n\t\t\t\tsetIsAssetLoaded( true );\n\t\t\t}\n\t\t};\n\t\tloadAsset();\n\t}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );\n\n\treturn (\n\t\t<div ref={ ref }>\n\t\t\t{ isPreviewImage ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={ previewUrl }\n\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\talt={ text }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-image\"\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Text\n\t\t\t\t\tstyle={ textDemoStyle }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-text\"\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontFaceDemo;\n"],"mappings":"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"}
+{"version":3,"names":["_components","require","_element","_context","_previewStyles","getPreviewUrl","fontFace","preview","src","Array","isArray","getDisplayFontFace","font","fontStyle","fontWeight","length","find","face","fontFamily","fake","FontDemo","text","ref","useRef","style","getFamilyPreviewStyle","name","customPreviewUrl","isIntersecting","setIsIntersecting","useState","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","useContext","FontLibraryContext","previewUrl","isPreviewImage","match","faceStyles","getFacePreviewStyle","textDemoStyle","fontSize","lineHeight","opacity","useEffect","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","_react","createElement","loading","alt","className","__experimentalText","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-demo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalText as Text } from '@wordpress/components';\nimport { useContext, useEffect, useState, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport {\n\tgetFacePreviewStyle,\n\tgetFamilyPreviewStyle,\n} from './utils/preview-styles';\n\nfunction getPreviewUrl( fontFace ) {\n\tif ( fontFace.preview ) {\n\t\treturn fontFace.preview;\n\t}\n\tif ( fontFace.src ) {\n\t\treturn Array.isArray( fontFace.src ) ? fontFace.src[ 0 ] : fontFace.src;\n\t}\n}\n\nfunction getDisplayFontFace( font ) {\n\t// if this IS a font face return it\n\tif ( font.fontStyle || font.fontWeight ) {\n\t\treturn font;\n\t}\n\t// if this is a font family with a collection of font faces\n\t// return the first one that is normal and 400 OR just the first one\n\tif ( font.fontFace && font.fontFace.length ) {\n\t\treturn (\n\t\t\tfont.fontFace.find(\n\t\t\t\t( face ) =>\n\t\t\t\t\tface.fontStyle === 'normal' && face.fontWeight === '400'\n\t\t\t) || font.fontFace[ 0 ]\n\t\t);\n\t}\n\t// This must be a font family with no font faces\n\t// return a fake font face\n\treturn {\n\t\tfontStyle: 'normal',\n\t\tfontWeight: '400',\n\t\tfontFamily: font.fontFamily,\n\t\tfake: true,\n\t};\n}\n\nfunction FontDemo( { font, text } ) {\n\tconst ref = useRef( null );\n\n\tconst fontFace = getDisplayFontFace( font );\n\tconst style = getFamilyPreviewStyle( font );\n\ttext = text || font.name;\n\tconst customPreviewUrl = font.preview;\n\n\tconst [ isIntersecting, setIsIntersecting ] = useState( false );\n\tconst [ isAssetLoaded, setIsAssetLoaded ] = useState( false );\n\tconst { loadFontFaceAsset } = useContext( FontLibraryContext );\n\n\tconst previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );\n\tconst isPreviewImage =\n\t\tpreviewUrl && previewUrl.match( /\\.(png|jpg|jpeg|gif|svg)$/i );\n\n\tconst faceStyles = getFacePreviewStyle( fontFace );\n\tconst textDemoStyle = {\n\t\tfontSize: '18px',\n\t\tlineHeight: 1,\n\t\topacity: isAssetLoaded ? '1' : '0',\n\t\t...style,\n\t\t...faceStyles,\n\t};\n\n\tuseEffect( () => {\n\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\tsetIsIntersecting( entry.isIntersecting );\n\t\t}, {} );\n\t\tobserver.observe( ref.current );\n\t\treturn () => observer.disconnect();\n\t}, [ ref ] );\n\n\tuseEffect( () => {\n\t\tconst loadAsset = async () => {\n\t\t\tif ( isIntersecting ) {\n\t\t\t\tif ( ! isPreviewImage && fontFace.src ) {\n\t\t\t\t\tawait loadFontFaceAsset( fontFace );\n\t\t\t\t}\n\t\t\t\tsetIsAssetLoaded( true );\n\t\t\t}\n\t\t};\n\t\tloadAsset();\n\t}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );\n\n\treturn (\n\t\t<div ref={ ref }>\n\t\t\t{ isPreviewImage ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={ previewUrl }\n\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\talt={ text }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-image\"\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Text\n\t\t\t\t\tstyle={ textDemoStyle }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-text\"\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontDemo;\n"],"mappings":"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"}