npm - @wordpress/edit-site - Versions diffs - 5.28.3 → 5.28.4 - Mend

@wordpress/edit-site 5.28.3 → 5.28.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"names":["useContext","useEffect","useState","useMemo","createInterpolateElement","__experimentalSpacer","Spacer","__experimentalInputControl","InputControl","__experimentalText","Text","__experimentalHStack","HStack","SelectControl","Spinner","Icon","FlexItem","Flex","Button","debounce","sprintf","__","_x","search","closeSmall","TabPanelLayout","FontLibraryContext","FontCard","filterFonts","CollectionFontDetails","toggleFont","getFontsOutline","GoogleFontsConfirmDialog","downloadFontFaceAssets","DEFAULT_CATEGORY","slug","name","FontCollection","_selectedCollection$c","requiresPermission","getGoogleFontsPermissionFromStorage","window","localStorage","getItem","selectedFont","setSelectedFont","fontsToInstall","setFontsToInstall","page","setPage","filters","setFilters","renderConfirmDialog","setRenderConfirmDialog","collections","getFontCollection","installFont","notice","setNotice","selectedCollection","find","collection","handleStorage","addEventListener","removeEventListener","fetchFontCollection","resetFilters","e","type","message","collectionFonts","_selectedCollection$f","font_families","collectionCategories","categories","fonts","pageSize","Math","floor","innerHeight","totalPages","ceil","length","itemsStart","itemsLimit","items","slice","handleCategoryFilter","category","handleUpdateSearchInput","value","debouncedUpdateSearchInput","resetSearch","handleUnselectFont","handleToggleVariant","font","face","newFontsToInstall","fontToInstallOutline","resetFontsToInstall","handleInstall","fontFamily","fontFace","Promise","all","map","src","file","error","footerComponent","createElement","InstallFooter","isDisabled","PaginationFooter","title","description","handleBack","footer","Fragment","margin","placeholder","label","onChange","prefix","icon","suffix","onClick","key","className","font_family_settings","justify","size","disabled","__experimentalIsFocusable","expanded","spacing","CurrenPageControl","options","Array","i","newPage","parseInt","__nextHasNoMarginBottom","isInstalling","variant","isBusy"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-collection.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseState,\n\tuseMemo,\n\tcreateInterpolateElement,\n} from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalInputControl as InputControl,\n\t__experimentalText as Text,\n\t__experimentalHStack as HStack,\n\tSelectControl,\n\tSpinner,\n\tIcon,\n\tFlexItem,\n\tFlex,\n\tButton,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { sprintf, __, _x } from '@wordpress/i18n';\nimport { search, closeSmall } from '@wordpress/icons';\n\n/\n Internal dependencies\n /\nimport TabPanelLayout from './tab-panel-layout';\nimport { FontLibraryContext } from './context';\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';\nimport { downloadFontFaceAssets } from './utils';\n\nconst DEFAULT_CATEGORY = {\n\tslug: 'all',\n\tname: _x( 'All', 'font categories' ),\n};\nfunction FontCollection( { slug } ) {\n\tconst requiresPermission = slug === 'google-fonts';\n\n\tconst getGoogleFontsPermissionFromStorage = () => {\n\t\treturn (\n\t\t\twindow.localStorage.getItem(\n\t\t\t\t'wp-font-library-google-fonts-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 [ page, setPage ] = useState( 1 );\n\tconst [ filters, setFilters ] = useState( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { collections, getFontCollection, installFont, notice, setNotice } =\n\t\tuseContext( FontLibraryContext );\n\tconst selectedCollection = collections.find(\n\t\t( collection ) => collection.slug === slug\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}, [ slug, requiresPermission ] );\n\n\tuseEffect( () => {\n\t\tconst fetchFontCollection = async () => {\n\t\t\ttry {\n\t\t\t\tawait getFontCollection( slug );\n\t\t\t\tresetFilters();\n\t\t\t} catch ( e ) {\n\t\t\t\tif ( ! notice ) {\n\t\t\t\t\tsetNotice( {\n\t\t\t\t\t\ttype: 'error',\n\t\t\t\t\t\tmessage: e?.message,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tfetchFontCollection();\n\t}, [ slug, getFontCollection, setNotice, notice ] );\n\n\tuseEffect( () => {\n\t\tsetSelectedFont( null );\n\t\tsetNotice( null );\n\t}, [ slug, setNotice ] );\n\n\tuseEffect( () => {\n\t\t// If the selected fonts change, reset the selected fonts to install\n\t\tsetFontsToInstall( [] );\n\t}, [ selectedFont ] );\n\n\tconst collectionFonts = useMemo(\n\t\t() => selectedCollection?.font_families ?? [],\n\t\t[ selectedCollection ]\n\t);\n\tconst collectionCategories = selectedCollection?.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\t// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px\n\t// The height of each font family item is 61px.\n\tconst pageSize = Math.floor( ( window.innerHeight - 417 ) / 61 );\n\tconst totalPages = Math.ceil( fonts.length / pageSize );\n\tconst itemsStart = ( page - 1 ) pageSize;\n\tconst itemsLimit = page * pageSize;\n\tconst items = fonts.slice( itemsStart, itemsLimit );\n\n\tconst handleCategoryFilter = ( category ) => {\n\t\tsetFilters( { ...filters, category } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleUpdateSearchInput = ( value ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst resetFilters = () => {\n\t\tsetFilters( {} );\n\t\tsetPage( 1 );\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetFilters( { ...filters, search: '' } );\n\t\tsetPage( 1 );\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\tconst handleInstall = async () => {\n\t\tsetNotice( null );\n\n\t\tconst fontFamily = fontsToInstall[ 0 ];\n\n\t\ttry {\n\t\t\tif ( fontFamily?.fontFace ) {\n\t\t\t\tawait Promise.all(\n\t\t\t\t\tfontFamily.fontFace.map( async ( fontFace ) => {\n\t\t\t\t\t\tif ( fontFace.src ) {\n\t\t\t\t\t\t\tfontFace.file = await downloadFontFaceAssets(\n\t\t\t\t\t\t\t\tfontFace.src\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);\n\t\t\t}\n\t\t} catch ( error ) {\n\t\t\t// If any of the fonts fail to download,\n\t\t\t// show an error notice and stop the request from being sent.\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: __(\n\t\t\t\t\t'Error installing the fonts, could not be downloaded.'\n\t\t\t\t),\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait installFont( fontFamily );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Fonts were installed successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: error.message,\n\t\t\t} );\n\t\t}\n\t\tresetFontsToInstall();\n\t};\n\n\tlet footerComponent = null;\n\tif ( selectedFont ) {\n\t\tfooterComponent = (\n\t\t\t<InstallFooter\n\t\t\t\thandleInstall={ handleInstall }\n\t\t\t\tisDisabled={ fontsToInstall.length === 0 }\n\t\t\t/>\n\t\t);\n\t} else if ( ! renderConfirmDialog && totalPages > 1 ) {\n\t\tfooterComponent = (\n\t\t\t<PaginationFooter\n\t\t\t\tpage={ page }\n\t\t\t\ttotalPages={ totalPages }\n\t\t\t\tsetPage={ setPage }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<TabPanelLayout\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\tnotice={ notice }\n\t\t\thandleBack={ !! selectedFont && handleUnselectFont }\n\t\t\tfooter={ footerComponent }\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 && ! 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.slug }\n\t\t\t\t\t\t\t\t\t\tkey={ category.slug }\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\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t! selectedCollection?.font_families &&\n\t\t\t\t! notice && <Spinner /> }\n\n\t\t\t{ ! renderConfirmDialog &&\n\t\t\t\t!! selectedCollection?.font_families?.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 search 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<div className=\"font-library-modal__fonts-grid__main\">\n\t\t\t\t\t{ items.map( ( font ) => (\n\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\tkey={ font.font_family_settings.slug }\n\t\t\t\t\t\t\tfont={ font.font_family_settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetSelectedFont( font.font_family_settings );\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</div>\n\t\t\t) }\n\t\t</TabPanelLayout>\n\t);\n}\n\nfunction PaginationFooter( { page, totalPages, setPage } ) {\n\treturn (\n\t\t<Flex justify=\"center\">\n\t\t\t<Button\n\t\t\t\tlabel={ __( 'First page' ) }\n\t\t\t\tsize=\"compact\"\n\t\t\t\tonClick={ () => setPage( 1 ) }\n\t\t\t\tdisabled={ page === 1 }\n\t\t\t\t__experimentalIsFocusable\n\t\t\t>\n\t\t\t\t<span>«</span>\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\tsize=\"compact\"\n\t\t\t\tonClick={ () => setPage( page - 1 ) }\n\t\t\t\tdisabled={ page === 1 }\n\t\t\t\t__experimentalIsFocusable\n\t\t\t>\n\t\t\t\t<span>‹</span>\n\t\t\t</Button>\n\t\t\t<HStack justify=\"flex-start\" expanded={ false } spacing={ 2 }>\n\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t// translators: %s: Total number of pages.\n\t\t\t\t\t\t_x( 'Page <CurrenPageControl /> of %s', 'paging' ),\n\t\t\t\t\t\ttotalPages\n\t\t\t\t\t),\n\t\t\t\t\t{\n\t\t\t\t\t\tCurrenPageControl: (\n\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\taria-label={ __( 'Current page' ) }\n\t\t\t\t\t\t\t\tvalue={ page }\n\t\t\t\t\t\t\t\toptions={ [ ...Array( totalPages ) ].map(\n\t\t\t\t\t\t\t\t\t( e, i ) => {\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\tlabel: i + 1,\n\t\t\t\t\t\t\t\t\t\t\tvalue: i + 1,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ ( newPage ) =>\n\t\t\t\t\t\t\t\t\tsetPage( parseInt( newPage ) )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsize={ 'compact' }\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\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) }\n\t\t\t</HStack>\n\t\t\t<Button\n\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\tsize=\"compact\"\n\t\t\t\tonClick={ () => setPage( page + 1 ) }\n\t\t\t\tdisabled={ page === totalPages }\n\t\t\t\t__experimentalIsFocusable\n\t\t\t>\n\t\t\t\t<span>›</span>\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tlabel={ __( 'Last page' ) }\n\t\t\t\tsize=\"compact\"\n\t\t\t\tonClick={ () => setPage( totalPages ) }\n\t\t\t\tdisabled={ page === totalPages }\n\t\t\t\t__experimentalIsFocusable\n\t\t\t>\n\t\t\t\t<span>»</span>\n\t\t\t</Button>\n\t\t</Flex>\n\t);\n}\n\nfunction InstallFooter( { handleInstall, isDisabled } ) {\n\tconst { isInstalling } = useContext( FontLibraryContext );\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={ isDisabled \|\| isInstalling }\n\t\t\t\t__experimentalIsFocusable\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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"}
1	+ {"version":3,"names":["useContext","useEffect","useState","useMemo","createInterpolateElement","__experimentalSpacer","Spacer","__experimentalInputControl","InputControl","__experimentalText","Text","__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalNavigatorToParentButton","NavigatorToParentButton","__experimentalHeading","Heading","Notice","SelectControl","Spinner","Icon","FlexItem","Flex","Button","DropdownMenu","debounce","sprintf","__","_x","search","closeSmall","moreVertical","chevronLeft","FontLibraryContext","FontCard","filterFonts","toggleFont","getFontsOutline","isFontFontFaceInOutline","GoogleFontsConfirmDialog","downloadFontFaceAssets","sortFontFaces","CollectionFontVariant","DEFAULT_CATEGORY","slug","name","LOCAL_STORAGE_ITEM","MIN_WINDOW_HEIGHT","FontCollection","_selectedCollection$c","requiresPermission","getGoogleFontsPermissionFromStorage","window","localStorage","getItem","selectedFont","setSelectedFont","fontsToInstall","setFontsToInstall","page","setPage","filters","setFilters","renderConfirmDialog","setRenderConfirmDialog","collections","getFontCollection","installFont","isInstalling","notice","setNotice","selectedCollection","find","collection","handleStorage","addEventListener","removeEventListener","revokeAccess","setItem","dispatchEvent","Event","fetchFontCollection","resetFilters","e","type","message","collectionFonts","_selectedCollection$f","font_families","collectionCategories","categories","fonts","windowHeight","Math","max","innerHeight","pageSize","floor","totalPages","ceil","length","itemsStart","itemsLimit","items","slice","handleCategoryFilter","category","handleUpdateSearchInput","value","debouncedUpdateSearchInput","resetSearch","handleToggleVariant","font","face","newFontsToInstall","fontToInstallOutline","resetFontsToInstall","handleInstall","fontFamily","fontFace","Promise","all","map","src","file","error","getSortedFontFaces","fontStyle","fontWeight","createElement","ActionsComponent","icon","label","popoverProps","position","controls","title","onClick","className","initialPath","path","justify","level","size","description","margin","placeholder","onChange","prefix","suffix","key","font_family_settings","navigatorPath","isSmall","Fragment","status","onRemove","spacing","i","selected","variant","isBusy","disabled","__experimentalIsFocusable","expanded","CurrenPageControl","options","Array","newPage","parseInt","__nextHasNoMarginBottom"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-collection.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseState,\n\tuseMemo,\n\tcreateInterpolateElement,\n} from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalInputControl as InputControl,\n\t__experimentalText as Text,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n\t__experimentalHeading as Heading,\n\tNotice,\n\tSelectControl,\n\tSpinner,\n\tIcon,\n\tFlexItem,\n\tFlex,\n\tButton,\n\tDropdownMenu,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { sprintf, __, _x } from '@wordpress/i18n';\nimport {\n\tsearch,\n\tcloseSmall,\n\tmoreVertical,\n\tchevronLeft,\n} from '@wordpress/icons';\n\n/\n Internal dependencies\n /\nimport { FontLibraryContext } from './context';\nimport FontCard from './font-card';\nimport filterFonts from './utils/filter-fonts';\nimport { toggleFont } from './utils/toggleFont';\nimport {\n\tgetFontsOutline,\n\tisFontFontFaceInOutline,\n} from './utils/fonts-outline';\nimport GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';\nimport { downloadFontFaceAssets } from './utils';\nimport { sortFontFaces } from './utils/sort-font-faces';\nimport CollectionFontVariant from './collection-font-variant';\n\nconst DEFAULT_CATEGORY = {\n\tslug: 'all',\n\tname: _x( 'All', 'font categories' ),\n};\n\nconst LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission';\nconst MIN_WINDOW_HEIGHT = 500;\n\nfunction FontCollection( { slug } ) {\n\tconst requiresPermission = slug === 'google-fonts';\n\n\tconst getGoogleFontsPermissionFromStorage = () => {\n\t\treturn window.localStorage.getItem( LOCAL_STORAGE_ITEM ) === 'true';\n\t};\n\n\tconst [ selectedFont, setSelectedFont ] = useState( null );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState( [] );\n\tconst [ page, setPage ] = useState( 1 );\n\tconst [ filters, setFilters ] = useState( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst {\n\t\tcollections,\n\t\tgetFontCollection,\n\t\tinstallFont,\n\t\tisInstalling,\n\t\tnotice,\n\t\tsetNotice,\n\t} = useContext( FontLibraryContext );\n\tconst selectedCollection = collections.find(\n\t\t( collection ) => collection.slug === slug\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}, [ slug, requiresPermission ] );\n\n\tconst revokeAccess = () => {\n\t\twindow.localStorage.setItem( LOCAL_STORAGE_ITEM, 'false' );\n\t\twindow.dispatchEvent( new Event( 'storage' ) );\n\t};\n\n\tuseEffect( () => {\n\t\tconst fetchFontCollection = async () => {\n\t\t\ttry {\n\t\t\t\tawait getFontCollection( slug );\n\t\t\t\tresetFilters();\n\t\t\t} catch ( e ) {\n\t\t\t\tif ( ! notice ) {\n\t\t\t\t\tsetNotice( {\n\t\t\t\t\t\ttype: 'error',\n\t\t\t\t\t\tmessage: e?.message,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tfetchFontCollection();\n\t}, [ slug, getFontCollection, setNotice, notice ] );\n\n\tuseEffect( () => {\n\t\tsetSelectedFont( null );\n\t\tsetNotice( null );\n\t}, [ slug, setNotice ] );\n\n\tuseEffect( () => {\n\t\t// If the selected fonts change, reset the selected fonts to install\n\t\tsetFontsToInstall( [] );\n\t}, [ selectedFont ] );\n\n\tconst collectionFonts = useMemo(\n\t\t() => selectedCollection?.font_families ?? [],\n\t\t[ selectedCollection ]\n\t);\n\tconst collectionCategories = selectedCollection?.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\t// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px\n\t// The height of each font family item is 61px.\n\tconst windowHeight = Math.max( window.innerHeight, MIN_WINDOW_HEIGHT );\n\tconst pageSize = Math.floor( ( windowHeight - 417 ) / 61 );\n\tconst totalPages = Math.ceil( fonts.length / pageSize );\n\tconst itemsStart = ( page - 1 ) pageSize;\n\tconst itemsLimit = page * pageSize;\n\tconst items = fonts.slice( itemsStart, itemsLimit );\n\n\tconst handleCategoryFilter = ( category ) => {\n\t\tsetFilters( { ...filters, category } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleUpdateSearchInput = ( value ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst resetFilters = () => {\n\t\tsetFilters( {} );\n\t\tsetPage( 1 );\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetFilters( { ...filters, search: '' } );\n\t\tsetPage( 1 );\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\tconst handleInstall = async () => {\n\t\tsetNotice( null );\n\n\t\tconst fontFamily = fontsToInstall[ 0 ];\n\n\t\ttry {\n\t\t\tif ( fontFamily?.fontFace ) {\n\t\t\t\tawait Promise.all(\n\t\t\t\t\tfontFamily.fontFace.map( async ( fontFace ) => {\n\t\t\t\t\t\tif ( fontFace.src ) {\n\t\t\t\t\t\t\tfontFace.file = await downloadFontFaceAssets(\n\t\t\t\t\t\t\t\tfontFace.src\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);\n\t\t\t}\n\t\t} catch ( error ) {\n\t\t\t// If any of the fonts fail to download,\n\t\t\t// show an error notice and stop the request from being sent.\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: __(\n\t\t\t\t\t'Error installing the fonts, could not be downloaded.'\n\t\t\t\t),\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait installFont( fontFamily );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Fonts were installed successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: error.message,\n\t\t\t} );\n\t\t}\n\t\tresetFontsToInstall();\n\t};\n\n\tconst getSortedFontFaces = ( fontFamily ) => {\n\t\tif ( ! fontFamily ) {\n\t\t\treturn [];\n\t\t}\n\t\tif ( ! fontFamily.fontFace \|\| ! fontFamily.fontFace.length ) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tfontFamily: fontFamily.fontFamily,\n\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\tfontWeight: '400',\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\t\treturn sortFontFaces( fontFamily.fontFace );\n\t};\n\n\tif ( renderConfirmDialog ) {\n\t\treturn <GoogleFontsConfirmDialog />;\n\t}\n\n\tconst ActionsComponent = () => {\n\t\tif ( slug !== 'google-fonts' \|\| renderConfirmDialog \|\| selectedFont ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<DropdownMenu\n\t\t\t\ticon={ moreVertical }\n\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tposition: 'bottom left',\n\t\t\t\t} }\n\t\t\t\tcontrols={ [\n\t\t\t\t\t{\n\t\t\t\t\t\ttitle: __( 'Revoke access to Google Fonts' ),\n\t\t\t\t\t\tonClick: revokeAccess,\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t/>\n\t\t);\n\t};\n\n\treturn (\n\t\t<div className=\"font-library-modal__tabpanel-layout\">\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"font-library-modal__tabpanel-layout\"\n\t\t\t>\n\t\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t\t\t{ selectedCollection.name }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t<ActionsComponent />\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<Text>{ selectedCollection.description }</Text>\n\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t<Flex>\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\t\tplaceholder={ __( 'Font name…' ) }\n\t\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\t\tprefix={ <Icon icon={ search } /> }\n\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\tfilters?.search ? (\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\t\t\tonClick={ resetSearch }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) : null\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\tvalue={ category.slug }\n\t\t\t\t\t\t\t\t\t\t\tkey={ category.slug }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ category.name }\n\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t</Flex>\n\n\t\t\t\t\t<Spacer margin={ 4 } />\n\n\t\t\t\t\t{ ! selectedCollection?.font_families && ! notice && (\n\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ !! selectedCollection?.font_families?.length &&\n\t\t\t\t\t\t! fonts.length && (\n\t\t\t\t\t\t\t<Text>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'No fonts found. Try with a different search term'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t<div className=\"font-library-modal__fonts-grid__main\">\n\t\t\t\t\t\t{ items.map( ( font ) => (\n\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\tkey={ font.font_family_settings.slug }\n\t\t\t\t\t\t\t\tfont={ font.font_family_settings }\n\t\t\t\t\t\t\t\tnavigatorPath={ '/fontFamily' }\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tsetSelectedFont(\n\t\t\t\t\t\t\t\t\t\tfont.font_family_settings\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</div>\n\t\t\t\t</NavigatorScreen>\n\n\t\t\t\t<NavigatorScreen path=\"/fontFamily\">\n\t\t\t\t\t<Flex justify=\"flex-start\">\n\t\t\t\t\t\t<NavigatorToParentButton\n\t\t\t\t\t\t\ticon={ chevronLeft }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetSelectedFont( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taria-label={ __( 'Navigate to the previous view' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-header\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ selectedFont?.name }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t</Flex>\n\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t<Text> { __( 'Select font variants to install.' ) } </Text>\n\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t{ getSortedFontFaces( selectedFont ).map(\n\t\t\t\t\t\t\t( face, i ) => (\n\t\t\t\t\t\t\t\t<CollectionFontVariant\n\t\t\t\t\t\t\t\t\tfont={ selectedFont }\n\t\t\t\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t\thandleToggleVariant={ handleToggleVariant }\n\t\t\t\t\t\t\t\t\tselected={ isFontFontFaceInOutline(\n\t\t\t\t\t\t\t\t\t\tselectedFont.slug,\n\t\t\t\t\t\t\t\t\t\tselectedFont.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline\n\t\t\t\t\t\t\t\t\t\tfontToInstallOutline\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t\t<Spacer margin={ 16 } />\n\t\t\t\t</NavigatorScreen>\n\t\t\t</NavigatorProvider>\n\n\t\t\t{ selectedFont && (\n\t\t\t\t<Flex\n\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\tclassName=\"font-library-modal__tabpanel-layout__footer\"\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ handleInstall }\n\t\t\t\t\t\tisBusy={ isInstalling }\n\t\t\t\t\t\tdisabled={ fontsToInstall.length === 0 \|\| isInstalling }\n\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Install' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</Flex>\n\t\t\t) }\n\n\t\t\t{ ! selectedFont && (\n\t\t\t\t<Flex\n\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\tclassName=\"font-library-modal__tabpanel-layout__footer\"\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ __( 'First page' ) }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ () => setPage( 1 ) }\n\t\t\t\t\t\tdisabled={ page === 1 }\n\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>«</span>\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ () => setPage( page - 1 ) }\n\t\t\t\t\t\tdisabled={ page === 1 }\n\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>‹</span>\n\t\t\t\t\t</Button>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t// translators: %s: Total number of pages.\n\t\t\t\t\t\t\t\t_x(\n\t\t\t\t\t\t\t\t\t'Page <CurrenPageControl /> of %s',\n\t\t\t\t\t\t\t\t\t'paging'\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tCurrenPageControl: (\n\t\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t\taria-label={ __( 'Current page' ) }\n\t\t\t\t\t\t\t\t\t\tvalue={ page }\n\t\t\t\t\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t\t\t\t\t...Array( totalPages ),\n\t\t\t\t\t\t\t\t\t\t].map( ( e, i ) => {\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\tlabel: i + 1,\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: i + 1,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newPage ) =>\n\t\t\t\t\t\t\t\t\t\t\tsetPage( parseInt( newPage ) )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsize={ 'compact' }\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ () => setPage( page + 1 ) }\n\t\t\t\t\t\tdisabled={ page === totalPages }\n\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>›</span>\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ __( 'Last page' ) }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ () => setPage( totalPages ) }\n\t\t\t\t\t\tdisabled={ page === totalPages }\n\t\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>»</span>\n\t\t\t\t\t</Button>\n\t\t\t\t</Flex>\n\t\t\t) }\n\t\t</div>\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 CHANGED Viewed

@@ -9,7 +9,7 @@ import { useContext, useEffect, useState, useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { FontLibraryContext } from './context';
-import { getFacePreviewStyle } from './utils/preview-styles';
+import { getFacePreviewStyle, getFamilyPreviewStyle } from './utils/preview-styles';
 function getPreviewUrl(fontFace) {
   if (fontFace.preview) {
     return fontFace.preview;
@@ -18,13 +18,34 @@ function getPreviewUrl(fontFace) {
     return Array.isArray(fontFace.src) ? fontFace.src[0] : fontFace.src;
   }
 }
-function FontFaceDemo({
-  customPreviewUrl,
-  fontFace,
-  text,
-  style = {}
+function getDisplayFontFace(font) {
+  // if this IS a font face return it
+  if (font.fontStyle || font.fontWeight) {
+    return font;
+  }
+  // if this is a font family with a collection of font faces
+  // return the first one that is normal and 400 OR just the first one
+  if (font.fontFace && font.fontFace.length) {
+    return font.fontFace.find(face => face.fontStyle === 'normal' && face.fontWeight === '400') || font.fontFace[0];
+  }
+  // This must be a font family with no font faces
+  // return a fake font face
+  return {
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontFamily: font.fontFamily,
+    fake: true
+  };
+}
+function FontDemo({
+  font,
+  text
 }) {
   const ref = useRef(null);
+  const fontFace = getDisplayFontFace(font);
+  const style = getFamilyPreviewStyle(font);
+  text = text || font.name;
+  const customPreviewUrl = font.preview;
   const [isIntersecting, setIsIntersecting] = useState(false);
   const [isAssetLoaded, setIsAssetLoaded] = useState(false);
   const {
@@ -37,8 +58,8 @@ function FontFaceDemo({
     fontSize: '18px',
     lineHeight: 1,
     opacity: isAssetLoaded ? '1' : '0',
-    ...faceStyles,
-    ...style
+    ...style,
+    ...faceStyles
   };
   useEffect(() => {
     const observer = new window.IntersectionObserver(([entry]) => {
@@ -70,5 +91,5 @@ function FontFaceDemo({
     className: "font-library-modal__font-variant_demo-text"
   }, text));
 }
-export default FontFaceDemo;
+export default FontDemo;
 //# sourceMappingURL=font-demo.js.map

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

	@@ -1 +1 @@
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","fontSize","lineHeight","opacity","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","createElement","loading","alt","className"],"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\tfontSize: '18px',\n\t\tlineHeight: 1,\n\t\topacity: isAssetLoaded ? '1' : '0',\n\t\t...~~faceStyles~~,\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 ( ! 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, isPreviewImage ] );\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\tclassName=\"font-library-modal__font-variant_demo-image\"\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Text\n\t\t\t\t\tstyle={ textDemoStyle }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-text\"\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</div>\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;AAC9C,~~SAASC~~,mBAAmB,~~QAAQ~~,wBAAwB;~~AAE5D~~,SAASC,aAAaA,CAAEC,QAAQ,EAAG;EAClC,IAAKA,QAAQ,CAACC,OAAO,EAAG;IACvB,OAAOD,QAAQ,CAACC,OAAO;EACxB;EACA,IAAKD,QAAQ,CAACE,GAAG,EAAG;IACnB,OAAOC,KAAK,CAACC,OAAO,CAAEJ,QAAQ,CAACE,GAAI,CAAC,GAAGF,QAAQ,CAACE,GAAG,CAAE,CAAC,CAAE,GAAGF,QAAQ,CAACE,GAAG;EACxE;AACD;AAEA,SAASG,~~YAAYA~~,~~CAAE~~;~~EAAEC~~,~~gBAAgB~~;~~EAAEN~~,QAAQ;~~EAAEO~~,IAAI;~~EAAEC~~,KAAK,~~GAAG~~,CAAC;~~AAAE~~,CAAC,EAAG;~~EACzE~~,MAAMC,GAAG,~~GAAGb~~,MAAM,CAAE,IAAK,CAAC;~~EAC1B~~,MAAM,~~CAAEc~~,cAAc,EAAEC,iBAAiB,CAAE,~~GAAGhB~~,QAAQ,CAAE,KAAM,CAAC;EAC/D,MAAM,~~CAAEiB~~,aAAa,EAAEC,gBAAgB,CAAE,~~GAAGlB~~,QAAQ,CAAE,KAAM,CAAC;EAC7D,MAAM;~~IAAEmB~~;EAAkB,CAAC,~~GAAGrB~~,UAAU,CAAEI,kBAAmB,CAAC;EAE9D,~~MAAMkB~~,UAAU,~~GAAGT~~,gBAAgB,aAAhBA,gBAAgB,cAAhBA,gBAAgB,~~GAAIP~~,aAAa,CAAEC,QAAS,CAAC;EAChE,~~MAAMgB~~,cAAc,GACnBD,UAAU,IAAIA,UAAU,CAACE,KAAK,CAAE,4BAA6B,CAAC;EAE/D,MAAMC,UAAU,~~GAAGpB~~,mBAAmB,~~CAAEE~~,QAAS,CAAC;EAClD,~~MAAMmB~~,aAAa,GAAG;IACrBC,QAAQ,EAAE,MAAM;IAChBC,UAAU,EAAE,CAAC;IACbC,OAAO,EAAEV,aAAa,GAAG,GAAG,GAAG,GAAG;IAClC,~~GAAGM~~,~~UAAU~~;~~IACb~~,~~GAAGV~~;EACJ,CAAC;~~EAEDd~~,SAAS,CAAE,MAAM;IAChB,~~MAAM6B~~,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;~~EAEZf~~,SAAS,CAAE,MAAM;IAChB,~~MAAMoC~~,SAAS,GAAG,MAAAA,CAAA,KAAY;MAC7B,IAAKpB,cAAc,EAAG;QACrB,IAAK,CAAEM,cAAc,~~IAAIhB~~,QAAQ,CAACE,GAAG,EAAG;UACvC,~~MAAMY~~,iBAAiB,~~CAAEd~~,QAAS,CAAC;QACpC;~~QACAa~~,gBAAgB,CAAE,IAAK,CAAC;MACzB;IACD,CAAC;IACDiB,SAAS,CAAC,CAAC;EACZ,CAAC,EAAE,~~CAAE9B~~,QAAQ,~~EAAEU~~,cAAc,EAAEI,iBAAiB,EAAEE,cAAc,CAAG,CAAC;EAEpE,OACCe,aAAA;~~IAAKtB~~,GAAG,EAAGA;EAAK,~~GACbO~~,cAAc,GACfe,aAAA;~~IACC7B~~,GAAG,~~EAAGa~~,UAAY;IAClBiB,OAAO,EAAC,MAAM;IACdC,GAAG,~~EAAG1B~~,IAAM;~~IACZ2B~~,SAAS,EAAC;EAA6C,CACvD,CAAC,GAEFH,aAAA,~~CAACvC~~,IAAI;~~IACJgB~~,KAAK,~~EAAGW~~,aAAe;IACvBe,SAAS,EAAC;EAA4C,~~GAEpD3B~~,IACG,CAEH,CAAC;AAER;AAEA,~~eAAeF~~,~~YAAY~~"}
1	+ {"version":3,"names":["__experimentalText","Text","useContext","useEffect","useState","useRef","FontLibraryContext","getFacePreviewStyle","getFamilyPreviewStyle","getPreviewUrl","fontFace","preview","src","Array","isArray","getDisplayFontFace","font","fontStyle","fontWeight","length","find","face","fontFamily","fake","FontDemo","text","ref","style","name","customPreviewUrl","isIntersecting","setIsIntersecting","isAssetLoaded","setIsAssetLoaded","loadFontFaceAsset","previewUrl","isPreviewImage","match","faceStyles","textDemoStyle","fontSize","lineHeight","opacity","observer","window","IntersectionObserver","entry","observe","current","disconnect","loadAsset","createElement","loading","alt","className"],"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 {\n\tgetFacePreviewStyle,\n\tgetFamilyPreviewStyle,\n} 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 getDisplayFontFace( font ) {\n\t// if this IS a font face return it\n\tif ( font.fontStyle \|\| font.fontWeight ) {\n\t\treturn font;\n\t}\n\t// if this is a font family with a collection of font faces\n\t// return the first one that is normal and 400 OR just the first one\n\tif ( font.fontFace && font.fontFace.length ) {\n\t\treturn (\n\t\t\tfont.fontFace.find(\n\t\t\t\t( face ) =>\n\t\t\t\t\tface.fontStyle === 'normal' && face.fontWeight === '400'\n\t\t\t) \|\| font.fontFace[ 0 ]\n\t\t);\n\t}\n\t// This must be a font family with no font faces\n\t// return a fake font face\n\treturn {\n\t\tfontStyle: 'normal',\n\t\tfontWeight: '400',\n\t\tfontFamily: font.fontFamily,\n\t\tfake: true,\n\t};\n}\n\nfunction FontDemo( { font, text } ) {\n\tconst ref = useRef( null );\n\n\tconst fontFace = getDisplayFontFace( font );\n\tconst style = getFamilyPreviewStyle( font );\n\ttext = text \|\| font.name;\n\tconst customPreviewUrl = font.preview;\n\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\tfontSize: '18px',\n\t\tlineHeight: 1,\n\t\topacity: isAssetLoaded ? '1' : '0',\n\t\t...style,\n\t\t...faceStyles,\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, isPreviewImage ] );\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\tclassName=\"font-library-modal__font-variant_demo-image\"\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Text\n\t\t\t\t\tstyle={ textDemoStyle }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-text\"\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontDemo;\n"],"mappings":"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"}

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

@@ -2,19 +2,19 @@ import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { Button, __experimentalConfirmDialog as ConfirmDialog, __experimentalHStack as HStack, __experimentalHeading as Heading, __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, __experimentalNavigatorToParentButton as NavigatorToParentButton, __experimentalUseNavigator as useNavigator, __experimentalSpacer as Spacer, __experimentalText as Text, __experimentalVStack as VStack, Flex, Notice, Spinner, privateApis as componentsPrivateApis } from '@wordpress/components';
 import { useContext, useEffect, useState } from '@wordpress/element';
-import { privateApis as componentsPrivateApis, __experimentalHStack as HStack, __experimentalSpacer as Spacer, __experimentalText as Text, Button, Spinner, FlexItem } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { chevronLeft } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import TabPanelLayout from './tab-panel-layout';
-import { FontLibraryContext } from './context';
-import LibraryFontDetails from './library-font-details';
-import LibraryFontCard from './library-font-card';
-import ConfirmDeleteDialog from './confirm-delete-dialog';
 import { unlock } from '../../../lock-unlock';
+import { FontLibraryContext } from './context';
+import FontCard from './font-card';
+import LibraryFontVariant from './library-font-variant';
+import { sortFontFaces } from './utils/sort-font-faces';
 const {
   ProgressBar
 } = unlock(componentsPrivateApis);
@@ -27,71 +27,67 @@ function InstalledFonts() {
     refreshLibrary,
     uninstallFontFamily,
     isResolvingLibrary,
+    isInstalling,
+    saveFontFamilies,
+    getFontFacesActivated,
+    fontFamiliesHasChanges,
     notice,
     setNotice
   } = useContext(FontLibraryContext);
   const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
-  const handleUnselectFont = () => {
-    handleSetLibraryFontSelected(null);
-  };
-  const handleSelectFont = font => {
-    handleSetLibraryFontSelected(font);
+  const shouldDisplayDeleteButton = !!libraryFontSelected && libraryFontSelected?.source !== 'theme';
+  const handleUninstallClick = () => {
+    setIsConfirmDeleteOpen(true);
   };
-  const handleConfirmUninstall = async () => {
-    setNotice(null);
-    try {
-      await uninstallFontFamily(libraryFontSelected);
-      setNotice({
-        type: 'success',
-        message: __('Font family uninstalled successfully.')
-      });
-      // If the font was succesfully uninstalled it is unselected.
-      handleUnselectFont();
-      setIsConfirmDeleteOpen(false);
-    } catch (error) {
-      setNotice({
-        type: 'error',
-        message: __('There was an error uninstalling the font family. ') + error.message
-      });
+  const getFontFacesToDisplay = font => {
+    if (!font) {
+      return [];
     }
+    if (!font.fontFace || !font.fontFace.length) {
+      return [{
+        fontFamily: font.fontFamily,
+        fontStyle: 'normal',
+        fontWeight: '400'
+      }];
+    }
+    return sortFontFaces(font.fontFace);
   };
-  const handleUninstallClick = async () => {
-    setIsConfirmDeleteOpen(true);
-  };
-  const handleCancelUninstall = () => {
-    setIsConfirmDeleteOpen(false);
+  const getFontCardVariantsText = font => {
+    const variantsInstalled = font?.fontFace?.length > 0 ? font.fontFace.length : 1;
+    const variantsActive = getFontFacesActivated(font.slug, font.source).length;
+    return sprintf( /* translators: 1: Active font variants, 2: Total font variants. */
+    __('%1$s/%2$s variants active'), variantsActive, variantsInstalled);
   };
-  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(() => {
-    handleSelectFont(libraryFontSelected);
+    handleSetLibraryFontSelected(libraryFontSelected);
     refreshLibrary();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return createElement(TabPanelLayout, {
-    title: libraryFontSelected?.name || '',
-    description: tabDescription,
-    notice: notice,
-    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(FlexItem, null, createElement(Spacer, {
-    margin: 2
-  }), createElement(Spinner, null), createElement(Spacer, {
+  return createElement("div", {
+    className: "font-library-modal__tabpanel-layout"
+  }, isResolvingLibrary && createElement(HStack, {
+    align: "center"
+  }, createElement(Spacer, null), createElement(Spinner, null), createElement(Spacer, null)), createElement(NavigatorProvider, {
+    initialPath: libraryFontSelected ? '/fontFamily' : '/'
+  }, createElement(NavigatorScreen, {
+    path: "/"
+  }, notice && createElement(Fragment, null, createElement(Spacer, {
+    margin: 1
+  }), createElement(Notice, {
+    status: notice.type,
+    onRemove: () => setNotice(null)
+  }, notice.message), createElement(Spacer, {
+    margin: 1
+  })), baseCustomFonts.length > 0 && createElement(Fragment, null, createElement(Text, {
+    className: "font-library-modal__subtitle"
+  }, __('Installed Fonts')), createElement(Spacer, {
     margin: 2
-  })), baseCustomFonts.length > 0 && createElement(Fragment, null, baseCustomFonts.map(font => createElement(LibraryFontCard, {
+  }), baseCustomFonts.map(font => createElement(FontCard, {
     font: font,
     key: font.slug,
+    navigatorPath: '/fontFamily',
+    variantsText: getFontCardVariantsText(font),
     onClick: () => {
-      handleSelectFont(font);
+      handleSetLibraryFontSelected(font);
     }
   })), createElement(Spacer, {
     margin: 8
@@ -99,42 +95,109 @@ function InstalledFonts() {
     className: "font-library-modal__subtitle"
   }, __('Theme Fonts')), createElement(Spacer, {
     margin: 2
-  }), baseThemeFonts.map(font => createElement(LibraryFontCard, {
+  }), baseThemeFonts.map(font => createElement(FontCard, {
     font: font,
     key: font.slug,
+    navigatorPath: '/fontFamily',
+    variantsText: getFontCardVariantsText(font),
     onClick: () => {
-      handleSelectFont(font);
+      handleSetLibraryFontSelected(font);
     }
   }))), createElement(Spacer, {
     margin: 16
-  })), libraryFontSelected && createElement(LibraryFontDetails, {
+  })), createElement(NavigatorScreen, {
+    path: "/fontFamily"
+  }, createElement(ConfirmDeleteDialog, {
     font: libraryFontSelected,
-    isConfirmDeleteOpen: isConfirmDeleteOpen,
-    handleConfirmUninstall: handleConfirmUninstall,
-    handleCancelUninstall: handleCancelUninstall
-  }));
-}
-function Footer({
-  shouldDisplayDeleteButton,
-  handleUninstallClick
-}) {
-  const {
-    saveFontFamilies,
-    fontFamiliesHasChanges,
-    isInstalling
-  } = useContext(FontLibraryContext);
-  return createElement(HStack, {
-    justify: "flex-end"
-  }, isInstalling && createElement(ProgressBar, null), createElement("div", null, shouldDisplayDeleteButton && createElement(Button, {
+    isOpen: isConfirmDeleteOpen,
+    setIsOpen: setIsConfirmDeleteOpen,
+    setNotice: setNotice,
+    uninstallFontFamily: uninstallFontFamily,
+    handleSetLibraryFontSelected: handleSetLibraryFontSelected
+  }), createElement(Flex, {
+    justify: "flex-start"
+  }, createElement(NavigatorToParentButton, {
+    icon: chevronLeft,
+    isSmall: true,
+    onClick: () => {
+      handleSetLibraryFontSelected(null);
+    },
+    "aria-label": __('Navigate to the previous view')
+  }), createElement(Heading, {
+    level: 2,
+    size: 13,
+    className: "edit-site-global-styles-header"
+  }, libraryFontSelected?.name)), notice && createElement(Fragment, null, createElement(Spacer, {
+    margin: 1
+  }), createElement(Notice, {
+    status: notice.type,
+    onRemove: () => setNotice(null)
+  }, notice.message), createElement(Spacer, {
+    margin: 1
+  })), createElement(Spacer, {
+    margin: 4
+  }), createElement(Text, null, __('Choose font variants. Keep in mind that too many variants could make your site slower.')), createElement(Spacer, {
+    margin: 4
+  }), createElement(VStack, {
+    spacing: 0
+  }, createElement(Spacer, {
+    margin: 8
+  }), getFontFacesToDisplay(libraryFontSelected).map((face, i) => createElement(LibraryFontVariant, {
+    font: libraryFontSelected,
+    face: face,
+    key: `face${i}`
+  }))))), createElement(HStack, {
+    justify: "flex-end",
+    className: "font-library-modal__tabpanel-layout__footer"
+  }, isInstalling && createElement(ProgressBar, null), shouldDisplayDeleteButton && createElement(Button, {
     isDestructive: true,
     variant: "tertiary",
     onClick: handleUninstallClick
-  }, __('Delete'))), createElement(Button, {
+  }, __('Delete')), createElement(Button, {
     variant: "primary",
     onClick: saveFontFamilies,
     disabled: !fontFamiliesHasChanges,
     __experimentalIsFocusable: true
-  }, __('Update')));
+  }, __('Update'))));
+}
+function ConfirmDeleteDialog({
+  font,
+  isOpen,
+  setIsOpen,
+  setNotice,
+  uninstallFontFamily,
+  handleSetLibraryFontSelected
+}) {
+  const navigator = useNavigator();
+  const handleConfirmUninstall = async () => {
+    setNotice(null);
+    setIsOpen(false);
+    try {
+      await uninstallFontFamily(font);
+      navigator.goBack();
+      handleSetLibraryFontSelected(null);
+      setNotice({
+        type: 'success',
+        message: __('Font family uninstalled successfully.')
+      });
+    } catch (error) {
+      setNotice({
+        type: 'error',
+        message: __('There was an error uninstalling the font family. ') + error.message
+      });
+    }
+  };
+  const handleCancelUninstall = () => {
+    setIsOpen(false);
+  };
+  return createElement(ConfirmDialog, {
+    isOpen: isOpen,
+    cancelButtonText: __('Cancel'),
+    confirmButtonText: __('Delete'),
+    onCancel: handleCancelUninstall,
+    onConfirm: handleConfirmUninstall
+  }, font && sprintf( /* translators: %s: Name of the font. */
+  __('Are you sure you want to delete "%s" font and all its variants and assets?'), font.name));
 }
 export default InstalledFonts;
 //# sourceMappingURL=installed-fonts.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__","useContext","useEffect","useState","privateApis","componentsPrivateApis","__experimentalHStack","HStack","__experimentalSpacer","Spacer","__experimentalText","Text","Button","Spinner","FlexItem","TabPanelLayout","FontLibraryContext","LibraryFontDetails","LibraryFontCard","ConfirmDeleteDialog","unlock","ProgressBar","InstalledFonts","baseCustomFonts","libraryFontSelected","baseThemeFonts","handleSetLibraryFontSelected","refreshLibrary","uninstallFontFamily","isResolvingLibrary","notice","setNotice","isConfirmDeleteOpen","setIsConfirmDeleteOpen","handleUnselectFont","handleSelectFont","font","handleConfirmUninstall","type","message","error","handleUninstallClick","handleCancelUninstall","tabDescription","shouldDisplayDeleteButton","source","createElement","title","name","description","handleBack","footer","Footer","Fragment","margin","length","map","key","slug","onClick","className","saveFontFamilies","fontFamiliesHasChanges","isInstalling","justify","isDestructive","variant","disabled","__experimentalIsFocusable"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport {\n\tprivateApis as componentsPrivateApis,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as Text,\n\tButton,\n\tSpinner,\n\tFlexItem,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport TabPanelLayout from './tab-panel-layout';\nimport { FontLibraryContext } from './context';\nimport LibraryFontDetails from './library-font-details';\nimport LibraryFontCard from './library-font-card';\nimport ConfirmDeleteDialog from './confirm-delete-dialog';\nimport { unlock } from '../../../lock-unlock';\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\tbaseThemeFonts,\n\t\thandleSetLibraryFontSelected,\n\t\trefreshLibrary,\n\t\tuninstallFontFamily,\n\t\tisResolvingLibrary,\n\t\tnotice,\n\t\tsetNotice,\n\t} = useContext( FontLibraryContext );\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );\n\n\tconst handleUnselectFont = () => {\n\t\thandleSetLibraryFontSelected( null );\n\t};\n\n\tconst handleSelectFont = ( font ) => {\n\t\thandleSetLibraryFontSelected( font );\n\t};\n\n\tconst handleConfirmUninstall = async () => {\n\t\tsetNotice( null );\n\n\t\ttry {\n\t\t\tawait uninstallFontFamily( libraryFontSelected );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family uninstalled successfully.' ),\n\t\t\t} );\n\n\t\t\t// If the font was succesfully uninstalled it is unselected.\n\t\t\thandleUnselectFont();\n\t\t\tsetIsConfirmDeleteOpen( false );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage:\n\t\t\t\t\t__( 'There was an error uninstalling the font family. ' ) +\n\t\t\t\t\terror.message,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst handleUninstallClick = async () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst handleCancelUninstall = () => {\n\t\tsetIsConfirmDeleteOpen( false );\n\t};\n\n\tconst tabDescription = !! libraryFontSelected\n\t\t? __(\n\t\t\t\t'Choose font variants. Keep in mind that too many variants could make your site slower.'\n\t\t )\n\t\t: null;\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected && libraryFontSelected?.source !== 'theme';\n\n\tuseEffect( () => {\n\t\thandleSelectFont( libraryFontSelected );\n\t\trefreshLibrary();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\treturn (\n\t\t<TabPanelLayout\n\t\t\ttitle={ libraryFontSelected?.name \|\| '' }\n\t\t\tdescription={ tabDescription }\n\t\t\tnotice={ notice }\n\t\t\thandleBack={ !! libraryFontSelected && handleUnselectFont }\n\t\t\tfooter={\n\t\t\t\t<Footer\n\t\t\t\t\tshouldDisplayDeleteButton={ shouldDisplayDeleteButton }\n\t\t\t\t\thandleUninstallClick={ handleUninstallClick }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<ConfirmDeleteDialog\n\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t/>\n\n\t\t\t{ ! libraryFontSelected && (\n\t\t\t\t<>\n\t\t\t\t\t{ isResolvingLibrary && (\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t) }\n\t\t\t\t\t{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ baseCustomFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ baseThemeFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t\t{ __( 'Theme Fonts' ) }\n\t\t\t\t\t\t\t</Text>\n\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t{ baseThemeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t<LibraryFontCard\n\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\thandleSelectFont( font );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\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\t<Spacer margin={ 16 } />\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ libraryFontSelected && (\n\t\t\t\t<LibraryFontDetails\n\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\tisConfirmDeleteOpen={ isConfirmDeleteOpen }\n\t\t\t\t\thandleConfirmUninstall={ handleConfirmUninstall }\n\t\t\t\t\thandleCancelUninstall={ handleCancelUninstall }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</TabPanelLayout>\n\t);\n}\n\nfunction Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {\n\tconst { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =\n\t\tuseContext( FontLibraryContext );\n\treturn (\n\t\t<HStack justify=\"flex-end\">\n\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t<div>\n\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisDestructive\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ handleUninstallClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ saveFontFamilies }\n\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\t__experimentalIsFocusable\n\t\t\t>\n\t\t\t\t{ __( 'Update' ) }\n\t\t\t</Button>\n\t\t</HStack>\n\t);\n}\n\nexport default InstalledFonts;\n"],"mappings":"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"}
1	+ {"version":3,"names":["Button","__experimentalConfirmDialog","ConfirmDialog","__experimentalHStack","HStack","__experimentalHeading","Heading","__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalNavigatorToParentButton","NavigatorToParentButton","__experimentalUseNavigator","useNavigator","__experimentalSpacer","Spacer","__experimentalText","Text","__experimentalVStack","VStack","Flex","Notice","Spinner","privateApis","componentsPrivateApis","useContext","useEffect","useState","__","sprintf","chevronLeft","unlock","FontLibraryContext","FontCard","LibraryFontVariant","sortFontFaces","ProgressBar","InstalledFonts","baseCustomFonts","libraryFontSelected","baseThemeFonts","handleSetLibraryFontSelected","refreshLibrary","uninstallFontFamily","isResolvingLibrary","isInstalling","saveFontFamilies","getFontFacesActivated","fontFamiliesHasChanges","notice","setNotice","isConfirmDeleteOpen","setIsConfirmDeleteOpen","shouldDisplayDeleteButton","source","handleUninstallClick","getFontFacesToDisplay","font","fontFace","length","fontFamily","fontStyle","fontWeight","getFontCardVariantsText","variantsInstalled","variantsActive","slug","createElement","className","align","initialPath","path","Fragment","margin","status","type","onRemove","message","map","key","navigatorPath","variantsText","onClick","ConfirmDeleteDialog","isOpen","setIsOpen","justify","icon","isSmall","level","size","name","spacing","face","i","isDestructive","variant","disabled","__experimentalIsFocusable","navigator","handleConfirmUninstall","goBack","error","handleCancelUninstall","cancelButtonText","confirmButtonText","onCancel","onConfirm"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\tButton,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\tFlex,\n\tNotice,\n\tSpinner,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { chevronLeft } from '@wordpress/icons';\n\n/\n Internal dependencies\n /\nimport { unlock } from '../../../lock-unlock';\nimport { FontLibraryContext } from './context';\nimport FontCard from './font-card';\nimport LibraryFontVariant from './library-font-variant';\nimport { sortFontFaces } from './utils/sort-font-faces';\nconst { ProgressBar } = unlock( componentsPrivateApis );\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\tbaseThemeFonts,\n\t\thandleSetLibraryFontSelected,\n\t\trefreshLibrary,\n\t\tuninstallFontFamily,\n\t\tisResolvingLibrary,\n\t\tisInstalling,\n\t\tsaveFontFamilies,\n\t\tgetFontFacesActivated,\n\t\tfontFamiliesHasChanges,\n\t\tnotice,\n\t\tsetNotice,\n\t} = useContext( FontLibraryContext );\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected && libraryFontSelected?.source !== 'theme';\n\n\tconst handleUninstallClick = () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst getFontFacesToDisplay = ( font ) => {\n\t\tif ( ! font ) {\n\t\t\treturn [];\n\t\t}\n\t\tif ( ! font.fontFace \|\| ! font.fontFace.length ) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tfontFamily: font.fontFamily,\n\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\tfontWeight: '400',\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\t\treturn sortFontFaces( font.fontFace );\n\t};\n\n\tconst getFontCardVariantsText = ( font ) => {\n\t\tconst variantsInstalled =\n\t\t\tfont?.fontFace?.length > 0 ? font.fontFace.length : 1;\n\t\tconst variantsActive = getFontFacesActivated(\n\t\t\tfont.slug,\n\t\t\tfont.source\n\t\t).length;\n\t\treturn sprintf(\n\t\t\t/ translators: 1: Active font variants, 2: Total font variants. /\n\t\t\t__( '%1$s/%2$s variants active' ),\n\t\t\tvariantsActive,\n\t\t\tvariantsInstalled\n\t\t);\n\t};\n\n\tuseEffect( () => {\n\t\thandleSetLibraryFontSelected( libraryFontSelected );\n\t\trefreshLibrary();\n\t}, [] );\n\n\treturn (\n\t\t<div className=\"font-library-modal__tabpanel-layout\">\n\t\t\t{ isResolvingLibrary && (\n\t\t\t\t<HStack align=\"center\">\n\t\t\t\t\t<Spacer />\n\t\t\t\t\t<Spinner />\n\t\t\t\t\t<Spacer />\n\t\t\t\t</HStack>\n\t\t\t) }\n\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath={ libraryFontSelected ? '/fontFamily' : '/' }\n\t\t\t>\n\t\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t\t{ __( 'Installed Fonts' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t{ baseCustomFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\tnavigatorPath={ '/fontFamily' }\n\t\t\t\t\t\t\t\t\tvariantsText={ getFontCardVariantsText(\n\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected( font );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ baseThemeFonts.length > 0 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Text className=\"font-library-modal__subtitle\">\n\t\t\t\t\t\t\t\t{ __( 'Theme Fonts' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Spacer margin={ 2 } />\n\t\t\t\t\t\t\t{ baseThemeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\tnavigatorPath={ '/fontFamily' }\n\t\t\t\t\t\t\t\t\tvariantsText={ getFontCardVariantsText(\n\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected( font );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\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\t<Spacer margin={ 16 } />\n\t\t\t\t</NavigatorScreen>\n\n\t\t\t\t<NavigatorScreen path=\"/fontFamily\">\n\t\t\t\t\t<ConfirmDeleteDialog\n\t\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\t\tisOpen={ isConfirmDeleteOpen }\n\t\t\t\t\t\tsetIsOpen={ setIsConfirmDeleteOpen }\n\t\t\t\t\t\tsetNotice={ setNotice }\n\t\t\t\t\t\tuninstallFontFamily={ uninstallFontFamily }\n\t\t\t\t\t\thandleSetLibraryFontSelected={\n\t\t\t\t\t\t\thandleSetLibraryFontSelected\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<Flex justify=\"flex-start\">\n\t\t\t\t\t\t<NavigatorToParentButton\n\t\t\t\t\t\t\ticon={ chevronLeft }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\thandleSetLibraryFontSelected( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taria-label={ __( 'Navigate to the previous view' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-header\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ libraryFontSelected?.name }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t</Flex>\n\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t<Text>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Choose font variants. Keep in mind that too many variants could make your site slower.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t{ getFontFacesToDisplay( libraryFontSelected ).map(\n\t\t\t\t\t\t\t( face, i ) => (\n\t\t\t\t\t\t\t\t<LibraryFontVariant\n\t\t\t\t\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</NavigatorScreen>\n\t\t\t</NavigatorProvider>\n\n\t\t\t<HStack\n\t\t\t\tjustify=\"flex-end\"\n\t\t\t\tclassName=\"font-library-modal__tabpanel-layout__footer\"\n\t\t\t>\n\t\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisDestructive\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ handleUninstallClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ saveFontFamilies }\n\t\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Update' ) }\n\t\t\t\t</Button>\n\t\t\t</HStack>\n\t\t</div>\n\t);\n}\n\nfunction ConfirmDeleteDialog( {\n\tfont,\n\tisOpen,\n\tsetIsOpen,\n\tsetNotice,\n\tuninstallFontFamily,\n\thandleSetLibraryFontSelected,\n} ) {\n\tconst navigator = useNavigator();\n\n\tconst handleConfirmUninstall = async () => {\n\t\tsetNotice( null );\n\t\tsetIsOpen( false );\n\t\ttry {\n\t\t\tawait uninstallFontFamily( font );\n\t\t\tnavigator.goBack();\n\t\t\thandleSetLibraryFontSelected( null );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family uninstalled successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage:\n\t\t\t\t\t__( 'There was an error uninstalling the font family. ' ) +\n\t\t\t\t\terror.message,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst handleCancelUninstall = () => {\n\t\tsetIsOpen( false );\n\t};\n\n\treturn (\n\t\t<ConfirmDialog\n\t\t\tisOpen={ isOpen }\n\t\t\tcancelButtonText={ __( 'Cancel' ) }\n\t\t\tconfirmButtonText={ __( 'Delete' ) }\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'Are you sure you want to delete \"%s\" font 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 InstalledFonts;\n"],"mappings":"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"}

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

@@ -10,7 +10,7 @@ import { CheckboxControl, Flex, privateApis as componentsPrivateApis } from '@wo
  */
 import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
-import FontFaceDemo from './font-demo';
+import FontDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 function LibraryFontVariant({
   face,
@@ -34,7 +34,7 @@ function LibraryFontVariant({
   } = unlock(componentsPrivateApis);
   const checkboxId = kebabCase(`${font.slug}-${getFontFaceVariantName(face)}`);
   return createElement("div", {
-    className: "font-library-modal__library-font-variant"
+    className: "font-library-modal__font-card"
   }, createElement(Flex, {
     justify: "flex-start",
     align: "center",
@@ -46,8 +46,8 @@ function LibraryFontVariant({
     id: checkboxId
   }), createElement("label", {
     htmlFor: checkboxId
-  }, createElement(FontFaceDemo, {
-    fontFace: face,
+  }, createElement(FontDemo, {
+    font: face,
     text: displayName,
     onClick: handleToggleActivation
   }))));