Returned selected font heading to use Heading instead of Font Demo

WordPress · Feb 23, 2024 · aa0b118 · aa0b118
1 parent 44fa575
commit aa0b118
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
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
@@ -46,7 +46,6 @@ import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { downloadFontFaceAssets } from './utils';
 import { sortFontFaces } from './utils/sort-font-faces';
 import CollectionFontVariant from './collection-font-variant';
-import FontDemo from './font-demo';
 
 const DEFAULT_CATEGORY = {
 	slug: 'all',
@@ -358,7 +357,13 @@ function FontCollection( { slug } ) {
 							} }
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
-						<FontDemo font={ selectedFont } />
+						<Heading
+							level={ 2 }
+							size={ 13 }
+							className="edit-site-global-styles-header"
+						>
+							{ selectedFont?.name }
+						</Heading>
 					</Flex>
 					{ notice && (
 						<>

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
@@ -5,6 +5,7 @@ import {
 	Button,
 	__experimentalConfirmDialog as ConfirmDialog,
 	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
@@ -26,7 +27,6 @@ import { chevronLeft } from '@wordpress/icons';
  */
 import { unlock } from '../../../lock-unlock';
 import { FontLibraryContext } from './context';
-import FontDemo from './font-demo';
 import FontCard from './font-card';
 import LibraryFontVariant from './library-font-variant';
 import { sortFontFaces } from './utils/sort-font-faces';
@@ -185,7 +185,13 @@ function InstalledFonts() {
 							} }
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
-						<FontDemo font={ libraryFontSelected } />
+						<Heading
+							level={ 2 }
+							size={ 13 }
+							className="edit-site-global-styles-header"
+						>
+							{ libraryFontSelected?.name }
+						</Heading>
 					</Flex>
 					{ notice && (
 						<>