@wordpress/global-styles-ui 1.1.0

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/library-font-details.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport LibraryFontVariant from './library-font-variant';\nimport { sortFontFaces } from './utils/sort-font-faces';\nimport type { FontFamily } from './types';\n\nfunction LibraryFontDetails( { font }: { font: FontFamily } ) {\n\tconst fontFaces =\n\t\tfont.fontFace && font.fontFace.length\n\t\t\t? sortFontFaces( font.fontFace )\n\t\t\t: [\n\t\t\t\t\t{\n\t\t\t\t\t\tfontFamily: font.fontFamily,\n\t\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\t\tfontWeight: '400',\n\t\t\t\t\t},\n\t\t\t  ];\n\n\treturn (\n\t\t<>\n\t\t\t<Spacer margin={ 4 } />\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t{ fontFaces.map( ( face, i ) => (\n\t\t\t\t\t<LibraryFontVariant\n\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t\t<Spacer margin={ 8 } />\n\t\t</>\n\t);\n}\n\nexport default LibraryFontDetails;\n"],
+  "mappings": "AA4BE,mBACC,KACA,YAFD;AAzBF;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AAKP,OAAO,wBAAwB;AAC/B,SAAS,qBAAqB;AAG9B,SAAS,mBAAoB,EAAE,KAAK,GAA0B;AAC7D,QAAM,YACL,KAAK,YAAY,KAAK,SAAS,SAC5B,cAAe,KAAK,QAAS,IAC7B;AAAA,IACA;AAAA,MACC,YAAY,KAAK;AAAA,MACjB,WAAW;AAAA,MACX,YAAY;AAAA,IACb;AAAA,EACA;AAEJ,SACC,iCACC;AAAA,wBAAC,UAAO,QAAS,GAAI;AAAA,IACrB,qBAAC,UAAO,SAAU,GACjB;AAAA,0BAAC,UAAO,QAAS,GAAI;AAAA,MACnB,UAAU,IAAK,CAAE,MAAM,MACxB;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QACM,OAAQ,CAAE;AAAA,MACjB,CACC;AAAA,OACH;AAAA,IACA,oBAAC,UAAO,QAAS,GAAI;AAAA,KACtB;AAEF;AAEA,IAAO,+BAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useId } from "@wordpress/element";
+import { CheckboxControl, Flex } from "@wordpress/components";
+import { getFontFaceVariantName } from "./utils";
+import { FontLibraryContext } from "./context";
+import FontDemo from "./font-demo";
+function LibraryFontVariant({
+  face,
+  font
+}) {
+  const { isFontActivated, toggleActivateFont } = useContext(FontLibraryContext);
+  const isInstalled = (font?.fontFace?.length ?? 0) > 0 ? isFontActivated(
+    font.slug,
+    face.fontStyle,
+    face.fontWeight,
+    font.source
+  ) : isFontActivated(font.slug, void 0, void 0, font.source);
+  const handleToggleActivation = () => {
+    if ((font?.fontFace?.length ?? 0) > 0) {
+      toggleActivateFont(font, face);
+      return;
+    }
+    toggleActivateFont(font);
+  };
+  const displayName = font.name + " " + getFontFaceVariantName(face);
+  const checkboxId = useId();
+  return /* @__PURE__ */ jsx("div", { className: "font-library-modal__font-card", children: /* @__PURE__ */ jsxs(Flex, { justify: "flex-start", align: "center", gap: "1rem", children: [
+    /* @__PURE__ */ jsx(
+      CheckboxControl,
+      {
+        checked: isInstalled,
+        onChange: handleToggleActivation,
+        __nextHasNoMarginBottom: true,
+        id: checkboxId
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { htmlFor: checkboxId, children: /* @__PURE__ */ jsx(
+      FontDemo,
+      {
+        font: face,
+        text: displayName,
+        onClick: handleToggleActivation
+      }
+    ) })
+  ] }) });
+}
+var library_font_variant_default = LibraryFontVariant;
+export {
+  library_font_variant_default as default
+};
+//# sourceMappingURL=library-font-variant.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/library-font-variant.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useId } from '@wordpress/element';\nimport { CheckboxControl, Flex } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { getFontFaceVariantName } from './utils';\nimport { FontLibraryContext } from './context';\nimport FontDemo from './font-demo';\nimport type { FontFace, FontFamily } from './types';\n\nfunction LibraryFontVariant( {\n\tface,\n\tfont,\n}: {\n\tface: FontFace;\n\tfont: FontFamily;\n} ) {\n\tconst { isFontActivated, toggleActivateFont } =\n\t\tuseContext( FontLibraryContext );\n\n\tconst isInstalled =\n\t\t( font?.fontFace?.length ?? 0 ) > 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, undefined, undefined, font.source );\n\n\tconst handleToggleActivation = () => {\n\t\tif ( ( font?.fontFace?.length ?? 0 ) > 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 checkboxId = useId();\n\n\treturn (\n\t\t<div className=\"font-library-modal__font-card\">\n\t\t\t<Flex justify=\"flex-start\" align=\"center\" gap=\"1rem\">\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tchecked={ isInstalled }\n\t\t\t\t\tonChange={ handleToggleActivation }\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tid={ checkboxId }\n\t\t\t\t/>\n\t\t\t\t<label htmlFor={ checkboxId }>\n\t\t\t\t\t<FontDemo\n\t\t\t\t\t\tfont={ face }\n\t\t\t\t\t\ttext={ displayName }\n\t\t\t\t\t\tonClick={ handleToggleActivation }\n\t\t\t\t\t/>\n\t\t\t\t</label>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n\nexport default LibraryFontVariant;\n"],
+  "mappings": "AA+CG,SACC,KADD;AA5CH,SAAS,YAAY,aAAa;AAClC,SAAS,iBAAiB,YAAY;AAKtC,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC,OAAO,cAAc;AAGrB,SAAS,mBAAoB;AAAA,EAC5B;AAAA,EACA;AACD,GAGI;AACH,QAAM,EAAE,iBAAiB,mBAAmB,IAC3C,WAAY,kBAAmB;AAEhC,QAAM,eACH,MAAM,UAAU,UAAU,KAAM,IAC/B;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACL,IACA,gBAAiB,KAAK,MAAM,QAAW,QAAW,KAAK,MAAO;AAElE,QAAM,yBAAyB,MAAM;AACpC,SAAO,MAAM,UAAU,UAAU,KAAM,GAAI;AAC1C,yBAAoB,MAAM,IAAK;AAC/B;AAAA,IACD;AACA,uBAAoB,IAAK;AAAA,EAC1B;AAEA,QAAM,cAAc,KAAK,OAAO,MAAM,uBAAwB,IAAK;AACnE,QAAM,aAAa,MAAM;AAEzB,SACC,oBAAC,SAAI,WAAU,iCACd,+BAAC,QAAK,SAAQ,cAAa,OAAM,UAAS,KAAI,QAC7C;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,UAAW;AAAA,QACX,yBAAuB;AAAA,QACvB,IAAK;AAAA;AAAA,IACN;AAAA,IACA,oBAAC,WAAM,SAAU,YAChB;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,MAAO;AAAA,QACP,SAAU;AAAA;AAAA,IACX,GACD;AAAA,KACD,GACD;AAEF;AAEA,IAAO,+BAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,76 @@
+import apiFetch from "@wordpress/api-fetch";
+const FONT_FAMILIES_URL = "/wp/v2/font-families";
+const FONT_COLLECTIONS_URL = "/wp/v2/font-collections";
+async function fetchInstallFontFamily(data) {
+  const config = {
+    path: FONT_FAMILIES_URL,
+    method: "POST",
+    body: data
+  };
+  const response = await apiFetch(config);
+  return {
+    id: response.id,
+    ...response.font_family_settings,
+    fontFace: []
+  };
+}
+async function fetchInstallFontFace(fontFamilyId, data) {
+  const config = {
+    path: `${FONT_FAMILIES_URL}/${fontFamilyId}/font-faces`,
+    method: "POST",
+    body: data
+  };
+  const response = await apiFetch(config);
+  return {
+    id: response.id,
+    ...response.font_face_settings
+  };
+}
+async function fetchGetFontFamilyBySlug(slug) {
+  const config = {
+    path: `${FONT_FAMILIES_URL}?slug=${slug}&_embed=true`,
+    method: "GET"
+  };
+  const response = await apiFetch(config);
+  if (!response || response.length === 0) {
+    return null;
+  }
+  const fontFamilyPost = response[0];
+  return {
+    id: fontFamilyPost.id,
+    ...fontFamilyPost.font_family_settings,
+    fontFace: (fontFamilyPost?._embedded?.font_faces ?? []).map(
+      (face) => face.font_face_settings
+    ) || []
+  };
+}
+async function fetchUninstallFontFamily(fontFamilyId) {
+  const config = {
+    path: `${FONT_FAMILIES_URL}/${fontFamilyId}?force=true`,
+    method: "DELETE"
+  };
+  return await apiFetch(config);
+}
+async function fetchFontCollections() {
+  const config = {
+    path: `${FONT_COLLECTIONS_URL}?_fields=slug,name,description`,
+    method: "GET"
+  };
+  return await apiFetch(config);
+}
+async function fetchFontCollection(id) {
+  const config = {
+    path: `${FONT_COLLECTIONS_URL}/${id}`,
+    method: "GET"
+  };
+  return await apiFetch(config);
+}
+export {
+  fetchFontCollection,
+  fetchFontCollections,
+  fetchGetFontFamilyBySlug,
+  fetchInstallFontFace,
+  fetchInstallFontFamily,
+  fetchUninstallFontFamily
+};
+//# sourceMappingURL=resolvers.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/resolvers.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// The font library modal is pre-existent in Gutenberg\n// It needs to be refactored to move all the API calls to core-data.\n// eslint-disable-next-line no-restricted-imports\nimport apiFetch from '@wordpress/api-fetch';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCollectionFontFace,\n\tCollectionFontFamily,\n\tFontCollection,\n\tFontFace,\n} from './types';\n\nconst FONT_FAMILIES_URL = '/wp/v2/font-families';\nconst FONT_COLLECTIONS_URL = '/wp/v2/font-collections';\n\nexport async function fetchInstallFontFamily( data: FormData ) {\n\tconst config = {\n\t\tpath: FONT_FAMILIES_URL,\n\t\tmethod: 'POST',\n\t\tbody: data,\n\t};\n\tconst response: CollectionFontFamily = await apiFetch( config );\n\treturn {\n\t\tid: response.id as string,\n\t\t...response.font_family_settings,\n\t\tfontFace: [],\n\t};\n}\n\nexport async function fetchInstallFontFace(\n\tfontFamilyId: string,\n\tdata: FormData\n): Promise< FontFace > {\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 ) ) as CollectionFontFace;\n\treturn {\n\t\tid: response.id,\n\t\t...response.font_face_settings,\n\t};\n}\n\nexport async function fetchGetFontFamilyBySlug( slug: string ) {\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 ) ) as\n\t\t| CollectionFontFamily[]\n\t\t| undefined;\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\t( fontFamilyPost?._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(\n\tfontFamilyId: string\n): Promise< {\n\tdeleted: boolean;\n} > {\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 ) ) as FontCollection[];\n}\n\nexport async function fetchFontCollection( id: string ) {\n\tconst config = {\n\t\tpath: `${ FONT_COLLECTIONS_URL }/${ id }`,\n\t\tmethod: 'GET',\n\t};\n\treturn ( await apiFetch( config ) ) as FontCollection;\n}\n"],
+  "mappings": "AAMA,OAAO,cAAc;AAYrB,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAE7B,eAAsB,uBAAwB,MAAiB;AAC9D,QAAM,SAAS;AAAA,IACd,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EACP;AACA,QAAM,WAAiC,MAAM,SAAU,MAAO;AAC9D,SAAO;AAAA,IACN,IAAI,SAAS;AAAA,IACb,GAAG,SAAS;AAAA,IACZ,UAAU,CAAC;AAAA,EACZ;AACD;AAEA,eAAsB,qBACrB,cACA,MACsB;AACtB,QAAM,SAAS;AAAA,IACd,MAAM,GAAI,iBAAkB,IAAK,YAAa;AAAA,IAC9C,QAAQ;AAAA,IACR,MAAM;AAAA,EACP;AACA,QAAM,WAAa,MAAM,SAAU,MAAO;AAC1C,SAAO;AAAA,IACN,IAAI,SAAS;AAAA,IACb,GAAG,SAAS;AAAA,EACb;AACD;AAEA,eAAsB,yBAA0B,MAAe;AAC9D,QAAM,SAAS;AAAA,IACd,MAAM,GAAI,iBAAkB,SAAU,IAAK;AAAA,IAC3C,QAAQ;AAAA,EACT;AACA,QAAM,WAAa,MAAM,SAAU,MAAO;AAG1C,MAAK,CAAE,YAAY,SAAS,WAAW,GAAI;AAC1C,WAAO;AAAA,EACR;AACA,QAAM,iBAAiB,SAAU,CAAE;AACnC,SAAO;AAAA,IACN,IAAI,eAAe;AAAA,IACnB,GAAG,eAAe;AAAA,IAClB,WACG,gBAAgB,WAAW,cAAc,CAAC,GAAI;AAAA,MAC/C,CAAE,SAAU,KAAK;AAAA,IAClB,KAAK,CAAC;AAAA,EACR;AACD;AAEA,eAAsB,yBACrB,cAGG;AACH,QAAM,SAAS;AAAA,IACd,MAAM,GAAI,iBAAkB,IAAK,YAAa;AAAA,IAC9C,QAAQ;AAAA,EACT;AACA,SAAO,MAAM,SAAU,MAAO;AAC/B;AAEA,eAAsB,uBAAuB;AAC5C,QAAM,SAAS;AAAA,IACd,MAAM,GAAI,oBAAqB;AAAA,IAC/B,QAAQ;AAAA,EACT;AACA,SAAS,MAAM,SAAU,MAAO;AACjC;AAEA,eAAsB,oBAAqB,IAAa;AACvD,QAAM,SAAS;AAAA,IACd,MAAM,GAAI,oBAAqB,IAAK,EAAG;AAAA,IACvC,QAAQ;AAAA,EACT;AACA,SAAS,MAAM,SAAU,MAAO;AACjC;",
+  "names": []
+}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

@@ -0,0 +1,187 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { __ } from "@wordpress/i18n";
+import {
+  __experimentalSpacer as Spacer,
+  __experimentalText as Text,
+  __experimentalVStack as VStack,
+  Button,
+  DropZone,
+  Notice,
+  FormFileUpload,
+  FlexItem,
+  ProgressBar
+} from "@wordpress/components";
+import { useContext, useState } from "@wordpress/element";
+import { ALLOWED_FILE_EXTENSIONS } from "./utils/constants";
+import { FontLibraryContext } from "./context";
+import { Font } from "./lib/lib-font.browser";
+import makeFamiliesFromFaces from "./utils/make-families-from-faces";
+import { loadFontFaceInBrowser } from "./utils";
+function UploadFonts() {
+  const { installFonts } = useContext(FontLibraryContext);
+  const [isUploading, setIsUploading] = useState(false);
+  const [notice, setNotice] = useState(null);
+  const handleDropZone = (files) => {
+    handleFilesUpload(files);
+  };
+  const onFilesUpload = (event) => {
+    handleFilesUpload(event.target.files);
+  };
+  const handleFilesUpload = async (files) => {
+    if (!files) {
+      return;
+    }
+    setNotice(null);
+    setIsUploading(true);
+    const uniqueFilenames = /* @__PURE__ */ new Set();
+    const selectedFiles = [...files];
+    let hasInvalidFiles = false;
+    const checkFilesPromises = selectedFiles.map(async (file) => {
+      const isFont = await isFontFile(file);
+      if (!isFont) {
+        hasInvalidFiles = true;
+        return null;
+      }
+      if (uniqueFilenames.has(file.name)) {
+        return null;
+      }
+      const fileExtension = (((file.name ?? "").split(".") ?? []).pop() ?? "").toLowerCase();
+      if (ALLOWED_FILE_EXTENSIONS.includes(fileExtension)) {
+        uniqueFilenames.add(file.name);
+        return file;
+      }
+      return null;
+    });
+    const allowedFiles = (await Promise.all(checkFilesPromises)).filter((file) => null !== file);
+    if (allowedFiles.length > 0) {
+      loadFiles(allowedFiles);
+    } else {
+      const message = hasInvalidFiles ? __("Sorry, you are not allowed to upload this file type.") : __("No fonts found to install.");
+      setNotice({
+        type: "error",
+        message
+      });
+      setIsUploading(false);
+    }
+  };
+  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);
+  };
+  async function isFontFile(file) {
+    const font = new Font("Uploaded Font");
+    try {
+      const buffer = await readFileAsArrayBuffer(file);
+      await font.fromDataBuffer(buffer, "font");
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+  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);
+    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
+    };
+  };
+  const handleInstall = async (fontFaces) => {
+    const fontFamilies = makeFamiliesFromFaces(fontFaces);
+    try {
+      await installFonts(fontFamilies);
+      setNotice({
+        type: "success",
+        message: __("Fonts were installed successfully.")
+      });
+    } catch (error) {
+      const typedError = error;
+      setNotice({
+        type: "error",
+        message: typedError.message,
+        errors: typedError?.installationErrors
+      });
+    }
+    setIsUploading(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "font-library-modal__tabpanel-layout", children: [
+    /* @__PURE__ */ jsx(DropZone, { onFilesDrop: handleDropZone }),
+    /* @__PURE__ */ jsxs(VStack, { className: "font-library-modal__local-fonts", children: [
+      notice && /* @__PURE__ */ jsxs(
+        Notice,
+        {
+          status: notice.type,
+          __unstableHTML: true,
+          onRemove: () => setNotice(null),
+          children: [
+            notice.message,
+            notice.errors && /* @__PURE__ */ jsx("ul", { children: notice.errors.map((error, index) => /* @__PURE__ */ jsx("li", { children: error }, index)) })
+          ]
+        }
+      ),
+      isUploading && /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx("div", { className: "font-library-modal__upload-area", children: /* @__PURE__ */ jsx(ProgressBar, {}) }) }),
+      !isUploading && /* @__PURE__ */ jsx(
+        FormFileUpload,
+        {
+          accept: ALLOWED_FILE_EXTENSIONS.map(
+            (ext) => `.${ext}`
+          ).join(","),
+          multiple: true,
+          onChange: onFilesUpload,
+          render: ({ openFileDialog }) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              __next40pxDefaultSize: true,
+              className: "font-library-modal__upload-area",
+              onClick: openFileDialog,
+              children: __("Upload font")
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(Spacer, { margin: 2 }),
+      /* @__PURE__ */ jsx(Text, { className: "font-library-modal__upload-area__text", children: __(
+        "Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2."
+      ) })
+    ] })
+  ] });
+}
+var upload_fonts_default = UploadFonts;
+export {
+  upload_fonts_default as default
+};
+//# sourceMappingURL=upload-fonts.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/upload-fonts.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\tButton,\n\tDropZone,\n\tNotice,\n\tFormFileUpload,\n\tFlexItem,\n\tProgressBar,\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 type { FontFace } from './types';\n\nfunction UploadFonts() {\n\tconst { installFonts } = useContext( FontLibraryContext );\n\tconst [ isUploading, setIsUploading ] = useState( false );\n\tconst [ notice, setNotice ] = useState< {\n\t\ttype: 'success' | 'error';\n\t\tmessage: string;\n\t\terrors?: string[];\n\t} | null >( null );\n\n\tconst handleDropZone = ( files: File[] ) => {\n\t\thandleFilesUpload( files );\n\t};\n\tconst onFilesUpload = ( event: React.ChangeEvent< HTMLInputElement > ) => {\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 = async ( files: FileList | File[] | null ) => {\n\t\tif ( ! files ) {\n\t\t\treturn;\n\t\t}\n\t\tsetNotice( null );\n\t\tsetIsUploading( true );\n\t\tconst uniqueFilenames = new Set();\n\t\tconst selectedFiles = [ ...files ];\n\t\tlet hasInvalidFiles = false;\n\n\t\t// Use map to create a promise for each file check, then filter with Promise.all.\n\t\tconst checkFilesPromises = selectedFiles.map( async ( file ) => {\n\t\t\tconst isFont = await isFontFile( file );\n\t\t\tif ( ! isFont ) {\n\t\t\t\thasInvalidFiles = true;\n\t\t\t\treturn null; // Return null for invalid files.\n\t\t\t}\n\t\t\t// Check for duplicates\n\t\t\tif ( uniqueFilenames.has( file.name ) ) {\n\t\t\t\treturn null; // Return null for duplicates.\n\t\t\t}\n\t\t\t// Check if the file extension is allowed.\n\t\t\tconst fileExtension = (\n\t\t\t\t( ( file.name ?? '' ).split( '.' ) ?? [] ).pop() ?? ''\n\t\t\t).toLowerCase();\n\t\t\tif ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {\n\t\t\t\tuniqueFilenames.add( file.name );\n\t\t\t\treturn file; // Return the file if it passes all checks.\n\t\t\t}\n\t\t\treturn null; // Return null for disallowed file extensions.\n\t\t} );\n\n\t\t// Filter out the nulls after all promises have resolved.\n\t\tconst allowedFiles: File[] = (\n\t\t\tawait Promise.all( checkFilesPromises )\n\t\t).filter( ( file ) => null !== file );\n\n\t\tif ( allowedFiles.length > 0 ) {\n\t\t\tloadFiles( allowedFiles );\n\t\t} else {\n\t\t\tconst message = hasInvalidFiles\n\t\t\t\t? __( 'Sorry, you are not allowed to upload this file type.' )\n\t\t\t\t: __( 'No fonts found to install.' );\n\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage,\n\t\t\t} );\n\t\t\tsetIsUploading( false );\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: File[] ) => {\n\t\tconst fontFacesLoaded = await Promise.all(\n\t\t\tfiles.map( async ( fontFile: File ) => {\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/**\n\t * Checks if a file is a valid Font file.\n\t *\n\t * @param {File} file The file to be checked.\n\t * @return {boolean} Whether the file is a valid font file.\n\t */\n\tasync function isFontFile( file: File ) {\n\t\tconst font = new Font( 'Uploaded Font' );\n\t\ttry {\n\t\t\tconst buffer = await readFileAsArrayBuffer( file );\n\t\t\tawait font.fromDataBuffer( buffer, 'font' );\n\t\t\treturn true;\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t} catch ( error ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t// Create a function to read the file as array buffer\n\tasync function readFileAsArrayBuffer( file: 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: File ) => {\n\t\tconst buffer = await readFileAsArrayBuffer( fontFile );\n\t\tconst fontObj: Font & {\n\t\t\tonload?: ( val: { detail: { font: any } } ) => void;\n\t\t} = 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: { detail: { font: any } } = 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: string } ) => 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: FontFace[] ) => {\n\t\tconst fontFamilies = makeFamiliesFromFaces( fontFaces );\n\n\t\ttry {\n\t\t\tawait installFonts( fontFamilies );\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\tconst typedError = error as Error & {\n\t\t\t\tinstallationErrors?: string[];\n\t\t\t};\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: typedError.message,\n\t\t\t\terrors: typedError?.installationErrors,\n\t\t\t} );\n\t\t}\n\n\t\tsetIsUploading( false );\n\t};\n\n\treturn (\n\t\t<div className=\"font-library-modal__tabpanel-layout\">\n\t\t\t<DropZone onFilesDrop={ handleDropZone } />\n\t\t\t<VStack className=\"font-library-modal__local-fonts\">\n\t\t\t\t{ notice && (\n\t\t\t\t\t<Notice\n\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t__unstableHTML\n\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t{ notice.errors && (\n\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t{ notice.errors.map( ( error, index ) => (\n\t\t\t\t\t\t\t\t\t<li key={ index }>{ error }</li>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Notice>\n\t\t\t\t) }\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\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\t__next40pxDefaultSize\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: .ttf, .otf, .woff, and .woff2.'\n\t\t\t\t\t) }\n\t\t\t\t</Text>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default UploadFonts;\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/font-library-modal/utils/constants.js

@@ -0,0 +1,23 @@
+import { _x } from "@wordpress/i18n";
+const ALLOWED_FILE_EXTENSIONS = ["otf", "ttf", "woff", "woff2"];
+const FONT_WEIGHTS = {
+  100: _x("Thin", "font weight"),
+  200: _x("Extra-light", "font weight"),
+  300: _x("Light", "font weight"),
+  400: _x("Normal", "font weight"),
+  500: _x("Medium", "font weight"),
+  600: _x("Semi-bold", "font weight"),
+  700: _x("Bold", "font weight"),
+  800: _x("Extra-bold", "font weight"),
+  900: _x("Black", "font weight")
+};
+const FONT_STYLES = {
+  normal: _x("Normal", "font style"),
+  italic: _x("Italic", "font style")
+};
+export {
+  ALLOWED_FILE_EXTENSIONS,
+  FONT_STYLES,
+  FONT_WEIGHTS
+};
+//# sourceMappingURL=constants.js.map

package/build-module/font-library-modal/utils/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/font-library-modal/utils/constants.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _x } from '@wordpress/i18n';\n\nexport const ALLOWED_FILE_EXTENSIONS = [ 'otf', 'ttf', 'woff', 'woff2' ];\n\nexport const FONT_WEIGHTS: Record< string, string > = {\n\t100: _x( 'Thin', 'font weight' ),\n\t200: _x( 'Extra-light', 'font weight' ),\n\t300: _x( 'Light', 'font weight' ),\n\t400: _x( 'Normal', 'font weight' ),\n\t500: _x( 'Medium', 'font weight' ),\n\t600: _x( 'Semi-bold', 'font weight' ),\n\t700: _x( 'Bold', 'font weight' ),\n\t800: _x( 'Extra-bold', 'font weight' ),\n\t900: _x( 'Black', 'font weight' ),\n};\n\nexport const FONT_STYLES: Record< string, string > = {\n\tnormal: _x( 'Normal', 'font style' ),\n\titalic: _x( 'Italic', 'font style' ),\n};\n"],
+  "mappings": "AAGA,SAAS,UAAU;AAEZ,MAAM,0BAA0B,CAAE,OAAO,OAAO,QAAQ,OAAQ;AAEhE,MAAM,eAAyC;AAAA,EACrD,KAAK,GAAI,QAAQ,aAAc;AAAA,EAC/B,KAAK,GAAI,eAAe,aAAc;AAAA,EACtC,KAAK,GAAI,SAAS,aAAc;AAAA,EAChC,KAAK,GAAI,UAAU,aAAc;AAAA,EACjC,KAAK,GAAI,UAAU,aAAc;AAAA,EACjC,KAAK,GAAI,aAAa,aAAc;AAAA,EACpC,KAAK,GAAI,QAAQ,aAAc;AAAA,EAC/B,KAAK,GAAI,cAAc,aAAc;AAAA,EACrC,KAAK,GAAI,SAAS,aAAc;AACjC;AAEO,MAAM,cAAwC;AAAA,EACpD,QAAQ,GAAI,UAAU,YAAa;AAAA,EACnC,QAAQ,GAAI,UAAU,YAAa;AACpC;",
+  "names": []
+}

package/build-module/font-library-modal/utils/filter-fonts.js

@@ -0,0 +1,19 @@
+function filterFonts(fonts, filters) {
+  const { category, search } = filters;
+  let filteredFonts = fonts || [];
+  if (category && category !== "all") {
+    filteredFonts = filteredFonts.filter(
+      (font) => font.categories && font.categories.indexOf(category) !== -1
+    );
+  }
+  if (search) {
+    filteredFonts = filteredFonts.filter(
+      (font) => font.font_family_settings && font.font_family_settings.name.toLowerCase().includes(search.toLowerCase())
+    );
+  }
+  return filteredFonts;
+}
+export {
+  filterFonts as default
+};
+//# sourceMappingURL=filter-fonts.js.map

package/build-module/font-library-modal/utils/filter-fonts.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/font-library-modal/utils/filter-fonts.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { CollectionFontFamily } from '../types';\n\n/**\n * Filters a list of fonts based on the specified filters.\n *\n * This function filters a given array of fonts based on the criteria provided in the filters object.\n * It supports filtering by category and a search term. If the category is provided and not equal to 'all',\n * the function filters the fonts array to include only those fonts that belong to the specified category.\n * Additionally, if a search term is provided, it filters the fonts array to include only those fonts\n * whose name includes the search term, case-insensitively.\n *\n * @param fonts            Array of font objects in font-collection schema fashion to be filtered. Each font object should have a 'categories' property and a 'font_family_settings' property with a 'name' key.\n * @param filters          Object containing the filter criteria. It should have a 'category' key and/or a 'search' key.\n * @param filters.category The category to filter fonts by. If 'all', no category filtering is applied.\n * @param filters.search   The search term to filter fonts by. If provided, only fonts whose\n *\n * @return Array of filtered font objects based on the provided criteria.\n */\nexport default function filterFonts(\n\tfonts: CollectionFontFamily[],\n\tfilters: { category?: string; search?: string }\n): CollectionFontFamily[] {\n\tconst { category, search } = filters;\n\tlet filteredFonts = fonts || [];\n\n\tif ( category && category !== 'all' ) {\n\t\tfilteredFonts = filteredFonts.filter(\n\t\t\t( font ) =>\n\t\t\t\tfont.categories && font.categories.indexOf( category ) !== -1\n\t\t);\n\t}\n\n\tif ( search ) {\n\t\tfilteredFonts = filteredFonts.filter(\n\t\t\t( font ) =>\n\t\t\t\tfont.font_family_settings &&\n\t\t\t\tfont.font_family_settings.name\n\t\t\t\t\t.toLowerCase()\n\t\t\t\t\t.includes( search.toLowerCase() )\n\t\t);\n\t}\n\n\treturn filteredFonts;\n}\n"],
+  "mappings": "AAqBe,SAAR,YACN,OACA,SACyB;AACzB,QAAM,EAAE,UAAU,OAAO,IAAI;AAC7B,MAAI,gBAAgB,SAAS,CAAC;AAE9B,MAAK,YAAY,aAAa,OAAQ;AACrC,oBAAgB,cAAc;AAAA,MAC7B,CAAE,SACD,KAAK,cAAc,KAAK,WAAW,QAAS,QAAS,MAAM;AAAA,IAC7D;AAAA,EACD;AAEA,MAAK,QAAS;AACb,oBAAgB,cAAc;AAAA,MAC7B,CAAE,SACD,KAAK,wBACL,KAAK,qBAAqB,KACxB,YAAY,EACZ,SAAU,OAAO,YAAY,CAAE;AAAA,IACnC;AAAA,EACD;AAEA,SAAO;AACR;",
+  "names": []
+}

package/build-module/font-library-modal/utils/fonts-outline.js

@@ -0,0 +1,26 @@
+function getFontsOutline(fonts) {
+  return fonts.reduce(
+    (acc, font) => ({
+      ...acc,
+      [font.slug]: (font?.fontFace || []).reduce(
+        (faces, face) => ({
+          ...faces,
+          [`${face.fontStyle}-${face.fontWeight}`]: true
+        }),
+        {}
+      )
+    }),
+    {}
+  );
+}
+function isFontFontFaceInOutline(slug, face, outline) {
+  if (!face) {
+    return !!outline[slug];
+  }
+  return !!outline[slug]?.[`${face.fontStyle}-${face.fontWeight}`];
+}
+export {
+  getFontsOutline,
+  isFontFontFaceInOutline
+};
+//# sourceMappingURL=fonts-outline.js.map

package/build-module/font-library-modal/utils/fonts-outline.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/font-library-modal/utils/fonts-outline.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { FontFace, FontFamily } from '../types';\n\nexport function getFontsOutline(\n\tfonts: FontFamily[]\n): Record< string, Record< string, boolean > > {\n\treturn fonts.reduce(\n\t\t( acc, font ) => ( {\n\t\t\t...acc,\n\t\t\t[ font.slug ]: ( font?.fontFace || [] ).reduce(\n\t\t\t\t( faces, face ) => ( {\n\t\t\t\t\t...faces,\n\t\t\t\t\t[ `${ face.fontStyle }-${ face.fontWeight }` ]: true,\n\t\t\t\t} ),\n\t\t\t\t{}\n\t\t\t),\n\t\t} ),\n\t\t{}\n\t);\n}\n\nexport function isFontFontFaceInOutline(\n\tslug: string,\n\tface: FontFace | null,\n\toutline: Record< string, Record< string, boolean > >\n): boolean {\n\tif ( ! face ) {\n\t\treturn !! outline[ slug ];\n\t}\n\treturn !! outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ];\n}\n"],
+  "mappings": "AAKO,SAAS,gBACf,OAC8C;AAC9C,SAAO,MAAM;AAAA,IACZ,CAAE,KAAK,UAAY;AAAA,MAClB,GAAG;AAAA,MACH,CAAE,KAAK,IAAK,IAAK,MAAM,YAAY,CAAC,GAAI;AAAA,QACvC,CAAE,OAAO,UAAY;AAAA,UACpB,GAAG;AAAA,UACH,CAAE,GAAI,KAAK,SAAU,IAAK,KAAK,UAAW,EAAG,GAAG;AAAA,QACjD;AAAA,QACA,CAAC;AAAA,MACF;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AACD;AAEO,SAAS,wBACf,MACA,MACA,SACU;AACV,MAAK,CAAE,MAAO;AACb,WAAO,CAAC,CAAE,QAAS,IAAK;AAAA,EACzB;AACA,SAAO,CAAC,CAAE,QAAS,IAAK,IAAK,GAAI,KAAK,SAAU,IAAK,KAAK,UAAW,EAAG;AACzE;",
+  "names": []
+}