@wordpress/edit-site 5.29.0 → 5.31.0

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

@@ -2,19 +2,21 @@ import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { Button, __experimentalConfirmDialog as ConfirmDialog, __experimentalHStack as HStack, __experimentalHeading as Heading, __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, __experimentalNavigatorToParentButton as NavigatorToParentButton, __experimentalUseNavigator as useNavigator, __experimentalSpacer as Spacer, __experimentalText as Text, __experimentalVStack as VStack, Flex, Notice, Spinner, privateApis as componentsPrivateApis } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useState } from '@wordpress/element';
-import { privateApis as componentsPrivateApis, __experimentalHStack as HStack, __experimentalSpacer as Spacer, __experimentalText as Text, Button, Spinner, FlexItem } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import TabPanelLayout from './tab-panel-layout';
-import { FontLibraryContext } from './context';
-import LibraryFontDetails from './library-font-details';
-import LibraryFontCard from './library-font-card';
-import ConfirmDeleteDialog from './confirm-delete-dialog';
 import { unlock } from '../../../lock-unlock';
+import { FontLibraryContext } from './context';
+import FontCard from './font-card';
+import LibraryFontVariant from './library-font-variant';
+import { sortFontFaces } from './utils/sort-font-faces';
 const {
   ProgressBar
 } = unlock(componentsPrivateApis);
@@ -27,71 +29,74 @@ function InstalledFonts() {
     refreshLibrary,
     uninstallFontFamily,
     isResolvingLibrary,
+    isInstalling,
+    saveFontFamilies,
+    getFontFacesActivated,
+    fontFamiliesHasChanges,
     notice,
     setNotice
   } = useContext(FontLibraryContext);
   const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
-  const handleUnselectFont = () => {
-    handleSetLibraryFontSelected(null);
-  };
-  const handleSelectFont = font => {
-    handleSetLibraryFontSelected(font);
+  const customFontFamilyId = libraryFontSelected?.source === 'custom' && libraryFontSelected?.id;
+  const canUserDelete = useSelect(select => {
+    const {
+      canUser
+    } = select(coreStore);
+    return customFontFamilyId && canUser('delete', 'font-families', customFontFamilyId);
+  }, [customFontFamilyId]);
+  const shouldDisplayDeleteButton = !!libraryFontSelected && libraryFontSelected?.source !== 'theme' && canUserDelete;
+  const handleUninstallClick = () => {
+    setIsConfirmDeleteOpen(true);
   };
-  const handleConfirmUninstall = async () => {
-    setNotice(null);
-    try {
-      await uninstallFontFamily(libraryFontSelected);
-      setNotice({
-        type: 'success',
-        message: __('Font family uninstalled successfully.')
-      });
-
-      // If the font was succesfully uninstalled it is unselected.
-      handleUnselectFont();
-      setIsConfirmDeleteOpen(false);
-    } catch (error) {
-      setNotice({
-        type: 'error',
-        message: __('There was an error uninstalling the font family. ') + error.message
-      });
+  const getFontFacesToDisplay = font => {
+    if (!font) {
+      return [];
     }
+    if (!font.fontFace || !font.fontFace.length) {
+      return [{
+        fontFamily: font.fontFamily,
+        fontStyle: 'normal',
+        fontWeight: '400'
+      }];
+    }
+    return sortFontFaces(font.fontFace);
   };
-  const handleUninstallClick = async () => {
-    setIsConfirmDeleteOpen(true);
-  };
-  const handleCancelUninstall = () => {
-    setIsConfirmDeleteOpen(false);
+  const getFontCardVariantsText = font => {
+    const variantsInstalled = font?.fontFace?.length > 0 ? font.fontFace.length : 1;
+    const variantsActive = getFontFacesActivated(font.slug, font.source).length;
+    return sprintf( /* translators: 1: Active font variants, 2: Total font variants. */
+    __('%1$s/%2$s variants active'), variantsActive, variantsInstalled);
   };
-  const tabDescription = !!libraryFontSelected ? __('Choose font variants. Keep in mind that too many variants could make your site slower.') : null;
-  const shouldDisplayDeleteButton = !!libraryFontSelected && libraryFontSelected?.source !== 'theme';
   useEffect(() => {
-    handleSelectFont(libraryFontSelected);
+    handleSetLibraryFontSelected(libraryFontSelected);
     refreshLibrary();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return createElement(TabPanelLayout, {
-    title: libraryFontSelected?.name || '',
-    description: tabDescription,
-    notice: notice,
-    handleBack: !!libraryFontSelected && handleUnselectFont,
-    footer: createElement(Footer, {
-      shouldDisplayDeleteButton: shouldDisplayDeleteButton,
-      handleUninstallClick: handleUninstallClick
-    })
-  }, createElement(ConfirmDeleteDialog, {
-    font: libraryFontSelected,
-    isConfirmDeleteOpen: isConfirmDeleteOpen,
-    handleConfirmUninstall: handleConfirmUninstall,
-    handleCancelUninstall: handleCancelUninstall
-  }), !libraryFontSelected && createElement(Fragment, null, isResolvingLibrary && createElement(FlexItem, null, createElement(Spacer, {
-    margin: 2
-  }), createElement(Spinner, null), createElement(Spacer, {
+  return createElement("div", {
+    className: "font-library-modal__tabpanel-layout"
+  }, isResolvingLibrary && createElement(HStack, {
+    align: "center"
+  }, createElement(Spacer, null), createElement(Spinner, null), createElement(Spacer, null)), createElement(NavigatorProvider, {
+    initialPath: libraryFontSelected ? '/fontFamily' : '/'
+  }, createElement(NavigatorScreen, {
+    path: "/"
+  }, notice && createElement(Fragment, null, createElement(Spacer, {
+    margin: 1
+  }), createElement(Notice, {
+    status: notice.type,
+    onRemove: () => setNotice(null)
+  }, notice.message), createElement(Spacer, {
+    margin: 1
+  })), baseCustomFonts.length > 0 && createElement(Fragment, null, createElement(Text, {
+    className: "font-library-modal__subtitle"
+  }, __('Installed Fonts')), createElement(Spacer, {
     margin: 2
-  })), baseCustomFonts.length > 0 && createElement(Fragment, null, baseCustomFonts.map(font => createElement(LibraryFontCard, {
+  }), baseCustomFonts.map(font => createElement(FontCard, {
     font: font,
     key: font.slug,
+    navigatorPath: '/fontFamily',
+    variantsText: getFontCardVariantsText(font),
     onClick: () => {
-      handleSelectFont(font);
+      handleSetLibraryFontSelected(font);
     }
   })), createElement(Spacer, {
     margin: 8
@@ -99,42 +104,109 @@ function InstalledFonts() {
     className: "font-library-modal__subtitle"
   }, __('Theme Fonts')), createElement(Spacer, {
     margin: 2
-  }), baseThemeFonts.map(font => createElement(LibraryFontCard, {
+  }), baseThemeFonts.map(font => createElement(FontCard, {
     font: font,
     key: font.slug,
+    navigatorPath: '/fontFamily',
+    variantsText: getFontCardVariantsText(font),
     onClick: () => {
-      handleSelectFont(font);
+      handleSetLibraryFontSelected(font);
     }
   }))), createElement(Spacer, {
     margin: 16
-  })), libraryFontSelected && createElement(LibraryFontDetails, {
+  })), createElement(NavigatorScreen, {
+    path: "/fontFamily"
+  }, createElement(ConfirmDeleteDialog, {
     font: libraryFontSelected,
-    isConfirmDeleteOpen: isConfirmDeleteOpen,
-    handleConfirmUninstall: handleConfirmUninstall,
-    handleCancelUninstall: handleCancelUninstall
-  }));
-}
-function Footer({
-  shouldDisplayDeleteButton,
-  handleUninstallClick
-}) {
-  const {
-    saveFontFamilies,
-    fontFamiliesHasChanges,
-    isInstalling
-  } = useContext(FontLibraryContext);
-  return createElement(HStack, {
-    justify: "flex-end"
-  }, isInstalling && createElement(ProgressBar, null), createElement("div", null, shouldDisplayDeleteButton && createElement(Button, {
+    isOpen: isConfirmDeleteOpen,
+    setIsOpen: setIsConfirmDeleteOpen,
+    setNotice: setNotice,
+    uninstallFontFamily: uninstallFontFamily,
+    handleSetLibraryFontSelected: handleSetLibraryFontSelected
+  }), createElement(Flex, {
+    justify: "flex-start"
+  }, createElement(NavigatorToParentButton, {
+    icon: chevronLeft,
+    size: "small",
+    onClick: () => {
+      handleSetLibraryFontSelected(null);
+    },
+    label: __('Back')
+  }), createElement(Heading, {
+    level: 2,
+    size: 13,
+    className: "edit-site-global-styles-header"
+  }, libraryFontSelected?.name)), notice && createElement(Fragment, null, createElement(Spacer, {
+    margin: 1
+  }), createElement(Notice, {
+    status: notice.type,
+    onRemove: () => setNotice(null)
+  }, notice.message), createElement(Spacer, {
+    margin: 1
+  })), createElement(Spacer, {
+    margin: 4
+  }), createElement(Text, null, __('Choose font variants. Keep in mind that too many variants could make your site slower.')), createElement(Spacer, {
+    margin: 4
+  }), createElement(VStack, {
+    spacing: 0
+  }, createElement(Spacer, {
+    margin: 8
+  }), getFontFacesToDisplay(libraryFontSelected).map((face, i) => createElement(LibraryFontVariant, {
+    font: libraryFontSelected,
+    face: face,
+    key: `face${i}`
+  }))))), createElement(HStack, {
+    justify: "flex-end",
+    className: "font-library-modal__tabpanel-layout__footer"
+  }, isInstalling && createElement(ProgressBar, null), shouldDisplayDeleteButton && createElement(Button, {
     isDestructive: true,
     variant: "tertiary",
     onClick: handleUninstallClick
-  }, __('Delete'))), createElement(Button, {
+  }, __('Delete')), createElement(Button, {
     variant: "primary",
     onClick: saveFontFamilies,
     disabled: !fontFamiliesHasChanges,
     __experimentalIsFocusable: true
-  }, __('Update')));
+  }, __('Update'))));
+}
+function ConfirmDeleteDialog({
+  font,
+  isOpen,
+  setIsOpen,
+  setNotice,
+  uninstallFontFamily,
+  handleSetLibraryFontSelected
+}) {
+  const navigator = useNavigator();
+  const handleConfirmUninstall = async () => {
+    setNotice(null);
+    setIsOpen(false);
+    try {
+      await uninstallFontFamily(font);
+      navigator.goBack();
+      handleSetLibraryFontSelected(null);
+      setNotice({
+        type: 'success',
+        message: __('Font family uninstalled successfully.')
+      });
+    } catch (error) {
+      setNotice({
+        type: 'error',
+        message: __('There was an error uninstalling the font family. ') + error.message
+      });
+    }
+  };
+  const handleCancelUninstall = () => {
+    setIsOpen(false);
+  };
+  return createElement(ConfirmDialog, {
+    isOpen: isOpen,
+    cancelButtonText: __('Cancel'),
+    confirmButtonText: __('Delete'),
+    onCancel: handleCancelUninstall,
+    onConfirm: handleConfirmUninstall
+  }, font && sprintf( /* translators: %s: Name of the font. */
+  __('Are you sure you want to delete "%s" font and all its variants and assets?'), font.name));
 }
 export default InstalledFonts;
 //# sourceMappingURL=installed-fonts.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__","useContext","useEffect","useState","privateApis","componentsPrivateApis","__experimentalHStack","HStack","__experimentalSpacer","Spacer","__experimentalText","Text","Button","Spinner","FlexItem","TabPanelLayout","FontLibraryContext","LibraryFontDetails","LibraryFontCard","ConfirmDeleteDialog","unlock","ProgressBar","InstalledFonts","baseCustomFonts","libraryFontSelected","baseThemeFonts","handleSetLibraryFontSelected","refreshLibrary","uninstallFontFamily","isResolvingLibrary","notice","setNotice","isConfirmDeleteOpen","setIsConfirmDeleteOpen","handleUnselectFont","handleSelectFont","font","handleConfirmUninstall","type","message","error","handleUninstallClick","handleCancelUninstall","tabDescription","shouldDisplayDeleteButton","source","createElement","title","name","description","handleBack","footer","Footer","Fragment","margin","length","map","key","slug","onClick","className","saveFontFamilies","fontFamiliesHasChanges","isInstalling","justify","isDestructive","variant","disabled","__experimentalIsFocusable"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport {\n\tprivateApis as componentsPrivateApis,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as Text,\n\tButton,\n\tSpinner,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TabPanelLayout from './tab-panel-layout';\nimport { FontLibraryContext } from './context';\nimport LibraryFontDetails from './library-font-details';\nimport LibraryFontCard from './library-font-card';\nimport ConfirmDeleteDialog from './confirm-delete-dialog';\nimport { unlock } from '../../../lock-unlock';\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\tbaseThemeFonts,\n\t\thandleSetLibraryFontSelected,\n\t\trefreshLibrary,\n\t\tuninstallFontFamily,\n\t\tisResolvingLibrary,\n\t\tnotice,\n\t\tsetNotice,\n\t} = useContext( FontLibraryContext );\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );\n\n\tconst handleUnselectFont = () => {\n\t\thandleSetLibraryFontSelected( null );\n\t};\n\n\tconst handleSelectFont = ( font ) => {\n\t\thandleSetLibraryFontSelected( font );\n\t};\n\n\tconst handleConfirmUninstall = async () => {\n\t\tsetNotice( null );\n\n\t\ttry {\n\t\t\tawait uninstallFontFamily( libraryFontSelected );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family uninstalled successfully.' ),\n\t\t\t} );\n\n\t\t\t// If the font was succesfully uninstalled it is unselected.\n\t\t\thandleUnselectFont();\n\t\t\tsetIsConfirmDeleteOpen( false );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage:\n\t\t\t\t\t__( 'There was an error uninstalling the font family. ' ) +\n\t\t\t\t\terror.message,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst handleUninstallClick = async () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst handleCancelUninstall = () => {\n\t\tsetIsConfirmDeleteOpen( false );\n\t};\n\n\tconst tabDescription = !! libraryFontSelected\n\t\t? __(\n\t\t\t\t'Choose font variants. Keep in mind that too many variants could make your site slower.'\n\t\t  )\n\t\t: null;\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected && libraryFontSelected?.source !== 'theme';\n\n\tuseEffect( () => {\n\t\thandleSelectFont( libraryFontSelected );\n\t\trefreshLibrary();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\treturn (\n\t\t<TabPanelLayout\n\t\t\ttitle={ libraryFontSelected?.name || '' }\n\t\t\tdescription={ tabDescription }\n\t\t\tnotice={ notice }\n\t\t\thandleBack={ !! libraryFontSelected && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\t<Footer\n\t\t\t\t\tshouldDisplayDeleteButton={ shouldDisplayDeleteButton }\n\t\t\t\t\thandleUninstallClick={ handleUninstallClick }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<ConfirmDeleteDialog\n\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t/>\n\n\t\t\t{ ! libraryFontSelected && (\n\t\t\t\t<>\n\t\t\t\t\t{ isResolvingLibrary && (\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t) }\n\t\t\t\t\t{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ baseCustomFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\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\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ baseThemeFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t\t{ __( 'Theme Fonts' ) }\n\t\t\t\t\t\t\t</Text>\n\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t{ baseThemeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\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) }\n\t\t\t\t\t<Spacer margin={ 16 } />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ libraryFontSelected && (\n\t\t\t\t<LibraryFontDetails\n\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</TabPanelLayout>\n\t);\n}\n\nfunction Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {\n\tconst { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =\n\t\tuseContext( FontLibraryContext );\n\treturn (\n\t\t<HStack justify=\"flex-end\">\n\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t<div>\n\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisDestructive\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ handleUninstallClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ saveFontFamilies }\n\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\t__experimentalIsFocusable\n\t\t\t>\n\t\t\t\t{ __( 'Update' ) }\n\t\t\t</Button>\n\t\t</HStack>\n\t);\n}\n\nexport default InstalledFonts;\n"],"mappings":"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"}
+{"version":3,"names":["Button","__experimentalConfirmDialog","ConfirmDialog","__experimentalHStack","HStack","__experimentalHeading","Heading","__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalNavigatorToParentButton","NavigatorToParentButton","__experimentalUseNavigator","useNavigator","__experimentalSpacer","Spacer","__experimentalText","Text","__experimentalVStack","VStack","Flex","Notice","Spinner","privateApis","componentsPrivateApis","store","coreStore","useSelect","useContext","useEffect","useState","__","sprintf","chevronLeft","unlock","FontLibraryContext","FontCard","LibraryFontVariant","sortFontFaces","ProgressBar","InstalledFonts","baseCustomFonts","libraryFontSelected","baseThemeFonts","handleSetLibraryFontSelected","refreshLibrary","uninstallFontFamily","isResolvingLibrary","isInstalling","saveFontFamilies","getFontFacesActivated","fontFamiliesHasChanges","notice","setNotice","isConfirmDeleteOpen","setIsConfirmDeleteOpen","customFontFamilyId","source","id","canUserDelete","select","canUser","shouldDisplayDeleteButton","handleUninstallClick","getFontFacesToDisplay","font","fontFace","length","fontFamily","fontStyle","fontWeight","getFontCardVariantsText","variantsInstalled","variantsActive","slug","createElement","className","align","initialPath","path","Fragment","margin","status","type","onRemove","message","map","key","navigatorPath","variantsText","onClick","ConfirmDeleteDialog","isOpen","setIsOpen","justify","icon","size","label","level","name","spacing","face","i","isDestructive","variant","disabled","__experimentalIsFocusable","navigator","handleConfirmUninstall","goBack","error","handleCancelUninstall","cancelButtonText","confirmButtonText","onCancel","onConfirm"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\tFlex,\n\tNotice,\n\tSpinner,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { chevronLeft } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport { FontLibraryContext } from './context';\nimport FontCard from './font-card';\nimport LibraryFontVariant from './library-font-variant';\nimport { sortFontFaces } from './utils/sort-font-faces';\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\tbaseThemeFonts,\n\t\thandleSetLibraryFontSelected,\n\t\trefreshLibrary,\n\t\tuninstallFontFamily,\n\t\tisResolvingLibrary,\n\t\tisInstalling,\n\t\tsaveFontFamilies,\n\t\tgetFontFacesActivated,\n\t\tfontFamiliesHasChanges,\n\t\tnotice,\n\t\tsetNotice,\n\t} = useContext( FontLibraryContext );\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );\n\tconst customFontFamilyId =\n\t\tlibraryFontSelected?.source === 'custom' && libraryFontSelected?.id;\n\n\tconst canUserDelete = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canUser } = select( coreStore );\n\t\t\treturn (\n\t\t\t\tcustomFontFamilyId &&\n\t\t\t\tcanUser( 'delete', 'font-families', customFontFamilyId )\n\t\t\t);\n\t\t},\n\t\t[ customFontFamilyId ]\n\t);\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected &&\n\t\tlibraryFontSelected?.source !== 'theme' &&\n\t\tcanUserDelete;\n\n\tconst handleUninstallClick = () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst getFontFacesToDisplay = ( font ) => {\n\t\tif ( ! font ) {\n\t\t\treturn [];\n\t\t}\n\t\tif ( ! font.fontFace || ! font.fontFace.length ) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tfontFamily: font.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( font.fontFace );\n\t};\n\n\tconst getFontCardVariantsText = ( font ) => {\n\t\tconst variantsInstalled =\n\t\t\tfont?.fontFace?.length > 0 ? font.fontFace.length : 1;\n\t\tconst variantsActive = getFontFacesActivated(\n\t\t\tfont.slug,\n\t\t\tfont.source\n\t\t).length;\n\t\treturn sprintf(\n\t\t\t/* translators: 1: Active font variants, 2: Total font variants. */\n\t\t\t__( '%1$s/%2$s variants active' ),\n\t\t\tvariantsActive,\n\t\t\tvariantsInstalled\n\t\t);\n\t};\n\n\tuseEffect( () => {\n\t\thandleSetLibraryFontSelected( libraryFontSelected );\n\t\trefreshLibrary();\n\t}, [] );\n\n\treturn (\n\t\t<div className=\"font-library-modal__tabpanel-layout\">\n\t\t\t{ isResolvingLibrary && (\n\t\t\t\t<HStack align=\"center\">\n\t\t\t\t\t<Spacer />\n\t\t\t\t\t<Spinner />\n\t\t\t\t\t<Spacer />\n\t\t\t\t</HStack>\n\t\t\t) }\n\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath={ libraryFontSelected ? '/fontFamily' : '/' }\n\t\t\t>\n\t\t\t\t<NavigatorScreen path=\"/\">\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{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t\t{ __( 'Installed Fonts' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t{ baseCustomFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\tnavigatorPath={ '/fontFamily' }\n\t\t\t\t\t\t\t\t\tvariantsText={ getFontCardVariantsText(\n\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected( font );\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\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ baseThemeFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t\t{ __( 'Theme Fonts' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t{ baseThemeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\tnavigatorPath={ '/fontFamily' }\n\t\t\t\t\t\t\t\t\tvariantsText={ getFontCardVariantsText(\n\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected( font );\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) }\n\t\t\t\t\t<Spacer margin={ 16 } />\n\t\t\t\t</NavigatorScreen>\n\n\t\t\t\t<NavigatorScreen path=\"/fontFamily\">\n\t\t\t\t\t<ConfirmDeleteDialog\n\t\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\t\tisOpen={ isConfirmDeleteOpen }\n\t\t\t\t\t\tsetIsOpen={ setIsConfirmDeleteOpen }\n\t\t\t\t\t\tsetNotice={ setNotice }\n\t\t\t\t\t\tuninstallFontFamily={ uninstallFontFamily }\n\t\t\t\t\t\thandleSetLibraryFontSelected={\n\t\t\t\t\t\t\thandleSetLibraryFontSelected\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\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\thandleSetLibraryFontSelected( 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{ libraryFontSelected?.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>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Choose font variants. Keep in mind that too many variants could make your site slower.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</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{ getFontFacesToDisplay( libraryFontSelected ).map(\n\t\t\t\t\t\t\t( face, i ) => (\n\t\t\t\t\t\t\t\t<LibraryFontVariant\n\t\t\t\t\t\t\t\t\tfont={ libraryFontSelected }\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/>\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</NavigatorScreen>\n\t\t\t</NavigatorProvider>\n\n\t\t\t<HStack\n\t\t\t\tjustify=\"flex-end\"\n\t\t\t\tclassName=\"font-library-modal__tabpanel-layout__footer\"\n\t\t\t>\n\t\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisDestructive\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ handleUninstallClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ saveFontFamilies }\n\t\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Update' ) }\n\t\t\t\t</Button>\n\t\t\t</HStack>\n\t\t</div>\n\t);\n}\n\nfunction ConfirmDeleteDialog( {\n\tfont,\n\tisOpen,\n\tsetIsOpen,\n\tsetNotice,\n\tuninstallFontFamily,\n\thandleSetLibraryFontSelected,\n} ) {\n\tconst navigator = useNavigator();\n\n\tconst handleConfirmUninstall = async () => {\n\t\tsetNotice( null );\n\t\tsetIsOpen( false );\n\t\ttry {\n\t\t\tawait uninstallFontFamily( font );\n\t\t\tnavigator.goBack();\n\t\t\thandleSetLibraryFontSelected( null );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family uninstalled 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:\n\t\t\t\t\t__( 'There was an error uninstalling the font family. ' ) +\n\t\t\t\t\terror.message,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst handleCancelUninstall = () => {\n\t\tsetIsOpen( false );\n\t};\n\n\treturn (\n\t\t<ConfirmDialog\n\t\t\tisOpen={ isOpen }\n\t\t\tcancelButtonText={ __( 'Cancel' ) }\n\t\t\tconfirmButtonText={ __( 'Delete' ) }\n\t\t\tonCancel={ handleCancelUninstall }\n\t\t\tonConfirm={ handleConfirmUninstall }\n\t\t>\n\t\t\t{ font &&\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: Name of the font. */\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Are you sure you want to delete \"%s\" font and all its variants and assets?'\n\t\t\t\t\t),\n\t\t\t\t\tfont.name\n\t\t\t\t) }\n\t\t</ConfirmDialog>\n\t);\n}\n\nexport default InstalledFonts;\n"],"mappings":"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"}

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

@@ -10,7 +10,7 @@ import { CheckboxControl, Flex, privateApis as componentsPrivateApis } from '@wo
  */
 import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
-import FontFaceDemo from './font-demo';
+import FontDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 function LibraryFontVariant({
   face,
@@ -34,7 +34,7 @@ function LibraryFontVariant({
   } = unlock(componentsPrivateApis);
   const checkboxId = kebabCase(`${font.slug}-${getFontFaceVariantName(face)}`);
   return createElement("div", {
-    className: "font-library-modal__library-font-variant"
+    className: "font-library-modal__font-card"
   }, createElement(Flex, {
     justify: "flex-start",
     align: "center",
@@ -46,8 +46,8 @@ function LibraryFontVariant({
     id: checkboxId
   }), createElement("label", {
     htmlFor: checkboxId
-  }, createElement(FontFaceDemo, {
-    fontFace: face,
+  }, createElement(FontDemo, {
+    font: face,
     text: displayName,
     onClick: handleToggleActivation
   }))));

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

@@ -1 +1 @@
-{"version":3,"names":["useContext","CheckboxControl","Flex","privateApis","componentsPrivateApis","getFontFaceVariantName","FontLibraryContext","FontFaceDemo","unlock","LibraryFontVariant","face","font","isFontActivated","toggleActivateFont","isInstalled","fontFace","length","slug","fontStyle","fontWeight","source","handleToggleActivation","displayName","name","kebabCase","checkboxId","createElement","className","justify","align","gap","checked","onChange","__nextHasNoMarginBottom","id","htmlFor","text","onClick"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport {\n\tCheckboxControl,\n\tFlex,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { getFontFaceVariantName } from './utils';\nimport { FontLibraryContext } from './context';\nimport FontFaceDemo from './font-demo';\nimport { unlock } from '../../../lock-unlock';\n\nfunction LibraryFontVariant( { face, font } ) {\n\tconst { isFontActivated, toggleActivateFont } =\n\t\tuseContext( FontLibraryContext );\n\n\tconst isInstalled =\n\t\tfont?.fontFace?.length > 0\n\t\t\t? isFontActivated(\n\t\t\t\t\tfont.slug,\n\t\t\t\t\tface.fontStyle,\n\t\t\t\t\tface.fontWeight,\n\t\t\t\t\tfont.source\n\t\t\t  )\n\t\t\t: isFontActivated( font.slug, null, null, font.source );\n\n\tconst handleToggleActivation = () => {\n\t\tif ( font?.fontFace?.length > 0 ) {\n\t\t\ttoggleActivateFont( font, face );\n\t\t\treturn;\n\t\t}\n\t\ttoggleActivateFont( font );\n\t};\n\n\tconst displayName = font.name + ' ' + getFontFaceVariantName( face );\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\tconst checkboxId = kebabCase(\n\t\t`${ font.slug }-${ getFontFaceVariantName( face ) }`\n\t);\n\n\treturn (\n\t\t<div className=\"font-library-modal__library-font-variant\">\n\t\t\t<Flex justify=\"flex-start\" align=\"center\" gap=\"1rem\">\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tchecked={ isInstalled }\n\t\t\t\t\tonChange={ handleToggleActivation }\n\t\t\t\t\t__nextHasNoMarginBottom={ true }\n\t\t\t\t\tid={ checkboxId }\n\t\t\t\t/>\n\t\t\t\t<label htmlFor={ checkboxId }>\n\t\t\t\t\t<FontFaceDemo\n\t\t\t\t\t\tfontFace={ face }\n\t\t\t\t\t\ttext={ displayName }\n\t\t\t\t\t\tonClick={ handleToggleActivation }\n\t\t\t\t\t/>\n\t\t\t\t</label>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n\nexport default LibraryFontVariant;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;AAC/C,SACCC,eAAe,EACfC,IAAI,EACJC,WAAW,IAAIC,qBAAqB,QAC9B,uBAAuB;;AAE9B;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,SAAS;AAChD,SAASC,kBAAkB,QAAQ,WAAW;AAC9C,OAAOC,YAAY,MAAM,aAAa;AACtC,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,SAASC,kBAAkBA,CAAE;EAAEC,IAAI;EAAEC;AAAK,CAAC,EAAG;EAC7C,MAAM;IAAEC,eAAe;IAAEC;EAAmB,CAAC,GAC5Cb,UAAU,CAAEM,kBAAmB,CAAC;EAEjC,MAAMQ,WAAW,GAChBH,IAAI,EAAEI,QAAQ,EAAEC,MAAM,GAAG,CAAC,GACvBJ,eAAe,CACfD,IAAI,CAACM,IAAI,EACTP,IAAI,CAACQ,SAAS,EACdR,IAAI,CAACS,UAAU,EACfR,IAAI,CAACS,MACL,CAAC,GACDR,eAAe,CAAED,IAAI,CAACM,IAAI,EAAE,IAAI,EAAE,IAAI,EAAEN,IAAI,CAACS,MAAO,CAAC;EAEzD,MAAMC,sBAAsB,GAAGA,CAAA,KAAM;IACpC,IAAKV,IAAI,EAAEI,QAAQ,EAAEC,MAAM,GAAG,CAAC,EAAG;MACjCH,kBAAkB,CAAEF,IAAI,EAAED,IAAK,CAAC;MAChC;IACD;IACAG,kBAAkB,CAAEF,IAAK,CAAC;EAC3B,CAAC;EAED,MAAMW,WAAW,GAAGX,IAAI,CAACY,IAAI,GAAG,GAAG,GAAGlB,sBAAsB,CAAEK,IAAK,CAAC;EACpE,MAAM;IAAEc;EAAU,CAAC,GAAGhB,MAAM,CAAEJ,qBAAsB,CAAC;EACrD,MAAMqB,UAAU,GAAGD,SAAS,CAC1B,GAAGb,IAAI,CAACM,IAAM,IAAIZ,sBAAsB,CAAEK,IAAK,CAAG,EACpD,CAAC;EAED,OACCgB,aAAA;IAAKC,SAAS,EAAC;EAA0C,GACxDD,aAAA,CAACxB,IAAI;IAAC0B,OAAO,EAAC,YAAY;IAACC,KAAK,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAM,GACnDJ,aAAA,CAACzB,eAAe;IACf8B,OAAO,EAAGjB,WAAa;IACvBkB,QAAQ,EAAGX,sBAAwB;IACnCY,uBAAuB,EAAG,IAAM;IAChCC,EAAE,EAAGT;EAAY,CACjB,CAAC,EACFC,aAAA;IAAOS,OAAO,EAAGV;EAAY,GAC5BC,aAAA,CAACnB,YAAY;IACZQ,QAAQ,EAAGL,IAAM;IACjB0B,IAAI,EAAGd,WAAa;IACpBe,OAAO,EAAGhB;EAAwB,CAClC,CACK,CACF,CACF,CAAC;AAER;AAEA,eAAeZ,kBAAkB"}
+{"version":3,"names":["useContext","CheckboxControl","Flex","privateApis","componentsPrivateApis","getFontFaceVariantName","FontLibraryContext","FontDemo","unlock","LibraryFontVariant","face","font","isFontActivated","toggleActivateFont","isInstalled","fontFace","length","slug","fontStyle","fontWeight","source","handleToggleActivation","displayName","name","kebabCase","checkboxId","createElement","className","justify","align","gap","checked","onChange","__nextHasNoMarginBottom","id","htmlFor","text","onClick"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport {\n\tCheckboxControl,\n\tFlex,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { getFontFaceVariantName } from './utils';\nimport { FontLibraryContext } from './context';\nimport FontDemo from './font-demo';\nimport { unlock } from '../../../lock-unlock';\n\nfunction LibraryFontVariant( { face, font } ) {\n\tconst { isFontActivated, toggleActivateFont } =\n\t\tuseContext( FontLibraryContext );\n\n\tconst isInstalled =\n\t\tfont?.fontFace?.length > 0\n\t\t\t? isFontActivated(\n\t\t\t\t\tfont.slug,\n\t\t\t\t\tface.fontStyle,\n\t\t\t\t\tface.fontWeight,\n\t\t\t\t\tfont.source\n\t\t\t  )\n\t\t\t: isFontActivated( font.slug, null, null, font.source );\n\n\tconst handleToggleActivation = () => {\n\t\tif ( font?.fontFace?.length > 0 ) {\n\t\t\ttoggleActivateFont( font, face );\n\t\t\treturn;\n\t\t}\n\t\ttoggleActivateFont( font );\n\t};\n\n\tconst displayName = font.name + ' ' + getFontFaceVariantName( face );\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\tconst checkboxId = kebabCase(\n\t\t`${ font.slug }-${ getFontFaceVariantName( face ) }`\n\t);\n\n\treturn (\n\t\t<div className=\"font-library-modal__font-card\">\n\t\t\t<Flex justify=\"flex-start\" align=\"center\" gap=\"1rem\">\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tchecked={ isInstalled }\n\t\t\t\t\tonChange={ handleToggleActivation }\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tid={ checkboxId }\n\t\t\t\t/>\n\t\t\t\t<label htmlFor={ checkboxId }>\n\t\t\t\t\t<FontDemo\n\t\t\t\t\t\tfont={ face }\n\t\t\t\t\t\ttext={ displayName }\n\t\t\t\t\t\tonClick={ handleToggleActivation }\n\t\t\t\t\t/>\n\t\t\t\t</label>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n\nexport default LibraryFontVariant;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;AAC/C,SACCC,eAAe,EACfC,IAAI,EACJC,WAAW,IAAIC,qBAAqB,QAC9B,uBAAuB;;AAE9B;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,SAAS;AAChD,SAASC,kBAAkB,QAAQ,WAAW;AAC9C,OAAOC,QAAQ,MAAM,aAAa;AAClC,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,SAASC,kBAAkBA,CAAE;EAAEC,IAAI;EAAEC;AAAK,CAAC,EAAG;EAC7C,MAAM;IAAEC,eAAe;IAAEC;EAAmB,CAAC,GAC5Cb,UAAU,CAAEM,kBAAmB,CAAC;EAEjC,MAAMQ,WAAW,GAChBH,IAAI,EAAEI,QAAQ,EAAEC,MAAM,GAAG,CAAC,GACvBJ,eAAe,CACfD,IAAI,CAACM,IAAI,EACTP,IAAI,CAACQ,SAAS,EACdR,IAAI,CAACS,UAAU,EACfR,IAAI,CAACS,MACL,CAAC,GACDR,eAAe,CAAED,IAAI,CAACM,IAAI,EAAE,IAAI,EAAE,IAAI,EAAEN,IAAI,CAACS,MAAO,CAAC;EAEzD,MAAMC,sBAAsB,GAAGA,CAAA,KAAM;IACpC,IAAKV,IAAI,EAAEI,QAAQ,EAAEC,MAAM,GAAG,CAAC,EAAG;MACjCH,kBAAkB,CAAEF,IAAI,EAAED,IAAK,CAAC;MAChC;IACD;IACAG,kBAAkB,CAAEF,IAAK,CAAC;EAC3B,CAAC;EAED,MAAMW,WAAW,GAAGX,IAAI,CAACY,IAAI,GAAG,GAAG,GAAGlB,sBAAsB,CAAEK,IAAK,CAAC;EACpE,MAAM;IAAEc;EAAU,CAAC,GAAGhB,MAAM,CAAEJ,qBAAsB,CAAC;EACrD,MAAMqB,UAAU,GAAGD,SAAS,CAC1B,GAAGb,IAAI,CAACM,IAAM,IAAIZ,sBAAsB,CAAEK,IAAK,CAAG,EACpD,CAAC;EAED,OACCgB,aAAA;IAAKC,SAAS,EAAC;EAA+B,GAC7CD,aAAA,CAACxB,IAAI;IAAC0B,OAAO,EAAC,YAAY;IAACC,KAAK,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAM,GACnDJ,aAAA,CAACzB,eAAe;IACf8B,OAAO,EAAGjB,WAAa;IACvBkB,QAAQ,EAAGX,sBAAwB;IACnCY,uBAAuB;IACvBC,EAAE,EAAGT;EAAY,CACjB,CAAC,EACFC,aAAA;IAAOS,OAAO,EAAGV;EAAY,GAC5BC,aAAA,CAACnB,QAAQ;IACRI,IAAI,EAAGD,IAAM;IACb0B,IAAI,EAAGd,WAAa;IACpBe,OAAO,EAAGhB;EAAwB,CAClC,CACK,CACF,CACF,CAAC;AAER;AAEA,eAAeZ,kBAAkB"}

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

@@ -3,7 +3,7 @@ import { createElement } from "react";
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, DropZone, __experimentalSpacer as Spacer, __experimentalText as Text, __experimentalVStack as VStack, FormFileUpload, FlexItem, privateApis as componentsPrivateApis } from '@wordpress/components';
+import { __experimentalSpacer as Spacer, __experimentalText as Text, __experimentalVStack as VStack, Button, DropZone, Notice, FormFileUpload, FlexItem, privateApis as componentsPrivateApis } from '@wordpress/components';
 import { useContext, useState } from '@wordpress/element';
 
 /**
@@ -14,14 +14,13 @@ import { FontLibraryContext } from './context';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
-import TabPanelLayout from './tab-panel-layout';
 import { unlock } from '../../../lock-unlock';
 const {
   ProgressBar
 } = unlock(componentsPrivateApis);
 function UploadFonts() {
   const {
-    installFont,
+    installFonts,
     notice,
     setNotice
   } = useContext(FontLibraryContext);
@@ -39,29 +38,42 @@ function UploadFonts() {
    * @param {Array} files The files to be filtered
    * @return {void}
    */
-  const handleFilesUpload = files => {
+  const handleFilesUpload = async files => {
     setNotice(null);
     setIsUploading(true);
     const uniqueFilenames = new Set();
     const selectedFiles = [...files];
-    const allowedFiles = selectedFiles.filter(file => {
+    let hasInvalidFiles = false;
+
+    // Use map to create a promise for each file check, then filter with Promise.all.
+    const checkFilesPromises = selectedFiles.map(async file => {
+      const isFont = await isFontFile(file);
+      if (!isFont) {
+        hasInvalidFiles = true;
+        return null; // Return null for invalid files.
+      }
+      // Check for duplicates
       if (uniqueFilenames.has(file.name)) {
-        return false; // Discard duplicates
+        return null; // Return null for duplicates.
       }
-      // Eliminates files that are not allowed
+      // Check if the file extension is allowed.
       const fileExtension = file.name.split('.').pop().toLowerCase();
       if (ALLOWED_FILE_EXTENSIONS.includes(fileExtension)) {
         uniqueFilenames.add(file.name);
-        return true; // Keep file if the extension is allowed
+        return file; // Return the file if it passes all checks.
       }
-      return false; // Discard file extension not allowed
+      return null; // Return null for disallowed file extensions.
     });
+
+    // Filter out the nulls after all promises have resolved.
+    const allowedFiles = (await Promise.all(checkFilesPromises)).filter(file => null !== file);
     if (allowedFiles.length > 0) {
       loadFiles(allowedFiles);
     } else {
+      const message = hasInvalidFiles ? __('Sorry, you are not allowed to upload this file type.') : __('No fonts found to install.');
       setNotice({
         type: 'error',
-        message: __('No fonts found to install.')
+        message
       });
       setIsUploading(false);
     }
@@ -82,6 +94,23 @@ function UploadFonts() {
     handleInstall(fontFacesLoaded);
   };
 
+  /**
+   * Checks if a file is a valid Font file.
+   *
+   * @param {File} file The file to be checked.
+   * @return {boolean} Whether the file is a valid font file.
+   */
+  async function isFontFile(file) {
+    const font = new Font('Uploaded Font');
+    try {
+      const buffer = await readFileAsArrayBuffer(file);
+      await font.fromDataBuffer(buffer, 'font');
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+
   // Create a function to read the file as array buffer
   async function readFileAsArrayBuffer(file) {
     return new Promise((resolve, reject) => {
@@ -125,16 +154,8 @@ function UploadFonts() {
    */
   const handleInstall = async fontFaces => {
     const fontFamilies = makeFamiliesFromFaces(fontFaces);
-    if (fontFamilies.length > 1) {
-      setNotice({
-        type: 'error',
-        message: __('Variants from only one font family can be uploaded at a time.')
-      });
-      setIsUploading(false);
-      return;
-    }
     try {
-      await installFont(fontFamilies[0]);
+      await installFonts(fontFamilies);
       setNotice({
         type: 'success',
         message: __('Fonts were installed successfully.')
@@ -142,18 +163,25 @@ function UploadFonts() {
     } catch (error) {
       setNotice({
         type: 'error',
-        message: error.message
+        message: error.message,
+        errors: error?.installationErrors
       });
     }
     setIsUploading(false);
   };
-  return createElement(TabPanelLayout, {
-    notice: notice
+  return createElement("div", {
+    className: "font-library-modal__tabpanel-layout"
   }, createElement(DropZone, {
     onFilesDrop: handleDropZone
   }), createElement(VStack, {
     className: "font-library-modal__local-fonts"
-  }, isUploading && createElement(FlexItem, null, createElement("div", {
+  }, notice && createElement(Notice, {
+    status: notice.type,
+    __unstableHTML: true,
+    onRemove: () => setNotice(null)
+  }, notice.message, notice.errors && createElement("ul", null, notice.errors.map((error, index) => createElement("li", {
+    key: index
+  }, error)))), isUploading && createElement(FlexItem, null, createElement("div", {
     className: "font-library-modal__upload-area"
   }, createElement(ProgressBar, null))), !isUploading && createElement(FormFileUpload, {
     accept: ALLOWED_FILE_EXTENSIONS.map(ext => `.${ext}`).join(','),
@@ -169,7 +197,7 @@ function UploadFonts() {
     margin: 2
   }), createElement(Text, {
     className: "font-library-modal__upload-area__text"
-  }, __('Uploaded fonts appear in your library and can be used in your theme. Supported formats: .tff, .otf, .woff, and .woff2.'))));
+  }, __('Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2.'))));
 }
 export default UploadFonts;
 //# sourceMappingURL=upload-fonts.js.map