@wordpress/edit-site 5.18.0 → 5.19.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalText","Text","__experimentalVStack","VStack","__experimentalHStack","HStack","CheckboxControl","FontFaceDemo","FontVariant","fontFace","variantName","checked","onClick","text","actionHandler","fontStyle","fontWeight","displayVariantName","createElement","className","spacing","justify","alignment","onChange"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-variant.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tCheckboxControl,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport FontFaceDemo from './font-demo';\n\nfunction FontVariant( {\n\tfontFace,\n\tvariantName,\n\tchecked,\n\tonClick,\n\ttext,\n\tactionHandler,\n} ) {\n\tconst { fontStyle, fontWeight } = fontFace;\n\tconst displayVariantName = variantName || `${ fontWeight } ${ fontStyle }`;\n\n\treturn (\n\t\t<div className=\"font-library-modal__font-variant\">\n\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t<HStack justify=\"flex-start\" alignment=\"top\">\n\t\t\t\t\t{ !! actionHandler ? (\n\t\t\t\t\t\tactionHandler\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\t\tonChange={ onClick }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ typeof displayVariantName === 'string' ? (\n\t\t\t\t\t\t<Text>{ displayVariantName }</Text>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tdisplayVariantName\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t\t<div className=\"font-library-modal__font-variant_demo-wrapper\">\n\t\t\t\t\t<FontFaceDemo fontFace={ fontFace } text={ text } />\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default FontVariant;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,eAAe,QACT,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,YAAY,MAAM,aAAa;AAEtC,SAASC,WAAWA,CAAE;EACrBC,QAAQ;EACRC,WAAW;EACXC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAGP,QAAQ;EAC1C,MAAMQ,kBAAkB,GAAGP,WAAW,IAAK,GAAGM,UAAY,IAAID,SAAW,EAAC;EAE1E,OACCG,aAAA;IAAKC,SAAS,EAAC;EAAkC,GAChDD,aAAA,CAACf,MAAM;IAACiB,OAAO,EAAG;EAAG,GACpBF,aAAA,CAACb,MAAM;IAACgB,OAAO,EAAC,YAAY;IAACC,SAAS,EAAC;EAAK,GACzC,CAAC,CAAER,aAAa,GACjBA,aAAa,GAEbI,aAAA,CAACZ,eAAe;IACfK,OAAO,EAAGA,OAAS;IACnBY,QAAQ,EAAGX;EAAS,CACpB,CACD,EACC,OAAOK,kBAAkB,KAAK,QAAQ,GACvCC,aAAA,CAACjB,IAAI,QAAGgB,kBAA0B,CAAC,GAEnCA,kBAEM,CAAC,EACTC,aAAA;IAAKC,SAAS,EAAC;EAA+C,GAC7DD,aAAA,CAACX,YAAY;IAACE,QAAQ,EAAGA,QAAU;IAACI,IAAI,EAAGA;EAAM,CAAE,CAC/C,CACE,CACJ,CAAC;AAER;AAEA,eAAeL,WAAW"}

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

@@ -0,0 +1,47 @@
+import { createElement, Fragment } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack, __experimentalText as Text, __experimentalSpacer as Spacer } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+function FontsGrid({
+  title,
+  children,
+  pageSize = 32
+}) {
+  const [lastItem, setLastItem] = useState(null);
+  const [page, setPage] = useState(1);
+  const itemsLimit = page * pageSize;
+  const items = children.slice(0, itemsLimit);
+  useEffect(() => {
+    if (lastItem) {
+      const observer = new window.IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting) {
+          setPage(prevPage => prevPage + 1);
+        }
+      });
+      observer.observe(lastItem);
+      return () => observer.disconnect();
+    }
+  }, [lastItem]);
+  return createElement("div", {
+    className: "font-library-modal__fonts-grid"
+  }, createElement(VStack, {
+    spacing: 0
+  }, title && createElement(Fragment, null, createElement(Text, {
+    className: "font-library-modal__subtitle"
+  }, title), createElement(Spacer, {
+    margin: 2
+  })), createElement("div", {
+    className: "font-library-modal__fonts-grid__main"
+  }, items.map((child, i) => {
+    if (i === itemsLimit - 1) {
+      return createElement("div", {
+        ref: setLastItem
+      }, child);
+    }
+    return child;
+  }))));
+}
+export default FontsGrid;
+//# sourceMappingURL=fonts-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalVStack","VStack","__experimentalText","Text","__experimentalSpacer","Spacer","useState","useEffect","FontsGrid","title","children","pageSize","lastItem","setLastItem","page","setPage","itemsLimit","items","slice","observer","window","IntersectionObserver","entry","isIntersecting","prevPage","observe","disconnect","createElement","className","spacing","Fragment","margin","map","child","i","ref"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/fonts-grid.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\nfunction FontsGrid( { title, children, pageSize = 32 } ) {\n\tconst [ lastItem, setLastItem ] = useState( null );\n\tconst [ page, setPage ] = useState( 1 );\n\tconst itemsLimit = page * pageSize;\n\tconst items = children.slice( 0, itemsLimit );\n\n\tuseEffect( () => {\n\t\tif ( lastItem ) {\n\t\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\t\tif ( entry.isIntersecting ) {\n\t\t\t\t\tsetPage( ( prevPage ) => prevPage + 1 );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tobserver.observe( lastItem );\n\n\t\t\treturn () => observer.disconnect();\n\t\t}\n\t}, [ lastItem ] );\n\n\treturn (\n\t\t<div className=\"font-library-modal__fonts-grid\">\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t<div className=\"font-library-modal__fonts-grid__main\">\n\t\t\t\t\t{ items.map( ( child, i ) => {\n\t\t\t\t\t\tif ( i === itemsLimit - 1 ) {\n\t\t\t\t\t\t\treturn <div ref={ setLastItem }>{ child }</div>;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn child;\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default FontsGrid;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,QAAQ,EAAEC,SAAS,QAAQ,oBAAoB;AAExD,SAASC,SAASA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ,GAAG;AAAG,CAAC,EAAG;EACxD,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,GAAGP,QAAQ,CAAE,IAAK,CAAC;EAClD,MAAM,CAAEQ,IAAI,EAAEC,OAAO,CAAE,GAAGT,QAAQ,CAAE,CAAE,CAAC;EACvC,MAAMU,UAAU,GAAGF,IAAI,GAAGH,QAAQ;EAClC,MAAMM,KAAK,GAAGP,QAAQ,CAACQ,KAAK,CAAE,CAAC,EAAEF,UAAW,CAAC;EAE7CT,SAAS,CAAE,MAAM;IAChB,IAAKK,QAAQ,EAAG;MACf,MAAMO,QAAQ,GAAG,IAAIC,MAAM,CAACC,oBAAoB,CAAE,CAAE,CAAEC,KAAK,CAAE,KAAM;QAClE,IAAKA,KAAK,CAACC,cAAc,EAAG;UAC3BR,OAAO,CAAIS,QAAQ,IAAMA,QAAQ,GAAG,CAAE,CAAC;QACxC;MACD,CAAE,CAAC;MAEHL,QAAQ,CAACM,OAAO,CAAEb,QAAS,CAAC;MAE5B,OAAO,MAAMO,QAAQ,CAACO,UAAU,CAAC,CAAC;IACnC;EACD,CAAC,EAAE,CAAEd,QAAQ,CAAG,CAAC;EAEjB,OACCe,aAAA;IAAKC,SAAS,EAAC;EAAgC,GAC9CD,aAAA,CAAC1B,MAAM;IAAC4B,OAAO,EAAG;EAAG,GAClBpB,KAAK,IACNkB,aAAA,CAAAG,QAAA,QACCH,aAAA,CAACxB,IAAI;IAACyB,SAAS,EAAC;EAA8B,GAC3CnB,KACG,CAAC,EACPkB,aAAA,CAACtB,MAAM;IAAC0B,MAAM,EAAG;EAAG,CAAE,CACrB,CACF,EACDJ,aAAA;IAAKC,SAAS,EAAC;EAAsC,GAClDX,KAAK,CAACe,GAAG,CAAE,CAAEC,KAAK,EAAEC,CAAC,KAAM;IAC5B,IAAKA,CAAC,KAAKlB,UAAU,GAAG,CAAC,EAAG;MAC3B,OAAOW,aAAA;QAAKQ,GAAG,EAAGtB;MAAa,GAAGoB,KAAY,CAAC;IAChD;IACA,OAAOA,KAAK;EACb,CAAE,CACE,CACE,CACJ,CAAC;AAER;AAEA,eAAezB,SAAS"}

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

@@ -0,0 +1,38 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Modal, TabPanel } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import InstalledFonts from './installed-fonts';
+import { MODAL_TABS } from './utils/constants';
+function FontLibraryModal({
+  onRequestClose,
+  initialTabName = 'installed-fonts'
+}) {
+  return createElement(Modal, {
+    title: __('Fonts'),
+    onRequestClose: onRequestClose,
+    isFullScreen: true,
+    className: "font-library-modal",
+    style: {
+      width: '65vw'
+    }
+  }, createElement(TabPanel, {
+    className: "font-library-modal__tab-panel",
+    initialTabName: initialTabName,
+    tabs: MODAL_TABS
+  }, tab => {
+    switch (tab.name) {
+      case 'installed-fonts':
+      default:
+        return createElement(InstalledFonts, null);
+    }
+  }));
+}
+export default FontLibraryModal;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__","Modal","TabPanel","InstalledFonts","MODAL_TABS","FontLibraryModal","onRequestClose","initialTabName","createElement","title","isFullScreen","className","style","width","tabs","tab","name"],"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';\n\n/**\n * Internal dependencies\n */\nimport InstalledFonts from './installed-fonts';\nimport { MODAL_TABS } from './utils/constants';\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tinitialTabName = 'installed-fonts',\n} ) {\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Fonts' ) }\n\t\t\tonRequestClose={ onRequestClose }\n\t\t\tisFullScreen={ true }\n\t\t\tclassName=\"font-library-modal\"\n\t\t\tstyle={ { width: '65vw' } }\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={ MODAL_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\tdefault:\n\t\t\t\t\t\t\treturn <InstalledFonts />;\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;;AAEvD;AACA;AACA;AACA,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,SAASC,UAAU,QAAQ,mBAAmB;AAE9C,SAASC,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,cAAc,GAAG;AAClB,CAAC,EAAG;EACH,OACCC,aAAA,CAACP,KAAK;IACLQ,KAAK,EAAGT,EAAE,CAAE,OAAQ,CAAG;IACvBM,cAAc,EAAGA,cAAgB;IACjCI,YAAY,EAAG,IAAM;IACrBC,SAAS,EAAC,oBAAoB;IAC9BC,KAAK,EAAG;MAAEC,KAAK,EAAE;IAAO;EAAG,GAE3BL,aAAA,CAACN,QAAQ;IACRS,SAAS,EAAC,+BAA+B;IACzCJ,cAAc,EAAGA,cAAgB;IACjCO,IAAI,EAAGV;EAAY,GAEfW,GAAG,IAAM;IACZ,QAASA,GAAG,CAACC,IAAI;MAChB,KAAK,iBAAiB;MACtB;QACC,OAAOR,aAAA,CAACL,cAAc,MAAE,CAAC;IAC3B;EACD,CACS,CACJ,CAAC;AAEV;AAEA,eAAeE,gBAAgB"}

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

@@ -0,0 +1,120 @@
+import { createElement, Fragment } from "@wordpress/element";
+/**
+ * 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';
+
+/**
+ * Internal dependencies
+ */
+import TabLayout from './tab-layout';
+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 { unlock } from '../../../lock-unlock';
+const {
+  ProgressBar
+} = unlock(componentsPrivateApis);
+function InstalledFonts() {
+  const {
+    baseCustomFonts,
+    libraryFontSelected,
+    baseThemeFonts,
+    handleSetLibraryFontSelected,
+    refreshLibrary,
+    uninstallFont,
+    isResolvingLibrary
+  } = useContext(FontLibraryContext);
+  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+  const handleUnselectFont = () => {
+    handleSetLibraryFontSelected(null);
+  };
+  const handleSelectFont = font => {
+    handleSetLibraryFontSelected(font);
+  };
+  const handleConfirmUninstall = async () => {
+    const result = await uninstallFont(libraryFontSelected);
+    // If the font was succesfully uninstalled it is unselected
+    if (result) {
+      handleUnselectFont();
+    }
+    setIsConfirmDeleteOpen(false);
+  };
+  const handleUninstallClick = async () => {
+    setIsConfirmDeleteOpen(true);
+  };
+  const handleCancelUninstall = () => {
+    setIsConfirmDeleteOpen(false);
+  };
+  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(() => {
+    refreshLibrary();
+  }, []);
+  return createElement(TabLayout, {
+    title: libraryFontSelected?.name || '',
+    description: tabDescription,
+    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(Spinner, null), baseCustomFonts.length > 0 && createElement(Fragment, null, createElement(Spacer, {
+    margin: 2
+  }), createElement(FontsGrid, null, baseCustomFonts.map(font => createElement(LibraryFontCard, {
+    font: font,
+    key: font.slug,
+    onClick: () => {
+      handleSelectFont(font);
+    }
+  })))), baseThemeFonts.length > 0 && createElement(Fragment, null, createElement(Spacer, {
+    margin: 8
+  }), createElement(FontsGrid, {
+    title: __('Theme Fonts')
+  }, baseThemeFonts.map(font => createElement(LibraryFontCard, {
+    font: font,
+    key: font.slug,
+    onClick: () => {
+      handleSelectFont(font);
+    }
+  })))), createElement(Spacer, {
+    margin: 8
+  }), createElement(LocalFonts, null)), libraryFontSelected && createElement(LibraryFontDetails, {
+    font: libraryFontSelected,
+    isConfirmDeleteOpen: isConfirmDeleteOpen,
+    handleConfirmUninstall: handleConfirmUninstall,
+    handleCancelUninstall: handleCancelUninstall
+  }));
+}
+function Footer({
+  shouldDisplayDeleteButton,
+  handleUninstallClick
+}) {
+  const {
+    saveFontFamilies,
+    fontFamiliesHasChanges,
+    isInstalling
+  } = useContext(FontLibraryContext);
+  return createElement(HStack, {
+    justify: "space-between"
+  }, isInstalling && createElement(ProgressBar, null), createElement("div", null, shouldDisplayDeleteButton && createElement(Button, {
+    variant: "tertiary",
+    onClick: handleUninstallClick
+  }, __('Delete'))), createElement(Button, {
+    disabled: !fontFamiliesHasChanges,
+    variant: "primary",
+    onClick: saveFontFamilies
+  }, __('Update')));
+}
+export default InstalledFonts;
+//# sourceMappingURL=installed-fonts.js.map

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

@@ -0,0 +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</>\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<Spacer margin={ 8 } />\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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"}

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

@@ -0,0 +1,36 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+import { Icon } from '@wordpress/components';
+import { chevronRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import FontCard from './font-card';
+import { FontLibraryContext } from './context';
+function LibraryFontCard({
+  font,
+  ...props
+}) {
+  const {
+    getFontFacesActivated
+  } = useContext(FontLibraryContext);
+  const variantsInstalled = font.fontFace?.length || 1;
+  const variantsActive = getFontFacesActivated(font.slug, font.source).length;
+  const variantsText = sprintf( /* translators: %1$d: Active font variants, %2$d: Total font variants */
+  __('%1$s/%2$s variants active'), variantsActive, variantsInstalled);
+  return createElement(FontCard, {
+    font: font,
+    variantsText: variantsText,
+    actionHandler: createElement(Icon, {
+      icon: chevronRight
+    }),
+    ...props
+  });
+}
+export default LibraryFontCard;
+//# sourceMappingURL=library-font-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__","sprintf","useContext","Icon","chevronRight","FontCard","FontLibraryContext","LibraryFontCard","font","props","getFontFacesActivated","variantsInstalled","fontFace","length","variantsActive","slug","source","variantsText","createElement","actionHandler","icon"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-card.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\nimport { Icon } from '@wordpress/components';\nimport { chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport FontCard from './font-card';\nimport { FontLibraryContext } from './context';\n\nfunction LibraryFontCard( { font, ...props } ) {\n\tconst { getFontFacesActivated } = useContext( FontLibraryContext );\n\n\tconst variantsInstalled = font.fontFace?.length || 1;\n\tconst variantsActive = getFontFacesActivated(\n\t\tfont.slug,\n\t\tfont.source\n\t).length;\n\tconst variantsText = sprintf(\n\t\t/* translators: %1$d: Active font variants, %2$d: Total font variants */\n\t\t__( '%1$s/%2$s variants active' ),\n\t\tvariantsActive,\n\t\tvariantsInstalled\n\t);\n\n\treturn (\n\t\t<FontCard\n\t\t\tfont={ font }\n\t\t\tvariantsText={ variantsText }\n\t\t\tactionHandler={ <Icon icon={ chevronRight } /> }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default LibraryFontCard;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,IAAI,QAAQ,uBAAuB;AAC5C,SAASC,YAAY,QAAQ,kBAAkB;;AAE/C;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,SAASC,kBAAkB,QAAQ,WAAW;AAE9C,SAASC,eAAeA,CAAE;EAAEC,IAAI;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC9C,MAAM;IAAEC;EAAsB,CAAC,GAAGR,UAAU,CAAEI,kBAAmB,CAAC;EAElE,MAAMK,iBAAiB,GAAGH,IAAI,CAACI,QAAQ,EAAEC,MAAM,IAAI,CAAC;EACpD,MAAMC,cAAc,GAAGJ,qBAAqB,CAC3CF,IAAI,CAACO,IAAI,EACTP,IAAI,CAACQ,MACN,CAAC,CAACH,MAAM;EACR,MAAMI,YAAY,GAAGhB,OAAO,EAC3B;EACAD,EAAE,CAAE,2BAA4B,CAAC,EACjCc,cAAc,EACdH,iBACD,CAAC;EAED,OACCO,aAAA,CAACb,QAAQ;IACRG,IAAI,EAAGA,IAAM;IACbS,YAAY,EAAGA,YAAc;IAC7BE,aAAa,EAAGD,aAAA,CAACf,IAAI;MAACiB,IAAI,EAAGhB;IAAc,CAAE,CAAG;IAAA,GAC3CK;EAAK,CACV,CAAC;AAEJ;AAEA,eAAeF,eAAe"}

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

@@ -0,0 +1,34 @@
+import { createElement, Fragment } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack, __experimentalSpacer as Spacer } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import LibraryFontVariant from './library-font-variant';
+function LibraryFontDetails({
+  font
+}) {
+  const fontFaces = font.fontFace && font.fontFace.length ? font.fontFace.sort((a, b) => a.fontWeight > b.fontWeight ? 1 : -1) : [{
+    fontFamily: font.fontFamily,
+    fontStyle: 'normal',
+    fontWeight: '400'
+  }];
+  return createElement(Fragment, null, createElement(Spacer, {
+    margin: 4
+  }), createElement(VStack, {
+    spacing: 0
+  }, createElement(Spacer, {
+    margin: 8
+  }), fontFaces.map((face, i) => createElement(LibraryFontVariant, {
+    font: font,
+    face: face,
+    key: `face${i}`
+  }))), createElement(Spacer, {
+    margin: 8
+  }));
+}
+export default LibraryFontDetails;
+//# sourceMappingURL=library-font-details.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalVStack","VStack","__experimentalSpacer","Spacer","LibraryFontVariant","LibraryFontDetails","font","fontFaces","fontFace","length","sort","a","b","fontWeight","fontFamily","fontStyle","createElement","Fragment","margin","spacing","map","face","i","key"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-details.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport LibraryFontVariant from './library-font-variant';\n\nfunction LibraryFontDetails( { font } ) {\n\tconst fontFaces =\n\t\tfont.fontFace && font.fontFace.length\n\t\t\t? font.fontFace.sort( ( a, b ) =>\n\t\t\t\t\ta.fontWeight > b.fontWeight ? 1 : -1\n\t\t\t  )\n\t\t\t: [\n\t\t\t\t\t{\n\t\t\t\t\t\tfontFamily: font.fontFamily,\n\t\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\t\tfontWeight: '400',\n\t\t\t\t\t},\n\t\t\t  ];\n\n\treturn (\n\t\t<>\n\t\t\t<Spacer margin={ 4 } />\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t{ fontFaces.map( ( face, i ) => (\n\t\t\t\t\t<LibraryFontVariant\n\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t\t<Spacer margin={ 8 } />\n\t\t</>\n\t);\n}\n\nexport default LibraryFontDetails;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,wBAAwB;AAEvD,SAASC,kBAAkBA,CAAE;EAAEC;AAAK,CAAC,EAAG;EACvC,MAAMC,SAAS,GACdD,IAAI,CAACE,QAAQ,IAAIF,IAAI,CAACE,QAAQ,CAACC,MAAM,GAClCH,IAAI,CAACE,QAAQ,CAACE,IAAI,CAAE,CAAEC,CAAC,EAAEC,CAAC,KAC1BD,CAAC,CAACE,UAAU,GAAGD,CAAC,CAACC,UAAU,GAAG,CAAC,GAAG,CAAC,CACnC,CAAC,GACD,CACA;IACCC,UAAU,EAAER,IAAI,CAACQ,UAAU;IAC3BC,SAAS,EAAE,QAAQ;IACnBF,UAAU,EAAE;EACb,CAAC,CACA;EAEL,OACCG,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACb,MAAM;IAACe,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBF,aAAA,CAACf,MAAM;IAACkB,OAAO,EAAG;EAAG,GACpBH,aAAA,CAACb,MAAM;IAACe,MAAM,EAAG;EAAG,CAAE,CAAC,EACrBX,SAAS,CAACa,GAAG,CAAE,CAAEC,IAAI,EAAEC,CAAC,KACzBN,aAAA,CAACZ,kBAAkB;IAClBE,IAAI,EAAGA,IAAM;IACbe,IAAI,EAAGA,IAAM;IACbE,GAAG,EAAI,OAAOD,CAAG;EAAG,CACpB,CACA,CACK,CAAC,EACTN,aAAA,CAACb,MAAM;IAACe,MAAM,EAAG;EAAG,CAAE,CACrB,CAAC;AAEL;AAEA,eAAeb,kBAAkB"}

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

@@ -0,0 +1,50 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { CheckboxControl, Flex } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import { getFontFaceVariantName } from './utils';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './context';
+import FontFaceDemo from './font-demo';
+function LibraryFontVariant({
+  face,
+  font
+}) {
+  const {
+    isFontActivated,
+    toggleActivateFont
+  } = useContext(FontLibraryContext);
+  const isIstalled = font?.fontFace ? isFontActivated(font.slug, face.fontStyle, face.fontWeight, font.source) : isFontActivated(font.slug, null, null, font.source);
+  const handleToggleActivation = () => {
+    if (font?.fontFace) {
+      toggleActivateFont(font, face);
+      return;
+    }
+    toggleActivateFont(font);
+  };
+  const displayName = font.name + ' ' + getFontFaceVariantName(face);
+  return createElement("div", {
+    className: "font-library-modal__library-font-variant"
+  }, createElement(Flex, {
+    justify: "space-between",
+    align: "center",
+    gap: "1rem"
+  }, createElement(FontFaceDemo, {
+    fontFace: face,
+    text: displayName
+  }), createElement(CheckboxControl, {
+    checked: isIstalled,
+    onChange: handleToggleActivation,
+    __nextHasNoMarginBottom: true
+  })));
+}
+export default LibraryFontVariant;
+//# sourceMappingURL=library-font-variant.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useContext","CheckboxControl","Flex","getFontFaceVariantName","FontLibraryContext","FontFaceDemo","LibraryFontVariant","face","font","isFontActivated","toggleActivateFont","isIstalled","fontFace","slug","fontStyle","fontWeight","source","handleToggleActivation","displayName","name","createElement","className","justify","align","gap","text","checked","onChange","__nextHasNoMarginBottom"],"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 { CheckboxControl, Flex } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport { getFontFaceVariantName } from './utils';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport FontFaceDemo from './font-demo';\n\nfunction LibraryFontVariant( { face, font } ) {\n\tconst { isFontActivated, toggleActivateFont } =\n\t\tuseContext( FontLibraryContext );\n\n\tconst isIstalled = font?.fontFace\n\t\t? isFontActivated(\n\t\t\t\tfont.slug,\n\t\t\t\tface.fontStyle,\n\t\t\t\tface.fontWeight,\n\t\t\t\tfont.source\n\t\t  )\n\t\t: isFontActivated( font.slug, null, null, font.source );\n\n\tconst handleToggleActivation = () => {\n\t\tif ( font?.fontFace ) {\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\n\treturn (\n\t\t<div className=\"font-library-modal__library-font-variant\">\n\t\t\t<Flex justify=\"space-between\" align=\"center\" gap=\"1rem\">\n\t\t\t\t<FontFaceDemo fontFace={ face } text={ displayName } />\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tchecked={ isIstalled }\n\t\t\t\t\tonChange={ handleToggleActivation }\n\t\t\t\t\t__nextHasNoMarginBottom={ true }\n\t\t\t\t/>\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,SAASC,eAAe,EAAEC,IAAI,QAAQ,uBAAuB;AAC7D;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,SAAS;;AAEhD;AACA;AACA;AACA,SAASC,kBAAkB,QAAQ,WAAW;AAC9C,OAAOC,YAAY,MAAM,aAAa;AAEtC,SAASC,kBAAkBA,CAAE;EAAEC,IAAI;EAAEC;AAAK,CAAC,EAAG;EAC7C,MAAM;IAAEC,eAAe;IAAEC;EAAmB,CAAC,GAC5CV,UAAU,CAAEI,kBAAmB,CAAC;EAEjC,MAAMO,UAAU,GAAGH,IAAI,EAAEI,QAAQ,GAC9BH,eAAe,CACfD,IAAI,CAACK,IAAI,EACTN,IAAI,CAACO,SAAS,EACdP,IAAI,CAACQ,UAAU,EACfP,IAAI,CAACQ,MACL,CAAC,GACDP,eAAe,CAAED,IAAI,CAACK,IAAI,EAAE,IAAI,EAAE,IAAI,EAAEL,IAAI,CAACQ,MAAO,CAAC;EAExD,MAAMC,sBAAsB,GAAGA,CAAA,KAAM;IACpC,IAAKT,IAAI,EAAEI,QAAQ,EAAG;MACrBF,kBAAkB,CAAEF,IAAI,EAAED,IAAK,CAAC;MAChC;IACD;IACAG,kBAAkB,CAAEF,IAAK,CAAC;EAC3B,CAAC;EAED,MAAMU,WAAW,GAAGV,IAAI,CAACW,IAAI,GAAG,GAAG,GAAGhB,sBAAsB,CAAEI,IAAK,CAAC;EAEpE,OACCa,aAAA;IAAKC,SAAS,EAAC;EAA0C,GACxDD,aAAA,CAAClB,IAAI;IAACoB,OAAO,EAAC,eAAe;IAACC,KAAK,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAM,GACtDJ,aAAA,CAACf,YAAY;IAACO,QAAQ,EAAGL,IAAM;IAACkB,IAAI,EAAGP;EAAa,CAAE,CAAC,EACvDE,aAAA,CAACnB,eAAe;IACfyB,OAAO,EAAGf,UAAY;IACtBgB,QAAQ,EAAGV,sBAAwB;IACnCW,uBAAuB,EAAG;EAAM,CAChC,CACI,CACF,CAAC;AAER;AAEA,eAAetB,kBAAkB"}

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

@@ -0,0 +1,135 @@
+import { createElement, Fragment } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, DropZone, __experimentalSpacer as Spacer, __experimentalText as Text, FormFileUpload } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ALLOWED_FILE_EXTENSIONS } from './utils/constants';
+import { FontLibraryContext } from './context';
+import { Font } from '../../../../lib/lib-font.browser';
+import makeFamiliesFromFaces from './utils/make-families-from-faces';
+import { loadFontFaceInBrowser } from './utils';
+function LocalFonts() {
+  const {
+    installFonts
+  } = useContext(FontLibraryContext);
+  const handleDropZone = files => {
+    handleFilesUpload(files);
+  };
+  const onFilesUpload = event => {
+    handleFilesUpload(event.target.files);
+  };
+
+  /**
+   * Filters the selected files to only allow the ones with the allowed extensions
+   *
+   * @param {Array} files The files to be filtered
+   * @return {void}
+   */
+  const handleFilesUpload = files => {
+    const uniqueFilenames = new Set();
+    const selectedFiles = [...files];
+    const allowedFiles = selectedFiles.filter(file => {
+      if (uniqueFilenames.has(file.name)) {
+        return false; // Discard duplicates
+      }
+      // Eliminates files that are not 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 false; // Discard file extension not allowed
+    });
+
+    if (allowedFiles.length > 0) {
+      loadFiles(allowedFiles);
+    }
+  };
+
+  /**
+   * Loads the selected files and reads the font metadata
+   *
+   * @param {Array} files The files to be loaded
+   * @return {void}
+   */
+  const loadFiles = async files => {
+    const fontFacesLoaded = await Promise.all(files.map(async fontFile => {
+      const fontFaceData = await getFontFaceMetadata(fontFile);
+      await loadFontFaceInBrowser(fontFaceData, fontFaceData.file, 'all');
+      return fontFaceData;
+    }));
+    await handleInstall(fontFacesLoaded);
+  };
+
+  // Create a function to read the file as array buffer
+  async function readFileAsArrayBuffer(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new window.FileReader();
+      reader.readAsArrayBuffer(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reject;
+    });
+  }
+  const getFontFaceMetadata = async fontFile => {
+    const buffer = await readFileAsArrayBuffer(fontFile);
+    const fontObj = new Font('Uploaded Font');
+    fontObj.fromDataBuffer(buffer, fontFile.name);
+    // Assuming that fromDataBuffer triggers onload event and returning a Promise
+    const onloadEvent = await new Promise(resolve => fontObj.onload = resolve);
+    const font = onloadEvent.detail.font;
+    const {
+      name
+    } = font.opentype.tables;
+    const fontName = name.get(16) || name.get(1);
+    const isItalic = name.get(2).toLowerCase().includes('italic');
+    const fontWeight = font.opentype.tables['OS/2'].usWeightClass || 'normal';
+    const isVariable = !!font.opentype.tables.fvar;
+    const weightAxis = isVariable && font.opentype.tables.fvar.axes.find(({
+      tag
+    }) => tag === 'wght');
+    const weightRange = weightAxis ? `${weightAxis.minValue} ${weightAxis.maxValue}` : null;
+    return {
+      file: fontFile,
+      fontFamily: fontName,
+      fontStyle: isItalic ? 'italic' : 'normal',
+      fontWeight: weightRange || fontWeight
+    };
+  };
+
+  /**
+   * Creates the font family definition and sends it to the server
+   *
+   * @param {Array} fontFaces The font faces to be installed
+   * @return {void}
+   */
+  const handleInstall = async fontFaces => {
+    const fontFamilies = makeFamiliesFromFaces(fontFaces);
+    await installFonts(fontFamilies);
+  };
+  return createElement(Fragment, null, createElement(Text, {
+    className: "font-library-modal__subtitle"
+  }, __('Upload Fonts')), createElement(Spacer, {
+    margin: 2
+  }), createElement(DropZone, {
+    onFilesDrop: handleDropZone
+  }), createElement(FormFileUpload, {
+    accept: ALLOWED_FILE_EXTENSIONS.map(ext => `.${ext}`).join(','),
+    multiple: true,
+    onChange: onFilesUpload,
+    render: ({
+      openFileDialog
+    }) => createElement(Button, {
+      className: "font-library-modal__upload-area",
+      onClick: openFileDialog
+    }, createElement("span", null, __('Drag and drop your font files here.')))
+  }));
+}
+export default LocalFonts;
+//# sourceMappingURL=local-fonts.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ *
+ */
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+export async function fetchInstallFonts(data) {
+  const config = {
+    path: '/wp/v2/fonts',
+    method: 'POST',
+    body: data
+  };
+  return apiFetch(config);
+}
+export async function fetchUninstallFonts(fonts) {
+  const data = {
+    fontFamilies: fonts
+  };
+  const config = {
+    path: '/wp/v2/fonts',
+    method: 'DELETE',
+    data
+  };
+  return apiFetch(config);
+}
+//# sourceMappingURL=resolvers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["apiFetch","fetchInstallFonts","data","config","path","method","body","fetchUninstallFonts","fonts","fontFamilies"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/resolvers.js"],"sourcesContent":["/**\n * WordPress dependencies\n *\n */\n/**\n * WordPress dependencies\n */\nimport apiFetch from '@wordpress/api-fetch';\n\nexport async function fetchInstallFonts( data ) {\n\tconst config = {\n\t\tpath: '/wp/v2/fonts',\n\t\tmethod: 'POST',\n\t\tbody: data,\n\t};\n\treturn apiFetch( config );\n}\n\nexport async function fetchUninstallFonts( fonts ) {\n\tconst data = {\n\t\tfontFamilies: fonts,\n\t};\n\tconst config = {\n\t\tpath: '/wp/v2/fonts',\n\t\tmethod: 'DELETE',\n\t\tdata,\n\t};\n\treturn apiFetch( config );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,QAAQ,MAAM,sBAAsB;AAE3C,OAAO,eAAeC,iBAAiBA,CAAEC,IAAI,EAAG;EAC/C,MAAMC,MAAM,GAAG;IACdC,IAAI,EAAE,cAAc;IACpBC,MAAM,EAAE,MAAM;IACdC,IAAI,EAAEJ;EACP,CAAC;EACD,OAAOF,QAAQ,CAAEG,MAAO,CAAC;AAC1B;AAEA,OAAO,eAAeI,mBAAmBA,CAAEC,KAAK,EAAG;EAClD,MAAMN,IAAI,GAAG;IACZO,YAAY,EAAED;EACf,CAAC;EACD,MAAML,MAAM,GAAG;IACdC,IAAI,EAAE,cAAc;IACpBC,MAAM,EAAE,QAAQ;IAChBH;EACD,CAAC;EACD,OAAOF,QAAQ,CAAEG,MAAO,CAAC;AAC1B"}

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

@@ -0,0 +1,37 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text, __experimentalHeading as Heading, __experimentalVStack as VStack, __experimentalSpacer as Spacer, __experimentalHStack as HStack, Button } from '@wordpress/components';
+import { chevronLeft } from '@wordpress/icons';
+function TabLayout({
+  title,
+  description,
+  handleBack,
+  children,
+  footer
+}) {
+  return createElement("div", {
+    className: "font-library-modal__tab-layout"
+  }, createElement(Spacer, {
+    margin: 4
+  }), createElement(VStack, {
+    spacing: 4,
+    justify: "space-between"
+  }, createElement("header", null, createElement(VStack, {
+    spacing: 2
+  }, createElement(HStack, {
+    justify: "flex-start"
+  }, !!handleBack && createElement(Button, {
+    variant: "tertiary",
+    onClick: handleBack,
+    icon: chevronLeft,
+    isSmall: true
+  }), title && createElement(Heading, {
+    level: 2,
+    size: 13,
+    className: "edit-site-global-styles-header"
+  }, title)), description && createElement(Text, null, description))), createElement("main", null, children), createElement("footer", null, footer)));
+}
+export default TabLayout;
+//# sourceMappingURL=tab-layout.js.map