@wordpress/edit-site 5.29.0 → 5.30.0

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

@@ -3,34 +3,36 @@ import { createElement, Fragment } from "react";
  * WordPress dependencies
  */
 import { useContext, useEffect, useState, useMemo, createInterpolateElement } from '@wordpress/element';
-import { __experimentalSpacer as Spacer, __experimentalInputControl as InputControl, __experimentalText as Text, __experimentalHStack as HStack, SelectControl, Spinner, Icon, FlexItem, Flex, Button } from '@wordpress/components';
+import { __experimentalSpacer as Spacer, __experimentalText as Text, __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, __experimentalNavigatorToParentButton as NavigatorToParentButton, __experimentalHeading as Heading, Notice, SelectControl, Spinner, FlexItem, Flex, Button, DropdownMenu, SearchControl } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import { search, closeSmall } from '@wordpress/icons';
+import { moreVertical, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
 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 { getFontsOutline, isFontFontFaceInOutline } from './utils/fonts-outline';
 import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { downloadFontFaceAssets } from './utils';
+import { sortFontFaces } from './utils/sort-font-faces';
+import CollectionFontVariant from './collection-font-variant';
 const DEFAULT_CATEGORY = {
   slug: 'all',
   name: _x('All', 'font categories')
 };
+const LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission';
+const MIN_WINDOW_HEIGHT = 500;
 function FontCollection({
   slug
 }) {
   var _selectedCollection$c;
   const requiresPermission = slug === 'google-fonts';
   const getGoogleFontsPermissionFromStorage = () => {
-    return window.localStorage.getItem('wp-font-library-google-fonts-permission') === 'true';
+    return window.localStorage.getItem(LOCAL_STORAGE_ITEM) === 'true';
   };
   const [selectedFont, setSelectedFont] = useState(null);
   const [fontsToInstall, setFontsToInstall] = useState([]);
@@ -40,7 +42,8 @@ function FontCollection({
   const {
     collections,
     getFontCollection,
-    installFont,
+    installFonts,
+    isInstalling,
     notice,
     setNotice
   } = useContext(FontLibraryContext);
@@ -53,6 +56,10 @@ function FontCollection({
     window.addEventListener('storage', handleStorage);
     return () => window.removeEventListener('storage', handleStorage);
   }, [slug, requiresPermission]);
+  const revokeAccess = () => {
+    window.localStorage.setItem(LOCAL_STORAGE_ITEM, 'false');
+    window.dispatchEvent(new Event('storage'));
+  };
   useEffect(() => {
     const fetchFontCollection = async () => {
       try {
@@ -87,7 +94,8 @@ function FontCollection({
 
   // NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px
   // The height of each font family item is 61px.
-  const pageSize = Math.floor((window.innerHeight - 417) / 61);
+  const windowHeight = Math.max(window.innerHeight, MIN_WINDOW_HEIGHT);
+  const pageSize = Math.floor((windowHeight - 417) / 61);
   const totalPages = Math.ceil(fonts.length / pageSize);
   const itemsStart = (page - 1) * pageSize;
   const itemsLimit = page * pageSize;
@@ -111,16 +119,6 @@ function FontCollection({
     setFilters({});
     setPage(1);
   };
-  const resetSearch = () => {
-    setFilters({
-      ...filters,
-      search: ''
-    });
-    setPage(1);
-  };
-  const handleUnselectFont = () => {
-    setSelectedFont(null);
-  };
   const handleToggleVariant = (font, face) => {
     const newFontsToInstall = toggleFont(font, face, fontsToInstall);
     setFontsToInstall(newFontsToInstall);
@@ -150,7 +148,7 @@ function FontCollection({
       return;
     }
     try {
-      await installFont(fontFamily);
+      await installFonts([fontFamily]);
       setNotice({
         type: 'success',
         message: __('Fonts were installed successfully.')
@@ -163,39 +161,60 @@ function FontCollection({
     }
     resetFontsToInstall();
   };
-  let footerComponent = null;
-  if (selectedFont) {
-    footerComponent = createElement(InstallFooter, {
-      handleInstall: handleInstall,
-      isDisabled: fontsToInstall.length === 0
-    });
-  } else if (!renderConfirmDialog && totalPages > 1) {
-    footerComponent = createElement(PaginationFooter, {
-      page: page,
-      totalPages: totalPages,
-      setPage: setPage
-    });
+  const getSortedFontFaces = fontFamily => {
+    if (!fontFamily) {
+      return [];
+    }
+    if (!fontFamily.fontFace || !fontFamily.fontFace.length) {
+      return [{
+        fontFamily: fontFamily.fontFamily,
+        fontStyle: 'normal',
+        fontWeight: '400'
+      }];
+    }
+    return sortFontFaces(fontFamily.fontFace);
+  };
+  if (renderConfirmDialog) {
+    return createElement(GoogleFontsConfirmDialog, null);
   }
-  return createElement(TabPanelLayout, {
-    title: !selectedFont ? selectedCollection.name : selectedFont.name,
-    description: !selectedFont ? selectedCollection.description : __('Select font variants to install.'),
-    notice: notice,
-    handleBack: !!selectedFont && handleUnselectFont,
-    footer: footerComponent
-  }, renderConfirmDialog && createElement(Fragment, null, createElement(Spacer, {
-    margin: 8
-  }), createElement(GoogleFontsConfirmDialog, null)), !renderConfirmDialog && !selectedFont && createElement(Flex, null, createElement(FlexItem, null, createElement(InputControl, {
+  const ActionsComponent = () => {
+    if (slug !== 'google-fonts' || renderConfirmDialog || selectedFont) {
+      return null;
+    }
+    return createElement(DropdownMenu, {
+      icon: moreVertical,
+      label: __('Actions'),
+      popoverProps: {
+        position: 'bottom left'
+      },
+      controls: [{
+        title: __('Revoke access to Google Fonts'),
+        onClick: revokeAccess
+      }]
+    });
+  };
+  return createElement("div", {
+    className: "font-library-modal__tabpanel-layout"
+  }, createElement(NavigatorProvider, {
+    initialPath: "/",
+    className: "font-library-modal__tabpanel-layout"
+  }, createElement(NavigatorScreen, {
+    path: "/"
+  }, createElement(HStack, {
+    justify: "space-between"
+  }, createElement(VStack, null, createElement(Heading, {
+    level: 2,
+    size: 13
+  }, selectedCollection.name), createElement(Text, null, selectedCollection.description)), createElement(ActionsComponent, null)), createElement(Spacer, {
+    margin: 4
+  }), createElement(Flex, null, createElement(FlexItem, null, createElement(SearchControl, {
+    className: "font-library-modal__search",
     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
+    __nextHasNoMarginBottom: true,
+    hideLabelFromVision: false
   })), createElement(FlexItem, null, createElement(SelectControl, {
     label: __('Category'),
     value: filters.category,
@@ -205,27 +224,67 @@ function FontCollection({
     key: category.slug
   }, category.name))))), createElement(Spacer, {
     margin: 4
-  }), !renderConfirmDialog && !selectedCollection?.font_families && !notice && createElement(Spinner, null), !renderConfirmDialog && !!selectedCollection?.font_families?.length && !fonts.length && createElement(Text, null, __('No fonts found. Try with a different search term')), !renderConfirmDialog && selectedFont && createElement(CollectionFontDetails, {
-    font: selectedFont,
-    handleToggleVariant: handleToggleVariant,
-    fontToInstallOutline: fontToInstallOutline
-  }), !renderConfirmDialog && !selectedFont && createElement("div", {
+  }), !selectedCollection?.font_families && !notice && createElement(Spinner, null), !!selectedCollection?.font_families?.length && !fonts.length && createElement(Text, null, __('No fonts found. Try with a different search term')), createElement("div", {
     className: "font-library-modal__fonts-grid__main"
   }, items.map(font => createElement(FontCard, {
     key: font.font_family_settings.slug,
     font: font.font_family_settings,
+    navigatorPath: '/fontFamily',
     onClick: () => {
       setSelectedFont(font.font_family_settings);
     }
-  }))));
-}
-function PaginationFooter({
-  page,
-  totalPages,
-  setPage
-}) {
-  return createElement(Flex, {
-    justify: "center"
+  })))), createElement(NavigatorScreen, {
+    path: "/fontFamily"
+  }, createElement(Flex, {
+    justify: "flex-start"
+  }, createElement(NavigatorToParentButton, {
+    icon: chevronLeft,
+    size: "small",
+    onClick: () => {
+      setSelectedFont(null);
+    },
+    "aria-label": __('Navigate to the previous view')
+  }), createElement(Heading, {
+    level: 2,
+    size: 13,
+    className: "edit-site-global-styles-header"
+  }, selectedFont?.name)), notice && createElement(Fragment, null, createElement(Spacer, {
+    margin: 1
+  }), createElement(Notice, {
+    status: notice.type,
+    onRemove: () => setNotice(null)
+  }, notice.message), createElement(Spacer, {
+    margin: 1
+  })), createElement(Spacer, {
+    margin: 4
+  }), createElement(Text, null, " ", __('Select font variants to install.'), " "), createElement(Spacer, {
+    margin: 4
+  }), createElement(VStack, {
+    spacing: 0
+  }, createElement(Spacer, {
+    margin: 8
+  }), getSortedFontFaces(selectedFont).map((face, i) => createElement(CollectionFontVariant, {
+    font: selectedFont,
+    face: face,
+    key: `face${i}`,
+    handleToggleVariant: handleToggleVariant,
+    selected: isFontFontFaceInOutline(selectedFont.slug, selectedFont.fontFace ? face : null,
+    // If the font has no fontFace, we want to check if the font is in the outline
+    fontToInstallOutline)
+  }))), createElement(Spacer, {
+    margin: 16
+  }))), selectedFont && createElement(Flex, {
+    justify: "flex-end",
+    className: "font-library-modal__tabpanel-layout__footer"
+  }, createElement(Button, {
+    variant: "primary",
+    onClick: handleInstall,
+    isBusy: isInstalling,
+    disabled: fontsToInstall.length === 0 || isInstalling,
+    __experimentalIsFocusable: true
+  }, __('Install'))), !selectedFont && createElement(Flex, {
+    justify: "center",
+    className: "font-library-modal__tabpanel-layout__footer"
   }, createElement(Button, {
     label: __('First page'),
     size: "compact",
@@ -270,24 +329,7 @@ function PaginationFooter({
     onClick: () => setPage(totalPages),
     disabled: page === totalPages,
     __experimentalIsFocusable: true
-  }, createElement("span", null, "\xBB")));
-}
-function InstallFooter({
-  handleInstall,
-  isDisabled
-}) {
-  const {
-    isInstalling
-  } = useContext(FontLibraryContext);
-  return createElement(Flex, {
-    justify: "flex-end"
-  }, createElement(Button, {
-    variant: "primary",
-    onClick: handleInstall,
-    isBusy: isInstalling,
-    disabled: isDisabled || isInstalling,
-    __experimentalIsFocusable: true
-  }, __('Install')));
+  }, createElement("span", null, "\xBB"))));
 }
 export default FontCollection;
 //# sourceMappingURL=font-collection.js.map

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

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

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

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

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

@@ -4,6 +4,8 @@ import { createElement } from "react";
  */
 import { __ } from '@wordpress/i18n';
 import { Modal, privateApis as componentsPrivateApis } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -17,13 +19,14 @@ import { unlock } from '../../../lock-unlock';
 const {
   Tabs
 } = unlock(componentsPrivateApis);
-const DEFAULT_TABS = [{
+const DEFAULT_TAB = {
   id: 'installed-fonts',
   title: __('Library')
-}, {
+};
+const UPLOAD_TAB = {
   id: 'upload-fonts',
   title: __('Upload')
-}];
+};
 const tabsFromCollections = collections => collections.map(({
   slug,
   name
@@ -33,13 +36,23 @@ const tabsFromCollections = collections => collections.map(({
 }));
 function FontLibraryModal({
   onRequestClose,
-  initialTabId = 'installed-fonts'
+  defaultTabId = 'installed-fonts'
 }) {
   const {
     collections,
     setNotice
   } = useContext(FontLibraryContext);
-  const tabs = [...DEFAULT_TABS, ...tabsFromCollections(collections || [])];
+  const canUserCreate = useSelect(select => {
+    const {
+      canUser
+    } = select(coreStore);
+    return canUser('create', 'font-families');
+  }, []);
+  const tabs = [DEFAULT_TAB];
+  if (canUserCreate) {
+    tabs.push(UPLOAD_TAB);
+    tabs.push(...tabsFromCollections(collections || []));
+  }
 
   // Reset notice when new tab is selected.
   const onSelect = () => {
@@ -53,7 +66,7 @@ function FontLibraryModal({
   }, createElement("div", {
     className: "font-library-modal__tabs"
   }, createElement(Tabs, {
-    initialTabId: initialTabId,
+    defaultTabId: defaultTabId,
     onSelect: onSelect
   }, createElement(Tabs.TabList, null, tabs.map(({
     id,

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

@@ -1 +1 @@
-{"version":3,"names":["__","Modal","privateApis","componentsPrivateApis","useContext","InstalledFonts","FontCollection","UploadFonts","FontLibraryContext","unlock","Tabs","DEFAULT_TABS","id","title","tabsFromCollections","collections","map","slug","name","length","FontLibraryModal","onRequestClose","initialTabId","setNotice","tabs","onSelect","createElement","isFullScreen","className","TabList","Tab","key","tabId","contents","TabPanel","focusable"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} 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 UploadFonts from './upload-fonts';\nimport { FontLibraryContext } from './context';\nimport { unlock } from '../../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst DEFAULT_TABS = [\n\t{\n\t\tid: 'installed-fonts',\n\t\ttitle: __( 'Library' ),\n\t},\n\t{\n\t\tid: 'upload-fonts',\n\t\ttitle: __( 'Upload' ),\n\t},\n];\n\nconst tabsFromCollections = ( collections ) =>\n\tcollections.map( ( { slug, name } ) => ( {\n\t\tid: slug,\n\t\ttitle:\n\t\t\tcollections.length === 1 && slug === 'google-fonts'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tinitialTabId = 'installed-fonts',\n} ) {\n\tconst { collections, setNotice } = useContext( FontLibraryContext );\n\n\tconst tabs = [\n\t\t...DEFAULT_TABS,\n\t\t...tabsFromCollections( collections || [] ),\n\t];\n\n\t// Reset notice when new tab is selected.\n\tconst onSelect = () => {\n\t\tsetNotice( null );\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<div className=\"font-library-modal__tabs\">\n\t\t\t\t<Tabs initialTabId={ initialTabId } onSelect={ onSelect }>\n\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t{ tabs.map( ( { id, title } ) => (\n\t\t\t\t\t\t\t<Tabs.Tab key={ id } tabId={ id }>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( { id } ) => {\n\t\t\t\t\t\tlet contents;\n\t\t\t\t\t\tswitch ( id ) {\n\t\t\t\t\t\t\tcase 'upload-fonts':\n\t\t\t\t\t\t\t\tcontents = <UploadFonts />;\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\t\t\tcontents = <InstalledFonts />;\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\tcontents = <FontCollection slug={ id } />;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t\ttabId={ id }\n\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ contents }\n\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SACCC,KAAK,EACLC,WAAW,IAAIC,qBAAqB,QAC9B,uBAAuB;AAC9B,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,SAASC,kBAAkB,QAAQ,WAAW;AAC9C,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,MAAM;EAAEC;AAAK,CAAC,GAAGD,MAAM,CAAEN,qBAAsB,CAAC;AAEhD,MAAMQ,YAAY,GAAG,CACpB;EACCC,EAAE,EAAE,iBAAiB;EACrBC,KAAK,EAAEb,EAAE,CAAE,SAAU;AACtB,CAAC,EACD;EACCY,EAAE,EAAE,cAAc;EAClBC,KAAK,EAAEb,EAAE,CAAE,QAAS;AACrB,CAAC,CACD;AAED,MAAMc,mBAAmB,GAAKC,WAAW,IACxCA,WAAW,CAACC,GAAG,CAAE,CAAE;EAAEC,IAAI;EAAEC;AAAK,CAAC,MAAQ;EACxCN,EAAE,EAAEK,IAAI;EACRJ,KAAK,EACJE,WAAW,CAACI,MAAM,KAAK,CAAC,IAAIF,IAAI,KAAK,cAAc,GAChDjB,EAAE,CAAE,eAAgB,CAAC,GACrBkB;AACL,CAAC,CAAG,CAAC;AAEN,SAASE,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,YAAY,GAAG;AAChB,CAAC,EAAG;EACH,MAAM;IAAEP,WAAW;IAAEQ;EAAU,CAAC,GAAGnB,UAAU,CAAEI,kBAAmB,CAAC;EAEnE,MAAMgB,IAAI,GAAG,CACZ,GAAGb,YAAY,EACf,GAAGG,mBAAmB,CAAEC,WAAW,IAAI,EAAG,CAAC,CAC3C;;EAED;EACA,MAAMU,QAAQ,GAAGA,CAAA,KAAM;IACtBF,SAAS,CAAE,IAAK,CAAC;EAClB,CAAC;EAED,OACCG,aAAA,CAACzB,KAAK;IACLY,KAAK,EAAGb,EAAE,CAAE,OAAQ,CAAG;IACvBqB,cAAc,EAAGA,cAAgB;IACjCM,YAAY;IACZC,SAAS,EAAC;EAAoB,GAE9BF,aAAA;IAAKE,SAAS,EAAC;EAA0B,GACxCF,aAAA,CAAChB,IAAI;IAACY,YAAY,EAAGA,YAAc;IAACG,QAAQ,EAAGA;EAAU,GACxDC,aAAA,CAAChB,IAAI,CAACmB,OAAO,QACVL,IAAI,CAACR,GAAG,CAAE,CAAE;IAAEJ,EAAE;IAAEC;EAAM,CAAC,KAC1Ba,aAAA,CAAChB,IAAI,CAACoB,GAAG;IAACC,GAAG,EAAGnB,EAAI;IAACoB,KAAK,EAAGpB;EAAI,GAC9BC,KACO,CACT,CACW,CAAC,EACbW,IAAI,CAACR,GAAG,CAAE,CAAE;IAAEJ;EAAG,CAAC,KAAM;IACzB,IAAIqB,QAAQ;IACZ,QAASrB,EAAE;MACV,KAAK,cAAc;QAClBqB,QAAQ,GAAGP,aAAA,CAACnB,WAAW,MAAE,CAAC;QAC1B;MACD,KAAK,iBAAiB;QACrB0B,QAAQ,GAAGP,aAAA,CAACrB,cAAc,MAAE,CAAC;QAC7B;MACD;QACC4B,QAAQ,GAAGP,aAAA,CAACpB,cAAc;UAACW,IAAI,EAAGL;QAAI,CAAE,CAAC;IAC3C;IACA,OACCc,aAAA,CAAChB,IAAI,CAACwB,QAAQ;MACbH,GAAG,EAAGnB,EAAI;MACVoB,KAAK,EAAGpB,EAAI;MACZuB,SAAS,EAAG;IAAO,GAEjBF,QACY,CAAC;EAElB,CAAE,CACG,CACF,CACC,CAAC;AAEV;AAEA,eAAeb,gBAAgB"}
+{"version":3,"names":["__","Modal","privateApis","componentsPrivateApis","store","coreStore","useSelect","useContext","InstalledFonts","FontCollection","UploadFonts","FontLibraryContext","unlock","Tabs","DEFAULT_TAB","id","title","UPLOAD_TAB","tabsFromCollections","collections","map","slug","name","length","FontLibraryModal","onRequestClose","defaultTabId","setNotice","canUserCreate","select","canUser","tabs","push","onSelect","createElement","isFullScreen","className","TabList","Tab","key","tabId","contents","TabPanel","focusable"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InstalledFonts from './installed-fonts';\nimport FontCollection from './font-collection';\nimport UploadFonts from './upload-fonts';\nimport { FontLibraryContext } from './context';\nimport { unlock } from '../../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst DEFAULT_TAB = {\n\tid: 'installed-fonts',\n\ttitle: __( 'Library' ),\n};\n\nconst UPLOAD_TAB = {\n\tid: 'upload-fonts',\n\ttitle: __( 'Upload' ),\n};\n\nconst tabsFromCollections = ( collections ) =>\n\tcollections.map( ( { slug, name } ) => ( {\n\t\tid: slug,\n\t\ttitle:\n\t\t\tcollections.length === 1 && slug === 'google-fonts'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tdefaultTabId = 'installed-fonts',\n} ) {\n\tconst { collections, setNotice } = useContext( FontLibraryContext );\n\tconst canUserCreate = useSelect( ( select ) => {\n\t\tconst { canUser } = select( coreStore );\n\t\treturn canUser( 'create', 'font-families' );\n\t}, [] );\n\n\tconst tabs = [ DEFAULT_TAB ];\n\n\tif ( canUserCreate ) {\n\t\ttabs.push( UPLOAD_TAB );\n\t\ttabs.push( ...tabsFromCollections( collections || [] ) );\n\t}\n\n\t// Reset notice when new tab is selected.\n\tconst onSelect = () => {\n\t\tsetNotice( null );\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<div className=\"font-library-modal__tabs\">\n\t\t\t\t<Tabs defaultTabId={ defaultTabId } onSelect={ onSelect }>\n\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t{ tabs.map( ( { id, title } ) => (\n\t\t\t\t\t\t\t<Tabs.Tab key={ id } tabId={ id }>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( { id } ) => {\n\t\t\t\t\t\tlet contents;\n\t\t\t\t\t\tswitch ( id ) {\n\t\t\t\t\t\t\tcase 'upload-fonts':\n\t\t\t\t\t\t\t\tcontents = <UploadFonts />;\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\t\t\tcontents = <InstalledFonts />;\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\tcontents = <FontCollection slug={ id } />;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t\ttabId={ id }\n\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ contents }\n\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],"mappings":"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"}