@wordpress/edit-site 5.27.1 → 5.28.0

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

@@ -1 +1 @@
-{"version":3,"names":["__","Modal","privateApis","componentsPrivateApis","useContext","InstalledFonts","FontCollection","UploadFonts","FontLibraryContext","unlock","Tabs","DEFAULT_TABS","id","title","tabsFromCollections","collections","map","slug","name","length","FontLibraryModal","onRequestClose","initialTabId","tabs","createElement","isFullScreen","className","TabList","Tab","key","tabId","contents","TabPanel","focusable"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} 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';\nimport { unlock } from '../../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst DEFAULT_TABS = [\n\t{\n\t\tid: 'installed-fonts',\n\t\ttitle: __( 'Library' ),\n\t},\n\t{\n\t\tid: 'upload-fonts',\n\t\ttitle: __( 'Upload' ),\n\t},\n];\n\nconst tabsFromCollections = ( collections ) =>\n\tcollections.map( ( { slug, name } ) => ( {\n\t\tid: slug,\n\t\ttitle:\n\t\t\tcollections.length === 1 && slug === 'default-font-collection'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tinitialTabId = '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<div className=\"font-library-modal__tabs\">\n\t\t\t\t<Tabs initialTabId={ initialTabId }>\n\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t{ tabs.map( ( { id, title } ) => (\n\t\t\t\t\t\t\t<Tabs.Tab key={ id } tabId={ id }>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( { id } ) => {\n\t\t\t\t\t\tlet contents;\n\t\t\t\t\t\tswitch ( id ) {\n\t\t\t\t\t\t\tcase 'upload-fonts':\n\t\t\t\t\t\t\t\tcontents = <UploadFonts />;\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\t\t\tcontents = <InstalledFonts />;\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\tcontents = <FontCollection slug={ id } />;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t\ttabId={ id }\n\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ contents }\n\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SACCC,KAAK,EACLC,WAAW,IAAIC,qBAAqB,QAC9B,uBAAuB;AAC9B,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;AAC9C,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,MAAM;EAAEC;AAAK,CAAC,GAAGD,MAAM,CAAEN,qBAAsB,CAAC;AAEhD,MAAMQ,YAAY,GAAG,CACpB;EACCC,EAAE,EAAE,iBAAiB;EACrBC,KAAK,EAAEb,EAAE,CAAE,SAAU;AACtB,CAAC,EACD;EACCY,EAAE,EAAE,cAAc;EAClBC,KAAK,EAAEb,EAAE,CAAE,QAAS;AACrB,CAAC,CACD;AAED,MAAMc,mBAAmB,GAAKC,WAAW,IACxCA,WAAW,CAACC,GAAG,CAAE,CAAE;EAAEC,IAAI;EAAEC;AAAK,CAAC,MAAQ;EACxCN,EAAE,EAAEK,IAAI;EACRJ,KAAK,EACJE,WAAW,CAACI,MAAM,KAAK,CAAC,IAAIF,IAAI,KAAK,yBAAyB,GAC3DjB,EAAE,CAAE,eAAgB,CAAC,GACrBkB;AACL,CAAC,CAAG,CAAC;AAEN,SAASE,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,YAAY,GAAG;AAChB,CAAC,EAAG;EACH,MAAM;IAAEP;EAAY,CAAC,GAAGX,UAAU,CAAEI,kBAAmB,CAAC;EAExD,MAAMe,IAAI,GAAG,CACZ,GAAGZ,YAAY,EACf,GAAGG,mBAAmB,CAAEC,WAAW,IAAI,EAAG,CAAC,CAC3C;EAED,OACCS,aAAA,CAACvB,KAAK;IACLY,KAAK,EAAGb,EAAE,CAAE,OAAQ,CAAG;IACvBqB,cAAc,EAAGA,cAAgB;IACjCI,YAAY;IACZC,SAAS,EAAC;EAAoB,GAE9BF,aAAA;IAAKE,SAAS,EAAC;EAA0B,GACxCF,aAAA,CAACd,IAAI;IAACY,YAAY,EAAGA;EAAc,GAClCE,aAAA,CAACd,IAAI,CAACiB,OAAO,QACVJ,IAAI,CAACP,GAAG,CAAE,CAAE;IAAEJ,EAAE;IAAEC;EAAM,CAAC,KAC1BW,aAAA,CAACd,IAAI,CAACkB,GAAG;IAACC,GAAG,EAAGjB,EAAI;IAACkB,KAAK,EAAGlB;EAAI,GAC9BC,KACO,CACT,CACW,CAAC,EACbU,IAAI,CAACP,GAAG,CAAE,CAAE;IAAEJ;EAAG,CAAC,KAAM;IACzB,IAAImB,QAAQ;IACZ,QAASnB,EAAE;MACV,KAAK,cAAc;QAClBmB,QAAQ,GAAGP,aAAA,CAACjB,WAAW,MAAE,CAAC;QAC1B;MACD,KAAK,iBAAiB;QACrBwB,QAAQ,GAAGP,aAAA,CAACnB,cAAc,MAAE,CAAC;QAC7B;MACD;QACC0B,QAAQ,GAAGP,aAAA,CAAClB,cAAc;UAACW,IAAI,EAAGL;QAAI,CAAE,CAAC;IAC3C;IACA,OACCY,aAAA,CAACd,IAAI,CAACsB,QAAQ;MACbH,GAAG,EAAGjB,EAAI;MACVkB,KAAK,EAAGlB,EAAI;MACZqB,SAAS,EAAG;IAAO,GAEjBF,QACY,CAAC;EAElB,CAAE,CACG,CACF,CACC,CAAC;AAEV;AAEA,eAAeX,gBAAgB"}
+{"version":3,"names":["__","Modal","privateApis","componentsPrivateApis","useContext","InstalledFonts","FontCollection","UploadFonts","FontLibraryContext","unlock","Tabs","DEFAULT_TABS","id","title","tabsFromCollections","collections","map","slug","name","length","FontLibraryModal","onRequestClose","initialTabId","setNotice","tabs","onSelect","createElement","isFullScreen","className","TabList","Tab","key","tabId","contents","TabPanel","focusable"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} 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';\nimport { unlock } from '../../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst DEFAULT_TABS = [\n\t{\n\t\tid: 'installed-fonts',\n\t\ttitle: __( 'Library' ),\n\t},\n\t{\n\t\tid: 'upload-fonts',\n\t\ttitle: __( 'Upload' ),\n\t},\n];\n\nconst tabsFromCollections = ( collections ) =>\n\tcollections.map( ( { slug, name } ) => ( {\n\t\tid: slug,\n\t\ttitle:\n\t\t\tcollections.length === 1 && slug === 'google-fonts'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tinitialTabId = 'installed-fonts',\n} ) {\n\tconst { collections, setNotice } = useContext( FontLibraryContext );\n\n\tconst tabs = [\n\t\t...DEFAULT_TABS,\n\t\t...tabsFromCollections( collections || [] ),\n\t];\n\n\t// Reset notice when new tab is selected.\n\tconst onSelect = () => {\n\t\tsetNotice( null );\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<div className=\"font-library-modal__tabs\">\n\t\t\t\t<Tabs initialTabId={ initialTabId } onSelect={ onSelect }>\n\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t{ tabs.map( ( { id, title } ) => (\n\t\t\t\t\t\t\t<Tabs.Tab key={ id } tabId={ id }>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( { id } ) => {\n\t\t\t\t\t\tlet contents;\n\t\t\t\t\t\tswitch ( id ) {\n\t\t\t\t\t\t\tcase 'upload-fonts':\n\t\t\t\t\t\t\t\tcontents = <UploadFonts />;\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\t\t\tcontents = <InstalledFonts />;\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\tcontents = <FontCollection slug={ id } />;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t\ttabId={ id }\n\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ contents }\n\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SACCC,KAAK,EACLC,WAAW,IAAIC,qBAAqB,QAC9B,uBAAuB;AAC9B,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;AAC9C,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,MAAM;EAAEC;AAAK,CAAC,GAAGD,MAAM,CAAEN,qBAAsB,CAAC;AAEhD,MAAMQ,YAAY,GAAG,CACpB;EACCC,EAAE,EAAE,iBAAiB;EACrBC,KAAK,EAAEb,EAAE,CAAE,SAAU;AACtB,CAAC,EACD;EACCY,EAAE,EAAE,cAAc;EAClBC,KAAK,EAAEb,EAAE,CAAE,QAAS;AACrB,CAAC,CACD;AAED,MAAMc,mBAAmB,GAAKC,WAAW,IACxCA,WAAW,CAACC,GAAG,CAAE,CAAE;EAAEC,IAAI;EAAEC;AAAK,CAAC,MAAQ;EACxCN,EAAE,EAAEK,IAAI;EACRJ,KAAK,EACJE,WAAW,CAACI,MAAM,KAAK,CAAC,IAAIF,IAAI,KAAK,cAAc,GAChDjB,EAAE,CAAE,eAAgB,CAAC,GACrBkB;AACL,CAAC,CAAG,CAAC;AAEN,SAASE,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,YAAY,GAAG;AAChB,CAAC,EAAG;EACH,MAAM;IAAEP,WAAW;IAAEQ;EAAU,CAAC,GAAGnB,UAAU,CAAEI,kBAAmB,CAAC;EAEnE,MAAMgB,IAAI,GAAG,CACZ,GAAGb,YAAY,EACf,GAAGG,mBAAmB,CAAEC,WAAW,IAAI,EAAG,CAAC,CAC3C;;EAED;EACA,MAAMU,QAAQ,GAAGA,CAAA,KAAM;IACtBF,SAAS,CAAE,IAAK,CAAC;EAClB,CAAC;EAED,OACCG,aAAA,CAACzB,KAAK;IACLY,KAAK,EAAGb,EAAE,CAAE,OAAQ,CAAG;IACvBqB,cAAc,EAAGA,cAAgB;IACjCM,YAAY;IACZC,SAAS,EAAC;EAAoB,GAE9BF,aAAA;IAAKE,SAAS,EAAC;EAA0B,GACxCF,aAAA,CAAChB,IAAI;IAACY,YAAY,EAAGA,YAAc;IAACG,QAAQ,EAAGA;EAAU,GACxDC,aAAA,CAAChB,IAAI,CAACmB,OAAO,QACVL,IAAI,CAACR,GAAG,CAAE,CAAE;IAAEJ,EAAE;IAAEC;EAAM,CAAC,KAC1Ba,aAAA,CAAChB,IAAI,CAACoB,GAAG;IAACC,GAAG,EAAGnB,EAAI;IAACoB,KAAK,EAAGpB;EAAI,GAC9BC,KACO,CACT,CACW,CAAC,EACbW,IAAI,CAACR,GAAG,CAAE,CAAE;IAAEJ;EAAG,CAAC,KAAM;IACzB,IAAIqB,QAAQ;IACZ,QAASrB,EAAE;MACV,KAAK,cAAc;QAClBqB,QAAQ,GAAGP,aAAA,CAACnB,WAAW,MAAE,CAAC;QAC1B;MACD,KAAK,iBAAiB;QACrB0B,QAAQ,GAAGP,aAAA,CAACrB,cAAc,MAAE,CAAC;QAC7B;MACD;QACC4B,QAAQ,GAAGP,aAAA,CAACpB,cAAc;UAACW,IAAI,EAAGL;QAAI,CAAE,CAAC;IAC3C;IACA,OACCc,aAAA,CAAChB,IAAI,CAACwB,QAAQ;MACbH,GAAG,EAAGnB,EAAI;MACVoB,KAAK,EAAGpB,EAAI;MACZuB,SAAS,EAAG;IAAO,GAEjBF,QACY,CAAC;EAElB,CAAE,CACG,CACF,CACC,CAAC;AAEV;AAEA,eAAeb,gBAAgB"}

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

@@ -4,7 +4,7 @@ import { createElement, Fragment } from "react";
  */
 import { __ } from '@wordpress/i18n';
 import { useContext, useEffect, useState } from '@wordpress/element';
-import { privateApis as componentsPrivateApis, __experimentalHStack as HStack, __experimentalSpacer as Spacer, Button, Spinner, Notice, FlexItem } from '@wordpress/components';
+import { privateApis as componentsPrivateApis, __experimentalHStack as HStack, __experimentalSpacer as Spacer, Button, Spinner, FlexItem } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -27,7 +27,9 @@ function InstalledFonts() {
     handleSetLibraryFontSelected,
     refreshLibrary,
     uninstallFontFamily,
-    isResolvingLibrary
+    isResolvingLibrary,
+    notice,
+    setNotice
   } = useContext(FontLibraryContext);
   const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
   const handleUnselectFont = () => {
@@ -36,8 +38,8 @@ function InstalledFonts() {
   const handleSelectFont = font => {
     handleSetLibraryFontSelected(font);
   };
-  const [notice, setNotice] = useState(null);
   const handleConfirmUninstall = async () => {
+    setNotice(null);
     try {
       await uninstallFontFamily(libraryFontSelected);
       setNotice({
@@ -68,19 +70,10 @@ function InstalledFonts() {
     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(TabPanelLayout, {
     title: libraryFontSelected?.name || '',
     description: tabDescription,
+    notice: notice,
     handleBack: !!libraryFontSelected && handleUnselectFont,
     footer: createElement(Footer, {
       shouldDisplayDeleteButton: shouldDisplayDeleteButton,
@@ -91,17 +84,11 @@ function InstalledFonts() {
     isConfirmDeleteOpen: isConfirmDeleteOpen,
     handleConfirmUninstall: handleConfirmUninstall,
     handleCancelUninstall: handleCancelUninstall
-  }), notice && createElement(Fragment, null, createElement(FlexItem, null, createElement(Spacer, {
+  }), !libraryFontSelected && createElement(Fragment, null, isResolvingLibrary && 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, {
+  }), createElement(Spinner, null), createElement(Spacer, {
     margin: 2
-  }), createElement(FontsGrid, null, baseCustomFonts.map(font => createElement(LibraryFontCard, {
+  })), baseCustomFonts.length > 0 && createElement(Fragment, null, createElement(FontsGrid, null, baseCustomFonts.map(font => createElement(LibraryFontCard, {
     font: font,
     key: font.slug,
     onClick: () => {
@@ -134,14 +121,16 @@ function Footer({
     isInstalling
   } = useContext(FontLibraryContext);
   return createElement(HStack, {
-    justify: "space-between"
+    justify: "flex-end"
   }, isInstalling && createElement(ProgressBar, null), createElement("div", null, shouldDisplayDeleteButton && createElement(Button, {
+    isDestructive: true,
     variant: "tertiary",
     onClick: handleUninstallClick
   }, __('Delete'))), createElement(Button, {
-    disabled: !fontFamiliesHasChanges,
     variant: "primary",
-    onClick: saveFontFamilies
+    onClick: saveFontFamilies,
+    disabled: !fontFamiliesHasChanges,
+    __experimentalIsFocusable: true
   }, __('Update')));
 }
 export default InstalledFonts;

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","Notice","FlexItem","TabPanelLayout","FontLibraryContext","FontsGrid","LibraryFontDetails","LibraryFontCard","ConfirmDeleteDialog","unlock","ProgressBar","InstalledFonts","baseCustomFonts","libraryFontSelected","baseThemeFonts","handleSetLibraryFontSelected","refreshLibrary","uninstallFontFamily","isResolvingLibrary","isConfirmDeleteOpen","setIsConfirmDeleteOpen","handleUnselectFont","handleSelectFont","font","notice","setNotice","handleConfirmUninstall","type","message","error","handleUninstallClick","handleCancelUninstall","tabDescription","shouldDisplayDeleteButton","source","timeout","setTimeout","clearTimeout","createElement","title","name","description","handleBack","footer","Footer","Fragment","margin","isDismissible","status","className","length","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 TabPanelLayout from './tab-panel-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 { unlock } from '../../../lock-unlock';\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\tbaseThemeFonts,\n\t\thandleSetLibraryFontSelected,\n\t\trefreshLibrary,\n\t\tuninstallFontFamily,\n\t\tisResolvingLibrary,\n\t} = 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\ttry {\n\t\t\tawait uninstallFontFamily( libraryFontSelected );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family uninstalled successfully.' ),\n\t\t\t} );\n\n\t\t\t// If the font was succesfully uninstalled it is unselected.\n\t\t\thandleUnselectFont();\n\t\t\tsetIsConfirmDeleteOpen( false );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage:\n\t\t\t\t\t__( 'There was an error uninstalling the font family. ' ) +\n\t\t\t\t\terror.message,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst handleUninstallClick = async () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst handleCancelUninstall = () => {\n\t\tsetIsConfirmDeleteOpen( false );\n\t};\n\n\tconst tabDescription = !! libraryFontSelected\n\t\t? __(\n\t\t\t\t'Choose font variants. Keep in mind that too many variants could make your site slower.'\n\t\t  )\n\t\t: null;\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected && libraryFontSelected?.source !== 'theme';\n\n\tuseEffect( () => {\n\t\thandleSelectFont( libraryFontSelected );\n\t\trefreshLibrary();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\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<TabPanelLayout\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</TabPanelLayout>\n\t);\n}\n\nfunction Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {\n\tconst { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =\n\t\tuseContext( FontLibraryContext );\n\treturn (\n\t\t<HStack justify=\"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","FlexItem","TabPanelLayout","FontLibraryContext","FontsGrid","LibraryFontDetails","LibraryFontCard","ConfirmDeleteDialog","unlock","ProgressBar","InstalledFonts","baseCustomFonts","libraryFontSelected","baseThemeFonts","handleSetLibraryFontSelected","refreshLibrary","uninstallFontFamily","isResolvingLibrary","notice","setNotice","isConfirmDeleteOpen","setIsConfirmDeleteOpen","handleUnselectFont","handleSelectFont","font","handleConfirmUninstall","type","message","error","handleUninstallClick","handleCancelUninstall","tabDescription","shouldDisplayDeleteButton","source","createElement","title","name","description","handleBack","footer","Footer","Fragment","margin","length","map","key","slug","onClick","saveFontFamilies","fontFamiliesHasChanges","isInstalling","justify","isDestructive","variant","disabled","__experimentalIsFocusable"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport {\n\tprivateApis as componentsPrivateApis,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tSpinner,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TabPanelLayout from './tab-panel-layout';\nimport { FontLibraryContext } from './context';\nimport FontsGrid from './fonts-grid';\nimport LibraryFontDetails from './library-font-details';\nimport LibraryFontCard from './library-font-card';\nimport ConfirmDeleteDialog from './confirm-delete-dialog';\nimport { unlock } from '../../../lock-unlock';\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\tbaseThemeFonts,\n\t\thandleSetLibraryFontSelected,\n\t\trefreshLibrary,\n\t\tuninstallFontFamily,\n\t\tisResolvingLibrary,\n\t\tnotice,\n\t\tsetNotice,\n\t} = useContext( FontLibraryContext );\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );\n\n\tconst handleUnselectFont = () => {\n\t\thandleSetLibraryFontSelected( null );\n\t};\n\n\tconst handleSelectFont = ( font ) => {\n\t\thandleSetLibraryFontSelected( font );\n\t};\n\n\tconst handleConfirmUninstall = async () => {\n\t\tsetNotice( null );\n\n\t\ttry {\n\t\t\tawait uninstallFontFamily( libraryFontSelected );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family uninstalled successfully.' ),\n\t\t\t} );\n\n\t\t\t// If the font was succesfully uninstalled it is unselected.\n\t\t\thandleUnselectFont();\n\t\t\tsetIsConfirmDeleteOpen( false );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage:\n\t\t\t\t\t__( 'There was an error uninstalling the font family. ' ) +\n\t\t\t\t\terror.message,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst handleUninstallClick = async () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst handleCancelUninstall = () => {\n\t\tsetIsConfirmDeleteOpen( false );\n\t};\n\n\tconst tabDescription = !! libraryFontSelected\n\t\t? __(\n\t\t\t\t'Choose font variants. Keep in mind that too many variants could make your site slower.'\n\t\t  )\n\t\t: null;\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected && libraryFontSelected?.source !== 'theme';\n\n\tuseEffect( () => {\n\t\thandleSelectFont( libraryFontSelected );\n\t\trefreshLibrary();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\treturn (\n\t\t<TabPanelLayout\n\t\t\ttitle={ libraryFontSelected?.name || '' }\n\t\t\tdescription={ tabDescription }\n\t\t\tnotice={ notice }\n\t\t\thandleBack={ !! libraryFontSelected && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\t<Footer\n\t\t\t\t\tshouldDisplayDeleteButton={ shouldDisplayDeleteButton }\n\t\t\t\t\thandleUninstallClick={ handleUninstallClick }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<ConfirmDeleteDialog\n\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t/>\n\n\t\t\t{ ! libraryFontSelected && (\n\t\t\t\t<>\n\t\t\t\t\t{ isResolvingLibrary && (\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t) }\n\t\t\t\t\t{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<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</TabPanelLayout>\n\t);\n}\n\nfunction Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {\n\tconst { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =\n\t\tuseContext( FontLibraryContext );\n\treturn (\n\t\t<HStack justify=\"flex-end\">\n\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t<div>\n\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisDestructive\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ handleUninstallClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ saveFontFamilies }\n\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\t__experimentalIsFocusable\n\t\t\t>\n\t\t\t\t{ __( 'Update' ) }\n\t\t\t</Button>\n\t\t</HStack>\n\t);\n}\n\nexport default InstalledFonts;\n"],"mappings":"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"}

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

@@ -19,7 +19,7 @@ function LibraryFontCard({
   } = useContext(FontLibraryContext);
   const variantsInstalled = font?.fontFace?.length > 0 ? 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 */
+  const variantsText = sprintf( /* translators: 1: Active font variants, 2: Total font variants. */
   __('%1$s/%2$s variants active'), variantsActive, variantsInstalled);
   return createElement(FontCard, {
     font: font,

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

@@ -1 +1 @@
-{"version":3,"names":["__","sprintf","useContext","FontCard","FontLibraryContext","LibraryFontCard","font","props","getFontFacesActivated","variantsInstalled","fontFace","length","variantsActive","slug","source","variantsText","createElement"],"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';\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 =\n\t\tfont?.fontFace?.length > 0 ? 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 font={ font } variantsText={ variantsText } { ...props } />\n\t);\n}\n\nexport default LibraryFontCard;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,UAAU,QAAQ,oBAAoB;;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,GAAGN,UAAU,CAAEE,kBAAmB,CAAC;EAElE,MAAMK,iBAAiB,GACtBH,IAAI,EAAEI,QAAQ,EAAEC,MAAM,GAAG,CAAC,GAAGL,IAAI,CAACI,QAAQ,CAACC,MAAM,GAAG,CAAC;EACtD,MAAMC,cAAc,GAAGJ,qBAAqB,CAC3CF,IAAI,CAACO,IAAI,EACTP,IAAI,CAACQ,MACN,CAAC,CAACH,MAAM;EACR,MAAMI,YAAY,GAAGd,OAAO,EAC3B;EACAD,EAAE,CAAE,2BAA4B,CAAC,EACjCY,cAAc,EACdH,iBACD,CAAC;EAED,OACCO,aAAA,CAACb,QAAQ;IAACG,IAAI,EAAGA,IAAM;IAACS,YAAY,EAAGA,YAAc;IAAA,GAAMR;EAAK,CAAI,CAAC;AAEvE;AAEA,eAAeF,eAAe"}
+{"version":3,"names":["__","sprintf","useContext","FontCard","FontLibraryContext","LibraryFontCard","font","props","getFontFacesActivated","variantsInstalled","fontFace","length","variantsActive","slug","source","variantsText","createElement"],"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';\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 =\n\t\tfont?.fontFace?.length > 0 ? 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: Active font variants, 2: 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 font={ font } variantsText={ variantsText } { ...props } />\n\t);\n}\n\nexport default LibraryFontCard;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,UAAU,QAAQ,oBAAoB;;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,GAAGN,UAAU,CAAEE,kBAAmB,CAAC;EAElE,MAAMK,iBAAiB,GACtBH,IAAI,EAAEI,QAAQ,EAAEC,MAAM,GAAG,CAAC,GAAGL,IAAI,CAACI,QAAQ,CAACC,MAAM,GAAG,CAAC;EACtD,MAAMC,cAAc,GAAGJ,qBAAqB,CAC3CF,IAAI,CAACO,IAAI,EACTP,IAAI,CAACQ,MACN,CAAC,CAACH,MAAM;EACR,MAAMI,YAAY,GAAGd,OAAO,EAC3B;EACAD,EAAE,CAAE,2BAA4B,CAAC,EACjCY,cAAc,EACdH,iBACD,CAAC;EAED,OACCO,aAAA,CAACb,QAAQ;IAACG,IAAI,EAAGA,IAAM;IAACS,YAAY,EAAGA,YAAc;IAAA,GAAMR;EAAK,CAAI,CAAC;AAEvE;AAEA,eAAeF,eAAe"}

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

@@ -20,7 +20,7 @@ function LibraryFontVariant({
     isFontActivated,
     toggleActivateFont
   } = useContext(FontLibraryContext);
-  const isIstalled = font?.fontFace?.length > 0 ? isFontActivated(font.slug, face.fontStyle, face.fontWeight, font.source) : isFontActivated(font.slug, null, null, font.source);
+  const isInstalled = font?.fontFace?.length > 0 ? isFontActivated(font.slug, face.fontStyle, face.fontWeight, font.source) : isFontActivated(font.slug, null, null, font.source);
   const handleToggleActivation = () => {
     if (font?.fontFace?.length > 0) {
       toggleActivateFont(font, face);
@@ -33,23 +33,24 @@ function LibraryFontVariant({
     kebabCase
   } = unlock(componentsPrivateApis);
   const checkboxId = kebabCase(`${font.slug}-${getFontFaceVariantName(face)}`);
-  return createElement("label", {
-    className: "font-library-modal__library-font-variant",
-    htmlFor: checkboxId
+  return createElement("div", {
+    className: "font-library-modal__library-font-variant"
   }, createElement(Flex, {
-    justify: "space-between",
+    justify: "flex-start",
     align: "center",
     gap: "1rem"
-  }, createElement(FontFaceDemo, {
-    fontFace: face,
-    text: displayName
-  }), createElement(CheckboxControl, {
-    checked: isIstalled,
+  }, createElement(CheckboxControl, {
+    checked: isInstalled,
     onChange: handleToggleActivation,
     __nextHasNoMarginBottom: true,
-    id: checkboxId,
-    label: false
-  })));
+    id: checkboxId
+  }), createElement("label", {
+    htmlFor: checkboxId
+  }, createElement(FontFaceDemo, {
+    fontFace: face,
+    text: displayName,
+    onClick: handleToggleActivation
+  }))));
 }
 export default LibraryFontVariant;
 //# sourceMappingURL=library-font-variant.js.map

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

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

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

@@ -54,7 +54,7 @@ export async function fetchUninstallFontFamily(fontFamilyId) {
 }
 export async function fetchFontCollections() {
   const config = {
-    path: FONT_COLLECTIONS_URL,
+    path: `${FONT_COLLECTIONS_URL}?_fields=slug,name,description`,
     method: 'GET'
   };
   return await apiFetch(config);

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

@@ -1 +1 @@
-{"version":3,"names":["apiFetch","FONT_FAMILIES_URL","FONT_COLLECTIONS_URL","fetchInstallFontFamily","data","config","path","method","body","response","id","font_family_settings","fontFace","fetchInstallFontFace","fontFamilyId","font_face_settings","fetchGetFontFamilyBySlug","slug","length","fontFamilyPost","_embedded","font_faces","map","face","fetchUninstallFontFamily","fetchFontCollections","fetchFontCollection"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/resolvers.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport apiFetch from '@wordpress/api-fetch';\n\nconst FONT_FAMILIES_URL = '/wp/v2/font-families';\nconst FONT_COLLECTIONS_URL = '/wp/v2/font-collections';\n\nexport async function fetchInstallFontFamily( data ) {\n\tconst config = {\n\t\tpath: FONT_FAMILIES_URL,\n\t\tmethod: 'POST',\n\t\tbody: data,\n\t};\n\tconst response = await apiFetch( config );\n\treturn {\n\t\tid: response.id,\n\t\t...response.font_family_settings,\n\t\tfontFace: [],\n\t};\n}\n\nexport async function fetchInstallFontFace( fontFamilyId, data ) {\n\tconst config = {\n\t\tpath: `${ FONT_FAMILIES_URL }/${ fontFamilyId }/font-faces`,\n\t\tmethod: 'POST',\n\t\tbody: data,\n\t};\n\tconst response = await apiFetch( config );\n\treturn {\n\t\tid: response.id,\n\t\t...response.font_face_settings,\n\t};\n}\n\nexport async function fetchGetFontFamilyBySlug( slug ) {\n\tconst config = {\n\t\tpath: `${ FONT_FAMILIES_URL }?slug=${ slug }&_embed=true`,\n\t\tmethod: 'GET',\n\t};\n\tconst response = await apiFetch( config );\n\tif ( ! response || response.length === 0 ) {\n\t\treturn null;\n\t}\n\tconst fontFamilyPost = response[ 0 ];\n\treturn {\n\t\tid: fontFamilyPost.id,\n\t\t...fontFamilyPost.font_family_settings,\n\t\tfontFace:\n\t\t\tfontFamilyPost?._embedded?.font_faces.map(\n\t\t\t\t( face ) => face.font_face_settings\n\t\t\t) || [],\n\t};\n}\n\nexport async function fetchUninstallFontFamily( fontFamilyId ) {\n\tconst config = {\n\t\tpath: `${ FONT_FAMILIES_URL }/${ fontFamilyId }?force=true`,\n\t\tmethod: 'DELETE',\n\t};\n\treturn await apiFetch( config );\n}\n\nexport async function fetchFontCollections() {\n\tconst config = {\n\t\tpath: FONT_COLLECTIONS_URL,\n\t\tmethod: 'GET',\n\t};\n\treturn await apiFetch( config );\n}\n\nexport async function fetchFontCollection( id ) {\n\tconst config = {\n\t\tpath: `${ FONT_COLLECTIONS_URL }/${ id }`,\n\t\tmethod: 'GET',\n\t};\n\treturn await apiFetch( config );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,QAAQ,MAAM,sBAAsB;AAE3C,MAAMC,iBAAiB,GAAG,sBAAsB;AAChD,MAAMC,oBAAoB,GAAG,yBAAyB;AAEtD,OAAO,eAAeC,sBAAsBA,CAAEC,IAAI,EAAG;EACpD,MAAMC,MAAM,GAAG;IACdC,IAAI,EAAEL,iBAAiB;IACvBM,MAAM,EAAE,MAAM;IACdC,IAAI,EAAEJ;EACP,CAAC;EACD,MAAMK,QAAQ,GAAG,MAAMT,QAAQ,CAAEK,MAAO,CAAC;EACzC,OAAO;IACNK,EAAE,EAAED,QAAQ,CAACC,EAAE;IACf,GAAGD,QAAQ,CAACE,oBAAoB;IAChCC,QAAQ,EAAE;EACX,CAAC;AACF;AAEA,OAAO,eAAeC,oBAAoBA,CAAEC,YAAY,EAAEV,IAAI,EAAG;EAChE,MAAMC,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGL,iBAAmB,IAAIa,YAAc,aAAY;IAC3DP,MAAM,EAAE,MAAM;IACdC,IAAI,EAAEJ;EACP,CAAC;EACD,MAAMK,QAAQ,GAAG,MAAMT,QAAQ,CAAEK,MAAO,CAAC;EACzC,OAAO;IACNK,EAAE,EAAED,QAAQ,CAACC,EAAE;IACf,GAAGD,QAAQ,CAACM;EACb,CAAC;AACF;AAEA,OAAO,eAAeC,wBAAwBA,CAAEC,IAAI,EAAG;EACtD,MAAMZ,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGL,iBAAmB,SAASgB,IAAM,cAAa;IACzDV,MAAM,EAAE;EACT,CAAC;EACD,MAAME,QAAQ,GAAG,MAAMT,QAAQ,CAAEK,MAAO,CAAC;EACzC,IAAK,CAAEI,QAAQ,IAAIA,QAAQ,CAACS,MAAM,KAAK,CAAC,EAAG;IAC1C,OAAO,IAAI;EACZ;EACA,MAAMC,cAAc,GAAGV,QAAQ,CAAE,CAAC,CAAE;EACpC,OAAO;IACNC,EAAE,EAAES,cAAc,CAACT,EAAE;IACrB,GAAGS,cAAc,CAACR,oBAAoB;IACtCC,QAAQ,EACPO,cAAc,EAAEC,SAAS,EAAEC,UAAU,CAACC,GAAG,CACtCC,IAAI,IAAMA,IAAI,CAACR,kBAClB,CAAC,IAAI;EACP,CAAC;AACF;AAEA,OAAO,eAAeS,wBAAwBA,CAAEV,YAAY,EAAG;EAC9D,MAAMT,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGL,iBAAmB,IAAIa,YAAc,aAAY;IAC3DP,MAAM,EAAE;EACT,CAAC;EACD,OAAO,MAAMP,QAAQ,CAAEK,MAAO,CAAC;AAChC;AAEA,OAAO,eAAeoB,oBAAoBA,CAAA,EAAG;EAC5C,MAAMpB,MAAM,GAAG;IACdC,IAAI,EAAEJ,oBAAoB;IAC1BK,MAAM,EAAE;EACT,CAAC;EACD,OAAO,MAAMP,QAAQ,CAAEK,MAAO,CAAC;AAChC;AAEA,OAAO,eAAeqB,mBAAmBA,CAAEhB,EAAE,EAAG;EAC/C,MAAML,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGJ,oBAAsB,IAAIQ,EAAI,EAAC;IACzCH,MAAM,EAAE;EACT,CAAC;EACD,OAAO,MAAMP,QAAQ,CAAEK,MAAO,CAAC;AAChC"}
+{"version":3,"names":["apiFetch","FONT_FAMILIES_URL","FONT_COLLECTIONS_URL","fetchInstallFontFamily","data","config","path","method","body","response","id","font_family_settings","fontFace","fetchInstallFontFace","fontFamilyId","font_face_settings","fetchGetFontFamilyBySlug","slug","length","fontFamilyPost","_embedded","font_faces","map","face","fetchUninstallFontFamily","fetchFontCollections","fetchFontCollection"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/resolvers.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport apiFetch from '@wordpress/api-fetch';\n\nconst FONT_FAMILIES_URL = '/wp/v2/font-families';\nconst FONT_COLLECTIONS_URL = '/wp/v2/font-collections';\n\nexport async function fetchInstallFontFamily( data ) {\n\tconst config = {\n\t\tpath: FONT_FAMILIES_URL,\n\t\tmethod: 'POST',\n\t\tbody: data,\n\t};\n\tconst response = await apiFetch( config );\n\treturn {\n\t\tid: response.id,\n\t\t...response.font_family_settings,\n\t\tfontFace: [],\n\t};\n}\n\nexport async function fetchInstallFontFace( fontFamilyId, data ) {\n\tconst config = {\n\t\tpath: `${ FONT_FAMILIES_URL }/${ fontFamilyId }/font-faces`,\n\t\tmethod: 'POST',\n\t\tbody: data,\n\t};\n\tconst response = await apiFetch( config );\n\treturn {\n\t\tid: response.id,\n\t\t...response.font_face_settings,\n\t};\n}\n\nexport async function fetchGetFontFamilyBySlug( slug ) {\n\tconst config = {\n\t\tpath: `${ FONT_FAMILIES_URL }?slug=${ slug }&_embed=true`,\n\t\tmethod: 'GET',\n\t};\n\tconst response = await apiFetch( config );\n\tif ( ! response || response.length === 0 ) {\n\t\treturn null;\n\t}\n\tconst fontFamilyPost = response[ 0 ];\n\treturn {\n\t\tid: fontFamilyPost.id,\n\t\t...fontFamilyPost.font_family_settings,\n\t\tfontFace:\n\t\t\tfontFamilyPost?._embedded?.font_faces.map(\n\t\t\t\t( face ) => face.font_face_settings\n\t\t\t) || [],\n\t};\n}\n\nexport async function fetchUninstallFontFamily( fontFamilyId ) {\n\tconst config = {\n\t\tpath: `${ FONT_FAMILIES_URL }/${ fontFamilyId }?force=true`,\n\t\tmethod: 'DELETE',\n\t};\n\treturn await apiFetch( config );\n}\n\nexport async function fetchFontCollections() {\n\tconst config = {\n\t\tpath: `${ FONT_COLLECTIONS_URL }?_fields=slug,name,description`,\n\t\tmethod: 'GET',\n\t};\n\treturn await apiFetch( config );\n}\n\nexport async function fetchFontCollection( id ) {\n\tconst config = {\n\t\tpath: `${ FONT_COLLECTIONS_URL }/${ id }`,\n\t\tmethod: 'GET',\n\t};\n\treturn await apiFetch( config );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,QAAQ,MAAM,sBAAsB;AAE3C,MAAMC,iBAAiB,GAAG,sBAAsB;AAChD,MAAMC,oBAAoB,GAAG,yBAAyB;AAEtD,OAAO,eAAeC,sBAAsBA,CAAEC,IAAI,EAAG;EACpD,MAAMC,MAAM,GAAG;IACdC,IAAI,EAAEL,iBAAiB;IACvBM,MAAM,EAAE,MAAM;IACdC,IAAI,EAAEJ;EACP,CAAC;EACD,MAAMK,QAAQ,GAAG,MAAMT,QAAQ,CAAEK,MAAO,CAAC;EACzC,OAAO;IACNK,EAAE,EAAED,QAAQ,CAACC,EAAE;IACf,GAAGD,QAAQ,CAACE,oBAAoB;IAChCC,QAAQ,EAAE;EACX,CAAC;AACF;AAEA,OAAO,eAAeC,oBAAoBA,CAAEC,YAAY,EAAEV,IAAI,EAAG;EAChE,MAAMC,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGL,iBAAmB,IAAIa,YAAc,aAAY;IAC3DP,MAAM,EAAE,MAAM;IACdC,IAAI,EAAEJ;EACP,CAAC;EACD,MAAMK,QAAQ,GAAG,MAAMT,QAAQ,CAAEK,MAAO,CAAC;EACzC,OAAO;IACNK,EAAE,EAAED,QAAQ,CAACC,EAAE;IACf,GAAGD,QAAQ,CAACM;EACb,CAAC;AACF;AAEA,OAAO,eAAeC,wBAAwBA,CAAEC,IAAI,EAAG;EACtD,MAAMZ,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGL,iBAAmB,SAASgB,IAAM,cAAa;IACzDV,MAAM,EAAE;EACT,CAAC;EACD,MAAME,QAAQ,GAAG,MAAMT,QAAQ,CAAEK,MAAO,CAAC;EACzC,IAAK,CAAEI,QAAQ,IAAIA,QAAQ,CAACS,MAAM,KAAK,CAAC,EAAG;IAC1C,OAAO,IAAI;EACZ;EACA,MAAMC,cAAc,GAAGV,QAAQ,CAAE,CAAC,CAAE;EACpC,OAAO;IACNC,EAAE,EAAES,cAAc,CAACT,EAAE;IACrB,GAAGS,cAAc,CAACR,oBAAoB;IACtCC,QAAQ,EACPO,cAAc,EAAEC,SAAS,EAAEC,UAAU,CAACC,GAAG,CACtCC,IAAI,IAAMA,IAAI,CAACR,kBAClB,CAAC,IAAI;EACP,CAAC;AACF;AAEA,OAAO,eAAeS,wBAAwBA,CAAEV,YAAY,EAAG;EAC9D,MAAMT,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGL,iBAAmB,IAAIa,YAAc,aAAY;IAC3DP,MAAM,EAAE;EACT,CAAC;EACD,OAAO,MAAMP,QAAQ,CAAEK,MAAO,CAAC;AAChC;AAEA,OAAO,eAAeoB,oBAAoBA,CAAA,EAAG;EAC5C,MAAMpB,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGJ,oBAAsB,gCAA+B;IAC/DK,MAAM,EAAE;EACT,CAAC;EACD,OAAO,MAAMP,QAAQ,CAAEK,MAAO,CAAC;AAChC;AAEA,OAAO,eAAeqB,mBAAmBA,CAAEhB,EAAE,EAAG;EAC/C,MAAML,MAAM,GAAG;IACdC,IAAI,EAAG,GAAGJ,oBAAsB,IAAIQ,EAAI,EAAC;IACzCH,MAAM,EAAE;EACT,CAAC;EACD,OAAO,MAAMP,QAAQ,CAAEK,MAAO,CAAC;AAChC"}

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

@@ -2,11 +2,13 @@ import { createElement } from "react";
 /**
  * WordPress dependencies
  */
-import { __experimentalText as Text, __experimentalHeading as Heading, __experimentalVStack as VStack, __experimentalSpacer as Spacer, __experimentalHStack as HStack, Button } from '@wordpress/components';
+import { __experimentalText as Text, __experimentalHeading as Heading, __experimentalVStack as VStack, __experimentalSpacer as Spacer, __experimentalHStack as HStack, Button, Notice, FlexBlock } from '@wordpress/components';
 import { chevronLeft } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 function TabPanelLayout({
   title,
   description,
+  notice,
   handleBack,
   children,
   footer
@@ -26,12 +28,20 @@ function TabPanelLayout({
     variant: "tertiary",
     onClick: handleBack,
     icon: chevronLeft,
-    size: "small"
+    size: "small",
+    label: __('Back')
   }), title && createElement(Heading, {
     level: 2,
     size: 13,
     className: "edit-site-global-styles-header"
-  }, title)), description && createElement(Text, null, description)), createElement("div", {
+  }, title)), description && createElement(Text, null, description), notice && createElement(FlexBlock, null, createElement(Spacer, {
+    margin: 1
+  }), createElement(Notice, {
+    status: notice.type,
+    onRemove: notice.onRemove
+  }, notice.message), createElement(Spacer, {
+    margin: 1
+  }))), createElement("div", {
     className: "font-library-modal__tabpanel-layout__main"
   }, children), footer && createElement("div", {
     className: "font-library-modal__tabpanel-layout__footer"

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalText","Text","__experimentalHeading","Heading","__experimentalVStack","VStack","__experimentalSpacer","Spacer","__experimentalHStack","HStack","Button","chevronLeft","TabPanelLayout","title","description","handleBack","children","footer","createElement","className","margin","spacing","justify","variant","onClick","icon","size","level"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalText as Text,\n\t__experimentalHeading as Heading,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHStack as HStack,\n\tButton,\n} from '@wordpress/components';\nimport { chevronLeft } from '@wordpress/icons';\n\nfunction TabPanelLayout( {\n\ttitle,\n\tdescription,\n\thandleBack,\n\tchildren,\n\tfooter,\n} ) {\n\treturn (\n\t\t<div className=\"font-library-modal__tabpanel-layout\">\n\t\t\t<Spacer margin={ 4 } />\n\t\t\t<VStack spacing={ 4 } justify=\"space-between\">\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t\t{ !! handleBack && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleBack }\n\t\t\t\t\t\t\t\ticon={ chevronLeft }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-header\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HStack>\n\t\t\t\t\t{ description && <Text>{ description }</Text> }\n\t\t\t\t</VStack>\n\t\t\t\t<div className=\"font-library-modal__tabpanel-layout__main\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t\t{ footer && (\n\t\t\t\t\t<div className=\"font-library-modal__tabpanel-layout__footer\">\n\t\t\t\t\t\t{ footer }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default TabPanelLayout;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,kBAAkB,IAAIC,IAAI,EAC1BC,qBAAqB,IAAIC,OAAO,EAChCC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,MAAM,QACA,uBAAuB;AAC9B,SAASC,WAAW,QAAQ,kBAAkB;AAE9C,SAASC,cAAcA,CAAE;EACxBC,KAAK;EACLC,WAAW;EACXC,UAAU;EACVC,QAAQ;EACRC;AACD,CAAC,EAAG;EACH,OACCC,aAAA;IAAKC,SAAS,EAAC;EAAqC,GACnDD,aAAA,CAACX,MAAM;IAACa,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBF,aAAA,CAACb,MAAM;IAACgB,OAAO,EAAG,CAAG;IAACC,OAAO,EAAC;EAAe,GAC5CJ,aAAA,CAACb,MAAM;IAACgB,OAAO,EAAG;EAAG,GACpBH,aAAA,CAACT,MAAM;IAACa,OAAO,EAAC;EAAY,GACzB,CAAC,CAAEP,UAAU,IACdG,aAAA,CAACR,MAAM;IACNa,OAAO,EAAC,UAAU;IAClBC,OAAO,EAAGT,UAAY;IACtBU,IAAI,EAAGd,WAAa;IACpBe,IAAI,EAAC;EAAO,CACZ,CACD,EACCb,KAAK,IACNK,aAAA,CAACf,OAAO;IACPwB,KAAK,EAAG,CAAG;IACXD,IAAI,EAAG,EAAI;IACXP,SAAS,EAAC;EAAgC,GAExCN,KACM,CAEH,CAAC,EACPC,WAAW,IAAII,aAAA,CAACjB,IAAI,QAAGa,WAAmB,CACrC,CAAC,EACTI,aAAA;IAAKC,SAAS,EAAC;EAA2C,GACvDH,QACE,CAAC,EACJC,MAAM,IACPC,aAAA;IAAKC,SAAS,EAAC;EAA6C,GACzDF,MACE,CAEC,CACJ,CAAC;AAER;AAEA,eAAeL,cAAc"}
+{"version":3,"names":["__experimentalText","Text","__experimentalHeading","Heading","__experimentalVStack","VStack","__experimentalSpacer","Spacer","__experimentalHStack","HStack","Button","Notice","FlexBlock","chevronLeft","__","TabPanelLayout","title","description","notice","handleBack","children","footer","createElement","className","margin","spacing","justify","variant","onClick","icon","size","label","level","status","type","onRemove","message"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalText as Text,\n\t__experimentalHeading as Heading,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHStack as HStack,\n\tButton,\n\tNotice,\n\tFlexBlock,\n} from '@wordpress/components';\nimport { chevronLeft } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\nfunction TabPanelLayout( {\n\ttitle,\n\tdescription,\n\tnotice,\n\thandleBack,\n\tchildren,\n\tfooter,\n} ) {\n\treturn (\n\t\t<div className=\"font-library-modal__tabpanel-layout\">\n\t\t\t<Spacer margin={ 4 } />\n\t\t\t<VStack spacing={ 4 } justify=\"space-between\">\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t\t{ !! handleBack && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleBack }\n\t\t\t\t\t\t\t\ticon={ chevronLeft }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-header\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HStack>\n\t\t\t\t\t{ description && <Text>{ description }</Text> }\n\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\tonRemove={ notice.onRemove }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t\t<div className=\"font-library-modal__tabpanel-layout__main\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t\t{ footer && (\n\t\t\t\t\t<div className=\"font-library-modal__tabpanel-layout__footer\">\n\t\t\t\t\t\t{ footer }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default TabPanelLayout;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,kBAAkB,IAAIC,IAAI,EAC1BC,qBAAqB,IAAIC,OAAO,EAChCC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,MAAM,EACNC,MAAM,EACNC,SAAS,QACH,uBAAuB;AAC9B,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,EAAE,QAAQ,iBAAiB;AAEpC,SAASC,cAAcA,CAAE;EACxBC,KAAK;EACLC,WAAW;EACXC,MAAM;EACNC,UAAU;EACVC,QAAQ;EACRC;AACD,CAAC,EAAG;EACH,OACCC,aAAA;IAAKC,SAAS,EAAC;EAAqC,GACnDD,aAAA,CAACf,MAAM;IAACiB,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBF,aAAA,CAACjB,MAAM;IAACoB,OAAO,EAAG,CAAG;IAACC,OAAO,EAAC;EAAe,GAC5CJ,aAAA,CAACjB,MAAM;IAACoB,OAAO,EAAG;EAAG,GACpBH,aAAA,CAACb,MAAM;IAACiB,OAAO,EAAC;EAAY,GACzB,CAAC,CAAEP,UAAU,IACdG,aAAA,CAACZ,MAAM;IACNiB,OAAO,EAAC,UAAU;IAClBC,OAAO,EAAGT,UAAY;IACtBU,IAAI,EAAGhB,WAAa;IACpBiB,IAAI,EAAC,OAAO;IACZC,KAAK,EAAGjB,EAAE,CAAE,MAAO;EAAG,CACtB,CACD,EACCE,KAAK,IACNM,aAAA,CAACnB,OAAO;IACP6B,KAAK,EAAG,CAAG;IACXF,IAAI,EAAG,EAAI;IACXP,SAAS,EAAC;EAAgC,GAExCP,KACM,CAEH,CAAC,EACPC,WAAW,IAAIK,aAAA,CAACrB,IAAI,QAAGgB,WAAmB,CAAC,EAC3CC,MAAM,IACPI,aAAA,CAACV,SAAS,QACTU,aAAA,CAACf,MAAM;IAACiB,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBF,aAAA,CAACX,MAAM;IACNsB,MAAM,EAAGf,MAAM,CAACgB,IAAM;IACtBC,QAAQ,EAAGjB,MAAM,CAACiB;EAAU,GAE1BjB,MAAM,CAACkB,OACF,CAAC,EACTd,aAAA,CAACf,MAAM;IAACiB,MAAM,EAAG;EAAG,CAAE,CACZ,CAEL,CAAC,EACTF,aAAA;IAAKC,SAAS,EAAC;EAA2C,GACvDH,QACE,CAAC,EACJC,MAAM,IACPC,aAAA;IAAKC,SAAS,EAAC;EAA6C,GACzDF,MACE,CAEC,CACJ,CAAC;AAER;AAEA,eAAeN,cAAc"}

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

@@ -1,17 +1,169 @@
-import { createElement, Fragment } from "react";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */
-import { __experimentalSpacer as Spacer } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Button, DropZone, __experimentalSpacer as Spacer, __experimentalText as Text, __experimentalVStack as VStack, FormFileUpload, FlexItem, privateApis as componentsPrivateApis } from '@wordpress/components';
+import { useContext, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import LocalFonts from './local-fonts';
+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';
+import TabPanelLayout from './tab-panel-layout';
+import { unlock } from '../../../lock-unlock';
+const {
+  ProgressBar
+} = unlock(componentsPrivateApis);
 function UploadFonts() {
-  return createElement(Fragment, null, createElement(Spacer, {
-    margin: 8
-  }), createElement(LocalFonts, null));
+  const {
+    installFont,
+    notice,
+    setNotice
+  } = useContext(FontLibraryContext);
+  const [isUploading, setIsUploading] = useState(false);
+  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 => {
+    setNotice(null);
+    setIsUploading(true);
+    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;
+    }));
+    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);
+    if (fontFamilies.length > 1) {
+      setNotice({
+        type: 'error',
+        message: __('Variants from only one font family can be uploaded at a time.')
+      });
+      setIsUploading(false);
+      return;
+    }
+    try {
+      await installFont(fontFamilies[0]);
+      setNotice({
+        type: 'success',
+        message: __('Fonts were installed successfully.')
+      });
+    } catch (error) {
+      setNotice({
+        type: 'error',
+        message: error.message
+      });
+    }
+    setIsUploading(false);
+  };
+  return createElement(TabPanelLayout, {
+    notice: notice
+  }, createElement(DropZone, {
+    onFilesDrop: handleDropZone
+  }), createElement(VStack, {
+    className: "font-library-modal__local-fonts"
+  }, isUploading && createElement(FlexItem, null, createElement("div", {
+    className: "font-library-modal__upload-area"
+  }, createElement(ProgressBar, null))), !isUploading && createElement(FormFileUpload, {
+    accept: ALLOWED_FILE_EXTENSIONS.map(ext => `.${ext}`).join(','),
+    multiple: true,
+    onChange: onFilesUpload,
+    render: ({
+      openFileDialog
+    }) => createElement(Button, {
+      className: "font-library-modal__upload-area",
+      onClick: openFileDialog
+    }, __('Upload font'))
+  }), createElement(Spacer, {
+    margin: 2
+  }), createElement(Text, {
+    className: "font-library-modal__upload-area__text"
+  }, __('Uploaded fonts appear in your library and can be used in your theme. Supported formats: .tff, .otf, .woff, and .woff2.'))));
 }
 export default UploadFonts;
 //# sourceMappingURL=upload-fonts.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalSpacer","Spacer","LocalFonts","UploadFonts","createElement","Fragment","margin"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalSpacer as Spacer } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport LocalFonts from './local-fonts';\n\nfunction UploadFonts() {\n\treturn (\n\t\t<>\n\t\t\t<Spacer margin={ 8 } />\n\t\t\t<LocalFonts />\n\t\t</>\n\t);\n}\n\nexport default UploadFonts;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;;AAEtE;AACA;AACA;AACA,OAAOC,UAAU,MAAM,eAAe;AAEtC,SAASC,WAAWA,CAAA,EAAG;EACtB,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACH,MAAM;IAACK,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBF,aAAA,CAACF,UAAU,MAAE,CACZ,CAAC;AAEL;AAEA,eAAeC,WAAW"}
+{"version":3,"names":["__","Button","DropZone","__experimentalSpacer","Spacer","__experimentalText","Text","__experimentalVStack","VStack","FormFileUpload","FlexItem","privateApis","componentsPrivateApis","useContext","useState","ALLOWED_FILE_EXTENSIONS","FontLibraryContext","Font","makeFamiliesFromFaces","loadFontFaceInBrowser","TabPanelLayout","unlock","ProgressBar","UploadFonts","installFont","notice","setNotice","isUploading","setIsUploading","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","type","message","error","createElement","onFilesDrop","className","accept","ext","join","multiple","onChange","render","openFileDialog","onClick","margin"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/upload-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\t__experimentalVStack as VStack,\n\tFormFileUpload,\n\tFlexItem,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useContext, useState } 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 TabPanelLayout from './tab-panel-layout';\nimport { unlock } from '../../../lock-unlock';\n\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction UploadFonts() {\n\tconst { installFont, notice, setNotice } = useContext( FontLibraryContext );\n\tconst [ isUploading, setIsUploading ] = useState( false );\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\tsetNotice( null );\n\t\tsetIsUploading( true );\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\thandleInstall( 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\n\t\tif ( fontFamilies.length > 1 ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: __(\n\t\t\t\t\t'Variants from only one font family can be uploaded at a time.'\n\t\t\t\t),\n\t\t\t} );\n\t\t\tsetIsUploading( false );\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait installFont( fontFamilies[ 0 ] );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Fonts were installed successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: error.message,\n\t\t\t} );\n\t\t}\n\n\t\tsetIsUploading( false );\n\t};\n\n\treturn (\n\t\t<TabPanelLayout notice={ notice }>\n\t\t\t<DropZone onFilesDrop={ handleDropZone } />\n\t\t\t<VStack className=\"font-library-modal__local-fonts\">\n\t\t\t\t{ isUploading && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<div className=\"font-library-modal__upload-area\">\n\t\t\t\t\t\t\t<ProgressBar />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t\t{ ! isUploading && (\n\t\t\t\t\t<FormFileUpload\n\t\t\t\t\t\taccept={ ALLOWED_FILE_EXTENSIONS.map(\n\t\t\t\t\t\t\t( ext ) => `.${ ext }`\n\t\t\t\t\t\t).join( ',' ) }\n\t\t\t\t\t\tmultiple={ true }\n\t\t\t\t\t\tonChange={ onFilesUpload }\n\t\t\t\t\t\trender={ ( { openFileDialog } ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"font-library-modal__upload-area\"\n\t\t\t\t\t\t\t\tonClick={ openFileDialog }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Upload font' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\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{ __(\n\t\t\t\t\t\t'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .tff, .otf, .woff, and .woff2.'\n\t\t\t\t\t) }\n\t\t\t\t</Text>\n\t\t\t</VStack>\n\t\t</TabPanelLayout>\n\t);\n}\n\nexport default UploadFonts;\n"],"mappings":"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"}