@wordpress/edit-site 5.18.0 → 5.19.0

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _context = require("./context");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function FontFaceDemo({
+  fontFace,
+  text,
+  style = {}
+}) {
+  const ref = (0, _element.useRef)(null);
+  const [isIntersecting, setIsIntersecting] = (0, _element.useState)(false);
+  const [isAssetLoaded, setIsAssetLoaded] = (0, _element.useState)(false);
+  const {
+    loadFontFaceAsset
+  } = (0, _element.useContext)(_context.FontLibraryContext);
+  const {
+    fontFamily,
+    fontStyle,
+    fontWeight
+  } = fontFace;
+  const demoStyle = {
+    fontWeight,
+    fontStyle,
+    fontFamily,
+    flexShrink: 0,
+    fontSize: '18px',
+    opacity: isAssetLoaded ? '1' : '0',
+    transition: 'opacity 0.3s ease-in-out',
+    ...style
+  };
+  (0, _element.useEffect)(() => {
+    const observer = new window.IntersectionObserver(([entry]) => {
+      setIsIntersecting(entry.isIntersecting);
+    }, {});
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref]);
+  (0, _element.useEffect)(() => {
+    const loadAsset = async () => {
+      if (isIntersecting) {
+        if (fontFace.src) {
+          await loadFontFaceAsset(fontFace);
+        }
+        setIsAssetLoaded(true);
+      }
+    };
+    loadAsset();
+  }, [fontFace, isIntersecting, loadFontFaceAsset]);
+  return (0, _element.createElement)(_components.__experimentalText, {
+    style: demoStyle,
+    ref: ref
+  }, text);
+}
+var _default = FontFaceDemo;
+exports.default = _default;
+//# sourceMappingURL=font-demo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_components","_context","FontFaceDemo","fontFace","text","style","ref","useRef","isIntersecting","setIsIntersecting","useState","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","useContext","FontLibraryContext","fontFamily","fontStyle","fontWeight","demoStyle","flexShrink","fontSize","opacity","transition","useEffect","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","src","createElement","__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';\n\nfunction FontFaceDemo( { 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\tconst { fontFamily, fontStyle, fontWeight } = fontFace;\n\n\tconst demoStyle = {\n\t\tfontWeight,\n\t\tfontStyle,\n\t\tfontFamily,\n\t\tflexShrink: 0,\n\t\tfontSize: '18px',\n\t\topacity: isAssetLoaded ? '1' : '0',\n\t\ttransition: 'opacity 0.3s ease-in-out',\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 ( 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 ] );\n\n\treturn (\n\t\t<Text style={ demoStyle } ref={ ref }>\n\t\t\t{ text }\n\t\t</Text>\n\t);\n}\n\nexport default FontFaceDemo;\n"],"mappings":";;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AADA,IAAAC,WAAA,GAAAD,OAAA;AAMA,IAAAE,QAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA,SAASG,YAAYA,CAAE;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,KAAK,GAAG,CAAC;AAAE,CAAC,EAAG;EACvD,MAAMC,GAAG,GAAG,IAAAC,eAAM,EAAE,IAAK,CAAC;EAC1B,MAAM,CAAEC,cAAc,EAAEC,iBAAiB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAC/D,MAAM,CAAEC,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAF,iBAAQ,EAAE,KAAM,CAAC;EAC7D,MAAM;IAAEG;EAAkB,CAAC,GAAG,IAAAC,mBAAU,EAAEC,2BAAmB,CAAC;EAC9D,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAGf,QAAQ;EAEtD,MAAMgB,SAAS,GAAG;IACjBD,UAAU;IACVD,SAAS;IACTD,UAAU;IACVI,UAAU,EAAE,CAAC;IACbC,QAAQ,EAAE,MAAM;IAChBC,OAAO,EAAEX,aAAa,GAAG,GAAG,GAAG,GAAG;IAClCY,UAAU,EAAE,0BAA0B;IACtC,GAAGlB;EACJ,CAAC;EAED,IAAAmB,kBAAS,EAAE,MAAM;IAChB,MAAMC,QAAQ,GAAG,IAAIC,MAAM,CAACC,oBAAoB,CAAE,CAAE,CAAEC,KAAK,CAAE,KAAM;MAClEnB,iBAAiB,CAAEmB,KAAK,CAACpB,cAAe,CAAC;IAC1C,CAAC,EAAE,CAAC,CAAE,CAAC;IACPiB,QAAQ,CAACI,OAAO,CAAEvB,GAAG,CAACwB,OAAQ,CAAC;IAC/B,OAAO,MAAML,QAAQ,CAACM,UAAU,CAAC,CAAC;EACnC,CAAC,EAAE,CAAEzB,GAAG,CAAG,CAAC;EAEZ,IAAAkB,kBAAS,EAAE,MAAM;IAChB,MAAMQ,SAAS,GAAG,MAAAA,CAAA,KAAY;MAC7B,IAAKxB,cAAc,EAAG;QACrB,IAAKL,QAAQ,CAAC8B,GAAG,EAAG;UACnB,MAAMpB,iBAAiB,CAAEV,QAAS,CAAC;QACpC;QACAS,gBAAgB,CAAE,IAAK,CAAC;MACzB;IACD,CAAC;IACDoB,SAAS,CAAC,CAAC;EACZ,CAAC,EAAE,CAAE7B,QAAQ,EAAEK,cAAc,EAAEK,iBAAiB,CAAG,CAAC;EAEpD,OACC,IAAAf,QAAA,CAAAoC,aAAA,EAAClC,WAAA,CAAAmC,kBAAI;IAAC9B,KAAK,EAAGc,SAAW;IAACb,GAAG,EAAGA;EAAK,GAClCF,IACG,CAAC;AAET;AAAC,IAAAgC,QAAA,GAEclC,YAAY;AAAAmC,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _fontDemo = _interopRequireDefault(require("./font-demo"));
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function FontVariant({
+  fontFace,
+  variantName,
+  checked,
+  onClick,
+  text,
+  actionHandler
+}) {
+  const {
+    fontStyle,
+    fontWeight
+  } = fontFace;
+  const displayVariantName = variantName || `${fontWeight} ${fontStyle}`;
+  return (0, _element.createElement)("div", {
+    className: "font-library-modal__font-variant"
+  }, (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 1
+  }, (0, _element.createElement)(_components.__experimentalHStack, {
+    justify: "flex-start",
+    alignment: "top"
+  }, !!actionHandler ? actionHandler : (0, _element.createElement)(_components.CheckboxControl, {
+    checked: checked,
+    onChange: onClick
+  }), typeof displayVariantName === 'string' ? (0, _element.createElement)(_components.__experimentalText, null, displayVariantName) : displayVariantName), (0, _element.createElement)("div", {
+    className: "font-library-modal__font-variant_demo-wrapper"
+  }, (0, _element.createElement)(_fontDemo.default, {
+    fontFace: fontFace,
+    text: text
+  }))));
+}
+var _default = FontVariant;
+exports.default = _default;
+//# sourceMappingURL=font-variant.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_fontDemo","_interopRequireDefault","FontVariant","fontFace","variantName","checked","onClick","text","actionHandler","fontStyle","fontWeight","displayVariantName","_element","createElement","className","__experimentalVStack","spacing","__experimentalHStack","justify","alignment","CheckboxControl","onChange","__experimentalText","default","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-variant.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tCheckboxControl,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport FontFaceDemo from './font-demo';\n\nfunction FontVariant( {\n\tfontFace,\n\tvariantName,\n\tchecked,\n\tonClick,\n\ttext,\n\tactionHandler,\n} ) {\n\tconst { fontStyle, fontWeight } = fontFace;\n\tconst displayVariantName = variantName || `${ fontWeight } ${ fontStyle }`;\n\n\treturn (\n\t\t<div className=\"font-library-modal__font-variant\">\n\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t<HStack justify=\"flex-start\" alignment=\"top\">\n\t\t\t\t\t{ !! actionHandler ? (\n\t\t\t\t\t\tactionHandler\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\t\tonChange={ onClick }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ typeof displayVariantName === 'string' ? (\n\t\t\t\t\t\t<Text>{ displayVariantName }</Text>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tdisplayVariantName\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t\t<div className=\"font-library-modal__font-variant_demo-wrapper\">\n\t\t\t\t\t<FontFaceDemo fontFace={ fontFace } text={ text } />\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default FontVariant;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAUA,IAAAC,SAAA,GAAAC,sBAAA,CAAAF,OAAA;AAbA;AACA;AACA;;AAQA;AACA;AACA;;AAGA,SAASG,WAAWA,CAAE;EACrBC,QAAQ;EACRC,WAAW;EACXC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAGP,QAAQ;EAC1C,MAAMQ,kBAAkB,GAAGP,WAAW,IAAK,GAAGM,UAAY,IAAID,SAAW,EAAC;EAE1E,OACC,IAAAG,QAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAkC,GAChD,IAAAF,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,OAAO,EAAG;EAAG,GACpB,IAAAJ,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAmB,oBAAM;IAACC,OAAO,EAAC,YAAY;IAACC,SAAS,EAAC;EAAK,GACzC,CAAC,CAAEX,aAAa,GACjBA,aAAa,GAEb,IAAAI,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAsB,eAAe;IACff,OAAO,EAAGA,OAAS;IACnBgB,QAAQ,EAAGf;EAAS,CACpB,CACD,EACC,OAAOK,kBAAkB,KAAK,QAAQ,GACvC,IAAAC,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAwB,kBAAI,QAAGX,kBAA0B,CAAC,GAEnCA,kBAEM,CAAC,EACT,IAAAC,QAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA+C,GAC7D,IAAAF,QAAA,CAAAC,aAAA,EAACb,SAAA,CAAAuB,OAAY;IAACpB,QAAQ,EAAGA,QAAU;IAACI,IAAI,EAAGA;EAAM,CAAE,CAC/C,CACE,CACJ,CAAC;AAER;AAAC,IAAAiB,QAAA,GAEctB,WAAW;AAAAuB,OAAA,CAAAF,OAAA,GAAAC,QAAA"}

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+/**
+ * WordPress dependencies
+ */
+
+function FontsGrid({
+  title,
+  children,
+  pageSize = 32
+}) {
+  const [lastItem, setLastItem] = (0, _element.useState)(null);
+  const [page, setPage] = (0, _element.useState)(1);
+  const itemsLimit = page * pageSize;
+  const items = children.slice(0, itemsLimit);
+  (0, _element.useEffect)(() => {
+    if (lastItem) {
+      const observer = new window.IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting) {
+          setPage(prevPage => prevPage + 1);
+        }
+      });
+      observer.observe(lastItem);
+      return () => observer.disconnect();
+    }
+  }, [lastItem]);
+  return (0, _element.createElement)("div", {
+    className: "font-library-modal__fonts-grid"
+  }, (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 0
+  }, title && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalText, {
+    className: "font-library-modal__subtitle"
+  }, title), (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 2
+  })), (0, _element.createElement)("div", {
+    className: "font-library-modal__fonts-grid__main"
+  }, items.map((child, i) => {
+    if (i === itemsLimit - 1) {
+      return (0, _element.createElement)("div", {
+        ref: setLastItem
+      }, child);
+    }
+    return child;
+  }))));
+}
+var _default = FontsGrid;
+exports.default = _default;
+//# sourceMappingURL=fonts-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_components","FontsGrid","title","children","pageSize","lastItem","setLastItem","useState","page","setPage","itemsLimit","items","slice","useEffect","observer","window","IntersectionObserver","entry","isIntersecting","prevPage","observe","disconnect","createElement","className","__experimentalVStack","spacing","Fragment","__experimentalText","__experimentalSpacer","margin","map","child","i","ref","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/fonts-grid.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\nfunction FontsGrid( { title, children, pageSize = 32 } ) {\n\tconst [ lastItem, setLastItem ] = useState( null );\n\tconst [ page, setPage ] = useState( 1 );\n\tconst itemsLimit = page * pageSize;\n\tconst items = children.slice( 0, itemsLimit );\n\n\tuseEffect( () => {\n\t\tif ( lastItem ) {\n\t\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\t\tif ( entry.isIntersecting ) {\n\t\t\t\t\tsetPage( ( prevPage ) => prevPage + 1 );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tobserver.observe( lastItem );\n\n\t\t\treturn () => observer.disconnect();\n\t\t}\n\t}, [ lastItem ] );\n\n\treturn (\n\t\t<div className=\"font-library-modal__fonts-grid\">\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t<div className=\"font-library-modal__fonts-grid__main\">\n\t\t\t\t\t{ items.map( ( child, i ) => {\n\t\t\t\t\t\tif ( i === itemsLimit - 1 ) {\n\t\t\t\t\t\t\treturn <div ref={ setLastItem }>{ child }</div>;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn child;\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default FontsGrid;\n"],"mappings":";;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AALA,IAAAC,WAAA,GAAAD,OAAA;AAHA;AACA;AACA;;AAQA,SAASE,SAASA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ,GAAG;AAAG,CAAC,EAAG;EACxD,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAClD,MAAM,CAAEC,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAF,iBAAQ,EAAE,CAAE,CAAC;EACvC,MAAMG,UAAU,GAAGF,IAAI,GAAGJ,QAAQ;EAClC,MAAMO,KAAK,GAAGR,QAAQ,CAACS,KAAK,CAAE,CAAC,EAAEF,UAAW,CAAC;EAE7C,IAAAG,kBAAS,EAAE,MAAM;IAChB,IAAKR,QAAQ,EAAG;MACf,MAAMS,QAAQ,GAAG,IAAIC,MAAM,CAACC,oBAAoB,CAAE,CAAE,CAAEC,KAAK,CAAE,KAAM;QAClE,IAAKA,KAAK,CAACC,cAAc,EAAG;UAC3BT,OAAO,CAAIU,QAAQ,IAAMA,QAAQ,GAAG,CAAE,CAAC;QACxC;MACD,CAAE,CAAC;MAEHL,QAAQ,CAACM,OAAO,CAAEf,QAAS,CAAC;MAE5B,OAAO,MAAMS,QAAQ,CAACO,UAAU,CAAC,CAAC;IACnC;EACD,CAAC,EAAE,CAAEhB,QAAQ,CAAG,CAAC;EAEjB,OACC,IAAAP,QAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAC;EAAgC,GAC9C,IAAAzB,QAAA,CAAAwB,aAAA,EAACtB,WAAA,CAAAwB,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClBvB,KAAK,IACN,IAAAJ,QAAA,CAAAwB,aAAA,EAAAxB,QAAA,CAAA4B,QAAA,QACC,IAAA5B,QAAA,CAAAwB,aAAA,EAACtB,WAAA,CAAA2B,kBAAI;IAACJ,SAAS,EAAC;EAA8B,GAC3CrB,KACG,CAAC,EACP,IAAAJ,QAAA,CAAAwB,aAAA,EAACtB,WAAA,CAAA4B,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CACrB,CACF,EACD,IAAA/B,QAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAC;EAAsC,GAClDZ,KAAK,CAACmB,GAAG,CAAE,CAAEC,KAAK,EAAEC,CAAC,KAAM;IAC5B,IAAKA,CAAC,KAAKtB,UAAU,GAAG,CAAC,EAAG;MAC3B,OAAO,IAAAZ,QAAA,CAAAwB,aAAA;QAAKW,GAAG,EAAG3B;MAAa,GAAGyB,KAAY,CAAC;IAChD;IACA,OAAOA,KAAK;EACb,CAAE,CACE,CACE,CACJ,CAAC;AAER;AAAC,IAAAG,QAAA,GAEcjC,SAAS;AAAAkC,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _installedFonts = _interopRequireDefault(require("./installed-fonts"));
+var _constants = require("./utils/constants");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function FontLibraryModal({
+  onRequestClose,
+  initialTabName = 'installed-fonts'
+}) {
+  return (0, _element.createElement)(_components.Modal, {
+    title: (0, _i18n.__)('Fonts'),
+    onRequestClose: onRequestClose,
+    isFullScreen: true,
+    className: "font-library-modal",
+    style: {
+      width: '65vw'
+    }
+  }, (0, _element.createElement)(_components.TabPanel, {
+    className: "font-library-modal__tab-panel",
+    initialTabName: initialTabName,
+    tabs: _constants.MODAL_TABS
+  }, tab => {
+    switch (tab.name) {
+      case 'installed-fonts':
+      default:
+        return (0, _element.createElement)(_installedFonts.default, null);
+    }
+  }));
+}
+var _default = FontLibraryModal;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_components","_installedFonts","_interopRequireDefault","_constants","FontLibraryModal","onRequestClose","initialTabName","_element","createElement","Modal","title","__","isFullScreen","className","style","width","TabPanel","tabs","MODAL_TABS","tab","name","default","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Modal, TabPanel } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport InstalledFonts from './installed-fonts';\nimport { MODAL_TABS } from './utils/constants';\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tinitialTabName = 'installed-fonts',\n} ) {\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Fonts' ) }\n\t\t\tonRequestClose={ onRequestClose }\n\t\t\tisFullScreen={ true }\n\t\t\tclassName=\"font-library-modal\"\n\t\t\tstyle={ { width: '65vw' } }\n\t\t>\n\t\t\t<TabPanel\n\t\t\t\tclassName=\"font-library-modal__tab-panel\"\n\t\t\t\tinitialTabName={ initialTabName }\n\t\t\t\ttabs={ MODAL_TABS }\n\t\t\t>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tswitch ( tab.name ) {\n\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\treturn <InstalledFonts />;\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAKA,IAAAE,eAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASK,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,cAAc,GAAG;AAClB,CAAC,EAAG;EACH,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACR,WAAA,CAAAS,KAAK;IACLC,KAAK,EAAG,IAAAC,QAAE,EAAE,OAAQ,CAAG;IACvBN,cAAc,EAAGA,cAAgB;IACjCO,YAAY,EAAG,IAAM;IACrBC,SAAS,EAAC,oBAAoB;IAC9BC,KAAK,EAAG;MAAEC,KAAK,EAAE;IAAO;EAAG,GAE3B,IAAAR,QAAA,CAAAC,aAAA,EAACR,WAAA,CAAAgB,QAAQ;IACRH,SAAS,EAAC,+BAA+B;IACzCP,cAAc,EAAGA,cAAgB;IACjCW,IAAI,EAAGC;EAAY,GAEfC,GAAG,IAAM;IACZ,QAASA,GAAG,CAACC,IAAI;MAChB,KAAK,iBAAiB;MACtB;QACC,OAAO,IAAAb,QAAA,CAAAC,aAAA,EAACP,eAAA,CAAAoB,OAAc,MAAE,CAAC;IAC3B;EACD,CACS,CACJ,CAAC;AAEV;AAAC,IAAAC,QAAA,GAEclB,gBAAgB;AAAAmB,OAAA,CAAAF,OAAA,GAAAC,QAAA"}

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

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _tabLayout = _interopRequireDefault(require("./tab-layout"));
+var _context = require("./context");
+var _fontsGrid = _interopRequireDefault(require("./fonts-grid"));
+var _libraryFontDetails = _interopRequireDefault(require("./library-font-details"));
+var _libraryFontCard = _interopRequireDefault(require("./library-font-card"));
+var _localFonts = _interopRequireDefault(require("./local-fonts"));
+var _confirmDeleteDialog = _interopRequireDefault(require("./confirm-delete-dialog"));
+var _lockUnlock = require("../../../lock-unlock");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  ProgressBar
+} = (0, _lockUnlock.unlock)(_components.privateApis);
+function InstalledFonts() {
+  const {
+    baseCustomFonts,
+    libraryFontSelected,
+    baseThemeFonts,
+    handleSetLibraryFontSelected,
+    refreshLibrary,
+    uninstallFont,
+    isResolvingLibrary
+  } = (0, _element.useContext)(_context.FontLibraryContext);
+  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = (0, _element.useState)(false);
+  const handleUnselectFont = () => {
+    handleSetLibraryFontSelected(null);
+  };
+  const handleSelectFont = font => {
+    handleSetLibraryFontSelected(font);
+  };
+  const handleConfirmUninstall = async () => {
+    const result = await uninstallFont(libraryFontSelected);
+    // If the font was succesfully uninstalled it is unselected
+    if (result) {
+      handleUnselectFont();
+    }
+    setIsConfirmDeleteOpen(false);
+  };
+  const handleUninstallClick = async () => {
+    setIsConfirmDeleteOpen(true);
+  };
+  const handleCancelUninstall = () => {
+    setIsConfirmDeleteOpen(false);
+  };
+  const tabDescription = !!libraryFontSelected ? (0, _i18n.__)('Choose font variants. Keep in mind that too many variants could make your site slower.') : null;
+  const shouldDisplayDeleteButton = !!libraryFontSelected && libraryFontSelected?.source !== 'theme';
+  (0, _element.useEffect)(() => {
+    refreshLibrary();
+  }, []);
+  return (0, _element.createElement)(_tabLayout.default, {
+    title: libraryFontSelected?.name || '',
+    description: tabDescription,
+    handleBack: !!libraryFontSelected && handleUnselectFont,
+    footer: (0, _element.createElement)(Footer, {
+      shouldDisplayDeleteButton: shouldDisplayDeleteButton,
+      handleUninstallClick: handleUninstallClick
+    })
+  }, (0, _element.createElement)(_confirmDeleteDialog.default, {
+    font: libraryFontSelected,
+    isConfirmDeleteOpen: isConfirmDeleteOpen,
+    handleConfirmUninstall: handleConfirmUninstall,
+    handleCancelUninstall: handleCancelUninstall
+  }), !libraryFontSelected && (0, _element.createElement)(_element.Fragment, null, isResolvingLibrary && (0, _element.createElement)(_components.Spinner, null), baseCustomFonts.length > 0 && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 2
+  }), (0, _element.createElement)(_fontsGrid.default, null, baseCustomFonts.map(font => (0, _element.createElement)(_libraryFontCard.default, {
+    font: font,
+    key: font.slug,
+    onClick: () => {
+      handleSelectFont(font);
+    }
+  })))), baseThemeFonts.length > 0 && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 8
+  }), (0, _element.createElement)(_fontsGrid.default, {
+    title: (0, _i18n.__)('Theme Fonts')
+  }, baseThemeFonts.map(font => (0, _element.createElement)(_libraryFontCard.default, {
+    font: font,
+    key: font.slug,
+    onClick: () => {
+      handleSelectFont(font);
+    }
+  })))), (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 8
+  }), (0, _element.createElement)(_localFonts.default, null)), libraryFontSelected && (0, _element.createElement)(_libraryFontDetails.default, {
+    font: libraryFontSelected,
+    isConfirmDeleteOpen: isConfirmDeleteOpen,
+    handleConfirmUninstall: handleConfirmUninstall,
+    handleCancelUninstall: handleCancelUninstall
+  }));
+}
+function Footer({
+  shouldDisplayDeleteButton,
+  handleUninstallClick
+}) {
+  const {
+    saveFontFamilies,
+    fontFamiliesHasChanges,
+    isInstalling
+  } = (0, _element.useContext)(_context.FontLibraryContext);
+  return (0, _element.createElement)(_components.__experimentalHStack, {
+    justify: "space-between"
+  }, isInstalling && (0, _element.createElement)(ProgressBar, null), (0, _element.createElement)("div", null, shouldDisplayDeleteButton && (0, _element.createElement)(_components.Button, {
+    variant: "tertiary",
+    onClick: handleUninstallClick
+  }, (0, _i18n.__)('Delete'))), (0, _element.createElement)(_components.Button, {
+    disabled: !fontFamiliesHasChanges,
+    variant: "primary",
+    onClick: saveFontFamilies
+  }, (0, _i18n.__)('Update')));
+}
+var _default = InstalledFonts;
+exports.default = _default;
+//# sourceMappingURL=installed-fonts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_i18n","_components","_tabLayout","_interopRequireDefault","_context","_fontsGrid","_libraryFontDetails","_libraryFontCard","_localFonts","_confirmDeleteDialog","_lockUnlock","ProgressBar","unlock","componentsPrivateApis","InstalledFonts","baseCustomFonts","libraryFontSelected","baseThemeFonts","handleSetLibraryFontSelected","refreshLibrary","uninstallFont","isResolvingLibrary","useContext","FontLibraryContext","isConfirmDeleteOpen","setIsConfirmDeleteOpen","useState","handleUnselectFont","handleSelectFont","font","handleConfirmUninstall","result","handleUninstallClick","handleCancelUninstall","tabDescription","__","shouldDisplayDeleteButton","source","useEffect","createElement","default","title","name","description","handleBack","footer","Footer","Fragment","Spinner","length","__experimentalSpacer","margin","map","key","slug","onClick","saveFontFamilies","fontFamiliesHasChanges","isInstalling","__experimentalHStack","justify","Button","variant","disabled","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport {\n\tprivateApis as componentsPrivateApis,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tSpinner,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TabLayout from './tab-layout';\nimport { FontLibraryContext } from './context';\nimport FontsGrid from './fonts-grid';\nimport LibraryFontDetails from './library-font-details';\nimport LibraryFontCard from './library-font-card';\nimport LocalFonts from './local-fonts';\nimport ConfirmDeleteDialog from './confirm-delete-dialog';\nimport { unlock } from '../../../lock-unlock';\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\tbaseThemeFonts,\n\t\thandleSetLibraryFontSelected,\n\t\trefreshLibrary,\n\t\tuninstallFont,\n\t\tisResolvingLibrary,\n\t} = useContext( FontLibraryContext );\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );\n\n\tconst handleUnselectFont = () => {\n\t\thandleSetLibraryFontSelected( null );\n\t};\n\n\tconst handleSelectFont = ( font ) => {\n\t\thandleSetLibraryFontSelected( font );\n\t};\n\n\tconst handleConfirmUninstall = async () => {\n\t\tconst result = await uninstallFont( libraryFontSelected );\n\t\t// If the font was succesfully uninstalled it is unselected\n\t\tif ( result ) {\n\t\t\thandleUnselectFont();\n\t\t}\n\t\tsetIsConfirmDeleteOpen( false );\n\t};\n\n\tconst handleUninstallClick = async () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst handleCancelUninstall = () => {\n\t\tsetIsConfirmDeleteOpen( false );\n\t};\n\n\tconst tabDescription = !! libraryFontSelected\n\t\t? __(\n\t\t\t\t'Choose font variants. Keep in mind that too many variants could make your site slower.'\n\t\t  )\n\t\t: null;\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected && libraryFontSelected?.source !== 'theme';\n\n\tuseEffect( () => {\n\t\trefreshLibrary();\n\t}, [] );\n\n\treturn (\n\t\t<TabLayout\n\t\t\ttitle={ libraryFontSelected?.name || '' }\n\t\t\tdescription={ tabDescription }\n\t\t\thandleBack={ !! libraryFontSelected && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\t<Footer\n\t\t\t\t\tshouldDisplayDeleteButton={ shouldDisplayDeleteButton }\n\t\t\t\t\thandleUninstallClick={ handleUninstallClick }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<ConfirmDeleteDialog\n\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t/>\n\n\t\t\t{ ! libraryFontSelected && (\n\t\t\t\t<>\n\t\t\t\t\t{ isResolvingLibrary && <Spinner /> }\n\t\t\t\t\t{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t<FontsGrid>\n\t\t\t\t\t\t\t\t{ baseCustomFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\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</FontsGrid>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ baseThemeFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t\t<FontsGrid title={ __( 'Theme Fonts' ) }>\n\t\t\t\t\t\t\t\t{ baseThemeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\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</FontsGrid>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t<LocalFonts />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ libraryFontSelected && (\n\t\t\t\t<LibraryFontDetails\n\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</TabLayout>\n\t);\n}\n\nfunction Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {\n\tconst { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =\n\t\tuseContext( FontLibraryContext );\n\treturn (\n\t\t<HStack justify=\"space-between\">\n\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t<div>\n\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t<Button variant=\"tertiary\" onClick={ handleUninstallClick }>\n\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ saveFontFamilies }\n\t\t\t>\n\t\t\t\t{ __( 'Update' ) }\n\t\t\t</Button>\n\t\t</HStack>\n\t);\n}\n\nexport default InstalledFonts;\n"],"mappings":"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"}

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
+var _fontCard = _interopRequireDefault(require("./font-card"));
+var _context = require("./context");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function LibraryFontCard({
+  font,
+  ...props
+}) {
+  const {
+    getFontFacesActivated
+  } = (0, _element.useContext)(_context.FontLibraryContext);
+  const variantsInstalled = font.fontFace?.length || 1;
+  const variantsActive = getFontFacesActivated(font.slug, font.source).length;
+  const variantsText = (0, _i18n.sprintf)( /* translators: %1$d: Active font variants, %2$d: Total font variants */
+  (0, _i18n.__)('%1$s/%2$s variants active'), variantsActive, variantsInstalled);
+  return (0, _element.createElement)(_fontCard.default, {
+    font: font,
+    variantsText: variantsText,
+    actionHandler: (0, _element.createElement)(_components.Icon, {
+      icon: _icons.chevronRight
+    }),
+    ...props
+  });
+}
+var _default = LibraryFontCard;
+exports.default = _default;
+//# sourceMappingURL=library-font-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_i18n","_components","_icons","_fontCard","_interopRequireDefault","_context","LibraryFontCard","font","props","getFontFacesActivated","useContext","FontLibraryContext","variantsInstalled","fontFace","length","variantsActive","slug","source","variantsText","sprintf","__","createElement","default","actionHandler","Icon","icon","chevronRight","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-card.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\nimport { Icon } from '@wordpress/components';\nimport { chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport FontCard from './font-card';\nimport { FontLibraryContext } from './context';\n\nfunction LibraryFontCard( { font, ...props } ) {\n\tconst { getFontFacesActivated } = useContext( FontLibraryContext );\n\n\tconst variantsInstalled = font.fontFace?.length || 1;\n\tconst variantsActive = getFontFacesActivated(\n\t\tfont.slug,\n\t\tfont.source\n\t).length;\n\tconst variantsText = sprintf(\n\t\t/* translators: %1$d: Active font variants, %2$d: Total font variants */\n\t\t__( '%1$s/%2$s variants active' ),\n\t\tvariantsActive,\n\t\tvariantsInstalled\n\t);\n\n\treturn (\n\t\t<FontCard\n\t\t\tfont={ font }\n\t\t\tvariantsText={ variantsText }\n\t\t\tactionHandler={ <Icon icon={ chevronRight } /> }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default LibraryFontCard;\n"],"mappings":";;;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AADA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAKA,IAAAI,SAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AAZA;AACA;AACA;;AAMA;AACA;AACA;;AAIA,SAASO,eAAeA,CAAE;EAAEC,IAAI;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC9C,MAAM;IAAEC;EAAsB,CAAC,GAAG,IAAAC,mBAAU,EAAEC,2BAAmB,CAAC;EAElE,MAAMC,iBAAiB,GAAGL,IAAI,CAACM,QAAQ,EAAEC,MAAM,IAAI,CAAC;EACpD,MAAMC,cAAc,GAAGN,qBAAqB,CAC3CF,IAAI,CAACS,IAAI,EACTT,IAAI,CAACU,MACN,CAAC,CAACH,MAAM;EACR,MAAMI,YAAY,GAAG,IAAAC,aAAO,GAC3B;EACA,IAAAC,QAAE,EAAE,2BAA4B,CAAC,EACjCL,cAAc,EACdH,iBACD,CAAC;EAED,OACC,IAAAd,QAAA,CAAAuB,aAAA,EAAClB,SAAA,CAAAmB,OAAQ;IACRf,IAAI,EAAGA,IAAM;IACbW,YAAY,EAAGA,YAAc;IAC7BK,aAAa,EAAG,IAAAzB,QAAA,CAAAuB,aAAA,EAACpB,WAAA,CAAAuB,IAAI;MAACC,IAAI,EAAGC;IAAc,CAAE,CAAG;IAAA,GAC3ClB;EAAK,CACV,CAAC;AAEJ;AAAC,IAAAmB,QAAA,GAEcrB,eAAe;AAAAsB,OAAA,CAAAN,OAAA,GAAAK,QAAA"}

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _libraryFontVariant = _interopRequireDefault(require("./library-font-variant"));
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function LibraryFontDetails({
+  font
+}) {
+  const fontFaces = font.fontFace && font.fontFace.length ? font.fontFace.sort((a, b) => a.fontWeight > b.fontWeight ? 1 : -1) : [{
+    fontFamily: font.fontFamily,
+    fontStyle: 'normal',
+    fontWeight: '400'
+  }];
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 4
+  }), (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 0
+  }, (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 8
+  }), fontFaces.map((face, i) => (0, _element.createElement)(_libraryFontVariant.default, {
+    font: font,
+    face: face,
+    key: `face${i}`
+  }))), (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 8
+  }));
+}
+var _default = LibraryFontDetails;
+exports.default = _default;
+//# sourceMappingURL=library-font-details.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_libraryFontVariant","_interopRequireDefault","LibraryFontDetails","font","fontFaces","fontFace","length","sort","a","b","fontWeight","fontFamily","fontStyle","_element","createElement","Fragment","__experimentalSpacer","margin","__experimentalVStack","spacing","map","face","i","default","key","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-details.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport LibraryFontVariant from './library-font-variant';\n\nfunction LibraryFontDetails( { font } ) {\n\tconst fontFaces =\n\t\tfont.fontFace && font.fontFace.length\n\t\t\t? font.fontFace.sort( ( a, b ) =>\n\t\t\t\t\ta.fontWeight > b.fontWeight ? 1 : -1\n\t\t\t  )\n\t\t\t: [\n\t\t\t\t\t{\n\t\t\t\t\t\tfontFamily: font.fontFamily,\n\t\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\t\tfontWeight: '400',\n\t\t\t\t\t},\n\t\t\t  ];\n\n\treturn (\n\t\t<>\n\t\t\t<Spacer margin={ 4 } />\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t{ fontFaces.map( ( face, i ) => (\n\t\t\t\t\t<LibraryFontVariant\n\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t\t<Spacer margin={ 8 } />\n\t\t</>\n\t);\n}\n\nexport default LibraryFontDetails;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAQA,IAAAC,mBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAXA;AACA;AACA;;AAMA;AACA;AACA;;AAGA,SAASG,kBAAkBA,CAAE;EAAEC;AAAK,CAAC,EAAG;EACvC,MAAMC,SAAS,GACdD,IAAI,CAACE,QAAQ,IAAIF,IAAI,CAACE,QAAQ,CAACC,MAAM,GAClCH,IAAI,CAACE,QAAQ,CAACE,IAAI,CAAE,CAAEC,CAAC,EAAEC,CAAC,KAC1BD,CAAC,CAACE,UAAU,GAAGD,CAAC,CAACC,UAAU,GAAG,CAAC,GAAG,CAAC,CACnC,CAAC,GACD,CACA;IACCC,UAAU,EAAER,IAAI,CAACQ,UAAU;IAC3BC,SAAS,EAAE,QAAQ;IACnBF,UAAU,EAAE;EACb,CAAC,CACA;EAEL,OACC,IAAAG,QAAA,CAAAC,aAAA,EAAAD,QAAA,CAAAE,QAAA,QACC,IAAAF,QAAA,CAAAC,aAAA,EAAChB,WAAA,CAAAkB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAJ,QAAA,CAAAC,aAAA,EAAChB,WAAA,CAAAoB,oBAAM;IAACC,OAAO,EAAG;EAAG,GACpB,IAAAN,QAAA,CAAAC,aAAA,EAAChB,WAAA,CAAAkB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACrBb,SAAS,CAACgB,GAAG,CAAE,CAAEC,IAAI,EAAEC,CAAC,KACzB,IAAAT,QAAA,CAAAC,aAAA,EAACd,mBAAA,CAAAuB,OAAkB;IAClBpB,IAAI,EAAGA,IAAM;IACbkB,IAAI,EAAGA,IAAM;IACbG,GAAG,EAAI,OAAOF,CAAG;EAAG,CACpB,CACA,CACK,CAAC,EACT,IAAAT,QAAA,CAAAC,aAAA,EAAChB,WAAA,CAAAkB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CACrB,CAAC;AAEL;AAAC,IAAAQ,QAAA,GAEcvB,kBAAkB;AAAAwB,OAAA,CAAAH,OAAA,GAAAE,QAAA"}

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

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _utils = require("./utils");
+var _context = require("./context");
+var _fontDemo = _interopRequireDefault(require("./font-demo"));
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function LibraryFontVariant({
+  face,
+  font
+}) {
+  const {
+    isFontActivated,
+    toggleActivateFont
+  } = (0, _element.useContext)(_context.FontLibraryContext);
+  const isIstalled = font?.fontFace ? isFontActivated(font.slug, face.fontStyle, face.fontWeight, font.source) : isFontActivated(font.slug, null, null, font.source);
+  const handleToggleActivation = () => {
+    if (font?.fontFace) {
+      toggleActivateFont(font, face);
+      return;
+    }
+    toggleActivateFont(font);
+  };
+  const displayName = font.name + ' ' + (0, _utils.getFontFaceVariantName)(face);
+  return (0, _element.createElement)("div", {
+    className: "font-library-modal__library-font-variant"
+  }, (0, _element.createElement)(_components.Flex, {
+    justify: "space-between",
+    align: "center",
+    gap: "1rem"
+  }, (0, _element.createElement)(_fontDemo.default, {
+    fontFace: face,
+    text: displayName
+  }), (0, _element.createElement)(_components.CheckboxControl, {
+    checked: isIstalled,
+    onChange: handleToggleActivation,
+    __nextHasNoMarginBottom: true
+  })));
+}
+var _default = LibraryFontVariant;
+exports.default = _default;
+//# sourceMappingURL=library-font-variant.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_components","_utils","_context","_fontDemo","_interopRequireDefault","LibraryFontVariant","face","font","isFontActivated","toggleActivateFont","useContext","FontLibraryContext","isIstalled","fontFace","slug","fontStyle","fontWeight","source","handleToggleActivation","displayName","name","getFontFaceVariantName","createElement","className","Flex","justify","align","gap","default","text","CheckboxControl","checked","onChange","__nextHasNoMarginBottom","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { CheckboxControl, Flex } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport { getFontFaceVariantName } from './utils';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport FontFaceDemo from './font-demo';\n\nfunction LibraryFontVariant( { face, font } ) {\n\tconst { isFontActivated, toggleActivateFont } =\n\t\tuseContext( FontLibraryContext );\n\n\tconst isIstalled = font?.fontFace\n\t\t? isFontActivated(\n\t\t\t\tfont.slug,\n\t\t\t\tface.fontStyle,\n\t\t\t\tface.fontWeight,\n\t\t\t\tfont.source\n\t\t  )\n\t\t: isFontActivated( font.slug, null, null, font.source );\n\n\tconst handleToggleActivation = () => {\n\t\tif ( font?.fontFace ) {\n\t\t\ttoggleActivateFont( font, face );\n\t\t\treturn;\n\t\t}\n\t\ttoggleActivateFont( font );\n\t};\n\n\tconst displayName = font.name + ' ' + getFontFaceVariantName( face );\n\n\treturn (\n\t\t<div className=\"font-library-modal__library-font-variant\">\n\t\t\t<Flex justify=\"space-between\" align=\"center\" gap=\"1rem\">\n\t\t\t\t<FontFaceDemo fontFace={ face } text={ displayName } />\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tchecked={ isIstalled }\n\t\t\t\t\tonChange={ handleToggleActivation }\n\t\t\t\t\t__nextHasNoMarginBottom={ true }\n\t\t\t\t/>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n\nexport default LibraryFontVariant;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAIA,IAAAE,MAAA,GAAAF,OAAA;AAKA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAC,sBAAA,CAAAL,OAAA;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIA,SAASM,kBAAkBA,CAAE;EAAEC,IAAI;EAAEC;AAAK,CAAC,EAAG;EAC7C,MAAM;IAAEC,eAAe;IAAEC;EAAmB,CAAC,GAC5C,IAAAC,mBAAU,EAAEC,2BAAmB,CAAC;EAEjC,MAAMC,UAAU,GAAGL,IAAI,EAAEM,QAAQ,GAC9BL,eAAe,CACfD,IAAI,CAACO,IAAI,EACTR,IAAI,CAACS,SAAS,EACdT,IAAI,CAACU,UAAU,EACfT,IAAI,CAACU,MACL,CAAC,GACDT,eAAe,CAAED,IAAI,CAACO,IAAI,EAAE,IAAI,EAAE,IAAI,EAAEP,IAAI,CAACU,MAAO,CAAC;EAExD,MAAMC,sBAAsB,GAAGA,CAAA,KAAM;IACpC,IAAKX,IAAI,EAAEM,QAAQ,EAAG;MACrBJ,kBAAkB,CAAEF,IAAI,EAAED,IAAK,CAAC;MAChC;IACD;IACAG,kBAAkB,CAAEF,IAAK,CAAC;EAC3B,CAAC;EAED,MAAMY,WAAW,GAAGZ,IAAI,CAACa,IAAI,GAAG,GAAG,GAAG,IAAAC,6BAAsB,EAAEf,IAAK,CAAC;EAEpE,OACC,IAAAR,QAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAC;EAA0C,GACxD,IAAAzB,QAAA,CAAAwB,aAAA,EAACtB,WAAA,CAAAwB,IAAI;IAACC,OAAO,EAAC,eAAe;IAACC,KAAK,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAM,GACtD,IAAA7B,QAAA,CAAAwB,aAAA,EAACnB,SAAA,CAAAyB,OAAY;IAACf,QAAQ,EAAGP,IAAM;IAACuB,IAAI,EAAGV;EAAa,CAAE,CAAC,EACvD,IAAArB,QAAA,CAAAwB,aAAA,EAACtB,WAAA,CAAA8B,eAAe;IACfC,OAAO,EAAGnB,UAAY;IACtBoB,QAAQ,EAAGd,sBAAwB;IACnCe,uBAAuB,EAAG;EAAM,CAChC,CACI,CACF,CAAC;AAER;AAAC,IAAAC,QAAA,GAEc7B,kBAAkB;AAAA8B,OAAA,CAAAP,OAAA,GAAAM,QAAA"}