@wordpress/global-styles-ui 1.15.0 → 1.15.1
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.
- package/CHANGELOG.md +11 -0
- package/build/font-library/font-card.cjs +10 -1
- package/build/font-library/font-card.cjs.map +2 -2
- package/build/font-library/font-collection.cjs +5 -0
- package/build/font-library/font-collection.cjs.map +2 -2
- package/build/font-library/installed-fonts.cjs +29 -1
- package/build/font-library/installed-fonts.cjs.map +2 -2
- package/build/variations/variation.cjs +5 -2
- package/build/variations/variation.cjs.map +3 -3
- package/build-module/font-library/font-card.mjs +10 -1
- package/build-module/font-library/font-card.mjs.map +2 -2
- package/build-module/font-library/font-collection.mjs +5 -0
- package/build-module/font-library/font-collection.mjs.map +2 -2
- package/build-module/font-library/installed-fonts.mjs +30 -2
- package/build-module/font-library/installed-fonts.mjs.map +2 -2
- package/build-module/variations/variation.mjs +6 -3
- package/build-module/variations/variation.mjs.map +2 -2
- package/build-style/style-rtl.css +4 -5
- package/build-style/style.css +4 -6
- package/build-types/font-library/font-card.d.ts +2 -1
- package/build-types/font-library/font-card.d.ts.map +1 -1
- package/build-types/font-library/font-collection.d.ts.map +1 -1
- package/build-types/font-library/installed-fonts.d.ts.map +1 -1
- package/build-types/variations/variation.d.ts.map +1 -1
- package/package.json +26 -21
- package/src/font-library/font-card.tsx +11 -0
- package/src/font-library/font-collection.tsx +11 -0
- package/src/font-library/installed-fonts.tsx +57 -3
- package/src/style.scss +11 -15
- package/src/variations/variation.tsx +7 -5
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/font-library/font-collection.tsx"],
|
|
4
|
-
"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__experimentalText as WCText,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tNavigator,\n\t__experimentalHeading as Heading,\n\tNotice,\n\tSelectControl,\n\tFlex,\n\tButton,\n\tDropdownMenu,\n\tSearchControl,\n\tProgressBar,\n\tCheckboxControl,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { sprintf, __, _x, isRTL } from '@wordpress/i18n';\nimport {\n\tmoreVertical,\n\tnext,\n\tprevious,\n\tchevronLeft,\n\tchevronRight,\n} from '@wordpress/icons';\nimport { useEntityRecord } from '@wordpress/core-data';\nimport type {\n\tFontCollection as FontCollectionType,\n\tFontFace,\n\tFontFamily,\n\tCollectionFontFamily,\n} from '@wordpress/core-data';\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';\nimport type { FontFamilyToUpload } from './types';\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 }: { slug: string } ) {\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< FontFamily | null >(\n\t\tnull\n\t);\n\tconst [ notice, setNotice ] = useState< {\n\t\ttype: 'success' | 'error' | 'info';\n\t\tmessage: string;\n\t} | null >( null );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState< FontFamily[] >(\n\t\t[]\n\t);\n\tconst [ page, setPage ] = useState( 1 );\n\tconst [ filters, setFilters ] = useState< {\n\t\tcategory?: string;\n\t\tsearch?: string;\n\t} >( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { installFonts, isInstalling } = useContext( FontLibraryContext );\n\tconst { record: selectedCollection, isResolving: isLoading } =\n\t\tuseEntityRecord< FontCollectionType >( 'root', 'fontCollection', slug );\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\tsetSelectedFont( null );\n\t}, [ slug ] );\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() =>\n\t\t\t( selectedCollection?.font_families as\n\t\t\t\t| CollectionFontFamily[]\n\t\t\t\t| undefined ) ?? [],\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: string ) => {\n\t\tsetFilters( { ...filters, category } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleUpdateSearchInput = ( value: string ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t\tsetPage( 1 );\n\t};\n\n\t// @ts-expect-error\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst handleToggleVariant = ( font: FontFamily, face?: FontFace ) => {\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 selectFontCount =\n\t\tfontsToInstall.length > 0\n\t\t\t? fontsToInstall[ 0 ]?.fontFace?.length ?? 0\n\t\t\t: 0;\n\n\t// Check if any fonts are selected.\n\tconst isIndeterminate =\n\t\tselectFontCount > 0 &&\n\t\tselectFontCount !== selectedFont?.fontFace?.length;\n\n\t// Check if all fonts are selected.\n\tconst isSelectAllChecked =\n\t\tselectFontCount === selectedFont?.fontFace?.length;\n\n\t// Toggle select all fonts.\n\tconst toggleSelectAll = () => {\n\t\tconst newFonts: FontFamily[] = [];\n\t\tif ( ! isSelectAllChecked && selectedFont ) {\n\t\t\tnewFonts.push( selectedFont );\n\t\t}\n\n\t\tsetFontsToInstall( newFonts );\n\t};\n\n\tconst handleInstall = async () => {\n\t\tsetNotice( null );\n\n\t\tconst fontFamily: FontFamilyToUpload = 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 {\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 installFonts( [ 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 as Error ).message,\n\t\t\t} );\n\t\t}\n\t\tresetFontsToInstall();\n\t};\n\n\tconst getSortedFontFaces = ( fontFamily: 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 showActions =\n\t\tslug === 'google-fonts' && ! renderConfirmDialog && ! selectedFont;\n\n\treturn (\n\t\t<div className=\"font-library__tabpanel-layout\">\n\t\t\t{ isLoading && (\n\t\t\t\t<div className=\"font-library__loading\">\n\t\t\t\t\t<ProgressBar />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ ! isLoading && selectedCollection && (\n\t\t\t\t<>\n\t\t\t\t\t<Navigator\n\t\t\t\t\t\tinitialPath=\"/\"\n\t\t\t\t\t\tclassName=\"font-library__tabpanel-layout\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Navigator.Screen path=\"/\">\n\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t\t\t\t\t\t{ selectedCollection.name }\n\t\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t\t\t{ selectedCollection.description }\n\t\t\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t{ showActions && (\n\t\t\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\t\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\t\t\t\t\t\tposition: 'bottom left',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tcontrols={ [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\ttitle: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Revoke access to Google Fonts'\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\tonClick: revokeAccess,\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/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<HStack spacing={ 4 } justify=\"space-between\">\n\t\t\t\t\t\t\t\t<SearchControl\n\t\t\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Font name\u2026' ) }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\t\t\thideLabelFromVision={ false }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={ category.slug }\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ category.slug }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ category.name }\n\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t\t\t</HStack>\n\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\n\t\t\t\t\t\t\t{ !! selectedCollection?.font_families?.length &&\n\t\t\t\t\t\t\t\t! fonts.length && (\n\t\t\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\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\t\t) }\n\t\t\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t\t<div className=\"font-library__fonts-grid__main\">\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ items.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings.slug\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\t\t\t\t\tfont={\n\t\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tnavigatorPath=\"/fontFamily\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedFont(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</Navigator.Screen>\n\n\t\t\t\t\t\t<Navigator.Screen path=\"/fontFamily\">\n\t\t\t\t\t\t\t<Flex justify=\"flex-start\">\n\t\t\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronRight : chevronLeft\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tsetSelectedFont( null );\n\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ selectedFont?.name }\n\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\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={ 4 } />\n\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t{ __( 'Select font variants to install.' ) }\n\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\tclassName=\"font-library__select-all\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Select all' ) }\n\t\t\t\t\t\t\t\tchecked={ isSelectAllChecked }\n\t\t\t\t\t\t\t\tonChange={ toggleSelectAll }\n\t\t\t\t\t\t\t\tindeterminate={ isIndeterminate }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ selectedFont &&\n\t\t\t\t\t\t\t\t\t\tgetSortedFontFaces( selectedFont ).map(\n\t\t\t\t\t\t\t\t\t\t\t( face, i ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<CollectionFontVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ selectedFont }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleToggleVariant={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleToggleVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselected={ isFontFontFaceInOutline(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedFont.slug,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedFont.fontFace\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? face\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 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\t\t\t\t\t\tfontToInstallOutline\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\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</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t<Spacer margin={ 16 } />\n\t\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t</Navigator>\n\n\t\t\t\t\t{ selectedFont && (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tclassName=\"font-library__footer\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleInstall }\n\t\t\t\t\t\t\t\tisBusy={ isInstalling }\n\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\tfontsToInstall.length === 0 || isInstalling\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Install' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! selectedFont && (\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\tclassName=\"font-library__footer\"\n\t\t\t\t\t\t\tjustify=\"end\"\n\t\t\t\t\t\t\tspacing={ 6 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t\t\tclassName=\"font-library__page-selection\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: 1: Current page number, 2: Total number of pages.\n\t\t\t\t\t\t\t\t\t\t_x(\n\t\t\t\t\t\t\t\t\t\t\t'<div>Page</div>%1$s<div>of %2$d</div>',\n\t\t\t\t\t\t\t\t\t\t\t'paging'\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t'<CurrentPage />',\n\t\t\t\t\t\t\t\t\t\ttotalPages\n\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\t\tdiv: <div aria-hidden />,\n\t\t\t\t\t\t\t\t\t\t// @ts-expect-error \u2014 Tag injected via sprintf argument, not visible in format string.\n\t\t\t\t\t\t\t\t\t\tCurrentPage: (\n\t\t\t\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Current page'\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={ page.toString() }\n\t\t\t\t\t\t\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t\t\t\t\t\t\t...Array( totalPages ),\n\t\t\t\t\t\t\t\t\t\t\t\t].map( ( e, i ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t).toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t).toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={ ( newPage ) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetPage(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparseInt( newPage )\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"minimal\"\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}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={ () => setPage( page - 1 ) }\n\t\t\t\t\t\t\t\t\tdisabled={ page === 1 }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={ () => setPage( page + 1 ) }\n\t\t\t\t\t\t\t\t\tdisabled={ page === totalPages }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontCollection;\n"],
|
|
5
|
-
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP;AAAA,EACC,wBAAwB;AAAA,EACxB,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AAAA,EACA,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,gBAAgB;AACzB,SAAS,SAAS,IAAI,IAAI,aAAa;AACvC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,uBAAuB;AAWhC,SAAS,0BAA0B;AACnC,OAAO,cAAc;AACrB,OAAO,iBAAiB;AACxB,SAAS,kBAAkB;AAC3B;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,OAAO,8BAA8B;AACrC,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,OAAO,2BAA2B;
|
|
4
|
+
"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__experimentalText as WCText,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tNavigator,\n\t__experimentalHeading as Heading,\n\tNotice,\n\tSelectControl,\n\tFlex,\n\tButton,\n\tDropdownMenu,\n\tSearchControl,\n\tProgressBar,\n\tCheckboxControl,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { sprintf, __, _x, isRTL } from '@wordpress/i18n';\nimport {\n\tmoreVertical,\n\tnext,\n\tprevious,\n\tchevronLeft,\n\tchevronRight,\n} from '@wordpress/icons';\nimport { useEntityRecord } from '@wordpress/core-data';\nimport type {\n\tFontCollection as FontCollectionType,\n\tFontFace,\n\tFontFamily,\n\tCollectionFontFamily,\n} from '@wordpress/core-data';\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';\nimport type { FontFamilyToUpload } from './types';\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 }: { slug: string } ) {\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< FontFamily | null >(\n\t\tnull\n\t);\n\tconst [ lastSelectedFontSlug, setLastSelectedFontSlug ] = useState<\n\t\tstring | undefined\n\t>( undefined );\n\tconst [ notice, setNotice ] = useState< {\n\t\ttype: 'success' | 'error' | 'info';\n\t\tmessage: string;\n\t} | null >( null );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState< FontFamily[] >(\n\t\t[]\n\t);\n\tconst [ page, setPage ] = useState( 1 );\n\tconst [ filters, setFilters ] = useState< {\n\t\tcategory?: string;\n\t\tsearch?: string;\n\t} >( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { installFonts, isInstalling } = useContext( FontLibraryContext );\n\tconst { record: selectedCollection, isResolving: isLoading } =\n\t\tuseEntityRecord< FontCollectionType >( 'root', 'fontCollection', slug );\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\tsetSelectedFont( null );\n\t}, [ slug ] );\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() =>\n\t\t\t( selectedCollection?.font_families as\n\t\t\t\t| CollectionFontFamily[]\n\t\t\t\t| undefined ) ?? [],\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: string ) => {\n\t\tsetFilters( { ...filters, category } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleUpdateSearchInput = ( value: string ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t\tsetPage( 1 );\n\t};\n\n\t// @ts-expect-error\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst handleToggleVariant = ( font: FontFamily, face?: FontFace ) => {\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 selectFontCount =\n\t\tfontsToInstall.length > 0\n\t\t\t? fontsToInstall[ 0 ]?.fontFace?.length ?? 0\n\t\t\t: 0;\n\n\t// Check if any fonts are selected.\n\tconst isIndeterminate =\n\t\tselectFontCount > 0 &&\n\t\tselectFontCount !== selectedFont?.fontFace?.length;\n\n\t// Check if all fonts are selected.\n\tconst isSelectAllChecked =\n\t\tselectFontCount === selectedFont?.fontFace?.length;\n\n\t// Toggle select all fonts.\n\tconst toggleSelectAll = () => {\n\t\tconst newFonts: FontFamily[] = [];\n\t\tif ( ! isSelectAllChecked && selectedFont ) {\n\t\t\tnewFonts.push( selectedFont );\n\t\t}\n\n\t\tsetFontsToInstall( newFonts );\n\t};\n\n\tconst handleInstall = async () => {\n\t\tsetNotice( null );\n\n\t\tconst fontFamily: FontFamilyToUpload = 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 {\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 installFonts( [ 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 as Error ).message,\n\t\t\t} );\n\t\t}\n\t\tresetFontsToInstall();\n\t};\n\n\tconst getSortedFontFaces = ( fontFamily: 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 showActions =\n\t\tslug === 'google-fonts' && ! renderConfirmDialog && ! selectedFont;\n\n\treturn (\n\t\t<div className=\"font-library__tabpanel-layout\">\n\t\t\t{ isLoading && (\n\t\t\t\t<div className=\"font-library__loading\">\n\t\t\t\t\t<ProgressBar />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ ! isLoading && selectedCollection && (\n\t\t\t\t<>\n\t\t\t\t\t<Navigator\n\t\t\t\t\t\tinitialPath=\"/\"\n\t\t\t\t\t\tclassName=\"font-library__tabpanel-layout\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Navigator.Screen path=\"/\">\n\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t\t\t\t\t\t{ selectedCollection.name }\n\t\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t\t\t{ selectedCollection.description }\n\t\t\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t{ showActions && (\n\t\t\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\t\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\t\t\t\t\t\tposition: 'bottom left',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tcontrols={ [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\ttitle: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Revoke access to Google Fonts'\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\tonClick: revokeAccess,\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/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<HStack spacing={ 4 } justify=\"space-between\">\n\t\t\t\t\t\t\t\t<SearchControl\n\t\t\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Font name\u2026' ) }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\t\t\thideLabelFromVision={ false }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={ category.slug }\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ category.slug }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ category.name }\n\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t\t\t</HStack>\n\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\n\t\t\t\t\t\t\t{ !! selectedCollection?.font_families?.length &&\n\t\t\t\t\t\t\t\t! fonts.length && (\n\t\t\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\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\t\t) }\n\t\t\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t\t<div className=\"font-library__fonts-grid__main\">\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ items.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings.slug\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\t\t\t\t\tfont={\n\t\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tnavigatorPath=\"/fontFamily\"\n\t\t\t\t\t\t\t\t\t\t\t\tshouldFocus={\n\t\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.slug ===\n\t\t\t\t\t\t\t\t\t\t\t\t\tlastSelectedFontSlug\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedFont(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</Navigator.Screen>\n\n\t\t\t\t\t\t<Navigator.Screen path=\"/fontFamily\">\n\t\t\t\t\t\t\t<Flex justify=\"flex-start\">\n\t\t\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronRight : chevronLeft\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tsetLastSelectedFontSlug(\n\t\t\t\t\t\t\t\t\t\t\tselectedFont?.slug\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\tsetSelectedFont( null );\n\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ selectedFont?.name }\n\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\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={ 4 } />\n\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t{ __( 'Select font variants to install.' ) }\n\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\tclassName=\"font-library__select-all\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Select all' ) }\n\t\t\t\t\t\t\t\tchecked={ isSelectAllChecked }\n\t\t\t\t\t\t\t\tonChange={ toggleSelectAll }\n\t\t\t\t\t\t\t\tindeterminate={ isIndeterminate }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ selectedFont &&\n\t\t\t\t\t\t\t\t\t\tgetSortedFontFaces( selectedFont ).map(\n\t\t\t\t\t\t\t\t\t\t\t( face, i ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<CollectionFontVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ selectedFont }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleToggleVariant={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleToggleVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselected={ isFontFontFaceInOutline(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedFont.slug,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedFont.fontFace\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? face\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 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\t\t\t\t\t\tfontToInstallOutline\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\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</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t<Spacer margin={ 16 } />\n\t\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t</Navigator>\n\n\t\t\t\t\t{ selectedFont && (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tclassName=\"font-library__footer\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleInstall }\n\t\t\t\t\t\t\t\tisBusy={ isInstalling }\n\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\tfontsToInstall.length === 0 || isInstalling\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Install' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! selectedFont && (\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\tclassName=\"font-library__footer\"\n\t\t\t\t\t\t\tjustify=\"end\"\n\t\t\t\t\t\t\tspacing={ 6 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t\t\tclassName=\"font-library__page-selection\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: 1: Current page number, 2: Total number of pages.\n\t\t\t\t\t\t\t\t\t\t_x(\n\t\t\t\t\t\t\t\t\t\t\t'<div>Page</div>%1$s<div>of %2$d</div>',\n\t\t\t\t\t\t\t\t\t\t\t'paging'\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t'<CurrentPage />',\n\t\t\t\t\t\t\t\t\t\ttotalPages\n\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\t\tdiv: <div aria-hidden />,\n\t\t\t\t\t\t\t\t\t\t// @ts-expect-error \u2014 Tag injected via sprintf argument, not visible in format string.\n\t\t\t\t\t\t\t\t\t\tCurrentPage: (\n\t\t\t\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Current page'\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={ page.toString() }\n\t\t\t\t\t\t\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t\t\t\t\t\t\t...Array( totalPages ),\n\t\t\t\t\t\t\t\t\t\t\t\t].map( ( e, i ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t).toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t).toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={ ( newPage ) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetPage(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparseInt( newPage )\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"minimal\"\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}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={ () => setPage( page - 1 ) }\n\t\t\t\t\t\t\t\t\tdisabled={ page === 1 }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={ () => setPage( page + 1 ) }\n\t\t\t\t\t\t\t\t\tdisabled={ page === totalPages }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontCollection;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,7 +16,7 @@ import {
|
|
|
16
16
|
} from "@wordpress/components";
|
|
17
17
|
import { useEntityRecord, store as coreStore } from "@wordpress/core-data";
|
|
18
18
|
import { useSelect } from "@wordpress/data";
|
|
19
|
-
import { useContext, useEffect, useState } from "@wordpress/element";
|
|
19
|
+
import { useContext, useEffect, useMemo, useState } from "@wordpress/element";
|
|
20
20
|
import { __, _x, sprintf, isRTL } from "@wordpress/i18n";
|
|
21
21
|
import { chevronLeft, chevronRight } from "@wordpress/icons";
|
|
22
22
|
import { FontLibraryContext } from "./context.mjs";
|
|
@@ -31,6 +31,21 @@ import {
|
|
|
31
31
|
} from "./utils/index.mjs";
|
|
32
32
|
import { useSetting } from "../hooks.mjs";
|
|
33
33
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
34
|
+
function getFontFamiliesKey(fontFamilies) {
|
|
35
|
+
if (!fontFamilies) {
|
|
36
|
+
return "";
|
|
37
|
+
}
|
|
38
|
+
const normalized = {};
|
|
39
|
+
for (const source of Object.keys(fontFamilies).sort()) {
|
|
40
|
+
normalized[source] = (fontFamilies[source] ?? []).map((family) => ({
|
|
41
|
+
slug: family.slug,
|
|
42
|
+
fontFace: (family.fontFace ?? []).map(
|
|
43
|
+
(face) => `${face.fontStyle}-${face.fontWeight}`
|
|
44
|
+
).sort()
|
|
45
|
+
})).sort((a, b) => a.slug.localeCompare(b.slug));
|
|
46
|
+
}
|
|
47
|
+
return JSON.stringify(normalized);
|
|
48
|
+
}
|
|
34
49
|
function InstalledFonts() {
|
|
35
50
|
const {
|
|
36
51
|
baseCustomFonts,
|
|
@@ -43,6 +58,7 @@ function InstalledFonts() {
|
|
|
43
58
|
getFontFacesActivated
|
|
44
59
|
} = useContext(FontLibraryContext);
|
|
45
60
|
const [fontFamilies, setFontFamilies] = useSetting("typography.fontFamilies");
|
|
61
|
+
const [lastSelectedFontSlug, setLastSelectedFontSlug] = useState(void 0);
|
|
46
62
|
const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
|
|
47
63
|
const [notice, setNotice] = useState(null);
|
|
48
64
|
const [baseFontFamilies] = useSetting("typography.fontFamilies", void 0, "base");
|
|
@@ -55,7 +71,14 @@ function InstalledFonts() {
|
|
|
55
71
|
"globalStyles",
|
|
56
72
|
globalStylesId
|
|
57
73
|
);
|
|
58
|
-
const
|
|
74
|
+
const editedFontFamilies = globalStyles?.edits?.settings?.typography?.fontFamilies;
|
|
75
|
+
const savedFontFamilies = globalStyles?.record?.settings?.typography?.fontFamilies;
|
|
76
|
+
const fontFamiliesHasChanges = useMemo(() => {
|
|
77
|
+
if (editedFontFamilies === void 0) {
|
|
78
|
+
return false;
|
|
79
|
+
}
|
|
80
|
+
return getFontFamiliesKey(editedFontFamilies) !== getFontFamiliesKey(savedFontFamilies);
|
|
81
|
+
}, [editedFontFamilies, savedFontFamilies]);
|
|
59
82
|
const themeFonts = fontFamilies?.theme ? fontFamilies.theme.map((f) => setUIValuesNeeded(f, { source: "theme" })).sort((a, b) => a.name.localeCompare(b.name)) : [];
|
|
60
83
|
const themeFontsSlugs = new Set(themeFonts.map((f) => f.slug));
|
|
61
84
|
const baseThemeFonts = baseFontFamilies?.theme ? themeFonts.concat(
|
|
@@ -203,6 +226,7 @@ function InstalledFonts() {
|
|
|
203
226
|
variantsText: getFontCardVariantsText(
|
|
204
227
|
font
|
|
205
228
|
),
|
|
229
|
+
shouldFocus: font.slug === lastSelectedFontSlug,
|
|
206
230
|
onClick: () => {
|
|
207
231
|
setNotice(null);
|
|
208
232
|
handleSetLibraryFontSelected(
|
|
@@ -240,6 +264,7 @@ function InstalledFonts() {
|
|
|
240
264
|
variantsText: getFontCardVariantsText(
|
|
241
265
|
font
|
|
242
266
|
),
|
|
267
|
+
shouldFocus: font.slug === lastSelectedFontSlug,
|
|
243
268
|
onClick: () => {
|
|
244
269
|
setNotice(null);
|
|
245
270
|
handleSetLibraryFontSelected(
|
|
@@ -274,6 +299,9 @@ function InstalledFonts() {
|
|
|
274
299
|
icon: isRTL() ? chevronRight : chevronLeft,
|
|
275
300
|
size: "small",
|
|
276
301
|
onClick: () => {
|
|
302
|
+
setLastSelectedFontSlug(
|
|
303
|
+
libraryFontSelected?.slug
|
|
304
|
+
);
|
|
277
305
|
handleSetLibraryFontSelected(
|
|
278
306
|
void 0
|
|
279
307
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/font-library/installed-fonts.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\tNavigator,\n\tuseNavigator,\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as WCText,\n\t__experimentalVStack as VStack,\n\tFlex,\n\tNotice,\n\tProgressBar,\n\tCheckboxControl,\n} from '@wordpress/components';\nimport { useEntityRecord, store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport { __, _x, sprintf, isRTL } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport type {\n\tFontFamilyPreset,\n\tGlobalStylesConfig,\n} from '@wordpress/global-styles-engine';\nimport type { FontFamily } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport FontCard from './font-card';\nimport LibraryFontVariant from './library-font-variant';\nimport { sortFontFaces } from './utils/sort-font-faces';\nimport {\n\tsetUIValuesNeeded,\n\tloadFontFaceInBrowser,\n\tunloadFontFaceInBrowser,\n\tgetDisplaySrcFromFontFace,\n} from './utils';\nimport { useSetting } from '../hooks';\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\thandleSetLibraryFontSelected,\n\t\tuninstallFontFamily,\n\t\tisResolvingLibrary,\n\t\tisInstalling,\n\t\tsaveFontFamilies,\n\t\tgetFontFacesActivated,\n\t} = useContext( FontLibraryContext );\n\n\tconst [ fontFamilies, setFontFamilies ] = useSetting<\n\t\tRecord< string, FontFamilyPreset[] > | undefined\n\t>( 'typography.fontFamilies' );\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] =\n\t\tuseState< boolean >( false );\n\tconst [ notice, setNotice ] = useState< {\n\t\ttype: 'success' | 'error' | 'info';\n\t\tmessage: string;\n\t} | null >( null );\n\tconst [ baseFontFamilies ] = useSetting<\n\t\tRecord< string, FontFamilyPreset[] > | undefined\n\t>( 'typography.fontFamilies', undefined, 'base' );\n\tconst globalStylesId = useSelect( ( select ) => {\n\t\tconst { __experimentalGetCurrentGlobalStylesId } = select( coreStore );\n\t\treturn __experimentalGetCurrentGlobalStylesId();\n\t}, [] );\n\tconst globalStyles = useEntityRecord< GlobalStylesConfig >(\n\t\t'root',\n\t\t'globalStyles',\n\t\tglobalStylesId\n\t);\n\tconst fontFamiliesHasChanges =\n\t\t!! globalStyles?.edits?.settings?.typography?.fontFamilies;\n\n\tconst themeFonts = fontFamilies?.theme\n\t\t? fontFamilies.theme\n\t\t\t\t.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )\n\t\t\t\t.sort( ( a, b ) => a.name.localeCompare( b.name ) )\n\t\t: [];\n\tconst themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) );\n\tconst baseThemeFonts = baseFontFamilies?.theme\n\t\t? themeFonts.concat(\n\t\t\t\tbaseFontFamilies.theme\n\t\t\t\t\t.filter( ( f ) => ! themeFontsSlugs.has( f.slug ) )\n\t\t\t\t\t.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )\n\t\t\t\t\t.sort( ( a, b ) => a.name.localeCompare( b.name ) )\n\t\t )\n\t\t: [];\n\n\tconst customFontFamilyId =\n\t\tlibraryFontSelected?.source === 'custom' && libraryFontSelected?.id;\n\n\tconst canUserDelete = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canUser } = select( coreStore );\n\t\t\treturn (\n\t\t\t\tcustomFontFamilyId &&\n\t\t\t\tcanUser( 'delete', {\n\t\t\t\t\tkind: 'postType',\n\t\t\t\t\tname: 'wp_font_family',\n\t\t\t\t\tid: customFontFamilyId,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ customFontFamilyId ]\n\t);\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected &&\n\t\tlibraryFontSelected?.source !== 'theme' &&\n\t\tcanUserDelete;\n\n\tconst handleUninstallClick = () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst handleUpdate = async () => {\n\t\tsetNotice( null );\n\t\ttry {\n\t\t\tawait saveFontFamilies( fontFamilies );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family updated 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: sprintf(\n\t\t\t\t\t/* translators: %s: error message */\n\t\t\t\t\t__( 'There was an error updating the font family. %s' ),\n\t\t\t\t\t( error as Error ).message\n\t\t\t\t),\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst getFontFacesToDisplay = ( font: FontFamily ) => {\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: FontFamily ) => {\n\t\tconst variantsInstalled =\n\t\t\tfont?.fontFace && ( font?.fontFace?.length ?? 0 ) > 0\n\t\t\t\t? font.fontFace.length\n\t\t\t\t: 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$d of %2$d active' ),\n\t\t\tvariantsActive,\n\t\t\tvariantsInstalled\n\t\t);\n\t};\n\n\tuseEffect( () => {\n\t\thandleSetLibraryFontSelected( libraryFontSelected );\n\t}, [] );\n\n\t// Get activated fonts count.\n\tconst activeFontsCount = libraryFontSelected\n\t\t? getFontFacesActivated(\n\t\t\t\tlibraryFontSelected.slug,\n\t\t\t\tlibraryFontSelected.source\n\t\t ).length\n\t\t: 0;\n\n\tconst selectedFontsCount =\n\t\tlibraryFontSelected?.fontFace?.length ??\n\t\t( libraryFontSelected?.fontFamily ? 1 : 0 );\n\n\t// Check if any fonts are selected.\n\tconst isIndeterminate =\n\t\tactiveFontsCount > 0 && activeFontsCount !== selectedFontsCount;\n\n\t// Check if all fonts are selected.\n\tconst isSelectAllChecked = activeFontsCount === selectedFontsCount;\n\n\t// Toggle select all fonts.\n\tconst toggleSelectAll = () => {\n\t\tif ( ! libraryFontSelected || ! libraryFontSelected?.source ) {\n\t\t\treturn;\n\t\t}\n\t\tconst initialFonts =\n\t\t\tfontFamilies?.[ libraryFontSelected.source ]?.filter(\n\t\t\t\t( f ) => f.slug !== libraryFontSelected.slug\n\t\t\t) ?? [];\n\t\tconst newFonts = isSelectAllChecked\n\t\t\t? initialFonts\n\t\t\t: [ ...initialFonts, libraryFontSelected ];\n\n\t\tsetFontFamilies( {\n\t\t\t...fontFamilies,\n\t\t\t[ libraryFontSelected.source ]: newFonts,\n\t\t} );\n\n\t\tif ( libraryFontSelected.fontFace ) {\n\t\t\tlibraryFontSelected.fontFace.forEach( ( face ) => {\n\t\t\t\tif ( isSelectAllChecked ) {\n\t\t\t\t\tunloadFontFaceInBrowser( face, 'all' );\n\t\t\t\t} else {\n\t\t\t\t\tconst displaySrc = getDisplaySrcFromFontFace(\n\t\t\t\t\t\tface?.src ?? ''\n\t\t\t\t\t);\n\t\t\t\t\tif ( displaySrc ) {\n\t\t\t\t\t\tloadFontFaceInBrowser( face, displaySrc, 'all' );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst hasFonts = baseThemeFonts.length > 0 || baseCustomFonts.length > 0;\n\treturn (\n\t\t<div className=\"font-library__tabpanel-layout\">\n\t\t\t{ isResolvingLibrary && (\n\t\t\t\t<div className=\"font-library__loading\">\n\t\t\t\t\t<ProgressBar />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ ! isResolvingLibrary && (\n\t\t\t\t<>\n\t\t\t\t\t<Navigator\n\t\t\t\t\t\tinitialPath={\n\t\t\t\t\t\t\tlibraryFontSelected ? '/fontFamily' : '/'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Navigator.Screen path=\"/\">\n\t\t\t\t\t\t\t<VStack spacing=\"8\">\n\t\t\t\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ ! hasFonts && (\n\t\t\t\t\t\t\t\t\t<WCText as=\"p\">\n\t\t\t\t\t\t\t\t\t\t{ __( 'No fonts installed.' ) }\n\t\t\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ baseThemeFonts.length > 0 && (\n\t\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t\t<h2 className=\"font-library__fonts-title\">\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: Heading for a list of fonts provided by the theme. */\n\t\t\t\t\t\t\t\t\t\t\t\t_x( 'Theme', 'font source' )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ baseThemeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnavigatorPath=\"/fontFamily\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariantsText={ getFontCardVariantsText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t\t<h2 className=\"font-library__fonts-title\">\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: Heading for a list of fonts installed by the user. */\n\t\t\t\t\t\t\t\t\t\t\t\t_x( 'Custom', 'font source' )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ baseCustomFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnavigatorPath=\"/fontFamily\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariantsText={ getFontCardVariantsText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</Navigator.Screen>\n\n\t\t\t\t\t\t<Navigator.Screen path=\"/fontFamily\">\n\t\t\t\t\t\t\t{ libraryFontSelected && (\n\t\t\t\t\t\t\t\t<ConfirmDeleteDialog\n\t\t\t\t\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\t\t\t\t\tisOpen={ isConfirmDeleteOpen }\n\t\t\t\t\t\t\t\t\tsetIsOpen={ setIsConfirmDeleteOpen }\n\t\t\t\t\t\t\t\t\tsetNotice={ setNotice }\n\t\t\t\t\t\t\t\t\tuninstallFontFamily={ uninstallFontFamily }\n\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected={\n\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected\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\n\t\t\t\t\t\t\t<Flex justify=\"flex-start\">\n\t\t\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronRight : chevronLeft\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected(\n\t\t\t\t\t\t\t\t\t\t\tundefined\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ libraryFontSelected?.name }\n\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\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={ 4 } />\n\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\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\t\t) }\n\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__select-all\"\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Select all' ) }\n\t\t\t\t\t\t\t\t\tchecked={ isSelectAllChecked }\n\t\t\t\t\t\t\t\t\tonChange={ toggleSelectAll }\n\t\t\t\t\t\t\t\t\tindeterminate={ isIndeterminate }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ libraryFontSelected &&\n\t\t\t\t\t\t\t\t\t\tgetFontFacesToDisplay(\n\t\t\t\t\t\t\t\t\t\t\tlibraryFontSelected\n\t\t\t\t\t\t\t\t\t\t).map( ( face, i ) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<LibraryFontVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\t\t\t\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t</Navigator>\n\n\t\t\t\t\t<HStack justify=\"flex-end\" className=\"font-library__footer\">\n\t\t\t\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tisDestructive\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleUninstallClick }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ handleUpdate }\n\t\t\t\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Update' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction ConfirmDeleteDialog( {\n\tfont,\n\tisOpen,\n\tsetIsOpen,\n\tsetNotice,\n\tuninstallFontFamily,\n\thandleSetLibraryFontSelected,\n}: {\n\tfont: FontFamily;\n\tisOpen: boolean;\n\tsetIsOpen: ( isOpen: boolean ) => void;\n\tsetNotice: (\n\t\tnotice: {\n\t\t\ttype: 'success' | 'error' | 'info';\n\t\t\tmessage: string;\n\t\t} | null\n\t) => void;\n\tuninstallFontFamily: (\n\t\tfontFamily: FontFamily\n\t) => Promise< { deleted: boolean } >;\n\thandleSetLibraryFontSelected: ( font?: FontFamily ) => void;\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( undefined );\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\t( error as Error ).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\tsize=\"medium\"\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"],
|
|
5
|
-
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA,+BAA+B;AAAA,EAC/B,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,SAAS,iBAAiB;AACpD,SAAS,iBAAiB;AAC1B,SAAS,YAAY,WAAW,gBAAgB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\tNavigator,\n\tuseNavigator,\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as WCText,\n\t__experimentalVStack as VStack,\n\tFlex,\n\tNotice,\n\tProgressBar,\n\tCheckboxControl,\n} from '@wordpress/components';\nimport { useEntityRecord, store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useEffect, useMemo, useState } from '@wordpress/element';\nimport { __, _x, sprintf, isRTL } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport type {\n\tFontFamilyPreset,\n\tGlobalStylesConfig,\n} from '@wordpress/global-styles-engine';\nimport type { FontFamily } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport FontCard from './font-card';\nimport LibraryFontVariant from './library-font-variant';\nimport { sortFontFaces } from './utils/sort-font-faces';\nimport {\n\tsetUIValuesNeeded,\n\tloadFontFaceInBrowser,\n\tunloadFontFaceInBrowser,\n\tgetDisplaySrcFromFontFace,\n} from './utils';\nimport { useSetting } from '../hooks';\n\n/**\n * Comparison key for font families. Sorts families by slug and faces\n * by style+weight so order differences don't produce false positives.\n *\n * @param fontFamilies Font families record keyed by source (e.g. \"theme\", \"custom\").\n */\nfunction getFontFamiliesKey(\n\tfontFamilies: Record< string, FontFamilyPreset[] > | undefined\n): string {\n\tif ( ! fontFamilies ) {\n\t\treturn '';\n\t}\n\tconst normalized: Record< string, unknown[] > = {};\n\tfor ( const source of Object.keys( fontFamilies ).sort() ) {\n\t\tnormalized[ source ] = ( fontFamilies[ source ] ?? [] )\n\t\t\t.map( ( family ) => ( {\n\t\t\t\tslug: family.slug,\n\t\t\t\tfontFace: ( family.fontFace ?? [] )\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( face ) => `${ face.fontStyle }-${ face.fontWeight }`\n\t\t\t\t\t)\n\t\t\t\t\t.sort(),\n\t\t\t} ) )\n\t\t\t.sort( ( a, b ) => a.slug.localeCompare( b.slug ) );\n\t}\n\treturn JSON.stringify( normalized );\n}\n\nfunction InstalledFonts() {\n\tconst {\n\t\tbaseCustomFonts,\n\t\tlibraryFontSelected,\n\t\thandleSetLibraryFontSelected,\n\t\tuninstallFontFamily,\n\t\tisResolvingLibrary,\n\t\tisInstalling,\n\t\tsaveFontFamilies,\n\t\tgetFontFacesActivated,\n\t} = useContext( FontLibraryContext );\n\n\tconst [ fontFamilies, setFontFamilies ] = useSetting<\n\t\tRecord< string, FontFamilyPreset[] > | undefined\n\t>( 'typography.fontFamilies' );\n\tconst [ lastSelectedFontSlug, setLastSelectedFontSlug ] = useState<\n\t\tstring | undefined\n\t>( undefined );\n\n\tconst [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] =\n\t\tuseState< boolean >( false );\n\tconst [ notice, setNotice ] = useState< {\n\t\ttype: 'success' | 'error' | 'info';\n\t\tmessage: string;\n\t} | null >( null );\n\tconst [ baseFontFamilies ] = useSetting<\n\t\tRecord< string, FontFamilyPreset[] > | undefined\n\t>( 'typography.fontFamilies', undefined, 'base' );\n\tconst globalStylesId = useSelect( ( select ) => {\n\t\tconst { __experimentalGetCurrentGlobalStylesId } = select( coreStore );\n\t\treturn __experimentalGetCurrentGlobalStylesId();\n\t}, [] );\n\tconst globalStyles = useEntityRecord< GlobalStylesConfig >(\n\t\t'root',\n\t\t'globalStyles',\n\t\tglobalStylesId\n\t);\n\tconst editedFontFamilies =\n\t\tglobalStyles?.edits?.settings?.typography?.fontFamilies;\n\tconst savedFontFamilies =\n\t\tglobalStyles?.record?.settings?.typography?.fontFamilies;\n\tconst fontFamiliesHasChanges = useMemo( () => {\n\t\tif ( editedFontFamilies === undefined ) {\n\t\t\treturn false;\n\t\t}\n\t\treturn (\n\t\t\tgetFontFamiliesKey( editedFontFamilies ) !==\n\t\t\tgetFontFamiliesKey( savedFontFamilies )\n\t\t);\n\t}, [ editedFontFamilies, savedFontFamilies ] );\n\n\tconst themeFonts = fontFamilies?.theme\n\t\t? fontFamilies.theme\n\t\t\t\t.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )\n\t\t\t\t.sort( ( a, b ) => a.name.localeCompare( b.name ) )\n\t\t: [];\n\tconst themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) );\n\tconst baseThemeFonts = baseFontFamilies?.theme\n\t\t? themeFonts.concat(\n\t\t\t\tbaseFontFamilies.theme\n\t\t\t\t\t.filter( ( f ) => ! themeFontsSlugs.has( f.slug ) )\n\t\t\t\t\t.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )\n\t\t\t\t\t.sort( ( a, b ) => a.name.localeCompare( b.name ) )\n\t\t )\n\t\t: [];\n\n\tconst customFontFamilyId =\n\t\tlibraryFontSelected?.source === 'custom' && libraryFontSelected?.id;\n\n\tconst canUserDelete = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canUser } = select( coreStore );\n\t\t\treturn (\n\t\t\t\tcustomFontFamilyId &&\n\t\t\t\tcanUser( 'delete', {\n\t\t\t\t\tkind: 'postType',\n\t\t\t\t\tname: 'wp_font_family',\n\t\t\t\t\tid: customFontFamilyId,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ customFontFamilyId ]\n\t);\n\n\tconst shouldDisplayDeleteButton =\n\t\t!! libraryFontSelected &&\n\t\tlibraryFontSelected?.source !== 'theme' &&\n\t\tcanUserDelete;\n\n\tconst handleUninstallClick = () => {\n\t\tsetIsConfirmDeleteOpen( true );\n\t};\n\n\tconst handleUpdate = async () => {\n\t\tsetNotice( null );\n\t\ttry {\n\t\t\tawait saveFontFamilies( fontFamilies );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Font family updated 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: sprintf(\n\t\t\t\t\t/* translators: %s: error message */\n\t\t\t\t\t__( 'There was an error updating the font family. %s' ),\n\t\t\t\t\t( error as Error ).message\n\t\t\t\t),\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst getFontFacesToDisplay = ( font: FontFamily ) => {\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: FontFamily ) => {\n\t\tconst variantsInstalled =\n\t\t\tfont?.fontFace && ( font?.fontFace?.length ?? 0 ) > 0\n\t\t\t\t? font.fontFace.length\n\t\t\t\t: 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$d of %2$d active' ),\n\t\t\tvariantsActive,\n\t\t\tvariantsInstalled\n\t\t);\n\t};\n\n\tuseEffect( () => {\n\t\thandleSetLibraryFontSelected( libraryFontSelected );\n\t}, [] );\n\n\t// Get activated fonts count.\n\tconst activeFontsCount = libraryFontSelected\n\t\t? getFontFacesActivated(\n\t\t\t\tlibraryFontSelected.slug,\n\t\t\t\tlibraryFontSelected.source\n\t\t ).length\n\t\t: 0;\n\n\tconst selectedFontsCount =\n\t\tlibraryFontSelected?.fontFace?.length ??\n\t\t( libraryFontSelected?.fontFamily ? 1 : 0 );\n\n\t// Check if any fonts are selected.\n\tconst isIndeterminate =\n\t\tactiveFontsCount > 0 && activeFontsCount !== selectedFontsCount;\n\n\t// Check if all fonts are selected.\n\tconst isSelectAllChecked = activeFontsCount === selectedFontsCount;\n\n\t// Toggle select all fonts.\n\tconst toggleSelectAll = () => {\n\t\tif ( ! libraryFontSelected || ! libraryFontSelected?.source ) {\n\t\t\treturn;\n\t\t}\n\t\tconst initialFonts =\n\t\t\tfontFamilies?.[ libraryFontSelected.source ]?.filter(\n\t\t\t\t( f ) => f.slug !== libraryFontSelected.slug\n\t\t\t) ?? [];\n\t\tconst newFonts = isSelectAllChecked\n\t\t\t? initialFonts\n\t\t\t: [ ...initialFonts, libraryFontSelected ];\n\n\t\tsetFontFamilies( {\n\t\t\t...fontFamilies,\n\t\t\t[ libraryFontSelected.source ]: newFonts,\n\t\t} );\n\n\t\tif ( libraryFontSelected.fontFace ) {\n\t\t\tlibraryFontSelected.fontFace.forEach( ( face ) => {\n\t\t\t\tif ( isSelectAllChecked ) {\n\t\t\t\t\tunloadFontFaceInBrowser( face, 'all' );\n\t\t\t\t} else {\n\t\t\t\t\tconst displaySrc = getDisplaySrcFromFontFace(\n\t\t\t\t\t\tface?.src ?? ''\n\t\t\t\t\t);\n\t\t\t\t\tif ( displaySrc ) {\n\t\t\t\t\t\tloadFontFaceInBrowser( face, displaySrc, 'all' );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst hasFonts = baseThemeFonts.length > 0 || baseCustomFonts.length > 0;\n\treturn (\n\t\t<div className=\"font-library__tabpanel-layout\">\n\t\t\t{ isResolvingLibrary && (\n\t\t\t\t<div className=\"font-library__loading\">\n\t\t\t\t\t<ProgressBar />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ ! isResolvingLibrary && (\n\t\t\t\t<>\n\t\t\t\t\t<Navigator\n\t\t\t\t\t\tinitialPath={\n\t\t\t\t\t\t\tlibraryFontSelected ? '/fontFamily' : '/'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Navigator.Screen path=\"/\">\n\t\t\t\t\t\t\t<VStack spacing=\"8\">\n\t\t\t\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ ! hasFonts && (\n\t\t\t\t\t\t\t\t\t<WCText as=\"p\">\n\t\t\t\t\t\t\t\t\t\t{ __( 'No fonts installed.' ) }\n\t\t\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ baseThemeFonts.length > 0 && (\n\t\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t\t<h2 className=\"font-library__fonts-title\">\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: Heading for a list of fonts provided by the theme. */\n\t\t\t\t\t\t\t\t\t\t\t\t_x( 'Theme', 'font source' )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ baseThemeFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnavigatorPath=\"/fontFamily\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariantsText={ getFontCardVariantsText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tshouldFocus={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont.slug ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlastSelectedFontSlug\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ baseCustomFonts.length > 0 && (\n\t\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t\t<h2 className=\"font-library__fonts-title\">\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: Heading for a list of fonts installed by the user. */\n\t\t\t\t\t\t\t\t\t\t\t\t_x( 'Custom', 'font source' )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ baseCustomFonts.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ font.slug }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnavigatorPath=\"/fontFamily\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariantsText={ getFontCardVariantsText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tshouldFocus={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont.slug ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlastSelectedFontSlug\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</Navigator.Screen>\n\n\t\t\t\t\t\t<Navigator.Screen path=\"/fontFamily\">\n\t\t\t\t\t\t\t{ libraryFontSelected && (\n\t\t\t\t\t\t\t\t<ConfirmDeleteDialog\n\t\t\t\t\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\t\t\t\t\tisOpen={ isConfirmDeleteOpen }\n\t\t\t\t\t\t\t\t\tsetIsOpen={ setIsConfirmDeleteOpen }\n\t\t\t\t\t\t\t\t\tsetNotice={ setNotice }\n\t\t\t\t\t\t\t\t\tuninstallFontFamily={ uninstallFontFamily }\n\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected={\n\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected\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\n\t\t\t\t\t\t\t<Flex justify=\"flex-start\">\n\t\t\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronRight : chevronLeft\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tsetLastSelectedFontSlug(\n\t\t\t\t\t\t\t\t\t\t\tlibraryFontSelected?.slug\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\thandleSetLibraryFontSelected(\n\t\t\t\t\t\t\t\t\t\t\tundefined\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ libraryFontSelected?.name }\n\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\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={ 4 } />\n\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\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\t\t) }\n\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__select-all\"\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Select all' ) }\n\t\t\t\t\t\t\t\t\tchecked={ isSelectAllChecked }\n\t\t\t\t\t\t\t\t\tonChange={ toggleSelectAll }\n\t\t\t\t\t\t\t\t\tindeterminate={ isIndeterminate }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ libraryFontSelected &&\n\t\t\t\t\t\t\t\t\t\tgetFontFacesToDisplay(\n\t\t\t\t\t\t\t\t\t\t\tlibraryFontSelected\n\t\t\t\t\t\t\t\t\t\t).map( ( face, i ) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<LibraryFontVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ libraryFontSelected }\n\t\t\t\t\t\t\t\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t</Navigator>\n\n\t\t\t\t\t<HStack justify=\"flex-end\" className=\"font-library__footer\">\n\t\t\t\t\t\t{ isInstalling && <ProgressBar /> }\n\t\t\t\t\t\t{ shouldDisplayDeleteButton && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tisDestructive\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleUninstallClick }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ handleUpdate }\n\t\t\t\t\t\t\tdisabled={ ! fontFamiliesHasChanges }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Update' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction ConfirmDeleteDialog( {\n\tfont,\n\tisOpen,\n\tsetIsOpen,\n\tsetNotice,\n\tuninstallFontFamily,\n\thandleSetLibraryFontSelected,\n}: {\n\tfont: FontFamily;\n\tisOpen: boolean;\n\tsetIsOpen: ( isOpen: boolean ) => void;\n\tsetNotice: (\n\t\tnotice: {\n\t\t\ttype: 'success' | 'error' | 'info';\n\t\t\tmessage: string;\n\t\t} | null\n\t) => void;\n\tuninstallFontFamily: (\n\t\tfontFamily: FontFamily\n\t) => Promise< { deleted: boolean } >;\n\thandleSetLibraryFontSelected: ( font?: FontFamily ) => void;\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( undefined );\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\t( error as Error ).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\tsize=\"medium\"\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
// packages/global-styles-ui/src/variations/variation.tsx
|
|
2
2
|
import clsx from "clsx";
|
|
3
|
-
import { Tooltip as WCTooltip } from "@wordpress/components";
|
|
4
3
|
import { useMemo, useContext, useState } from "@wordpress/element";
|
|
5
4
|
import { ENTER } from "@wordpress/keycodes";
|
|
6
5
|
import { _x, sprintf } from "@wordpress/i18n";
|
|
@@ -8,9 +7,10 @@ import {
|
|
|
8
7
|
areGlobalStylesEqual,
|
|
9
8
|
mergeGlobalStyles
|
|
10
9
|
} from "@wordpress/global-styles-engine";
|
|
10
|
+
import { Tooltip } from "@wordpress/ui";
|
|
11
11
|
import { GlobalStylesContext } from "../context.mjs";
|
|
12
12
|
import { filterObjectByProperties } from "../utils.mjs";
|
|
13
|
-
import { jsx } from "react/jsx-runtime";
|
|
13
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
14
14
|
function Variation({
|
|
15
15
|
variation,
|
|
16
16
|
children,
|
|
@@ -82,7 +82,10 @@ function Variation({
|
|
|
82
82
|
)
|
|
83
83
|
}
|
|
84
84
|
);
|
|
85
|
-
return /* @__PURE__ */ jsx(GlobalStylesContext.Provider, { value: context, children: showTooltip ? /* @__PURE__ */
|
|
85
|
+
return /* @__PURE__ */ jsx(GlobalStylesContext.Provider, { value: context, children: showTooltip ? /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
|
|
86
|
+
/* @__PURE__ */ jsx(Tooltip.Trigger, { render: content }),
|
|
87
|
+
/* @__PURE__ */ jsx(Tooltip.Popup, { children: variation?.title })
|
|
88
|
+
] }) : content });
|
|
86
89
|
}
|
|
87
90
|
export {
|
|
88
91
|
Variation as default
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/variations/variation.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\
|
|
5
|
-
"mappings": ";AAGA,OAAO,UAAU;
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport { _x, sprintf } from '@wordpress/i18n';\nimport {\n\tareGlobalStylesEqual,\n\tmergeGlobalStyles,\n} from '@wordpress/global-styles-engine';\n// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.\nimport { Tooltip } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from '../context';\n\nimport { filterObjectByProperties } from '../utils';\n\ninterface VariationProps {\n\tvariation: any;\n\tchildren: ( isFocused: boolean ) => React.ReactNode;\n\tisPill?: boolean;\n\tproperties?: string[];\n\tshowTooltip?: boolean;\n}\n\nexport default function Variation( {\n\tvariation,\n\tchildren,\n\tisPill = false,\n\tproperties,\n\tshowTooltip = false,\n}: VariationProps ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst {\n\t\tbase,\n\t\tuser,\n\t\tonChange: setUserConfig,\n\t} = useContext( GlobalStylesContext );\n\n\tconst context = useMemo( () => {\n\t\tlet merged = mergeGlobalStyles( base, variation );\n\t\tif ( properties ) {\n\t\t\tmerged = filterObjectByProperties( merged, properties );\n\t\t}\n\t\treturn {\n\t\t\tuser: variation,\n\t\t\tbase,\n\t\t\tmerged,\n\t\t\tonChange: () => {},\n\t\t};\n\t}, [ variation, base, properties ] );\n\n\tconst selectVariation = () => setUserConfig( variation );\n\n\tconst selectOnEnter = ( event: React.KeyboardEvent ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo(\n\t\t() => areGlobalStylesEqual( user, variation ),\n\t\t[ user, variation ]\n\t);\n\n\tlet label = variation?.title;\n\tif ( variation?.description ) {\n\t\tlabel = sprintf(\n\t\t\t/* translators: 1: variation title. 2: variation description. */\n\t\t\t_x( '%1$s (%2$s)', 'variation label' ),\n\t\t\tvariation?.title,\n\t\t\tvariation?.description\n\t\t);\n\t}\n\n\tconst content = (\n\t\t<div\n\t\t\tclassName={ clsx( 'global-styles-ui-variations_item', {\n\t\t\t\t'is-active': isActive,\n\t\t\t} ) }\n\t\t\trole=\"button\"\n\t\t\tonClick={ selectVariation }\n\t\t\tonKeyDown={ selectOnEnter }\n\t\t\ttabIndex={ 0 }\n\t\t\taria-label={ label }\n\t\t\taria-current={ isActive }\n\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'global-styles-ui-variations_item-preview', {\n\t\t\t\t\t'is-pill': isPill,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ children( isFocused ) }\n\t\t\t</div>\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t{ showTooltip ? (\n\t\t\t\t<Tooltip.Root>\n\t\t\t\t\t<Tooltip.Trigger render={ content } />\n\t\t\t\t\t<Tooltip.Popup>{ variation?.title }</Tooltip.Popup>\n\t\t\t\t</Tooltip.Root>\n\t\t\t) : (\n\t\t\t\tcontent\n\t\t\t) }\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,OAAO,UAAU;AAEjB,SAAS,SAAS,YAAY,gBAAgB;AAC9C,SAAS,aAAa;AACtB,SAAS,IAAI,eAAe;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,OACM;AAEP,SAAS,eAAe;AAKxB,SAAS,2BAA2B;AAEpC,SAAS,gCAAgC;AA2EtC,cAaC,YAbD;AAjEY,SAAR,UAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,cAAc;AACf,GAAoB;AACnB,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACX,IAAI,WAAY,mBAAoB;AAEpC,QAAM,UAAU,QAAS,MAAM;AAC9B,QAAI,SAAS,kBAAmB,MAAM,SAAU;AAChD,QAAK,YAAa;AACjB,eAAS,yBAA0B,QAAQ,UAAW;AAAA,IACvD;AACA,WAAO;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAAC;AAAA,IAClB;AAAA,EACD,GAAG,CAAE,WAAW,MAAM,UAAW,CAAE;AAEnC,QAAM,kBAAkB,MAAM,cAAe,SAAU;AAEvD,QAAM,gBAAgB,CAAE,UAAgC;AACvD,QAAK,MAAM,YAAY,OAAQ;AAC9B,YAAM,eAAe;AACrB,sBAAgB;AAAA,IACjB;AAAA,EACD;AAEA,QAAM,WAAW;AAAA,IAChB,MAAM,qBAAsB,MAAM,SAAU;AAAA,IAC5C,CAAE,MAAM,SAAU;AAAA,EACnB;AAEA,MAAI,QAAQ,WAAW;AACvB,MAAK,WAAW,aAAc;AAC7B,YAAQ;AAAA;AAAA,MAEP,GAAI,eAAe,iBAAkB;AAAA,MACrC,WAAW;AAAA,MACX,WAAW;AAAA,IACZ;AAAA,EACD;AAEA,QAAM,UACL;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,oCAAoC;AAAA,QACrD,aAAa;AAAA,MACd,CAAE;AAAA,MACF,MAAK;AAAA,MACL,SAAU;AAAA,MACV,WAAY;AAAA,MACZ,UAAW;AAAA,MACX,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,SAAU,MAAM,aAAc,IAAK;AAAA,MACnC,QAAS,MAAM,aAAc,KAAM;AAAA,MAEnC;AAAA,QAAC;AAAA;AAAA,UACA,WAAY,KAAM,4CAA4C;AAAA,YAC7D,WAAW;AAAA,UACZ,CAAE;AAAA,UAEA,mBAAU,SAAU;AAAA;AAAA,MACvB;AAAA;AAAA,EACD;AAGD,SACC,oBAAC,oBAAoB,UAApB,EAA6B,OAAQ,SACnC,wBACD,qBAAC,QAAQ,MAAR,EACA;AAAA,wBAAC,QAAQ,SAAR,EAAgB,QAAS,SAAU;AAAA,IACpC,oBAAC,QAAQ,OAAR,EAAgB,qBAAW,OAAO;AAAA,KACpC,IAEA,SAEF;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -648,22 +648,21 @@ button.font-library__upload-area {
|
|
|
648
648
|
flex-direction: column;
|
|
649
649
|
margin: 16px;
|
|
650
650
|
}
|
|
651
|
-
.global-styles-ui-screen-css .
|
|
651
|
+
.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel {
|
|
652
652
|
flex: 1 1 auto;
|
|
653
653
|
}
|
|
654
|
-
.global-styles-ui-screen-css .
|
|
654
|
+
.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input {
|
|
655
655
|
flex: 1 1 auto;
|
|
656
656
|
display: flex;
|
|
657
657
|
flex-direction: column;
|
|
658
658
|
}
|
|
659
|
-
.global-styles-ui-screen-css .
|
|
659
|
+
.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
|
|
660
660
|
flex: 1 1 auto;
|
|
661
661
|
display: flex;
|
|
662
662
|
flex-direction: column;
|
|
663
663
|
}
|
|
664
|
-
.global-styles-ui-screen-css .
|
|
664
|
+
.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input textarea {
|
|
665
665
|
flex: 1 1 auto;
|
|
666
|
-
direction: ltr;
|
|
667
666
|
}
|
|
668
667
|
|
|
669
668
|
.global-styles-ui-screen-css-help-link {
|
package/build-style/style.css
CHANGED
|
@@ -650,23 +650,21 @@ button.font-library__upload-area {
|
|
|
650
650
|
flex-direction: column;
|
|
651
651
|
margin: 16px;
|
|
652
652
|
}
|
|
653
|
-
.global-styles-ui-screen-css .
|
|
653
|
+
.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel {
|
|
654
654
|
flex: 1 1 auto;
|
|
655
655
|
}
|
|
656
|
-
.global-styles-ui-screen-css .
|
|
656
|
+
.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input {
|
|
657
657
|
flex: 1 1 auto;
|
|
658
658
|
display: flex;
|
|
659
659
|
flex-direction: column;
|
|
660
660
|
}
|
|
661
|
-
.global-styles-ui-screen-css .
|
|
661
|
+
.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
|
|
662
662
|
flex: 1 1 auto;
|
|
663
663
|
display: flex;
|
|
664
664
|
flex-direction: column;
|
|
665
665
|
}
|
|
666
|
-
.global-styles-ui-screen-css .
|
|
666
|
+
.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input textarea {
|
|
667
667
|
flex: 1 1 auto;
|
|
668
|
-
/*rtl:ignore*/
|
|
669
|
-
direction: ltr;
|
|
670
668
|
}
|
|
671
669
|
|
|
672
670
|
.global-styles-ui-screen-css-help-link {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import type { FontFamily } from '@wordpress/core-data';
|
|
2
|
-
declare function FontCard({ font, onClick, variantsText, navigatorPath }: {
|
|
2
|
+
declare function FontCard({ font, onClick, variantsText, navigatorPath, shouldFocus }: {
|
|
3
3
|
font: FontFamily;
|
|
4
4
|
onClick: () => void;
|
|
5
5
|
variantsText?: string;
|
|
6
6
|
navigatorPath?: string;
|
|
7
|
+
shouldFocus?: boolean;
|
|
7
8
|
}): import("react").JSX.Element;
|
|
8
9
|
export default FontCard;
|
|
9
10
|
//# sourceMappingURL=font-card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"font-card.d.ts","sourceRoot":"","sources":["../../src/font-library/font-card.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"font-card.d.ts","sourceRoot":"","sources":["../../src/font-library/font-card.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAOvD,iBAAS,QAAQ,CAAE,EAClB,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,aAAa,EACb,WAAW,EACX,EAAE;IACF,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,+BAqDA;eAEc,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"font-collection.d.ts","sourceRoot":"","sources":["../../src/font-library/font-collection.tsx"],"names":[],"mappings":"AAoEA,iBAAS,cAAc,CAAE,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+
|
|
1
|
+
{"version":3,"file":"font-collection.d.ts","sourceRoot":"","sources":["../../src/font-library/font-collection.tsx"],"names":[],"mappings":"AAoEA,iBAAS,cAAc,CAAE,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BA6flD;eAEc,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"installed-fonts.d.ts","sourceRoot":"","sources":["../../src/font-library/installed-fonts.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"installed-fonts.d.ts","sourceRoot":"","sources":["../../src/font-library/installed-fonts.tsx"],"names":[],"mappings":"AAwEA,iBAAS,cAAc,gCAictB;eAwEc,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"variation.d.ts","sourceRoot":"","sources":["../../src/variations/variation.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"variation.d.ts","sourceRoot":"","sources":["../../src/variations/variation.tsx"],"names":[],"mappings":"AAsBA,UAAU,cAAc;IACvB,SAAS,EAAE,GAAG,CAAC;IACf,QAAQ,EAAE,CAAE,SAAS,EAAE,OAAO,KAAM,KAAK,CAAC,SAAS,CAAC;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAE,EAClC,SAAS,EACT,QAAQ,EACR,MAAc,EACd,UAAU,EACV,WAAmB,EACnB,EAAE,cAAc,+BAiFhB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/global-styles-ui",
|
|
3
|
-
"version": "1.15.
|
|
3
|
+
"version": "1.15.1",
|
|
4
4
|
"description": "Global Styles UI components for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -42,27 +42,32 @@
|
|
|
42
42
|
"./package.json": "./package.json",
|
|
43
43
|
"./build-style/": "./build-style/"
|
|
44
44
|
},
|
|
45
|
-
"react-native": "src/index",
|
|
46
45
|
"dependencies": {
|
|
47
|
-
"@
|
|
48
|
-
"@wordpress/
|
|
49
|
-
"@wordpress/
|
|
50
|
-
"@wordpress/
|
|
51
|
-
"@wordpress/
|
|
52
|
-
"@wordpress/
|
|
53
|
-
"@wordpress/
|
|
54
|
-
"@wordpress/
|
|
55
|
-
"@wordpress/data": "^
|
|
56
|
-
"@wordpress/
|
|
57
|
-
"@wordpress/
|
|
58
|
-
"@wordpress/
|
|
59
|
-
"@wordpress/
|
|
60
|
-
"@wordpress/
|
|
61
|
-
"@wordpress/
|
|
62
|
-
"@wordpress/
|
|
46
|
+
"@types/react": "^18.3.27",
|
|
47
|
+
"@wordpress/a11y": "^4.48.1",
|
|
48
|
+
"@wordpress/api-fetch": "^7.48.1",
|
|
49
|
+
"@wordpress/base-styles": "^10.0.1",
|
|
50
|
+
"@wordpress/block-editor": "^15.21.1",
|
|
51
|
+
"@wordpress/blocks": "^15.21.1",
|
|
52
|
+
"@wordpress/components": "^35.0.1",
|
|
53
|
+
"@wordpress/compose": "^8.1.1",
|
|
54
|
+
"@wordpress/core-data": "^7.48.1",
|
|
55
|
+
"@wordpress/data": "^10.48.1",
|
|
56
|
+
"@wordpress/date": "^5.48.1",
|
|
57
|
+
"@wordpress/element": "^8.0.1",
|
|
58
|
+
"@wordpress/global-styles-engine": "^1.15.1",
|
|
59
|
+
"@wordpress/i18n": "^6.21.1",
|
|
60
|
+
"@wordpress/icons": "^14.0.1",
|
|
61
|
+
"@wordpress/keycodes": "^4.48.1",
|
|
62
|
+
"@wordpress/private-apis": "^1.48.1",
|
|
63
|
+
"@wordpress/ui": "^0.15.1",
|
|
63
64
|
"change-case": "^4.1.2",
|
|
64
|
-
"clsx": "^2.1.
|
|
65
|
-
"colord": "^2.
|
|
65
|
+
"clsx": "^2.1.1",
|
|
66
|
+
"colord": "^2.9.3"
|
|
67
|
+
},
|
|
68
|
+
"devDependencies": {
|
|
69
|
+
"@testing-library/dom": "^10.4.1",
|
|
70
|
+
"@testing-library/react": "^16.3.2"
|
|
66
71
|
},
|
|
67
72
|
"peerDependencies": {
|
|
68
73
|
"react": "^18.0.0",
|
|
@@ -71,5 +76,5 @@
|
|
|
71
76
|
"publishConfig": {
|
|
72
77
|
"access": "public"
|
|
73
78
|
},
|
|
74
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
|
|
75
80
|
}
|