diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js index 9f381d9d86f18..7713b27e306ef 100644 --- a/packages/edit-site/src/components/global-styles/font-families.js +++ b/packages/edit-site/src/components/global-styles/font-families.js @@ -8,6 +8,7 @@ import { __experimentalHStack as HStack, Button, } from '@wordpress/components'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { settings } from '@wordpress/icons'; import { useContext } from '@wordpress/element'; @@ -20,18 +21,31 @@ import FontLibraryProvider, { import FontLibraryModal from './font-library-modal'; import FontFamilyItem from './font-family-item'; import Subtitle from './subtitle'; +import { setUIValuesNeeded } from './font-library-modal/utils'; +import { unlock } from '../../lock-unlock'; -function FontFamilies() { - const { modalTabOpen, toggleModal, themeFonts, customFonts } = - useContext( FontLibraryContext ); +const { useGlobalSetting } = unlock( blockEditorPrivateApis ); +function FontFamilies() { + const { modalTabOpen, setModalTabOpen } = useContext( FontLibraryContext ); + const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' ); + const themeFonts = fontFamilies?.theme + ? fontFamilies.theme + .map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) ) + .sort( ( a, b ) => a.name.localeCompare( b.name ) ) + : []; + const customFonts = fontFamilies?.custom + ? fontFamilies.custom + .map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) ) + .sort( ( a, b ) => a.name.localeCompare( b.name ) ) + : []; const hasFonts = 0 < customFonts.length || 0 < themeFonts.length; return ( <> { !! modalTabOpen && ( toggleModal() } + onRequestClose={ () => setModalTabOpen( null ) } defaultTabId={ modalTabOpen } /> ) } @@ -40,7 +54,7 @@ function FontFamilies() { { __( 'Fonts' ) } diff --git a/packages/edit-site/src/components/global-styles/font-family-item.js b/packages/edit-site/src/components/global-styles/font-family-item.js index fc5418d5c7eb1..b80865fd2e21a 100644 --- a/packages/edit-site/src/components/global-styles/font-family-item.js +++ b/packages/edit-site/src/components/global-styles/font-family-item.js @@ -16,14 +16,14 @@ import { FontLibraryContext } from './font-library-modal/context'; import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; function FontFamilyItem( { font } ) { - const { handleSetLibraryFontSelected, toggleModal } = + const { handleSetLibraryFontSelected, setModalTabOpen } = useContext( FontLibraryContext ); const variantsCount = font?.fontFace?.length || 1; const handleClick = () => { handleSetLibraryFontSelected( font ); - toggleModal( 'installed-fonts' ); + setModalTabOpen( 'installed-fonts' ); }; const previewStyle = getFamilyPreviewStyle( font ); diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js index 9eafabe9424fb..52a40d7dc9070 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/context.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/context.js @@ -51,8 +51,6 @@ function FontLibraryProvider( { children } ) { 'globalStyles', globalStylesId ); - const fontFamiliesHasChanges = - !! globalStyles?.edits?.settings?.typography?.fontFamilies; const [ isInstalling, setIsInstalling ] = useState( false ); const [ refreshKey, setRefreshKey ] = useState( 0 ); @@ -62,14 +60,11 @@ function FontLibraryProvider( { children } ) { setRefreshKey( Date.now() ); }; - const { - records: libraryPosts = [], - isResolving: isResolvingLibrary, - hasResolved: hasResolvedLibrary, - } = useEntityRecords( 'postType', 'wp_font_family', { - refreshKey, - _embed: true, - } ); + const { records: libraryPosts = [], isResolving: isResolvingLibrary } = + useEntityRecords( 'postType', 'wp_font_family', { + refreshKey, + _embed: true, + } ); const libraryFonts = ( libraryPosts || [] ).map( ( fontFamilyPost ) => { @@ -87,12 +82,6 @@ function FontLibraryProvider( { children } ) { const [ fontFamilies, setFontFamilies ] = useGlobalSetting( 'typography.fontFamilies' ); - // theme.json file font families - const [ baseFontFamilies ] = useGlobalSetting( - 'typography.fontFamilies', - undefined, - 'base' - ); /* * Save the font families to the database. @@ -131,24 +120,6 @@ function FontLibraryProvider( { children } ) { .sort( ( a, b ) => a.name.localeCompare( b.name ) ) : []; - const themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) ); - - /* - * Base Theme Fonts are the fonts defined in the theme.json *file*. - * - * Uses the fonts from global styles + the ones from the theme.json file that hasn't repeated slugs. - * Avoids inconsistencies with the fonts listed in the font library modal as base (inactivated). - * These inconsistencies can happen when the active theme fonts in global styles aren't defined in theme.json file as when a theme style variation is applied. - */ - const baseThemeFonts = baseFontFamilies?.theme - ? themeFonts.concat( - baseFontFamilies.theme - .filter( ( f ) => ! themeFontsSlugs.has( f.slug ) ) - .map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) ) - .sort( ( a, b ) => a.name.localeCompare( b.name ) ) - ) - : []; - const customFonts = fontFamilies?.custom ? fontFamilies.custom .map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) ) @@ -187,10 +158,6 @@ function FontLibraryProvider( { children } ) { } ); }; - const toggleModal = ( tabName ) => { - setModalTabOpen( tabName || null ); - }; - // Demo const [ loadedFontUrls ] = useState( new Set() ); @@ -549,9 +516,6 @@ function FontLibraryProvider( { children } ) { libraryFontSelected, handleSetLibraryFontSelected, fontFamilies, - themeFonts, - baseThemeFonts, - customFonts, baseCustomFonts, isFontActivated, getFontFacesActivated, @@ -561,14 +525,12 @@ function FontLibraryProvider( { children } ) { toggleActivateFont, getAvailableFontsOutline, modalTabOpen, - toggleModal, + setModalTabOpen, refreshLibrary, notice, setNotice, saveFontFamilies, - fontFamiliesHasChanges, isResolvingLibrary, - hasResolvedLibrary, isInstalling, collections, getFontCollection, diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js index e817a49b4172d..fd962618b510a 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js @@ -17,11 +17,12 @@ import { Notice, ProgressBar, } from '@wordpress/components'; -import { store as coreStore } from '@wordpress/core-data'; +import { useEntityRecord, store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { useContext, useEffect, useState } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { chevronLeft } from '@wordpress/icons'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** * Internal dependencies @@ -30,12 +31,15 @@ import { FontLibraryContext } from './context'; import FontCard from './font-card'; import LibraryFontVariant from './library-font-variant'; import { sortFontFaces } from './utils/sort-font-faces'; +import { setUIValuesNeeded } from './utils'; +import { unlock } from '../../../lock-unlock'; + +const { useGlobalSetting } = unlock( blockEditorPrivateApis ); function InstalledFonts() { const { baseCustomFonts, libraryFontSelected, - baseThemeFonts, handleSetLibraryFontSelected, refreshLibrary, uninstallFontFamily, @@ -43,12 +47,44 @@ function InstalledFonts() { isInstalling, saveFontFamilies, getFontFacesActivated, - fontFamiliesHasChanges, notice, setNotice, fontFamilies, } = useContext( FontLibraryContext ); const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false ); + const [ baseFontFamilies ] = useGlobalSetting( + 'typography.fontFamilies', + undefined, + 'base' + ); + const globalStylesId = useSelect( ( select ) => { + const { __experimentalGetCurrentGlobalStylesId } = select( coreStore ); + return __experimentalGetCurrentGlobalStylesId(); + } ); + + const globalStyles = useEntityRecord( + 'root', + 'globalStyles', + globalStylesId + ); + const fontFamiliesHasChanges = + !! globalStyles?.edits?.settings?.typography?.fontFamilies; + + const themeFonts = fontFamilies?.theme + ? fontFamilies.theme + .map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) ) + .sort( ( a, b ) => a.name.localeCompare( b.name ) ) + : []; + const themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) ); + const baseThemeFonts = baseFontFamilies?.theme + ? themeFonts.concat( + baseFontFamilies.theme + .filter( ( f ) => ! themeFontsSlugs.has( f.slug ) ) + .map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) ) + .sort( ( a, b ) => a.name.localeCompare( b.name ) ) + ) + : []; + const customFontFamilyId = libraryFontSelected?.source === 'custom' && libraryFontSelected?.id;