@wordpress/edit-site 5.19.0 → 5.19.2

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

@@ -0,0 +1,172 @@
+"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 _compose = require("@wordpress/compose");
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+var _tabLayout = _interopRequireDefault(require("./tab-layout"));
+var _context = require("./context");
+var _fontsGrid = _interopRequireDefault(require("./fonts-grid"));
+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"));
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const DEFAULT_CATEGORY = {
+  id: 'all',
+  name: (0, _i18n.__)('All')
+};
+function FontCollection({
+  id
+}) {
+  var _selectedCollection$d2;
+  const requiresPermission = id === 'default-font-collection';
+  const getGoogleFontsPermissionFromStorage = () => {
+    return window.localStorage.getItem('wp-font-library-default-font-collection-permission') === 'true';
+  };
+  const [selectedFont, setSelectedFont] = (0, _element.useState)(null);
+  const [fontsToInstall, setFontsToInstall] = (0, _element.useState)([]);
+  const [filters, setFilters] = (0, _element.useState)({});
+  const [renderConfirmDialog, setRenderConfirmDialog] = (0, _element.useState)(requiresPermission && !getGoogleFontsPermissionFromStorage());
+  const {
+    collections,
+    getFontCollection
+  } = (0, _element.useContext)(_context.FontLibraryContext);
+  const selectedCollection = collections.find(collection => collection.id === id);
+  (0, _element.useEffect)(() => {
+    const handleStorage = () => {
+      setRenderConfirmDialog(requiresPermission && !getGoogleFontsPermissionFromStorage());
+    };
+    handleStorage();
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, [id, requiresPermission]);
+  (0, _element.useEffect)(() => {
+    getFontCollection(id);
+    resetFilters();
+  }, [id, getFontCollection]);
+  (0, _element.useEffect)(() => {
+    setSelectedFont(null);
+  }, [id]);
+  const collectionFonts = (0, _element.useMemo)(() => {
+    var _selectedCollection$d;
+    return (_selectedCollection$d = selectedCollection?.data?.fontFamilies) !== null && _selectedCollection$d !== void 0 ? _selectedCollection$d : [];
+  }, [selectedCollection]);
+  const collectionCategories = (_selectedCollection$d2 = selectedCollection?.data?.categories) !== null && _selectedCollection$d2 !== void 0 ? _selectedCollection$d2 : [];
+  const categories = [DEFAULT_CATEGORY, ...collectionCategories];
+  const fonts = (0, _element.useMemo)(() => (0, _filterFonts.default)(collectionFonts, filters), [collectionFonts, filters]);
+  const handleCategoryFilter = category => {
+    setFilters({
+      ...filters,
+      category
+    });
+  };
+  const handleUpdateSearchInput = value => {
+    setFilters({
+      ...filters,
+      search: value
+    });
+  };
+  const debouncedUpdateSearchInput = (0, _compose.debounce)(handleUpdateSearchInput, 300);
+  const resetFilters = () => {
+    setFilters({});
+  };
+  const resetSearch = () => {
+    setFilters({
+      ...filters,
+      search: ''
+    });
+  };
+  const handleUnselectFont = () => {
+    setSelectedFont(null);
+  };
+  const handleToggleVariant = (font, face) => {
+    const newFontsToInstall = (0, _toggleFont.toggleFont)(font, face, fontsToInstall);
+    setFontsToInstall(newFontsToInstall);
+  };
+  const fontToInstallOutline = (0, _fontsOutline.getFontsOutline)(fontsToInstall);
+  const resetFontsToInstall = () => {
+    setFontsToInstall([]);
+  };
+  return (0, _element.createElement)(_tabLayout.default, {
+    title: !selectedFont ? selectedCollection.name : selectedFont.name,
+    description: !selectedFont ? selectedCollection.description : (0, _i18n.__)('Select font variants to install.'),
+    handleBack: !!selectedFont && handleUnselectFont,
+    footer: fontsToInstall.length > 0 && (0, _element.createElement)(Footer, {
+      fontsToInstall: fontsToInstall,
+      resetFontsToInstall: resetFontsToInstall
+    })
+  }, renderConfirmDialog && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 8
+  }), (0, _element.createElement)(_googleFontsConfirmDialog.default, null)), !renderConfirmDialog && !selectedCollection.data && (0, _element.createElement)(_components.Spinner, null), !renderConfirmDialog && !selectedFont && (0, _element.createElement)(_components.Flex, null, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.__experimentalInputControl, {
+    value: filters.search,
+    placeholder: (0, _i18n.__)('Font name…'),
+    label: (0, _i18n.__)('Search'),
+    onChange: debouncedUpdateSearchInput,
+    prefix: (0, _element.createElement)(_components.Icon, {
+      icon: _icons.search
+    }),
+    suffix: filters?.search ? (0, _element.createElement)(_components.Icon, {
+      icon: _icons.closeSmall,
+      onClick: resetSearch
+    }) : null
+  })), (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.SelectControl, {
+    label: (0, _i18n.__)('Category'),
+    value: filters.category,
+    onChange: handleCategoryFilter
+  }, categories && categories.map(category => (0, _element.createElement)("option", {
+    value: category.id,
+    key: category.id
+  }, category.name))))), (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 4
+  }), !renderConfirmDialog && !selectedCollection?.data?.fontFamilies && (0, _element.createElement)(_components.Spinner, null), !renderConfirmDialog && !!selectedCollection?.data?.fontFamilies?.length && !fonts.length && (0, _element.createElement)(_components.__experimentalText, null, (0, _i18n.__)('No fonts found. Try with a different seach term')), !renderConfirmDialog && selectedFont && (0, _element.createElement)(_collectionFontDetails.default, {
+    font: selectedFont,
+    handleToggleVariant: handleToggleVariant,
+    fontToInstallOutline: fontToInstallOutline
+  }), !renderConfirmDialog && !selectedFont && (0, _element.createElement)(_fontsGrid.default, null, fonts.map(font => (0, _element.createElement)(_fontCard.default, {
+    key: font.slug,
+    font: font,
+    onClick: () => {
+      setSelectedFont(font);
+    }
+  }))));
+}
+function Footer({
+  fontsToInstall,
+  resetFontsToInstall
+}) {
+  const {
+    installFonts,
+    isInstalling
+  } = (0, _element.useContext)(_context.FontLibraryContext);
+  const handleInstall = async () => {
+    await installFonts(fontsToInstall);
+    resetFontsToInstall();
+  };
+  return (0, _element.createElement)(_components.Flex, {
+    justify: "flex-end"
+  }, (0, _element.createElement)(_components.Button, {
+    variant: "primary",
+    onClick: handleInstall,
+    isBusy: isInstalling,
+    disabled: isInstalling
+  }, (0, _i18n.__)('Install')));
+}
+var _default = FontCollection;
+exports.default = _default;
+//# sourceMappingURL=font-collection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_components","_compose","_i18n","_icons","_tabLayout","_interopRequireDefault","_context","_fontsGrid","_fontCard","_filterFonts","_collectionFontDetails","_toggleFont","_fontsOutline","_googleFontsConfirmDialog","DEFAULT_CATEGORY","id","name","__","FontCollection","_selectedCollection$d2","requiresPermission","getGoogleFontsPermissionFromStorage","window","localStorage","getItem","selectedFont","setSelectedFont","useState","fontsToInstall","setFontsToInstall","filters","setFilters","renderConfirmDialog","setRenderConfirmDialog","collections","getFontCollection","useContext","FontLibraryContext","selectedCollection","find","collection","useEffect","handleStorage","addEventListener","removeEventListener","resetFilters","collectionFonts","useMemo","_selectedCollection$d","data","fontFamilies","collectionCategories","categories","fonts","filterFonts","handleCategoryFilter","category","handleUpdateSearchInput","value","search","debouncedUpdateSearchInput","debounce","resetSearch","handleUnselectFont","handleToggleVariant","font","face","newFontsToInstall","toggleFont","fontToInstallOutline","getFontsOutline","resetFontsToInstall","createElement","default","title","description","handleBack","footer","length","Footer","Fragment","__experimentalSpacer","margin","Spinner","Flex","FlexItem","__experimentalInputControl","placeholder","label","onChange","prefix","Icon","icon","suffix","closeSmall","onClick","SelectControl","map","key","__experimentalText","slug","installFonts","isInstalling","handleInstall","justify","Button","variant","isBusy","disabled","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-collection.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useState, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalInputControl as InputControl,\n\t__experimentalText as Text,\n\tSelectControl,\n\tSpinner,\n\tIcon,\n\tFlexItem,\n\tFlex,\n\tButton,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { search, closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport TabLayout from './tab-layout';\nimport { FontLibraryContext } from './context';\nimport FontsGrid from './fonts-grid';\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';\n\nconst DEFAULT_CATEGORY = {\n\tid: 'all',\n\tname: __( 'All' ),\n};\nfunction FontCollection( { id } ) {\n\tconst requiresPermission = id === 'default-font-collection';\n\n\tconst getGoogleFontsPermissionFromStorage = () => {\n\t\treturn (\n\t\t\twindow.localStorage.getItem(\n\t\t\t\t'wp-font-library-default-font-collection-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 [ filters, setFilters ] = useState( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { collections, getFontCollection } = useContext( FontLibraryContext );\n\tconst selectedCollection = collections.find(\n\t\t( collection ) => collection.id === id\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}, [ id, requiresPermission ] );\n\n\tuseEffect( () => {\n\t\tgetFontCollection( id );\n\t\tresetFilters();\n\t}, [ id, getFontCollection ] );\n\n\tuseEffect( () => {\n\t\tsetSelectedFont( null );\n\t}, [ id ] );\n\n\tconst collectionFonts = useMemo(\n\t\t() => selectedCollection?.data?.fontFamilies ?? [],\n\t\t[ selectedCollection ]\n\t);\n\tconst collectionCategories = selectedCollection?.data?.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\tconst handleCategoryFilter = ( category ) => {\n\t\tsetFilters( { ...filters, category } );\n\t};\n\n\tconst handleUpdateSearchInput = ( value ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t};\n\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst resetFilters = () => {\n\t\tsetFilters( {} );\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetFilters( { ...filters, search: '' } );\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\treturn (\n\t\t<TabLayout\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\thandleBack={ !! selectedFont && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\tfontsToInstall.length > 0 && (\n\t\t\t\t\t<Footer\n\t\t\t\t\t\tfontsToInstall={ fontsToInstall }\n\t\t\t\t\t\tresetFontsToInstall={ resetFontsToInstall }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\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 && ! selectedCollection.data && (\n\t\t\t\t<Spinner />\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.id }\n\t\t\t\t\t\t\t\t\t\tkey={ category.id }\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\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t! selectedCollection?.data?.fontFamilies && <Spinner /> }\n\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t!! selectedCollection?.data?.fontFamilies?.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 seach 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<FontsGrid>\n\t\t\t\t\t{ fonts.map( ( font ) => (\n\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetSelectedFont( font );\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</FontsGrid>\n\t\t\t) }\n\t\t</TabLayout>\n\t);\n}\n\nfunction Footer( { fontsToInstall, resetFontsToInstall } ) {\n\tconst { installFonts, isInstalling } = useContext( FontLibraryContext );\n\n\tconst handleInstall = async () => {\n\t\tawait installFonts( fontsToInstall );\n\t\tresetFontsToInstall();\n\t};\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={ isInstalling }\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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"}

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

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _context = require("./context");
+var _previewStyles = require("./utils/preview-styles");
 /**
  * WordPress dependencies
  */
@@ -15,7 +16,16 @@ var _context = require("./context");
  * Internal dependencies
  */
 
+function getPreviewUrl(fontFace) {
+  if (fontFace.preview) {
+    return fontFace.preview;
+  }
+  if (fontFace.src) {
+    return Array.isArray(fontFace.src) ? fontFace.src[0] : fontFace.src;
+  }
+}
 function FontFaceDemo({
+  customPreviewUrl,
   fontFace,
   text,
   style = {}
@@ -26,21 +36,22 @@ function FontFaceDemo({
   const {
     loadFontFaceAsset
   } = (0, _element.useContext)(_context.FontLibraryContext);
-  const {
-    fontFamily,
-    fontStyle,
-    fontWeight
-  } = fontFace;
-  const demoStyle = {
-    fontWeight,
-    fontStyle,
-    fontFamily,
+  const previewUrl = customPreviewUrl !== null && customPreviewUrl !== void 0 ? customPreviewUrl : getPreviewUrl(fontFace);
+  const isPreviewImage = previewUrl && previewUrl.match(/\.(png|jpg|jpeg|gif|svg)$/i);
+  const faceStyles = (0, _previewStyles.getFacePreviewStyle)(fontFace);
+  const textDemoStyle = {
+    whiteSpace: 'nowrap',
     flexShrink: 0,
     fontSize: '18px',
     opacity: isAssetLoaded ? '1' : '0',
     transition: 'opacity 0.3s ease-in-out',
+    ...faceStyles,
     ...style
   };
+  const imageDemoStyle = {
+    height: '23px',
+    width: 'auto'
+  };
   (0, _element.useEffect)(() => {
     const observer = new window.IntersectionObserver(([entry]) => {
       setIsIntersecting(entry.isIntersecting);
@@ -51,7 +62,7 @@ function FontFaceDemo({
   (0, _element.useEffect)(() => {
     const loadAsset = async () => {
       if (isIntersecting) {
-        if (fontFace.src) {
+        if (!isPreviewImage && fontFace.src) {
           await loadFontFaceAsset(fontFace);
         }
         setIsAssetLoaded(true);
@@ -59,10 +70,16 @@ function FontFaceDemo({
     };
     loadAsset();
   }, [fontFace, isIntersecting, loadFontFaceAsset]);
-  return (0, _element.createElement)(_components.__experimentalText, {
-    style: demoStyle,
+  return (0, _element.createElement)("div", {
     ref: ref
-  }, text);
+  }, isPreviewImage ? (0, _element.createElement)("img", {
+    src: previewUrl,
+    loading: "lazy",
+    alt: text,
+    style: imageDemoStyle
+  }) : (0, _element.createElement)(_components.__experimentalText, {
+    style: textDemoStyle
+  }, text));
 }
 var _default = FontFaceDemo;
 exports.default = _default;

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

@@ -1 +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"}
+{"version":3,"names":["_element","require","_components","_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","whiteSpace","flexShrink","fontSize","opacity","transition","imageDemoStyle","height","width","useEffect","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","createElement","loading","alt","__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\twhiteSpace: 'nowrap',\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...faceStyles,\n\t\t...style,\n\t};\n\tconst imageDemoStyle = {\n\t\theight: '23px',\n\t\twidth: 'auto',\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 ] );\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\tstyle={ imageDemoStyle }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Text style={ textDemoStyle }>{ text }</Text>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontFaceDemo;\n"],"mappings":"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"}

package/build/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js

@@ -0,0 +1,41 @@
+"use strict";
+
+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");
+/**
+ * WordPress dependencies
+ */
+
+function GoogleFontsConfirmDialog() {
+  const handleConfirm = () => {
+    // eslint-disable-next-line no-undef
+    window.localStorage.setItem('wp-font-library-default-font-collection-permission', 'true');
+    window.dispatchEvent(new Event('storage'));
+  };
+  return (0, _element.createElement)("div", {
+    className: "font-library__google-fonts-confirm"
+  }, (0, _element.createElement)(_components.Card, null, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalText, {
+    as: "h3"
+  }, "Connect to Google Fonts"), (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 6
+  }), (0, _element.createElement)(_components.__experimentalText, {
+    as: "p"
+  }, (0, _i18n.__)('To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.')), (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 3
+  }), (0, _element.createElement)(_components.__experimentalText, {
+    as: "p"
+  }, (0, _i18n.__)('You can alternatively upload files directly on the Library tab.')), (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 6
+  }), (0, _element.createElement)(_components.Button, {
+    variant: "primary",
+    onClick: handleConfirm
+  }, (0, _i18n.__)('Allow access to Google Fonts')))));
+}
+var _default = GoogleFontsConfirmDialog;
+exports.default = _default;
+//# sourceMappingURL=google-fonts-confirm-dialog.js.map

package/build/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_components","GoogleFontsConfirmDialog","handleConfirm","window","localStorage","setItem","dispatchEvent","Event","_element","createElement","className","Card","CardBody","__experimentalText","as","__experimentalSpacer","margin","__","Button","variant","onClick","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nfunction GoogleFontsConfirmDialog() {\n\tconst handleConfirm = () => {\n\t\t// eslint-disable-next-line no-undef\n\t\twindow.localStorage.setItem(\n\t\t\t'wp-font-library-default-font-collection-permission',\n\t\t\t'true'\n\t\t);\n\t\twindow.dispatchEvent( new Event( 'storage' ) );\n\t};\n\n\treturn (\n\t\t<div className=\"font-library__google-fonts-confirm\">\n\t\t\t<Card>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Text as=\"h3\">Connect to Google Fonts</Text>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'You can alternatively upload files directly on the Library tab.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Button variant=\"primary\" onClick={ handleConfirm }>\n\t\t\t\t\t\t{ __( 'Allow access to Google Fonts' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</div>\n\t);\n}\n\nexport default GoogleFontsConfirmDialog;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAUA,SAASE,wBAAwBA,CAAA,EAAG;EACnC,MAAMC,aAAa,GAAGA,CAAA,KAAM;IAC3B;IACAC,MAAM,CAACC,YAAY,CAACC,OAAO,CAC1B,oDAAoD,EACpD,MACD,CAAC;IACDF,MAAM,CAACG,aAAa,CAAE,IAAIC,KAAK,CAAE,SAAU,CAAE,CAAC;EAC/C,CAAC;EAED,OACC,IAAAC,QAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAClD,IAAAF,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAW,IAAI,QACJ,IAAAH,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAY,QAAQ,QACR,IAAAJ,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAI,GAAC,yBAA6B,CAAC,EAC5C,IAAAN,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,gOACD,CACK,CAAC,EACP,IAAAT,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,iEACD,CACK,CAAC,EACP,IAAAT,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAkB,MAAM;IAACC,OAAO,EAAC,SAAS;IAACC,OAAO,EAAGlB;EAAe,GAChD,IAAAe,QAAE,EAAE,8BAA+B,CAC9B,CACC,CACL,CACF,CAAC;AAER;AAAC,IAAAI,QAAA,GAEcpB,wBAAwB;AAAAqB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

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

@@ -9,7 +9,8 @@ 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");
+var _fontCollection = _interopRequireDefault(require("./font-collection"));
+var _context = require("./context");
 /**
  * WordPress dependencies
  */
@@ -18,27 +19,44 @@ var _constants = require("./utils/constants");
  * Internal dependencies
  */
 
+const INSTALLED_FONTS_TAB = {
+  name: 'installed-fonts',
+  title: (0, _i18n.__)('Library'),
+  className: 'installed-fonts'
+};
+const tabsFromCollections = collections => collections.map(({
+  id,
+  name
+}) => ({
+  name: id,
+  title: collections.length === 1 && id === 'default-font-collection' ? (0, _i18n.__)('Install Fonts') : name,
+  className: 'collection'
+}));
 function FontLibraryModal({
   onRequestClose,
   initialTabName = 'installed-fonts'
 }) {
+  const {
+    collections
+  } = (0, _element.useContext)(_context.FontLibraryContext);
+  const tabs = [INSTALLED_FONTS_TAB, ...tabsFromCollections(collections || [])];
   return (0, _element.createElement)(_components.Modal, {
     title: (0, _i18n.__)('Fonts'),
     onRequestClose: onRequestClose,
     isFullScreen: true,
-    className: "font-library-modal",
-    style: {
-      width: '65vw'
-    }
+    className: "font-library-modal"
   }, (0, _element.createElement)(_components.TabPanel, {
     className: "font-library-modal__tab-panel",
     initialTabName: initialTabName,
-    tabs: _constants.MODAL_TABS
+    tabs: tabs
   }, tab => {
     switch (tab.name) {
       case 'installed-fonts':
-      default:
         return (0, _element.createElement)(_installedFonts.default, null);
+      default:
+        return (0, _element.createElement)(_fontCollection.default, {
+          id: tab.name
+        });
     }
   }));
 }

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

@@ -1 +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"}
+{"version":3,"names":["_element","require","_i18n","_components","_installedFonts","_interopRequireDefault","_fontCollection","_context","INSTALLED_FONTS_TAB","name","title","__","className","tabsFromCollections","collections","map","id","length","FontLibraryModal","onRequestClose","initialTabName","useContext","FontLibraryContext","tabs","createElement","Modal","isFullScreen","TabPanel","tab","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';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InstalledFonts from './installed-fonts';\nimport FontCollection from './font-collection';\nimport { FontLibraryContext } from './context';\n\nconst INSTALLED_FONTS_TAB = {\n\tname: 'installed-fonts',\n\ttitle: __( 'Library' ),\n\tclassName: 'installed-fonts',\n};\n\nconst tabsFromCollections = ( collections ) =>\n\tcollections.map( ( { id, name } ) => ( {\n\t\tname: id,\n\t\ttitle:\n\t\t\tcollections.length === 1 && id === 'default-font-collection'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t\tclassName: 'collection',\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tinitialTabName = 'installed-fonts',\n} ) {\n\tconst { collections } = useContext( FontLibraryContext );\n\n\tconst tabs = [\n\t\tINSTALLED_FONTS_TAB,\n\t\t...tabsFromCollections( collections || [] ),\n\t];\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Fonts' ) }\n\t\t\tonRequestClose={ onRequestClose }\n\t\t\tisFullScreen\n\t\t\tclassName=\"font-library-modal\"\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={ 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\t\treturn <InstalledFonts />;\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\treturn <FontCollection id={ tab.name } />;\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":";;;;;;;AAKA,IAAAA,QAAA,GAAAC,OAAA;AAFA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAMA,IAAAG,eAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AAZA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAMO,mBAAmB,GAAG;EAC3BC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU,CAAC;EACtBC,SAAS,EAAE;AACZ,CAAC;AAED,MAAMC,mBAAmB,GAAKC,WAAW,IACxCA,WAAW,CAACC,GAAG,CAAE,CAAE;EAAEC,EAAE;EAAEP;AAAK,CAAC,MAAQ;EACtCA,IAAI,EAAEO,EAAE;EACRN,KAAK,EACJI,WAAW,CAACG,MAAM,KAAK,CAAC,IAAID,EAAE,KAAK,yBAAyB,GACzD,IAAAL,QAAE,EAAE,eAAgB,CAAC,GACrBF,IAAI;EACRG,SAAS,EAAE;AACZ,CAAC,CAAG,CAAC;AAEN,SAASM,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,cAAc,GAAG;AAClB,CAAC,EAAG;EACH,MAAM;IAAEN;EAAY,CAAC,GAAG,IAAAO,mBAAU,EAAEC,2BAAmB,CAAC;EAExD,MAAMC,IAAI,GAAG,CACZf,mBAAmB,EACnB,GAAGK,mBAAmB,CAAEC,WAAW,IAAI,EAAG,CAAC,CAC3C;EAED,OACC,IAAAd,QAAA,CAAAwB,aAAA,EAACrB,WAAA,CAAAsB,KAAK;IACLf,KAAK,EAAG,IAAAC,QAAE,EAAE,OAAQ,CAAG;IACvBQ,cAAc,EAAGA,cAAgB;IACjCO,YAAY;IACZd,SAAS,EAAC;EAAoB,GAE9B,IAAAZ,QAAA,CAAAwB,aAAA,EAACrB,WAAA,CAAAwB,QAAQ;IACRf,SAAS,EAAC,+BAA+B;IACzCQ,cAAc,EAAGA,cAAgB;IACjCG,IAAI,EAAGA;EAAM,GAETK,GAAG,IAAM;IACZ,QAASA,GAAG,CAACnB,IAAI;MAChB,KAAK,iBAAiB;QACrB,OAAO,IAAAT,QAAA,CAAAwB,aAAA,EAACpB,eAAA,CAAAyB,OAAc,MAAE,CAAC;MAC1B;QACC,OAAO,IAAA7B,QAAA,CAAAwB,aAAA,EAAClB,eAAA,CAAAuB,OAAc;UAACb,EAAE,EAAGY,GAAG,CAACnB;QAAM,CAAE,CAAC;IAC3C;EACD,CACS,CACJ,CAAC;AAEV;AAAC,IAAAqB,QAAA,GAEcZ,gBAAgB;AAAAa,OAAA,CAAAF,OAAA,GAAAC,QAAA"}

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

@@ -84,9 +84,9 @@ function InstalledFonts() {
     onClick: () => {
       handleSelectFont(font);
     }
-  })))), baseThemeFonts.length > 0 && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalSpacer, {
+  }))), (0, _element.createElement)(_components.__experimentalSpacer, {
     margin: 8
-  }), (0, _element.createElement)(_fontsGrid.default, {
+  })), baseThemeFonts.length > 0 && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_fontsGrid.default, {
     title: (0, _i18n.__)('Theme Fonts')
   }, baseThemeFonts.map(font => (0, _element.createElement)(_libraryFontCard.default, {
     font: font,

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

@@ -1 +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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"}
+{"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\t<Spacer margin={ 8 } />\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<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

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 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");
 /**
@@ -33,9 +31,6 @@ function LibraryFontCard({
   return (0, _element.createElement)(_fontCard.default, {
     font: font,
     variantsText: variantsText,
-    actionHandler: (0, _element.createElement)(_components.Icon, {
-      icon: _icons.chevronRight
-    }),
     ...props
   });
 }

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

@@ -1 +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"}
+{"version":3,"names":["_element","require","_i18n","_fontCard","_interopRequireDefault","_context","LibraryFontCard","font","props","getFontFacesActivated","useContext","FontLibraryContext","variantsInstalled","fontFace","length","variantsActive","slug","source","variantsText","sprintf","__","createElement","default","_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';\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 font={ font } variantsText={ variantsText } { ...props } />\n\t);\n}\n\nexport default LibraryFontCard;\n"],"mappings":";;;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AADA,IAAAC,KAAA,GAAAD,OAAA;AAMA,IAAAE,SAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASK,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,IAAAZ,QAAA,CAAAqB,aAAA,EAAClB,SAAA,CAAAmB,OAAQ;IAACf,IAAI,EAAGA,IAAM;IAACW,YAAY,EAAGA,YAAc;IAAA,GAAMV;EAAK,CAAI,CAAC;AAEvE;AAAC,IAAAe,QAAA,GAEcjB,eAAe;AAAAkB,OAAA,CAAAF,OAAA,GAAAC,QAAA"}

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _libraryFontVariant = _interopRequireDefault(require("./library-font-variant"));
+var _sortFontFaces = require("./utils/sort-font-faces");
 /**
  * WordPress dependencies
  */
@@ -19,7 +20,7 @@ var _libraryFontVariant = _interopRequireDefault(require("./library-font-variant
 function LibraryFontDetails({
   font
 }) {
-  const fontFaces = font.fontFace && font.fontFace.length ? font.fontFace.sort((a, b) => a.fontWeight > b.fontWeight ? 1 : -1) : [{
+  const fontFaces = font.fontFace && font.fontFace.length ? (0, _sortFontFaces.sortFontFaces)(font.fontFace) : [{
     fontFamily: font.fontFamily,
     fontStyle: 'normal',
     fontWeight: '400'

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

@@ -1 +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"}
+{"version":3,"names":["_components","require","_libraryFontVariant","_interopRequireDefault","_sortFontFaces","LibraryFontDetails","font","fontFaces","fontFace","length","sortFontFaces","fontFamily","fontStyle","fontWeight","_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';\nimport { sortFontFaces } from './utils/sort-font-faces';\n\nfunction LibraryFontDetails( { font } ) {\n\tconst fontFaces =\n\t\tfont.fontFace && font.fontFace.length\n\t\t\t? sortFontFaces( font.fontFace )\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;AACA,IAAAG,cAAA,GAAAH,OAAA;AAZA;AACA;AACA;;AAMA;AACA;AACA;;AAIA,SAASI,kBAAkBA,CAAE;EAAEC;AAAK,CAAC,EAAG;EACvC,MAAMC,SAAS,GACdD,IAAI,CAACE,QAAQ,IAAIF,IAAI,CAACE,QAAQ,CAACC,MAAM,GAClC,IAAAC,4BAAa,EAAEJ,IAAI,CAACE,QAAS,CAAC,GAC9B,CACA;IACCG,UAAU,EAAEL,IAAI,CAACK,UAAU;IAC3BC,SAAS,EAAE,QAAQ;IACnBC,UAAU,EAAE;EACb,CAAC,CACA;EAEL,OACC,IAAAC,QAAA,CAAAC,aAAA,EAAAD,QAAA,CAAAE,QAAA,QACC,IAAAF,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAJ,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAmB,oBAAM;IAACC,OAAO,EAAG;EAAG,GACpB,IAAAN,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACrBX,SAAS,CAACc,GAAG,CAAE,CAAEC,IAAI,EAAEC,CAAC,KACzB,IAAAT,QAAA,CAAAC,aAAA,EAACb,mBAAA,CAAAsB,OAAkB;IAClBlB,IAAI,EAAGA,IAAM;IACbgB,IAAI,EAAGA,IAAM;IACbG,GAAG,EAAI,OAAOF,CAAG;EAAG,CACpB,CACA,CACK,CAAC,EACT,IAAAT,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CACrB,CAAC;AAEL;AAAC,IAAAQ,QAAA,GAEcrB,kBAAkB;AAAAsB,OAAA,CAAAH,OAAA,GAAAE,QAAA"}

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

@@ -4,6 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.fetchFontCollection = fetchFontCollection;
+exports.fetchFontCollections = fetchFontCollections;
 exports.fetchInstallFonts = fetchInstallFonts;
 exports.fetchUninstallFonts = fetchUninstallFonts;
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
@@ -34,4 +36,18 @@ async function fetchUninstallFonts(fonts) {
   };
   return (0, _apiFetch.default)(config);
 }
+async function fetchFontCollections() {
+  const config = {
+    path: '/wp/v2/fonts/collections',
+    method: 'GET'
+  };
+  return (0, _apiFetch.default)(config);
+}
+async function fetchFontCollection(id) {
+  const config = {
+    path: `/wp/v2/fonts/collections/${id}`,
+    method: 'GET'
+  };
+  return (0, _apiFetch.default)(config);
+}
 //# sourceMappingURL=resolvers.js.map