Font Library: Use Interface datastore for modal state management

WordPress · Jan 27, 2024 · 741ac46 · 741ac46
1 parent dfa9efd
commit 741ac46
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 91 deletions.
diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
@@ -14,6 +14,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import Layout from '../layout';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
+import FontLibraryProvider from '../global-styles/font-library-provider';
 import { unlock } from '../../lock-unlock';
 
 const { RouterProvider } = unlock( routerPrivateApis );
@@ -37,10 +38,12 @@ export default function App() {
 		<SlotFillProvider>
 			<GlobalStylesProvider>
 				<UnsavedChangesWarning />
-				<RouterProvider>
-					<Layout />
-					<PluginArea onError={ onPluginAreaError } />
-				</RouterProvider>
+				<FontLibraryProvider>
+					<RouterProvider>
+						<Layout />
+						<PluginArea onError={ onPluginAreaError } />
+					</RouterProvider>
+				</FontLibraryProvider>
 			</GlobalStylesProvider>
 		</SlotFillProvider>
 	);

diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
@@ -11,67 +12,47 @@ import {
 } from '@wordpress/components';
 import { typography } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
-import FontLibraryProvider, {
-	FontLibraryContext,
-} from './font-library-modal/context';
-import FontLibraryModal from './font-library-modal';
+import { FontLibraryContext } from './font-library-provider';
 import FontFamilyItem from './font-family-item';
 import Subtitle from './subtitle';
+import { FONT_LIBRARY_MODAL_NAME } from './font-library-modal';
 
-function FontFamilies() {
-	const { modalTabOpen, toggleModal, themeFonts, customFonts } =
-		useContext( FontLibraryContext );
-
+export default function FontFamilies() {
+	const { themeFonts, customFonts } = useContext( FontLibraryContext );
+	const { openModal } = useDispatch( interfaceStore );
 	const hasFonts = 0 < customFonts.length || 0 < themeFonts.length;
 
 	return (
-		<>
-			{ !! modalTabOpen && (
-				<FontLibraryModal
-					onRequestClose={ () => toggleModal() }
-					initialTabName={ modalTabOpen }
-				/>
-			) }
-
-			<VStack spacing={ 3 }>
-				<HStack justify="space-between">
-					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-					<HStack justify="flex-end">
-						<Tooltip text={ __( 'Manage fonts' ) }>
-							<Button
-								onClick={ () =>
-									toggleModal( 'installed-fonts' )
-								}
-								aria-label={ __( 'Manage fonts' ) }
-								icon={ typography }
-								size={ 'small' }
-							/>
-						</Tooltip>
-					</HStack>
+		<VStack spacing={ 3 }>
+			<HStack justify="space-between">
+				<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+				<HStack justify="flex-end">
+					<Tooltip text={ __( 'Manage fonts' ) }>
+						<Button
+							onClick={ () =>
+								openModal( FONT_LIBRARY_MODAL_NAME )
+							}
+							aria-label={ __( 'Manage fonts' ) }
+							icon={ typography }
+							size={ 'small' }
+						/>
+					</Tooltip>
 				</HStack>
-				{ hasFonts ? (
-					<ItemGroup isBordered isSeparated>
-						{ customFonts.map( ( font ) => (
-							<FontFamilyItem key={ font.slug } font={ font } />
-						) ) }
-						{ themeFonts.map( ( font ) => (
-							<FontFamilyItem key={ font.slug } font={ font } />
-						) ) }
-					</ItemGroup>
-				) : (
-					<>{ __( 'No fonts installed.' ) }</>
-				) }
-			</VStack>
-		</>
+			</HStack>
+			{ hasFonts ? (
+				<ItemGroup isBordered isSeparated>
+					{ [ ...customFonts, ...themeFonts ].map( ( font ) => (
+						<FontFamilyItem key={ font.slug } font={ font } />
+					) ) }
+				</ItemGroup>
+			) : (
+				<>{ __( 'No fonts installed.' ) }</>
+			) }
+		</VStack>
 	);
 }
-
-export default ( { ...props } ) => (
-	<FontLibraryProvider>
-		<FontFamilies { ...props } />
-	</FontLibraryProvider>
-);
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
@@ -2,28 +2,31 @@
  * WordPress dependencies
  */
 import { _n, sprintf } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
 import {
 	__experimentalHStack as HStack,
 	__experimentalItem as Item,
 	FlexItem,
 } from '@wordpress/components';
 import { useContext } from '@wordpress/element';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
-import { FontLibraryContext } from './font-library-modal/context';
+import { FontLibraryContext } from './font-library-provider';
 import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
+import { FONT_LIBRARY_MODAL_NAME } from './font-library-modal';
 
 function FontFamilyItem( { font } ) {
-	const { handleSetLibraryFontSelected, toggleModal } =
-		useContext( FontLibraryContext );
+	const { handleSetLibraryFontSelected } = useContext( FontLibraryContext );
+	const { openModal } = useDispatch( interfaceStore );
 
 	const variantsCount = font?.fontFace?.length || 1;
 
 	const handleClick = () => {
 		handleSetLibraryFontSelected( font );
-		toggleModal( 'installed-fonts' );
+		openModal( FONT_LIBRARY_MODAL_NAME );
 	};
 
 	const previewStyle = getFamilyPreviewStyle( font );

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -21,7 +21,7 @@ import { search, closeSmall } from '@wordpress/icons';
  * Internal dependencies
  */
 import TabPanelLayout from './tab-panel-layout';
-import { FontLibraryContext } from './context';
+import { FontLibraryContext } from '../font-library-provider';
 import FontsGrid from './fonts-grid';
 import FontCard from './font-card';
 import filterFonts from './utils/filter-fonts';

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
@@ -7,7 +7,7 @@ import { useContext, useEffect, useState, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { FontLibraryContext } from './context';
+import { FontLibraryContext } from '../font-library-provider';
 import { getFacePreviewStyle } from './utils/preview-styles';
 
 function getPreviewUrl( fontFace ) {

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -7,16 +7,20 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useContext } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
 import InstalledFonts from './installed-fonts';
 import FontCollection from './font-collection';
 import UploadFonts from './upload-fonts';
-import { FontLibraryContext } from './context';
+import { FontLibraryContext } from '../font-library-provider';
 import { unlock } from '../../../lock-unlock';
 
+export const FONT_LIBRARY_MODAL_NAME = 'edit-site/font-library';
+
 const { Tabs } = unlock( componentsPrivateApis );
 
 const DEFAULT_TABS = [
@@ -39,12 +43,18 @@ const tabsFromCollections = ( collections ) =>
 				: name,
 	} ) );
 
-function FontLibraryModal( {
-	onRequestClose,
-	initialTabId = 'installed-fonts',
-} ) {
+export default function FontLibraryModal() {
 	const { collections, setNotice } = useContext( FontLibraryContext );
 
+	const isModalActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( FONT_LIBRARY_MODAL_NAME )
+	);
+	const { closeModal } = useDispatch( interfaceStore );
+
+	if ( ! isModalActive ) {
+		return null;
+	}
+
 	const tabs = [
 		...DEFAULT_TABS,
 		...tabsFromCollections( collections || [] ),
@@ -58,12 +68,12 @@ function FontLibraryModal( {
 	return (
 		<Modal
 			title={ __( 'Fonts' ) }
-			onRequestClose={ onRequestClose }
+			onRequestClose={ closeModal }
 			isFullScreen
 			className="font-library-modal"
 		>
 			<div className="font-library-modal__tabs">
-				<Tabs initialTabId={ initialTabId } onSelect={ onSelect }>
+				<Tabs onSelect={ onSelect }>
 					<Tabs.TabList>
 						{ tabs.map( ( { id, title } ) => (
 							<Tabs.Tab key={ id } tabId={ id }>
@@ -98,5 +108,3 @@ function FontLibraryModal( {
 		</Modal>
 	);
 }
-
-export default FontLibraryModal;
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
@@ -16,7 +16,7 @@ import {
  * Internal dependencies
  */
 import TabPanelLayout from './tab-panel-layout';
-import { FontLibraryContext } from './context';
+import { FontLibraryContext } from '../font-library-provider';
 import FontsGrid from './fonts-grid';
 import LibraryFontDetails from './library-font-details';
 import LibraryFontCard from './library-font-card';

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js
@@ -8,7 +8,7 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import FontCard from './font-card';
-import { FontLibraryContext } from './context';
+import { FontLibraryContext } from '../font-library-provider';
 
 function LibraryFontCard( { font, ...props } ) {
 	const { getFontFacesActivated } = useContext( FontLibraryContext );

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -12,7 +12,7 @@ import {
  * Internal dependencies
  */
 import { getFontFaceVariantName } from './utils';
-import { FontLibraryContext } from './context';
+import { FontLibraryContext } from '../font-library-provider';
 import FontFaceDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
@@ -18,7 +18,7 @@ import { useContext, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { ALLOWED_FILE_EXTENSIONS } from './utils/constants';
-import { FontLibraryContext } from './context';
+import { FontLibraryContext } from '../font-library-provider';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';

diff --git a/...obal-styles/font-library-modal/context.js → ...ts/global-styles/font-library-provider.js b/...obal-styles/font-library-modal/context.js → ...ts/global-styles/font-library-provider.js
@@ -20,8 +20,8 @@ import {
 	fetchUninstallFontFamily,
 	fetchFontCollections,
 	fetchFontCollection,
-} from './resolvers';
-import { unlock } from '../../../lock-unlock';
+} from './font-library-modal/resolvers';
+import { unlock } from '../../lock-unlock';
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 import {
 	setUIValuesNeeded,
@@ -32,8 +32,8 @@ import {
 	makeFontFamilyFormData,
 	batchInstallFontFaces,
 	checkFontFaceInstalled,
-} from './utils';
-import { toggleFont } from './utils/toggleFont';
+} from './font-library-modal/utils';
+import { toggleFont } from './font-library-modal/utils/toggleFont';
 
 export const FontLibraryContext = createContext( {} );
 
@@ -110,7 +110,6 @@ function FontLibraryProvider( { children } ) {
 	};
 
 	// Library Fonts
-	const [ modalTabOpen, setModalTabOpen ] = useState( false );
 	const [ libraryFontSelected, setLibraryFontSelected ] = useState( null );
 
 	const baseThemeFonts = baseFontFamilies?.theme
@@ -137,12 +136,6 @@ function FontLibraryProvider( { children } ) {
 				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
 		: [];
 
-	useEffect( () => {
-		if ( ! modalTabOpen ) {
-			setLibraryFontSelected( null );
-		}
-	}, [ modalTabOpen ] );
-
 	const handleSetLibraryFontSelected = ( font ) => {
 		setNotice( null );
 
@@ -164,10 +157,6 @@ function FontLibraryProvider( { children } ) {
 		} );
 	};
 
-	const toggleModal = ( tabName ) => {
-		setModalTabOpen( tabName || null );
-	};
-
 	// Demo
 	const [ loadedFontUrls ] = useState( new Set() );
 
@@ -480,8 +469,6 @@ function FontLibraryProvider( { children } ) {
 				uninstallFontFamily,
 				toggleActivateFont,
 				getAvailableFontsOutline,
-				modalTabOpen,
-				toggleModal,
 				refreshLibrary,
 				notice,
 				setNotice,

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -52,6 +52,7 @@ import { useCommonCommands } from '../../hooks/commands/use-common-commands';
 import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
 import { useIsSiteEditorLoading } from './hooks';
 import useLayoutAreas from './router';
+import FontLibraryModal from '../global-styles/font-library-modal';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
@@ -159,6 +160,7 @@ export default function Layout() {
 	return (
 		<>
 			<CommandMenu />
+			<FontLibraryModal />
 			<KeyboardShortcutsRegister />
 			<KeyboardShortcutsGlobal />
 			{ fullResizer }