@wordpress/global-styles-ui 1.1.0

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

@@ -0,0 +1,382 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useEffect } from "@wordpress/element";
+import { useSelect, useDispatch } from "@wordpress/data";
+import {
+  useEntityRecord,
+  useEntityRecords,
+  store as coreStore
+} from "@wordpress/core-data";
+import { __ } from "@wordpress/i18n";
+import {
+  fetchGetFontFamilyBySlug,
+  fetchInstallFontFamily,
+  fetchUninstallFontFamily,
+  fetchFontCollections,
+  fetchFontCollection
+} from "./resolvers";
+import {
+  setUIValuesNeeded,
+  mergeFontFamilies,
+  loadFontFaceInBrowser,
+  unloadFontFaceInBrowser,
+  getDisplaySrcFromFontFace,
+  makeFontFacesFormData,
+  makeFontFamilyFormData,
+  batchInstallFontFaces,
+  checkFontFaceInstalled
+} from "./utils";
+import { setImmutably } from "./utils/set-immutably";
+import { toggleFont } from "./utils/toggleFont";
+import { useSetting } from "../hooks";
+const FontLibraryContext = createContext(
+  {}
+);
+FontLibraryContext.displayName = "FontLibraryContext";
+function FontLibraryProvider({ children }) {
+  const { saveEntityRecord } = useDispatch(coreStore);
+  const { globalStylesId } = useSelect((select) => {
+    const { __experimentalGetCurrentGlobalStylesId } = select(coreStore);
+    return { globalStylesId: __experimentalGetCurrentGlobalStylesId() };
+  }, []);
+  const globalStyles = useEntityRecord(
+    "root",
+    "globalStyles",
+    globalStylesId
+  );
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const refreshLibrary = () => {
+    setRefreshKey(Date.now());
+  };
+  const { records: libraryPosts = [], isResolving: isResolvingLibrary } = useEntityRecords(
+    "postType",
+    "wp_font_family",
+    {
+      refreshKey,
+      _embed: true
+    }
+  );
+  const libraryFonts = (libraryPosts || []).map((fontFamilyPost) => {
+    return {
+      id: fontFamilyPost.id,
+      ...fontFamilyPost.font_family_settings || {},
+      fontFace: fontFamilyPost?._embedded?.font_faces?.map(
+        (face) => face.font_face_settings
+      ) || []
+    };
+  }) || [];
+  const [fontFamilies, setFontFamilies] = useSetting("typography.fontFamilies");
+  const saveFontFamilies = async (fonts) => {
+    const updatedGlobalStyles = globalStyles.record;
+    setImmutably(
+      updatedGlobalStyles ?? {},
+      ["settings", "typography", "fontFamilies"],
+      fonts
+    );
+    await saveEntityRecord("root", "globalStyles", updatedGlobalStyles);
+  };
+  const [modalTabOpen, setModalTabOpen] = useState("");
+  const [libraryFontSelected, setLibraryFontSelected] = useState(void 0);
+  const themeFonts = fontFamilies?.theme ? fontFamilies.theme.map((f) => setUIValuesNeeded(f, { source: "theme" })).sort((a, b) => a.name.localeCompare(b.name)) : [];
+  const customFonts = fontFamilies?.custom ? fontFamilies.custom.map((f) => setUIValuesNeeded(f, { source: "custom" })).sort((a, b) => a.name.localeCompare(b.name)) : [];
+  const baseCustomFonts = libraryFonts ? libraryFonts.map((f) => setUIValuesNeeded(f, { source: "custom" })).sort((a, b) => a.name.localeCompare(b.name)) : [];
+  useEffect(() => {
+    if (!modalTabOpen) {
+      setLibraryFontSelected(void 0);
+    }
+  }, [modalTabOpen]);
+  const handleSetLibraryFontSelected = (font) => {
+    if (!font) {
+      setLibraryFontSelected(void 0);
+      return;
+    }
+    const fonts = font.source === "theme" ? themeFonts : baseCustomFonts;
+    const fontSelected = fonts.find((f) => f.slug === font.slug);
+    setLibraryFontSelected({
+      ...fontSelected || font,
+      source: font.source
+    });
+  };
+  const [loadedFontUrls] = useState(/* @__PURE__ */ new Set());
+  const getAvailableFontsOutline = (availableFontFamilies) => {
+    const outline = availableFontFamilies.reduce(
+      (acc, font) => {
+        const availableFontFaces = font?.fontFace && font.fontFace?.length > 0 ? font?.fontFace.map(
+          (face) => `${face.fontStyle ?? ""}${face.fontWeight ?? ""}`
+        ) : ["normal400"];
+        acc[font.slug] = availableFontFaces;
+        return acc;
+      },
+      {}
+    );
+    return outline;
+  };
+  const getActivatedFontsOutline = (source) => {
+    switch (source) {
+      case "theme":
+        return getAvailableFontsOutline(themeFonts);
+      case "custom":
+      default:
+        return getAvailableFontsOutline(customFonts);
+    }
+  };
+  const isFontActivated = (slug, style, weight, source) => {
+    if (!style && !weight) {
+      return !!getActivatedFontsOutline(source)[slug];
+    }
+    return !!getActivatedFontsOutline(source)[slug]?.includes(
+      (style ?? "") + (weight ?? "")
+    );
+  };
+  const getFontFacesActivated = (slug, source) => {
+    return getActivatedFontsOutline(source)[slug] || [];
+  };
+  async function installFonts(fontFamiliesToInstall) {
+    setIsInstalling(true);
+    try {
+      const fontFamiliesToActivate = [];
+      let installationErrors = [];
+      for (const fontFamilyToInstall of fontFamiliesToInstall) {
+        let isANewFontFamily = false;
+        let installedFontFamily = await fetchGetFontFamilyBySlug(
+          fontFamilyToInstall.slug
+        );
+        if (!installedFontFamily) {
+          isANewFontFamily = true;
+          installedFontFamily = await fetchInstallFontFamily(
+            makeFontFamilyFormData(fontFamilyToInstall)
+          );
+        }
+        const alreadyInstalledFontFaces = installedFontFamily.fontFace && fontFamilyToInstall.fontFace ? installedFontFamily.fontFace.filter(
+          (fontFaceToInstall) => fontFaceToInstall && fontFamilyToInstall.fontFace && checkFontFaceInstalled(
+            fontFaceToInstall,
+            fontFamilyToInstall.fontFace
+          )
+        ) : [];
+        if (installedFontFamily.fontFace && fontFamilyToInstall.fontFace) {
+          fontFamilyToInstall.fontFace = fontFamilyToInstall.fontFace.filter(
+            (fontFaceToInstall) => !checkFontFaceInstalled(
+              fontFaceToInstall,
+              installedFontFamily.fontFace
+            )
+          );
+        }
+        let successfullyInstalledFontFaces = [];
+        let unsuccessfullyInstalledFontFaces = [];
+        if (fontFamilyToInstall?.fontFace?.length ?? 0 > 0) {
+          const response = await batchInstallFontFaces(
+            installedFontFamily.id,
+            makeFontFacesFormData(
+              fontFamilyToInstall
+            )
+          );
+          successfullyInstalledFontFaces = response?.successes;
+          unsuccessfullyInstalledFontFaces = response?.errors;
+        }
+        if (successfullyInstalledFontFaces?.length > 0 || alreadyInstalledFontFaces?.length > 0) {
+          installedFontFamily.fontFace = [
+            ...successfullyInstalledFontFaces
+          ];
+          fontFamiliesToActivate.push(installedFontFamily);
+        }
+        if (installedFontFamily && !fontFamilyToInstall?.fontFace?.length) {
+          fontFamiliesToActivate.push(installedFontFamily);
+        }
+        if (isANewFontFamily && (fontFamilyToInstall?.fontFace?.length ?? 0) > 0 && successfullyInstalledFontFaces?.length === 0) {
+          await fetchUninstallFontFamily(installedFontFamily.id);
+        }
+        installationErrors = installationErrors.concat(
+          unsuccessfullyInstalledFontFaces
+        );
+      }
+      const installationErrorMessages = installationErrors.reduce(
+        (unique, item) => unique.includes(item.message) ? unique : [...unique, item.message],
+        []
+      );
+      if (fontFamiliesToActivate.length > 0) {
+        const activeFonts = activateCustomFontFamilies(
+          fontFamiliesToActivate
+        );
+        await saveFontFamilies(activeFonts);
+        refreshLibrary();
+      }
+      if (installationErrorMessages.length > 0) {
+        const installError = new Error(__("There was an error installing fonts."));
+        installError.installationErrors = installationErrorMessages;
+        throw installError;
+      }
+    } finally {
+      setIsInstalling(false);
+    }
+  }
+  async function uninstallFontFamily(fontFamilyToUninstall) {
+    if (!fontFamilyToUninstall?.id) {
+      throw new Error(__("Font family to uninstall is not defined."));
+    }
+    try {
+      const uninstalledFontFamily = await fetchUninstallFontFamily(
+        fontFamilyToUninstall.id
+      );
+      if (uninstalledFontFamily.deleted) {
+        const activeFonts = deactivateFontFamily(
+          fontFamilyToUninstall
+        );
+        await saveFontFamilies(activeFonts);
+      }
+      refreshLibrary();
+      return uninstalledFontFamily;
+    } catch (error) {
+      console.error(
+        `There was an error uninstalling the font family:`,
+        error
+      );
+      throw error;
+    }
+  }
+  const deactivateFontFamily = (font) => {
+    const initialCustomFonts = fontFamilies?.[font.source ?? ""] ?? [];
+    const newCustomFonts = initialCustomFonts.filter(
+      (f) => f.slug !== font.slug
+    );
+    const activeFonts = {
+      ...fontFamilies,
+      [font.source ?? ""]: newCustomFonts
+    };
+    setFontFamilies(activeFonts);
+    if (font.fontFace) {
+      font.fontFace.forEach((face) => {
+        unloadFontFaceInBrowser(face, "all");
+      });
+    }
+    return activeFonts;
+  };
+  const activateCustomFontFamilies = (fontsToAdd) => {
+    const fontsToActivate = cleanFontsForSave(fontsToAdd);
+    const activeFonts = {
+      ...fontFamilies,
+      // Merge the existing custom fonts with the new fonts.
+      custom: mergeFontFamilies(fontFamilies?.custom, fontsToActivate)
+    };
+    setFontFamilies(activeFonts);
+    loadFontsInBrowser(fontsToActivate);
+    return activeFonts;
+  };
+  const cleanFontsForSave = (fonts) => {
+    return fonts.map(({ id: _familyDbId, fontFace, ...font }) => ({
+      ...font,
+      ...fontFace && fontFace.length > 0 ? {
+        fontFace: fontFace.map(
+          ({ id: _faceDbId, ...face }) => face
+        )
+      } : {}
+    }));
+  };
+  const loadFontsInBrowser = (fonts) => {
+    fonts.forEach((font) => {
+      if (font.fontFace) {
+        font.fontFace.forEach((face) => {
+          const displaySrc = getDisplaySrcFromFontFace(
+            face?.src ?? ""
+          );
+          if (displaySrc) {
+            loadFontFaceInBrowser(face, displaySrc, "all");
+          }
+        });
+      }
+    });
+  };
+  const toggleActivateFont = (font, face) => {
+    const initialFonts = fontFamilies?.[font.source ?? ""] ?? [];
+    const newFonts = toggleFont(font, face, initialFonts);
+    setFontFamilies({
+      ...fontFamilies,
+      [font.source ?? ""]: newFonts
+    });
+    const isFaceActivated = isFontActivated(
+      font.slug,
+      face?.fontStyle ?? "",
+      face?.fontWeight ?? "",
+      font.source ?? "custom"
+    );
+    if (face && isFaceActivated) {
+      unloadFontFaceInBrowser(face, "all");
+    } else {
+      const displaySrc = getDisplaySrcFromFontFace(face?.src ?? "");
+      if (face && displaySrc) {
+        loadFontFaceInBrowser(face, displaySrc, "all");
+      }
+    }
+  };
+  const loadFontFaceAsset = async (fontFace) => {
+    if (!fontFace.src) {
+      return;
+    }
+    const src = getDisplaySrcFromFontFace(fontFace.src);
+    if (!src || loadedFontUrls.has(src)) {
+      return;
+    }
+    loadFontFaceInBrowser(fontFace, src, "document");
+    loadedFontUrls.add(src);
+  };
+  const [collections, setFontCollections] = useState(
+    []
+  );
+  const getFontCollections = async () => {
+    const response = await fetchFontCollections();
+    setFontCollections(response);
+  };
+  const getFontCollection = async (slug) => {
+    try {
+      const hasData = !!collections.find(
+        (collection) => collection.slug === slug
+      )?.font_families;
+      if (hasData) {
+        return;
+      }
+      const response = await fetchFontCollection(slug);
+      const updatedCollections = collections.map(
+        (collection) => collection.slug === slug ? { ...collection, ...response } : collection
+      );
+      setFontCollections(updatedCollections);
+    } catch (e) {
+      console.error(e);
+      throw e;
+    }
+  };
+  useEffect(() => {
+    getFontCollections();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    FontLibraryContext.Provider,
+    {
+      value: {
+        libraryFontSelected,
+        handleSetLibraryFontSelected,
+        fontFamilies: fontFamilies ?? {},
+        baseCustomFonts,
+        isFontActivated,
+        getFontFacesActivated,
+        loadFontFaceAsset,
+        installFonts,
+        uninstallFontFamily,
+        toggleActivateFont,
+        getAvailableFontsOutline,
+        modalTabOpen,
+        setModalTabOpen,
+        refreshLibrary,
+        saveFontFamilies,
+        isResolvingLibrary,
+        isInstalling,
+        collections,
+        getFontCollection
+      },
+      children
+    }
+  );
+}
+var context_default = FontLibraryProvider;
+export {
+  FontLibraryContext,
+  context_default as default
+};
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/context.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext, useState, useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseEntityRecord,\n\tuseEntityRecords,\n\tstore as coreStore,\n} from '@wordpress/core-data';\nimport { __ } from '@wordpress/i18n';\nimport type {\n\tFontFamilyPreset,\n\tGlobalStylesConfig,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport {\n\tfetchGetFontFamilyBySlug,\n\tfetchInstallFontFamily,\n\tfetchUninstallFontFamily,\n\tfetchFontCollections,\n\tfetchFontCollection,\n} from './resolvers';\nimport {\n\tsetUIValuesNeeded,\n\tmergeFontFamilies,\n\tloadFontFaceInBrowser,\n\tunloadFontFaceInBrowser,\n\tgetDisplaySrcFromFontFace,\n\tmakeFontFacesFormData,\n\tmakeFontFamilyFormData,\n\tbatchInstallFontFaces,\n\tcheckFontFaceInstalled,\n} from './utils';\nimport { setImmutably } from './utils/set-immutably';\nimport { toggleFont } from './utils/toggleFont';\nimport type {\n\tCollectionFontFamily,\n\tFontCollection,\n\tFontFace,\n\tFontFamily,\n\tFontLibraryState,\n} from './types';\nimport { useSetting } from '../hooks';\n\nexport const FontLibraryContext = createContext< FontLibraryState >(\n\t{} as FontLibraryState\n);\nFontLibraryContext.displayName = 'FontLibraryContext';\n\nfunction FontLibraryProvider( { children }: { children: React.ReactNode } ) {\n\tconst { saveEntityRecord } = useDispatch( coreStore );\n\tconst { globalStylesId } = useSelect( ( select ) => {\n\t\tconst { __experimentalGetCurrentGlobalStylesId } = select( coreStore );\n\t\treturn { globalStylesId: __experimentalGetCurrentGlobalStylesId() };\n\t}, [] );\n\n\tconst globalStyles = useEntityRecord< GlobalStylesConfig >(\n\t\t'root',\n\t\t'globalStyles',\n\t\tglobalStylesId\n\t);\n\n\tconst [ isInstalling, setIsInstalling ] = useState( false );\n\tconst [ refreshKey, setRefreshKey ] = useState( 0 );\n\n\tconst refreshLibrary = () => {\n\t\tsetRefreshKey( Date.now() );\n\t};\n\n\tconst { records: libraryPosts = [], isResolving: isResolvingLibrary } =\n\t\tuseEntityRecords< CollectionFontFamily >(\n\t\t\t'postType',\n\t\t\t'wp_font_family',\n\t\t\t{\n\t\t\t\trefreshKey,\n\t\t\t\t_embed: true,\n\t\t\t}\n\t\t);\n\n\tconst libraryFonts: FontFamilyPreset[] =\n\t\t( libraryPosts || [] ).map( ( fontFamilyPost ) => {\n\t\t\treturn {\n\t\t\t\tid: fontFamilyPost.id,\n\t\t\t\t...( fontFamilyPost.font_family_settings || {} ),\n\t\t\t\tfontFace:\n\t\t\t\t\tfontFamilyPost?._embedded?.font_faces?.map(\n\t\t\t\t\t\t( face ) => face.font_face_settings\n\t\t\t\t\t) || [],\n\t\t\t};\n\t\t} ) || [];\n\n\t// Global Styles (settings) font families\n\tconst [ fontFamilies, setFontFamilies ] = useSetting<\n\t\tRecord< string, FontFamilyPreset[] > | undefined\n\t>( 'typography.fontFamilies' );\n\n\t/*\n\t * Save the font families to the database.\n\n\t * This function is called when the user activates or deactivates a font family.\n\t * It only updates the global styles post content in the database for new font families.\n\t * This avoids saving other styles/settings changed by the user using other parts of the editor.\n\t *\n\t * It uses the font families from the param to avoid using the font families from an outdated state.\n\t *\n\t * @param {Array} fonts - The font families that will be saved to the database.\n\t */\n\tconst saveFontFamilies = async (\n\t\tfonts:\n\t\t\t| FontFamilyPreset[]\n\t\t\t| Record< string, FontFamilyPreset[] >\n\t\t\t| undefined\n\t) => {\n\t\t// Gets the global styles database post content.\n\t\tconst updatedGlobalStyles = globalStyles.record;\n\n\t\t// Updates the database version of global styles with the edited font families in the client.\n\t\tsetImmutably(\n\t\t\tupdatedGlobalStyles ?? {},\n\t\t\t[ 'settings', 'typography', 'fontFamilies' ],\n\t\t\tfonts\n\t\t);\n\n\t\t// Saves a new version of the global styles in the database.\n\t\tawait saveEntityRecord( 'root', 'globalStyles', updatedGlobalStyles );\n\t};\n\n\t// Library Fonts\n\tconst [ modalTabOpen, setModalTabOpen ] = useState( '' );\n\tconst [ libraryFontSelected, setLibraryFontSelected ] = useState<\n\t\tFontFamily | undefined\n\t>( undefined );\n\n\t// Themes Fonts are the fonts defined in the global styles (database persisted theme.json data).\n\tconst themeFonts = fontFamilies?.theme\n\t\t? fontFamilies.theme\n\t\t\t\t.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )\n\t\t\t\t.sort( ( a, b ) => a.name.localeCompare( b.name ) )\n\t\t: [];\n\n\tconst customFonts = fontFamilies?.custom\n\t\t? fontFamilies.custom\n\t\t\t\t.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )\n\t\t\t\t.sort( ( a, b ) => a.name.localeCompare( b.name ) )\n\t\t: [];\n\n\tconst baseCustomFonts = libraryFonts\n\t\t? libraryFonts\n\t\t\t\t.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )\n\t\t\t\t.sort( ( a, b ) => a.name.localeCompare( b.name ) )\n\t\t: [];\n\n\tuseEffect( () => {\n\t\tif ( ! modalTabOpen ) {\n\t\t\tsetLibraryFontSelected( undefined );\n\t\t}\n\t}, [ modalTabOpen ] );\n\n\tconst handleSetLibraryFontSelected = ( font?: FontFamily ) => {\n\t\t// If font is null, reset the selected font\n\t\tif ( ! font ) {\n\t\t\tsetLibraryFontSelected( undefined );\n\t\t\treturn;\n\t\t}\n\n\t\tconst fonts = font.source === 'theme' ? themeFonts : baseCustomFonts;\n\n\t\t// Tries to find the font in the installed fonts\n\t\tconst fontSelected = fonts.find( ( f ) => f.slug === font.slug );\n\t\t// If the font is not found (it is only defined in custom styles), use the font from custom styles\n\t\tsetLibraryFontSelected( {\n\t\t\t...( fontSelected || font ),\n\t\t\tsource: font.source,\n\t\t} );\n\t};\n\n\t// Demo\n\tconst [ loadedFontUrls ] = useState( new Set() );\n\n\tconst getAvailableFontsOutline = (\n\t\tavailableFontFamilies: FontFamily[]\n\t) => {\n\t\tconst outline: Record< string, string[] > =\n\t\t\tavailableFontFamilies.reduce(\n\t\t\t\t( acc: Record< string, string[] >, font ) => {\n\t\t\t\t\tconst availableFontFaces =\n\t\t\t\t\t\tfont?.fontFace && font.fontFace?.length > 0\n\t\t\t\t\t\t\t? font?.fontFace.map(\n\t\t\t\t\t\t\t\t\t( face ) =>\n\t\t\t\t\t\t\t\t\t\t`${ face.fontStyle ?? '' }${\n\t\t\t\t\t\t\t\t\t\t\tface.fontWeight ?? ''\n\t\t\t\t\t\t\t\t\t\t}`\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: [ 'normal400' ]; // If the font doesn't have fontFace, we assume it is a system font and we add the defaults: normal 400\n\n\t\t\t\t\tacc[ font.slug ] = availableFontFaces;\n\t\t\t\t\treturn acc;\n\t\t\t\t},\n\t\t\t\t{}\n\t\t\t);\n\t\treturn outline;\n\t};\n\n\tconst getActivatedFontsOutline = ( source?: string ) => {\n\t\tswitch ( source ) {\n\t\t\tcase 'theme':\n\t\t\t\treturn getAvailableFontsOutline( themeFonts );\n\t\t\tcase 'custom':\n\t\t\tdefault:\n\t\t\t\treturn getAvailableFontsOutline( customFonts );\n\t\t}\n\t};\n\n\tconst isFontActivated = (\n\t\tslug: string,\n\t\tstyle?: string,\n\t\tweight?: string | number,\n\t\tsource?: string\n\t) => {\n\t\tif ( ! style && ! weight ) {\n\t\t\treturn !! getActivatedFontsOutline( source )[ slug ];\n\t\t}\n\t\treturn !! getActivatedFontsOutline( source )[ slug ]?.includes(\n\t\t\t( style ?? '' ) + ( weight ?? '' )\n\t\t);\n\t};\n\n\tconst getFontFacesActivated = ( slug: string, source?: string ) => {\n\t\treturn getActivatedFontsOutline( source )[ slug ] || [];\n\t};\n\n\tasync function installFonts( fontFamiliesToInstall: FontFamily[] ) {\n\t\tsetIsInstalling( true );\n\t\ttry {\n\t\t\tconst fontFamiliesToActivate = [];\n\t\t\tlet installationErrors: Array< {\n\t\t\t\tmessage: string;\n\t\t\t} > = [];\n\n\t\t\tfor ( const fontFamilyToInstall of fontFamiliesToInstall ) {\n\t\t\t\tlet isANewFontFamily = false;\n\n\t\t\t\t// Get the font family if it already exists.\n\t\t\t\tlet installedFontFamily = await fetchGetFontFamilyBySlug(\n\t\t\t\t\tfontFamilyToInstall.slug\n\t\t\t\t);\n\n\t\t\t\t// Otherwise create it.\n\t\t\t\tif ( ! installedFontFamily ) {\n\t\t\t\t\tisANewFontFamily = true;\n\t\t\t\t\t// Prepare font family form data to install.\n\t\t\t\t\tinstalledFontFamily = await fetchInstallFontFamily(\n\t\t\t\t\t\tmakeFontFamilyFormData( fontFamilyToInstall )\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Collect font faces that have already been installed (to be activated later)\n\t\t\t\tconst alreadyInstalledFontFaces =\n\t\t\t\t\tinstalledFontFamily.fontFace && fontFamilyToInstall.fontFace\n\t\t\t\t\t\t? installedFontFamily.fontFace.filter(\n\t\t\t\t\t\t\t\t( fontFaceToInstall: FontFace ) =>\n\t\t\t\t\t\t\t\t\tfontFaceToInstall &&\n\t\t\t\t\t\t\t\t\tfontFamilyToInstall.fontFace &&\n\t\t\t\t\t\t\t\t\tcheckFontFaceInstalled(\n\t\t\t\t\t\t\t\t\t\tfontFaceToInstall,\n\t\t\t\t\t\t\t\t\t\tfontFamilyToInstall.fontFace\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: [];\n\n\t\t\t\t// Filter out Font Faces that have already been installed (so that they are not re-installed)\n\t\t\t\tif (\n\t\t\t\t\tinstalledFontFamily.fontFace &&\n\t\t\t\t\tfontFamilyToInstall.fontFace\n\t\t\t\t) {\n\t\t\t\t\tfontFamilyToInstall.fontFace =\n\t\t\t\t\t\tfontFamilyToInstall.fontFace.filter(\n\t\t\t\t\t\t\t( fontFaceToInstall ) =>\n\t\t\t\t\t\t\t\t! checkFontFaceInstalled(\n\t\t\t\t\t\t\t\t\tfontFaceToInstall,\n\t\t\t\t\t\t\t\t\tinstalledFontFamily.fontFace\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Install the fonts (upload the font files to the server and create the post in the database).\n\t\t\t\tlet successfullyInstalledFontFaces: FontFace[] = [];\n\t\t\t\tlet unsuccessfullyInstalledFontFaces: {\n\t\t\t\t\tmessage: string;\n\t\t\t\t}[] = [];\n\t\t\t\tif ( fontFamilyToInstall?.fontFace?.length ?? 0 > 0 ) {\n\t\t\t\t\tconst response = await batchInstallFontFaces(\n\t\t\t\t\t\tinstalledFontFamily.id,\n\t\t\t\t\t\tmakeFontFacesFormData(\n\t\t\t\t\t\t\tfontFamilyToInstall as FontFamily\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t\tsuccessfullyInstalledFontFaces = response?.successes;\n\t\t\t\t\tunsuccessfullyInstalledFontFaces = response?.errors;\n\t\t\t\t}\n\n\t\t\t\t// Use the successfully installed font faces\n\t\t\t\t// As well as any font faces that were already installed (those will be activated)\n\t\t\t\tif (\n\t\t\t\t\tsuccessfullyInstalledFontFaces?.length > 0 ||\n\t\t\t\t\talreadyInstalledFontFaces?.length > 0\n\t\t\t\t) {\n\t\t\t\t\t// Use font data from REST API not from client to ensure\n\t\t\t\t\t// correct font information is used.\n\t\t\t\t\tinstalledFontFamily.fontFace = [\n\t\t\t\t\t\t...successfullyInstalledFontFaces,\n\t\t\t\t\t];\n\n\t\t\t\t\tfontFamiliesToActivate.push( installedFontFamily );\n\t\t\t\t}\n\n\t\t\t\t// If it's a system font but was installed successfully, activate it.\n\t\t\t\tif (\n\t\t\t\t\tinstalledFontFamily &&\n\t\t\t\t\t! fontFamilyToInstall?.fontFace?.length\n\t\t\t\t) {\n\t\t\t\t\tfontFamiliesToActivate.push( installedFontFamily );\n\t\t\t\t}\n\n\t\t\t\t// If the font family is new and is not a system font, delete it to avoid having font families without font faces.\n\t\t\t\tif (\n\t\t\t\t\tisANewFontFamily &&\n\t\t\t\t\t( fontFamilyToInstall?.fontFace?.length ?? 0 ) > 0 &&\n\t\t\t\t\tsuccessfullyInstalledFontFaces?.length === 0\n\t\t\t\t) {\n\t\t\t\t\tawait fetchUninstallFontFamily( installedFontFamily.id );\n\t\t\t\t}\n\n\t\t\t\tinstallationErrors = installationErrors.concat(\n\t\t\t\t\tunsuccessfullyInstalledFontFaces\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst installationErrorMessages: string[] =\n\t\t\t\tinstallationErrors.reduce(\n\t\t\t\t\t( unique: string[], item ) =>\n\t\t\t\t\t\tunique.includes( item.message )\n\t\t\t\t\t\t\t? unique\n\t\t\t\t\t\t\t: [ ...unique, item.message ],\n\t\t\t\t\t[]\n\t\t\t\t);\n\n\t\t\tif ( fontFamiliesToActivate.length > 0 ) {\n\t\t\t\t// Activate the font family (add the font family to the global styles).\n\t\t\t\tconst activeFonts = activateCustomFontFamilies(\n\t\t\t\t\tfontFamiliesToActivate\n\t\t\t\t);\n\t\t\t\t// Save the global styles to the database.\n\t\t\t\tawait saveFontFamilies( activeFonts );\n\n\t\t\t\trefreshLibrary();\n\t\t\t}\n\n\t\t\tif ( installationErrorMessages.length > 0 ) {\n\t\t\t\tconst installError: Error & {\n\t\t\t\t\tinstallationErrors?: string[];\n\t\t\t\t} = new Error( __( 'There was an error installing fonts.' ) );\n\n\t\t\t\tinstallError.installationErrors = installationErrorMessages;\n\n\t\t\t\tthrow installError;\n\t\t\t}\n\t\t} finally {\n\t\t\tsetIsInstalling( false );\n\t\t}\n\t}\n\n\tasync function uninstallFontFamily( fontFamilyToUninstall: FontFamily ) {\n\t\tif ( ! fontFamilyToUninstall?.id ) {\n\t\t\tthrow new Error( __( 'Font family to uninstall is not defined.' ) );\n\t\t}\n\t\ttry {\n\t\t\t// Uninstall the font family.\n\t\t\t// (Removes the font files from the server and the posts from the database).\n\t\t\tconst uninstalledFontFamily = await fetchUninstallFontFamily(\n\t\t\t\tfontFamilyToUninstall.id\n\t\t\t);\n\n\t\t\t// Deactivate the font family if delete request is successful\n\t\t\t// (Removes the font family from the global styles).\n\t\t\tif ( uninstalledFontFamily.deleted ) {\n\t\t\t\tconst activeFonts = deactivateFontFamily(\n\t\t\t\t\tfontFamilyToUninstall\n\t\t\t\t);\n\t\t\t\t// Save the global styles to the database.\n\t\t\t\tawait saveFontFamilies( activeFonts );\n\t\t\t}\n\n\t\t\t// Refresh the library (the library font families from database).\n\t\t\trefreshLibrary();\n\n\t\t\treturn uninstalledFontFamily;\n\t\t} catch ( error ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t`There was an error uninstalling the font family:`,\n\t\t\t\terror\n\t\t\t);\n\t\t\tthrow error;\n\t\t}\n\t}\n\n\tconst deactivateFontFamily = ( font: FontFamily ) => {\n\t\t// If the user doesn't have custom fonts defined, include as custom fonts all the theme fonts\n\t\t// We want to save as active all the theme fonts at the beginning\n\t\tconst initialCustomFonts = fontFamilies?.[ font.source ?? '' ] ?? [];\n\t\tconst newCustomFonts = initialCustomFonts.filter(\n\t\t\t( f ) => f.slug !== font.slug\n\t\t);\n\t\tconst activeFonts = {\n\t\t\t...fontFamilies,\n\t\t\t[ font.source ?? '' ]: newCustomFonts,\n\t\t};\n\t\tsetFontFamilies( activeFonts );\n\n\t\tif ( font.fontFace ) {\n\t\t\tfont.fontFace.forEach( ( face ) => {\n\t\t\t\tunloadFontFaceInBrowser( face, 'all' );\n\t\t\t} );\n\t\t}\n\t\treturn activeFonts;\n\t};\n\n\tconst activateCustomFontFamilies = ( fontsToAdd: FontFamily[] ) => {\n\t\tconst fontsToActivate = cleanFontsForSave( fontsToAdd );\n\n\t\tconst activeFonts = {\n\t\t\t...fontFamilies,\n\t\t\t// Merge the existing custom fonts with the new fonts.\n\t\t\tcustom: mergeFontFamilies( fontFamilies?.custom, fontsToActivate ),\n\t\t};\n\n\t\t// Activate the fonts by set the new custom fonts array.\n\t\tsetFontFamilies( activeFonts );\n\n\t\tloadFontsInBrowser( fontsToActivate );\n\n\t\treturn activeFonts;\n\t};\n\n\t// Removes the id from the families and faces to avoid saving that to global styles post content.\n\tconst cleanFontsForSave = ( fonts: FontFamily[] ) => {\n\t\treturn fonts.map( ( { id: _familyDbId, fontFace, ...font } ) => ( {\n\t\t\t...font,\n\t\t\t...( fontFace && fontFace.length > 0\n\t\t\t\t? {\n\t\t\t\t\t\tfontFace: fontFace.map(\n\t\t\t\t\t\t\t( { id: _faceDbId, ...face } ) => face\n\t\t\t\t\t\t),\n\t\t\t\t  }\n\t\t\t\t: {} ),\n\t\t} ) );\n\t};\n\n\tconst loadFontsInBrowser = ( fonts: FontFamily[] ) => {\n\t\t// Add custom fonts to the browser.\n\t\tfonts.forEach( ( font ) => {\n\t\t\tif ( font.fontFace ) {\n\t\t\t\tfont.fontFace.forEach( ( face ) => {\n\t\t\t\t\tconst displaySrc = getDisplaySrcFromFontFace(\n\t\t\t\t\t\tface?.src ?? ''\n\t\t\t\t\t);\n\t\t\t\t\tif ( displaySrc ) {\n\t\t\t\t\t\t// Load font faces just in the iframe because they already are in the document.\n\t\t\t\t\t\tloadFontFaceInBrowser( face, displaySrc, 'all' );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t} );\n\t};\n\n\tconst toggleActivateFont = ( font: FontFamily, face?: FontFace ) => {\n\t\t// If the user doesn't have custom fonts defined, include as custom fonts all the theme fonts\n\t\t// We want to save as active all the theme fonts at the beginning\n\t\tconst initialFonts = fontFamilies?.[ font.source ?? '' ] ?? [];\n\t\t// Toggles the received font family or font face\n\t\tconst newFonts = toggleFont( font, face, initialFonts );\n\t\t// Updates the font families activated in global settings:\n\t\tsetFontFamilies( {\n\t\t\t...fontFamilies,\n\t\t\t[ font.source ?? '' ]: newFonts,\n\t\t} );\n\n\t\tconst isFaceActivated = isFontActivated(\n\t\t\tfont.slug,\n\t\t\tface?.fontStyle ?? '',\n\t\t\tface?.fontWeight ?? '',\n\t\t\tfont.source ?? 'custom'\n\t\t);\n\n\t\tif ( face && isFaceActivated ) {\n\t\t\tunloadFontFaceInBrowser( face, 'all' );\n\t\t} else {\n\t\t\tconst displaySrc = getDisplaySrcFromFontFace( face?.src ?? '' );\n\t\t\t// If the font doesn't have a src, don't load it.\n\t\t\tif ( face && displaySrc ) {\n\t\t\t\tloadFontFaceInBrowser( face, displaySrc, 'all' );\n\t\t\t}\n\t\t}\n\t};\n\n\tconst loadFontFaceAsset = async ( fontFace: FontFace ) => {\n\t\t// If the font doesn't have a src, don't load it.\n\t\tif ( ! fontFace.src ) {\n\t\t\treturn;\n\t\t}\n\t\t// Get the src of the font.\n\t\tconst src = getDisplaySrcFromFontFace( fontFace.src );\n\t\t// If the font is already loaded, don't load it again.\n\t\tif ( ! src || loadedFontUrls.has( src ) ) {\n\t\t\treturn;\n\t\t}\n\t\t// Load the font in the browser.\n\t\tloadFontFaceInBrowser( fontFace, src, 'document' );\n\t\t// Add the font to the loaded fonts list.\n\t\tloadedFontUrls.add( src );\n\t};\n\n\t// Font Collections\n\tconst [ collections, setFontCollections ] = useState< FontCollection[] >(\n\t\t[]\n\t);\n\tconst getFontCollections = async () => {\n\t\tconst response = await fetchFontCollections();\n\t\tsetFontCollections( response );\n\t};\n\tconst getFontCollection = async ( slug: string ) => {\n\t\ttry {\n\t\t\tconst hasData = !! collections.find(\n\t\t\t\t( collection ) => collection.slug === slug\n\t\t\t)?.font_families;\n\t\t\tif ( hasData ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst response = await fetchFontCollection( slug );\n\t\t\tconst updatedCollections = collections.map( ( collection ) =>\n\t\t\t\tcollection.slug === slug\n\t\t\t\t\t? { ...collection, ...response }\n\t\t\t\t\t: collection\n\t\t\t);\n\t\t\tsetFontCollections( updatedCollections );\n\t\t} catch ( e ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error( e );\n\t\t\tthrow e;\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tgetFontCollections();\n\t}, [] );\n\n\treturn (\n\t\t<FontLibraryContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tlibraryFontSelected,\n\t\t\t\thandleSetLibraryFontSelected,\n\t\t\t\tfontFamilies: fontFamilies ?? {},\n\t\t\t\tbaseCustomFonts,\n\t\t\t\tisFontActivated,\n\t\t\t\tgetFontFacesActivated,\n\t\t\t\tloadFontFaceAsset,\n\t\t\t\tinstallFonts,\n\t\t\t\tuninstallFontFamily,\n\t\t\t\ttoggleActivateFont,\n\t\t\t\tgetAvailableFontsOutline,\n\t\t\t\tmodalTabOpen,\n\t\t\t\tsetModalTabOpen,\n\t\t\t\trefreshLibrary,\n\t\t\t\tsaveFontFamilies,\n\t\t\t\tisResolvingLibrary,\n\t\t\t\tisInstalling,\n\t\t\t\tcollections,\n\t\t\t\tgetFontCollection,\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</FontLibraryContext.Provider>\n\t);\n}\n\nexport default FontLibraryProvider;\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { _n, sprintf, isRTL } from "@wordpress/i18n";
+import {
+  useNavigator,
+  __experimentalText as Text,
+  Button,
+  Flex,
+  FlexItem
+} from "@wordpress/components";
+import { Icon, chevronLeft, chevronRight } from "@wordpress/icons";
+import FontDemo from "./font-demo";
+function FontCard({
+  font,
+  onClick,
+  variantsText,
+  navigatorPath
+}) {
+  const variantsCount = font.fontFace?.length || 1;
+  const style = {
+    cursor: !!onClick ? "pointer" : "default"
+  };
+  const navigator = useNavigator();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      __next40pxDefaultSize: true,
+      onClick: () => {
+        onClick();
+        if (navigatorPath) {
+          navigator.goTo(navigatorPath);
+        }
+      },
+      style,
+      className: "font-library-modal__font-card",
+      children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", wrap: false, children: [
+        /* @__PURE__ */ jsx(FontDemo, { font }),
+        /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", children: [
+          /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(Text, { className: "font-library-modal__font-card__count", children: variantsText || sprintf(
+            /* translators: %d: Number of font variants. */
+            _n(
+              "%d variant",
+              "%d variants",
+              variantsCount
+            ),
+            variantsCount
+          ) }) }),
+          /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(Icon, { icon: isRTL() ? chevronLeft : chevronRight }) })
+        ] })
+      ] })
+    }
+  );
+}
+var font_card_default = FontCard;
+export {
+  font_card_default as default
+};
+//# sourceMappingURL=font-card.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/font-card.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _n, sprintf, isRTL } from '@wordpress/i18n';\nimport {\n\tuseNavigator,\n\t__experimentalText as Text,\n\tButton,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport FontDemo from './font-demo';\nimport type { FontFamily } from './types';\n\nfunction FontCard( {\n\tfont,\n\tonClick,\n\tvariantsText,\n\tnavigatorPath,\n}: {\n\tfont: FontFamily;\n\tonClick: () => void;\n\tvariantsText?: string;\n\tnavigatorPath?: string;\n} ) {\n\tconst variantsCount = font.fontFace?.length || 1;\n\n\tconst style = {\n\t\tcursor: !! onClick ? 'pointer' : 'default',\n\t};\n\n\tconst navigator = useNavigator();\n\n\treturn (\n\t\t<Button\n\t\t\t__next40pxDefaultSize\n\t\t\tonClick={ () => {\n\t\t\t\tonClick();\n\t\t\t\tif ( navigatorPath ) {\n\t\t\t\t\tnavigator.goTo( navigatorPath );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tstyle={ style }\n\t\t\tclassName=\"font-library-modal__font-card\"\n\t\t>\n\t\t\t<Flex justify=\"space-between\" wrap={ false }>\n\t\t\t\t<FontDemo font={ font } />\n\t\t\t\t<Flex justify=\"flex-end\">\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Text className=\"font-library-modal__font-card__count\">\n\t\t\t\t\t\t\t{ variantsText ||\n\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %d: Number of font variants. */\n\t\t\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t\t\t'%d variant',\n\t\t\t\t\t\t\t\t\t\t'%d variants',\n\t\t\t\t\t\t\t\t\t\tvariantsCount\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tvariantsCount\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Icon icon={ isRTL() ? chevronLeft : chevronRight } />\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t</Flex>\n\t\t</Button>\n\t);\n}\n\nexport default FontCard;\n"],
+  "mappings": "AAmDI,cACA,YADA;AAhDJ,SAAS,IAAI,SAAS,aAAa;AACnC;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,MAAM,aAAa,oBAAoB;AAKhD,OAAO,cAAc;AAGrB,SAAS,SAAU;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAKI;AACH,QAAM,gBAAgB,KAAK,UAAU,UAAU;AAE/C,QAAM,QAAQ;AAAA,IACb,QAAQ,CAAC,CAAE,UAAU,YAAY;AAAA,EAClC;AAEA,QAAM,YAAY,aAAa;AAE/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,SAAU,MAAM;AACf,gBAAQ;AACR,YAAK,eAAgB;AACpB,oBAAU,KAAM,aAAc;AAAA,QAC/B;AAAA,MACD;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MAEV,+BAAC,QAAK,SAAQ,iBAAgB,MAAO,OACpC;AAAA,4BAAC,YAAS,MAAc;AAAA,QACxB,qBAAC,QAAK,SAAQ,YACb;AAAA,8BAAC,YACA,8BAAC,QAAK,WAAU,wCACb,0BACD;AAAA;AAAA,YAEC;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,YACD;AAAA,YACA;AAAA,UACD,GACF,GACD;AAAA,UACA,oBAAC,YACA,8BAAC,QAAK,MAAO,MAAM,IAAI,cAAc,cAAe,GACrD;AAAA,WACD;AAAA,SACD;AAAA;AAAA,EACD;AAEF;AAEA,IAAO,oBAAQ;",
+  "names": []
+}