@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.1

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

@@ -0,0 +1,164 @@
+import { createElement, Fragment } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { useContext, useEffect, useState, useMemo } from '@wordpress/element';
+import { __experimentalSpacer as Spacer, __experimentalInputControl as InputControl, __experimentalText as Text, SelectControl, Spinner, Icon, FlexItem, Flex, Button } from '@wordpress/components';
+import { debounce } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { search, closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import TabLayout from './tab-layout';
+import { FontLibraryContext } from './context';
+import FontsGrid from './fonts-grid';
+import FontCard from './font-card';
+import filterFonts from './utils/filter-fonts';
+import CollectionFontDetails from './collection-font-details';
+import { toggleFont } from './utils/toggleFont';
+import { getFontsOutline } from './utils/fonts-outline';
+import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
+const DEFAULT_CATEGORY = {
+  id: 'all',
+  name: __('All')
+};
+function FontCollection({
+  id
+}) {
+  var _selectedCollection$d2;
+  const requiresPermission = id === 'default-font-collection';
+  const getGoogleFontsPermissionFromStorage = () => {
+    return window.localStorage.getItem('wp-font-library-default-font-collection-permission') === 'true';
+  };
+  const [selectedFont, setSelectedFont] = useState(null);
+  const [fontsToInstall, setFontsToInstall] = useState([]);
+  const [filters, setFilters] = useState({});
+  const [renderConfirmDialog, setRenderConfirmDialog] = useState(requiresPermission && !getGoogleFontsPermissionFromStorage());
+  const {
+    collections,
+    getFontCollection
+  } = useContext(FontLibraryContext);
+  const selectedCollection = collections.find(collection => collection.id === id);
+  useEffect(() => {
+    const handleStorage = () => {
+      setRenderConfirmDialog(requiresPermission && !getGoogleFontsPermissionFromStorage());
+    };
+    handleStorage();
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, [id, requiresPermission]);
+  useEffect(() => {
+    getFontCollection(id);
+    resetFilters();
+  }, [id, getFontCollection]);
+  useEffect(() => {
+    setSelectedFont(null);
+  }, [id]);
+  const collectionFonts = useMemo(() => {
+    var _selectedCollection$d;
+    return (_selectedCollection$d = selectedCollection?.data?.fontFamilies) !== null && _selectedCollection$d !== void 0 ? _selectedCollection$d : [];
+  }, [selectedCollection]);
+  const collectionCategories = (_selectedCollection$d2 = selectedCollection?.data?.categories) !== null && _selectedCollection$d2 !== void 0 ? _selectedCollection$d2 : [];
+  const categories = [DEFAULT_CATEGORY, ...collectionCategories];
+  const fonts = useMemo(() => filterFonts(collectionFonts, filters), [collectionFonts, filters]);
+  const handleCategoryFilter = category => {
+    setFilters({
+      ...filters,
+      category
+    });
+  };
+  const handleUpdateSearchInput = value => {
+    setFilters({
+      ...filters,
+      search: value
+    });
+  };
+  const debouncedUpdateSearchInput = debounce(handleUpdateSearchInput, 300);
+  const resetFilters = () => {
+    setFilters({});
+  };
+  const resetSearch = () => {
+    setFilters({
+      ...filters,
+      search: ''
+    });
+  };
+  const handleUnselectFont = () => {
+    setSelectedFont(null);
+  };
+  const handleToggleVariant = (font, face) => {
+    const newFontsToInstall = toggleFont(font, face, fontsToInstall);
+    setFontsToInstall(newFontsToInstall);
+  };
+  const fontToInstallOutline = getFontsOutline(fontsToInstall);
+  const resetFontsToInstall = () => {
+    setFontsToInstall([]);
+  };
+  return createElement(TabLayout, {
+    title: !selectedFont ? selectedCollection.name : selectedFont.name,
+    description: !selectedFont ? selectedCollection.description : __('Select font variants to install.'),
+    handleBack: !!selectedFont && handleUnselectFont,
+    footer: fontsToInstall.length > 0 && createElement(Footer, {
+      fontsToInstall: fontsToInstall,
+      resetFontsToInstall: resetFontsToInstall
+    })
+  }, renderConfirmDialog && createElement(Fragment, null, createElement(Spacer, {
+    margin: 8
+  }), createElement(GoogleFontsConfirmDialog, null)), !renderConfirmDialog && !selectedCollection.data && createElement(Spinner, null), !renderConfirmDialog && !selectedFont && createElement(Flex, null, createElement(FlexItem, null, createElement(InputControl, {
+    value: filters.search,
+    placeholder: __('Font name…'),
+    label: __('Search'),
+    onChange: debouncedUpdateSearchInput,
+    prefix: createElement(Icon, {
+      icon: search
+    }),
+    suffix: filters?.search ? createElement(Icon, {
+      icon: closeSmall,
+      onClick: resetSearch
+    }) : null
+  })), createElement(FlexItem, null, createElement(SelectControl, {
+    label: __('Category'),
+    value: filters.category,
+    onChange: handleCategoryFilter
+  }, categories && categories.map(category => createElement("option", {
+    value: category.id,
+    key: category.id
+  }, category.name))))), createElement(Spacer, {
+    margin: 4
+  }), !renderConfirmDialog && !selectedCollection?.data?.fontFamilies && createElement(Spinner, null), !renderConfirmDialog && !!selectedCollection?.data?.fontFamilies?.length && !fonts.length && createElement(Text, null, __('No fonts found. Try with a different seach term')), !renderConfirmDialog && selectedFont && createElement(CollectionFontDetails, {
+    font: selectedFont,
+    handleToggleVariant: handleToggleVariant,
+    fontToInstallOutline: fontToInstallOutline
+  }), !renderConfirmDialog && !selectedFont && createElement(FontsGrid, null, fonts.map(font => createElement(FontCard, {
+    key: font.slug,
+    font: font,
+    onClick: () => {
+      setSelectedFont(font);
+    }
+  }))));
+}
+function Footer({
+  fontsToInstall,
+  resetFontsToInstall
+}) {
+  const {
+    installFonts,
+    isInstalling
+  } = useContext(FontLibraryContext);
+  const handleInstall = async () => {
+    await installFonts(fontsToInstall);
+    resetFontsToInstall();
+  };
+  return createElement(Flex, {
+    justify: "flex-end"
+  }, createElement(Button, {
+    variant: "primary",
+    onClick: handleInstall,
+    isBusy: isInstalling,
+    disabled: isInstalling
+  }, __('Install')));
+}
+export default FontCollection;
+//# sourceMappingURL=font-collection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useContext","useEffect","useState","useMemo","__experimentalSpacer","Spacer","__experimentalInputControl","InputControl","__experimentalText","Text","SelectControl","Spinner","Icon","FlexItem","Flex","Button","debounce","__","search","closeSmall","TabLayout","FontLibraryContext","FontsGrid","FontCard","filterFonts","CollectionFontDetails","toggleFont","getFontsOutline","GoogleFontsConfirmDialog","DEFAULT_CATEGORY","id","name","FontCollection","_selectedCollection$d2","requiresPermission","getGoogleFontsPermissionFromStorage","window","localStorage","getItem","selectedFont","setSelectedFont","fontsToInstall","setFontsToInstall","filters","setFilters","renderConfirmDialog","setRenderConfirmDialog","collections","getFontCollection","selectedCollection","find","collection","handleStorage","addEventListener","removeEventListener","resetFilters","collectionFonts","_selectedCollection$d","data","fontFamilies","collectionCategories","categories","fonts","handleCategoryFilter","category","handleUpdateSearchInput","value","debouncedUpdateSearchInput","resetSearch","handleUnselectFont","handleToggleVariant","font","face","newFontsToInstall","fontToInstallOutline","resetFontsToInstall","createElement","title","description","handleBack","footer","length","Footer","Fragment","margin","placeholder","label","onChange","prefix","icon","suffix","onClick","map","key","slug","installFonts","isInstalling","handleInstall","justify","variant","isBusy","disabled"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-collection.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useState, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalInputControl as InputControl,\n\t__experimentalText as Text,\n\tSelectControl,\n\tSpinner,\n\tIcon,\n\tFlexItem,\n\tFlex,\n\tButton,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { search, closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport TabLayout from './tab-layout';\nimport { FontLibraryContext } from './context';\nimport FontsGrid from './fonts-grid';\nimport FontCard from './font-card';\nimport filterFonts from './utils/filter-fonts';\nimport CollectionFontDetails from './collection-font-details';\nimport { toggleFont } from './utils/toggleFont';\nimport { getFontsOutline } from './utils/fonts-outline';\nimport GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';\n\nconst DEFAULT_CATEGORY = {\n\tid: 'all',\n\tname: __( 'All' ),\n};\nfunction FontCollection( { id } ) {\n\tconst requiresPermission = id === 'default-font-collection';\n\n\tconst getGoogleFontsPermissionFromStorage = () => {\n\t\treturn (\n\t\t\twindow.localStorage.getItem(\n\t\t\t\t'wp-font-library-default-font-collection-permission'\n\t\t\t) === 'true'\n\t\t);\n\t};\n\n\tconst [ selectedFont, setSelectedFont ] = useState( null );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState( [] );\n\tconst [ filters, setFilters ] = useState( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { collections, getFontCollection } = useContext( FontLibraryContext );\n\tconst selectedCollection = collections.find(\n\t\t( collection ) => collection.id === id\n\t);\n\n\tuseEffect( () => {\n\t\tconst handleStorage = () => {\n\t\t\tsetRenderConfirmDialog(\n\t\t\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t\t\t);\n\t\t};\n\t\thandleStorage();\n\t\twindow.addEventListener( 'storage', handleStorage );\n\t\treturn () => window.removeEventListener( 'storage', handleStorage );\n\t}, [ id, requiresPermission ] );\n\n\tuseEffect( () => {\n\t\tgetFontCollection( id );\n\t\tresetFilters();\n\t}, [ id, getFontCollection ] );\n\n\tuseEffect( () => {\n\t\tsetSelectedFont( null );\n\t}, [ id ] );\n\n\tconst collectionFonts = useMemo(\n\t\t() => selectedCollection?.data?.fontFamilies ?? [],\n\t\t[ selectedCollection ]\n\t);\n\tconst collectionCategories = selectedCollection?.data?.categories ?? [];\n\n\tconst categories = [ DEFAULT_CATEGORY, ...collectionCategories ];\n\n\tconst fonts = useMemo(\n\t\t() => filterFonts( collectionFonts, filters ),\n\t\t[ collectionFonts, filters ]\n\t);\n\n\tconst handleCategoryFilter = ( category ) => {\n\t\tsetFilters( { ...filters, category } );\n\t};\n\n\tconst handleUpdateSearchInput = ( value ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t};\n\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst resetFilters = () => {\n\t\tsetFilters( {} );\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetFilters( { ...filters, search: '' } );\n\t};\n\n\tconst handleUnselectFont = () => {\n\t\tsetSelectedFont( null );\n\t};\n\n\tconst handleToggleVariant = ( font, face ) => {\n\t\tconst newFontsToInstall = toggleFont( font, face, fontsToInstall );\n\t\tsetFontsToInstall( newFontsToInstall );\n\t};\n\n\tconst fontToInstallOutline = getFontsOutline( fontsToInstall );\n\n\tconst resetFontsToInstall = () => {\n\t\tsetFontsToInstall( [] );\n\t};\n\n\treturn (\n\t\t<TabLayout\n\t\t\ttitle={\n\t\t\t\t! selectedFont ? selectedCollection.name : selectedFont.name\n\t\t\t}\n\t\t\tdescription={\n\t\t\t\t! selectedFont\n\t\t\t\t\t? selectedCollection.description\n\t\t\t\t\t: __( 'Select font variants to install.' )\n\t\t\t}\n\t\t\thandleBack={ !! selectedFont && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\tfontsToInstall.length > 0 && (\n\t\t\t\t\t<Footer\n\t\t\t\t\t\tfontsToInstall={ fontsToInstall }\n\t\t\t\t\t\tresetFontsToInstall={ resetFontsToInstall }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t{ renderConfirmDialog && (\n\t\t\t\t<>\n\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t<GoogleFontsConfirmDialog />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedCollection.data && (\n\t\t\t\t<Spinner />\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedFont && (\n\t\t\t\t<Flex>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\tplaceholder={ __( 'Font name…' ) }\n\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\tprefix={ <Icon icon={ search } /> }\n\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\tfilters?.search ? (\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\t\tonClick={ resetSearch }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tvalue={ category.id }\n\t\t\t\t\t\t\t\t\t\tkey={ category.id }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ category.name }\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t) }\n\n\t\t\t<Spacer margin={ 4 } />\n\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t! selectedCollection?.data?.fontFamilies && <Spinner /> }\n\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t!! selectedCollection?.data?.fontFamilies?.length &&\n\t\t\t\t! fonts.length && (\n\t\t\t\t\t<Text>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'No fonts found. Try with a different seach term'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && selectedFont && (\n\t\t\t\t<CollectionFontDetails\n\t\t\t\t\tfont={ selectedFont }\n\t\t\t\t\thandleToggleVariant={ handleToggleVariant }\n\t\t\t\t\tfontToInstallOutline={ fontToInstallOutline }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ! renderConfirmDialog && ! selectedFont && (\n\t\t\t\t<FontsGrid>\n\t\t\t\t\t{ fonts.map( ( font ) => (\n\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetSelectedFont( font );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</FontsGrid>\n\t\t\t) }\n\t\t</TabLayout>\n\t);\n}\n\nfunction Footer( { fontsToInstall, resetFontsToInstall } ) {\n\tconst { installFonts, isInstalling } = useContext( FontLibraryContext );\n\n\tconst handleInstall = async () => {\n\t\tawait installFonts( fontsToInstall );\n\t\tresetFontsToInstall();\n\t};\n\n\treturn (\n\t\t<Flex justify=\"flex-end\">\n\t\t\t<Button\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ handleInstall }\n\t\t\t\tisBusy={ isInstalling }\n\t\t\t\tdisabled={ isInstalling }\n\t\t\t>\n\t\t\t\t{ __( 'Install' ) }\n\t\t\t</Button>\n\t\t</Flex>\n\t);\n}\n\nexport default FontCollection;\n"],"mappings":"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"}

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

@@ -0,0 +1,79 @@
+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';
+import { getFacePreviewStyle } from './utils/preview-styles';
+function getPreviewUrl(fontFace) {
+  if (fontFace.preview) {
+    return fontFace.preview;
+  }
+  if (fontFace.src) {
+    return Array.isArray(fontFace.src) ? fontFace.src[0] : fontFace.src;
+  }
+}
+function FontFaceDemo({
+  customPreviewUrl,
+  fontFace,
+  text,
+  style = {}
+}) {
+  const ref = useRef(null);
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  const [isAssetLoaded, setIsAssetLoaded] = useState(false);
+  const {
+    loadFontFaceAsset
+  } = useContext(FontLibraryContext);
+  const previewUrl = customPreviewUrl !== null && customPreviewUrl !== void 0 ? customPreviewUrl : getPreviewUrl(fontFace);
+  const isPreviewImage = previewUrl && previewUrl.match(/\.(png|jpg|jpeg|gif|svg)$/i);
+  const faceStyles = getFacePreviewStyle(fontFace);
+  const textDemoStyle = {
+    whiteSpace: 'nowrap',
+    flexShrink: 0,
+    fontSize: '18px',
+    opacity: isAssetLoaded ? '1' : '0',
+    transition: 'opacity 0.3s ease-in-out',
+    ...faceStyles,
+    ...style
+  };
+  const imageDemoStyle = {
+    height: '23px',
+    width: 'auto'
+  };
+  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 (!isPreviewImage && fontFace.src) {
+          await loadFontFaceAsset(fontFace);
+        }
+        setIsAssetLoaded(true);
+      }
+    };
+    loadAsset();
+  }, [fontFace, isIntersecting, loadFontFaceAsset]);
+  return createElement("div", {
+    ref: ref
+  }, isPreviewImage ? createElement("img", {
+    src: previewUrl,
+    loading: "lazy",
+    alt: text,
+    style: imageDemoStyle
+  }) : createElement(Text, {
+    style: textDemoStyle
+  }, 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","getFacePreviewStyle","getPreviewUrl","fontFace","preview","src","Array","isArray","FontFaceDemo","customPreviewUrl","text","style","ref","isIntersecting","setIsIntersecting","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","previewUrl","isPreviewImage","match","faceStyles","textDemoStyle","whiteSpace","flexShrink","fontSize","opacity","transition","imageDemoStyle","height","width","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","createElement","loading","alt"],"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';\nimport { getFacePreviewStyle } from './utils/preview-styles';\n\nfunction getPreviewUrl( fontFace ) {\n\tif ( fontFace.preview ) {\n\t\treturn fontFace.preview;\n\t}\n\tif ( fontFace.src ) {\n\t\treturn Array.isArray( fontFace.src ) ? fontFace.src[ 0 ] : fontFace.src;\n\t}\n}\n\nfunction FontFaceDemo( { customPreviewUrl, 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\n\tconst previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );\n\tconst isPreviewImage =\n\t\tpreviewUrl && previewUrl.match( /\\.(png|jpg|jpeg|gif|svg)$/i );\n\n\tconst faceStyles = getFacePreviewStyle( fontFace );\n\tconst textDemoStyle = {\n\t\twhiteSpace: 'nowrap',\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...faceStyles,\n\t\t...style,\n\t};\n\tconst imageDemoStyle = {\n\t\theight: '23px',\n\t\twidth: 'auto',\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 ( ! isPreviewImage && fontFace.src ) {\n\t\t\t\t\tawait loadFontFaceAsset( fontFace );\n\t\t\t\t}\n\t\t\t\tsetIsAssetLoaded( true );\n\t\t\t}\n\t\t};\n\t\tloadAsset();\n\t}, [ fontFace, isIntersecting, loadFontFaceAsset ] );\n\n\treturn (\n\t\t<div ref={ ref }>\n\t\t\t{ isPreviewImage ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={ previewUrl }\n\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\talt={ text }\n\t\t\t\t\tstyle={ imageDemoStyle }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Text style={ textDemoStyle }>{ text }</Text>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontFaceDemo;\n"],"mappings":"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"}

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalText","Text","__experimentalVStack","VStack","__experimentalHStack","HStack","CheckboxControl","FontFaceDemo","FontVariant","fontFace","variantName","checked","onClick","text","actionHandler","fontStyle","fontWeight","displayVariantName","createElement","className","spacing","justify","alignment","onChange"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-variant.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tCheckboxControl,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport FontFaceDemo from './font-demo';\n\nfunction FontVariant( {\n\tfontFace,\n\tvariantName,\n\tchecked,\n\tonClick,\n\ttext,\n\tactionHandler,\n} ) {\n\tconst { fontStyle, fontWeight } = fontFace;\n\tconst displayVariantName = variantName || `${ fontWeight } ${ fontStyle }`;\n\n\treturn (\n\t\t<div className=\"font-library-modal__font-variant\">\n\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t<HStack justify=\"flex-start\" alignment=\"top\">\n\t\t\t\t\t{ !! actionHandler ? (\n\t\t\t\t\t\tactionHandler\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\t\tonChange={ onClick }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ typeof displayVariantName === 'string' ? (\n\t\t\t\t\t\t<Text>{ displayVariantName }</Text>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tdisplayVariantName\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t\t<div className=\"font-library-modal__font-variant_demo-wrapper\">\n\t\t\t\t\t<FontFaceDemo fontFace={ fontFace } text={ text } />\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default FontVariant;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,eAAe,QACT,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,YAAY,MAAM,aAAa;AAEtC,SAASC,WAAWA,CAAE;EACrBC,QAAQ;EACRC,WAAW;EACXC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAGP,QAAQ;EAC1C,MAAMQ,kBAAkB,GAAGP,WAAW,IAAK,GAAGM,UAAY,IAAID,SAAW,EAAC;EAE1E,OACCG,aAAA;IAAKC,SAAS,EAAC;EAAkC,GAChDD,aAAA,CAACf,MAAM;IAACiB,OAAO,EAAG;EAAG,GACpBF,aAAA,CAACb,MAAM;IAACgB,OAAO,EAAC,YAAY;IAACC,SAAS,EAAC;EAAK,GACzC,CAAC,CAAER,aAAa,GACjBA,aAAa,GAEbI,aAAA,CAACZ,eAAe;IACfK,OAAO,EAAGA,OAAS;IACnBY,QAAQ,EAAGX;EAAS,CACpB,CACD,EACC,OAAOK,kBAAkB,KAAK,QAAQ,GACvCC,aAAA,CAACjB,IAAI,QAAGgB,kBAA0B,CAAC,GAEnCA,kBAEM,CAAC,EACTC,aAAA;IAAKC,SAAS,EAAC;EAA+C,GAC7DD,aAAA,CAACX,YAAY;IAACE,QAAQ,EAAGA,QAAU;IAACI,IAAI,EAAGA;EAAM,CAAE,CAC/C,CACE,CACJ,CAAC;AAER;AAEA,eAAeL,WAAW"}

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

@@ -0,0 +1,47 @@
+import { createElement, Fragment } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack, __experimentalText as Text, __experimentalSpacer as Spacer } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+function FontsGrid({
+  title,
+  children,
+  pageSize = 32
+}) {
+  const [lastItem, setLastItem] = useState(null);
+  const [page, setPage] = useState(1);
+  const itemsLimit = page * pageSize;
+  const items = children.slice(0, itemsLimit);
+  useEffect(() => {
+    if (lastItem) {
+      const observer = new window.IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting) {
+          setPage(prevPage => prevPage + 1);
+        }
+      });
+      observer.observe(lastItem);
+      return () => observer.disconnect();
+    }
+  }, [lastItem]);
+  return createElement("div", {
+    className: "font-library-modal__fonts-grid"
+  }, createElement(VStack, {
+    spacing: 0
+  }, title && createElement(Fragment, null, createElement(Text, {
+    className: "font-library-modal__subtitle"
+  }, title), createElement(Spacer, {
+    margin: 2
+  })), createElement("div", {
+    className: "font-library-modal__fonts-grid__main"
+  }, items.map((child, i) => {
+    if (i === itemsLimit - 1) {
+      return createElement("div", {
+        ref: setLastItem
+      }, child);
+    }
+    return child;
+  }))));
+}
+export default FontsGrid;
+//# sourceMappingURL=fonts-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalVStack","VStack","__experimentalText","Text","__experimentalSpacer","Spacer","useState","useEffect","FontsGrid","title","children","pageSize","lastItem","setLastItem","page","setPage","itemsLimit","items","slice","observer","window","IntersectionObserver","entry","isIntersecting","prevPage","observe","disconnect","createElement","className","spacing","Fragment","margin","map","child","i","ref"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/fonts-grid.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\nfunction FontsGrid( { title, children, pageSize = 32 } ) {\n\tconst [ lastItem, setLastItem ] = useState( null );\n\tconst [ page, setPage ] = useState( 1 );\n\tconst itemsLimit = page * pageSize;\n\tconst items = children.slice( 0, itemsLimit );\n\n\tuseEffect( () => {\n\t\tif ( lastItem ) {\n\t\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\t\tif ( entry.isIntersecting ) {\n\t\t\t\t\tsetPage( ( prevPage ) => prevPage + 1 );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tobserver.observe( lastItem );\n\n\t\t\treturn () => observer.disconnect();\n\t\t}\n\t}, [ lastItem ] );\n\n\treturn (\n\t\t<div className=\"font-library-modal__fonts-grid\">\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t<div className=\"font-library-modal__fonts-grid__main\">\n\t\t\t\t\t{ items.map( ( child, i ) => {\n\t\t\t\t\t\tif ( i === itemsLimit - 1 ) {\n\t\t\t\t\t\t\treturn <div ref={ setLastItem }>{ child }</div>;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn child;\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default FontsGrid;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,QAAQ,EAAEC,SAAS,QAAQ,oBAAoB;AAExD,SAASC,SAASA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ,GAAG;AAAG,CAAC,EAAG;EACxD,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,GAAGP,QAAQ,CAAE,IAAK,CAAC;EAClD,MAAM,CAAEQ,IAAI,EAAEC,OAAO,CAAE,GAAGT,QAAQ,CAAE,CAAE,CAAC;EACvC,MAAMU,UAAU,GAAGF,IAAI,GAAGH,QAAQ;EAClC,MAAMM,KAAK,GAAGP,QAAQ,CAACQ,KAAK,CAAE,CAAC,EAAEF,UAAW,CAAC;EAE7CT,SAAS,CAAE,MAAM;IAChB,IAAKK,QAAQ,EAAG;MACf,MAAMO,QAAQ,GAAG,IAAIC,MAAM,CAACC,oBAAoB,CAAE,CAAE,CAAEC,KAAK,CAAE,KAAM;QAClE,IAAKA,KAAK,CAACC,cAAc,EAAG;UAC3BR,OAAO,CAAIS,QAAQ,IAAMA,QAAQ,GAAG,CAAE,CAAC;QACxC;MACD,CAAE,CAAC;MAEHL,QAAQ,CAACM,OAAO,CAAEb,QAAS,CAAC;MAE5B,OAAO,MAAMO,QAAQ,CAACO,UAAU,CAAC,CAAC;IACnC;EACD,CAAC,EAAE,CAAEd,QAAQ,CAAG,CAAC;EAEjB,OACCe,aAAA;IAAKC,SAAS,EAAC;EAAgC,GAC9CD,aAAA,CAAC1B,MAAM;IAAC4B,OAAO,EAAG;EAAG,GAClBpB,KAAK,IACNkB,aAAA,CAAAG,QAAA,QACCH,aAAA,CAACxB,IAAI;IAACyB,SAAS,EAAC;EAA8B,GAC3CnB,KACG,CAAC,EACPkB,aAAA,CAACtB,MAAM;IAAC0B,MAAM,EAAG;EAAG,CAAE,CACrB,CACF,EACDJ,aAAA;IAAKC,SAAS,EAAC;EAAsC,GAClDX,KAAK,CAACe,GAAG,CAAE,CAAEC,KAAK,EAAEC,CAAC,KAAM;IAC5B,IAAKA,CAAC,KAAKlB,UAAU,GAAG,CAAC,EAAG;MAC3B,OAAOW,aAAA;QAAKQ,GAAG,EAAGtB;MAAa,GAAGoB,KAAY,CAAC;IAChD;IACA,OAAOA,KAAK;EACb,CAAE,CACE,CACE,CACJ,CAAC;AAER;AAEA,eAAezB,SAAS"}

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

@@ -0,0 +1,33 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, Card, CardBody, __experimentalText as Text, __experimentalSpacer as Spacer } from '@wordpress/components';
+function GoogleFontsConfirmDialog() {
+  const handleConfirm = () => {
+    // eslint-disable-next-line no-undef
+    window.localStorage.setItem('wp-font-library-default-font-collection-permission', 'true');
+    window.dispatchEvent(new Event('storage'));
+  };
+  return createElement("div", {
+    className: "font-library__google-fonts-confirm"
+  }, createElement(Card, null, createElement(CardBody, null, createElement(Text, {
+    as: "h3"
+  }, "Connect to Google Fonts"), createElement(Spacer, {
+    margin: 6
+  }), createElement(Text, {
+    as: "p"
+  }, __('To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.')), createElement(Spacer, {
+    margin: 3
+  }), createElement(Text, {
+    as: "p"
+  }, __('You can alternatively upload files directly on the Library tab.')), createElement(Spacer, {
+    margin: 6
+  }), createElement(Button, {
+    variant: "primary",
+    onClick: handleConfirm
+  }, __('Allow access to Google Fonts')))));
+}
+export default GoogleFontsConfirmDialog;
+//# sourceMappingURL=google-fonts-confirm-dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__","Button","Card","CardBody","__experimentalText","Text","__experimentalSpacer","Spacer","GoogleFontsConfirmDialog","handleConfirm","window","localStorage","setItem","dispatchEvent","Event","createElement","className","as","margin","variant","onClick"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nfunction GoogleFontsConfirmDialog() {\n\tconst handleConfirm = () => {\n\t\t// eslint-disable-next-line no-undef\n\t\twindow.localStorage.setItem(\n\t\t\t'wp-font-library-default-font-collection-permission',\n\t\t\t'true'\n\t\t);\n\t\twindow.dispatchEvent( new Event( 'storage' ) );\n\t};\n\n\treturn (\n\t\t<div className=\"font-library__google-fonts-confirm\">\n\t\t\t<Card>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Text as=\"h3\">Connect to Google Fonts</Text>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'You can alternatively upload files directly on the Library tab.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Button variant=\"primary\" onClick={ handleConfirm }>\n\t\t\t\t\t\t{ __( 'Allow access to Google Fonts' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</div>\n\t);\n}\n\nexport default GoogleFontsConfirmDialog;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SACCC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAE9B,SAASC,wBAAwBA,CAAA,EAAG;EACnC,MAAMC,aAAa,GAAGA,CAAA,KAAM;IAC3B;IACAC,MAAM,CAACC,YAAY,CAACC,OAAO,CAC1B,oDAAoD,EACpD,MACD,CAAC;IACDF,MAAM,CAACG,aAAa,CAAE,IAAIC,KAAK,CAAE,SAAU,CAAE,CAAC;EAC/C,CAAC;EAED,OACCC,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAClDD,aAAA,CAACb,IAAI,QACJa,aAAA,CAACZ,QAAQ,QACRY,aAAA,CAACV,IAAI;IAACY,EAAE,EAAC;EAAI,GAAC,yBAA6B,CAAC,EAC5CF,aAAA,CAACR,MAAM;IAACW,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBH,aAAA,CAACV,IAAI;IAACY,EAAE,EAAC;EAAG,GACTjB,EAAE,CACH,gOACD,CACK,CAAC,EACPe,aAAA,CAACR,MAAM;IAACW,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBH,aAAA,CAACV,IAAI;IAACY,EAAE,EAAC;EAAG,GACTjB,EAAE,CACH,iEACD,CACK,CAAC,EACPe,aAAA,CAACR,MAAM;IAACW,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBH,aAAA,CAACd,MAAM;IAACkB,OAAO,EAAC,SAAS;IAACC,OAAO,EAAGX;EAAe,GAChDT,EAAE,CAAE,8BAA+B,CAC9B,CACC,CACL,CACF,CAAC;AAER;AAEA,eAAeQ,wBAAwB"}

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

@@ -0,0 +1,57 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Modal, TabPanel } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InstalledFonts from './installed-fonts';
+import FontCollection from './font-collection';
+import { FontLibraryContext } from './context';
+const INSTALLED_FONTS_TAB = {
+  name: 'installed-fonts',
+  title: __('Library'),
+  className: 'installed-fonts'
+};
+const tabsFromCollections = collections => collections.map(({
+  id,
+  name
+}) => ({
+  name: id,
+  title: collections.length === 1 && id === 'default-font-collection' ? __('Install Fonts') : name,
+  className: 'collection'
+}));
+function FontLibraryModal({
+  onRequestClose,
+  initialTabName = 'installed-fonts'
+}) {
+  const {
+    collections
+  } = useContext(FontLibraryContext);
+  const tabs = [INSTALLED_FONTS_TAB, ...tabsFromCollections(collections || [])];
+  return createElement(Modal, {
+    title: __('Fonts'),
+    onRequestClose: onRequestClose,
+    isFullScreen: true,
+    className: "font-library-modal"
+  }, createElement(TabPanel, {
+    className: "font-library-modal__tab-panel",
+    initialTabName: initialTabName,
+    tabs: tabs
+  }, tab => {
+    switch (tab.name) {
+      case 'installed-fonts':
+        return createElement(InstalledFonts, null);
+      default:
+        return createElement(FontCollection, {
+          id: tab.name
+        });
+    }
+  }));
+}
+export default FontLibraryModal;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__","Modal","TabPanel","useContext","InstalledFonts","FontCollection","FontLibraryContext","INSTALLED_FONTS_TAB","name","title","className","tabsFromCollections","collections","map","id","length","FontLibraryModal","onRequestClose","initialTabName","tabs","createElement","isFullScreen","tab"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Modal, TabPanel } from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InstalledFonts from './installed-fonts';\nimport FontCollection from './font-collection';\nimport { FontLibraryContext } from './context';\n\nconst INSTALLED_FONTS_TAB = {\n\tname: 'installed-fonts',\n\ttitle: __( 'Library' ),\n\tclassName: 'installed-fonts',\n};\n\nconst tabsFromCollections = ( collections ) =>\n\tcollections.map( ( { id, name } ) => ( {\n\t\tname: id,\n\t\ttitle:\n\t\t\tcollections.length === 1 && id === 'default-font-collection'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t\tclassName: 'collection',\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tinitialTabName = 'installed-fonts',\n} ) {\n\tconst { collections } = useContext( FontLibraryContext );\n\n\tconst tabs = [\n\t\tINSTALLED_FONTS_TAB,\n\t\t...tabsFromCollections( collections || [] ),\n\t];\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Fonts' ) }\n\t\t\tonRequestClose={ onRequestClose }\n\t\t\tisFullScreen\n\t\t\tclassName=\"font-library-modal\"\n\t\t>\n\t\t\t<TabPanel\n\t\t\t\tclassName=\"font-library-modal__tab-panel\"\n\t\t\t\tinitialTabName={ initialTabName }\n\t\t\t\ttabs={ tabs }\n\t\t\t>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tswitch ( tab.name ) {\n\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\t\treturn <InstalledFonts />;\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\treturn <FontCollection id={ tab.name } />;\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,KAAK,EAAEC,QAAQ,QAAQ,uBAAuB;AACvD,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,SAASC,kBAAkB,QAAQ,WAAW;AAE9C,MAAMC,mBAAmB,GAAG;EAC3BC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAET,EAAE,CAAE,SAAU,CAAC;EACtBU,SAAS,EAAE;AACZ,CAAC;AAED,MAAMC,mBAAmB,GAAKC,WAAW,IACxCA,WAAW,CAACC,GAAG,CAAE,CAAE;EAAEC,EAAE;EAAEN;AAAK,CAAC,MAAQ;EACtCA,IAAI,EAAEM,EAAE;EACRL,KAAK,EACJG,WAAW,CAACG,MAAM,KAAK,CAAC,IAAID,EAAE,KAAK,yBAAyB,GACzDd,EAAE,CAAE,eAAgB,CAAC,GACrBQ,IAAI;EACRE,SAAS,EAAE;AACZ,CAAC,CAAG,CAAC;AAEN,SAASM,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,cAAc,GAAG;AAClB,CAAC,EAAG;EACH,MAAM;IAAEN;EAAY,CAAC,GAAGT,UAAU,CAAEG,kBAAmB,CAAC;EAExD,MAAMa,IAAI,GAAG,CACZZ,mBAAmB,EACnB,GAAGI,mBAAmB,CAAEC,WAAW,IAAI,EAAG,CAAC,CAC3C;EAED,OACCQ,aAAA,CAACnB,KAAK;IACLQ,KAAK,EAAGT,EAAE,CAAE,OAAQ,CAAG;IACvBiB,cAAc,EAAGA,cAAgB;IACjCI,YAAY;IACZX,SAAS,EAAC;EAAoB,GAE9BU,aAAA,CAAClB,QAAQ;IACRQ,SAAS,EAAC,+BAA+B;IACzCQ,cAAc,EAAGA,cAAgB;IACjCC,IAAI,EAAGA;EAAM,GAETG,GAAG,IAAM;IACZ,QAASA,GAAG,CAACd,IAAI;MAChB,KAAK,iBAAiB;QACrB,OAAOY,aAAA,CAAChB,cAAc,MAAE,CAAC;MAC1B;QACC,OAAOgB,aAAA,CAACf,cAAc;UAACS,EAAE,EAAGQ,GAAG,CAACd;QAAM,CAAE,CAAC;IAC3C;EACD,CACS,CACJ,CAAC;AAEV;AAEA,eAAeQ,gBAAgB"}

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

@@ -0,0 +1,120 @@
+import { createElement, Fragment } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useContext, useEffect, useState } from '@wordpress/element';
+import { privateApis as componentsPrivateApis, __experimentalHStack as HStack, __experimentalSpacer as Spacer, Button, Spinner } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import TabLayout from './tab-layout';
+import { FontLibraryContext } from './context';
+import FontsGrid from './fonts-grid';
+import LibraryFontDetails from './library-font-details';
+import LibraryFontCard from './library-font-card';
+import LocalFonts from './local-fonts';
+import ConfirmDeleteDialog from './confirm-delete-dialog';
+import { unlock } from '../../../lock-unlock';
+const {
+  ProgressBar
+} = unlock(componentsPrivateApis);
+function InstalledFonts() {
+  const {
+    baseCustomFonts,
+    libraryFontSelected,
+    baseThemeFonts,
+    handleSetLibraryFontSelected,
+    refreshLibrary,
+    uninstallFont,
+    isResolvingLibrary
+  } = useContext(FontLibraryContext);
+  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+  const handleUnselectFont = () => {
+    handleSetLibraryFontSelected(null);
+  };
+  const handleSelectFont = font => {
+    handleSetLibraryFontSelected(font);
+  };
+  const handleConfirmUninstall = async () => {
+    const result = await uninstallFont(libraryFontSelected);
+    // If the font was succesfully uninstalled it is unselected
+    if (result) {
+      handleUnselectFont();
+    }
+    setIsConfirmDeleteOpen(false);
+  };
+  const handleUninstallClick = async () => {
+    setIsConfirmDeleteOpen(true);
+  };
+  const handleCancelUninstall = () => {
+    setIsConfirmDeleteOpen(false);
+  };
+  const tabDescription = !!libraryFontSelected ? __('Choose font variants. Keep in mind that too many variants could make your site slower.') : null;
+  const shouldDisplayDeleteButton = !!libraryFontSelected && libraryFontSelected?.source !== 'theme';
+  useEffect(() => {
+    refreshLibrary();
+  }, []);
+  return createElement(TabLayout, {
+    title: libraryFontSelected?.name || '',
+    description: tabDescription,
+    handleBack: !!libraryFontSelected && handleUnselectFont,
+    footer: createElement(Footer, {
+      shouldDisplayDeleteButton: shouldDisplayDeleteButton,
+      handleUninstallClick: handleUninstallClick
+    })
+  }, createElement(ConfirmDeleteDialog, {
+    font: libraryFontSelected,
+    isConfirmDeleteOpen: isConfirmDeleteOpen,
+    handleConfirmUninstall: handleConfirmUninstall,
+    handleCancelUninstall: handleCancelUninstall
+  }), !libraryFontSelected && createElement(Fragment, null, isResolvingLibrary && createElement(Spinner, null), baseCustomFonts.length > 0 && createElement(Fragment, null, createElement(Spacer, {
+    margin: 2
+  }), createElement(FontsGrid, null, baseCustomFonts.map(font => createElement(LibraryFontCard, {
+    font: font,
+    key: font.slug,
+    onClick: () => {
+      handleSelectFont(font);
+    }
+  }))), createElement(Spacer, {
+    margin: 8
+  })), baseThemeFonts.length > 0 && createElement(Fragment, null, createElement(FontsGrid, {
+    title: __('Theme Fonts')
+  }, baseThemeFonts.map(font => createElement(LibraryFontCard, {
+    font: font,
+    key: font.slug,
+    onClick: () => {
+      handleSelectFont(font);
+    }
+  })))), createElement(Spacer, {
+    margin: 8
+  }), createElement(LocalFonts, null)), libraryFontSelected && createElement(LibraryFontDetails, {
+    font: libraryFontSelected,
+    isConfirmDeleteOpen: isConfirmDeleteOpen,
+    handleConfirmUninstall: handleConfirmUninstall,
+    handleCancelUninstall: handleCancelUninstall
+  }));
+}
+function Footer({
+  shouldDisplayDeleteButton,
+  handleUninstallClick
+}) {
+  const {
+    saveFontFamilies,
+    fontFamiliesHasChanges,
+    isInstalling
+  } = useContext(FontLibraryContext);
+  return createElement(HStack, {
+    justify: "space-between"
+  }, isInstalling && createElement(ProgressBar, null), createElement("div", null, shouldDisplayDeleteButton && createElement(Button, {
+    variant: "tertiary",
+    onClick: handleUninstallClick
+  }, __('Delete'))), createElement(Button, {
+    disabled: !fontFamiliesHasChanges,
+    variant: "primary",
+    onClick: saveFontFamilies
+  }, __('Update')));
+}
+export default InstalledFonts;
+//# sourceMappingURL=installed-fonts.js.map