From 37f05d262734bcd84ce9e64a8dadfad85e8d1bea Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 22 Nov 2021 10:11:09 +0100
Subject: [PATCH 1/6] Add elements support to the typography panel in global
 styles

---
 packages/block-editor/src/hooks/typography.js |  2 +-
 .../screen-typography-element.js              | 33 +++++++
 .../global-styles/screen-typography.js        | 87 ++++++++++++++++++-
 .../src/components/global-styles/style.scss   |  4 +
 .../global-styles/typography-panel.js         | 19 ++--
 .../src/components/global-styles/ui.js        |  9 ++
 6 files changed, 143 insertions(+), 11 deletions(-)
 create mode 100644 packages/edit-site/src/components/global-styles/screen-typography-element.js

diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
index 9b5d8fd28c9a..c3959b8a1b3c 100644
--- a/packages/block-editor/src/hooks/typography.js
+++ b/packages/block-editor/src/hooks/typography.js
@@ -231,7 +231,7 @@ export function TypographyPanel( props ) {
 	);
 }
 
-const hasTypographySupport = ( blockName ) => {
+export const hasTypographySupport = ( blockName ) => {
 	return TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
 		hasBlockSupport( blockName, key )
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-typography-element.js b/packages/edit-site/src/components/global-styles/screen-typography-element.js
new file mode 100644
index 000000000000..61e678c4e40f
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-typography-element.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import TypographyPanel from './typography-panel';
+import ScreenHeader from './header';
+
+const elementDescriptions = {
+	text: __( 'Manage the fonts used on the site.' ),
+	link: __( 'Manage the fonts and typography used on the links.' ),
+};
+
+function ScreenTypographyElement( { name, element } ) {
+	const parentMenu =
+		name === undefined ? '/typography' : '/blocks/' + name + '/typography';
+
+	return (
+		<>
+			<ScreenHeader
+				back={ parentMenu }
+				title={ __( 'Typography' ) }
+				description={ elementDescriptions[ element ] }
+			/>
+			<TypographyPanel name={ name } element={ element } />
+		</>
+	);
+}
+
+export default ScreenTypographyElement;
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 822eaa964f67..5f0bbea8db29 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -2,12 +2,84 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	FlexItem,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import TypographyPanel from './typography-panel';
 import ScreenHeader from './header';
+import NavigationButton from './navigation-button';
+import { useStyle } from './hooks';
+import Subtitle from './subtitle';
+
+function TextItem( { name, parentMenu } ) {
+	const [ fontFamily ] = useStyle( 'typography.fontFamily', name );
+	const [ fontSize ] = useStyle( 'typography.fontSize', name );
+	const [ fontStyle ] = useStyle( 'typography.fontStyle', name );
+	const [ fontWeight ] = useStyle( 'typography.fontWeight', name );
+	const [ letterSpacing ] = useStyle( 'typography.letterSpacing', name );
+
+	return (
+		<NavigationButton path={ parentMenu + '/typography/text' }>
+			<FlexItem
+				style={ {
+					fontFamily,
+					fontSize,
+					fontStyle,
+					fontWeight,
+					letterSpacing,
+				} }
+			>
+				{ __( 'Text' ) }
+			</FlexItem>
+		</NavigationButton>
+	);
+}
+
+function LinkItem( { name, parentMenu } ) {
+	const hasSupport = ! name;
+	const [ fontFamily ] = useStyle(
+		'elements.link.typography.fontFamily',
+		name
+	);
+	const [ fontSize ] = useStyle( 'elements.link.typography.fontSize', name );
+	const [ fontStyle ] = useStyle(
+		'elements.link.typography.fontStyle',
+		name
+	);
+	const [ fontWeight ] = useStyle(
+		'elements.link.typography.fontWeight',
+		name
+	);
+	const [ letterSpacing ] = useStyle(
+		'elements.link.typography.letterSpacing',
+		name
+	);
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButton path={ parentMenu + '/typography/link' }>
+			<FlexItem
+				style={ {
+					fontFamily,
+					fontSize,
+					fontStyle,
+					fontWeight,
+					letterSpacing,
+				} }
+			>
+				{ __( 'Link' ) }
+			</FlexItem>
+		</NavigationButton>
+	);
+}
 
 function ScreenTypography( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
@@ -18,10 +90,19 @@ function ScreenTypography( { name } ) {
 				back={ parentMenu ? parentMenu : '/' }
 				title={ __( 'Typography' ) }
 				description={ __(
-					'Manage the fonts used on the site and the default aspect of different global elements.'
+					'Manage the typography settings for different elements.'
 				) }
 			/>
-			<TypographyPanel name={ name } />
+
+			<div className="edit-site-global-styles-screen-typography">
+				<VStack spacing={ 3 }>
+					<Subtitle>{ __( 'Elements' ) }</Subtitle>
+					<ItemGroup isBordered isSeparated>
+						<TextItem name={ name } parentMenu={ parentMenu } />
+						<LinkItem name={ name } parentMenu={ parentMenu } />
+					</ItemGroup>
+				</VStack>
+			</div>
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index e92d9a832f6f..f9189c805fc0 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -15,6 +15,10 @@
 	}
 }
 
+.edit-site-global-styles-screen-typography {
+	margin: $grid-unit-20;
+}
+
 .edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;
 
diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index 85a990ccca29..0e3dd466e636 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -54,8 +54,10 @@ function useHasLetterSpacingControl( name ) {
 	);
 }
 
-export default function TypographyPanel( { name } ) {
+export default function TypographyPanel( { name, element } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
+	const prefix =
+		element === 'text' || ! element ? '' : `elements.${ element }.`;
 	const [ fontSizes ] = useSetting( 'typography.fontSizes', name );
 	const disableCustomFontSizes = ! useSetting(
 		'typography.customFontSize',
@@ -73,25 +75,28 @@ export default function TypographyPanel( { name } ) {
 	const hasLetterSpacingControl = useHasLetterSpacingControl( name );
 
 	const [ fontFamily, setFontFamily ] = useStyle(
-		'typography.fontFamily',
+		prefix + 'typography.fontFamily',
+		name
+	);
+	const [ fontSize, setFontSize ] = useStyle(
+		prefix + 'typography.fontSize',
 		name
 	);
-	const [ fontSize, setFontSize ] = useStyle( 'typography.fontSize', name );
 
 	const [ fontStyle, setFontStyle ] = useStyle(
-		'typography.fontStyle',
+		prefix + 'typography.fontStyle',
 		name
 	);
 	const [ fontWeight, setFontWeight ] = useStyle(
-		'typography.fontWeight',
+		prefix + 'typography.fontWeight',
 		name
 	);
 	const [ lineHeight, setLineHeight ] = useStyle(
-		'typography.lineHeight',
+		prefix + 'typography.lineHeight',
 		name
 	);
 	const [ letterSpacing, setLetterSpacing ] = useStyle(
-		'typography.letterSpacing',
+		prefix + 'typography.letterSpacing',
 		name
 	);
 
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 6f90749cb2fb..42de512ea16c 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -14,6 +14,7 @@ import ScreenRoot from './screen-root';
 import ScreenBlockList from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
+import ScreenTypographyElement from './screen-typography-element';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
@@ -30,6 +31,14 @@ function ContextScreens( { name } ) {
 				<ScreenTypography name={ name } />
 			</NavigatorScreen>
 
+			<NavigatorScreen path={ parentMenu + '/typography/text' }>
+				<ScreenTypographyElement name={ name } element="text" />
+			</NavigatorScreen>
+
+			<NavigatorScreen path={ parentMenu + '/typography/link' }>
+				<ScreenTypographyElement name={ name } element="link" />
+			</NavigatorScreen>
+
 			<NavigatorScreen path={ parentMenu + '/colors' }>
 				<ScreenColors name={ name } />
 			</NavigatorScreen>

From 892a93b3cfd02c3fb103818f24c3fd4158d7a742 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 22 Nov 2021 10:18:56 +0100
Subject: [PATCH 2/6] Avoid elements for blocks

---
 .../global-styles/screen-typography.js        | 77 +++++++++++--------
 .../src/components/global-styles/style.scss   |  4 +
 2 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 5f0bbea8db29..4dcac1256e3e 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
 	FlexItem,
 } from '@wordpress/components';
 
@@ -15,6 +16,7 @@ import ScreenHeader from './header';
 import NavigationButton from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
+import TypographyPanel from './typography-panel';
 
 function TextItem( { name, parentMenu } ) {
 	const [ fontFamily ] = useStyle( 'typography.fontFamily', name );
@@ -25,17 +27,21 @@ function TextItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButton path={ parentMenu + '/typography/text' }>
-			<FlexItem
-				style={ {
-					fontFamily,
-					fontSize,
-					fontStyle,
-					fontWeight,
-					letterSpacing,
-				} }
-			>
-				{ __( 'Text' ) }
-			</FlexItem>
+			<HStack justify="flex-start">
+				<FlexItem
+					className="edit-site-global-styles-screen-typography__indicator"
+					style={ {
+						fontFamily,
+						fontSize,
+						fontStyle,
+						fontWeight,
+						letterSpacing,
+					} }
+				>
+					{ __( 'Aa' ) }
+				</FlexItem>
+				<FlexItem>{ __( 'Text' ) }</FlexItem>
+			</HStack>
 		</NavigationButton>
 	);
 }
@@ -66,17 +72,21 @@ function LinkItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButton path={ parentMenu + '/typography/link' }>
-			<FlexItem
-				style={ {
-					fontFamily,
-					fontSize,
-					fontStyle,
-					fontWeight,
-					letterSpacing,
-				} }
-			>
-				{ __( 'Link' ) }
-			</FlexItem>
+			<HStack justify="flex-start">
+				<FlexItem
+					className="edit-site-global-styles-screen-typography__indicator"
+					style={ {
+						fontFamily,
+						fontSize,
+						fontStyle,
+						fontWeight,
+						letterSpacing,
+					} }
+				>
+					{ __( 'Aa' ) }
+				</FlexItem>
+				<FlexItem>{ __( 'Link' ) }</FlexItem>
+			</HStack>
 		</NavigationButton>
 	);
 }
@@ -94,15 +104,20 @@ function ScreenTypography( { name } ) {
 				) }
 			/>
 
-			<div className="edit-site-global-styles-screen-typography">
-				<VStack spacing={ 3 }>
-					<Subtitle>{ __( 'Elements' ) }</Subtitle>
-					<ItemGroup isBordered isSeparated>
-						<TextItem name={ name } parentMenu={ parentMenu } />
-						<LinkItem name={ name } parentMenu={ parentMenu } />
-					</ItemGroup>
-				</VStack>
-			</div>
+			{ ! name && (
+				<div className="edit-site-global-styles-screen-typography">
+					<VStack spacing={ 3 }>
+						<Subtitle>{ __( 'Elements' ) }</Subtitle>
+						<ItemGroup isBordered isSeparated>
+							<TextItem name={ name } parentMenu={ parentMenu } />
+							<LinkItem name={ name } parentMenu={ parentMenu } />
+						</ItemGroup>
+					</VStack>
+				</div>
+			) }
+
+			{ /* no typogrpahy elements support yet for blocks */ }
+			{ !! name && <TypographyPanel name={ name } element="text" /> }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index f9189c805fc0..3c872f5b882b 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -19,6 +19,10 @@
 	margin: $grid-unit-20;
 }
 
+.edit-site-global-styles-screen-typography__indicator {
+	width: $grid-unit-30;
+}
+
 .edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;
 

From c06bd79c6818236d96d3a0b53a1c3dafa63b44ef Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 22 Nov 2021 10:23:33 +0100
Subject: [PATCH 3/6] Fix panel titles

---
 .../global-styles/screen-typography-element.js   | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-typography-element.js b/packages/edit-site/src/components/global-styles/screen-typography-element.js
index 61e678c4e40f..706d361448ed 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography-element.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography-element.js
@@ -9,9 +9,15 @@ import { __ } from '@wordpress/i18n';
 import TypographyPanel from './typography-panel';
 import ScreenHeader from './header';
 
-const elementDescriptions = {
-	text: __( 'Manage the fonts used on the site.' ),
-	link: __( 'Manage the fonts and typography used on the links.' ),
+const elements = {
+	text: {
+		description: __( 'Manage the fonts used on the site.' ),
+		title: __( 'Text' ),
+	},
+	link: {
+		description: __( 'Manage the fonts and typography used on the links.' ),
+		title: __( 'Link' ),
+	},
 };
 
 function ScreenTypographyElement( { name, element } ) {
@@ -22,8 +28,8 @@ function ScreenTypographyElement( { name, element } ) {
 		<>
 			<ScreenHeader
 				back={ parentMenu }
-				title={ __( 'Typography' ) }
-				description={ elementDescriptions[ element ] }
+				title={ elements[ element ].title }
+				description={ elements[ element ].description }
 			/>
 			<TypographyPanel name={ name } element={ element } />
 		</>

From 03bd30f9868308cbbdc1c78777406036abb6ea66 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 23 Nov 2021 10:51:17 +0100
Subject: [PATCH 4/6] Add typography preview

---
 .../global-styles/screen-typography.js        |  3 ++-
 .../src/components/global-styles/style.scss   | 10 ++++++++++
 .../global-styles/typography-panel.js         | 20 +++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 4dcac1256e3e..2bd33d0738f1 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -31,7 +31,7 @@ function TextItem( { name, parentMenu } ) {
 				<FlexItem
 					className="edit-site-global-styles-screen-typography__indicator"
 					style={ {
-						fontFamily,
+						fontFamily: fontFamily ?? 'serif',
 						fontSize,
 						fontStyle,
 						fontWeight,
@@ -81,6 +81,7 @@ function LinkItem( { name, parentMenu } ) {
 						fontStyle,
 						fontWeight,
 						letterSpacing,
+						textDecoration: 'underline',
 					} }
 				>
 					{ __( 'Aa' ) }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 3c872f5b882b..034e91f6d921 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -15,6 +15,16 @@
 	}
 }
 
+.edit-site-typography-panel__preview {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 100px;
+	margin-bottom: $grid-unit-20;
+	background: $gray-100;
+	border-radius: $radius-block-ui;
+}
+
 .edit-site-global-styles-screen-typography {
 	margin: $grid-unit-20;
 }
diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index 0e3dd466e636..11074a377e35 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -99,9 +99,29 @@ export default function TypographyPanel( { name, element } ) {
 		prefix + 'typography.letterSpacing',
 		name
 	);
+	const extraStyles =
+		element === 'link'
+			? {
+					textDecoration: 'underline',
+			  }
+			: {};
 
 	return (
 		<PanelBody className="edit-site-typography-panel" initialOpen={ true }>
+			<div
+				className="edit-site-typography-panel__preview"
+				style={ {
+					fontFamily: fontFamily ?? 'serif',
+					fontSize,
+					fontStyle,
+					fontWeight,
+					letterSpacing,
+					...extraStyles,
+				} }
+			>
+				Aa
+			</div>
+
 			{ supports.includes( 'fontFamily' ) && (
 				<FontFamilyControl
 					fontFamilies={ fontFamilies }

From de4c4e66d1d4585258b765e91f81df729e6e52e1 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 24 Nov 2021 11:30:53 +0100
Subject: [PATCH 5/6] Use a fixed size for the small typography previews

---
 .../src/components/global-styles/screen-typography.js         | 4 ----
 packages/edit-site/src/components/global-styles/style.scss    | 1 +
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 2bd33d0738f1..dacc263d410d 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -20,7 +20,6 @@ import TypographyPanel from './typography-panel';
 
 function TextItem( { name, parentMenu } ) {
 	const [ fontFamily ] = useStyle( 'typography.fontFamily', name );
-	const [ fontSize ] = useStyle( 'typography.fontSize', name );
 	const [ fontStyle ] = useStyle( 'typography.fontStyle', name );
 	const [ fontWeight ] = useStyle( 'typography.fontWeight', name );
 	const [ letterSpacing ] = useStyle( 'typography.letterSpacing', name );
@@ -32,7 +31,6 @@ function TextItem( { name, parentMenu } ) {
 					className="edit-site-global-styles-screen-typography__indicator"
 					style={ {
 						fontFamily: fontFamily ?? 'serif',
-						fontSize,
 						fontStyle,
 						fontWeight,
 						letterSpacing,
@@ -52,7 +50,6 @@ function LinkItem( { name, parentMenu } ) {
 		'elements.link.typography.fontFamily',
 		name
 	);
-	const [ fontSize ] = useStyle( 'elements.link.typography.fontSize', name );
 	const [ fontStyle ] = useStyle(
 		'elements.link.typography.fontStyle',
 		name
@@ -77,7 +74,6 @@ function LinkItem( { name, parentMenu } ) {
 					className="edit-site-global-styles-screen-typography__indicator"
 					style={ {
 						fontFamily,
-						fontSize,
 						fontStyle,
 						fontWeight,
 						letterSpacing,
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 034e91f6d921..ab9c11165936 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -31,6 +31,7 @@
 
 .edit-site-global-styles-screen-typography__indicator {
 	width: $grid-unit-30;
+	font-size: 14px;
 }
 
 .edit-site-global-styles-screen-colors {

From 7b2259d202923afe0bc1a3308886c83ac6d23a91 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 24 Nov 2021 11:58:26 +0100
Subject: [PATCH 6/6] Add colors to the typography previews

---
 .../global-styles/screen-typography.js        | 80 ++++++++-----------
 .../src/components/global-styles/style.scss   |  7 +-
 .../global-styles/typography-panel.js         |  5 ++
 3 files changed, 45 insertions(+), 47 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index dacc263d410d..e1d7520b4c20 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -18,71 +18,49 @@ import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
 
-function TextItem( { name, parentMenu } ) {
-	const [ fontFamily ] = useStyle( 'typography.fontFamily', name );
-	const [ fontStyle ] = useStyle( 'typography.fontStyle', name );
-	const [ fontWeight ] = useStyle( 'typography.fontWeight', name );
-	const [ letterSpacing ] = useStyle( 'typography.letterSpacing', name );
-
-	return (
-		<NavigationButton path={ parentMenu + '/typography/text' }>
-			<HStack justify="flex-start">
-				<FlexItem
-					className="edit-site-global-styles-screen-typography__indicator"
-					style={ {
-						fontFamily: fontFamily ?? 'serif',
-						fontStyle,
-						fontWeight,
-						letterSpacing,
-					} }
-				>
-					{ __( 'Aa' ) }
-				</FlexItem>
-				<FlexItem>{ __( 'Text' ) }</FlexItem>
-			</HStack>
-		</NavigationButton>
-	);
-}
-
-function LinkItem( { name, parentMenu } ) {
+function Item( { name, parentMenu, element, label } ) {
 	const hasSupport = ! name;
-	const [ fontFamily ] = useStyle(
-		'elements.link.typography.fontFamily',
-		name
-	);
-	const [ fontStyle ] = useStyle(
-		'elements.link.typography.fontStyle',
-		name
-	);
-	const [ fontWeight ] = useStyle(
-		'elements.link.typography.fontWeight',
-		name
-	);
+	const prefix =
+		element === 'text' || ! element ? '' : `elements.${ element }.`;
+	const extraStyles =
+		element === 'link'
+			? {
+					textDecoration: 'underline',
+			  }
+			: {};
+	const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );
+	const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );
+	const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );
 	const [ letterSpacing ] = useStyle(
-		'elements.link.typography.letterSpacing',
+		prefix + 'typography.letterSpacing',
 		name
 	);
+	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
+	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
+	const [ color ] = useStyle( prefix + 'color.text', name );
 
 	if ( ! hasSupport ) {
 		return null;
 	}
 
 	return (
-		<NavigationButton path={ parentMenu + '/typography/link' }>
+		<NavigationButton path={ parentMenu + '/typography/' + element }>
 			<HStack justify="flex-start">
 				<FlexItem
 					className="edit-site-global-styles-screen-typography__indicator"
 					style={ {
-						fontFamily,
+						fontFamily: fontFamily ?? 'serif',
+						background: gradientValue ?? backgroundColor,
+						color,
 						fontStyle,
 						fontWeight,
 						letterSpacing,
-						textDecoration: 'underline',
+						...extraStyles,
 					} }
 				>
 					{ __( 'Aa' ) }
 				</FlexItem>
-				<FlexItem>{ __( 'Link' ) }</FlexItem>
+				<FlexItem>{ label }</FlexItem>
 			</HStack>
 		</NavigationButton>
 	);
@@ -106,8 +84,18 @@ function ScreenTypography( { name } ) {
 					<VStack spacing={ 3 }>
 						<Subtitle>{ __( 'Elements' ) }</Subtitle>
 						<ItemGroup isBordered isSeparated>
-							<TextItem name={ name } parentMenu={ parentMenu } />
-							<LinkItem name={ name } parentMenu={ parentMenu } />
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="text"
+								label={ __( 'Text' ) }
+							/>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="link"
+								label={ __( 'Link' ) }
+							/>
 						</ItemGroup>
 					</VStack>
 				</div>
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index ab9c11165936..0429695eb99b 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -30,8 +30,13 @@
 }
 
 .edit-site-global-styles-screen-typography__indicator {
-	width: $grid-unit-30;
+	height: 24px;
+	width: 24px;
 	font-size: 14px;
+	display: flex !important;
+	align-items: center;
+	justify-content: center;
+	border-radius: $radius-block-ui;
 }
 
 .edit-site-global-styles-screen-colors {
diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index 11074a377e35..03e3634ce77d 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -99,6 +99,9 @@ export default function TypographyPanel( { name, element } ) {
 		prefix + 'typography.letterSpacing',
 		name
 	);
+	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
+	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
+	const [ color ] = useStyle( prefix + 'color.text', name );
 	const extraStyles =
 		element === 'link'
 			? {
@@ -112,6 +115,8 @@ export default function TypographyPanel( { name, element } ) {
 				className="edit-site-typography-panel__preview"
 				style={ {
 					fontFamily: fontFamily ?? 'serif',
+					background: gradientValue ?? backgroundColor,
+					color,
 					fontSize,
 					fontStyle,
 					fontWeight,