@wordpress/edit-site 5.29.0 → 5.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.29.0",
+	"version": "5.30.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,46 +27,46 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.52.0",
-		"@wordpress/api-fetch": "^6.49.0",
-		"@wordpress/blob": "^3.52.0",
-		"@wordpress/block-editor": "^12.20.0",
-		"@wordpress/block-library": "^8.29.0",
-		"@wordpress/blocks": "^12.29.0",
-		"@wordpress/commands": "^0.23.0",
-		"@wordpress/components": "^27.0.0",
-		"@wordpress/compose": "^6.29.0",
-		"@wordpress/core-commands": "^0.21.0",
-		"@wordpress/core-data": "^6.29.0",
-		"@wordpress/data": "^9.22.0",
-		"@wordpress/dataviews": "^0.6.0",
-		"@wordpress/date": "^4.52.0",
-		"@wordpress/deprecated": "^3.52.0",
-		"@wordpress/dom": "^3.52.0",
-		"@wordpress/editor": "^13.29.0",
-		"@wordpress/element": "^5.29.0",
-		"@wordpress/escape-html": "^2.52.0",
-		"@wordpress/hooks": "^3.52.0",
-		"@wordpress/html-entities": "^3.52.0",
-		"@wordpress/i18n": "^4.52.0",
-		"@wordpress/icons": "^9.43.0",
-		"@wordpress/interface": "^5.29.0",
-		"@wordpress/keyboard-shortcuts": "^4.29.0",
-		"@wordpress/keycodes": "^3.52.0",
-		"@wordpress/media-utils": "^4.43.0",
-		"@wordpress/notices": "^4.20.0",
-		"@wordpress/patterns": "^1.13.0",
-		"@wordpress/plugins": "^6.20.0",
-		"@wordpress/preferences": "^3.29.0",
-		"@wordpress/primitives": "^3.50.0",
-		"@wordpress/private-apis": "^0.34.0",
-		"@wordpress/reusable-blocks": "^4.29.0",
-		"@wordpress/router": "^0.21.0",
-		"@wordpress/style-engine": "^1.35.0",
-		"@wordpress/url": "^3.53.0",
-		"@wordpress/viewport": "^5.29.0",
-		"@wordpress/widgets": "^3.29.0",
-		"@wordpress/wordcount": "^3.52.0",
+		"@wordpress/a11y": "^3.53.0",
+		"@wordpress/api-fetch": "^6.50.0",
+		"@wordpress/blob": "^3.53.0",
+		"@wordpress/block-editor": "^12.21.0",
+		"@wordpress/block-library": "^8.30.0",
+		"@wordpress/blocks": "^12.30.0",
+		"@wordpress/commands": "^0.24.0",
+		"@wordpress/components": "^27.1.0",
+		"@wordpress/compose": "^6.30.0",
+		"@wordpress/core-commands": "^0.22.0",
+		"@wordpress/core-data": "^6.30.0",
+		"@wordpress/data": "^9.23.0",
+		"@wordpress/dataviews": "^0.7.0",
+		"@wordpress/date": "^4.53.0",
+		"@wordpress/deprecated": "^3.53.0",
+		"@wordpress/dom": "^3.53.0",
+		"@wordpress/editor": "^13.30.0",
+		"@wordpress/element": "^5.30.0",
+		"@wordpress/escape-html": "^2.53.0",
+		"@wordpress/hooks": "^3.53.0",
+		"@wordpress/html-entities": "^3.53.0",
+		"@wordpress/i18n": "^4.53.0",
+		"@wordpress/icons": "^9.44.0",
+		"@wordpress/interface": "^5.30.0",
+		"@wordpress/keyboard-shortcuts": "^4.30.0",
+		"@wordpress/keycodes": "^3.53.0",
+		"@wordpress/media-utils": "^4.44.0",
+		"@wordpress/notices": "^4.21.0",
+		"@wordpress/patterns": "^1.14.0",
+		"@wordpress/plugins": "^6.21.0",
+		"@wordpress/preferences": "^3.30.0",
+		"@wordpress/primitives": "^3.51.0",
+		"@wordpress/private-apis": "^0.35.0",
+		"@wordpress/reusable-blocks": "^4.30.0",
+		"@wordpress/router": "^0.22.0",
+		"@wordpress/style-engine": "^1.36.0",
+		"@wordpress/url": "^3.54.0",
+		"@wordpress/viewport": "^5.30.0",
+		"@wordpress/widgets": "^3.30.0",
+		"@wordpress/wordcount": "^3.53.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"client-zip": "^2.4.4",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c139588f4c668b38bafbc5431f2f4e3903dbe683"
+	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
 }

package/src/components/actions/index.js

@@ -362,7 +362,7 @@ export const viewPostAction = {
 	},
 	callback( posts ) {
 		const post = posts[ 0 ];
-		document.location.href = post.link;
+		window.open( post.link, '_blank' );
 	},
 };
 

package/src/components/block-editor/editor-canvas.js

@@ -26,10 +26,9 @@ import {
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
 function EditorCanvas( { enableResizing, settings, children, ...props } ) {
-	const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
-		useSelect( ( select ) => {
-			const { getBlockCount, __unstableGetEditorMode } =
-				select( blockEditorStore );
+	const { hasBlocks, isFocusMode, templateType, canvasMode } = useSelect(
+		( select ) => {
+			const { getBlockCount } = select( blockEditorStore );
 			const { getEditedPostType, getCanvasMode } = unlock(
 				select( editSiteStore )
 			);
@@ -38,11 +37,12 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			return {
 				templateType: _templateType,
 				isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 				canvasMode: getCanvasMode(),
 				hasBlocks: !! getBlockCount(),
 			};
-		}, [] );
+		},
+		[]
+	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const [ isFocused, setIsFocused ] = useState( false );
 
@@ -52,8 +52,11 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 		}
 	}, [ canvasMode ] );
 
-	const viewModeProps = {
-		'aria-label': __( 'Editor Canvas' ),
+	// In view mode, make the canvas iframe be perceived and behave as a button
+	// to switch to edit mode, with a meaningful label and no title attribute.
+	const viewModeIframeProps = {
+		'aria-label': __( 'Edit' ),
+		title: null,
 		role: 'button',
 		tabIndex: 0,
 		onFocus: () => setIsFocused( true ),
@@ -107,9 +110,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			renderAppender={ showBlockAppender }
 			styles={ styles }
 			iframeProps={ {
-				expand: isZoomOutMode,
-				scale: isZoomOutMode ? 0.45 : undefined,
-				frameSize: isZoomOutMode ? 100 : undefined,
+				shouldZoom: true,
 				className: classnames(
 					'edit-site-visual-editor__editor-canvas',
 					{
@@ -117,7 +118,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 					}
 				),
 				...props,
-				...( canvasMode === 'view' ? viewModeProps : {} ),
+				...( canvasMode === 'view' ? viewModeIframeProps : {} ),
 			} }
 		>
 			{ children }

package/src/components/block-editor/style.scss

@@ -22,7 +22,6 @@
 	position: relative;
 	height: 100%;
 	display: block;
-	overflow: hidden;
 	background-color: $gray-300;
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
@@ -62,8 +61,6 @@
 
 	.components-resizable-box__container {
 		margin: 0 auto;
-		// Removing this will cancel the bottom margins in the iframe.
-		overflow: auto;
 	}
 
 	&.is-view-mode {

package/src/components/editor/index.js

@@ -14,7 +14,6 @@ import {
 	BlockBreadcrumb,
 	BlockToolbar,
 	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
 	BlockInspector,
 } from '@wordpress/block-editor';
 import {
@@ -56,7 +55,6 @@ import SiteEditorCanvas from '../block-editor/site-editor-canvas';
 import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
 
-const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
 const {
 	ExperimentalEditorProvider: EditorProvider,
 	InserterSidebar,
@@ -74,21 +72,6 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-// Prevent accidental removal of certain blocks, asking the user for
-// confirmation.
-const blockRemovalRules = {
-	'core/query': __( 'Query Loop displays a list of posts or pages.' ),
-	'core/post-content': __(
-		'Post Content displays the content of a post or page.'
-	),
-	'core/post-template': __(
-		'Post Template displays each post or page in a Query Loop.'
-	),
-	'bindings/core/pattern-overrides': __(
-		'Blocks from synced patterns that can have overriden content.'
-	),
-};
-
 export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
@@ -243,9 +226,6 @@ export default function Editor( { isLoading } ) {
 											<BlockToolbar hideDragHandle />
 										) }
 										<SiteEditorCanvas />
-										<BlockRemovalWarningModal
-											rules={ blockRemovalRules }
-										/>
 										<PatternModal />
 									</>
 								) }

package/src/components/global-styles/color-palette-panel.js

@@ -13,6 +13,8 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import ColorVariations from './variations/variations-color';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
@@ -45,7 +47,12 @@ export default function ColorPalettePanel( { name } ) {
 		'color.defaultPalette',
 		name
 	);
-
+	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
+		property: 'color',
+		filter: ( variation ) =>
+			variation?.settings?.color &&
+			Object.keys( variation?.settings?.color ).length,
+	} );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
 
@@ -78,6 +85,9 @@ export default function ColorPalettePanel( { name } ) {
 						popoverProps={ popoverProps }
 					/>
 				) }
+			{ !! colorVariations.length && (
+				<ColorVariations variations={ colorVariations } />
+			) }
 			<PaletteEdit
 				colors={ customColors }
 				onChange={ setCustomColors }

package/src/components/global-styles/font-families.js

@@ -33,7 +33,7 @@ function FontFamilies() {
 			{ !! modalTabOpen && (
 				<FontLibraryModal
 					onRequestClose={ () => toggleModal() }
-					initialTabId={ modalTabOpen }
+					defaultTabId={ modalTabOpen }
 				/>
 			) }
 

package/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,17 +35,17 @@ 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 }
 					onChange={ handleToggleActivation }
-					__nextHasNoMarginBottom={ true }
+					__nextHasNoMarginBottom
 					id={ checkboxId }
 				/>
 				<label htmlFor={ checkboxId }>
-					<FontFaceDemo
-						fontFace={ face }
+					<FontDemo
+						font={ face }
 						text={ displayName }
 						onClick={ handleToggleActivation }
 					/>

package/src/components/global-styles/font-library-modal/context.js

@@ -27,6 +27,7 @@ import {
 	setUIValuesNeeded,
 	mergeFontFamilies,
 	loadFontFaceInBrowser,
+	unloadFontFaceInBrowser,
 	getDisplaySrcFromFontFace,
 	makeFontFacesFormData,
 	makeFontFamilyFormData,
@@ -162,16 +163,6 @@ function FontLibraryProvider( { children } ) {
 	// Demo
 	const [ loadedFontUrls ] = useState( new Set() );
 
-	// Theme data
-	const { site, currentTheme } = useSelect( ( select ) => {
-		return {
-			site: select( coreStore ).getSite(),
-			currentTheme: select( coreStore ).getCurrentTheme(),
-		};
-	} );
-	const themeUrl =
-		site?.url + '/wp-content/themes/' + currentTheme?.stylesheet;
-
 	const getAvailableFontsOutline = ( availableFontFamilies ) => {
 		const outline = availableFontFamilies.reduce( ( acc, font ) => {
 			const availableFontFaces =
@@ -210,113 +201,115 @@ function FontLibraryProvider( { children } ) {
 		return getActivatedFontsOutline( source )[ slug ] || [];
 	};
 
-	async function installFont( fontFamilyToInstall ) {
+	async function installFonts( fontFamiliesToInstall ) {
 		setIsInstalling( true );
 		try {
-			// Get the font family if it already exists.
-			let installedFontFamily = await fetchGetFontFamilyBySlug(
-				fontFamilyToInstall.slug
-			);
+			const fontFamiliesToActivate = [];
+			let installationErrors = [];
 
-			// Otherwise create it.
-			if ( ! installedFontFamily ) {
-				// Prepare font family form data to install.
-				installedFontFamily = await fetchInstallFontFamily(
-					makeFontFamilyFormData( fontFamilyToInstall )
+			for ( const fontFamilyToInstall of fontFamiliesToInstall ) {
+				let isANewFontFamily = false;
+
+				// Get the font family if it already exists.
+				let installedFontFamily = await fetchGetFontFamilyBySlug(
+					fontFamilyToInstall.slug
 				);
-			}
 
-			// Collect font faces that have already been installed (to be activated later)
-			const alreadyInstalledFontFaces =
-				installedFontFamily.fontFace && fontFamilyToInstall.fontFace
-					? installedFontFamily.fontFace.filter(
+				// Otherwise create it.
+				if ( ! installedFontFamily ) {
+					isANewFontFamily = true;
+					// Prepare font family form data to install.
+					installedFontFamily = await fetchInstallFontFamily(
+						makeFontFamilyFormData( fontFamilyToInstall )
+					);
+				}
+
+				// Collect font faces that have already been installed (to be activated later)
+				const alreadyInstalledFontFaces =
+					installedFontFamily.fontFace && fontFamilyToInstall.fontFace
+						? installedFontFamily.fontFace.filter(
+								( fontFaceToInstall ) =>
+									checkFontFaceInstalled(
+										fontFaceToInstall,
+										fontFamilyToInstall.fontFace
+									)
+						  )
+						: [];
+
+				// Filter out Font Faces that have already been installed (so that they are not re-installed)
+				if (
+					installedFontFamily.fontFace &&
+					fontFamilyToInstall.fontFace
+				) {
+					fontFamilyToInstall.fontFace =
+						fontFamilyToInstall.fontFace.filter(
 							( fontFaceToInstall ) =>
-								checkFontFaceInstalled(
+								! checkFontFaceInstalled(
 									fontFaceToInstall,
-									fontFamilyToInstall.fontFace
+									installedFontFamily.fontFace
 								)
-					  )
-					: [];
-
-			// Filter out Font Faces that have already been installed (so that they are not re-installed)
-			if (
-				installedFontFamily.fontFace &&
-				fontFamilyToInstall.fontFace
-			) {
-				fontFamilyToInstall.fontFace =
-					fontFamilyToInstall.fontFace.filter(
-						( fontFaceToInstall ) =>
-							! checkFontFaceInstalled(
-								fontFaceToInstall,
-								installedFontFamily.fontFace
-							)
+						);
+				}
+
+				// Install the fonts (upload the font files to the server and create the post in the database).
+				let sucessfullyInstalledFontFaces = [];
+				let unsucessfullyInstalledFontFaces = [];
+				if ( fontFamilyToInstall?.fontFace?.length > 0 ) {
+					const response = await batchInstallFontFaces(
+						installedFontFamily.id,
+						makeFontFacesFormData( fontFamilyToInstall )
 					);
-			}
-
-			// Install the fonts (upload the font files to the server and create the post in the database).
-			let sucessfullyInstalledFontFaces = [];
-			let unsucessfullyInstalledFontFaces = [];
-			if ( fontFamilyToInstall?.fontFace?.length > 0 ) {
-				const response = await batchInstallFontFaces(
-					installedFontFamily.id,
-					makeFontFacesFormData( fontFamilyToInstall )
+					sucessfullyInstalledFontFaces = response?.successes;
+					unsucessfullyInstalledFontFaces = response?.errors;
+				}
+
+				// Use the sucessfully installed font faces
+				// As well as any font faces that were already installed (those will be activated)
+				if (
+					sucessfullyInstalledFontFaces?.length > 0 ||
+					alreadyInstalledFontFaces?.length > 0
+				) {
+					fontFamilyToInstall.fontFace = [
+						...sucessfullyInstalledFontFaces,
+						...alreadyInstalledFontFaces,
+					];
+					fontFamiliesToActivate.push( fontFamilyToInstall );
+				} else if ( isANewFontFamily ) {
+					// If the font family is new, delete it to avoid having font families without font faces.
+					await fetchUninstallFontFamily( installedFontFamily.id );
+				}
+
+				installationErrors = installationErrors.concat(
+					unsucessfullyInstalledFontFaces
 				);
-				sucessfullyInstalledFontFaces = response?.successes;
-				unsucessfullyInstalledFontFaces = response?.errors;
 			}
 
-			const detailedErrorMessage = unsucessfullyInstalledFontFaces.reduce(
-				( errorMessageCollection, error ) => {
-					return `${ errorMessageCollection } ${ error.message }`;
-				},
-				''
-			);
+			if ( fontFamiliesToActivate.length > 0 ) {
+				// Activate the font family (add the font family to the global styles).
+				activateCustomFontFamilies( fontFamiliesToActivate );
 
-			// If there were no successes and nothing already installed then we don't need to activate anything and can bounce now.
-			if (
-				fontFamilyToInstall?.fontFace?.length > 0 &&
-				sucessfullyInstalledFontFaces.length === 0 &&
-				alreadyInstalledFontFaces.length === 0
-			) {
-				throw new Error(
-					sprintf(
-						/* translators: %s: Specific error message returned from server. */
-						__( 'No font faces were installed. %s' ),
-						detailedErrorMessage
-					)
+				// Save the global styles to the database.
+				await saveSpecifiedEntityEdits(
+					'root',
+					'globalStyles',
+					globalStylesId,
+					[ 'settings.typography.fontFamilies' ]
 				);
-			}
 
-			// Use the sucessfully installed font faces
-			// As well as any font faces that were already installed (those will be activated)
-			if (
-				sucessfullyInstalledFontFaces?.length > 0 ||
-				alreadyInstalledFontFaces?.length > 0
-			) {
-				fontFamilyToInstall.fontFace = [
-					...sucessfullyInstalledFontFaces,
-					...alreadyInstalledFontFaces,
-				];
+				refreshLibrary();
 			}
 
-			// Activate the font family (add the font family to the global styles).
-			activateCustomFontFamilies( [ fontFamilyToInstall ] );
-
-			// Save the global styles to the database.
-			saveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [
-				'settings.typography.fontFamilies',
-			] );
-
-			refreshLibrary();
-
-			if ( unsucessfullyInstalledFontFaces.length > 0 ) {
+			if ( installationErrors.length > 0 ) {
 				throw new Error(
 					sprintf(
 						/* translators: %s: Specific error message returned from server. */
-						__(
-							'Some font faces were installed. There were some errors. %s'
-						),
-						detailedErrorMessage
+						__( 'There were some errors installing fonts. %s' ),
+						installationErrors.reduce(
+							( errorMessageCollection, error ) => {
+								return `${ errorMessageCollection } ${ error.message }`;
+							},
+							''
+						)
 					)
 				);
 			}
@@ -371,18 +364,20 @@ function FontLibraryProvider( { children } ) {
 			...fontFamilies,
 			[ font.source ]: newCustomFonts,
 		} );
+
+		if ( font.fontFace ) {
+			font.fontFace.forEach( ( face ) => {
+				unloadFontFaceInBrowser( face, 'all' );
+			} );
+		}
 	};
 
 	const activateCustomFontFamilies = ( fontsToAdd ) => {
 		// Merge the existing custom fonts with the new fonts.
-		const newCustomFonts = mergeFontFamilies(
-			fontFamilies?.custom,
-			fontsToAdd
-		);
 		// Activate the fonts by set the new custom fonts array.
 		setFontFamilies( {
 			...fontFamilies,
-			custom: newCustomFonts,
+			custom: mergeFontFamilies( fontFamilies?.custom, fontsToAdd ),
 		} );
 		// Add custom fonts to the browser.
 		fontsToAdd.forEach( ( font ) => {
@@ -410,13 +405,30 @@ function FontLibraryProvider( { children } ) {
 			...fontFamilies,
 			[ font.source ]: newFonts,
 		} );
+
+		const isFaceActivated = isFontActivated(
+			font.slug,
+			face.fontStyle,
+			face.fontWeight,
+			font.source
+		);
+
+		if ( isFaceActivated ) {
+			loadFontFaceInBrowser(
+				face,
+				getDisplaySrcFromFontFace( face.src ),
+				'all'
+			);
+		} else {
+			unloadFontFaceInBrowser( face, 'all' );
+		}
 	};
 
 	const loadFontFaceAsset = async ( fontFace ) => {
 		// If the font doesn't have a src, don't load it.
 		if ( ! fontFace.src ) return;
 		// Get the src of the font.
-		const src = getDisplaySrcFromFontFace( fontFace.src, themeUrl );
+		const src = getDisplaySrcFromFontFace( fontFace.src );
 		// If the font is already loaded, don't load it again.
 		if ( ! src || loadedFontUrls.has( src ) ) return;
 		// Load the font in the browser.
@@ -467,7 +479,7 @@ function FontLibraryProvider( { children } ) {
 				isFontActivated,
 				getFontFacesActivated,
 				loadFontFaceAsset,
-				installFont,
+				installFonts,
 				uninstallFontFamily,
 				toggleActivateFont,
 				getAvailableFontsOutline,

package/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">