@wordpress/edit-site 5.19.0 → 5.19.2

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

@@ -0,0 +1,164 @@
+import { createElement, Fragment } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { useContext, useEffect, useState, useMemo } from '@wordpress/element';
+import { __experimentalSpacer as Spacer, __experimentalInputControl as InputControl, __experimentalText as Text, SelectControl, Spinner, Icon, FlexItem, Flex, Button } from '@wordpress/components';
+import { debounce } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { search, closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import TabLayout from './tab-layout';
+import { FontLibraryContext } from './context';
+import FontsGrid from './fonts-grid';
+import FontCard from './font-card';
+import filterFonts from './utils/filter-fonts';
+import CollectionFontDetails from './collection-font-details';
+import { toggleFont } from './utils/toggleFont';
+import { getFontsOutline } from './utils/fonts-outline';
+import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
+const DEFAULT_CATEGORY = {
+  id: 'all',
+  name: __('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] = useState(null);
+  const [fontsToInstall, setFontsToInstall] = useState([]);
+  const [filters, setFilters] = useState({});
+  const [renderConfirmDialog, setRenderConfirmDialog] = useState(requiresPermission && !getGoogleFontsPermissionFromStorage());
+  const {
+    collections,
+    getFontCollection
+  } = useContext(FontLibraryContext);
+  const selectedCollection = collections.find(collection => collection.id === id);
+  useEffect(() => {
+    const handleStorage = () => {
+      setRenderConfirmDialog(requiresPermission && !getGoogleFontsPermissionFromStorage());
+    };
+    handleStorage();
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, [id, requiresPermission]);
+  useEffect(() => {
+    getFontCollection(id);
+    resetFilters();
+  }, [id, getFontCollection]);
+  useEffect(() => {
+    setSelectedFont(null);
+  }, [id]);
+  const collectionFonts = 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 = useMemo(() => filterFonts(collectionFonts, filters), [collectionFonts, filters]);
+  const handleCategoryFilter = category => {
+    setFilters({
+      ...filters,
+      category
+    });
+  };
+  const handleUpdateSearchInput = value => {
+    setFilters({
+      ...filters,
+      search: value
+    });
+  };
+  const debouncedUpdateSearchInput = debounce(handleUpdateSearchInput, 300);
+  const resetFilters = () => {
+    setFilters({});
+  };
+  const resetSearch = () => {
+    setFilters({
+      ...filters,
+      search: ''
+    });
+  };
+  const handleUnselectFont = () => {
+    setSelectedFont(null);
+  };
+  const handleToggleVariant = (font, face) => {
+    const newFontsToInstall = toggleFont(font, face, fontsToInstall);
+    setFontsToInstall(newFontsToInstall);
+  };
+  const fontToInstallOutline = getFontsOutline(fontsToInstall);
+  const resetFontsToInstall = () => {
+    setFontsToInstall([]);
+  };
+  return createElement(TabLayout, {
+    title: !selectedFont ? selectedCollection.name : selectedFont.name,
+    description: !selectedFont ? selectedCollection.description : __('Select font variants to install.'),
+    handleBack: !!selectedFont && handleUnselectFont,
+    footer: fontsToInstall.length > 0 && createElement(Footer, {
+      fontsToInstall: fontsToInstall,
+      resetFontsToInstall: resetFontsToInstall
+    })
+  }, renderConfirmDialog && createElement(Fragment, null, createElement(Spacer, {
+    margin: 8
+  }), createElement(GoogleFontsConfirmDialog, null)), !renderConfirmDialog && !selectedCollection.data && createElement(Spinner, null), !renderConfirmDialog && !selectedFont && createElement(Flex, null, createElement(FlexItem, null, createElement(InputControl, {
+    value: filters.search,
+    placeholder: __('Font name…'),
+    label: __('Search'),
+    onChange: debouncedUpdateSearchInput,
+    prefix: createElement(Icon, {
+      icon: search
+    }),
+    suffix: filters?.search ? createElement(Icon, {
+      icon: closeSmall,
+      onClick: resetSearch
+    }) : null
+  })), createElement(FlexItem, null, createElement(SelectControl, {
+    label: __('Category'),
+    value: filters.category,
+    onChange: handleCategoryFilter
+  }, categories && categories.map(category => createElement("option", {
+    value: category.id,
+    key: category.id
+  }, category.name))))), createElement(Spacer, {
+    margin: 4
+  }), !renderConfirmDialog && !selectedCollection?.data?.fontFamilies && createElement(Spinner, null), !renderConfirmDialog && !!selectedCollection?.data?.fontFamilies?.length && !fonts.length && createElement(Text, null, __('No fonts found. Try with a different seach term')), !renderConfirmDialog && selectedFont && createElement(CollectionFontDetails, {
+    font: selectedFont,
+    handleToggleVariant: handleToggleVariant,
+    fontToInstallOutline: fontToInstallOutline
+  }), !renderConfirmDialog && !selectedFont && createElement(FontsGrid, null, fonts.map(font => createElement(FontCard, {
+    key: font.slug,
+    font: font,
+    onClick: () => {
+      setSelectedFont(font);
+    }
+  }))));
+}
+function Footer({
+  fontsToInstall,
+  resetFontsToInstall
+}) {
+  const {
+    installFonts,
+    isInstalling
+  } = useContext(FontLibraryContext);
+  const handleInstall = async () => {
+    await installFonts(fontsToInstall);
+    resetFontsToInstall();
+  };
+  return createElement(Flex, {
+    justify: "flex-end"
+  }, createElement(Button, {
+    variant: "primary",
+    onClick: handleInstall,
+    isBusy: isInstalling,
+    disabled: isInstalling
+  }, __('Install')));
+}
+export default FontCollection;
+//# sourceMappingURL=font-collection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useContext","useEffect","useState","useMemo","__experimentalSpacer","Spacer","__experimentalInputControl","InputControl","__experimentalText","Text","SelectControl","Spinner","Icon","FlexItem","Flex","Button","debounce","__","search","closeSmall","TabLayout","FontLibraryContext","FontsGrid","FontCard","filterFonts","CollectionFontDetails","toggleFont","getFontsOutline","GoogleFontsConfirmDialog","DEFAULT_CATEGORY","id","name","FontCollection","_selectedCollection$d2","requiresPermission","getGoogleFontsPermissionFromStorage","window","localStorage","getItem","selectedFont","setSelectedFont","fontsToInstall","setFontsToInstall","filters","setFilters","renderConfirmDialog","setRenderConfirmDialog","collections","getFontCollection","selectedCollection","find","collection","handleStorage","addEventListener","removeEventListener","resetFilters","collectionFonts","_selectedCollection$d","data","fontFamilies","collectionCategories","categories","fonts","handleCategoryFilter","category","handleUpdateSearchInput","value","debouncedUpdateSearchInput","resetSearch","handleUnselectFont","handleToggleVariant","font","face","newFontsToInstall","fontToInstallOutline","resetFontsToInstall","createElement","title","description","handleBack","footer","length","Footer","Fragment","margin","placeholder","label","onChange","prefix","icon","suffix","onClick","map","key","slug","installFonts","isInstalling","handleInstall","justify","variant","isBusy","disabled"],"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":";AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,oBAAoB;AAC7E,SACCC,oBAAoB,IAAIC,MAAM,EAC9BC,0BAA0B,IAAIC,YAAY,EAC1CC,kBAAkB,IAAIC,IAAI,EAC1BC,aAAa,EACbC,OAAO,EACPC,IAAI,EACJC,QAAQ,EACRC,IAAI,EACJC,MAAM,QACA,uBAAuB;AAC9B,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,MAAM,EAAEC,UAAU,QAAQ,kBAAkB;;AAErD;AACA;AACA;AACA,OAAOC,SAAS,MAAM,cAAc;AACpC,SAASC,kBAAkB,QAAQ,WAAW;AAC9C,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,WAAW,MAAM,sBAAsB;AAC9C,OAAOC,qBAAqB,MAAM,2BAA2B;AAC7D,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,eAAe,QAAQ,uBAAuB;AACvD,OAAOC,wBAAwB,MAAM,+BAA+B;AAEpE,MAAMC,gBAAgB,GAAG;EACxBC,EAAE,EAAE,KAAK;EACTC,IAAI,EAAEd,EAAE,CAAE,KAAM;AACjB,CAAC;AACD,SAASe,cAAcA,CAAE;EAAEF;AAAG,CAAC,EAAG;EAAA,IAAAG,sBAAA;EACjC,MAAMC,kBAAkB,GAAGJ,EAAE,KAAK,yBAAyB;EAE3D,MAAMK,mCAAmC,GAAGA,CAAA,KAAM;IACjD,OACCC,MAAM,CAACC,YAAY,CAACC,OAAO,CAC1B,oDACD,CAAC,KAAK,MAAM;EAEd,CAAC;EAED,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAGtC,QAAQ,CAAE,IAAK,CAAC;EAC1D,MAAM,CAAEuC,cAAc,EAAEC,iBAAiB,CAAE,GAAGxC,QAAQ,CAAE,EAAG,CAAC;EAC5D,MAAM,CAAEyC,OAAO,EAAEC,UAAU,CAAE,GAAG1C,QAAQ,CAAE,CAAC,CAAE,CAAC;EAC9C,MAAM,CAAE2C,mBAAmB,EAAEC,sBAAsB,CAAE,GAAG5C,QAAQ,CAC/DgC,kBAAkB,IAAI,CAAEC,mCAAmC,CAAC,CAC7D,CAAC;EACD,MAAM;IAAEY,WAAW;IAAEC;EAAkB,CAAC,GAAGhD,UAAU,CAAEqB,kBAAmB,CAAC;EAC3E,MAAM4B,kBAAkB,GAAGF,WAAW,CAACG,IAAI,CACxCC,UAAU,IAAMA,UAAU,CAACrB,EAAE,KAAKA,EACrC,CAAC;EAED7B,SAAS,CAAE,MAAM;IAChB,MAAMmD,aAAa,GAAGA,CAAA,KAAM;MAC3BN,sBAAsB,CACrBZ,kBAAkB,IAAI,CAAEC,mCAAmC,CAAC,CAC7D,CAAC;IACF,CAAC;IACDiB,aAAa,CAAC,CAAC;IACfhB,MAAM,CAACiB,gBAAgB,CAAE,SAAS,EAAED,aAAc,CAAC;IACnD,OAAO,MAAMhB,MAAM,CAACkB,mBAAmB,CAAE,SAAS,EAAEF,aAAc,CAAC;EACpE,CAAC,EAAE,CAAEtB,EAAE,EAAEI,kBAAkB,CAAG,CAAC;EAE/BjC,SAAS,CAAE,MAAM;IAChB+C,iBAAiB,CAAElB,EAAG,CAAC;IACvByB,YAAY,CAAC,CAAC;EACf,CAAC,EAAE,CAAEzB,EAAE,EAAEkB,iBAAiB,CAAG,CAAC;EAE9B/C,SAAS,CAAE,MAAM;IAChBuC,eAAe,CAAE,IAAK,CAAC;EACxB,CAAC,EAAE,CAAEV,EAAE,CAAG,CAAC;EAEX,MAAM0B,eAAe,GAAGrD,OAAO,CAC9B;IAAA,IAAAsD,qBAAA;IAAA,QAAAA,qBAAA,GAAMR,kBAAkB,EAAES,IAAI,EAAEC,YAAY,cAAAF,qBAAA,cAAAA,qBAAA,GAAI,EAAE;EAAA,GAClD,CAAER,kBAAkB,CACrB,CAAC;EACD,MAAMW,oBAAoB,IAAA3B,sBAAA,GAAGgB,kBAAkB,EAAES,IAAI,EAAEG,UAAU,cAAA5B,sBAAA,cAAAA,sBAAA,GAAI,EAAE;EAEvE,MAAM4B,UAAU,GAAG,CAAEhC,gBAAgB,EAAE,GAAG+B,oBAAoB,CAAE;EAEhE,MAAME,KAAK,GAAG3D,OAAO,CACpB,MAAMqB,WAAW,CAAEgC,eAAe,EAAEb,OAAQ,CAAC,EAC7C,CAAEa,eAAe,EAAEb,OAAO,CAC3B,CAAC;EAED,MAAMoB,oBAAoB,GAAKC,QAAQ,IAAM;IAC5CpB,UAAU,CAAE;MAAE,GAAGD,OAAO;MAAEqB;IAAS,CAAE,CAAC;EACvC,CAAC;EAED,MAAMC,uBAAuB,GAAKC,KAAK,IAAM;IAC5CtB,UAAU,CAAE;MAAE,GAAGD,OAAO;MAAEzB,MAAM,EAAEgD;IAAM,CAAE,CAAC;EAC5C,CAAC;EAED,MAAMC,0BAA0B,GAAGnD,QAAQ,CAAEiD,uBAAuB,EAAE,GAAI,CAAC;EAE3E,MAAMV,YAAY,GAAGA,CAAA,KAAM;IAC1BX,UAAU,CAAE,CAAC,CAAE,CAAC;EACjB,CAAC;EAED,MAAMwB,WAAW,GAAGA,CAAA,KAAM;IACzBxB,UAAU,CAAE;MAAE,GAAGD,OAAO;MAAEzB,MAAM,EAAE;IAAG,CAAE,CAAC;EACzC,CAAC;EAED,MAAMmD,kBAAkB,GAAGA,CAAA,KAAM;IAChC7B,eAAe,CAAE,IAAK,CAAC;EACxB,CAAC;EAED,MAAM8B,mBAAmB,GAAGA,CAAEC,IAAI,EAAEC,IAAI,KAAM;IAC7C,MAAMC,iBAAiB,GAAG/C,UAAU,CAAE6C,IAAI,EAAEC,IAAI,EAAE/B,cAAe,CAAC;IAClEC,iBAAiB,CAAE+B,iBAAkB,CAAC;EACvC,CAAC;EAED,MAAMC,oBAAoB,GAAG/C,eAAe,CAAEc,cAAe,CAAC;EAE9D,MAAMkC,mBAAmB,GAAGA,CAAA,KAAM;IACjCjC,iBAAiB,CAAE,EAAG,CAAC;EACxB,CAAC;EAED,OACCkC,aAAA,CAACxD,SAAS;IACTyD,KAAK,EACJ,CAAEtC,YAAY,GAAGU,kBAAkB,CAAClB,IAAI,GAAGQ,YAAY,CAACR,IACxD;IACD+C,WAAW,EACV,CAAEvC,YAAY,GACXU,kBAAkB,CAAC6B,WAAW,GAC9B7D,EAAE,CAAE,kCAAmC,CAC1C;IACD8D,UAAU,EAAG,CAAC,CAAExC,YAAY,IAAI8B,kBAAoB;IACpDW,MAAM,EACLvC,cAAc,CAACwC,MAAM,GAAG,CAAC,IACxBL,aAAA,CAACM,MAAM;MACNzC,cAAc,EAAGA,cAAgB;MACjCkC,mBAAmB,EAAGA;IAAqB,CAC3C;EAEF,GAEC9B,mBAAmB,IACpB+B,aAAA,CAAAO,QAAA,QACCP,aAAA,CAACvE,MAAM;IAAC+E,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBR,aAAA,CAAChD,wBAAwB,MAAE,CAC1B,CACF,EAEC,CAAEiB,mBAAmB,IAAI,CAAEI,kBAAkB,CAACS,IAAI,IACnDkB,aAAA,CAACjE,OAAO,MAAE,CACV,EAEC,CAAEkC,mBAAmB,IAAI,CAAEN,YAAY,IACxCqC,aAAA,CAAC9D,IAAI,QACJ8D,aAAA,CAAC/D,QAAQ,QACR+D,aAAA,CAACrE,YAAY;IACZ2D,KAAK,EAAGvB,OAAO,CAACzB,MAAQ;IACxBmE,WAAW,EAAGpE,EAAE,CAAE,YAAa,CAAG;IAClCqE,KAAK,EAAGrE,EAAE,CAAE,QAAS,CAAG;IACxBsE,QAAQ,EAAGpB,0BAA4B;IACvCqB,MAAM,EAAGZ,aAAA,CAAChE,IAAI;MAAC6E,IAAI,EAAGvE;IAAQ,CAAE,CAAG;IACnCwE,MAAM,EACL/C,OAAO,EAAEzB,MAAM,GACd0D,aAAA,CAAChE,IAAI;MACJ6E,IAAI,EAAGtE,UAAY;MACnBwE,OAAO,EAAGvB;IAAa,CACvB,CAAC,GACC;EACJ,CACD,CACQ,CAAC,EACXQ,aAAA,CAAC/D,QAAQ,QACR+D,aAAA,CAAClE,aAAa;IACb4E,KAAK,EAAGrE,EAAE,CAAE,UAAW,CAAG;IAC1BiD,KAAK,EAAGvB,OAAO,CAACqB,QAAU;IAC1BuB,QAAQ,EAAGxB;EAAsB,GAE/BF,UAAU,IACXA,UAAU,CAAC+B,GAAG,CAAI5B,QAAQ,IACzBY,aAAA;IACCV,KAAK,EAAGF,QAAQ,CAAClC,EAAI;IACrB+D,GAAG,EAAG7B,QAAQ,CAAClC;EAAI,GAEjBkC,QAAQ,CAACjC,IACJ,CACP,CACW,CACN,CACL,CACN,EAED6C,aAAA,CAACvE,MAAM;IAAC+E,MAAM,EAAG;EAAG,CAAE,CAAC,EAErB,CAAEvC,mBAAmB,IACtB,CAAEI,kBAAkB,EAAES,IAAI,EAAEC,YAAY,IAAIiB,aAAA,CAACjE,OAAO,MAAE,CAAC,EAEtD,CAAEkC,mBAAmB,IACtB,CAAC,CAAEI,kBAAkB,EAAES,IAAI,EAAEC,YAAY,EAAEsB,MAAM,IACjD,CAAEnB,KAAK,CAACmB,MAAM,IACbL,aAAA,CAACnE,IAAI,QACFQ,EAAE,CACH,iDACD,CACK,CACN,EAEA,CAAE4B,mBAAmB,IAAIN,YAAY,IACtCqC,aAAA,CAACnD,qBAAqB;IACrB8C,IAAI,EAAGhC,YAAc;IACrB+B,mBAAmB,EAAGA,mBAAqB;IAC3CI,oBAAoB,EAAGA;EAAsB,CAC7C,CACD,EAEC,CAAE7B,mBAAmB,IAAI,CAAEN,YAAY,IACxCqC,aAAA,CAACtD,SAAS,QACPwC,KAAK,CAAC8B,GAAG,CAAIrB,IAAI,IAClBK,aAAA,CAACrD,QAAQ;IACRsE,GAAG,EAAGtB,IAAI,CAACuB,IAAM;IACjBvB,IAAI,EAAGA,IAAM;IACboB,OAAO,EAAGA,CAAA,KAAM;MACfnD,eAAe,CAAE+B,IAAK,CAAC;IACxB;EAAG,CACH,CACA,CACQ,CAEF,CAAC;AAEd;AAEA,SAASW,MAAMA,CAAE;EAAEzC,cAAc;EAAEkC;AAAoB,CAAC,EAAG;EAC1D,MAAM;IAAEoB,YAAY;IAAEC;EAAa,CAAC,GAAGhG,UAAU,CAAEqB,kBAAmB,CAAC;EAEvE,MAAM4E,aAAa,GAAG,MAAAA,CAAA,KAAY;IACjC,MAAMF,YAAY,CAAEtD,cAAe,CAAC;IACpCkC,mBAAmB,CAAC,CAAC;EACtB,CAAC;EAED,OACCC,aAAA,CAAC9D,IAAI;IAACoF,OAAO,EAAC;EAAU,GACvBtB,aAAA,CAAC7D,MAAM;IACNoF,OAAO,EAAC,SAAS;IACjBR,OAAO,EAAGM,aAAe;IACzBG,MAAM,EAAGJ,YAAc;IACvBK,QAAQ,EAAGL;EAAc,GAEvB/E,EAAE,CAAE,SAAU,CACT,CACH,CAAC;AAET;AAEA,eAAee,cAAc"}

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

@@ -9,7 +9,17 @@ import { useContext, useEffect, useState, useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { FontLibraryContext } from './context';
+import { getFacePreviewStyle } from './utils/preview-styles';
+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 = {}
@@ -20,21 +30,22 @@ function FontFaceDemo({
   const {
     loadFontFaceAsset
   } = useContext(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 = 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'
+  };
   useEffect(() => {
     const observer = new window.IntersectionObserver(([entry]) => {
       setIsIntersecting(entry.isIntersecting);
@@ -45,7 +56,7 @@ function FontFaceDemo({
   useEffect(() => {
     const loadAsset = async () => {
       if (isIntersecting) {
-        if (fontFace.src) {
+        if (!isPreviewImage && fontFace.src) {
           await loadFontFaceAsset(fontFace);
         }
         setIsAssetLoaded(true);
@@ -53,10 +64,16 @@ function FontFaceDemo({
     };
     loadAsset();
   }, [fontFace, isIntersecting, loadFontFaceAsset]);
-  return createElement(Text, {
-    style: demoStyle,
+  return createElement("div", {
     ref: ref
-  }, text);
+  }, isPreviewImage ? createElement("img", {
+    src: previewUrl,
+    loading: "lazy",
+    alt: text,
+    style: imageDemoStyle
+  }) : createElement(Text, {
+    style: textDemoStyle
+  }, text));
 }
 export default FontFaceDemo;
 //# sourceMappingURL=font-demo.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalText","Text","useContext","useEffect","useState","useRef","FontLibraryContext","FontFaceDemo","fontFace","text","style","ref","isIntersecting","setIsIntersecting","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","fontFamily","fontStyle","fontWeight","demoStyle","flexShrink","fontSize","opacity","transition","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","src","createElement"],"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":";AAAA;AACA;AACA;AACA,SAASA,kBAAkB,IAAIC,IAAI,QAAQ,uBAAuB;AAClE,SAASC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,oBAAoB;;AAE5E;AACA;AACA;AACA,SAASC,kBAAkB,QAAQ,WAAW;AAE9C,SAASC,YAAYA,CAAE;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,KAAK,GAAG,CAAC;AAAE,CAAC,EAAG;EACvD,MAAMC,GAAG,GAAGN,MAAM,CAAE,IAAK,CAAC;EAC1B,MAAM,CAAEO,cAAc,EAAEC,iBAAiB,CAAE,GAAGT,QAAQ,CAAE,KAAM,CAAC;EAC/D,MAAM,CAAEU,aAAa,EAAEC,gBAAgB,CAAE,GAAGX,QAAQ,CAAE,KAAM,CAAC;EAC7D,MAAM;IAAEY;EAAkB,CAAC,GAAGd,UAAU,CAAEI,kBAAmB,CAAC;EAC9D,MAAM;IAAEW,UAAU;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAGX,QAAQ;EAEtD,MAAMY,SAAS,GAAG;IACjBD,UAAU;IACVD,SAAS;IACTD,UAAU;IACVI,UAAU,EAAE,CAAC;IACbC,QAAQ,EAAE,MAAM;IAChBC,OAAO,EAAET,aAAa,GAAG,GAAG,GAAG,GAAG;IAClCU,UAAU,EAAE,0BAA0B;IACtC,GAAGd;EACJ,CAAC;EAEDP,SAAS,CAAE,MAAM;IAChB,MAAMsB,QAAQ,GAAG,IAAIC,MAAM,CAACC,oBAAoB,CAAE,CAAE,CAAEC,KAAK,CAAE,KAAM;MAClEf,iBAAiB,CAAEe,KAAK,CAAChB,cAAe,CAAC;IAC1C,CAAC,EAAE,CAAC,CAAE,CAAC;IACPa,QAAQ,CAACI,OAAO,CAAElB,GAAG,CAACmB,OAAQ,CAAC;IAC/B,OAAO,MAAML,QAAQ,CAACM,UAAU,CAAC,CAAC;EACnC,CAAC,EAAE,CAAEpB,GAAG,CAAG,CAAC;EAEZR,SAAS,CAAE,MAAM;IAChB,MAAM6B,SAAS,GAAG,MAAAA,CAAA,KAAY;MAC7B,IAAKpB,cAAc,EAAG;QACrB,IAAKJ,QAAQ,CAACyB,GAAG,EAAG;UACnB,MAAMjB,iBAAiB,CAAER,QAAS,CAAC;QACpC;QACAO,gBAAgB,CAAE,IAAK,CAAC;MACzB;IACD,CAAC;IACDiB,SAAS,CAAC,CAAC;EACZ,CAAC,EAAE,CAAExB,QAAQ,EAAEI,cAAc,EAAEI,iBAAiB,CAAG,CAAC;EAEpD,OACCkB,aAAA,CAACjC,IAAI;IAACS,KAAK,EAAGU,SAAW;IAACT,GAAG,EAAGA;EAAK,GAClCF,IACG,CAAC;AAET;AAEA,eAAeF,YAAY"}
+{"version":3,"names":["__experimentalText","Text","useContext","useEffect","useState","useRef","FontLibraryContext","getFacePreviewStyle","getPreviewUrl","fontFace","preview","src","Array","isArray","FontFaceDemo","customPreviewUrl","text","style","ref","isIntersecting","setIsIntersecting","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","previewUrl","isPreviewImage","match","faceStyles","textDemoStyle","whiteSpace","flexShrink","fontSize","opacity","transition","imageDemoStyle","height","width","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","createElement","loading","alt"],"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-module/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js

@@ -0,0 +1,33 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, Card, CardBody, __experimentalText as Text, __experimentalSpacer as Spacer } from '@wordpress/components';
+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 createElement("div", {
+    className: "font-library__google-fonts-confirm"
+  }, createElement(Card, null, createElement(CardBody, null, createElement(Text, {
+    as: "h3"
+  }, "Connect to Google Fonts"), createElement(Spacer, {
+    margin: 6
+  }), createElement(Text, {
+    as: "p"
+  }, __('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.')), createElement(Spacer, {
+    margin: 3
+  }), createElement(Text, {
+    as: "p"
+  }, __('You can alternatively upload files directly on the Library tab.')), createElement(Spacer, {
+    margin: 6
+  }), createElement(Button, {
+    variant: "primary",
+    onClick: handleConfirm
+  }, __('Allow access to Google Fonts')))));
+}
+export default GoogleFontsConfirmDialog;
+//# sourceMappingURL=google-fonts-confirm-dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__","Button","Card","CardBody","__experimentalText","Text","__experimentalSpacer","Spacer","GoogleFontsConfirmDialog","handleConfirm","window","localStorage","setItem","dispatchEvent","Event","createElement","className","as","margin","variant","onClick"],"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":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SACCC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAE9B,SAASC,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,OACCC,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAClDD,aAAA,CAACb,IAAI,QACJa,aAAA,CAACZ,QAAQ,QACRY,aAAA,CAACV,IAAI;IAACY,EAAE,EAAC;EAAI,GAAC,yBAA6B,CAAC,EAC5CF,aAAA,CAACR,MAAM;IAACW,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBH,aAAA,CAACV,IAAI;IAACY,EAAE,EAAC;EAAG,GACTjB,EAAE,CACH,gOACD,CACK,CAAC,EACPe,aAAA,CAACR,MAAM;IAACW,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBH,aAAA,CAACV,IAAI;IAACY,EAAE,EAAC;EAAG,GACTjB,EAAE,CACH,iEACD,CACK,CAAC,EACPe,aAAA,CAACR,MAAM;IAACW,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBH,aAAA,CAACd,MAAM;IAACkB,OAAO,EAAC,SAAS;IAACC,OAAO,EAAGX;EAAe,GAChDT,EAAE,CAAE,8BAA+B,CAC9B,CACC,CACL,CACF,CAAC;AAER;AAEA,eAAeQ,wBAAwB"}

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

@@ -4,33 +4,52 @@ import { createElement } from "@wordpress/element";
  */
 import { __ } from '@wordpress/i18n';
 import { Modal, TabPanel } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import InstalledFonts from './installed-fonts';
-import { MODAL_TABS } from './utils/constants';
+import FontCollection from './font-collection';
+import { FontLibraryContext } from './context';
+const INSTALLED_FONTS_TAB = {
+  name: 'installed-fonts',
+  title: __('Library'),
+  className: 'installed-fonts'
+};
+const tabsFromCollections = collections => collections.map(({
+  id,
+  name
+}) => ({
+  name: id,
+  title: collections.length === 1 && id === 'default-font-collection' ? __('Install Fonts') : name,
+  className: 'collection'
+}));
 function FontLibraryModal({
   onRequestClose,
   initialTabName = 'installed-fonts'
 }) {
+  const {
+    collections
+  } = useContext(FontLibraryContext);
+  const tabs = [INSTALLED_FONTS_TAB, ...tabsFromCollections(collections || [])];
   return createElement(Modal, {
     title: __('Fonts'),
     onRequestClose: onRequestClose,
     isFullScreen: true,
-    className: "font-library-modal",
-    style: {
-      width: '65vw'
-    }
+    className: "font-library-modal"
   }, createElement(TabPanel, {
     className: "font-library-modal__tab-panel",
     initialTabName: initialTabName,
-    tabs: MODAL_TABS
+    tabs: tabs
   }, tab => {
     switch (tab.name) {
       case 'installed-fonts':
-      default:
         return createElement(InstalledFonts, null);
+      default:
+        return createElement(FontCollection, {
+          id: tab.name
+        });
     }
   }));
 }

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

@@ -1 +1 @@
-{"version":3,"names":["__","Modal","TabPanel","InstalledFonts","MODAL_TABS","FontLibraryModal","onRequestClose","initialTabName","createElement","title","isFullScreen","className","style","width","tabs","tab","name"],"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":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,KAAK,EAAEC,QAAQ,QAAQ,uBAAuB;;AAEvD;AACA;AACA;AACA,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,SAASC,UAAU,QAAQ,mBAAmB;AAE9C,SAASC,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,cAAc,GAAG;AAClB,CAAC,EAAG;EACH,OACCC,aAAA,CAACP,KAAK;IACLQ,KAAK,EAAGT,EAAE,CAAE,OAAQ,CAAG;IACvBM,cAAc,EAAGA,cAAgB;IACjCI,YAAY,EAAG,IAAM;IACrBC,SAAS,EAAC,oBAAoB;IAC9BC,KAAK,EAAG;MAAEC,KAAK,EAAE;IAAO;EAAG,GAE3BL,aAAA,CAACN,QAAQ;IACRS,SAAS,EAAC,+BAA+B;IACzCJ,cAAc,EAAGA,cAAgB;IACjCO,IAAI,EAAGV;EAAY,GAEfW,GAAG,IAAM;IACZ,QAASA,GAAG,CAACC,IAAI;MAChB,KAAK,iBAAiB;MACtB;QACC,OAAOR,aAAA,CAACL,cAAc,MAAE,CAAC;IAC3B;EACD,CACS,CACJ,CAAC;AAEV;AAEA,eAAeE,gBAAgB"}
+{"version":3,"names":["__","Modal","TabPanel","useContext","InstalledFonts","FontCollection","FontLibraryContext","INSTALLED_FONTS_TAB","name","title","className","tabsFromCollections","collections","map","id","length","FontLibraryModal","onRequestClose","initialTabName","tabs","createElement","isFullScreen","tab"],"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":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,KAAK,EAAEC,QAAQ,QAAQ,uBAAuB;AACvD,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,SAASC,kBAAkB,QAAQ,WAAW;AAE9C,MAAMC,mBAAmB,GAAG;EAC3BC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAET,EAAE,CAAE,SAAU,CAAC;EACtBU,SAAS,EAAE;AACZ,CAAC;AAED,MAAMC,mBAAmB,GAAKC,WAAW,IACxCA,WAAW,CAACC,GAAG,CAAE,CAAE;EAAEC,EAAE;EAAEN;AAAK,CAAC,MAAQ;EACtCA,IAAI,EAAEM,EAAE;EACRL,KAAK,EACJG,WAAW,CAACG,MAAM,KAAK,CAAC,IAAID,EAAE,KAAK,yBAAyB,GACzDd,EAAE,CAAE,eAAgB,CAAC,GACrBQ,IAAI;EACRE,SAAS,EAAE;AACZ,CAAC,CAAG,CAAC;AAEN,SAASM,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,cAAc,GAAG;AAClB,CAAC,EAAG;EACH,MAAM;IAAEN;EAAY,CAAC,GAAGT,UAAU,CAAEG,kBAAmB,CAAC;EAExD,MAAMa,IAAI,GAAG,CACZZ,mBAAmB,EACnB,GAAGI,mBAAmB,CAAEC,WAAW,IAAI,EAAG,CAAC,CAC3C;EAED,OACCQ,aAAA,CAACnB,KAAK;IACLQ,KAAK,EAAGT,EAAE,CAAE,OAAQ,CAAG;IACvBiB,cAAc,EAAGA,cAAgB;IACjCI,YAAY;IACZX,SAAS,EAAC;EAAoB,GAE9BU,aAAA,CAAClB,QAAQ;IACRQ,SAAS,EAAC,+BAA+B;IACzCQ,cAAc,EAAGA,cAAgB;IACjCC,IAAI,EAAGA;EAAM,GAETG,GAAG,IAAM;IACZ,QAASA,GAAG,CAACd,IAAI;MAChB,KAAK,iBAAiB;QACrB,OAAOY,aAAA,CAAChB,cAAc,MAAE,CAAC;MAC1B;QACC,OAAOgB,aAAA,CAACf,cAAc;UAACS,EAAE,EAAGQ,GAAG,CAACd;QAAM,CAAE,CAAC;IAC3C;EACD,CACS,CACJ,CAAC;AAEV;AAEA,eAAeQ,gBAAgB"}

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

@@ -77,9 +77,9 @@ function InstalledFonts() {
     onClick: () => {
       handleSelectFont(font);
     }
-  })))), baseThemeFonts.length > 0 && createElement(Fragment, null, createElement(Spacer, {
+  }))), createElement(Spacer, {
     margin: 8
-  }), createElement(FontsGrid, {
+  })), baseThemeFonts.length > 0 && createElement(Fragment, null, createElement(FontsGrid, {
     title: __('Theme Fonts')
   }, baseThemeFonts.map(font => createElement(LibraryFontCard, {
     font: font,

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

@@ -1 +1 @@
-{"version":3,"names":["__","useContext","useEffect","useState","privateApis","componentsPrivateApis","__experimentalHStack","HStack","__experimentalSpacer","Spacer","Button","Spinner","TabLayout","FontLibraryContext","FontsGrid","LibraryFontDetails","LibraryFontCard","LocalFonts","ConfirmDeleteDialog","unlock","ProgressBar","InstalledFonts","baseCustomFonts","libraryFontSelected","baseThemeFonts","handleSetLibraryFontSelected","refreshLibrary","uninstallFont","isResolvingLibrary","isConfirmDeleteOpen","setIsConfirmDeleteOpen","handleUnselectFont","handleSelectFont","font","handleConfirmUninstall","result","handleUninstallClick","handleCancelUninstall","tabDescription","shouldDisplayDeleteButton","source","createElement","title","name","description","handleBack","footer","Footer","Fragment","length","margin","map","key","slug","onClick","saveFontFamilies","fontFamiliesHasChanges","isInstalling","justify","variant","disabled"],"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":["__","useContext","useEffect","useState","privateApis","componentsPrivateApis","__experimentalHStack","HStack","__experimentalSpacer","Spacer","Button","Spinner","TabLayout","FontLibraryContext","FontsGrid","LibraryFontDetails","LibraryFontCard","LocalFonts","ConfirmDeleteDialog","unlock","ProgressBar","InstalledFonts","baseCustomFonts","libraryFontSelected","baseThemeFonts","handleSetLibraryFontSelected","refreshLibrary","uninstallFont","isResolvingLibrary","isConfirmDeleteOpen","setIsConfirmDeleteOpen","handleUnselectFont","handleSelectFont","font","handleConfirmUninstall","result","handleUninstallClick","handleCancelUninstall","tabDescription","shouldDisplayDeleteButton","source","createElement","title","name","description","handleBack","footer","Footer","Fragment","length","margin","map","key","slug","onClick","saveFontFamilies","fontFamiliesHasChanges","isInstalling","justify","variant","disabled"],"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-module/components/global-styles/font-library-modal/library-font-card.js

@@ -4,8 +4,6 @@ import { createElement } from "@wordpress/element";
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { Icon } from '@wordpress/components';
-import { chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -26,9 +24,6 @@ function LibraryFontCard({
   return createElement(FontCard, {
     font: font,
     variantsText: variantsText,
-    actionHandler: createElement(Icon, {
-      icon: chevronRight
-    }),
     ...props
   });
 }

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

@@ -1 +1 @@
-{"version":3,"names":["__","sprintf","useContext","Icon","chevronRight","FontCard","FontLibraryContext","LibraryFontCard","font","props","getFontFacesActivated","variantsInstalled","fontFace","length","variantsActive","slug","source","variantsText","createElement","actionHandler","icon"],"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":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,IAAI,QAAQ,uBAAuB;AAC5C,SAASC,YAAY,QAAQ,kBAAkB;;AAE/C;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,SAASC,kBAAkB,QAAQ,WAAW;AAE9C,SAASC,eAAeA,CAAE;EAAEC,IAAI;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC9C,MAAM;IAAEC;EAAsB,CAAC,GAAGR,UAAU,CAAEI,kBAAmB,CAAC;EAElE,MAAMK,iBAAiB,GAAGH,IAAI,CAACI,QAAQ,EAAEC,MAAM,IAAI,CAAC;EACpD,MAAMC,cAAc,GAAGJ,qBAAqB,CAC3CF,IAAI,CAACO,IAAI,EACTP,IAAI,CAACQ,MACN,CAAC,CAACH,MAAM;EACR,MAAMI,YAAY,GAAGhB,OAAO,EAC3B;EACAD,EAAE,CAAE,2BAA4B,CAAC,EACjCc,cAAc,EACdH,iBACD,CAAC;EAED,OACCO,aAAA,CAACb,QAAQ;IACRG,IAAI,EAAGA,IAAM;IACbS,YAAY,EAAGA,YAAc;IAC7BE,aAAa,EAAGD,aAAA,CAACf,IAAI;MAACiB,IAAI,EAAGhB;IAAc,CAAE,CAAG;IAAA,GAC3CK;EAAK,CACV,CAAC;AAEJ;AAEA,eAAeF,eAAe"}
+{"version":3,"names":["__","sprintf","useContext","FontCard","FontLibraryContext","LibraryFontCard","font","props","getFontFacesActivated","variantsInstalled","fontFace","length","variantsActive","slug","source","variantsText","createElement"],"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":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,SAASC,kBAAkB,QAAQ,WAAW;AAE9C,SAASC,eAAeA,CAAE;EAAEC,IAAI;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC9C,MAAM;IAAEC;EAAsB,CAAC,GAAGN,UAAU,CAAEE,kBAAmB,CAAC;EAElE,MAAMK,iBAAiB,GAAGH,IAAI,CAACI,QAAQ,EAAEC,MAAM,IAAI,CAAC;EACpD,MAAMC,cAAc,GAAGJ,qBAAqB,CAC3CF,IAAI,CAACO,IAAI,EACTP,IAAI,CAACQ,MACN,CAAC,CAACH,MAAM;EACR,MAAMI,YAAY,GAAGd,OAAO,EAC3B;EACAD,EAAE,CAAE,2BAA4B,CAAC,EACjCY,cAAc,EACdH,iBACD,CAAC;EAED,OACCO,aAAA,CAACb,QAAQ;IAACG,IAAI,EAAGA,IAAM;IAACS,YAAY,EAAGA,YAAc;IAAA,GAAMR;EAAK,CAAI,CAAC;AAEvE;AAEA,eAAeF,eAAe"}

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

@@ -8,10 +8,11 @@ import { __experimentalVStack as VStack, __experimentalSpacer as Spacer } from '
  * Internal dependencies
  */
 import LibraryFontVariant from './library-font-variant';
+import { sortFontFaces } from './utils/sort-font-faces';
 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 ? sortFontFaces(font.fontFace) : [{
     fontFamily: font.fontFamily,
     fontStyle: 'normal',
     fontWeight: '400'

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalVStack","VStack","__experimentalSpacer","Spacer","LibraryFontVariant","LibraryFontDetails","font","fontFaces","fontFace","length","sort","a","b","fontWeight","fontFamily","fontStyle","createElement","Fragment","margin","spacing","map","face","i","key"],"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":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,wBAAwB;AAEvD,SAASC,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,OACCG,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACb,MAAM;IAACe,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBF,aAAA,CAACf,MAAM;IAACkB,OAAO,EAAG;EAAG,GACpBH,aAAA,CAACb,MAAM;IAACe,MAAM,EAAG;EAAG,CAAE,CAAC,EACrBX,SAAS,CAACa,GAAG,CAAE,CAAEC,IAAI,EAAEC,CAAC,KACzBN,aAAA,CAACZ,kBAAkB;IAClBE,IAAI,EAAGA,IAAM;IACbe,IAAI,EAAGA,IAAM;IACbE,GAAG,EAAI,OAAOD,CAAG;EAAG,CACpB,CACA,CACK,CAAC,EACTN,aAAA,CAACb,MAAM;IAACe,MAAM,EAAG;EAAG,CAAE,CACrB,CAAC;AAEL;AAEA,eAAeb,kBAAkB"}
+{"version":3,"names":["__experimentalVStack","VStack","__experimentalSpacer","Spacer","LibraryFontVariant","sortFontFaces","LibraryFontDetails","font","fontFaces","fontFace","length","fontFamily","fontStyle","fontWeight","createElement","Fragment","margin","spacing","map","face","i","key"],"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":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,wBAAwB;AACvD,SAASC,aAAa,QAAQ,yBAAyB;AAEvD,SAASC,kBAAkBA,CAAE;EAAEC;AAAK,CAAC,EAAG;EACvC,MAAMC,SAAS,GACdD,IAAI,CAACE,QAAQ,IAAIF,IAAI,CAACE,QAAQ,CAACC,MAAM,GAClCL,aAAa,CAAEE,IAAI,CAACE,QAAS,CAAC,GAC9B,CACA;IACCE,UAAU,EAAEJ,IAAI,CAACI,UAAU;IAC3BC,SAAS,EAAE,QAAQ;IACnBC,UAAU,EAAE;EACb,CAAC,CACA;EAEL,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACX,MAAM;IAACa,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBF,aAAA,CAACb,MAAM;IAACgB,OAAO,EAAG;EAAG,GACpBH,aAAA,CAACX,MAAM;IAACa,MAAM,EAAG;EAAG,CAAE,CAAC,EACrBR,SAAS,CAACU,GAAG,CAAE,CAAEC,IAAI,EAAEC,CAAC,KACzBN,aAAA,CAACV,kBAAkB;IAClBG,IAAI,EAAGA,IAAM;IACbY,IAAI,EAAGA,IAAM;IACbE,GAAG,EAAI,OAAOD,CAAG;EAAG,CACpB,CACA,CACK,CAAC,EACTN,aAAA,CAACX,MAAM;IAACa,MAAM,EAAG;EAAG,CAAE,CACrB,CAAC;AAEL;AAEA,eAAeV,kBAAkB"}

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

@@ -25,4 +25,18 @@ export async function fetchUninstallFonts(fonts) {
   };
   return apiFetch(config);
 }
+export async function fetchFontCollections() {
+  const config = {
+    path: '/wp/v2/fonts/collections',
+    method: 'GET'
+  };
+  return apiFetch(config);
+}
+export async function fetchFontCollection(id) {
+  const config = {
+    path: `/wp/v2/fonts/collections/${id}`,
+    method: 'GET'
+  };
+  return apiFetch(config);
+}
 //# sourceMappingURL=resolvers.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["apiFetch","fetchInstallFonts","data","config","path","method","body","fetchUninstallFonts","fonts","fontFamilies"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/resolvers.js"],"sourcesContent":["/**\n * WordPress dependencies\n *\n */\n/**\n * WordPress dependencies\n */\nimport apiFetch from '@wordpress/api-fetch';\n\nexport async function fetchInstallFonts( data ) {\n\tconst config = {\n\t\tpath: '/wp/v2/fonts',\n\t\tmethod: 'POST',\n\t\tbody: data,\n\t};\n\treturn apiFetch( config );\n}\n\nexport async function fetchUninstallFonts( fonts ) {\n\tconst data = {\n\t\tfontFamilies: fonts,\n\t};\n\tconst config = {\n\t\tpath: '/wp/v2/fonts',\n\t\tmethod: 'DELETE',\n\t\tdata,\n\t};\n\treturn apiFetch( config );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,QAAQ,MAAM,sBAAsB;AAE3C,OAAO,eAAeC,iBAAiBA,CAAEC,IAAI,EAAG;EAC/C,MAAMC,MAAM,GAAG;IACdC,IAAI,EAAE,cAAc;IACpBC,MAAM,EAAE,MAAM;IACdC,IAAI,EAAEJ;EACP,CAAC;EACD,OAAOF,QAAQ,CAAEG,MAAO,CAAC;AAC1B;AAEA,OAAO,eAAeI,mBAAmBA,CAAEC,KAAK,EAAG;EAClD,MAAMN,IAAI,GAAG;IACZO,YAAY,EAAED;EACf,CAAC;EACD,MAAML,MAAM,GAAG;IACdC,IAAI,EAAE,cAAc;IACpBC,MAAM,EAAE,QAAQ;IAChBH;EACD,CAAC;EACD,OAAOF,QAAQ,CAAEG,MAAO,CAAC;AAC1B"}
+{"version":3,"names":["apiFetch","fetchInstallFonts","data","config","path","method","body","fetchUninstallFonts","fonts","fontFamilies","fetchFontCollections","fetchFontCollection","id"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/resolvers.js"],"sourcesContent":["/**\n * WordPress dependencies\n *\n */\n/**\n * WordPress dependencies\n */\nimport apiFetch from '@wordpress/api-fetch';\n\nexport async function fetchInstallFonts( data ) {\n\tconst config = {\n\t\tpath: '/wp/v2/fonts',\n\t\tmethod: 'POST',\n\t\tbody: data,\n\t};\n\treturn apiFetch( config );\n}\n\nexport async function fetchUninstallFonts( fonts ) {\n\tconst data = {\n\t\tfontFamilies: fonts,\n\t};\n\tconst config = {\n\t\tpath: '/wp/v2/fonts',\n\t\tmethod: 'DELETE',\n\t\tdata,\n\t};\n\treturn apiFetch( config );\n}\n\nexport async function fetchFontCollections() {\n\tconst config = {\n\t\tpath: '/wp/v2/fonts/collections',\n\t\tmethod: 'GET',\n\t};\n\treturn apiFetch( config );\n}\n\nexport async function fetchFontCollection( id ) {\n\tconst config = {\n\t\tpath: `/wp/v2/fonts/collections/${ id }`,\n\t\tmethod: 'GET',\n\t};\n\treturn apiFetch( config );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,QAAQ,MAAM,sBAAsB;AAE3C,OAAO,eAAeC,iBAAiBA,CAAEC,IAAI,EAAG;EAC/C,MAAMC,MAAM,GAAG;IACdC,IAAI,EAAE,cAAc;IACpBC,MAAM,EAAE,MAAM;IACdC,IAAI,EAAEJ;EACP,CAAC;EACD,OAAOF,QAAQ,CAAEG,MAAO,CAAC;AAC1B;AAEA,OAAO,eAAeI,mBAAmBA,CAAEC,KAAK,EAAG;EAClD,MAAMN,IAAI,GAAG;IACZO,YAAY,EAAED;EACf,CAAC;EACD,MAAML,MAAM,GAAG;IACdC,IAAI,EAAE,cAAc;IACpBC,MAAM,EAAE,QAAQ;IAChBH;EACD,CAAC;EACD,OAAOF,QAAQ,CAAEG,MAAO,CAAC;AAC1B;AAEA,OAAO,eAAeO,oBAAoBA,CAAA,EAAG;EAC5C,MAAMP,MAAM,GAAG;IACdC,IAAI,EAAE,0BAA0B;IAChCC,MAAM,EAAE;EACT,CAAC;EACD,OAAOL,QAAQ,CAAEG,MAAO,CAAC;AAC1B;AAEA,OAAO,eAAeQ,mBAAmBA,CAAEC,EAAE,EAAG;EAC/C,MAAMT,MAAM,GAAG;IACdC,IAAI,EAAG,4BAA4BQ,EAAI,EAAC;IACxCP,MAAM,EAAE;EACT,CAAC;EACD,OAAOL,QAAQ,CAAEG,MAAO,CAAC;AAC1B"}

package/build-module/components/global-styles/font-library-modal/tab-layout.js

@@ -26,12 +26,12 @@ function TabLayout({
     variant: "tertiary",
     onClick: handleBack,
     icon: chevronLeft,
-    isSmall: true
+    size: "small"
   }), title && createElement(Heading, {
     level: 2,
     size: 13,
     className: "edit-site-global-styles-header"
-  }, title)), description && createElement(Text, null, description))), createElement("main", null, children), createElement("footer", null, footer)));
+  }, title)), description && createElement(Text, null, description))), createElement("main", null, children), footer && createElement("footer", null, footer)));
 }
 export default TabLayout;
 //# sourceMappingURL=tab-layout.js.map