Use NavigatorProvider in Font Library Modal (#59036)

* Use NavigatorProvider in installed fonts panel * Style Changes to font modal installed font details page * Simplified Font Face Demo component so it can be more easily reused * Refactored 'installed-fonts' component to use Navigator Components * Refactored Font Collection tab to use Navigator Provider, refactored Font Card to handle navigator transitions and consolidated components when possible * Corrected/standardized Font Demo component name throughout * Fixed notice display * Fixed focus state outline * Fixed secondary page heading layout * Added hover state to font list items * Simplified and removed 'TabPanelLayout' component * close verify window as soon as user ansswers * Fixed a bug to better support BOTH font FAMILIES as well as font FACES in the Font Demo component. * Returned selected font heading to use Heading instead of Font Demo * Fixed linting error Co-authored-by: pbking <[email protected]> Co-authored-by: matiasbenedetto <[email protected]> Co-authored-by: colorful-tones <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: carolinan <[email protected]> Co-authored-by: afercia <[email protected]> Co-authored-by: joedolson <[email protected]> Co-authored-by: alexstine <[email protected]> Co-authored-by: andrewhayward <[email protected]> Co-authored-by: afragen <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: juanfra <[email protected]> Co-authored-by: okmttdhr <[email protected]>
WordPress · Feb 27, 2024 · fdc1d25 · fdc1d25
1 parent 472414f
commit fdc1d25
Show file tree

Hide file tree

Showing 12 changed files with 580 additions and 586 deletions.
diff --git a/...ages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js b/...ages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js
diff --git a/...ages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/...ages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -11,7 +11,7 @@ import {
  * Internal dependencies
  */
 import { getFontFaceVariantName } from './utils';
-import FontFaceDemo from './font-demo';
+import FontDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 
 function CollectionFontVariant( {
@@ -35,7 +35,7 @@ function CollectionFontVariant( {
 	);
 
 	return (
-		<div className="font-library-modal__library-font-variant">
+		<div className="font-library-modal__font-card">
 			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ selected }
@@ -44,8 +44,8 @@ function CollectionFontVariant( {
 					id={ checkboxId }
 				/>
 				<label htmlFor={ checkboxId }>
-					<FontFaceDemo
-						fontFace={ face }
+					<FontDemo
+						font={ face }
 						text={ displayName }
 						onClick={ handleToggleActivation }
 					/>

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/confirm-delete-dialog.js b/packages/edit-site/src/components/global-styles/font-library-modal/confirm-delete-dialog.js
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
@@ -3,6 +3,7 @@
  */
 import { _n, sprintf } from '@wordpress/i18n';
 import {
+	__experimentalUseNavigator as useNavigator,
 	__experimentalText as Text,
 	Button,
 	Flex,
@@ -14,46 +15,30 @@ import {
  * Internal dependencies
  */
 import FontDemo from './font-demo';
-import { getFamilyPreviewStyle } from './utils/preview-styles';
 import { chevronRight } from '@wordpress/icons';
 
-function FontCard( { font, onClick, variantsText } ) {
-	const fakeFontFace = {
-		fontStyle: 'normal',
-		fontWeight: '400',
-		fontFamily: font.fontFamily,
-		fake: true,
-	};
-
-	const displayFontFace =
-		font.fontFace && font.fontFace.length
-			? font?.fontFace?.find(
-					( face ) =>
-						face.fontStyle === 'normal' && face.fontWeight === '400'
-			  ) || font.fontFace[ 0 ]
-			: fakeFontFace;
-
-	const demoStyle = getFamilyPreviewStyle( font );
-
+function FontCard( { font, onClick, variantsText, navigatorPath } ) {
 	const variantsCount = font.fontFace?.length || 1;
 
 	const style = {
 		cursor: !! onClick ? 'pointer' : 'default',
 	};
 
+	const navigator = useNavigator();
+
 	return (
 		<Button
-			onClick={ onClick }
+			onClick={ () => {
+				onClick();
+				if ( navigatorPath ) {
+					navigator.goTo( navigatorPath );
+				}
+			} }
 			style={ style }
 			className="font-library-modal__font-card"
 		>
 			<Flex justify="space-between" wrap={ false }>
-				<FontDemo
-					customPreviewUrl={ font.preview }
-					fontFace={ displayFontFace }
-					text={ font.name }
-					style={ demoStyle }
-				/>
+				<FontDemo font={ font } />
 				<Flex justify="flex-end">
 					<FlexItem>
 						<Text className="font-library-modal__font-card__count">