@wordpress/edit-site 5.19.2 → 5.20.0

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

@@ -1,9 +1,9 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
 import { useContext, useEffect, useState, useMemo } from '@wordpress/element';
-import { __experimentalSpacer as Spacer, __experimentalInputControl as InputControl, __experimentalText as Text, SelectControl, Spinner, Icon, FlexItem, Flex, Button } from '@wordpress/components';
+import { __experimentalSpacer as Spacer, __experimentalInputControl as InputControl, __experimentalText as Text, SelectControl, Spinner, Icon, FlexItem, Flex, Button, Notice } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { search, closeSmall } from '@wordpress/icons';
@@ -20,6 +20,7 @@ import CollectionFontDetails from './collection-font-details';
 import { toggleFont } from './utils/toggleFont';
 import { getFontsOutline } from './utils/fonts-outline';
 import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
+import { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
 const DEFAULT_CATEGORY = {
   id: 'all',
   name: __('All')
@@ -32,13 +33,15 @@ function FontCollection({
   const getGoogleFontsPermissionFromStorage = () => {
     return window.localStorage.getItem('wp-font-library-default-font-collection-permission') === 'true';
   };
+  const [notice, setNotice] = useState(null);
   const [selectedFont, setSelectedFont] = useState(null);
   const [fontsToInstall, setFontsToInstall] = useState([]);
   const [filters, setFilters] = useState({});
   const [renderConfirmDialog, setRenderConfirmDialog] = useState(requiresPermission && !getGoogleFontsPermissionFromStorage());
   const {
     collections,
-    getFontCollection
+    getFontCollection,
+    installFonts
   } = useContext(FontLibraryContext);
   const selectedCollection = collections.find(collection => collection.id === id);
   useEffect(() => {
@@ -56,6 +59,16 @@ function FontCollection({
   useEffect(() => {
     setSelectedFont(null);
   }, [id]);
+
+  // Reset notice after 5 seconds
+  useEffect(() => {
+    if (notice) {
+      const timeout = setTimeout(() => {
+        setNotice(null);
+      }, 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, [notice]);
   const collectionFonts = useMemo(() => {
     var _selectedCollection$d;
     return (_selectedCollection$d = selectedCollection?.data?.fontFamilies) !== null && _selectedCollection$d !== void 0 ? _selectedCollection$d : [];
@@ -96,17 +109,30 @@ function FontCollection({
   const resetFontsToInstall = () => {
     setFontsToInstall([]);
   };
+  const handleInstall = async () => {
+    const response = await installFonts(fontsToInstall);
+    const installNotice = getNoticeFromInstallResponse(response);
+    setNotice(installNotice);
+    resetFontsToInstall();
+  };
   return createElement(TabLayout, {
     title: !selectedFont ? selectedCollection.name : selectedFont.name,
     description: !selectedFont ? selectedCollection.description : __('Select font variants to install.'),
     handleBack: !!selectedFont && handleUnselectFont,
     footer: fontsToInstall.length > 0 && createElement(Footer, {
-      fontsToInstall: fontsToInstall,
-      resetFontsToInstall: resetFontsToInstall
+      handleInstall: handleInstall
     })
   }, renderConfirmDialog && createElement(Fragment, null, createElement(Spacer, {
     margin: 8
-  }), createElement(GoogleFontsConfirmDialog, null)), !renderConfirmDialog && !selectedCollection.data && createElement(Spinner, null), !renderConfirmDialog && !selectedFont && createElement(Flex, null, createElement(FlexItem, null, createElement(InputControl, {
+  }), createElement(GoogleFontsConfirmDialog, null)), !renderConfirmDialog && !selectedCollection.data && createElement(Spinner, null), notice && createElement(Fragment, null, createElement(FlexItem, null, createElement(Spacer, {
+    margin: 2
+  }), createElement(Notice, {
+    isDismissible: false,
+    status: notice.type,
+    className: "font-library-modal__font-collection__notice"
+  }, notice.message)), createElement(Spacer, {
+    margin: 2
+  })), !renderConfirmDialog && !selectedFont && createElement(Flex, null, createElement(FlexItem, null, createElement(InputControl, {
     value: filters.search,
     placeholder: __('Font name…'),
     label: __('Search'),
@@ -140,17 +166,11 @@ function FontCollection({
   }))));
 }
 function Footer({
-  fontsToInstall,
-  resetFontsToInstall
+  handleInstall
 }) {
   const {
-    installFonts,
     isInstalling
   } = useContext(FontLibraryContext);
-  const handleInstall = async () => {
-    await installFonts(fontsToInstall);
-    resetFontsToInstall();
-  };
   return createElement(Flex, {
     justify: "flex-end"
   }, createElement(Button, {

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

@@ -1 +1 @@
-{"version":3,"names":["useContext","useEffect","useState","useMemo","__experimentalSpacer","Spacer","__experimentalInputControl","InputControl","__experimentalText","Text","SelectControl","Spinner","Icon","FlexItem","Flex","Button","debounce","__","search","closeSmall","TabLayout","FontLibraryContext","FontsGrid","FontCard","filterFonts","CollectionFontDetails","toggleFont","getFontsOutline","GoogleFontsConfirmDialog","DEFAULT_CATEGORY","id","name","FontCollection","_selectedCollection$d2","requiresPermission","getGoogleFontsPermissionFromStorage","window","localStorage","getItem","selectedFont","setSelectedFont","fontsToInstall","setFontsToInstall","filters","setFilters","renderConfirmDialog","setRenderConfirmDialog","collections","getFontCollection","selectedCollection","find","collection","handleStorage","addEventListener","removeEventListener","resetFilters","collectionFonts","_selectedCollection$d","data","fontFamilies","collectionCategories","categories","fonts","handleCategoryFilter","category","handleUpdateSearchInput","value","debouncedUpdateSearchInput","resetSearch","handleUnselectFont","handleToggleVariant","font","face","newFontsToInstall","fontToInstallOutline","resetFontsToInstall","createElement","title","description","handleBack","footer","length","Footer","Fragment","margin","placeholder","label","onChange","prefix","icon","suffix","onClick","map","key","slug","installFonts","isInstalling","handleInstall","justify","variant","isBusy","disabled"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-collection.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useState, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalInputControl as InputControl,\n\t__experimentalText as Text,\n\tSelectControl,\n\tSpinner,\n\tIcon,\n\tFlexItem,\n\tFlex,\n\tButton,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { search, closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport TabLayout from './tab-layout';\nimport { FontLibraryContext } from './context';\nimport FontsGrid from './fonts-grid';\nimport FontCard from './font-card';\nimport filterFonts from './utils/filter-fonts';\nimport CollectionFontDetails from './collection-font-details';\nimport { toggleFont } from './utils/toggleFont';\nimport { getFontsOutline } from './utils/fonts-outline';\nimport GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';\n\nconst DEFAULT_CATEGORY = {\n\tid: 'all',\n\tname: __( 'All' ),\n};\nfunction FontCollection( { id } ) {\n\tconst requiresPermission = id === 'default-font-collection';\n\n\tconst getGoogleFontsPermissionFromStorage = () => {\n\t\treturn (\n\t\t\twindow.localStorage.getItem(\n\t\t\t\t'wp-font-library-default-font-collection-permission'\n\t\t\t) === 'true'\n\t\t);\n\t};\n\n\tconst [ selectedFont, setSelectedFont ] = useState( null );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState( [] );\n\tconst [ filters, setFilters ] = useState( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { collections, getFontCollection } = useContext( FontLibraryContext );\n\tconst selectedCollection = collections.find(\n\t\t( collection ) => collection.id === id\n\t);\n\n\tuseEffect( () => {\n\t\tconst handleStorage = () => {\n\t\t\tsetRenderConfirmDialog(\n\t\t\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t\t\t);\n\t\t};\n\t\thandleStorage();\n\t\twindow.addEventListener( 'storage', handleStorage );\n\t\treturn () => window.removeEventListener( 'storage', handleStorage );\n\t}, [ id, requiresPermission ] );\n\n\tuseEffect( () => {\n\t\tgetFontCollection( id );\n\t\tresetFilters();\n\t}, [ id, getFontCollection ] );\n\n\tuseEffect( () => {\n\t\tsetSelectedFont( null );\n\t}, [ id ] );\n\n\tconst collectionFonts = useMemo(\n\t\t() => selectedCollection?.data?.fontFamilies ?? [],\n\t\t[ selectedCollection ]\n\t);\n\tconst collectionCategories = selectedCollection?.data?.categories ?? [];\n\n\tconst categories = [ DEFAULT_CATEGORY, ...collectionCategories ];\n\n\tconst fonts = useMemo(\n\t\t() => filterFonts( collectionFonts, filters ),\n\t\t[ collectionFonts, filters ]\n\t);\n\n\tconst handleCategoryFilter = ( category ) => {\n\t\tsetFilters( { ...filters, category } );\n\t};\n\n\tconst handleUpdateSearchInput = ( value ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t};\n\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst resetFilters = () => {\n\t\tsetFilters( {} );\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetFilters( { ...filters, search: '' } );\n\t};\n\n\tconst handleUnselectFont = () => {\n\t\tsetSelectedFont( null );\n\t};\n\n\tconst handleToggleVariant = ( font, face ) => {\n\t\tconst newFontsToInstall = toggleFont( font, face, fontsToInstall );\n\t\tsetFontsToInstall( newFontsToInstall );\n\t};\n\n\tconst fontToInstallOutline = getFontsOutline( fontsToInstall );\n\n\tconst resetFontsToInstall = () => {\n\t\tsetFontsToInstall( [] );\n\t};\n\n\treturn (\n\t\t<TabLayout\n\t\t\ttitle={\n\t\t\t\t! selectedFont ? selectedCollection.name : selectedFont.name\n\t\t\t}\n\t\t\tdescription={\n\t\t\t\t! selectedFont\n\t\t\t\t\t? selectedCollection.description\n\t\t\t\t\t: __( 'Select font variants to install.' )\n\t\t\t}\n\t\t\thandleBack={ !! selectedFont && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\tfontsToInstall.length > 0 && (\n\t\t\t\t\t<Footer\n\t\t\t\t\t\tfontsToInstall={ fontsToInstall }\n\t\t\t\t\t\tresetFontsToInstall={ resetFontsToInstall }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t{ renderConfirmDialog && (\n\t\t\t\t<>\n\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t<GoogleFontsConfirmDialog />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedCollection.data && (\n\t\t\t\t<Spinner />\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedFont && (\n\t\t\t\t<Flex>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\tplaceholder={ __( 'Font name…' ) }\n\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\tprefix={ <Icon icon={ search } /> }\n\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\tfilters?.search ? (\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\t\tonClick={ resetSearch }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tvalue={ category.id }\n\t\t\t\t\t\t\t\t\t\tkey={ category.id }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ category.name }\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t) }\n\n\t\t\t<Spacer margin={ 4 } />\n\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t! selectedCollection?.data?.fontFamilies && <Spinner /> }\n\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t!! selectedCollection?.data?.fontFamilies?.length &&\n\t\t\t\t! fonts.length && (\n\t\t\t\t\t<Text>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'No fonts found. Try with a different seach term'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && selectedFont && (\n\t\t\t\t<CollectionFontDetails\n\t\t\t\t\tfont={ selectedFont }\n\t\t\t\t\thandleToggleVariant={ handleToggleVariant }\n\t\t\t\t\tfontToInstallOutline={ fontToInstallOutline }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedFont && (\n\t\t\t\t<FontsGrid>\n\t\t\t\t\t{ fonts.map( ( font ) => (\n\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetSelectedFont( font );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</FontsGrid>\n\t\t\t) }\n\t\t</TabLayout>\n\t);\n}\n\nfunction Footer( { fontsToInstall, resetFontsToInstall } ) {\n\tconst { installFonts, isInstalling } = useContext( FontLibraryContext );\n\n\tconst handleInstall = async () => {\n\t\tawait installFonts( fontsToInstall );\n\t\tresetFontsToInstall();\n\t};\n\n\treturn (\n\t\t<Flex justify=\"flex-end\">\n\t\t\t<Button\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ handleInstall }\n\t\t\t\tisBusy={ isInstalling }\n\t\t\t\tdisabled={ isInstalling }\n\t\t\t>\n\t\t\t\t{ __( 'Install' ) }\n\t\t\t</Button>\n\t\t</Flex>\n\t);\n}\n\nexport default FontCollection;\n"],"mappings":"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"}
+{"version":3,"names":["useContext","useEffect","useState","useMemo","__experimentalSpacer","Spacer","__experimentalInputControl","InputControl","__experimentalText","Text","SelectControl","Spinner","Icon","FlexItem","Flex","Button","Notice","debounce","__","search","closeSmall","TabLayout","FontLibraryContext","FontsGrid","FontCard","filterFonts","CollectionFontDetails","toggleFont","getFontsOutline","GoogleFontsConfirmDialog","getNoticeFromInstallResponse","DEFAULT_CATEGORY","id","name","FontCollection","_selectedCollection$d2","requiresPermission","getGoogleFontsPermissionFromStorage","window","localStorage","getItem","notice","setNotice","selectedFont","setSelectedFont","fontsToInstall","setFontsToInstall","filters","setFilters","renderConfirmDialog","setRenderConfirmDialog","collections","getFontCollection","installFonts","selectedCollection","find","collection","handleStorage","addEventListener","removeEventListener","resetFilters","timeout","setTimeout","clearTimeout","collectionFonts","_selectedCollection$d","data","fontFamilies","collectionCategories","categories","fonts","handleCategoryFilter","category","handleUpdateSearchInput","value","debouncedUpdateSearchInput","resetSearch","handleUnselectFont","handleToggleVariant","font","face","newFontsToInstall","fontToInstallOutline","resetFontsToInstall","handleInstall","response","installNotice","createElement","title","description","handleBack","footer","length","Footer","Fragment","margin","isDismissible","status","type","className","message","placeholder","label","onChange","prefix","icon","suffix","onClick","map","key","slug","isInstalling","justify","variant","isBusy","disabled"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-collection.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useState, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalInputControl as InputControl,\n\t__experimentalText as Text,\n\tSelectControl,\n\tSpinner,\n\tIcon,\n\tFlexItem,\n\tFlex,\n\tButton,\n\tNotice,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { search, closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport TabLayout from './tab-layout';\nimport { FontLibraryContext } from './context';\nimport FontsGrid from './fonts-grid';\nimport FontCard from './font-card';\nimport filterFonts from './utils/filter-fonts';\nimport CollectionFontDetails from './collection-font-details';\nimport { toggleFont } from './utils/toggleFont';\nimport { getFontsOutline } from './utils/fonts-outline';\nimport GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';\nimport { getNoticeFromInstallResponse } from './utils/get-notice-from-response';\n\nconst DEFAULT_CATEGORY = {\n\tid: 'all',\n\tname: __( 'All' ),\n};\nfunction FontCollection( { id } ) {\n\tconst requiresPermission = id === 'default-font-collection';\n\n\tconst getGoogleFontsPermissionFromStorage = () => {\n\t\treturn (\n\t\t\twindow.localStorage.getItem(\n\t\t\t\t'wp-font-library-default-font-collection-permission'\n\t\t\t) === 'true'\n\t\t);\n\t};\n\n\tconst [ notice, setNotice ] = useState( null );\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, installFonts } =\n\t\tuseContext( FontLibraryContext );\n\tconst selectedCollection = collections.find(\n\t\t( collection ) => collection.id === id\n\t);\n\n\tuseEffect( () => {\n\t\tconst handleStorage = () => {\n\t\t\tsetRenderConfirmDialog(\n\t\t\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t\t\t);\n\t\t};\n\t\thandleStorage();\n\t\twindow.addEventListener( 'storage', handleStorage );\n\t\treturn () => window.removeEventListener( 'storage', handleStorage );\n\t}, [ id, requiresPermission ] );\n\n\tuseEffect( () => {\n\t\tgetFontCollection( id );\n\t\tresetFilters();\n\t}, [ id, getFontCollection ] );\n\n\tuseEffect( () => {\n\t\tsetSelectedFont( null );\n\t}, [ id ] );\n\n\t// Reset notice after 5 seconds\n\tuseEffect( () => {\n\t\tif ( notice ) {\n\t\t\tconst timeout = setTimeout( () => {\n\t\t\t\tsetNotice( null );\n\t\t\t}, 5000 );\n\t\t\treturn () => clearTimeout( timeout );\n\t\t}\n\t}, [ notice ] );\n\n\tconst collectionFonts = useMemo(\n\t\t() => selectedCollection?.data?.fontFamilies ?? [],\n\t\t[ selectedCollection ]\n\t);\n\tconst collectionCategories = selectedCollection?.data?.categories ?? [];\n\n\tconst categories = [ DEFAULT_CATEGORY, ...collectionCategories ];\n\n\tconst fonts = useMemo(\n\t\t() => filterFonts( collectionFonts, filters ),\n\t\t[ collectionFonts, filters ]\n\t);\n\n\tconst handleCategoryFilter = ( category ) => {\n\t\tsetFilters( { ...filters, category } );\n\t};\n\n\tconst handleUpdateSearchInput = ( value ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t};\n\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst resetFilters = () => {\n\t\tsetFilters( {} );\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetFilters( { ...filters, search: '' } );\n\t};\n\n\tconst handleUnselectFont = () => {\n\t\tsetSelectedFont( null );\n\t};\n\n\tconst handleToggleVariant = ( font, face ) => {\n\t\tconst newFontsToInstall = toggleFont( font, face, fontsToInstall );\n\t\tsetFontsToInstall( newFontsToInstall );\n\t};\n\n\tconst fontToInstallOutline = getFontsOutline( fontsToInstall );\n\n\tconst resetFontsToInstall = () => {\n\t\tsetFontsToInstall( [] );\n\t};\n\n\tconst handleInstall = async () => {\n\t\tconst response = await installFonts( fontsToInstall );\n\t\tconst installNotice = getNoticeFromInstallResponse( response );\n\t\tsetNotice( installNotice );\n\t\tresetFontsToInstall();\n\t};\n\n\treturn (\n\t\t<TabLayout\n\t\t\ttitle={\n\t\t\t\t! selectedFont ? selectedCollection.name : selectedFont.name\n\t\t\t}\n\t\t\tdescription={\n\t\t\t\t! selectedFont\n\t\t\t\t\t? selectedCollection.description\n\t\t\t\t\t: __( 'Select font variants to install.' )\n\t\t\t}\n\t\t\thandleBack={ !! selectedFont && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\tfontsToInstall.length > 0 && (\n\t\t\t\t\t<Footer handleInstall={ handleInstall } />\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t{ renderConfirmDialog && (\n\t\t\t\t<>\n\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t<GoogleFontsConfirmDialog />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedCollection.data && (\n\t\t\t\t<Spinner />\n\t\t\t) }\n\n\t\t\t{ notice && (\n\t\t\t\t<>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\tclassName=\"font-library-modal__font-collection__notice\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t</Notice>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<Spacer margin={ 2 } />\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.id }\n\t\t\t\t\t\t\t\t\t\tkey={ category.id }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ category.name }\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t) }\n\n\t\t\t<Spacer margin={ 4 } />\n\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t! selectedCollection?.data?.fontFamilies && <Spinner /> }\n\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t!! selectedCollection?.data?.fontFamilies?.length &&\n\t\t\t\t! fonts.length && (\n\t\t\t\t\t<Text>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'No fonts found. Try with a different seach term'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && selectedFont && (\n\t\t\t\t<CollectionFontDetails\n\t\t\t\t\tfont={ selectedFont }\n\t\t\t\t\thandleToggleVariant={ handleToggleVariant }\n\t\t\t\t\tfontToInstallOutline={ fontToInstallOutline }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedFont && (\n\t\t\t\t<FontsGrid>\n\t\t\t\t\t{ fonts.map( ( font ) => (\n\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetSelectedFont( font );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</FontsGrid>\n\t\t\t) }\n\t\t</TabLayout>\n\t);\n}\n\nfunction Footer( { handleInstall } ) {\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={ isInstalling }\n\t\t\t>\n\t\t\t\t{ __( 'Install' ) }\n\t\t\t</Button>\n\t\t</Flex>\n\t);\n}\n\nexport default FontCollection;\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -11,12 +11,17 @@ import { useContext } from '@wordpress/element';
  */
 import InstalledFonts from './installed-fonts';
 import FontCollection from './font-collection';
+import UploadFonts from './upload-fonts';
 import { FontLibraryContext } from './context';
-const INSTALLED_FONTS_TAB = {
+const DEFAULT_TABS = [{
   name: 'installed-fonts',
   title: __('Library'),
   className: 'installed-fonts'
-};
+}, {
+  name: 'upload-fonts',
+  title: __('Upload'),
+  className: 'upload-fonts'
+}];
 const tabsFromCollections = collections => collections.map(({
   id,
   name
@@ -32,7 +37,7 @@ function FontLibraryModal({
   const {
     collections
   } = useContext(FontLibraryContext);
-  const tabs = [INSTALLED_FONTS_TAB, ...tabsFromCollections(collections || [])];
+  const tabs = [...DEFAULT_TABS, ...tabsFromCollections(collections || [])];
   return createElement(Modal, {
     title: __('Fonts'),
     onRequestClose: onRequestClose,
@@ -44,6 +49,8 @@ function FontLibraryModal({
     tabs: tabs
   }, tab => {
     switch (tab.name) {
+      case 'upload-fonts':
+        return createElement(UploadFonts, null);
       case 'installed-fonts':
         return createElement(InstalledFonts, null);
       default:

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

@@ -1 +1 @@
-{"version":3,"names":["__","Modal","TabPanel","useContext","InstalledFonts","FontCollection","FontLibraryContext","INSTALLED_FONTS_TAB","name","title","className","tabsFromCollections","collections","map","id","length","FontLibraryModal","onRequestClose","initialTabName","tabs","createElement","isFullScreen","tab"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Modal, TabPanel } from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InstalledFonts from './installed-fonts';\nimport FontCollection from './font-collection';\nimport { FontLibraryContext } from './context';\n\nconst INSTALLED_FONTS_TAB = {\n\tname: 'installed-fonts',\n\ttitle: __( 'Library' ),\n\tclassName: 'installed-fonts',\n};\n\nconst tabsFromCollections = ( collections ) =>\n\tcollections.map( ( { id, name } ) => ( {\n\t\tname: id,\n\t\ttitle:\n\t\t\tcollections.length === 1 && id === 'default-font-collection'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t\tclassName: 'collection',\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tinitialTabName = 'installed-fonts',\n} ) {\n\tconst { collections } = useContext( FontLibraryContext );\n\n\tconst tabs = [\n\t\tINSTALLED_FONTS_TAB,\n\t\t...tabsFromCollections( collections || [] ),\n\t];\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Fonts' ) }\n\t\t\tonRequestClose={ onRequestClose }\n\t\t\tisFullScreen\n\t\t\tclassName=\"font-library-modal\"\n\t\t>\n\t\t\t<TabPanel\n\t\t\t\tclassName=\"font-library-modal__tab-panel\"\n\t\t\t\tinitialTabName={ initialTabName }\n\t\t\t\ttabs={ tabs }\n\t\t\t>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tswitch ( tab.name ) {\n\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\t\treturn <InstalledFonts />;\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\treturn <FontCollection id={ tab.name } />;\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,KAAK,EAAEC,QAAQ,QAAQ,uBAAuB;AACvD,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,SAASC,kBAAkB,QAAQ,WAAW;AAE9C,MAAMC,mBAAmB,GAAG;EAC3BC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAET,EAAE,CAAE,SAAU,CAAC;EACtBU,SAAS,EAAE;AACZ,CAAC;AAED,MAAMC,mBAAmB,GAAKC,WAAW,IACxCA,WAAW,CAACC,GAAG,CAAE,CAAE;EAAEC,EAAE;EAAEN;AAAK,CAAC,MAAQ;EACtCA,IAAI,EAAEM,EAAE;EACRL,KAAK,EACJG,WAAW,CAACG,MAAM,KAAK,CAAC,IAAID,EAAE,KAAK,yBAAyB,GACzDd,EAAE,CAAE,eAAgB,CAAC,GACrBQ,IAAI;EACRE,SAAS,EAAE;AACZ,CAAC,CAAG,CAAC;AAEN,SAASM,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,cAAc,GAAG;AAClB,CAAC,EAAG;EACH,MAAM;IAAEN;EAAY,CAAC,GAAGT,UAAU,CAAEG,kBAAmB,CAAC;EAExD,MAAMa,IAAI,GAAG,CACZZ,mBAAmB,EACnB,GAAGI,mBAAmB,CAAEC,WAAW,IAAI,EAAG,CAAC,CAC3C;EAED,OACCQ,aAAA,CAACnB,KAAK;IACLQ,KAAK,EAAGT,EAAE,CAAE,OAAQ,CAAG;IACvBiB,cAAc,EAAGA,cAAgB;IACjCI,YAAY;IACZX,SAAS,EAAC;EAAoB,GAE9BU,aAAA,CAAClB,QAAQ;IACRQ,SAAS,EAAC,+BAA+B;IACzCQ,cAAc,EAAGA,cAAgB;IACjCC,IAAI,EAAGA;EAAM,GAETG,GAAG,IAAM;IACZ,QAASA,GAAG,CAACd,IAAI;MAChB,KAAK,iBAAiB;QACrB,OAAOY,aAAA,CAAChB,cAAc,MAAE,CAAC;MAC1B;QACC,OAAOgB,aAAA,CAACf,cAAc;UAACS,EAAE,EAAGQ,GAAG,CAACd;QAAM,CAAE,CAAC;IAC3C;EACD,CACS,CACJ,CAAC;AAEV;AAEA,eAAeQ,gBAAgB"}
+{"version":3,"names":["__","Modal","TabPanel","useContext","InstalledFonts","FontCollection","UploadFonts","FontLibraryContext","DEFAULT_TABS","name","title","className","tabsFromCollections","collections","map","id","length","FontLibraryModal","onRequestClose","initialTabName","tabs","createElement","isFullScreen","tab"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Modal, TabPanel } from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InstalledFonts from './installed-fonts';\nimport FontCollection from './font-collection';\nimport UploadFonts from './upload-fonts';\nimport { FontLibraryContext } from './context';\n\nconst DEFAULT_TABS = [\n\t{\n\t\tname: 'installed-fonts',\n\t\ttitle: __( 'Library' ),\n\t\tclassName: 'installed-fonts',\n\t},\n\t{\n\t\tname: 'upload-fonts',\n\t\ttitle: __( 'Upload' ),\n\t\tclassName: 'upload-fonts',\n\t},\n];\n\nconst tabsFromCollections = ( collections ) =>\n\tcollections.map( ( { id, name } ) => ( {\n\t\tname: id,\n\t\ttitle:\n\t\t\tcollections.length === 1 && id === 'default-font-collection'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t\tclassName: 'collection',\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tinitialTabName = 'installed-fonts',\n} ) {\n\tconst { collections } = useContext( FontLibraryContext );\n\n\tconst tabs = [\n\t\t...DEFAULT_TABS,\n\t\t...tabsFromCollections( collections || [] ),\n\t];\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Fonts' ) }\n\t\t\tonRequestClose={ onRequestClose }\n\t\t\tisFullScreen\n\t\t\tclassName=\"font-library-modal\"\n\t\t>\n\t\t\t<TabPanel\n\t\t\t\tclassName=\"font-library-modal__tab-panel\"\n\t\t\t\tinitialTabName={ initialTabName }\n\t\t\t\ttabs={ tabs }\n\t\t\t>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tswitch ( tab.name ) {\n\t\t\t\t\t\tcase 'upload-fonts':\n\t\t\t\t\t\t\treturn <UploadFonts />;\n\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\t\treturn <InstalledFonts />;\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\treturn <FontCollection id={ tab.name } />;\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,KAAK,EAAEC,QAAQ,QAAQ,uBAAuB;AACvD,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,SAASC,kBAAkB,QAAQ,WAAW;AAE9C,MAAMC,YAAY,GAAG,CACpB;EACCC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAEV,EAAE,CAAE,SAAU,CAAC;EACtBW,SAAS,EAAE;AACZ,CAAC,EACD;EACCF,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAEV,EAAE,CAAE,QAAS,CAAC;EACrBW,SAAS,EAAE;AACZ,CAAC,CACD;AAED,MAAMC,mBAAmB,GAAKC,WAAW,IACxCA,WAAW,CAACC,GAAG,CAAE,CAAE;EAAEC,EAAE;EAAEN;AAAK,CAAC,MAAQ;EACtCA,IAAI,EAAEM,EAAE;EACRL,KAAK,EACJG,WAAW,CAACG,MAAM,KAAK,CAAC,IAAID,EAAE,KAAK,yBAAyB,GACzDf,EAAE,CAAE,eAAgB,CAAC,GACrBS,IAAI;EACRE,SAAS,EAAE;AACZ,CAAC,CAAG,CAAC;AAEN,SAASM,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,cAAc,GAAG;AAClB,CAAC,EAAG;EACH,MAAM;IAAEN;EAAY,CAAC,GAAGV,UAAU,CAAEI,kBAAmB,CAAC;EAExD,MAAMa,IAAI,GAAG,CACZ,GAAGZ,YAAY,EACf,GAAGI,mBAAmB,CAAEC,WAAW,IAAI,EAAG,CAAC,CAC3C;EAED,OACCQ,aAAA,CAACpB,KAAK;IACLS,KAAK,EAAGV,EAAE,CAAE,OAAQ,CAAG;IACvBkB,cAAc,EAAGA,cAAgB;IACjCI,YAAY;IACZX,SAAS,EAAC;EAAoB,GAE9BU,aAAA,CAACnB,QAAQ;IACRS,SAAS,EAAC,+BAA+B;IACzCQ,cAAc,EAAGA,cAAgB;IACjCC,IAAI,EAAGA;EAAM,GAETG,GAAG,IAAM;IACZ,QAASA,GAAG,CAACd,IAAI;MAChB,KAAK,cAAc;QAClB,OAAOY,aAAA,CAACf,WAAW,MAAE,CAAC;MACvB,KAAK,iBAAiB;QACrB,OAAOe,aAAA,CAACjB,cAAc,MAAE,CAAC;MAC1B;QACC,OAAOiB,aAAA,CAAChB,cAAc;UAACU,EAAE,EAAGQ,GAAG,CAACd;QAAM,CAAE,CAAC;IAC3C;EACD,CACS,CACJ,CAAC;AAEV;AAEA,eAAeQ,gBAAgB"}

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

@@ -1,10 +1,10 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { useContext, useEffect, useState } from '@wordpress/element';
-import { privateApis as componentsPrivateApis, __experimentalHStack as HStack, __experimentalSpacer as Spacer, Button, Spinner } from '@wordpress/components';
+import { privateApis as componentsPrivateApis, __experimentalHStack as HStack, __experimentalSpacer as Spacer, Button, Spinner, Notice, FlexItem } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,8 +14,8 @@ import { FontLibraryContext } from './context';
 import FontsGrid from './fonts-grid';
 import LibraryFontDetails from './library-font-details';
 import LibraryFontCard from './library-font-card';
-import LocalFonts from './local-fonts';
 import ConfirmDeleteDialog from './confirm-delete-dialog';
+import { getNoticeFromUninstallResponse } from './utils/get-notice-from-response';
 import { unlock } from '../../../lock-unlock';
 const {
   ProgressBar
@@ -37,10 +37,13 @@ function InstalledFonts() {
   const handleSelectFont = font => {
     handleSetLibraryFontSelected(font);
   };
+  const [notice, setNotice] = useState(null);
   const handleConfirmUninstall = async () => {
-    const result = await uninstallFont(libraryFontSelected);
+    const response = await uninstallFont(libraryFontSelected);
+    const uninstallNotice = getNoticeFromUninstallResponse(response);
+    setNotice(uninstallNotice);
     // If the font was succesfully uninstalled it is unselected
-    if (result) {
+    if (!response?.errors?.length) {
       handleUnselectFont();
     }
     setIsConfirmDeleteOpen(false);
@@ -55,7 +58,18 @@ function InstalledFonts() {
   const shouldDisplayDeleteButton = !!libraryFontSelected && libraryFontSelected?.source !== 'theme';
   useEffect(() => {
     refreshLibrary();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
+  // Reset notice after 5 seconds
+  useEffect(() => {
+    if (notice) {
+      const timeout = setTimeout(() => {
+        setNotice(null);
+      }, 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, [notice]);
   return createElement(TabLayout, {
     title: libraryFontSelected?.name || '',
     description: tabDescription,
@@ -69,7 +83,15 @@ function InstalledFonts() {
     isConfirmDeleteOpen: isConfirmDeleteOpen,
     handleConfirmUninstall: handleConfirmUninstall,
     handleCancelUninstall: handleCancelUninstall
-  }), !libraryFontSelected && createElement(Fragment, null, isResolvingLibrary && createElement(Spinner, null), baseCustomFonts.length > 0 && createElement(Fragment, null, createElement(Spacer, {
+  }), notice && createElement(Fragment, null, createElement(FlexItem, null, createElement(Spacer, {
+    margin: 2
+  }), createElement(Notice, {
+    isDismissible: false,
+    status: notice.type,
+    className: "font-library-modal__font-collection__notice"
+  }, notice.message)), createElement(Spacer, {
+    margin: 4
+  })), !libraryFontSelected && createElement(Fragment, null, isResolvingLibrary && createElement(Spinner, null), baseCustomFonts.length > 0 && createElement(Fragment, null, createElement(Spacer, {
     margin: 2
   }), createElement(FontsGrid, null, baseCustomFonts.map(font => createElement(LibraryFontCard, {
     font: font,
@@ -87,9 +109,7 @@ function InstalledFonts() {
     onClick: () => {
       handleSelectFont(font);
     }
-  })))), createElement(Spacer, {
-    margin: 8
-  }), createElement(LocalFonts, null)), libraryFontSelected && createElement(LibraryFontDetails, {
+  }))))), libraryFontSelected && createElement(LibraryFontDetails, {
     font: libraryFontSelected,
     isConfirmDeleteOpen: isConfirmDeleteOpen,
     handleConfirmUninstall: handleConfirmUninstall,

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

@@ -1 +1 @@
-{"version":3,"names":["__","useContext","useEffect","useState","privateApis","componentsPrivateApis","__experimentalHStack","HStack","__experimentalSpacer","Spacer","Button","Spinner","TabLayout","FontLibraryContext","FontsGrid","LibraryFontDetails","LibraryFontCard","LocalFonts","ConfirmDeleteDialog","unlock","ProgressBar","InstalledFonts","baseCustomFonts","libraryFontSelected","baseThemeFonts","handleSetLibraryFontSelected","refreshLibrary","uninstallFont","isResolvingLibrary","isConfirmDeleteOpen","setIsConfirmDeleteOpen","handleUnselectFont","handleSelectFont","font","handleConfirmUninstall","result","handleUninstallClick","handleCancelUninstall","tabDescription","shouldDisplayDeleteButton","source","createElement","title","name","description","handleBack","footer","Footer","Fragment","length","margin","map","key","slug","onClick","saveFontFamilies","fontFamiliesHasChanges","isInstalling","justify","variant","disabled"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport {\n\tprivateApis as componentsPrivateApis,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tSpinner,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TabLayout from './tab-layout';\nimport { FontLibraryContext } from './context';\nimport FontsGrid from './fonts-grid';\nimport LibraryFontDetails from './library-font-details';\nimport LibraryFontCard from './library-font-card';\nimport LocalFonts from './local-fonts';\nimport ConfirmDeleteDialog from './confirm-delete-dialog';\nimport { unlock } from '../../../lock-unlock';\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\tbaseThemeFonts,\n\t\thandleSetLibraryFontSelected,\n\t\trefreshLibrary,\n\t\tuninstallFont,\n\t\tisResolvingLibrary,\n\t} = useContext( FontLibraryContext );\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );\n\n\tconst handleUnselectFont = () => {\n\t\thandleSetLibraryFontSelected( null );\n\t};\n\n\tconst handleSelectFont = ( font ) => {\n\t\thandleSetLibraryFontSelected( font );\n\t};\n\n\tconst handleConfirmUninstall = async () => {\n\t\tconst result = await uninstallFont( libraryFontSelected );\n\t\t// If the font was succesfully uninstalled it is unselected\n\t\tif ( result ) {\n\t\t\thandleUnselectFont();\n\t\t}\n\t\tsetIsConfirmDeleteOpen( false );\n\t};\n\n\tconst handleUninstallClick = async () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst handleCancelUninstall = () => {\n\t\tsetIsConfirmDeleteOpen( false );\n\t};\n\n\tconst tabDescription = !! libraryFontSelected\n\t\t? __(\n\t\t\t\t'Choose font variants. Keep in mind that too many variants could make your site slower.'\n\t\t  )\n\t\t: null;\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected && libraryFontSelected?.source !== 'theme';\n\n\tuseEffect( () => {\n\t\trefreshLibrary();\n\t}, [] );\n\n\treturn (\n\t\t<TabLayout\n\t\t\ttitle={ libraryFontSelected?.name || '' }\n\t\t\tdescription={ tabDescription }\n\t\t\thandleBack={ !! libraryFontSelected && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\t<Footer\n\t\t\t\t\tshouldDisplayDeleteButton={ shouldDisplayDeleteButton }\n\t\t\t\t\thandleUninstallClick={ handleUninstallClick }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<ConfirmDeleteDialog\n\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t/>\n\n\t\t\t{ ! libraryFontSelected && (\n\t\t\t\t<>\n\t\t\t\t\t{ isResolvingLibrary && <Spinner /> }\n\t\t\t\t\t{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t<FontsGrid>\n\t\t\t\t\t\t\t\t{ baseCustomFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</FontsGrid>\n\t\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ baseThemeFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<FontsGrid title={ __( 'Theme Fonts' ) }>\n\t\t\t\t\t\t\t\t{ baseThemeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</FontsGrid>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t<LocalFonts />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ libraryFontSelected && (\n\t\t\t\t<LibraryFontDetails\n\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</TabLayout>\n\t);\n}\n\nfunction Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {\n\tconst { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =\n\t\tuseContext( FontLibraryContext );\n\treturn (\n\t\t<HStack justify=\"space-between\">\n\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t<div>\n\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t<Button variant=\"tertiary\" onClick={ handleUninstallClick }>\n\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ saveFontFamilies }\n\t\t\t>\n\t\t\t\t{ __( 'Update' ) }\n\t\t\t</Button>\n\t\t</HStack>\n\t);\n}\n\nexport default InstalledFonts;\n"],"mappings":"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"}
+{"version":3,"names":["__","useContext","useEffect","useState","privateApis","componentsPrivateApis","__experimentalHStack","HStack","__experimentalSpacer","Spacer","Button","Spinner","Notice","FlexItem","TabLayout","FontLibraryContext","FontsGrid","LibraryFontDetails","LibraryFontCard","ConfirmDeleteDialog","getNoticeFromUninstallResponse","unlock","ProgressBar","InstalledFonts","baseCustomFonts","libraryFontSelected","baseThemeFonts","handleSetLibraryFontSelected","refreshLibrary","uninstallFont","isResolvingLibrary","isConfirmDeleteOpen","setIsConfirmDeleteOpen","handleUnselectFont","handleSelectFont","font","notice","setNotice","handleConfirmUninstall","response","uninstallNotice","errors","length","handleUninstallClick","handleCancelUninstall","tabDescription","shouldDisplayDeleteButton","source","timeout","setTimeout","clearTimeout","createElement","title","name","description","handleBack","footer","Footer","Fragment","margin","isDismissible","status","type","className","message","map","key","slug","onClick","saveFontFamilies","fontFamiliesHasChanges","isInstalling","justify","variant","disabled"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport {\n\tprivateApis as componentsPrivateApis,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tSpinner,\n\tNotice,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TabLayout from './tab-layout';\nimport { FontLibraryContext } from './context';\nimport FontsGrid from './fonts-grid';\nimport LibraryFontDetails from './library-font-details';\nimport LibraryFontCard from './library-font-card';\nimport ConfirmDeleteDialog from './confirm-delete-dialog';\nimport { getNoticeFromUninstallResponse } from './utils/get-notice-from-response';\nimport { unlock } from '../../../lock-unlock';\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\tbaseThemeFonts,\n\t\thandleSetLibraryFontSelected,\n\t\trefreshLibrary,\n\t\tuninstallFont,\n\t\tisResolvingLibrary,\n\t} = useContext( FontLibraryContext );\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );\n\n\tconst handleUnselectFont = () => {\n\t\thandleSetLibraryFontSelected( null );\n\t};\n\n\tconst handleSelectFont = ( font ) => {\n\t\thandleSetLibraryFontSelected( font );\n\t};\n\n\tconst [ notice, setNotice ] = useState( null );\n\n\tconst handleConfirmUninstall = async () => {\n\t\tconst response = await uninstallFont( libraryFontSelected );\n\t\tconst uninstallNotice = getNoticeFromUninstallResponse( response );\n\t\tsetNotice( uninstallNotice );\n\t\t// If the font was succesfully uninstalled it is unselected\n\t\tif ( ! response?.errors?.length ) {\n\t\t\thandleUnselectFont();\n\t\t}\n\t\tsetIsConfirmDeleteOpen( false );\n\t};\n\n\tconst handleUninstallClick = async () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst handleCancelUninstall = () => {\n\t\tsetIsConfirmDeleteOpen( false );\n\t};\n\n\tconst tabDescription = !! libraryFontSelected\n\t\t? __(\n\t\t\t\t'Choose font variants. Keep in mind that too many variants could make your site slower.'\n\t\t  )\n\t\t: null;\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected && libraryFontSelected?.source !== 'theme';\n\n\tuseEffect( () => {\n\t\trefreshLibrary();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\t// Reset notice after 5 seconds\n\tuseEffect( () => {\n\t\tif ( notice ) {\n\t\t\tconst timeout = setTimeout( () => {\n\t\t\t\tsetNotice( null );\n\t\t\t}, 5000 );\n\t\t\treturn () => clearTimeout( timeout );\n\t\t}\n\t}, [ notice ] );\n\n\treturn (\n\t\t<TabLayout\n\t\t\ttitle={ libraryFontSelected?.name || '' }\n\t\t\tdescription={ tabDescription }\n\t\t\thandleBack={ !! libraryFontSelected && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\t<Footer\n\t\t\t\t\tshouldDisplayDeleteButton={ shouldDisplayDeleteButton }\n\t\t\t\t\thandleUninstallClick={ handleUninstallClick }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<ConfirmDeleteDialog\n\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t/>\n\n\t\t\t{ notice && (\n\t\t\t\t<>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\tclassName=\"font-library-modal__font-collection__notice\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t</Notice>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ ! libraryFontSelected && (\n\t\t\t\t<>\n\t\t\t\t\t{ isResolvingLibrary && <Spinner /> }\n\t\t\t\t\t{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t<FontsGrid>\n\t\t\t\t\t\t\t\t{ baseCustomFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</FontsGrid>\n\t\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ baseThemeFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<FontsGrid title={ __( 'Theme Fonts' ) }>\n\t\t\t\t\t\t\t\t{ baseThemeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</FontsGrid>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ libraryFontSelected && (\n\t\t\t\t<LibraryFontDetails\n\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</TabLayout>\n\t);\n}\n\nfunction Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {\n\tconst { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =\n\t\tuseContext( FontLibraryContext );\n\treturn (\n\t\t<HStack justify=\"space-between\">\n\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t<div>\n\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t<Button variant=\"tertiary\" onClick={ handleUninstallClick }>\n\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ saveFontFamilies }\n\t\t\t>\n\t\t\t\t{ __( 'Update' ) }\n\t\t\t</Button>\n\t\t</HStack>\n\t);\n}\n\nexport default InstalledFonts;\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,10 +1,10 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { Button, DropZone, __experimentalSpacer as Spacer, __experimentalText as Text, FormFileUpload } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, DropZone, __experimentalSpacer as Spacer, __experimentalText as Text, __experimentalVStack as VStack, FormFileUpload, Notice, FlexItem } from '@wordpress/components';
+import { useContext, useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,10 +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 { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
 function LocalFonts() {
   const {
     installFonts
   } = useContext(FontLibraryContext);
+  const [notice, setNotice] = useState(null);
+  const supportedFormats = ALLOWED_FILE_EXTENSIONS.slice(0, -1).map(extension => `.${extension}`).join(', ') + ` ${__('and')} .${ALLOWED_FILE_EXTENSIONS.slice(-1)}`;
   const handleDropZone = files => {
     handleFilesUpload(files);
   };
@@ -25,6 +28,16 @@ function LocalFonts() {
     handleFilesUpload(event.target.files);
   };
 
+  // Reset notice after 5 seconds
+  useEffect(() => {
+    if (notice) {
+      const timeout = setTimeout(() => {
+        setNotice(null);
+      }, 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, [notice]);
+
   /**
    * Filters the selected files to only allow the ones with the allowed extensions
    *
@@ -32,6 +45,7 @@ function LocalFonts() {
    * @return {void}
    */
   const handleFilesUpload = files => {
+    setNotice(null);
     const uniqueFilenames = new Set();
     const selectedFiles = [...files];
     const allowedFiles = selectedFiles.filter(file => {
@@ -111,15 +125,17 @@ function LocalFonts() {
    */
   const handleInstall = async fontFaces => {
     const fontFamilies = makeFamiliesFromFaces(fontFaces);
-    await installFonts(fontFamilies);
+    const response = await installFonts(fontFamilies);
+    const installNotice = getNoticeFromInstallResponse(response);
+    setNotice(installNotice);
   };
-  return createElement(Fragment, null, createElement(Text, {
-    className: "font-library-modal__subtitle"
-  }, __('Upload Fonts')), createElement(Spacer, {
-    margin: 2
+  return createElement(Fragment, null, createElement(Spacer, {
+    margin: 16
   }), createElement(DropZone, {
     onFilesDrop: handleDropZone
-  }), createElement(FormFileUpload, {
+  }), createElement(VStack, {
+    className: "font-library-modal__local-fonts"
+  }, createElement(FormFileUpload, {
     accept: ALLOWED_FILE_EXTENSIONS.map(ext => `.${ext}`).join(','),
     multiple: true,
     onChange: onFilesUpload,
@@ -128,8 +144,19 @@ function LocalFonts() {
     }) => createElement(Button, {
       className: "font-library-modal__upload-area",
       onClick: openFileDialog
-    }, createElement("span", null, __('Drag and drop your font files here.')))
-  }));
+    }, createElement("span", null, __('Upload font')))
+  }), notice && createElement(FlexItem, null, createElement(Spacer, {
+    margin: 2
+  }), createElement(Notice, {
+    isDismissible: false,
+    status: notice.type,
+    className: "font-library-modal__upload-area__notice"
+  }, notice.message)), createElement(Spacer, {
+    margin: 2
+  }), createElement(Text, {
+    className: "font-library-modal__upload-area__text"
+  }, sprintf( /* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */
+  __('Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.'), supportedFormats))));
 }
 export default LocalFonts;
 //# sourceMappingURL=local-fonts.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__","Button","DropZone","__experimentalSpacer","Spacer","__experimentalText","Text","FormFileUpload","useContext","ALLOWED_FILE_EXTENSIONS","FontLibraryContext","Font","makeFamiliesFromFaces","loadFontFaceInBrowser","LocalFonts","installFonts","handleDropZone","files","handleFilesUpload","onFilesUpload","event","target","uniqueFilenames","Set","selectedFiles","allowedFiles","filter","file","has","name","fileExtension","split","pop","toLowerCase","includes","add","length","loadFiles","fontFacesLoaded","Promise","all","map","fontFile","fontFaceData","getFontFaceMetadata","handleInstall","readFileAsArrayBuffer","resolve","reject","reader","window","FileReader","readAsArrayBuffer","onload","result","onerror","buffer","fontObj","fromDataBuffer","onloadEvent","font","detail","opentype","tables","fontName","get","isItalic","fontWeight","usWeightClass","isVariable","fvar","weightAxis","axes","find","tag","weightRange","minValue","maxValue","fontFamily","fontStyle","fontFaces","fontFamilies","createElement","Fragment","className","margin","onFilesDrop","accept","ext","join","multiple","onChange","render","openFileDialog","onClick"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/local-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tDropZone,\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as Text,\n\tFormFileUpload,\n} from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ALLOWED_FILE_EXTENSIONS } from './utils/constants';\nimport { FontLibraryContext } from './context';\nimport { Font } from '../../../../lib/lib-font.browser';\nimport makeFamiliesFromFaces from './utils/make-families-from-faces';\nimport { loadFontFaceInBrowser } from './utils';\n\nfunction LocalFonts() {\n\tconst { installFonts } = useContext( FontLibraryContext );\n\n\tconst handleDropZone = ( files ) => {\n\t\thandleFilesUpload( files );\n\t};\n\tconst onFilesUpload = ( event ) => {\n\t\thandleFilesUpload( event.target.files );\n\t};\n\n\t/**\n\t * Filters the selected files to only allow the ones with the allowed extensions\n\t *\n\t * @param {Array} files The files to be filtered\n\t * @return {void}\n\t */\n\tconst handleFilesUpload = ( files ) => {\n\t\tconst uniqueFilenames = new Set();\n\t\tconst selectedFiles = [ ...files ];\n\t\tconst allowedFiles = selectedFiles.filter( ( file ) => {\n\t\t\tif ( uniqueFilenames.has( file.name ) ) {\n\t\t\t\treturn false; // Discard duplicates\n\t\t\t}\n\t\t\t// Eliminates files that are not allowed\n\t\t\tconst fileExtension = file.name.split( '.' ).pop().toLowerCase();\n\t\t\tif ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {\n\t\t\t\tuniqueFilenames.add( file.name );\n\t\t\t\treturn true; // Keep file if the extension is allowed\n\t\t\t}\n\t\t\treturn false; // Discard file extension not allowed\n\t\t} );\n\t\tif ( allowedFiles.length > 0 ) {\n\t\t\tloadFiles( allowedFiles );\n\t\t}\n\t};\n\n\t/**\n\t * Loads the selected files and reads the font metadata\n\t *\n\t * @param {Array} files The files to be loaded\n\t * @return {void}\n\t */\n\tconst loadFiles = async ( files ) => {\n\t\tconst fontFacesLoaded = await Promise.all(\n\t\t\tfiles.map( async ( fontFile ) => {\n\t\t\t\tconst fontFaceData = await getFontFaceMetadata( fontFile );\n\t\t\t\tawait loadFontFaceInBrowser(\n\t\t\t\t\tfontFaceData,\n\t\t\t\t\tfontFaceData.file,\n\t\t\t\t\t'all'\n\t\t\t\t);\n\t\t\t\treturn fontFaceData;\n\t\t\t} )\n\t\t);\n\t\tawait handleInstall( fontFacesLoaded );\n\t};\n\n\t// Create a function to read the file as array buffer\n\tasync function readFileAsArrayBuffer( file ) {\n\t\treturn new Promise( ( resolve, reject ) => {\n\t\t\tconst reader = new window.FileReader();\n\t\t\treader.readAsArrayBuffer( file );\n\t\t\treader.onload = () => resolve( reader.result );\n\t\t\treader.onerror = reject;\n\t\t} );\n\t}\n\n\tconst getFontFaceMetadata = async ( fontFile ) => {\n\t\tconst buffer = await readFileAsArrayBuffer( fontFile );\n\t\tconst fontObj = new Font( 'Uploaded Font' );\n\t\tfontObj.fromDataBuffer( buffer, fontFile.name );\n\t\t// Assuming that fromDataBuffer triggers onload event and returning a Promise\n\t\tconst onloadEvent = await new Promise(\n\t\t\t( resolve ) => ( fontObj.onload = resolve )\n\t\t);\n\t\tconst font = onloadEvent.detail.font;\n\t\tconst { name } = font.opentype.tables;\n\t\tconst fontName = name.get( 16 ) || name.get( 1 );\n\t\tconst isItalic = name.get( 2 ).toLowerCase().includes( 'italic' );\n\t\tconst fontWeight =\n\t\t\tfont.opentype.tables[ 'OS/2' ].usWeightClass || 'normal';\n\t\tconst isVariable = !! font.opentype.tables.fvar;\n\t\tconst weightAxis =\n\t\t\tisVariable &&\n\t\t\tfont.opentype.tables.fvar.axes.find(\n\t\t\t\t( { tag } ) => tag === 'wght'\n\t\t\t);\n\t\tconst weightRange = weightAxis\n\t\t\t? `${ weightAxis.minValue } ${ weightAxis.maxValue }`\n\t\t\t: null;\n\t\treturn {\n\t\t\tfile: fontFile,\n\t\t\tfontFamily: fontName,\n\t\t\tfontStyle: isItalic ? 'italic' : 'normal',\n\t\t\tfontWeight: weightRange || fontWeight,\n\t\t};\n\t};\n\n\t/**\n\t * Creates the font family definition and sends it to the server\n\t *\n\t * @param {Array} fontFaces The font faces to be installed\n\t * @return {void}\n\t */\n\tconst handleInstall = async ( fontFaces ) => {\n\t\tconst fontFamilies = makeFamiliesFromFaces( fontFaces );\n\t\tawait installFonts( fontFamilies );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t{ __( 'Upload Fonts' ) }\n\t\t\t</Text>\n\t\t\t<Spacer margin={ 2 } />\n\t\t\t<DropZone onFilesDrop={ handleDropZone } />\n\t\t\t<FormFileUpload\n\t\t\t\taccept={ ALLOWED_FILE_EXTENSIONS.map(\n\t\t\t\t\t( ext ) => `.${ ext }`\n\t\t\t\t).join( ',' ) }\n\t\t\t\tmultiple={ true }\n\t\t\t\tonChange={ onFilesUpload }\n\t\t\t\trender={ ( { openFileDialog } ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"font-library-modal__upload-area\"\n\t\t\t\t\t\tonClick={ openFileDialog }\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{ __( 'Drag and drop your font files here.' ) }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default LocalFonts;\n"],"mappings":"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"}
+{"version":3,"names":["__","sprintf","Button","DropZone","__experimentalSpacer","Spacer","__experimentalText","Text","__experimentalVStack","VStack","FormFileUpload","Notice","FlexItem","useContext","useState","useEffect","ALLOWED_FILE_EXTENSIONS","FontLibraryContext","Font","makeFamiliesFromFaces","loadFontFaceInBrowser","getNoticeFromInstallResponse","LocalFonts","installFonts","notice","setNotice","supportedFormats","slice","map","extension","join","handleDropZone","files","handleFilesUpload","onFilesUpload","event","target","timeout","setTimeout","clearTimeout","uniqueFilenames","Set","selectedFiles","allowedFiles","filter","file","has","name","fileExtension","split","pop","toLowerCase","includes","add","length","loadFiles","fontFacesLoaded","Promise","all","fontFile","fontFaceData","getFontFaceMetadata","handleInstall","readFileAsArrayBuffer","resolve","reject","reader","window","FileReader","readAsArrayBuffer","onload","result","onerror","buffer","fontObj","fromDataBuffer","onloadEvent","font","detail","opentype","tables","fontName","get","isItalic","fontWeight","usWeightClass","isVariable","fvar","weightAxis","axes","find","tag","weightRange","minValue","maxValue","fontFamily","fontStyle","fontFaces","fontFamilies","response","installNotice","createElement","Fragment","margin","onFilesDrop","className","accept","ext","multiple","onChange","render","openFileDialog","onClick","isDismissible","status","type","message"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/local-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tButton,\n\tDropZone,\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\tFormFileUpload,\n\tNotice,\n\tFlexItem,\n} from '@wordpress/components';\nimport { useContext, useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ALLOWED_FILE_EXTENSIONS } from './utils/constants';\nimport { FontLibraryContext } from './context';\nimport { Font } from '../../../../lib/lib-font.browser';\nimport makeFamiliesFromFaces from './utils/make-families-from-faces';\nimport { loadFontFaceInBrowser } from './utils';\nimport { getNoticeFromInstallResponse } from './utils/get-notice-from-response';\n\nfunction LocalFonts() {\n\tconst { installFonts } = useContext( FontLibraryContext );\n\tconst [ notice, setNotice ] = useState( null );\n\tconst supportedFormats =\n\t\tALLOWED_FILE_EXTENSIONS.slice( 0, -1 )\n\t\t\t.map( ( extension ) => `.${ extension }` )\n\t\t\t.join( ', ' ) +\n\t\t` ${ __( 'and' ) } .${ ALLOWED_FILE_EXTENSIONS.slice( -1 ) }`;\n\n\tconst handleDropZone = ( files ) => {\n\t\thandleFilesUpload( files );\n\t};\n\tconst onFilesUpload = ( event ) => {\n\t\thandleFilesUpload( event.target.files );\n\t};\n\n\t// Reset notice after 5 seconds\n\tuseEffect( () => {\n\t\tif ( notice ) {\n\t\t\tconst timeout = setTimeout( () => {\n\t\t\t\tsetNotice( null );\n\t\t\t}, 5000 );\n\t\t\treturn () => clearTimeout( timeout );\n\t\t}\n\t}, [ notice ] );\n\n\t/**\n\t * Filters the selected files to only allow the ones with the allowed extensions\n\t *\n\t * @param {Array} files The files to be filtered\n\t * @return {void}\n\t */\n\tconst handleFilesUpload = ( files ) => {\n\t\tsetNotice( null );\n\t\tconst uniqueFilenames = new Set();\n\t\tconst selectedFiles = [ ...files ];\n\t\tconst allowedFiles = selectedFiles.filter( ( file ) => {\n\t\t\tif ( uniqueFilenames.has( file.name ) ) {\n\t\t\t\treturn false; // Discard duplicates\n\t\t\t}\n\t\t\t// Eliminates files that are not allowed\n\t\t\tconst fileExtension = file.name.split( '.' ).pop().toLowerCase();\n\t\t\tif ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {\n\t\t\t\tuniqueFilenames.add( file.name );\n\t\t\t\treturn true; // Keep file if the extension is allowed\n\t\t\t}\n\t\t\treturn false; // Discard file extension not allowed\n\t\t} );\n\t\tif ( allowedFiles.length > 0 ) {\n\t\t\tloadFiles( allowedFiles );\n\t\t}\n\t};\n\n\t/**\n\t * Loads the selected files and reads the font metadata\n\t *\n\t * @param {Array} files The files to be loaded\n\t * @return {void}\n\t */\n\tconst loadFiles = async ( files ) => {\n\t\tconst fontFacesLoaded = await Promise.all(\n\t\t\tfiles.map( async ( fontFile ) => {\n\t\t\t\tconst fontFaceData = await getFontFaceMetadata( fontFile );\n\t\t\t\tawait loadFontFaceInBrowser(\n\t\t\t\t\tfontFaceData,\n\t\t\t\t\tfontFaceData.file,\n\t\t\t\t\t'all'\n\t\t\t\t);\n\t\t\t\treturn fontFaceData;\n\t\t\t} )\n\t\t);\n\t\tawait handleInstall( fontFacesLoaded );\n\t};\n\n\t// Create a function to read the file as array buffer\n\tasync function readFileAsArrayBuffer( file ) {\n\t\treturn new Promise( ( resolve, reject ) => {\n\t\t\tconst reader = new window.FileReader();\n\t\t\treader.readAsArrayBuffer( file );\n\t\t\treader.onload = () => resolve( reader.result );\n\t\t\treader.onerror = reject;\n\t\t} );\n\t}\n\n\tconst getFontFaceMetadata = async ( fontFile ) => {\n\t\tconst buffer = await readFileAsArrayBuffer( fontFile );\n\t\tconst fontObj = new Font( 'Uploaded Font' );\n\t\tfontObj.fromDataBuffer( buffer, fontFile.name );\n\t\t// Assuming that fromDataBuffer triggers onload event and returning a Promise\n\t\tconst onloadEvent = await new Promise(\n\t\t\t( resolve ) => ( fontObj.onload = resolve )\n\t\t);\n\t\tconst font = onloadEvent.detail.font;\n\t\tconst { name } = font.opentype.tables;\n\t\tconst fontName = name.get( 16 ) || name.get( 1 );\n\t\tconst isItalic = name.get( 2 ).toLowerCase().includes( 'italic' );\n\t\tconst fontWeight =\n\t\t\tfont.opentype.tables[ 'OS/2' ].usWeightClass || 'normal';\n\t\tconst isVariable = !! font.opentype.tables.fvar;\n\t\tconst weightAxis =\n\t\t\tisVariable &&\n\t\t\tfont.opentype.tables.fvar.axes.find(\n\t\t\t\t( { tag } ) => tag === 'wght'\n\t\t\t);\n\t\tconst weightRange = weightAxis\n\t\t\t? `${ weightAxis.minValue } ${ weightAxis.maxValue }`\n\t\t\t: null;\n\t\treturn {\n\t\t\tfile: fontFile,\n\t\t\tfontFamily: fontName,\n\t\t\tfontStyle: isItalic ? 'italic' : 'normal',\n\t\t\tfontWeight: weightRange || fontWeight,\n\t\t};\n\t};\n\n\t/**\n\t * Creates the font family definition and sends it to the server\n\t *\n\t * @param {Array} fontFaces The font faces to be installed\n\t * @return {void}\n\t */\n\tconst handleInstall = async ( fontFaces ) => {\n\t\tconst fontFamilies = makeFamiliesFromFaces( fontFaces );\n\t\tconst response = await installFonts( fontFamilies );\n\t\tconst installNotice = getNoticeFromInstallResponse( response );\n\t\tsetNotice( installNotice );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Spacer margin={ 16 } />\n\t\t\t<DropZone onFilesDrop={ handleDropZone } />\n\t\t\t<VStack className=\"font-library-modal__local-fonts\">\n\t\t\t\t<FormFileUpload\n\t\t\t\t\taccept={ ALLOWED_FILE_EXTENSIONS.map(\n\t\t\t\t\t\t( ext ) => `.${ ext }`\n\t\t\t\t\t).join( ',' ) }\n\t\t\t\t\tmultiple={ true }\n\t\t\t\t\tonChange={ onFilesUpload }\n\t\t\t\t\trender={ ( { openFileDialog } ) => (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"font-library-modal__upload-area\"\n\t\t\t\t\t\t\tonClick={ openFileDialog }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>{ __( 'Upload font' ) }</span>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t{ notice && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\tclassName=\"font-library-modal__upload-area__notice\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t</Notice>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t<Text className=\"font-library-modal__upload-area__text\">\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t/* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tsupportedFormats\n\t\t\t\t\t) }\n\t\t\t\t</Text>\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default LocalFonts;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SACCC,MAAM,EACNC,QAAQ,EACRC,oBAAoB,IAAIC,MAAM,EAC9BC,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,EAC9BC,cAAc,EACdC,MAAM,EACNC,QAAQ,QACF,uBAAuB;AAC9B,SAASC,UAAU,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,oBAAoB;;AAEpE;AACA;AACA;AACA,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,kBAAkB,QAAQ,WAAW;AAC9C,SAASC,IAAI,QAAQ,kCAAkC;AACvD,OAAOC,qBAAqB,MAAM,kCAAkC;AACpE,SAASC,qBAAqB,QAAQ,SAAS;AAC/C,SAASC,4BAA4B,QAAQ,kCAAkC;AAE/E,SAASC,UAAUA,CAAA,EAAG;EACrB,MAAM;IAAEC;EAAa,CAAC,GAAGV,UAAU,CAAEI,kBAAmB,CAAC;EACzD,MAAM,CAAEO,MAAM,EAAEC,SAAS,CAAE,GAAGX,QAAQ,CAAE,IAAK,CAAC;EAC9C,MAAMY,gBAAgB,GACrBV,uBAAuB,CAACW,KAAK,CAAE,CAAC,EAAE,CAAC,CAAE,CAAC,CACpCC,GAAG,CAAIC,SAAS,IAAO,IAAIA,SAAW,EAAE,CAAC,CACzCC,IAAI,CAAE,IAAK,CAAC,GACb,IAAI9B,EAAE,CAAE,KAAM,CAAG,KAAKgB,uBAAuB,CAACW,KAAK,CAAE,CAAC,CAAE,CAAG,EAAC;EAE9D,MAAMI,cAAc,GAAKC,KAAK,IAAM;IACnCC,iBAAiB,CAAED,KAAM,CAAC;EAC3B,CAAC;EACD,MAAME,aAAa,GAAKC,KAAK,IAAM;IAClCF,iBAAiB,CAAEE,KAAK,CAACC,MAAM,CAACJ,KAAM,CAAC;EACxC,CAAC;;EAED;EACAjB,SAAS,CAAE,MAAM;IAChB,IAAKS,MAAM,EAAG;MACb,MAAMa,OAAO,GAAGC,UAAU,CAAE,MAAM;QACjCb,SAAS,CAAE,IAAK,CAAC;MAClB,CAAC,EAAE,IAAK,CAAC;MACT,OAAO,MAAMc,YAAY,CAAEF,OAAQ,CAAC;IACrC;EACD,CAAC,EAAE,CAAEb,MAAM,CAAG,CAAC;;EAEf;AACD;AACA;AACA;AACA;AACA;EACC,MAAMS,iBAAiB,GAAKD,KAAK,IAAM;IACtCP,SAAS,CAAE,IAAK,CAAC;IACjB,MAAMe,eAAe,GAAG,IAAIC,GAAG,CAAC,CAAC;IACjC,MAAMC,aAAa,GAAG,CAAE,GAAGV,KAAK,CAAE;IAClC,MAAMW,YAAY,GAAGD,aAAa,CAACE,MAAM,CAAIC,IAAI,IAAM;MACtD,IAAKL,eAAe,CAACM,GAAG,CAAED,IAAI,CAACE,IAAK,CAAC,EAAG;QACvC,OAAO,KAAK,CAAC,CAAC;MACf;MACA;MACA,MAAMC,aAAa,GAAGH,IAAI,CAACE,IAAI,CAACE,KAAK,CAAE,GAAI,CAAC,CAACC,GAAG,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC;MAChE,IAAKnC,uBAAuB,CAACoC,QAAQ,CAAEJ,aAAc,CAAC,EAAG;QACxDR,eAAe,CAACa,GAAG,CAAER,IAAI,CAACE,IAAK,CAAC;QAChC,OAAO,IAAI,CAAC,CAAC;MACd;;MACA,OAAO,KAAK,CAAC,CAAC;IACf,CAAE,CAAC;;IACH,IAAKJ,YAAY,CAACW,MAAM,GAAG,CAAC,EAAG;MAC9BC,SAAS,CAAEZ,YAAa,CAAC;IAC1B;EACD,CAAC;;EAED;AACD;AACA;AACA;AACA;AACA;EACC,MAAMY,SAAS,GAAG,MAAQvB,KAAK,IAAM;IACpC,MAAMwB,eAAe,GAAG,MAAMC,OAAO,CAACC,GAAG,CACxC1B,KAAK,CAACJ,GAAG,CAAE,MAAQ+B,QAAQ,IAAM;MAChC,MAAMC,YAAY,GAAG,MAAMC,mBAAmB,CAAEF,QAAS,CAAC;MAC1D,MAAMvC,qBAAqB,CAC1BwC,YAAY,EACZA,YAAY,CAACf,IAAI,EACjB,KACD,CAAC;MACD,OAAOe,YAAY;IACpB,CAAE,CACH,CAAC;IACD,MAAME,aAAa,CAAEN,eAAgB,CAAC;EACvC,CAAC;;EAED;EACA,eAAeO,qBAAqBA,CAAElB,IAAI,EAAG;IAC5C,OAAO,IAAIY,OAAO,CAAE,CAAEO,OAAO,EAAEC,MAAM,KAAM;MAC1C,MAAMC,MAAM,GAAG,IAAIC,MAAM,CAACC,UAAU,CAAC,CAAC;MACtCF,MAAM,CAACG,iBAAiB,CAAExB,IAAK,CAAC;MAChCqB,MAAM,CAACI,MAAM,GAAG,MAAMN,OAAO,CAAEE,MAAM,CAACK,MAAO,CAAC;MAC9CL,MAAM,CAACM,OAAO,GAAGP,MAAM;IACxB,CAAE,CAAC;EACJ;EAEA,MAAMJ,mBAAmB,GAAG,MAAQF,QAAQ,IAAM;IACjD,MAAMc,MAAM,GAAG,MAAMV,qBAAqB,CAAEJ,QAAS,CAAC;IACtD,MAAMe,OAAO,GAAG,IAAIxD,IAAI,CAAE,eAAgB,CAAC;IAC3CwD,OAAO,CAACC,cAAc,CAAEF,MAAM,EAAEd,QAAQ,CAACZ,IAAK,CAAC;IAC/C;IACA,MAAM6B,WAAW,GAAG,MAAM,IAAInB,OAAO,CAClCO,OAAO,IAAQU,OAAO,CAACJ,MAAM,GAAGN,OACnC,CAAC;IACD,MAAMa,IAAI,GAAGD,WAAW,CAACE,MAAM,CAACD,IAAI;IACpC,MAAM;MAAE9B;IAAK,CAAC,GAAG8B,IAAI,CAACE,QAAQ,CAACC,MAAM;IACrC,MAAMC,QAAQ,GAAGlC,IAAI,CAACmC,GAAG,CAAE,EAAG,CAAC,IAAInC,IAAI,CAACmC,GAAG,CAAE,CAAE,CAAC;IAChD,MAAMC,QAAQ,GAAGpC,IAAI,CAACmC,GAAG,CAAE,CAAE,CAAC,CAAC/B,WAAW,CAAC,CAAC,CAACC,QAAQ,CAAE,QAAS,CAAC;IACjE,MAAMgC,UAAU,GACfP,IAAI,CAACE,QAAQ,CAACC,MAAM,CAAE,MAAM,CAAE,CAACK,aAAa,IAAI,QAAQ;IACzD,MAAMC,UAAU,GAAG,CAAC,CAAET,IAAI,CAACE,QAAQ,CAACC,MAAM,CAACO,IAAI;IAC/C,MAAMC,UAAU,GACfF,UAAU,IACVT,IAAI,CAACE,QAAQ,CAACC,MAAM,CAACO,IAAI,CAACE,IAAI,CAACC,IAAI,CAClC,CAAE;MAAEC;IAAI,CAAC,KAAMA,GAAG,KAAK,MACxB,CAAC;IACF,MAAMC,WAAW,GAAGJ,UAAU,GAC1B,GAAGA,UAAU,CAACK,QAAU,IAAIL,UAAU,CAACM,QAAU,EAAC,GACnD,IAAI;IACP,OAAO;MACNjD,IAAI,EAAEc,QAAQ;MACdoC,UAAU,EAAEd,QAAQ;MACpBe,SAAS,EAAEb,QAAQ,GAAG,QAAQ,GAAG,QAAQ;MACzCC,UAAU,EAAEQ,WAAW,IAAIR;IAC5B,CAAC;EACF,CAAC;;EAED;AACD;AACA;AACA;AACA;AACA;EACC,MAAMtB,aAAa,GAAG,MAAQmC,SAAS,IAAM;IAC5C,MAAMC,YAAY,GAAG/E,qBAAqB,CAAE8E,SAAU,CAAC;IACvD,MAAME,QAAQ,GAAG,MAAM5E,YAAY,CAAE2E,YAAa,CAAC;IACnD,MAAME,aAAa,GAAG/E,4BAA4B,CAAE8E,QAAS,CAAC;IAC9D1E,SAAS,CAAE2E,aAAc,CAAC;EAC3B,CAAC;EAED,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAAChG,MAAM;IAACkG,MAAM,EAAG;EAAI,CAAE,CAAC,EACxBF,aAAA,CAAClG,QAAQ;IAACqG,WAAW,EAAGzE;EAAgB,CAAE,CAAC,EAC3CsE,aAAA,CAAC5F,MAAM;IAACgG,SAAS,EAAC;EAAiC,GAClDJ,aAAA,CAAC3F,cAAc;IACdgG,MAAM,EAAG1F,uBAAuB,CAACY,GAAG,CACjC+E,GAAG,IAAO,IAAIA,GAAK,EACtB,CAAC,CAAC7E,IAAI,CAAE,GAAI,CAAG;IACf8E,QAAQ,EAAG,IAAM;IACjBC,QAAQ,EAAG3E,aAAe;IAC1B4E,MAAM,EAAGA,CAAE;MAAEC;IAAe,CAAC,KAC5BV,aAAA,CAACnG,MAAM;MACNuG,SAAS,EAAC,iCAAiC;MAC3CO,OAAO,EAAGD;IAAgB,GAE1BV,aAAA,eAAQrG,EAAE,CAAE,aAAc,CAAS,CAC5B;EACN,CACH,CAAC,EACAwB,MAAM,IACP6E,aAAA,CAACzF,QAAQ,QACRyF,aAAA,CAAChG,MAAM;IAACkG,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBF,aAAA,CAAC1F,MAAM;IACNsG,aAAa,EAAG,KAAO;IACvBC,MAAM,EAAG1F,MAAM,CAAC2F,IAAM;IACtBV,SAAS,EAAC;EAAyC,GAEjDjF,MAAM,CAAC4F,OACF,CACC,CACV,EACDf,aAAA,CAAChG,MAAM;IAACkG,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBF,aAAA,CAAC9F,IAAI;IAACkG,SAAS,EAAC;EAAuC,GACpDxG,OAAO,EACR;EACAD,EAAE,CACD,6FACD,CAAC,EACD0B,gBACD,CACK,CACC,CACP,CAAC;AAEL;AAEA,eAAeJ,UAAU"}

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

@@ -16,7 +16,7 @@ export async function fetchInstallFonts(data) {
 }
 export async function fetchUninstallFonts(fonts) {
   const data = {
-    fontFamilies: fonts
+    font_families: fonts
   };
   const config = {
     path: '/wp/v2/fonts',