@wordpress/edit-site 5.18.0 → 5.19.0

package/build-module/components/global-styles/font-families.js

@@ -0,0 +1,58 @@
+import { createElement, Fragment } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalItemGroup as ItemGroup, __experimentalVStack as VStack, __experimentalHStack as HStack, Button, Tooltip } from '@wordpress/components';
+import { typography } from '@wordpress/icons';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontLibraryProvider, { FontLibraryContext } from './font-library-modal/context';
+import FontLibraryModal from './font-library-modal';
+import FontFamilyItem from './font-family-item';
+import Subtitle from './subtitle';
+function FontFamilies() {
+  const {
+    modalTabOpen,
+    toggleModal,
+    themeFonts,
+    customFonts
+  } = useContext(FontLibraryContext);
+  return createElement(Fragment, null, !!modalTabOpen && createElement(FontLibraryModal, {
+    onRequestClose: () => toggleModal(),
+    initialTabName: modalTabOpen
+  }), createElement(VStack, {
+    spacing: 3
+  }, createElement(HStack, {
+    justify: "space-between"
+  }, createElement(Subtitle, {
+    level: 3
+  }, __('Fonts')), createElement(HStack, {
+    justify: "flex-end"
+  }, createElement(Tooltip, {
+    text: __('Manage fonts')
+  }, createElement(Button, {
+    onClick: () => toggleModal('installed-fonts'),
+    "aria-label": __('Manage fonts'),
+    icon: typography,
+    size: 'small'
+  })))), createElement(ItemGroup, {
+    isBordered: true,
+    isSeparated: true
+  }, customFonts.map(font => createElement(FontFamilyItem, {
+    key: font.slug,
+    font: font
+  })), themeFonts.map(font => createElement(FontFamilyItem, {
+    key: font.slug,
+    font: font
+  })))));
+}
+export default (({
+  ...props
+}) => createElement(FontLibraryProvider, null, createElement(FontFamilies, {
+  ...props
+})));
+//# sourceMappingURL=font-families.js.map

package/build-module/components/global-styles/font-families.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","Button","Tooltip","typography","useContext","FontLibraryProvider","FontLibraryContext","FontLibraryModal","FontFamilyItem","Subtitle","FontFamilies","modalTabOpen","toggleModal","themeFonts","customFonts","createElement","Fragment","onRequestClose","initialTabName","spacing","justify","level","text","onClick","icon","size","isBordered","isSeparated","map","font","key","slug","props"],"sources":["@wordpress/edit-site/src/components/global-styles/font-families.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tButton,\n\tTooltip,\n} from '@wordpress/components';\nimport { typography } from '@wordpress/icons';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport FontLibraryProvider, {\n\tFontLibraryContext,\n} from './font-library-modal/context';\nimport FontLibraryModal from './font-library-modal';\nimport FontFamilyItem from './font-family-item';\nimport Subtitle from './subtitle';\n\nfunction FontFamilies() {\n\tconst { modalTabOpen, toggleModal, themeFonts, customFonts } =\n\t\tuseContext( FontLibraryContext );\n\n\treturn (\n\t\t<>\n\t\t\t{ !! modalTabOpen && (\n\t\t\t\t<FontLibraryModal\n\t\t\t\t\tonRequestClose={ () => toggleModal() }\n\t\t\t\t\tinitialTabName={ modalTabOpen }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>\n\t\t\t\t\t<HStack justify=\"flex-end\">\n\t\t\t\t\t\t<Tooltip text={ __( 'Manage fonts' ) }>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\ttoggleModal( 'installed-fonts' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taria-label={ __( 'Manage fonts' ) }\n\t\t\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\t\t\tsize={ 'small' }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t{ customFonts.map( ( font ) => (\n\t\t\t\t\t\t<FontFamilyItem key={ font.slug } font={ font } />\n\t\t\t\t\t) ) }\n\t\t\t\t\t{ themeFonts.map( ( font ) => (\n\t\t\t\t\t\t<FontFamilyItem key={ font.slug } font={ font } />\n\t\t\t\t\t) ) }\n\t\t\t\t</ItemGroup>\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default ( { ...props } ) => (\n\t<FontLibraryProvider>\n\t\t<FontFamilies { ...props } />\n\t</FontLibraryProvider>\n);\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SACCC,uBAAuB,IAAIC,SAAS,EACpCC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,MAAM,EACNC,OAAO,QACD,uBAAuB;AAC9B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,mBAAmB,IACzBC,kBAAkB,QACZ,8BAA8B;AACrC,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,cAAc,MAAM,oBAAoB;AAC/C,OAAOC,QAAQ,MAAM,YAAY;AAEjC,SAASC,YAAYA,CAAA,EAAG;EACvB,MAAM;IAAEC,YAAY;IAAEC,WAAW;IAAEC,UAAU;IAAEC;EAAY,CAAC,GAC3DV,UAAU,CAAEE,kBAAmB,CAAC;EAEjC,OACCS,aAAA,CAAAC,QAAA,QACG,CAAC,CAAEL,YAAY,IAChBI,aAAA,CAACR,gBAAgB;IAChBU,cAAc,EAAGA,CAAA,KAAML,WAAW,CAAC,CAAG;IACtCM,cAAc,EAAGP;EAAc,CAC/B,CACD,EAEDI,aAAA,CAACjB,MAAM;IAACqB,OAAO,EAAG;EAAG,GACpBJ,aAAA,CAACf,MAAM;IAACoB,OAAO,EAAC;EAAe,GAC9BL,aAAA,CAACN,QAAQ;IAACY,KAAK,EAAG;EAAG,GAAG3B,EAAE,CAAE,OAAQ,CAAa,CAAC,EAClDqB,aAAA,CAACf,MAAM;IAACoB,OAAO,EAAC;EAAU,GACzBL,aAAA,CAACb,OAAO;IAACoB,IAAI,EAAG5B,EAAE,CAAE,cAAe;EAAG,GACrCqB,aAAA,CAACd,MAAM;IACNsB,OAAO,EAAGA,CAAA,KACTX,WAAW,CAAE,iBAAkB,CAC/B;IACD,cAAalB,EAAE,CAAE,cAAe,CAAG;IACnC8B,IAAI,EAAGrB,UAAY;IACnBsB,IAAI,EAAG;EAAS,CAChB,CACO,CACF,CACD,CAAC,EACTV,aAAA,CAACnB,SAAS;IAAC8B,UAAU;IAACC,WAAW;EAAA,GAC9Bb,WAAW,CAACc,GAAG,CAAIC,IAAI,IACxBd,aAAA,CAACP,cAAc;IAACsB,GAAG,EAAGD,IAAI,CAACE,IAAM;IAACF,IAAI,EAAGA;EAAM,CAAE,CAChD,CAAC,EACDhB,UAAU,CAACe,GAAG,CAAIC,IAAI,IACvBd,aAAA,CAACP,cAAc;IAACsB,GAAG,EAAGD,IAAI,CAACE,IAAM;IAACF,IAAI,EAAGA;EAAM,CAAE,CAChD,CACQ,CACJ,CACP,CAAC;AAEL;AAEA,gBAAe,CAAE;EAAE,GAAGG;AAAM,CAAC,KAC5BjB,aAAA,CAACV,mBAAmB,QACnBU,aAAA,CAACL,YAAY;EAAA,GAAMsB;AAAK,CAAI,CACR,CACrB"}

package/build-module/components/global-styles/font-family-item.js

@@ -0,0 +1,40 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { _n } from '@wordpress/i18n';
+import { __experimentalHStack as HStack, __experimentalItem as Item, FlexItem } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './font-library-modal/context';
+import { getPreviewStyle } from './font-library-modal/utils';
+function FontFamilyItem({
+  font
+}) {
+  const {
+    handleSetLibraryFontSelected,
+    toggleModal
+  } = useContext(FontLibraryContext);
+  const variantsCount = font?.fontFace?.length || 1;
+  const handleClick = () => {
+    handleSetLibraryFontSelected(font);
+    toggleModal('installed-fonts');
+  };
+  const previewStyle = getPreviewStyle(font);
+  return createElement(Item, {
+    onClick: handleClick
+  }, createElement(HStack, {
+    justify: "space-between"
+  }, createElement(FlexItem, {
+    style: previewStyle
+  }, font.name), createElement(FlexItem, {
+    style: {
+      color: '#9e9e9e'
+    }
+  }, variantsCount, ' ', _n('variant', 'variants', variantsCount))));
+}
+export default FontFamilyItem;
+//# sourceMappingURL=font-family-item.js.map

package/build-module/components/global-styles/font-family-item.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_n","__experimentalHStack","HStack","__experimentalItem","Item","FlexItem","useContext","FontLibraryContext","getPreviewStyle","FontFamilyItem","font","handleSetLibraryFontSelected","toggleModal","variantsCount","fontFace","length","handleClick","previewStyle","createElement","onClick","justify","style","name","color"],"sources":["@wordpress/edit-site/src/components/global-styles/font-family-item.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _n } from '@wordpress/i18n';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalItem as Item,\n\tFlexItem,\n} from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './font-library-modal/context';\nimport { getPreviewStyle } from './font-library-modal/utils';\n\nfunction FontFamilyItem( { font } ) {\n\tconst { handleSetLibraryFontSelected, toggleModal } =\n\t\tuseContext( FontLibraryContext );\n\n\tconst variantsCount = font?.fontFace?.length || 1;\n\n\tconst handleClick = () => {\n\t\thandleSetLibraryFontSelected( font );\n\t\ttoggleModal( 'installed-fonts' );\n\t};\n\n\tconst previewStyle = getPreviewStyle( font );\n\n\treturn (\n\t\t<Item onClick={ handleClick }>\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<FlexItem style={ previewStyle }>{ font.name }</FlexItem>\n\t\t\t\t<FlexItem style={ { color: '#9e9e9e' } }>\n\t\t\t\t\t{ variantsCount }{ ' ' }\n\t\t\t\t\t{ _n( 'variant', 'variants', variantsCount ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</Item>\n\t);\n}\n\nexport default FontFamilyItem;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SACCC,oBAAoB,IAAIC,MAAM,EAC9BC,kBAAkB,IAAIC,IAAI,EAC1BC,QAAQ,QACF,uBAAuB;AAC9B,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,4BAA4B;AAE5D,SAASC,cAAcA,CAAE;EAAEC;AAAK,CAAC,EAAG;EACnC,MAAM;IAAEC,4BAA4B;IAAEC;EAAY,CAAC,GAClDN,UAAU,CAAEC,kBAAmB,CAAC;EAEjC,MAAMM,aAAa,GAAGH,IAAI,EAAEI,QAAQ,EAAEC,MAAM,IAAI,CAAC;EAEjD,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACzBL,4BAA4B,CAAED,IAAK,CAAC;IACpCE,WAAW,CAAE,iBAAkB,CAAC;EACjC,CAAC;EAED,MAAMK,YAAY,GAAGT,eAAe,CAAEE,IAAK,CAAC;EAE5C,OACCQ,aAAA,CAACd,IAAI;IAACe,OAAO,EAAGH;EAAa,GAC5BE,aAAA,CAAChB,MAAM;IAACkB,OAAO,EAAC;EAAe,GAC9BF,aAAA,CAACb,QAAQ;IAACgB,KAAK,EAAGJ;EAAc,GAAGP,IAAI,CAACY,IAAgB,CAAC,EACzDJ,aAAA,CAACb,QAAQ;IAACgB,KAAK,EAAG;MAAEE,KAAK,EAAE;IAAU;EAAG,GACrCV,aAAa,EAAI,GAAG,EACpBb,EAAE,CAAE,SAAS,EAAE,UAAU,EAAEa,aAAc,CAClC,CACH,CACH,CAAC;AAET;AAEA,eAAeJ,cAAc"}

package/build-module/components/global-styles/font-library-modal/confirm-delete-dialog.js

@@ -0,0 +1,23 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+function ConfirmDeleteDialog({
+  font,
+  isConfirmDeleteOpen,
+  handleConfirmUninstall,
+  handleCancelUninstall
+}) {
+  return createElement(ConfirmDialog, {
+    isOpen: isConfirmDeleteOpen,
+    cancelButtonText: __('No, keep the font'),
+    confirmButtonText: __('Yes, uninstall'),
+    onCancel: handleCancelUninstall,
+    onConfirm: handleConfirmUninstall
+  }, font && sprintf( /* translators: %s: Name of the font. */
+  __('Would you like to remove %s and all its variants and assets?'), font.name));
+}
+export default ConfirmDeleteDialog;
+//# sourceMappingURL=confirm-delete-dialog.js.map

package/build-module/components/global-styles/font-library-modal/confirm-delete-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","sprintf","__experimentalConfirmDialog","ConfirmDialog","ConfirmDeleteDialog","font","isConfirmDeleteOpen","handleConfirmUninstall","handleCancelUninstall","createElement","isOpen","cancelButtonText","confirmButtonText","onCancel","onConfirm","name"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/confirm-delete-dialog.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n\nfunction ConfirmDeleteDialog( {\n\tfont,\n\tisConfirmDeleteOpen,\n\thandleConfirmUninstall,\n\thandleCancelUninstall,\n} ) {\n\treturn (\n\t\t<ConfirmDialog\n\t\t\tisOpen={ isConfirmDeleteOpen }\n\t\t\tcancelButtonText={ __( 'No, keep the font' ) }\n\t\t\tconfirmButtonText={ __( 'Yes, uninstall' ) }\n\t\t\tonCancel={ handleCancelUninstall }\n\t\t\tonConfirm={ handleConfirmUninstall }\n\t\t>\n\t\t\t{ font &&\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: Name of the font. */\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Would you like to remove %s and all its variants and assets?'\n\t\t\t\t\t),\n\t\t\t\t\tfont.name\n\t\t\t\t) }\n\t\t</ConfirmDialog>\n\t);\n}\n\nexport default ConfirmDeleteDialog;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,2BAA2B,IAAIC,aAAa,QAAQ,uBAAuB;AAEpF,SAASC,mBAAmBA,CAAE;EAC7BC,IAAI;EACJC,mBAAmB;EACnBC,sBAAsB;EACtBC;AACD,CAAC,EAAG;EACH,OACCC,aAAA,CAACN,aAAa;IACbO,MAAM,EAAGJ,mBAAqB;IAC9BK,gBAAgB,EAAGX,EAAE,CAAE,mBAAoB,CAAG;IAC9CY,iBAAiB,EAAGZ,EAAE,CAAE,gBAAiB,CAAG;IAC5Ca,QAAQ,EAAGL,qBAAuB;IAClCM,SAAS,EAAGP;EAAwB,GAElCF,IAAI,IACLJ,OAAO,EACN;EACAD,EAAE,CACD,8DACD,CAAC,EACDK,IAAI,CAACU,IACN,CACa,CAAC;AAElB;AAEA,eAAeX,mBAAmB"}

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

@@ -0,0 +1,276 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { createContext, useState, useEffect } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEntityRecord, useEntityRecords, store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { fetchInstallFonts, fetchUninstallFonts } from './resolvers';
+import { unlock } from '../../../lock-unlock';
+const {
+  useGlobalSetting
+} = unlock(blockEditorPrivateApis);
+import { setUIValuesNeeded, mergeFontFamilies, loadFontFaceInBrowser, getDisplaySrcFromFontFace, makeFormDataFromFontFamilies } from './utils';
+import { toggleFont } from './utils/toggleFont';
+import getIntersectingFontFaces from './utils/get-intersecting-font-faces';
+export const FontLibraryContext = createContext({});
+function FontLibraryProvider({
+  children
+}) {
+  const {
+    __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits
+  } = useDispatch(coreStore);
+  const {
+    globalStylesId
+  } = useSelect(select => {
+    const {
+      __experimentalGetCurrentGlobalStylesId
+    } = select(coreStore);
+    return {
+      globalStylesId: __experimentalGetCurrentGlobalStylesId()
+    };
+  });
+  const globalStyles = useEntityRecord('root', 'globalStyles', globalStylesId);
+  const fontFamiliesHasChanges = !!globalStyles?.edits?.settings?.typography?.fontFamilies;
+  const {
+    createErrorNotice
+  } = useDispatch(noticesStore);
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const refreshLibrary = () => {
+    setRefreshKey(prevKey => prevKey + 1);
+  };
+  const {
+    records: libraryPosts = [],
+    isResolving: isResolvingLibrary,
+    hasResolved: hasResolvedLibrary
+  } = useEntityRecords('postType', 'wp_font_family', {
+    refreshKey
+  });
+  const libraryFonts = (libraryPosts || []).map(post => JSON.parse(post.content.raw)) || [];
+
+  // Global Styles (settings) font families
+  const [fontFamilies, setFontFamilies] = useGlobalSetting('typography.fontFamilies');
+  // theme.json file font families
+  const [baseFontFamilies] = useGlobalSetting('typography.fontFamilies', undefined, 'base');
+
+  // Save font families to the global styles post in the database.
+  const saveFontFamilies = () => {
+    saveSpecifiedEntityEdits('root', 'globalStyles', globalStylesId, ['settings.typography.fontFamilies']);
+  };
+
+  // Library Fonts
+  const [modalTabOpen, setModalTabOpen] = useState(false);
+  const [libraryFontSelected, setLibraryFontSelected] = useState(null);
+  const baseThemeFonts = baseFontFamilies?.theme ? baseFontFamilies.theme.map(f => setUIValuesNeeded(f, {
+    source: 'theme'
+  })).sort((a, b) => a.name.localeCompare(b.name)) : [];
+  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(null);
+    }
+  }, [modalTabOpen]);
+  const handleSetLibraryFontSelected = font => {
+    // If font is null, reset the selected font
+    if (!font) {
+      setLibraryFontSelected(null);
+      return;
+    }
+    const fonts = font.source === 'theme' ? baseThemeFonts : baseCustomFonts;
+
+    // Tries to find the font in the installed fonts
+    const fontSelected = fonts.find(f => f.slug === font.slug);
+    // If the font is not found (it is only defined in custom styles), use the font from custom styles
+    setLibraryFontSelected({
+      ...(fontSelected || font),
+      source: font.source
+    });
+  };
+  const toggleModal = tabName => {
+    setModalTabOpen(tabName || null);
+  };
+
+  // Demo
+  const [loadedFontUrls] = useState(new Set());
+
+  // Theme data
+  const {
+    site,
+    currentTheme
+  } = useSelect(select => {
+    return {
+      site: select(coreStore).getSite(),
+      currentTheme: select(coreStore).getCurrentTheme()
+    };
+  });
+  const themeUrl = site?.url + '/wp-content/themes/' + currentTheme?.stylesheet;
+  const getAvailableFontsOutline = availableFontFamilies => {
+    const outline = availableFontFamilies.reduce((acc, font) => {
+      const availableFontFaces = Array.isArray(font?.fontFace) ? font?.fontFace.map(face => `${face.fontStyle + face.fontWeight}`) : ['normal400']; // If the font doesn't have fontFace, we assume it is a system font and we add the defaults: normal 400
+
+      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(fonts) {
+    setIsInstalling(true);
+    try {
+      // Prepare formData to install.
+      const formData = makeFormDataFromFontFamilies(fonts);
+      // Install the fonts (upload the font files to the server and create the post in the database).
+      const fontsInstalled = await fetchInstallFonts(formData);
+      // Get intersecting font faces between the fonts we tried to installed and the fonts that were installed
+      // (to avoid activating a non installed font).
+      const fontToBeActivated = getIntersectingFontFaces(fontsInstalled, fonts);
+      // Activate the font families (add the font families to the global styles).
+      activateCustomFontFamilies(fontToBeActivated);
+      // Save the global styles to the database.
+      saveSpecifiedEntityEdits('root', 'globalStyles', globalStylesId, ['settings.typography.fontFamilies']);
+      refreshLibrary();
+      setIsInstalling(false);
+      return true;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+      createErrorNotice(__('Error installing fonts.'), {
+        type: 'snackbar'
+      });
+      setIsInstalling(false);
+      return false;
+    }
+  }
+  async function uninstallFont(font) {
+    try {
+      // Uninstall the font (remove the font files from the server and the post from the database).
+      await fetchUninstallFonts([font]);
+      // Deactivate the font family (remove the font family from the global styles).
+      deactivateFontFamily(font);
+      // Save the global styles to the database.
+      await saveSpecifiedEntityEdits('root', 'globalStyles', globalStylesId, ['settings.typography.fontFamilies']);
+      // Refresh the library (the the library font families from database).
+      refreshLibrary();
+      return true;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+      createErrorNotice(__('Error uninstalling fonts.'), {
+        type: 'snackbar'
+      });
+      return false;
+    }
+  }
+  const deactivateFontFamily = font => {
+    var _fontFamilies$font$so;
+    // If the user doesn't have custom fonts defined, include as custom fonts all the theme fonts
+    // We want to save as active all the theme fonts at the beginning
+    const initialCustomFonts = (_fontFamilies$font$so = fontFamilies?.[font.source]) !== null && _fontFamilies$font$so !== void 0 ? _fontFamilies$font$so : [];
+    const newCustomFonts = initialCustomFonts.filter(f => f.slug !== font.slug);
+    setFontFamilies({
+      ...fontFamilies,
+      [font.source]: newCustomFonts
+    });
+  };
+  const activateCustomFontFamilies = fontsToAdd => {
+    // Merge the existing custom fonts with the new fonts.
+    const newCustomFonts = mergeFontFamilies(fontFamilies?.custom, fontsToAdd);
+    // Activate the fonts by set the new custom fonts array.
+    setFontFamilies({
+      ...fontFamilies,
+      custom: newCustomFonts
+    });
+    // Add custom fonts to the browser.
+    fontsToAdd.forEach(font => {
+      font.fontFace.forEach(face => {
+        // Load font faces just in the iframe because they already are in the document.
+        loadFontFaceInBrowser(face, getDisplaySrcFromFontFace(face.src), 'iframe');
+      });
+    });
+  };
+  const toggleActivateFont = (font, face) => {
+    var _fontFamilies$font$so2;
+    // If the user doesn't have custom fonts defined, include as custom fonts all the theme fonts
+    // We want to save as active all the theme fonts at the beginning
+    const initialFonts = (_fontFamilies$font$so2 = fontFamilies?.[font.source]) !== null && _fontFamilies$font$so2 !== void 0 ? _fontFamilies$font$so2 : [];
+    // Toggles the received font family or font face
+    const newFonts = toggleFont(font, face, initialFonts);
+    // Updates the font families activated in global settings:
+    setFontFamilies({
+      ...fontFamilies,
+      [font.source]: newFonts
+    });
+  };
+  const loadFontFaceAsset = async fontFace => {
+    // If the font doesn't have a src, don't load it.
+    if (!fontFace.src) return;
+    // Get the src of the font.
+    const src = getDisplaySrcFromFontFace(fontFace.src, themeUrl);
+    // If the font is already loaded, don't load it again.
+    if (loadedFontUrls.has(src)) return;
+    // Load the font in the browser.
+    loadFontFaceInBrowser(fontFace, src, 'document');
+    // Add the font to the loaded fonts list.
+    loadedFontUrls.add(src);
+  };
+  return createElement(FontLibraryContext.Provider, {
+    value: {
+      libraryFontSelected,
+      handleSetLibraryFontSelected,
+      themeFonts,
+      baseThemeFonts,
+      customFonts,
+      baseCustomFonts,
+      isFontActivated,
+      getFontFacesActivated,
+      loadFontFaceAsset,
+      installFonts,
+      uninstallFont,
+      toggleActivateFont,
+      getAvailableFontsOutline,
+      modalTabOpen,
+      toggleModal,
+      refreshLibrary,
+      saveFontFamilies,
+      fontFamiliesHasChanges,
+      isResolvingLibrary,
+      hasResolvedLibrary,
+      isInstalling
+    }
+  }, children);
+}
+export default FontLibraryProvider;
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useState","useEffect","privateApis","blockEditorPrivateApis","useSelect","useDispatch","useEntityRecord","useEntityRecords","store","coreStore","noticesStore","__","fetchInstallFonts","fetchUninstallFonts","unlock","useGlobalSetting","setUIValuesNeeded","mergeFontFamilies","loadFontFaceInBrowser","getDisplaySrcFromFontFace","makeFormDataFromFontFamilies","toggleFont","getIntersectingFontFaces","FontLibraryContext","FontLibraryProvider","children","__experimentalSaveSpecifiedEntityEdits","saveSpecifiedEntityEdits","globalStylesId","select","__experimentalGetCurrentGlobalStylesId","globalStyles","fontFamiliesHasChanges","edits","settings","typography","fontFamilies","createErrorNotice","isInstalling","setIsInstalling","refreshKey","setRefreshKey","refreshLibrary","prevKey","records","libraryPosts","isResolving","isResolvingLibrary","hasResolved","hasResolvedLibrary","libraryFonts","map","post","JSON","parse","content","raw","setFontFamilies","baseFontFamilies","undefined","saveFontFamilies","modalTabOpen","setModalTabOpen","libraryFontSelected","setLibraryFontSelected","baseThemeFonts","theme","f","source","sort","a","b","name","localeCompare","themeFonts","customFonts","custom","baseCustomFonts","handleSetLibraryFontSelected","font","fonts","fontSelected","find","slug","toggleModal","tabName","loadedFontUrls","Set","site","currentTheme","getSite","getCurrentTheme","themeUrl","url","stylesheet","getAvailableFontsOutline","availableFontFamilies","outline","reduce","acc","availableFontFaces","Array","isArray","fontFace","face","fontStyle","fontWeight","getActivatedFontsOutline","isFontActivated","style","weight","includes","getFontFacesActivated","installFonts","formData","fontsInstalled","fontToBeActivated","activateCustomFontFamilies","e","console","error","type","uninstallFont","deactivateFontFamily","_fontFamilies$font$so","initialCustomFonts","newCustomFonts","filter","fontsToAdd","forEach","src","toggleActivateFont","_fontFamilies$font$so2","initialFonts","newFonts","loadFontFaceAsset","has","add","createElement","Provider","value"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/context.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useState, useEffect } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseEntityRecord,\n\tuseEntityRecords,\n\tstore as coreStore,\n} from '@wordpress/core-data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { fetchInstallFonts, fetchUninstallFonts } from './resolvers';\nimport { unlock } from '../../../lock-unlock';\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\nimport {\n\tsetUIValuesNeeded,\n\tmergeFontFamilies,\n\tloadFontFaceInBrowser,\n\tgetDisplaySrcFromFontFace,\n\tmakeFormDataFromFontFamilies,\n} from './utils';\nimport { toggleFont } from './utils/toggleFont';\nimport getIntersectingFontFaces from './utils/get-intersecting-font-faces';\n\nexport const FontLibraryContext = createContext( {} );\n\nfunction FontLibraryProvider( { children } ) {\n\tconst { __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits } =\n\t\tuseDispatch( coreStore );\n\tconst { globalStylesId } = useSelect( ( select ) => {\n\t\tconst { __experimentalGetCurrentGlobalStylesId } = select( coreStore );\n\t\treturn { globalStylesId: __experimentalGetCurrentGlobalStylesId() };\n\t} );\n\n\tconst globalStyles = useEntityRecord(\n\t\t'root',\n\t\t'globalStyles',\n\t\tglobalStylesId\n\t);\n\tconst fontFamiliesHasChanges =\n\t\t!! globalStyles?.edits?.settings?.typography?.fontFamilies;\n\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\n\tconst [ isInstalling, setIsInstalling ] = useState( false );\n\tconst [ refreshKey, setRefreshKey ] = useState( 0 );\n\n\tconst refreshLibrary = () => {\n\t\tsetRefreshKey( ( prevKey ) => prevKey + 1 );\n\t};\n\n\tconst {\n\t\trecords: libraryPosts = [],\n\t\tisResolving: isResolvingLibrary,\n\t\thasResolved: hasResolvedLibrary,\n\t} = useEntityRecords( 'postType', 'wp_font_family', { refreshKey } );\n\n\tconst libraryFonts =\n\t\t( libraryPosts || [] ).map( ( post ) =>\n\t\t\tJSON.parse( post.content.raw )\n\t\t) || [];\n\n\t// Global Styles (settings) font families\n\tconst [ fontFamilies, setFontFamilies ] = useGlobalSetting(\n\t\t'typography.fontFamilies'\n\t);\n\t// theme.json file font families\n\tconst [ baseFontFamilies ] = useGlobalSetting(\n\t\t'typography.fontFamilies',\n\t\tundefined,\n\t\t'base'\n\t);\n\n\t// Save font families to the global styles post in the database.\n\tconst saveFontFamilies = () => {\n\t\tsaveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [\n\t\t\t'settings.typography.fontFamilies',\n\t\t] );\n\t};\n\n\t// Library Fonts\n\tconst [ modalTabOpen, setModalTabOpen ] = useState( false );\n\tconst [ libraryFontSelected, setLibraryFontSelected ] = useState( null );\n\n\tconst baseThemeFonts = baseFontFamilies?.theme\n\t\t? baseFontFamilies.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 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( null );\n\t\t}\n\t}, [ modalTabOpen ] );\n\n\tconst handleSetLibraryFontSelected = ( font ) => {\n\t\t// If font is null, reset the selected font\n\t\tif ( ! font ) {\n\t\t\tsetLibraryFontSelected( null );\n\t\t\treturn;\n\t\t}\n\n\t\tconst fonts =\n\t\t\tfont.source === 'theme' ? baseThemeFonts : 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\tconst toggleModal = ( tabName ) => {\n\t\tsetModalTabOpen( tabName || null );\n\t};\n\n\t// Demo\n\tconst [ loadedFontUrls ] = useState( new Set() );\n\n\t// Theme data\n\tconst { site, currentTheme } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tsite: select( coreStore ).getSite(),\n\t\t\tcurrentTheme: select( coreStore ).getCurrentTheme(),\n\t\t};\n\t} );\n\tconst themeUrl =\n\t\tsite?.url + '/wp-content/themes/' + currentTheme?.stylesheet;\n\n\tconst getAvailableFontsOutline = ( availableFontFamilies ) => {\n\t\tconst outline = availableFontFamilies.reduce( ( acc, font ) => {\n\t\t\tconst availableFontFaces = Array.isArray( font?.fontFace )\n\t\t\t\t? font?.fontFace.map(\n\t\t\t\t\t\t( face ) => `${ face.fontStyle + face.fontWeight }`\n\t\t\t\t  )\n\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\tacc[ font.slug ] = availableFontFaces;\n\t\t\treturn acc;\n\t\t}, {} );\n\t\treturn outline;\n\t};\n\n\tconst getActivatedFontsOutline = ( source ) => {\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 = ( slug, style, weight, source ) => {\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\tstyle + weight\n\t\t);\n\t};\n\n\tconst getFontFacesActivated = ( slug, source ) => {\n\t\treturn getActivatedFontsOutline( source )[ slug ] || [];\n\t};\n\n\tasync function installFonts( fonts ) {\n\t\tsetIsInstalling( true );\n\t\ttry {\n\t\t\t// Prepare formData to install.\n\t\t\tconst formData = makeFormDataFromFontFamilies( fonts );\n\t\t\t// Install the fonts (upload the font files to the server and create the post in the database).\n\t\t\tconst fontsInstalled = await fetchInstallFonts( formData );\n\t\t\t// Get intersecting font faces between the fonts we tried to installed and the fonts that were installed\n\t\t\t// (to avoid activating a non installed font).\n\t\t\tconst fontToBeActivated = getIntersectingFontFaces(\n\t\t\t\tfontsInstalled,\n\t\t\t\tfonts\n\t\t\t);\n\t\t\t// Activate the font families (add the font families to the global styles).\n\t\t\tactivateCustomFontFamilies( fontToBeActivated );\n\t\t\t// Save the global styles to the database.\n\t\t\tsaveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [\n\t\t\t\t'settings.typography.fontFamilies',\n\t\t\t] );\n\t\t\trefreshLibrary();\n\t\t\tsetIsInstalling( false );\n\t\t\treturn true;\n\t\t} catch ( e ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error( e );\n\t\t\tcreateErrorNotice( __( 'Error installing fonts.' ), {\n\t\t\t\ttype: 'snackbar',\n\t\t\t} );\n\t\t\tsetIsInstalling( false );\n\t\t\treturn false;\n\t\t}\n\t}\n\n\tasync function uninstallFont( font ) {\n\t\ttry {\n\t\t\t// Uninstall the font (remove the font files from the server and the post from the database).\n\t\t\tawait fetchUninstallFonts( [ font ] );\n\t\t\t// Deactivate the font family (remove the font family from the global styles).\n\t\t\tdeactivateFontFamily( font );\n\t\t\t// Save the global styles to the database.\n\t\t\tawait saveSpecifiedEntityEdits(\n\t\t\t\t'root',\n\t\t\t\t'globalStyles',\n\t\t\t\tglobalStylesId,\n\t\t\t\t[ 'settings.typography.fontFamilies' ]\n\t\t\t);\n\t\t\t// Refresh the library (the the library font families from database).\n\t\t\trefreshLibrary();\n\t\t\treturn true;\n\t\t} catch ( e ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error( e );\n\t\t\tcreateErrorNotice( __( 'Error uninstalling fonts.' ), {\n\t\t\t\ttype: 'snackbar',\n\t\t\t} );\n\t\t\treturn false;\n\t\t}\n\t}\n\n\tconst deactivateFontFamily = ( font ) => {\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\tsetFontFamilies( {\n\t\t\t...fontFamilies,\n\t\t\t[ font.source ]: newCustomFonts,\n\t\t} );\n\t};\n\n\tconst activateCustomFontFamilies = ( fontsToAdd ) => {\n\t\t// Merge the existing custom fonts with the new fonts.\n\t\tconst newCustomFonts = mergeFontFamilies(\n\t\t\tfontFamilies?.custom,\n\t\t\tfontsToAdd\n\t\t);\n\t\t// Activate the fonts by set the new custom fonts array.\n\t\tsetFontFamilies( {\n\t\t\t...fontFamilies,\n\t\t\tcustom: newCustomFonts,\n\t\t} );\n\t\t// Add custom fonts to the browser.\n\t\tfontsToAdd.forEach( ( font ) => {\n\t\t\tfont.fontFace.forEach( ( face ) => {\n\t\t\t\t// Load font faces just in the iframe because they already are in the document.\n\t\t\t\tloadFontFaceInBrowser(\n\t\t\t\t\tface,\n\t\t\t\t\tgetDisplaySrcFromFontFace( face.src ),\n\t\t\t\t\t'iframe'\n\t\t\t\t);\n\t\t\t} );\n\t\t} );\n\t};\n\n\tconst toggleActivateFont = ( font, face ) => {\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\t};\n\n\tconst loadFontFaceAsset = async ( fontFace ) => {\n\t\t// If the font doesn't have a src, don't load it.\n\t\tif ( ! fontFace.src ) return;\n\t\t// Get the src of the font.\n\t\tconst src = getDisplaySrcFromFontFace( fontFace.src, themeUrl );\n\t\t// If the font is already loaded, don't load it again.\n\t\tif ( loadedFontUrls.has( src ) ) return;\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\treturn (\n\t\t<FontLibraryContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tlibraryFontSelected,\n\t\t\t\thandleSetLibraryFontSelected,\n\t\t\t\tthemeFonts,\n\t\t\t\tbaseThemeFonts,\n\t\t\t\tcustomFonts,\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\tuninstallFont,\n\t\t\t\ttoggleActivateFont,\n\t\t\t\tgetAvailableFontsOutline,\n\t\t\t\tmodalTabOpen,\n\t\t\t\ttoggleModal,\n\t\t\t\trefreshLibrary,\n\t\t\t\tsaveFontFamilies,\n\t\t\t\tfontFamiliesHasChanges,\n\t\t\t\tisResolvingLibrary,\n\t\t\t\thasResolvedLibrary,\n\t\t\t\tisInstalling,\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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"}

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

@@ -0,0 +1,49 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { _n } from '@wordpress/i18n';
+import { __experimentalText as Text, Button, Flex, FlexItem } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FontDemo from './font-demo';
+import { getPreviewStyle } from './utils';
+function FontCard({
+  font,
+  onClick,
+  actionHandler,
+  variantsText
+}) {
+  const fakeFontFace = {
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontFamily: font.fontFamily,
+    fake: true
+  };
+  const displayFontFace = font.fontFace && font.fontFace.length ? font?.fontFace?.find(face => face.fontStyle === 'normal' && face.fontWeight === '400') || font.fontFace[0] : fakeFontFace;
+  const demoStyle = getPreviewStyle(font);
+  const variantsCount = font.fontFace?.length || 1;
+  const style = {
+    cursor: !!onClick ? 'pointer' : 'default'
+  };
+  return createElement(Button, {
+    onClick: onClick,
+    style: style,
+    className: "font-library-modal__font-card"
+  }, createElement(Flex, {
+    justify: "space-between",
+    wrap: false
+  }, createElement(FontDemo, {
+    fontFace: displayFontFace,
+    text: font.name,
+    style: demoStyle
+  }), createElement(Flex, {
+    justify: "flex-end"
+  }, createElement(FlexItem, null, createElement(Text, {
+    className: "font-library-modal__font-card__count"
+  }, variantsText || variantsCount + ' ' + _n('variant', 'variants', variantsCount))), createElement(FlexItem, null, !!actionHandler && actionHandler))));
+}
+export default FontCard;
+//# sourceMappingURL=font-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_n","__experimentalText","Text","Button","Flex","FlexItem","FontDemo","getPreviewStyle","FontCard","font","onClick","actionHandler","variantsText","fakeFontFace","fontStyle","fontWeight","fontFamily","fake","displayFontFace","fontFace","length","find","face","demoStyle","variantsCount","style","cursor","createElement","className","justify","wrap","text","name"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-card.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _n } from '@wordpress/i18n';\nimport {\n\t__experimentalText as Text,\n\tButton,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport FontDemo from './font-demo';\nimport { getPreviewStyle } from './utils';\n\nfunction FontCard( { font, onClick, actionHandler, variantsText } ) {\n\tconst fakeFontFace = {\n\t\tfontStyle: 'normal',\n\t\tfontWeight: '400',\n\t\tfontFamily: font.fontFamily,\n\t\tfake: true,\n\t};\n\n\tconst displayFontFace =\n\t\tfont.fontFace && font.fontFace.length\n\t\t\t? font?.fontFace?.find(\n\t\t\t\t\t( face ) =>\n\t\t\t\t\t\tface.fontStyle === 'normal' && face.fontWeight === '400'\n\t\t\t  ) || font.fontFace[ 0 ]\n\t\t\t: fakeFontFace;\n\n\tconst demoStyle = getPreviewStyle( font );\n\n\tconst variantsCount = font.fontFace?.length || 1;\n\n\tconst style = {\n\t\tcursor: !! onClick ? 'pointer' : 'default',\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\tonClick={ onClick }\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\n\t\t\t\t\tfontFace={ displayFontFace }\n\t\t\t\t\ttext={ font.name }\n\t\t\t\t\tstyle={ demoStyle }\n\t\t\t\t/>\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\tvariantsCount +\n\t\t\t\t\t\t\t\t\t' ' +\n\t\t\t\t\t\t\t\t\t_n( 'variant', 'variants', variantsCount ) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>{ !! actionHandler && actionHandler }</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":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SACCC,kBAAkB,IAAIC,IAAI,EAC1BC,MAAM,EACNC,IAAI,EACJC,QAAQ,QACF,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,SAASC,eAAe,QAAQ,SAAS;AAEzC,SAASC,QAAQA,CAAE;EAAEC,IAAI;EAAEC,OAAO;EAAEC,aAAa;EAAEC;AAAa,CAAC,EAAG;EACnE,MAAMC,YAAY,GAAG;IACpBC,SAAS,EAAE,QAAQ;IACnBC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAEP,IAAI,CAACO,UAAU;IAC3BC,IAAI,EAAE;EACP,CAAC;EAED,MAAMC,eAAe,GACpBT,IAAI,CAACU,QAAQ,IAAIV,IAAI,CAACU,QAAQ,CAACC,MAAM,GAClCX,IAAI,EAAEU,QAAQ,EAAEE,IAAI,CAClBC,IAAI,IACLA,IAAI,CAACR,SAAS,KAAK,QAAQ,IAAIQ,IAAI,CAACP,UAAU,KAAK,KACpD,CAAC,IAAIN,IAAI,CAACU,QAAQ,CAAE,CAAC,CAAE,GACvBN,YAAY;EAEhB,MAAMU,SAAS,GAAGhB,eAAe,CAAEE,IAAK,CAAC;EAEzC,MAAMe,aAAa,GAAGf,IAAI,CAACU,QAAQ,EAAEC,MAAM,IAAI,CAAC;EAEhD,MAAMK,KAAK,GAAG;IACbC,MAAM,EAAE,CAAC,CAAEhB,OAAO,GAAG,SAAS,GAAG;EAClC,CAAC;EAED,OACCiB,aAAA,CAACxB,MAAM;IACNO,OAAO,EAAGA,OAAS;IACnBe,KAAK,EAAGA,KAAO;IACfG,SAAS,EAAC;EAA+B,GAEzCD,aAAA,CAACvB,IAAI;IAACyB,OAAO,EAAC,eAAe;IAACC,IAAI,EAAG;EAAO,GAC3CH,aAAA,CAACrB,QAAQ;IACRa,QAAQ,EAAGD,eAAiB;IAC5Ba,IAAI,EAAGtB,IAAI,CAACuB,IAAM;IAClBP,KAAK,EAAGF;EAAW,CACnB,CAAC,EACFI,aAAA,CAACvB,IAAI;IAACyB,OAAO,EAAC;EAAU,GACvBF,aAAA,CAACtB,QAAQ,QACRsB,aAAA,CAACzB,IAAI;IAAC0B,SAAS,EAAC;EAAsC,GACnDhB,YAAY,IACbY,aAAa,GACZ,GAAG,GACHxB,EAAE,CAAE,SAAS,EAAE,UAAU,EAAEwB,aAAc,CACtC,CACG,CAAC,EACXG,aAAA,CAACtB,QAAQ,QAAG,CAAC,CAAEM,aAAa,IAAIA,aAAyB,CACpD,CACD,CACC,CAAC;AAEX;AAEA,eAAeH,QAAQ"}

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

@@ -0,0 +1,62 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+import { useContext, useEffect, useState, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './context';
+function FontFaceDemo({
+  fontFace,
+  text,
+  style = {}
+}) {
+  const ref = useRef(null);
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  const [isAssetLoaded, setIsAssetLoaded] = useState(false);
+  const {
+    loadFontFaceAsset
+  } = useContext(FontLibraryContext);
+  const {
+    fontFamily,
+    fontStyle,
+    fontWeight
+  } = fontFace;
+  const demoStyle = {
+    fontWeight,
+    fontStyle,
+    fontFamily,
+    flexShrink: 0,
+    fontSize: '18px',
+    opacity: isAssetLoaded ? '1' : '0',
+    transition: 'opacity 0.3s ease-in-out',
+    ...style
+  };
+  useEffect(() => {
+    const observer = new window.IntersectionObserver(([entry]) => {
+      setIsIntersecting(entry.isIntersecting);
+    }, {});
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref]);
+  useEffect(() => {
+    const loadAsset = async () => {
+      if (isIntersecting) {
+        if (fontFace.src) {
+          await loadFontFaceAsset(fontFace);
+        }
+        setIsAssetLoaded(true);
+      }
+    };
+    loadAsset();
+  }, [fontFace, isIntersecting, loadFontFaceAsset]);
+  return createElement(Text, {
+    style: demoStyle,
+    ref: ref
+  }, text);
+}
+export default FontFaceDemo;
+//# sourceMappingURL=font-demo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalText","Text","useContext","useEffect","useState","useRef","FontLibraryContext","FontFaceDemo","fontFace","text","style","ref","isIntersecting","setIsIntersecting","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","fontFamily","fontStyle","fontWeight","demoStyle","flexShrink","fontSize","opacity","transition","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","src","createElement"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-demo.js"],"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';\n\nfunction FontFaceDemo( { fontFace, text, style = {} } ) {\n\tconst ref = useRef( null );\n\tconst [ isIntersecting, setIsIntersecting ] = useState( false );\n\tconst [ isAssetLoaded, setIsAssetLoaded ] = useState( false );\n\tconst { loadFontFaceAsset } = useContext( FontLibraryContext );\n\tconst { fontFamily, fontStyle, fontWeight } = fontFace;\n\n\tconst demoStyle = {\n\t\tfontWeight,\n\t\tfontStyle,\n\t\tfontFamily,\n\t\tflexShrink: 0,\n\t\tfontSize: '18px',\n\t\topacity: isAssetLoaded ? '1' : '0',\n\t\ttransition: 'opacity 0.3s ease-in-out',\n\t\t...style,\n\t};\n\n\tuseEffect( () => {\n\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\tsetIsIntersecting( entry.isIntersecting );\n\t\t}, {} );\n\t\tobserver.observe( ref.current );\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 ( 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 ] );\n\n\treturn (\n\t\t<Text style={ demoStyle } ref={ ref }>\n\t\t\t{ text }\n\t\t</Text>\n\t);\n}\n\nexport default FontFaceDemo;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,kBAAkB,IAAIC,IAAI,QAAQ,uBAAuB;AAClE,SAASC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,oBAAoB;;AAE5E;AACA;AACA;AACA,SAASC,kBAAkB,QAAQ,WAAW;AAE9C,SAASC,YAAYA,CAAE;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,KAAK,GAAG,CAAC;AAAE,CAAC,EAAG;EACvD,MAAMC,GAAG,GAAGN,MAAM,CAAE,IAAK,CAAC;EAC1B,MAAM,CAAEO,cAAc,EAAEC,iBAAiB,CAAE,GAAGT,QAAQ,CAAE,KAAM,CAAC;EAC/D,MAAM,CAAEU,aAAa,EAAEC,gBAAgB,CAAE,GAAGX,QAAQ,CAAE,KAAM,CAAC;EAC7D,MAAM;IAAEY;EAAkB,CAAC,GAAGd,UAAU,CAAEI,kBAAmB,CAAC;EAC9D,MAAM;IAAEW,UAAU;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAGX,QAAQ;EAEtD,MAAMY,SAAS,GAAG;IACjBD,UAAU;IACVD,SAAS;IACTD,UAAU;IACVI,UAAU,EAAE,CAAC;IACbC,QAAQ,EAAE,MAAM;IAChBC,OAAO,EAAET,aAAa,GAAG,GAAG,GAAG,GAAG;IAClCU,UAAU,EAAE,0BAA0B;IACtC,GAAGd;EACJ,CAAC;EAEDP,SAAS,CAAE,MAAM;IAChB,MAAMsB,QAAQ,GAAG,IAAIC,MAAM,CAACC,oBAAoB,CAAE,CAAE,CAAEC,KAAK,CAAE,KAAM;MAClEf,iBAAiB,CAAEe,KAAK,CAAChB,cAAe,CAAC;IAC1C,CAAC,EAAE,CAAC,CAAE,CAAC;IACPa,QAAQ,CAACI,OAAO,CAAElB,GAAG,CAACmB,OAAQ,CAAC;IAC/B,OAAO,MAAML,QAAQ,CAACM,UAAU,CAAC,CAAC;EACnC,CAAC,EAAE,CAAEpB,GAAG,CAAG,CAAC;EAEZR,SAAS,CAAE,MAAM;IAChB,MAAM6B,SAAS,GAAG,MAAAA,CAAA,KAAY;MAC7B,IAAKpB,cAAc,EAAG;QACrB,IAAKJ,QAAQ,CAACyB,GAAG,EAAG;UACnB,MAAMjB,iBAAiB,CAAER,QAAS,CAAC;QACpC;QACAO,gBAAgB,CAAE,IAAK,CAAC;MACzB;IACD,CAAC;IACDiB,SAAS,CAAC,CAAC;EACZ,CAAC,EAAE,CAAExB,QAAQ,EAAEI,cAAc,EAAEI,iBAAiB,CAAG,CAAC;EAEpD,OACCkB,aAAA,CAACjC,IAAI;IAACS,KAAK,EAAGU,SAAW;IAACT,GAAG,EAAGA;EAAK,GAClCF,IACG,CAAC;AAET;AAEA,eAAeF,YAAY"}

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

@@ -0,0 +1,42 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text, __experimentalVStack as VStack, __experimentalHStack as HStack, CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FontFaceDemo from './font-demo';
+function FontVariant({
+  fontFace,
+  variantName,
+  checked,
+  onClick,
+  text,
+  actionHandler
+}) {
+  const {
+    fontStyle,
+    fontWeight
+  } = fontFace;
+  const displayVariantName = variantName || `${fontWeight} ${fontStyle}`;
+  return createElement("div", {
+    className: "font-library-modal__font-variant"
+  }, createElement(VStack, {
+    spacing: 1
+  }, createElement(HStack, {
+    justify: "flex-start",
+    alignment: "top"
+  }, !!actionHandler ? actionHandler : createElement(CheckboxControl, {
+    checked: checked,
+    onChange: onClick
+  }), typeof displayVariantName === 'string' ? createElement(Text, null, displayVariantName) : displayVariantName), createElement("div", {
+    className: "font-library-modal__font-variant_demo-wrapper"
+  }, createElement(FontFaceDemo, {
+    fontFace: fontFace,
+    text: text
+  }))));
+}
+export default FontVariant;
+//# sourceMappingURL=font-variant.js.map