From 7f0a5d91666bb4cc9c631bdfae8d8df291f676a4 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 28 Sep 2022 15:18:24 +1000
Subject: [PATCH] Hide Font Family control when there are no font families

---
 .../src/components/global-styles/typography-panel.js  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

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 31d230ce73131..a632f532a174f 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -21,11 +21,13 @@ import { __ } from '@wordpress/i18n';
 import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
 
 export function useHasTypographyPanel( name ) {
+	const hasFontFamily = useHasFontFamilyControl( name );
 	const hasLineHeight = useHasLineHeightControl( name );
 	const hasFontAppearance = useHasAppearanceControl( name );
 	const hasLetterSpacing = useHasLetterSpacingControl( name );
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
+		hasFontFamily ||
 		hasLineHeight ||
 		hasFontAppearance ||
 		hasLetterSpacing ||
@@ -33,6 +35,12 @@ export function useHasTypographyPanel( name ) {
 	);
 }
 
+function useHasFontFamilyControl( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );
+	return supports.includes( 'fontFamily' ) && !! fontFamilies?.length;
+}
+
 function useHasLineHeightControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
@@ -155,6 +163,7 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 	const hasFontWeights =
 		useSetting( 'typography.fontWeight', name )[ 0 ] &&
 		supports.includes( 'fontWeight' );
+	const hasFontFamilyEnabled = useHasFontFamilyControl( name );
 	const hasLineHeightEnabled = useHasLineHeightControl( name );
 	const hasAppearanceControl = useHasAppearanceControl( name );
 	const appearanceControlLabel = useAppearanceControlLabel( name );
@@ -205,7 +214,7 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 
 	return (
 		<ToolsPanel label={ __( 'Typography' ) } resetAll={ resetAll }>
-			{ supports.includes( 'fontFamily' ) && (
+			{ hasFontFamilyEnabled && (
 				<ToolsPanelItem
 					label={ __( 'Font family' ) }
 					hasValue={ hasFontFamily }