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

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

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _compose = require("@wordpress/compose");
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+var _tabLayout = _interopRequireDefault(require("./tab-layout"));
+var _context = require("./context");
+var _fontsGrid = _interopRequireDefault(require("./fonts-grid"));
+var _fontCard = _interopRequireDefault(require("./font-card"));
+var _filterFonts = _interopRequireDefault(require("./utils/filter-fonts"));
+var _collectionFontDetails = _interopRequireDefault(require("./collection-font-details"));
+var _toggleFont = require("./utils/toggleFont");
+var _fontsOutline = require("./utils/fonts-outline");
+var _googleFontsConfirmDialog = _interopRequireDefault(require("./google-fonts-confirm-dialog"));
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const DEFAULT_CATEGORY = {
+  id: 'all',
+  name: (0, _i18n.__)('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] = (0, _element.useState)(null);
+  const [fontsToInstall, setFontsToInstall] = (0, _element.useState)([]);
+  const [filters, setFilters] = (0, _element.useState)({});
+  const [renderConfirmDialog, setRenderConfirmDialog] = (0, _element.useState)(requiresPermission && !getGoogleFontsPermissionFromStorage());
+  const {
+    collections,
+    getFontCollection
+  } = (0, _element.useContext)(_context.FontLibraryContext);
+  const selectedCollection = collections.find(collection => collection.id === id);
+  (0, _element.useEffect)(() => {
+    const handleStorage = () => {
+      setRenderConfirmDialog(requiresPermission && !getGoogleFontsPermissionFromStorage());
+    };
+    handleStorage();
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, [id, requiresPermission]);
+  (0, _element.useEffect)(() => {
+    getFontCollection(id);
+    resetFilters();
+  }, [id, getFontCollection]);
+  (0, _element.useEffect)(() => {
+    setSelectedFont(null);
+  }, [id]);
+  const collectionFonts = (0, _element.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 = (0, _element.useMemo)(() => (0, _filterFonts.default)(collectionFonts, filters), [collectionFonts, filters]);
+  const handleCategoryFilter = category => {
+    setFilters({
+      ...filters,
+      category
+    });
+  };
+  const handleUpdateSearchInput = value => {
+    setFilters({
+      ...filters,
+      search: value
+    });
+  };
+  const debouncedUpdateSearchInput = (0, _compose.debounce)(handleUpdateSearchInput, 300);
+  const resetFilters = () => {
+    setFilters({});
+  };
+  const resetSearch = () => {
+    setFilters({
+      ...filters,
+      search: ''
+    });
+  };
+  const handleUnselectFont = () => {
+    setSelectedFont(null);
+  };
+  const handleToggleVariant = (font, face) => {
+    const newFontsToInstall = (0, _toggleFont.toggleFont)(font, face, fontsToInstall);
+    setFontsToInstall(newFontsToInstall);
+  };
+  const fontToInstallOutline = (0, _fontsOutline.getFontsOutline)(fontsToInstall);
+  const resetFontsToInstall = () => {
+    setFontsToInstall([]);
+  };
+  return (0, _element.createElement)(_tabLayout.default, {
+    title: !selectedFont ? selectedCollection.name : selectedFont.name,
+    description: !selectedFont ? selectedCollection.description : (0, _i18n.__)('Select font variants to install.'),
+    handleBack: !!selectedFont && handleUnselectFont,
+    footer: fontsToInstall.length > 0 && (0, _element.createElement)(Footer, {
+      fontsToInstall: fontsToInstall,
+      resetFontsToInstall: resetFontsToInstall
+    })
+  }, renderConfirmDialog && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 8
+  }), (0, _element.createElement)(_googleFontsConfirmDialog.default, null)), !renderConfirmDialog && !selectedCollection.data && (0, _element.createElement)(_components.Spinner, null), !renderConfirmDialog && !selectedFont && (0, _element.createElement)(_components.Flex, null, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.__experimentalInputControl, {
+    value: filters.search,
+    placeholder: (0, _i18n.__)('Font name…'),
+    label: (0, _i18n.__)('Search'),
+    onChange: debouncedUpdateSearchInput,
+    prefix: (0, _element.createElement)(_components.Icon, {
+      icon: _icons.search
+    }),
+    suffix: filters?.search ? (0, _element.createElement)(_components.Icon, {
+      icon: _icons.closeSmall,
+      onClick: resetSearch
+    }) : null
+  })), (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.SelectControl, {
+    label: (0, _i18n.__)('Category'),
+    value: filters.category,
+    onChange: handleCategoryFilter
+  }, categories && categories.map(category => (0, _element.createElement)("option", {
+    value: category.id,
+    key: category.id
+  }, category.name))))), (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 4
+  }), !renderConfirmDialog && !selectedCollection?.data?.fontFamilies && (0, _element.createElement)(_components.Spinner, null), !renderConfirmDialog && !!selectedCollection?.data?.fontFamilies?.length && !fonts.length && (0, _element.createElement)(_components.__experimentalText, null, (0, _i18n.__)('No fonts found. Try with a different seach term')), !renderConfirmDialog && selectedFont && (0, _element.createElement)(_collectionFontDetails.default, {
+    font: selectedFont,
+    handleToggleVariant: handleToggleVariant,
+    fontToInstallOutline: fontToInstallOutline
+  }), !renderConfirmDialog && !selectedFont && (0, _element.createElement)(_fontsGrid.default, null, fonts.map(font => (0, _element.createElement)(_fontCard.default, {
+    key: font.slug,
+    font: font,
+    onClick: () => {
+      setSelectedFont(font);
+    }
+  }))));
+}
+function Footer({
+  fontsToInstall,
+  resetFontsToInstall
+}) {
+  const {
+    installFonts,
+    isInstalling
+  } = (0, _element.useContext)(_context.FontLibraryContext);
+  const handleInstall = async () => {
+    await installFonts(fontsToInstall);
+    resetFontsToInstall();
+  };
+  return (0, _element.createElement)(_components.Flex, {
+    justify: "flex-end"
+  }, (0, _element.createElement)(_components.Button, {
+    variant: "primary",
+    onClick: handleInstall,
+    isBusy: isInstalling,
+    disabled: isInstalling
+  }, (0, _i18n.__)('Install')));
+}
+var _default = FontCollection;
+exports.default = _default;
+//# sourceMappingURL=font-collection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_components","_compose","_i18n","_icons","_tabLayout","_interopRequireDefault","_context","_fontsGrid","_fontCard","_filterFonts","_collectionFontDetails","_toggleFont","_fontsOutline","_googleFontsConfirmDialog","DEFAULT_CATEGORY","id","name","__","FontCollection","_selectedCollection$d2","requiresPermission","getGoogleFontsPermissionFromStorage","window","localStorage","getItem","selectedFont","setSelectedFont","useState","fontsToInstall","setFontsToInstall","filters","setFilters","renderConfirmDialog","setRenderConfirmDialog","collections","getFontCollection","useContext","FontLibraryContext","selectedCollection","find","collection","useEffect","handleStorage","addEventListener","removeEventListener","resetFilters","collectionFonts","useMemo","_selectedCollection$d","data","fontFamilies","collectionCategories","categories","fonts","filterFonts","handleCategoryFilter","category","handleUpdateSearchInput","value","search","debouncedUpdateSearchInput","debounce","resetSearch","handleUnselectFont","handleToggleVariant","font","face","newFontsToInstall","toggleFont","fontToInstallOutline","getFontsOutline","resetFontsToInstall","createElement","default","title","description","handleBack","footer","length","Footer","Fragment","__experimentalSpacer","margin","Spinner","Flex","FlexItem","__experimentalInputControl","placeholder","label","onChange","prefix","Icon","icon","suffix","closeSmall","onClick","SelectControl","map","key","__experimentalText","slug","installFonts","isInstalling","handleInstall","justify","Button","variant","isBusy","disabled","_default","exports"],"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/components/global-styles/font-library-modal/font-demo.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _context = require("./context");
+var _previewStyles = require("./utils/preview-styles");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+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 = (0, _element.useRef)(null);
+  const [isIntersecting, setIsIntersecting] = (0, _element.useState)(false);
+  const [isAssetLoaded, setIsAssetLoaded] = (0, _element.useState)(false);
+  const {
+    loadFontFaceAsset
+  } = (0, _element.useContext)(_context.FontLibraryContext);
+  const previewUrl = customPreviewUrl !== null && customPreviewUrl !== void 0 ? customPreviewUrl : getPreviewUrl(fontFace);
+  const isPreviewImage = previewUrl && previewUrl.match(/\.(png|jpg|jpeg|gif|svg)$/i);
+  const faceStyles = (0, _previewStyles.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'
+  };
+  (0, _element.useEffect)(() => {
+    const observer = new window.IntersectionObserver(([entry]) => {
+      setIsIntersecting(entry.isIntersecting);
+    }, {});
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref]);
+  (0, _element.useEffect)(() => {
+    const loadAsset = async () => {
+      if (isIntersecting) {
+        if (!isPreviewImage && fontFace.src) {
+          await loadFontFaceAsset(fontFace);
+        }
+        setIsAssetLoaded(true);
+      }
+    };
+    loadAsset();
+  }, [fontFace, isIntersecting, loadFontFaceAsset]);
+  return (0, _element.createElement)("div", {
+    ref: ref
+  }, isPreviewImage ? (0, _element.createElement)("img", {
+    src: previewUrl,
+    loading: "lazy",
+    alt: text,
+    style: imageDemoStyle
+  }) : (0, _element.createElement)(_components.__experimentalText, {
+    style: textDemoStyle
+  }, text));
+}
+var _default = FontFaceDemo;
+exports.default = _default;
+//# sourceMappingURL=font-demo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_components","_context","_previewStyles","getPreviewUrl","fontFace","preview","src","Array","isArray","FontFaceDemo","customPreviewUrl","text","style","ref","useRef","isIntersecting","setIsIntersecting","useState","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","useContext","FontLibraryContext","previewUrl","isPreviewImage","match","faceStyles","getFacePreviewStyle","textDemoStyle","whiteSpace","flexShrink","fontSize","opacity","transition","imageDemoStyle","height","width","useEffect","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","createElement","loading","alt","__experimentalText","_default","exports","default"],"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/components/global-styles/font-library-modal/font-variant.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _fontDemo = _interopRequireDefault(require("./font-demo"));
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function FontVariant({
+  fontFace,
+  variantName,
+  checked,
+  onClick,
+  text,
+  actionHandler
+}) {
+  const {
+    fontStyle,
+    fontWeight
+  } = fontFace;
+  const displayVariantName = variantName || `${fontWeight} ${fontStyle}`;
+  return (0, _element.createElement)("div", {
+    className: "font-library-modal__font-variant"
+  }, (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 1
+  }, (0, _element.createElement)(_components.__experimentalHStack, {
+    justify: "flex-start",
+    alignment: "top"
+  }, !!actionHandler ? actionHandler : (0, _element.createElement)(_components.CheckboxControl, {
+    checked: checked,
+    onChange: onClick
+  }), typeof displayVariantName === 'string' ? (0, _element.createElement)(_components.__experimentalText, null, displayVariantName) : displayVariantName), (0, _element.createElement)("div", {
+    className: "font-library-modal__font-variant_demo-wrapper"
+  }, (0, _element.createElement)(_fontDemo.default, {
+    fontFace: fontFace,
+    text: text
+  }))));
+}
+var _default = FontVariant;
+exports.default = _default;
+//# sourceMappingURL=font-variant.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_fontDemo","_interopRequireDefault","FontVariant","fontFace","variantName","checked","onClick","text","actionHandler","fontStyle","fontWeight","displayVariantName","_element","createElement","className","__experimentalVStack","spacing","__experimentalHStack","justify","alignment","CheckboxControl","onChange","__experimentalText","default","_default","exports"],"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":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAUA,IAAAC,SAAA,GAAAC,sBAAA,CAAAF,OAAA;AAbA;AACA;AACA;;AAQA;AACA;AACA;;AAGA,SAASG,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,OACC,IAAAG,QAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAkC,GAChD,IAAAF,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,OAAO,EAAG;EAAG,GACpB,IAAAJ,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAmB,oBAAM;IAACC,OAAO,EAAC,YAAY;IAACC,SAAS,EAAC;EAAK,GACzC,CAAC,CAAEX,aAAa,GACjBA,aAAa,GAEb,IAAAI,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAsB,eAAe;IACff,OAAO,EAAGA,OAAS;IACnBgB,QAAQ,EAAGf;EAAS,CACpB,CACD,EACC,OAAOK,kBAAkB,KAAK,QAAQ,GACvC,IAAAC,QAAA,CAAAC,aAAA,EAACf,WAAA,CAAAwB,kBAAI,QAAGX,kBAA0B,CAAC,GAEnCA,kBAEM,CAAC,EACT,IAAAC,QAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA+C,GAC7D,IAAAF,QAAA,CAAAC,aAAA,EAACb,SAAA,CAAAuB,OAAY;IAACpB,QAAQ,EAAGA,QAAU;IAACI,IAAI,EAAGA;EAAM,CAAE,CAC/C,CACE,CACJ,CAAC;AAER;AAAC,IAAAiB,QAAA,GAEctB,WAAW;AAAAuB,OAAA,CAAAF,OAAA,GAAAC,QAAA"}

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+/**
+ * WordPress dependencies
+ */
+
+function FontsGrid({
+  title,
+  children,
+  pageSize = 32
+}) {
+  const [lastItem, setLastItem] = (0, _element.useState)(null);
+  const [page, setPage] = (0, _element.useState)(1);
+  const itemsLimit = page * pageSize;
+  const items = children.slice(0, itemsLimit);
+  (0, _element.useEffect)(() => {
+    if (lastItem) {
+      const observer = new window.IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting) {
+          setPage(prevPage => prevPage + 1);
+        }
+      });
+      observer.observe(lastItem);
+      return () => observer.disconnect();
+    }
+  }, [lastItem]);
+  return (0, _element.createElement)("div", {
+    className: "font-library-modal__fonts-grid"
+  }, (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 0
+  }, title && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalText, {
+    className: "font-library-modal__subtitle"
+  }, title), (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 2
+  })), (0, _element.createElement)("div", {
+    className: "font-library-modal__fonts-grid__main"
+  }, items.map((child, i) => {
+    if (i === itemsLimit - 1) {
+      return (0, _element.createElement)("div", {
+        ref: setLastItem
+      }, child);
+    }
+    return child;
+  }))));
+}
+var _default = FontsGrid;
+exports.default = _default;
+//# sourceMappingURL=fonts-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_components","FontsGrid","title","children","pageSize","lastItem","setLastItem","useState","page","setPage","itemsLimit","items","slice","useEffect","observer","window","IntersectionObserver","entry","isIntersecting","prevPage","observe","disconnect","createElement","className","__experimentalVStack","spacing","Fragment","__experimentalText","__experimentalSpacer","margin","map","child","i","ref","_default","exports","default"],"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":";;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AALA,IAAAC,WAAA,GAAAD,OAAA;AAHA;AACA;AACA;;AAQA,SAASE,SAASA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ,GAAG;AAAG,CAAC,EAAG;EACxD,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAClD,MAAM,CAAEC,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAF,iBAAQ,EAAE,CAAE,CAAC;EACvC,MAAMG,UAAU,GAAGF,IAAI,GAAGJ,QAAQ;EAClC,MAAMO,KAAK,GAAGR,QAAQ,CAACS,KAAK,CAAE,CAAC,EAAEF,UAAW,CAAC;EAE7C,IAAAG,kBAAS,EAAE,MAAM;IAChB,IAAKR,QAAQ,EAAG;MACf,MAAMS,QAAQ,GAAG,IAAIC,MAAM,CAACC,oBAAoB,CAAE,CAAE,CAAEC,KAAK,CAAE,KAAM;QAClE,IAAKA,KAAK,CAACC,cAAc,EAAG;UAC3BT,OAAO,CAAIU,QAAQ,IAAMA,QAAQ,GAAG,CAAE,CAAC;QACxC;MACD,CAAE,CAAC;MAEHL,QAAQ,CAACM,OAAO,CAAEf,QAAS,CAAC;MAE5B,OAAO,MAAMS,QAAQ,CAACO,UAAU,CAAC,CAAC;IACnC;EACD,CAAC,EAAE,CAAEhB,QAAQ,CAAG,CAAC;EAEjB,OACC,IAAAP,QAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAC;EAAgC,GAC9C,IAAAzB,QAAA,CAAAwB,aAAA,EAACtB,WAAA,CAAAwB,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClBvB,KAAK,IACN,IAAAJ,QAAA,CAAAwB,aAAA,EAAAxB,QAAA,CAAA4B,QAAA,QACC,IAAA5B,QAAA,CAAAwB,aAAA,EAACtB,WAAA,CAAA2B,kBAAI;IAACJ,SAAS,EAAC;EAA8B,GAC3CrB,KACG,CAAC,EACP,IAAAJ,QAAA,CAAAwB,aAAA,EAACtB,WAAA,CAAA4B,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CACrB,CACF,EACD,IAAA/B,QAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAC;EAAsC,GAClDZ,KAAK,CAACmB,GAAG,CAAE,CAAEC,KAAK,EAAEC,CAAC,KAAM;IAC5B,IAAKA,CAAC,KAAKtB,UAAU,GAAG,CAAC,EAAG;MAC3B,OAAO,IAAAZ,QAAA,CAAAwB,aAAA;QAAKW,GAAG,EAAG3B;MAAa,GAAGyB,KAAY,CAAC;IAChD;IACA,OAAOA,KAAK;EACb,CAAE,CACE,CACE,CACJ,CAAC;AAER;AAAC,IAAAG,QAAA,GAEcjC,SAAS;AAAAkC,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+/**
+ * WordPress dependencies
+ */
+
+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 (0, _element.createElement)("div", {
+    className: "font-library__google-fonts-confirm"
+  }, (0, _element.createElement)(_components.Card, null, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalText, {
+    as: "h3"
+  }, "Connect to Google Fonts"), (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 6
+  }), (0, _element.createElement)(_components.__experimentalText, {
+    as: "p"
+  }, (0, _i18n.__)('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.')), (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 3
+  }), (0, _element.createElement)(_components.__experimentalText, {
+    as: "p"
+  }, (0, _i18n.__)('You can alternatively upload files directly on the Library tab.')), (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 6
+  }), (0, _element.createElement)(_components.Button, {
+    variant: "primary",
+    onClick: handleConfirm
+  }, (0, _i18n.__)('Allow access to Google Fonts')))));
+}
+var _default = GoogleFontsConfirmDialog;
+exports.default = _default;
+//# sourceMappingURL=google-fonts-confirm-dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_components","GoogleFontsConfirmDialog","handleConfirm","window","localStorage","setItem","dispatchEvent","Event","_element","createElement","className","Card","CardBody","__experimentalText","as","__experimentalSpacer","margin","__","Button","variant","onClick","_default","exports","default"],"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":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAUA,SAASE,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,OACC,IAAAC,QAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAClD,IAAAF,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAW,IAAI,QACJ,IAAAH,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAY,QAAQ,QACR,IAAAJ,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAI,GAAC,yBAA6B,CAAC,EAC5C,IAAAN,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,gOACD,CACK,CAAC,EACP,IAAAT,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,kBAAI;IAACC,EAAE,EAAC;EAAG,GACT,IAAAG,QAAE,EACH,iEACD,CACK,CAAC,EACP,IAAAT,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAe,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAR,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAkB,MAAM;IAACC,OAAO,EAAC,SAAS;IAACC,OAAO,EAAGlB;EAAe,GAChD,IAAAe,QAAE,EAAE,8BAA+B,CAC9B,CACC,CACL,CACF,CAAC;AAER;AAAC,IAAAI,QAAA,GAEcpB,wBAAwB;AAAAqB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

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

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _installedFonts = _interopRequireDefault(require("./installed-fonts"));
+var _fontCollection = _interopRequireDefault(require("./font-collection"));
+var _context = require("./context");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const INSTALLED_FONTS_TAB = {
+  name: 'installed-fonts',
+  title: (0, _i18n.__)('Library'),
+  className: 'installed-fonts'
+};
+const tabsFromCollections = collections => collections.map(({
+  id,
+  name
+}) => ({
+  name: id,
+  title: collections.length === 1 && id === 'default-font-collection' ? (0, _i18n.__)('Install Fonts') : name,
+  className: 'collection'
+}));
+function FontLibraryModal({
+  onRequestClose,
+  initialTabName = 'installed-fonts'
+}) {
+  const {
+    collections
+  } = (0, _element.useContext)(_context.FontLibraryContext);
+  const tabs = [INSTALLED_FONTS_TAB, ...tabsFromCollections(collections || [])];
+  return (0, _element.createElement)(_components.Modal, {
+    title: (0, _i18n.__)('Fonts'),
+    onRequestClose: onRequestClose,
+    isFullScreen: true,
+    className: "font-library-modal"
+  }, (0, _element.createElement)(_components.TabPanel, {
+    className: "font-library-modal__tab-panel",
+    initialTabName: initialTabName,
+    tabs: tabs
+  }, tab => {
+    switch (tab.name) {
+      case 'installed-fonts':
+        return (0, _element.createElement)(_installedFonts.default, null);
+      default:
+        return (0, _element.createElement)(_fontCollection.default, {
+          id: tab.name
+        });
+    }
+  }));
+}
+var _default = FontLibraryModal;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_i18n","_components","_installedFonts","_interopRequireDefault","_fontCollection","_context","INSTALLED_FONTS_TAB","name","title","__","className","tabsFromCollections","collections","map","id","length","FontLibraryModal","onRequestClose","initialTabName","useContext","FontLibraryContext","tabs","createElement","Modal","isFullScreen","TabPanel","tab","default","_default","exports"],"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":";;;;;;;AAKA,IAAAA,QAAA,GAAAC,OAAA;AAFA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAMA,IAAAG,eAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AAZA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAMO,mBAAmB,GAAG;EAC3BC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU,CAAC;EACtBC,SAAS,EAAE;AACZ,CAAC;AAED,MAAMC,mBAAmB,GAAKC,WAAW,IACxCA,WAAW,CAACC,GAAG,CAAE,CAAE;EAAEC,EAAE;EAAEP;AAAK,CAAC,MAAQ;EACtCA,IAAI,EAAEO,EAAE;EACRN,KAAK,EACJI,WAAW,CAACG,MAAM,KAAK,CAAC,IAAID,EAAE,KAAK,yBAAyB,GACzD,IAAAL,QAAE,EAAE,eAAgB,CAAC,GACrBF,IAAI;EACRG,SAAS,EAAE;AACZ,CAAC,CAAG,CAAC;AAEN,SAASM,gBAAgBA,CAAE;EAC1BC,cAAc;EACdC,cAAc,GAAG;AAClB,CAAC,EAAG;EACH,MAAM;IAAEN;EAAY,CAAC,GAAG,IAAAO,mBAAU,EAAEC,2BAAmB,CAAC;EAExD,MAAMC,IAAI,GAAG,CACZf,mBAAmB,EACnB,GAAGK,mBAAmB,CAAEC,WAAW,IAAI,EAAG,CAAC,CAC3C;EAED,OACC,IAAAd,QAAA,CAAAwB,aAAA,EAACrB,WAAA,CAAAsB,KAAK;IACLf,KAAK,EAAG,IAAAC,QAAE,EAAE,OAAQ,CAAG;IACvBQ,cAAc,EAAGA,cAAgB;IACjCO,YAAY;IACZd,SAAS,EAAC;EAAoB,GAE9B,IAAAZ,QAAA,CAAAwB,aAAA,EAACrB,WAAA,CAAAwB,QAAQ;IACRf,SAAS,EAAC,+BAA+B;IACzCQ,cAAc,EAAGA,cAAgB;IACjCG,IAAI,EAAGA;EAAM,GAETK,GAAG,IAAM;IACZ,QAASA,GAAG,CAACnB,IAAI;MAChB,KAAK,iBAAiB;QACrB,OAAO,IAAAT,QAAA,CAAAwB,aAAA,EAACpB,eAAA,CAAAyB,OAAc,MAAE,CAAC;MAC1B;QACC,OAAO,IAAA7B,QAAA,CAAAwB,aAAA,EAAClB,eAAA,CAAAuB,OAAc;UAACb,EAAE,EAAGY,GAAG,CAACnB;QAAM,CAAE,CAAC;IAC3C;EACD,CACS,CACJ,CAAC;AAEV;AAAC,IAAAqB,QAAA,GAEcZ,gBAAgB;AAAAa,OAAA,CAAAF,OAAA,GAAAC,QAAA"}