@wordpress/edit-site 5.29.0 → 5.31.0

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

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

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

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

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

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

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

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

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

@@ -19,8 +19,8 @@ function GoogleFontsConfirmDialog() {
   };
   return (0, _react.createElement)("div", {
     className: "font-library__google-fonts-confirm"
-  }, (0, _react.createElement)(_components.Card, null, (0, _react.createElement)(_components.CardBody, null, (0, _react.createElement)(_components.__experimentalText, {
-    as: "h3"
+  }, (0, _react.createElement)(_components.Card, null, (0, _react.createElement)(_components.CardBody, null, (0, _react.createElement)(_components.__experimentalHeading, {
+    level: 2
   }, (0, _i18n.__)('Connect to Google Fonts')), (0, _react.createElement)(_components.__experimentalSpacer, {
     margin: 6
   }), (0, _react.createElement)(_components.__experimentalText, {
@@ -32,6 +32,7 @@ function GoogleFontsConfirmDialog() {
   }, (0, _i18n.__)('You can alternatively upload files directly on the Upload tab.')), (0, _react.createElement)(_components.__experimentalSpacer, {
     margin: 6
   }), (0, _react.createElement)(_components.Button, {
+    __next40pxDefaultSize: true,
     variant: "primary",
     onClick: handleConfirm
   }, (0, _i18n.__)('Allow access to Google Fonts')))));

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

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_components","GoogleFontsConfirmDialog","handleConfirm","window","localStorage","setItem","dispatchEvent","Event","_react","createElement","className","Card","CardBody","__experimentalText","as","__","__experimentalSpacer","margin","Button","variant","onClick","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nfunction GoogleFontsConfirmDialog() {\n\tconst handleConfirm = () => {\n\t\t// eslint-disable-next-line no-undef\n\t\twindow.localStorage.setItem(\n\t\t\t'wp-font-library-google-fonts-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 Upload tab.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Button variant=\"primary\" onClick={ handleConfirm }>\n\t\t\t\t\t\t{ __( 'Allow access to Google Fonts' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</div>\n\t);\n}\n\nexport default GoogleFontsConfirmDialog;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAUA,SAASE,wBAAwBA,CAAA,EAAG;EACnC,MAAMC,aAAa,GAAGA,CAAA,KAAM;IAC3B;IACAC,MAAM,CAACC,YAAY,CAACC,OAAO,CAC1B,yCAAyC,EACzC,MACD,CAAC;IACDF,MAAM,CAACG,aAAa,CAAE,IAAIC,KAAK,CAAE,SAAU,CAAE,CAAC;EAC/C,CAAC;EAED,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAClD,IAAAF,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAW,IAAI,QACJ,IAAAH,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAY,QAAQ,QACR,IAAAJ,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAI,GAAG,IAAAC,QAAE,EAAE,yBAA0B,CAAS,CAAC,EACxD,IAAAP,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAgB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAC,QAAE,EACH,gOACD,CACK,CAAC,EACP,IAAAP,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAgB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAC,QAAE,EACH,gEACD,CACK,CAAC,EACP,IAAAP,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAgB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAkB,MAAM;IAACC,OAAO,EAAC,SAAS;IAACC,OAAO,EAAGlB;EAAe,GAChD,IAAAa,QAAE,EAAE,8BAA+B,CAC9B,CACC,CACL,CACF,CAAC;AAER;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEctB,wBAAwB"}
+{"version":3,"names":["_i18n","require","_components","GoogleFontsConfirmDialog","handleConfirm","window","localStorage","setItem","dispatchEvent","Event","_react","createElement","className","Card","CardBody","__experimentalHeading","level","__","__experimentalSpacer","margin","__experimentalText","as","Button","__next40pxDefaultSize","variant","onClick","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\t__experimentalHeading as Heading,\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-google-fonts-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<Heading level={ 2 }>\n\t\t\t\t\t\t{ __( 'Connect to Google Fonts' ) }\n\t\t\t\t\t</Heading>\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 Upload 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\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ handleConfirm }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Allow access to Google Fonts' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</div>\n\t);\n}\n\nexport default GoogleFontsConfirmDialog;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAWA,SAASE,wBAAwBA,CAAA,EAAG;EACnC,MAAMC,aAAa,GAAGA,CAAA,KAAM;IAC3B;IACAC,MAAM,CAACC,YAAY,CAACC,OAAO,CAC1B,yCAAyC,EACzC,MACD,CAAC;IACDF,MAAM,CAACG,aAAa,CAAE,IAAIC,KAAK,CAAE,SAAU,CAAE,CAAC;EAC/C,CAAC;EAED,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAClD,IAAAF,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAW,IAAI,QACJ,IAAAH,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAY,QAAQ,QACR,IAAAJ,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,qBAAO;IAACC,KAAK,EAAG;EAAG,GACjB,IAAAC,QAAE,EAAE,yBAA0B,CACxB,CAAC,EACV,IAAAP,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAgB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAkB,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAJ,QAAE,EACH,gOACD,CACK,CAAC,EACP,IAAAP,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAgB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAkB,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAJ,QAAE,EACH,gEACD,CACK,CAAC,EACP,IAAAP,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAgB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAoB,MAAM;IACNC,qBAAqB;IACrBC,OAAO,EAAC,SAAS;IACjBC,OAAO,EAAGrB;EAAe,GAEvB,IAAAa,QAAE,EAAE,8BAA+B,CAC9B,CACC,CACL,CACF,CAAC;AAER;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEczB,wBAAwB"}

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

@@ -8,6 +8,8 @@ exports.default = void 0;
 var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
+var _coreData = require("@wordpress/core-data");
+var _data = require("@wordpress/data");
 var _element = require("@wordpress/element");
 var _installedFonts = _interopRequireDefault(require("./installed-fonts"));
 var _fontCollection = _interopRequireDefault(require("./font-collection"));
@@ -25,13 +27,14 @@ var _lockUnlock = require("../../../lock-unlock");
 const {
   Tabs
 } = (0, _lockUnlock.unlock)(_components.privateApis);
-const DEFAULT_TABS = [{
+const DEFAULT_TAB = {
   id: 'installed-fonts',
   title: (0, _i18n.__)('Library')
-}, {
+};
+const UPLOAD_TAB = {
   id: 'upload-fonts',
   title: (0, _i18n.__)('Upload')
-}];
+};
 const tabsFromCollections = collections => collections.map(({
   slug,
   name
@@ -41,13 +44,23 @@ const tabsFromCollections = collections => collections.map(({
 }));
 function FontLibraryModal({
   onRequestClose,
-  initialTabId = 'installed-fonts'
+  defaultTabId = 'installed-fonts'
 }) {
   const {
     collections,
     setNotice
   } = (0, _element.useContext)(_context.FontLibraryContext);
-  const tabs = [...DEFAULT_TABS, ...tabsFromCollections(collections || [])];
+  const canUserCreate = (0, _data.useSelect)(select => {
+    const {
+      canUser
+    } = select(_coreData.store);
+    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 = () => {
@@ -61,7 +74,7 @@ function FontLibraryModal({
   }, (0, _react.createElement)("div", {
     className: "font-library-modal__tabs"
   }, (0, _react.createElement)(Tabs, {
-    initialTabId: initialTabId,
+    defaultTabId: defaultTabId,
     onSelect: onSelect
   }, (0, _react.createElement)(Tabs.TabList, null, tabs.map(({
     id,