@wordpress/edit-site 5.28.2 → 5.28.4

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

@@ -11,16 +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 _fontsGrid = _interopRequireDefault(require("./fonts-grid"));
 var _fontCard = _interopRequireDefault(require("./font-card"));
 var _filterFonts = _interopRequireDefault(require("./utils/filter-fonts"));
-var _collectionFontDetails = _interopRequireDefault(require("./collection-font-details"));
 var _toggleFont = require("./utils/toggleFont");
 var _fontsOutline = require("./utils/fonts-outline");
 var _googleFontsConfirmDialog = _interopRequireDefault(require("./google-fonts-confirm-dialog"));
 var _utils = require("./utils");
+var _sortFontFaces = require("./utils/sort-font-faces");
+var _collectionFontVariant = _interopRequireDefault(require("./collection-font-variant"));
 /**
  * WordPress dependencies
  */
@@ -33,22 +32,26 @@ 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)([]);
+  const [page, setPage] = (0, _element.useState)(1);
   const [filters, setFilters] = (0, _element.useState)({});
   const [renderConfirmDialog, setRenderConfirmDialog] = (0, _element.useState)(requiresPermission && !getGoogleFontsPermissionFromStorage());
   const {
     collections,
     getFontCollection,
     installFont,
+    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 {
@@ -92,30 +99,40 @@ function FontCollection({
   const collectionCategories = (_selectedCollection$c = selectedCollection?.categories) !== null && _selectedCollection$c !== void 0 ? _selectedCollection$c : [];
   const categories = [DEFAULT_CATEGORY, ...collectionCategories];
   const fonts = (0, _element.useMemo)(() => (0, _filterFonts.default)(collectionFonts, filters), [collectionFonts, filters]);
+
+  // 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 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;
+  const items = fonts.slice(itemsStart, itemsLimit);
   const handleCategoryFilter = category => {
     setFilters({
       ...filters,
       category
     });
+    setPage(1);
   };
   const handleUpdateSearchInput = value => {
     setFilters({
       ...filters,
       search: value
     });
+    setPage(1);
   };
   const debouncedUpdateSearchInput = (0, _compose.debounce)(handleUpdateSearchInput, 300);
   const resetFilters = () => {
     setFilters({});
+    setPage(1);
   };
   const resetSearch = () => {
     setFilters({
       ...filters,
       search: ''
     });
-  };
-  const handleUnselectFont = () => {
-    setSelectedFont(null);
+    setPage(1);
   };
   const handleToggleVariant = (font, face) => {
     const newFontsToInstall = (0, _toggleFont.toggleFont)(font, face, fontsToInstall);
@@ -159,18 +176,53 @@ function FontCollection({
     }
     resetFontsToInstall();
   };
-  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: (0, _react.createElement)(Footer, {
-      handleInstall: handleInstall,
-      isDisabled: fontsToInstall.length === 0
-    })
-  }, 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 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);
+  }
+  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.__experimentalHeading, {
+    level: 2,
+    size: 13
+  }, selectedCollection.name), (0, _react.createElement)(ActionsComponent, null)), (0, _react.createElement)(_components.__experimentalText, null, selectedCollection.description), (0, _react.createElement)(_components.__experimentalSpacer, {
+    margin: 4
+  }), (0, _react.createElement)(_components.Flex, null, (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)(_components.__experimentalInputControl, {
     value: filters.search,
     placeholder: (0, _i18n.__)('Font name…'),
     label: (0, _i18n.__)('Search'),
@@ -191,34 +243,112 @@ 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)(_fontsGrid.default, null, fonts.map(font => (0, _react.createElement)(_fontCard.default, {
+  }), !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 Footer({
-  handleInstall,
-  isDisabled
-}) {
-  const {
-    isInstalling
-  } = (0, _element.useContext)(_context.FontLibraryContext);
-  return (0, _react.createElement)(_components.Flex, {
-    justify: "flex-end"
+  })))), (0, _react.createElement)(_components.__experimentalNavigatorScreen, {
+    path: "/fontFamily"
+  }, (0, _react.createElement)(_components.Flex, {
+    justify: "flex-start"
+  }, (0, _react.createElement)(_components.__experimentalNavigatorToParentButton, {
+    icon: _icons.chevronLeft,
+    isSmall: true,
+    onClick: () => {
+      setSelectedFont(null);
+    },
+    "aria-label": (0, _i18n.__)('Navigate to the previous view')
+  }), (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: isDisabled || 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",
+    onClick: () => setPage(1),
+    disabled: page === 1,
+    __experimentalIsFocusable: true
+  }, (0, _react.createElement)("span", null, "\xAB")), (0, _react.createElement)(_components.Button, {
+    label: (0, _i18n.__)('Previous page'),
+    size: "compact",
+    onClick: () => setPage(page - 1),
+    disabled: page === 1,
+    __experimentalIsFocusable: true
+  }, (0, _react.createElement)("span", null, "\u2039")), (0, _react.createElement)(_components.__experimentalHStack, {
+    justify: "flex-start",
+    expanded: false,
+    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, {
+      "aria-label": (0, _i18n.__)('Current page'),
+      value: page,
+      options: [...Array(totalPages)].map((e, i) => {
+        return {
+          label: i + 1,
+          value: i + 1
+        };
+      }),
+      onChange: newPage => setPage(parseInt(newPage)),
+      size: 'compact',
+      __nextHasNoMarginBottom: true
+    })
+  })), (0, _react.createElement)(_components.Button, {
+    label: (0, _i18n.__)('Next page'),
+    size: "compact",
+    onClick: () => setPage(page + 1),
+    disabled: page === totalPages,
+    __experimentalIsFocusable: true
+  }, (0, _react.createElement)("span", null, "\u203A")), (0, _react.createElement)(_components.Button, {
+    label: (0, _i18n.__)('Last page'),
+    size: "compact",
+    onClick: () => setPage(totalPages),
+    disabled: page === totalPages,
     __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","_fontsGrid","_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","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","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","__","_react","createElement","default","title","description","handleBack","footer","Footer","isDisabled","length","Fragment","__experimentalSpacer","margin","Flex","FlexItem","__experimentalInputControl","placeholder","label","onChange","prefix","Icon","icon","suffix","closeSmall","onClick","SelectControl","key","Spinner","__experimentalText","font_family_settings","isInstalling","justify","Button","variant","isBusy","disabled","__experimentalIsFocusable","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-collection.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useState, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalInputControl as InputControl,\n\t__experimentalText as Text,\n\tSelectControl,\n\tSpinner,\n\tIcon,\n\tFlexItem,\n\tFlex,\n\tButton,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { __, _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 FontsGrid from './fonts-grid';\nimport FontCard from './font-card';\nimport filterFonts from './utils/filter-fonts';\nimport CollectionFontDetails from './collection-font-details';\nimport { toggleFont } from './utils/toggleFont';\nimport { getFontsOutline } from './utils/fonts-outline';\nimport GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';\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 [ 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\tconst handleCategoryFilter = ( category ) => {\n\t\tsetFilters( { ...filters, category } );\n\t};\n\n\tconst handleUpdateSearchInput = ( value ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t};\n\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst resetFilters = () => {\n\t\tsetFilters( {} );\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetFilters( { ...filters, search: '' } );\n\t};\n\n\tconst handleUnselectFont = () => {\n\t\tsetSelectedFont( null );\n\t};\n\n\tconst handleToggleVariant = ( font, face ) => {\n\t\tconst newFontsToInstall = toggleFont( font, face, fontsToInstall );\n\t\tsetFontsToInstall( newFontsToInstall );\n\t};\n\n\tconst fontToInstallOutline = getFontsOutline( fontsToInstall );\n\n\tconst resetFontsToInstall = () => {\n\t\tsetFontsToInstall( [] );\n\t};\n\n\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\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={\n\t\t\t\t<Footer\n\t\t\t\t\thandleInstall={ handleInstall }\n\t\t\t\t\tisDisabled={ fontsToInstall.length === 0 }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t{ renderConfirmDialog && (\n\t\t\t\t<>\n\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t<GoogleFontsConfirmDialog />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! 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<FontsGrid>\n\t\t\t\t\t{ fonts.map( ( font ) => (\n\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\tkey={ font.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</FontsGrid>\n\t\t\t) }\n\t\t</TabPanelLayout>\n\t);\n}\n\nfunction Footer( { 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":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAWA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAKA,IAAAK,eAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,QAAA,GAAAP,OAAA;AACA,IAAAQ,UAAA,GAAAF,sBAAA,CAAAN,OAAA;AACA,IAAAS,SAAA,GAAAH,sBAAA,CAAAN,OAAA;AACA,IAAAU,YAAA,GAAAJ,sBAAA,CAAAN,OAAA;AACA,IAAAW,sBAAA,GAAAL,sBAAA,CAAAN,OAAA;AACA,IAAAY,WAAA,GAAAZ,OAAA;AACA,IAAAa,aAAA,GAAAb,OAAA;AACA,IAAAc,yBAAA,GAAAR,sBAAA,CAAAN,OAAA;AACA,IAAAe,MAAA,GAAAf,OAAA;AA/BA;AACA;AACA;;AAiBA;AACA;AACA;;AAYA,MAAMgB,gBAAgB,GAAG;EACxBC,IAAI,EAAE,KAAK;EACXC,IAAI,EAAE,IAAAC,QAAE,EAAE,KAAK,EAAE,iBAAkB;AACpC,CAAC;AACD,SAASC,cAAcA,CAAE;EAAEH;AAAK,CAAC,EAAG;EAAA,IAAAI,qBAAA;EACnC,MAAMC,kBAAkB,GAAGL,IAAI,KAAK,cAAc;EAElD,MAAMM,mCAAmC,GAAGA,CAAA,KAAM;IACjD,OACCC,MAAM,CAACC,YAAY,CAACC,OAAO,CAC1B,yCACD,CAAC,KAAK,MAAM;EAEd,CAAC;EAED,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAC1D,MAAM,CAAEC,cAAc,EAAEC,iBAAiB,CAAE,GAAG,IAAAF,iBAAQ,EAAE,EAAG,CAAC;EAC5D,MAAM,CAAEG,OAAO,EAAEC,UAAU,CAAE,GAAG,IAAAJ,iBAAQ,EAAE,CAAC,CAAE,CAAC;EAC9C,MAAM,CAAEK,mBAAmB,EAAEC,sBAAsB,CAAE,GAAG,IAAAN,iBAAQ,EAC/DP,kBAAkB,IAAI,CAAEC,mCAAmC,CAAC,CAC7D,CAAC;EACD,MAAM;IAAEa,WAAW;IAAEC,iBAAiB;IAAEC,WAAW;IAAEC,MAAM;IAAEC;EAAU,CAAC,GACvE,IAAAC,mBAAU,EAAEC,2BAAmB,CAAC;EACjC,MAAMC,kBAAkB,GAAGP,WAAW,CAACQ,IAAI,CACxCC,UAAU,IAAMA,UAAU,CAAC5B,IAAI,KAAKA,IACvC,CAAC;EAED,IAAA6B,kBAAS,EAAE,MAAM;IAChB,MAAMC,aAAa,GAAGA,CAAA,KAAM;MAC3BZ,sBAAsB,CACrBb,kBAAkB,IAAI,CAAEC,mCAAmC,CAAC,CAC7D,CAAC;IACF,CAAC;IACDwB,aAAa,CAAC,CAAC;IACfvB,MAAM,CAACwB,gBAAgB,CAAE,SAAS,EAAED,aAAc,CAAC;IACnD,OAAO,MAAMvB,MAAM,CAACyB,mBAAmB,CAAE,SAAS,EAAEF,aAAc,CAAC;EACpE,CAAC,EAAE,CAAE9B,IAAI,EAAEK,kBAAkB,CAAG,CAAC;EAEjC,IAAAwB,kBAAS,EAAE,MAAM;IAChB,MAAMI,mBAAmB,GAAG,MAAAA,CAAA,KAAY;MACvC,IAAI;QACH,MAAMb,iBAAiB,CAAEpB,IAAK,CAAC;QAC/BkC,YAAY,CAAC,CAAC;MACf,CAAC,CAAC,OAAQC,CAAC,EAAG;QACb,IAAK,CAAEb,MAAM,EAAG;UACfC,SAAS,CAAE;YACVa,IAAI,EAAE,OAAO;YACbC,OAAO,EAAEF,CAAC,EAAEE;UACb,CAAE,CAAC;QACJ;MACD;IACD,CAAC;IACDJ,mBAAmB,CAAC,CAAC;EACtB,CAAC,EAAE,CAAEjC,IAAI,EAAEoB,iBAAiB,EAAEG,SAAS,EAAED,MAAM,CAAG,CAAC;EAEnD,IAAAO,kBAAS,EAAE,MAAM;IAChBlB,eAAe,CAAE,IAAK,CAAC;IACvBY,SAAS,CAAE,IAAK,CAAC;EAClB,CAAC,EAAE,CAAEvB,IAAI,EAAEuB,SAAS,CAAG,CAAC;EAExB,IAAAM,kBAAS,EAAE,MAAM;IAChB;IACAf,iBAAiB,CAAE,EAAG,CAAC;EACxB,CAAC,EAAE,CAAEJ,YAAY,CAAG,CAAC;EAErB,MAAM4B,eAAe,GAAG,IAAAC,gBAAO,EAC9B;IAAA,IAAAC,qBAAA;IAAA,QAAAA,qBAAA,GAAMd,kBAAkB,EAAEe,aAAa,cAAAD,qBAAA,cAAAA,qBAAA,GAAI,EAAE;EAAA,GAC7C,CAAEd,kBAAkB,CACrB,CAAC;EACD,MAAMgB,oBAAoB,IAAAtC,qBAAA,GAAGsB,kBAAkB,EAAEiB,UAAU,cAAAvC,qBAAA,cAAAA,qBAAA,GAAI,EAAE;EAEjE,MAAMuC,UAAU,GAAG,CAAE5C,gBAAgB,EAAE,GAAG2C,oBAAoB,CAAE;EAEhE,MAAME,KAAK,GAAG,IAAAL,gBAAO,EACpB,MAAM,IAAAM,oBAAW,EAAEP,eAAe,EAAEvB,OAAQ,CAAC,EAC7C,CAAEuB,eAAe,EAAEvB,OAAO,CAC3B,CAAC;EAED,MAAM+B,oBAAoB,GAAKC,QAAQ,IAAM;IAC5C/B,UAAU,CAAE;MAAE,GAAGD,OAAO;MAAEgC;IAAS,CAAE,CAAC;EACvC,CAAC;EAED,MAAMC,uBAAuB,GAAKC,KAAK,IAAM;IAC5CjC,UAAU,CAAE;MAAE,GAAGD,OAAO;MAAEmC,MAAM,EAAED;IAAM,CAAE,CAAC;EAC5C,CAAC;EAED,MAAME,0BAA0B,GAAG,IAAAC,iBAAQ,EAAEJ,uBAAuB,EAAE,GAAI,CAAC;EAE3E,MAAMd,YAAY,GAAGA,CAAA,KAAM;IAC1BlB,UAAU,CAAE,CAAC,CAAE,CAAC;EACjB,CAAC;EAED,MAAMqC,WAAW,GAAGA,CAAA,KAAM;IACzBrC,UAAU,CAAE;MAAE,GAAGD,OAAO;MAAEmC,MAAM,EAAE;IAAG,CAAE,CAAC;EACzC,CAAC;EAED,MAAMI,kBAAkB,GAAGA,CAAA,KAAM;IAChC3C,eAAe,CAAE,IAAK,CAAC;EACxB,CAAC;EAED,MAAM4C,mBAAmB,GAAGA,CAAEC,IAAI,EAAEC,IAAI,KAAM;IAC7C,MAAMC,iBAAiB,GAAG,IAAAC,sBAAU,EAAEH,IAAI,EAAEC,IAAI,EAAE5C,cAAe,CAAC;IAClEC,iBAAiB,CAAE4C,iBAAkB,CAAC;EACvC,CAAC;EAED,MAAME,oBAAoB,GAAG,IAAAC,6BAAe,EAAEhD,cAAe,CAAC;EAE9D,MAAMiD,mBAAmB,GAAGA,CAAA,KAAM;IACjChD,iBAAiB,CAAE,EAAG,CAAC;EACxB,CAAC;EAED,MAAMiD,aAAa,GAAG,MAAAA,CAAA,KAAY;IACjCxC,SAAS,CAAE,IAAK,CAAC;IAEjB,MAAMyC,UAAU,GAAGnD,cAAc,CAAE,CAAC,CAAE;IAEtC,IAAI;MACH,IAAKmD,UAAU,EAAEC,QAAQ,EAAG;QAC3B,MAAMC,OAAO,CAACC,GAAG,CAChBH,UAAU,CAACC,QAAQ,CAACG,GAAG,CAAE,MAAQH,QAAQ,IAAM;UAC9C,IAAKA,QAAQ,CAACI,GAAG,EAAG;YACnBJ,QAAQ,CAACK,IAAI,GAAG,MAAM,IAAAC,6BAAsB,EAC3CN,QAAQ,CAACI,GACV,CAAC;UACF;QACD,CAAE,CACH,CAAC;MACF;IACD,CAAC,CAAC,OAAQG,KAAK,EAAG;MACjB;MACA;MACAjD,SAAS,CAAE;QACVa,IAAI,EAAE,OAAO;QACbC,OAAO,EAAE,IAAAoC,QAAE,EACV,sDACD;MACD,CAAE,CAAC;MACH;IACD;IAEA,IAAI;MACH,MAAMpD,WAAW,CAAE2C,UAAW,CAAC;MAC/BzC,SAAS,CAAE;QACVa,IAAI,EAAE,SAAS;QACfC,OAAO,EAAE,IAAAoC,QAAE,EAAE,oCAAqC;MACnD,CAAE,CAAC;IACJ,CAAC,CAAC,OAAQD,KAAK,EAAG;MACjBjD,SAAS,CAAE;QACVa,IAAI,EAAE,OAAO;QACbC,OAAO,EAAEmC,KAAK,CAACnC;MAChB,CAAE,CAAC;IACJ;IACAyB,mBAAmB,CAAC,CAAC;EACtB,CAAC;EAED,OACC,IAAAY,MAAA,CAAAC,aAAA,EAACvF,eAAA,CAAAwF,OAAc;IACdC,KAAK,EACJ,CAAEnE,YAAY,GAAGgB,kBAAkB,CAACzB,IAAI,GAAGS,YAAY,CAACT,IACxD;IACD6E,WAAW,EACV,CAAEpE,YAAY,GACXgB,kBAAkB,CAACoD,WAAW,GAC9B,IAAAL,QAAE,EAAE,kCAAmC,CAC1C;IACDnD,MAAM,EAAGA,MAAQ;IACjByD,UAAU,EAAG,CAAC,CAAErE,YAAY,IAAI4C,kBAAoB;IACpD0B,MAAM,EACL,IAAAN,MAAA,CAAAC,aAAA,EAACM,MAAM;MACNlB,aAAa,EAAGA,aAAe;MAC/BmB,UAAU,EAAGrE,cAAc,CAACsE,MAAM,KAAK;IAAG,CAC1C;EACD,GAEClE,mBAAmB,IACpB,IAAAyD,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAU,QAAA,QACC,IAAAV,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAAqG,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAZ,MAAA,CAAAC,aAAA,EAAC9E,yBAAA,CAAA+E,OAAwB,MAAE,CAC1B,CACF,EAEC,CAAE3D,mBAAmB,IAAI,CAAEP,YAAY,IACxC,IAAAgE,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAAuG,IAAI,QACJ,IAAAb,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAAwG,QAAQ,QACR,IAAAd,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAAyG,0BAAY;IACZxC,KAAK,EAAGlC,OAAO,CAACmC,MAAQ;IACxBwC,WAAW,EAAG,IAAAjB,QAAE,EAAE,YAAa,CAAG;IAClCkB,KAAK,EAAG,IAAAlB,QAAE,EAAE,QAAS,CAAG;IACxBmB,QAAQ,EAAGzC,0BAA4B;IACvC0C,MAAM,EAAG,IAAAnB,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAA8G,IAAI;MAACC,IAAI,EAAG7C;IAAQ,CAAE,CAAG;IACnC8C,MAAM,EACLjF,OAAO,EAAEmC,MAAM,GACd,IAAAwB,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAA8G,IAAI;MACJC,IAAI,EAAGE,iBAAY;MACnBC,OAAO,EAAG7C;IAAa,CACvB,CAAC,GACC;EACJ,CACD,CACQ,CAAC,EACX,IAAAqB,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAAwG,QAAQ,QACR,IAAAd,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAAmH,aAAa;IACbR,KAAK,EAAG,IAAAlB,QAAE,EAAE,UAAW,CAAG;IAC1BxB,KAAK,EAAGlC,OAAO,CAACgC,QAAU;IAC1B6C,QAAQ,EAAG9C;EAAsB,GAE/BH,UAAU,IACXA,UAAU,CAACyB,GAAG,CAAIrB,QAAQ,IACzB,IAAA2B,MAAA,CAAAC,aAAA;IACC1B,KAAK,EAAGF,QAAQ,CAAC/C,IAAM;IACvBoG,GAAG,EAAGrD,QAAQ,CAAC/C;EAAM,GAEnB+C,QAAQ,CAAC9C,IACJ,CACP,CACW,CACN,CACL,CACN,EAED,IAAAyE,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAAqG,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACrB,CAAErE,mBAAmB,IACtB,CAAES,kBAAkB,EAAEe,aAAa,IACnC,CAAEnB,MAAM,IAAI,IAAAoD,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAAqH,OAAO,MAAE,CAAC,EAEtB,CAAEpF,mBAAmB,IACtB,CAAC,CAAES,kBAAkB,EAAEe,aAAa,EAAE0C,MAAM,IAC5C,CAAEvC,KAAK,CAACuC,MAAM,IACb,IAAAT,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAAsH,kBAAI,QACF,IAAA7B,QAAE,EACH,kDACD,CACK,CACN,EAEA,CAAExD,mBAAmB,IAAIP,YAAY,IACtC,IAAAgE,MAAA,CAAAC,aAAA,EAACjF,sBAAA,CAAAkF,OAAqB;IACrBpB,IAAI,EAAG9C,YAAc;IACrB6C,mBAAmB,EAAGA,mBAAqB;IAC3CK,oBAAoB,EAAGA;EAAsB,CAC7C,CACD,EAEC,CAAE3C,mBAAmB,IAAI,CAAEP,YAAY,IACxC,IAAAgE,MAAA,CAAAC,aAAA,EAACpF,UAAA,CAAAqF,OAAS,QACPhC,KAAK,CAACwB,GAAG,CAAIZ,IAAI,IAClB,IAAAkB,MAAA,CAAAC,aAAA,EAACnF,SAAA,CAAAoF,OAAQ;IACRwB,GAAG,EAAG5C,IAAI,CAAC+C,oBAAoB,CAACvG,IAAM;IACtCwD,IAAI,EAAGA,IAAI,CAAC+C,oBAAsB;IAClCL,OAAO,EAAGA,CAAA,KAAM;MACfvF,eAAe,CAAE6C,IAAI,CAAC+C,oBAAqB,CAAC;IAC7C;EAAG,CACH,CACA,CACQ,CAEG,CAAC;AAEnB;AAEA,SAAStB,MAAMA,CAAE;EAAElB,aAAa;EAAEmB;AAAW,CAAC,EAAG;EAChD,MAAM;IAAEsB;EAAa,CAAC,GAAG,IAAAhF,mBAAU,EAAEC,2BAAmB,CAAC;EAEzD,OACC,IAAAiD,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAAuG,IAAI;IAACkB,OAAO,EAAC;EAAU,GACvB,IAAA/B,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAA0H,MAAM;IACNC,OAAO,EAAC,SAAS;IACjBT,OAAO,EAAGnC,aAAe;IACzB6C,MAAM,EAAGJ,YAAc;IACvBK,QAAQ,EAAG3B,UAAU,IAAIsB,YAAc;IACvCM,yBAAyB;EAAA,GAEvB,IAAArC,QAAE,EAAE,SAAU,CACT,CACH,CAAC;AAET;AAAC,IAAAsC,QAAA,GAAAC,OAAA,CAAApC,OAAA,GAEczE,cAAc"}
+{"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","installFont","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","resetSearch","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","__experimentalHeading","level","size","__experimentalText","description","__experimentalSpacer","margin","Flex","FlexItem","__experimentalInputControl","placeholder","onChange","prefix","Icon","suffix","closeSmall","SelectControl","key","Spinner","font_family_settings","navigatorPath","__experimentalNavigatorToParentButton","chevronLeft","isSmall","Fragment","Notice","status","onRemove","__experimentalVStack","spacing","i","selected","isFontFontFaceInOutline","Button","variant","isBusy","disabled","__experimentalIsFocusable","expanded","createInterpolateElement","sprintf","CurrenPageControl","options","Array","newPage","parseInt","__nextHasNoMarginBottom","_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\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\tIcon,\n\tFlexItem,\n\tFlex,\n\tButton,\n\tDropdownMenu,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { sprintf, __, _x } from '@wordpress/i18n';\nimport {\n\tsearch,\n\tcloseSmall,\n\tmoreVertical,\n\tchevronLeft,\n} 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\tinstallFont,\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 resetSearch = () => {\n\t\tsetFilters( { ...filters, search: '' } );\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 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\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<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t\t\t{ selectedCollection.name }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t<ActionsComponent />\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<Text>{ selectedCollection.description }</Text>\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<InputControl\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\tprefix={ <Icon icon={ search } /> }\n\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\tfilters?.search ? (\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\t\t\tonClick={ resetSearch }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) : null\n\t\t\t\t\t\t\t\t}\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\tisSmall\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/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

@@ -21,7 +21,7 @@ function GoogleFontsConfirmDialog() {
     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"
-  }, "Connect to Google Fonts"), (0, _react.createElement)(_components.__experimentalSpacer, {
+  }, (0, _i18n.__)('Connect to Google Fonts')), (0, _react.createElement)(_components.__experimentalSpacer, {
     margin: 6
   }), (0, _react.createElement)(_components.__experimentalText, {
     as: "p"

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,GAAC,yBAA6B,CAAC,EAC5C,IAAAN,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,gOACD,CACK,CAAC,EACP,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,gEACD,CACK,CAAC,EACP,IAAAT,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAkB,MAAM;IAACC,OAAO,EAAC,SAAS;IAACC,OAAO,EAAGlB;EAAe,GAChD,IAAAe,QAAE,EAAE,8BAA+B,CAC9B,CACC,CACL,CACF,CAAC;AAER;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEctB,wBAAwB"}
+{"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"}