@wordpress/global-styles-ui 1.1.0

package/build-module/font-library-modal/font-demo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/font-demo.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalText as Text } from '@wordpress/components';\nimport { useContext, useEffect, useState, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport {\n\tgetFacePreviewStyle,\n\tgetFamilyPreviewStyle,\n} from './utils/preview-styles';\nimport type { FontFamily, FontFace, FontDemoProps } from './types';\n\nfunction getPreviewUrl( fontFace: FontFace ): string | undefined {\n\tif ( fontFace.preview ) {\n\t\treturn fontFace.preview;\n\t}\n\tif ( fontFace.src ) {\n\t\treturn Array.isArray( fontFace.src ) ? fontFace.src[ 0 ] : fontFace.src;\n\t}\n\treturn undefined;\n}\n\nfunction getDisplayFontFace( font: FontFamily | FontFace ): FontFace {\n\t// if this IS a font face return it\n\tif (\n\t\t( 'fontStyle' in font && font.fontStyle ) ||\n\t\t( 'fontWeight' in font && font.fontWeight )\n\t) {\n\t\treturn font;\n\t}\n\t// if this is a font family with a collection of font faces\n\t// return the first one that is normal and 400 OR just the first one\n\tif ( 'fontFace' in font && font.fontFace && font.fontFace.length ) {\n\t\treturn (\n\t\t\tfont.fontFace.find(\n\t\t\t\t( face ) =>\n\t\t\t\t\tface.fontStyle === 'normal' && face.fontWeight === '400'\n\t\t\t) || font.fontFace[ 0 ]\n\t\t);\n\t}\n\t// This must be a font family with no font faces\n\t// return a fake font face\n\treturn {\n\t\tfontStyle: 'normal',\n\t\tfontWeight: '400',\n\t\tfontFamily: font.fontFamily,\n\t\tfake: true,\n\t};\n}\n\nfunction FontDemo( { font, text }: FontDemoProps ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\n\tconst fontFace = getDisplayFontFace( font );\n\tconst style = getFamilyPreviewStyle( font );\n\ttext = text || ( 'name' in font ? font.name : '' );\n\tconst customPreviewUrl = font.preview;\n\n\tconst [ isIntersecting, setIsIntersecting ] = useState< boolean >( false );\n\tconst [ isAssetLoaded, setIsAssetLoaded ] = useState< boolean >( false );\n\tconst { loadFontFaceAsset } = useContext( FontLibraryContext );\n\n\tconst previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );\n\tconst isPreviewImage =\n\t\tpreviewUrl && previewUrl.match( /\\.(png|jpg|jpeg|gif|svg)$/i );\n\n\tconst faceStyles = getFacePreviewStyle( fontFace );\n\tconst textDemoStyle = {\n\t\tfontSize: '18px',\n\t\tlineHeight: 1,\n\t\topacity: isAssetLoaded ? '1' : '0',\n\t\t...style,\n\t\t...faceStyles,\n\t};\n\n\tuseEffect( () => {\n\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\tsetIsIntersecting( entry.isIntersecting );\n\t\t}, {} );\n\t\tif ( ref.current ) {\n\t\t\tobserver.observe( ref.current );\n\t\t}\n\t\treturn () => observer.disconnect();\n\t}, [ ref ] );\n\n\tuseEffect( () => {\n\t\tconst loadAsset = async () => {\n\t\t\tif ( isIntersecting ) {\n\t\t\t\tif ( ! isPreviewImage && fontFace.src ) {\n\t\t\t\t\tawait loadFontFaceAsset( fontFace );\n\t\t\t\t}\n\t\t\t\tsetIsAssetLoaded( true );\n\t\t\t}\n\t\t};\n\t\tloadAsset();\n\t}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );\n\n\treturn (\n\t\t<div ref={ ref }>\n\t\t\t{ isPreviewImage ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={ previewUrl }\n\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\talt={ text }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-image\"\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Text\n\t\t\t\t\tstyle={ textDemoStyle }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-text\"\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontDemo;\n"],
+  "mappings": "AAwGI;AArGJ,SAAS,sBAAsB,YAAY;AAC3C,SAAS,YAAY,WAAW,UAAU,cAAc;AAKxD,SAAS,0BAA0B;AACnC;AAAA,EACC;AAAA,EACA;AAAA,OACM;AAGP,SAAS,cAAe,UAAyC;AAChE,MAAK,SAAS,SAAU;AACvB,WAAO,SAAS;AAAA,EACjB;AACA,MAAK,SAAS,KAAM;AACnB,WAAO,MAAM,QAAS,SAAS,GAAI,IAAI,SAAS,IAAK,CAAE,IAAI,SAAS;AAAA,EACrE;AACA,SAAO;AACR;AAEA,SAAS,mBAAoB,MAAwC;AAEpE,MACG,eAAe,QAAQ,KAAK,aAC5B,gBAAgB,QAAQ,KAAK,YAC9B;AACD,WAAO;AAAA,EACR;AAGA,MAAK,cAAc,QAAQ,KAAK,YAAY,KAAK,SAAS,QAAS;AAClE,WACC,KAAK,SAAS;AAAA,MACb,CAAE,SACD,KAAK,cAAc,YAAY,KAAK,eAAe;AAAA,IACrD,KAAK,KAAK,SAAU,CAAE;AAAA,EAExB;AAGA,SAAO;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY,KAAK;AAAA,IACjB,MAAM;AAAA,EACP;AACD;AAEA,SAAS,SAAU,EAAE,MAAM,KAAK,GAAmB;AAClD,QAAM,MAAM,OAA0B,IAAK;AAE3C,QAAM,WAAW,mBAAoB,IAAK;AAC1C,QAAM,QAAQ,sBAAuB,IAAK;AAC1C,SAAO,SAAU,UAAU,OAAO,KAAK,OAAO;AAC9C,QAAM,mBAAmB,KAAK;AAE9B,QAAM,CAAE,gBAAgB,iBAAkB,IAAI,SAAqB,KAAM;AACzE,QAAM,CAAE,eAAe,gBAAiB,IAAI,SAAqB,KAAM;AACvE,QAAM,EAAE,kBAAkB,IAAI,WAAY,kBAAmB;AAE7D,QAAM,aAAa,oBAAoB,cAAe,QAAS;AAC/D,QAAM,iBACL,cAAc,WAAW,MAAO,4BAA6B;AAE9D,QAAM,aAAa,oBAAqB,QAAS;AACjD,QAAM,gBAAgB;AAAA,IACrB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS,gBAAgB,MAAM;AAAA,IAC/B,GAAG;AAAA,IACH,GAAG;AAAA,EACJ;AAEA,YAAW,MAAM;AAChB,UAAM,WAAW,IAAI,OAAO,qBAAsB,CAAE,CAAE,KAAM,MAAO;AAClE,wBAAmB,MAAM,cAAe;AAAA,IACzC,GAAG,CAAC,CAAE;AACN,QAAK,IAAI,SAAU;AAClB,eAAS,QAAS,IAAI,OAAQ;AAAA,IAC/B;AACA,WAAO,MAAM,SAAS,WAAW;AAAA,EAClC,GAAG,CAAE,GAAI,CAAE;AAEX,YAAW,MAAM;AAChB,UAAM,YAAY,YAAY;AAC7B,UAAK,gBAAiB;AACrB,YAAK,CAAE,kBAAkB,SAAS,KAAM;AACvC,gBAAM,kBAAmB,QAAS;AAAA,QACnC;AACA,yBAAkB,IAAK;AAAA,MACxB;AAAA,IACD;AACA,cAAU;AAAA,EACX,GAAG,CAAE,UAAU,gBAAgB,mBAAmB,cAAe,CAAE;AAEnE,SACC,oBAAC,SAAI,KACF,2BACD;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,SAAQ;AAAA,MACR,KAAM;AAAA,MACN,WAAU;AAAA;AAAA,EACX,IAEA;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ;AAAA,MACR,WAAU;AAAA,MAER;AAAA;AAAA,EACH,GAEF;AAEF;AAEA,IAAO,oBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { __ } from "@wordpress/i18n";
+import {
+  Button,
+  Card,
+  CardBody,
+  __experimentalHeading as Heading,
+  __experimentalText as Text,
+  __experimentalSpacer as Spacer
+} from "@wordpress/components";
+function GoogleFontsConfirmDialog() {
+  const handleConfirm = () => {
+    window.localStorage.setItem(
+      "wp-font-library-google-fonts-permission",
+      "true"
+    );
+    window.dispatchEvent(new Event("storage"));
+  };
+  return /* @__PURE__ */ jsx("div", { className: "font-library__google-fonts-confirm", children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardBody, { children: [
+    /* @__PURE__ */ jsx(Heading, { level: 2, children: __("Connect to Google Fonts") }),
+    /* @__PURE__ */ jsx(Spacer, { margin: 6 }),
+    /* @__PURE__ */ jsx(Text, { as: "p", children: __(
+      "To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts."
+    ) }),
+    /* @__PURE__ */ jsx(Spacer, { margin: 3 }),
+    /* @__PURE__ */ jsx(Text, { as: "p", children: __(
+      "You can alternatively upload files directly on the Upload tab."
+    ) }),
+    /* @__PURE__ */ jsx(Spacer, { margin: 6 }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        __next40pxDefaultSize: true,
+        variant: "primary",
+        onClick: handleConfirm,
+        children: __("Allow access to Google Fonts")
+      }
+    )
+  ] }) }) });
+}
+var google_fonts_confirm_dialog_default = GoogleFontsConfirmDialog;
+export {
+  google_fonts_confirm_dialog_default as default
+};
+//# sourceMappingURL=google-fonts-confirm-dialog.js.map

package/build-module/font-library-modal/google-fonts-confirm-dialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/google-fonts-confirm-dialog.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nfunction GoogleFontsConfirmDialog(): JSX.Element {\n\tconst handleConfirm = (): void => {\n\t\t// eslint-disable-next-line no-undef\n\t\twindow.localStorage.setItem(\n\t\t\t'wp-font-library-google-fonts-permission',\n\t\t\t'true'\n\t\t);\n\t\twindow.dispatchEvent( new Event( 'storage' ) );\n\t};\n\n\treturn (\n\t\t<div className=\"font-library__google-fonts-confirm\">\n\t\t\t<Card>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Heading level={ 2 }>\n\t\t\t\t\t\t{ __( 'Connect to Google Fonts' ) }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'You can alternatively upload files directly on the Upload tab.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ handleConfirm }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Allow access to Google Fonts' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</div>\n\t);\n}\n\nexport default GoogleFontsConfirmDialog;\n"],
+  "mappings": "AA0BI,SACC,KADD;AAvBJ,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,yBAAyB;AAAA,EACzB,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,OAClB;AAEP,SAAS,2BAAwC;AAChD,QAAM,gBAAgB,MAAY;AAEjC,WAAO,aAAa;AAAA,MACnB;AAAA,MACA;AAAA,IACD;AACA,WAAO,cAAe,IAAI,MAAO,SAAU,CAAE;AAAA,EAC9C;AAEA,SACC,oBAAC,SAAI,WAAU,sCACd,8BAAC,QACA,+BAAC,YACA;AAAA,wBAAC,WAAQ,OAAQ,GACd,aAAI,yBAA0B,GACjC;AAAA,IACA,oBAAC,UAAO,QAAS,GAAI;AAAA,IACrB,oBAAC,QAAK,IAAG,KACN;AAAA,MACD;AAAA,IACD,GACD;AAAA,IACA,oBAAC,UAAO,QAAS,GAAI;AAAA,IACrB,oBAAC,QAAK,IAAG,KACN;AAAA,MACD;AAAA,IACD,GACD;AAAA,IACA,oBAAC,UAAO,QAAS,GAAI;AAAA,IACrB;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,SAAQ;AAAA,QACR,SAAU;AAAA,QAER,aAAI,8BAA+B;AAAA;AAAA,IACtC;AAAA,KACD,GACD,GACD;AAEF;AAEA,IAAO,sCAAQ;",
+  "names": []
+}

package/build-module/font-library-modal/index.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { __, _x } from "@wordpress/i18n";
+import {
+  Modal,
+  privateApis as componentsPrivateApis
+} from "@wordpress/components";
+import { store as coreStore } from "@wordpress/core-data";
+import { useSelect } from "@wordpress/data";
+import { useContext } from "@wordpress/element";
+import InstalledFonts from "./installed-fonts";
+import FontCollection from "./font-collection";
+import UploadFonts from "./upload-fonts";
+import { FontLibraryContext } from "./context";
+import { unlock } from "../lock-unlock";
+const { Tabs } = unlock(componentsPrivateApis);
+const DEFAULT_TAB = {
+  id: "installed-fonts",
+  title: _x("Library", "Font library")
+};
+const UPLOAD_TAB = {
+  id: "upload-fonts",
+  title: _x("Upload", "noun")
+};
+const tabsFromCollections = (collections) => collections.map(({ slug, name }) => ({
+  id: slug,
+  title: collections.length === 1 && slug === "google-fonts" ? __("Install Fonts") : name
+}));
+function FontLibraryModal({
+  onRequestClose,
+  defaultTabId = "installed-fonts"
+}) {
+  const { collections } = useContext(FontLibraryContext);
+  const canUserCreate = useSelect((select) => {
+    return select(coreStore).canUser("create", {
+      kind: "postType",
+      name: "wp_font_family"
+    });
+  }, []);
+  const tabs = [DEFAULT_TAB];
+  if (canUserCreate) {
+    tabs.push(UPLOAD_TAB);
+    tabs.push(...tabsFromCollections(collections || []));
+  }
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      title: __("Fonts"),
+      onRequestClose,
+      isFullScreen: true,
+      className: "font-library-modal",
+      children: /* @__PURE__ */ jsxs(Tabs, { defaultTabId, children: [
+        /* @__PURE__ */ jsx("div", { className: "font-library-modal__tablist-container", children: /* @__PURE__ */ jsx(Tabs.TabList, { children: tabs.map(({ id, title }) => /* @__PURE__ */ jsx(Tabs.Tab, { tabId: id, children: title }, id)) }) }),
+        tabs.map(({ id }) => {
+          let contents;
+          switch (id) {
+            case "upload-fonts":
+              contents = /* @__PURE__ */ jsx(UploadFonts, {});
+              break;
+            case "installed-fonts":
+              contents = /* @__PURE__ */ jsx(InstalledFonts, {});
+              break;
+            default:
+              contents = /* @__PURE__ */ jsx(FontCollection, { slug: id });
+          }
+          return /* @__PURE__ */ jsx(
+            Tabs.TabPanel,
+            {
+              tabId: id,
+              focusable: false,
+              children: contents
+            },
+            id
+          );
+        })
+      ] })
+    }
+  );
+}
+var font_library_modal_default = FontLibraryModal;
+export {
+  font_library_modal_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\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 type { FontCollection as FontCollectionType } from './types';\nimport { unlock } from '../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst DEFAULT_TAB = {\n\tid: 'installed-fonts',\n\ttitle: _x( 'Library', 'Font library' ),\n};\n\nconst UPLOAD_TAB = {\n\tid: 'upload-fonts',\n\ttitle: _x( 'Upload', 'noun' ),\n};\n\nconst tabsFromCollections = ( collections: FontCollectionType[] ) =>\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\tdefaultTabId = 'installed-fonts',\n}: {\n\tonRequestClose: () => void;\n\tdefaultTabId?: string;\n} ) {\n\tconst { collections } = useContext( FontLibraryContext );\n\tconst canUserCreate = useSelect( ( select ) => {\n\t\treturn select( coreStore ).canUser( 'create', {\n\t\t\tkind: 'postType',\n\t\t\tname: 'wp_font_family',\n\t\t} );\n\t}, [] );\n\n\tconst tabs: { id: string; title: string }[] = [ DEFAULT_TAB ];\n\n\tif ( canUserCreate ) {\n\t\ttabs.push( UPLOAD_TAB );\n\t\ttabs.push( ...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<Tabs defaultTabId={ defaultTabId }>\n\t\t\t\t<div className=\"font-library-modal__tablist-container\">\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</div>\n\t\t\t\t{ tabs.map( ( { id } ) => {\n\t\t\t\t\tlet contents;\n\t\t\t\t\tswitch ( id ) {\n\t\t\t\t\t\tcase 'upload-fonts':\n\t\t\t\t\t\t\tcontents = <UploadFonts />;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\t\tcontents = <InstalledFonts />;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\tcontents = <FontCollection slug={ id } />;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\ttabId={ id }\n\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ contents }\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Tabs>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],
+  "mappings": "AAwEG,SAII,KAJJ;AArEH,SAAS,IAAI,UAAU;AACvB;AAAA,EACC;AAAA,EACA,eAAe;AAAA,OACT;AACP,SAAS,SAAS,iBAAiB;AACnC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAK3B,OAAO,oBAAoB;AAC3B,OAAO,oBAAoB;AAC3B,OAAO,iBAAiB;AACxB,SAAS,0BAA0B;AAEnC,SAAS,cAAc;AAEvB,MAAM,EAAE,KAAK,IAAI,OAAQ,qBAAsB;AAE/C,MAAM,cAAc;AAAA,EACnB,IAAI;AAAA,EACJ,OAAO,GAAI,WAAW,cAAe;AACtC;AAEA,MAAM,aAAa;AAAA,EAClB,IAAI;AAAA,EACJ,OAAO,GAAI,UAAU,MAAO;AAC7B;AAEA,MAAM,sBAAsB,CAAE,gBAC7B,YAAY,IAAK,CAAE,EAAE,MAAM,KAAK,OAAS;AAAA,EACxC,IAAI;AAAA,EACJ,OACC,YAAY,WAAW,KAAK,SAAS,iBAClC,GAAI,eAAgB,IACpB;AACL,EAAI;AAEL,SAAS,iBAAkB;AAAA,EAC1B;AAAA,EACA,eAAe;AAChB,GAGI;AACH,QAAM,EAAE,YAAY,IAAI,WAAY,kBAAmB;AACvD,QAAM,gBAAgB,UAAW,CAAE,WAAY;AAC9C,WAAO,OAAQ,SAAU,EAAE,QAAS,UAAU;AAAA,MAC7C,MAAM;AAAA,MACN,MAAM;AAAA,IACP,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,QAAM,OAAwC,CAAE,WAAY;AAE5D,MAAK,eAAgB;AACpB,SAAK,KAAM,UAAW;AACtB,SAAK,KAAM,GAAG,oBAAqB,eAAe,CAAC,CAAE,CAAE;AAAA,EACxD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,GAAI,OAAQ;AAAA,MACpB;AAAA,MACA,cAAY;AAAA,MACZ,WAAU;AAAA,MAEV,+BAAC,QAAK,cACL;AAAA,4BAAC,SAAI,WAAU,yCACd,8BAAC,KAAK,SAAL,EACE,eAAK,IAAK,CAAE,EAAE,IAAI,MAAM,MACzB,oBAAC,KAAK,KAAL,EAAoB,OAAQ,IAC1B,mBADa,EAEhB,CACC,GACH,GACD;AAAA,QACE,KAAK,IAAK,CAAE,EAAE,GAAG,MAAO;AACzB,cAAI;AACJ,kBAAS,IAAK;AAAA,YACb,KAAK;AACJ,yBAAW,oBAAC,eAAY;AACxB;AAAA,YACD,KAAK;AACJ,yBAAW,oBAAC,kBAAe;AAC3B;AAAA,YACD;AACC,yBAAW,oBAAC,kBAAe,MAAO,IAAK;AAAA,UACzC;AACA,iBACC;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cAEA,OAAQ;AAAA,cACR,WAAY;AAAA,cAEV;AAAA;AAAA,YAJI;AAAA,UAKP;AAAA,QAEF,CAAE;AAAA,SACH;AAAA;AAAA,EACD;AAEF;AAEA,IAAO,6BAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,442 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Button,
+  __experimentalConfirmDialog as ConfirmDialog,
+  __experimentalHStack as HStack,
+  __experimentalHeading as Heading,
+  Navigator,
+  useNavigator,
+  __experimentalSpacer as Spacer,
+  __experimentalText as Text,
+  __experimentalVStack as VStack,
+  Flex,
+  Notice,
+  ProgressBar,
+  CheckboxControl
+} from "@wordpress/components";
+import { useEntityRecord, store as coreStore } from "@wordpress/core-data";
+import { useSelect } from "@wordpress/data";
+import { useContext, useEffect, useState } from "@wordpress/element";
+import { __, _x, sprintf, isRTL } from "@wordpress/i18n";
+import { chevronLeft, chevronRight } from "@wordpress/icons";
+import { FontLibraryContext } from "./context";
+import FontCard from "./font-card";
+import LibraryFontVariant from "./library-font-variant";
+import { sortFontFaces } from "./utils/sort-font-faces";
+import {
+  setUIValuesNeeded,
+  loadFontFaceInBrowser,
+  unloadFontFaceInBrowser,
+  getDisplaySrcFromFontFace
+} from "./utils";
+import { useSetting } from "../hooks";
+function InstalledFonts() {
+  const {
+    baseCustomFonts,
+    libraryFontSelected,
+    handleSetLibraryFontSelected,
+    refreshLibrary,
+    uninstallFontFamily,
+    isResolvingLibrary,
+    isInstalling,
+    saveFontFamilies,
+    getFontFacesActivated
+  } = useContext(FontLibraryContext);
+  const [fontFamilies, setFontFamilies] = useSetting("typography.fontFamilies");
+  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+  const [notice, setNotice] = useState(null);
+  const [baseFontFamilies] = useSetting("typography.fontFamilies", void 0, "base");
+  const globalStylesId = useSelect((select) => {
+    const { __experimentalGetCurrentGlobalStylesId } = select(coreStore);
+    return __experimentalGetCurrentGlobalStylesId();
+  }, []);
+  const globalStyles = useEntityRecord(
+    "root",
+    "globalStyles",
+    globalStylesId
+  );
+  const fontFamiliesHasChanges = !!globalStyles?.edits?.settings?.typography?.fontFamilies;
+  const themeFonts = fontFamilies?.theme ? fontFamilies.theme.map((f) => setUIValuesNeeded(f, { source: "theme" })).sort((a, b) => a.name.localeCompare(b.name)) : [];
+  const themeFontsSlugs = new Set(themeFonts.map((f) => f.slug));
+  const baseThemeFonts = baseFontFamilies?.theme ? themeFonts.concat(
+    baseFontFamilies.theme.filter((f) => !themeFontsSlugs.has(f.slug)).map((f) => setUIValuesNeeded(f, { source: "theme" })).sort((a, b) => a.name.localeCompare(b.name))
+  ) : [];
+  const customFontFamilyId = libraryFontSelected?.source === "custom" && libraryFontSelected?.id;
+  const canUserDelete = useSelect(
+    (select) => {
+      const { canUser } = select(coreStore);
+      return customFontFamilyId && canUser("delete", {
+        kind: "postType",
+        name: "wp_font_family",
+        id: customFontFamilyId
+      });
+    },
+    [customFontFamilyId]
+  );
+  const shouldDisplayDeleteButton = !!libraryFontSelected && libraryFontSelected?.source !== "theme" && canUserDelete;
+  const handleUninstallClick = () => {
+    setIsConfirmDeleteOpen(true);
+  };
+  const handleUpdate = async () => {
+    setNotice(null);
+    try {
+      await saveFontFamilies(fontFamilies);
+      setNotice({
+        type: "success",
+        message: __("Font family updated successfully.")
+      });
+    } catch (error) {
+      setNotice({
+        type: "error",
+        message: sprintf(
+          /* translators: %s: error message */
+          __("There was an error updating the font family. %s"),
+          error.message
+        )
+      });
+    }
+  };
+  const getFontFacesToDisplay = (font) => {
+    if (!font) {
+      return [];
+    }
+    if (!font.fontFace || !font.fontFace.length) {
+      return [
+        {
+          fontFamily: font.fontFamily,
+          fontStyle: "normal",
+          fontWeight: "400"
+        }
+      ];
+    }
+    return sortFontFaces(font.fontFace);
+  };
+  const getFontCardVariantsText = (font) => {
+    const variantsInstalled = font?.fontFace && (font?.fontFace?.length ?? 0) > 0 ? font.fontFace.length : 1;
+    const variantsActive = getFontFacesActivated(
+      font.slug,
+      font.source
+    ).length;
+    return sprintf(
+      /* translators: 1: Active font variants, 2: Total font variants. */
+      __("%1$d/%2$d variants active"),
+      variantsActive,
+      variantsInstalled
+    );
+  };
+  useEffect(() => {
+    handleSetLibraryFontSelected(libraryFontSelected);
+    refreshLibrary();
+  }, []);
+  const activeFontsCount = libraryFontSelected ? getFontFacesActivated(
+    libraryFontSelected.slug,
+    libraryFontSelected.source
+  ).length : 0;
+  const selectedFontsCount = libraryFontSelected?.fontFace?.length ?? (libraryFontSelected?.fontFamily ? 1 : 0);
+  const isIndeterminate = activeFontsCount > 0 && activeFontsCount !== selectedFontsCount;
+  const isSelectAllChecked = activeFontsCount === selectedFontsCount;
+  const toggleSelectAll = () => {
+    if (!libraryFontSelected || !libraryFontSelected?.source) {
+      return;
+    }
+    const initialFonts = fontFamilies?.[libraryFontSelected.source]?.filter(
+      (f) => f.slug !== libraryFontSelected.slug
+    ) ?? [];
+    const newFonts = isSelectAllChecked ? initialFonts : [...initialFonts, libraryFontSelected];
+    setFontFamilies({
+      ...fontFamilies,
+      [libraryFontSelected.source]: newFonts
+    });
+    if (libraryFontSelected.fontFace) {
+      libraryFontSelected.fontFace.forEach((face) => {
+        if (isSelectAllChecked) {
+          unloadFontFaceInBrowser(face, "all");
+        } else {
+          const displaySrc = getDisplaySrcFromFontFace(
+            face?.src ?? ""
+          );
+          if (displaySrc) {
+            loadFontFaceInBrowser(face, displaySrc, "all");
+          }
+        }
+      });
+    }
+  };
+  const hasFonts = baseThemeFonts.length > 0 || baseCustomFonts.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "font-library-modal__tabpanel-layout", children: [
+    isResolvingLibrary && /* @__PURE__ */ jsx("div", { className: "font-library-modal__loading", children: /* @__PURE__ */ jsx(ProgressBar, {}) }),
+    !isResolvingLibrary && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Navigator,
+        {
+          initialPath: libraryFontSelected ? "/fontFamily" : "/",
+          children: [
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/", children: /* @__PURE__ */ jsxs(VStack, { spacing: "8", children: [
+              notice && /* @__PURE__ */ jsx(
+                Notice,
+                {
+                  status: notice.type,
+                  onRemove: () => setNotice(null),
+                  children: notice.message
+                }
+              ),
+              !hasFonts && /* @__PURE__ */ jsx(Text, { as: "p", children: __("No fonts installed.") }),
+              baseThemeFonts.length > 0 && /* @__PURE__ */ jsxs(VStack, { children: [
+                /* @__PURE__ */ jsx("h2", {
+                  className: "font-library-modal__fonts-title",
+                  /* translators: Heading for a list of fonts provided by the theme. */
+                  children: _x("Theme", "font source")
+                }),
+                /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    role: "list",
+                    className: "font-library-modal__fonts-list",
+                    children: baseThemeFonts.map((font) => /* @__PURE__ */ jsx(
+                      "li",
+                      {
+                        className: "font-library-modal__fonts-list-item",
+                        children: /* @__PURE__ */ jsx(
+                          FontCard,
+                          {
+                            font,
+                            navigatorPath: "/fontFamily",
+                            variantsText: getFontCardVariantsText(
+                              font
+                            ),
+                            onClick: () => {
+                              setNotice(null);
+                              handleSetLibraryFontSelected(
+                                font
+                              );
+                            }
+                          }
+                        )
+                      },
+                      font.slug
+                    ))
+                  }
+                )
+              ] }),
+              baseCustomFonts.length > 0 && /* @__PURE__ */ jsxs(VStack, { children: [
+                /* @__PURE__ */ jsx("h2", {
+                  className: "font-library-modal__fonts-title",
+                  /* translators: Heading for a list of fonts installed by the user. */
+                  children: _x("Custom", "font source")
+                }),
+                /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    role: "list",
+                    className: "font-library-modal__fonts-list",
+                    children: baseCustomFonts.map((font) => /* @__PURE__ */ jsx(
+                      "li",
+                      {
+                        className: "font-library-modal__fonts-list-item",
+                        children: /* @__PURE__ */ jsx(
+                          FontCard,
+                          {
+                            font,
+                            navigatorPath: "/fontFamily",
+                            variantsText: getFontCardVariantsText(
+                              font
+                            ),
+                            onClick: () => {
+                              setNotice(null);
+                              handleSetLibraryFontSelected(
+                                font
+                              );
+                            }
+                          }
+                        )
+                      },
+                      font.slug
+                    ))
+                  }
+                )
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxs(Navigator.Screen, { path: "/fontFamily", children: [
+              libraryFontSelected && /* @__PURE__ */ jsx(
+                ConfirmDeleteDialog,
+                {
+                  font: libraryFontSelected,
+                  isOpen: isConfirmDeleteOpen,
+                  setIsOpen: setIsConfirmDeleteOpen,
+                  setNotice,
+                  uninstallFontFamily,
+                  handleSetLibraryFontSelected
+                }
+              ),
+              /* @__PURE__ */ jsxs(Flex, { justify: "flex-start", children: [
+                /* @__PURE__ */ jsx(
+                  Navigator.BackButton,
+                  {
+                    icon: isRTL() ? chevronRight : chevronLeft,
+                    size: "small",
+                    onClick: () => {
+                      handleSetLibraryFontSelected(
+                        void 0
+                      );
+                      setNotice(null);
+                    },
+                    label: __("Back")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Heading,
+                  {
+                    level: 2,
+                    size: 13,
+                    className: "global-styles-ui-header",
+                    children: libraryFontSelected?.name
+                  }
+                )
+              ] }),
+              notice && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Spacer, { margin: 1 }),
+                /* @__PURE__ */ jsx(
+                  Notice,
+                  {
+                    status: notice.type,
+                    onRemove: () => setNotice(null),
+                    children: notice.message
+                  }
+                ),
+                /* @__PURE__ */ jsx(Spacer, { margin: 1 })
+              ] }),
+              /* @__PURE__ */ jsx(Spacer, { margin: 4 }),
+              /* @__PURE__ */ jsx(Text, { children: __(
+                "Choose font variants. Keep in mind that too many variants could make your site slower."
+              ) }),
+              /* @__PURE__ */ jsx(Spacer, { margin: 4 }),
+              /* @__PURE__ */ jsxs(VStack, { spacing: 0, children: [
+                /* @__PURE__ */ jsx(
+                  CheckboxControl,
+                  {
+                    className: "font-library-modal__select-all",
+                    label: __("Select all"),
+                    checked: isSelectAllChecked,
+                    onChange: toggleSelectAll,
+                    indeterminate: isIndeterminate,
+                    __nextHasNoMarginBottom: true
+                  }
+                ),
+                /* @__PURE__ */ jsx(Spacer, { margin: 8 }),
+                /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    role: "list",
+                    className: "font-library-modal__fonts-list",
+                    children: libraryFontSelected && getFontFacesToDisplay(
+                      libraryFontSelected
+                    ).map((face, i) => /* @__PURE__ */ jsx(
+                      "li",
+                      {
+                        className: "font-library-modal__fonts-list-item",
+                        children: /* @__PURE__ */ jsx(
+                          LibraryFontVariant,
+                          {
+                            font: libraryFontSelected,
+                            face
+                          },
+                          `face${i}`
+                        )
+                      },
+                      `face${i}`
+                    ))
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        HStack,
+        {
+          justify: "flex-end",
+          className: "font-library-modal__footer",
+          children: [
+            isInstalling && /* @__PURE__ */ jsx(ProgressBar, {}),
+            shouldDisplayDeleteButton && /* @__PURE__ */ jsx(
+              Button,
+              {
+                __next40pxDefaultSize: true,
+                isDestructive: true,
+                variant: "tertiary",
+                onClick: handleUninstallClick,
+                children: __("Delete")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                __next40pxDefaultSize: true,
+                variant: "primary",
+                onClick: handleUpdate,
+                disabled: !fontFamiliesHasChanges,
+                accessibleWhenDisabled: true,
+                children: __("Update")
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function ConfirmDeleteDialog({
+  font,
+  isOpen,
+  setIsOpen,
+  setNotice,
+  uninstallFontFamily,
+  handleSetLibraryFontSelected
+}) {
+  const navigator = useNavigator();
+  const handleConfirmUninstall = async () => {
+    setNotice(null);
+    setIsOpen(false);
+    try {
+      await uninstallFontFamily(font);
+      navigator.goBack();
+      handleSetLibraryFontSelected(void 0);
+      setNotice({
+        type: "success",
+        message: __("Font family uninstalled successfully.")
+      });
+    } catch (error) {
+      setNotice({
+        type: "error",
+        message: __("There was an error uninstalling the font family.") + error.message
+      });
+    }
+  };
+  const handleCancelUninstall = () => {
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsx(
+    ConfirmDialog,
+    {
+      isOpen,
+      cancelButtonText: __("Cancel"),
+      confirmButtonText: __("Delete"),
+      onCancel: handleCancelUninstall,
+      onConfirm: handleConfirmUninstall,
+      size: "medium",
+      children: font && sprintf(
+        /* translators: %s: Name of the font. */
+        __(
+          'Are you sure you want to delete "%s" font and all its variants and assets?'
+        ),
+        font.name
+      )
+    }
+  );
+}
+var installed_fonts_default = InstalledFonts;
+export {
+  installed_fonts_default as default
+};
+//# sourceMappingURL=installed-fonts.js.map