minor tweaks + fix error when selecting default font family

Author: [email protected]

src/components/font-pair-picker/index.js

@@ -29,22 +29,22 @@ const FontPairPicker = props => {
 	}
 
 	// Use the font family value for styling the buttons
-	const headingFontFamilyValue = getFontFamily( headingStyles.fontFamily ).replace( /"/g, '' ) || ''
-	const paragraphFontFamilyValue = getFontFamily( paragraphStyles.fontFamily ).replace( /"/g, '' ) || ''
+	const headingFontFamilyValue = getFontFamily( headingStyles.fontFamily )?.replaceAll( '"', '' ) || ''
+	const paragraphFontFamilyValue = getFontFamily( paragraphStyles.fontFamily )?.replaceAll( '"', '' ) || ''
 
 	const label = (
 		<div>
 			<span
 				style={ omit( { ...headingStyles, fontFamily: headingFontFamilyValue }, [ 'fontSize', 'lineHeight' ] ) }
 				className="ugb-global-settings-font-pair__label"
 			>
-				{ headingStyles?.fontFamily ? getFontFamilyLabel( headingStyles.fontFamily ) : __( 'Default Heading', i18n ) }
+				{ getFontFamilyLabel( headingStyles?.fontFamily, __( 'Default Heading', i18n ) ) }
 			</span>
 			<span
 				style={ omit( { ...paragraphStyles, fontFamily: paragraphFontFamilyValue }, [ 'fontSize', 'lineHeight' ] ) }
 				className="ugb-global-settings-font-pair__sub-label"
 			>
-				{ paragraphStyles?.fontFamily ? getFontFamilyLabel( paragraphStyles?.fontFamily ) : __( 'Default Body', i18n ) }
+				{ getFontFamilyLabel( paragraphStyles?.fontFamily, __( 'Default Body', i18n ) ) }
 			</span>
 		</div>
 	)

src/plugins/global-settings/typography/editor.scss

@@ -96,7 +96,7 @@
 .ugb-global-settings-font-pair-control {
 	.components-base-control__field {
 		border: 1px solid #ddd;
-		padding: 8px;
+		padding: 12px;
 		margin-bottom: 8px;
 		gap: 8px;
 		cursor: pointer;
@@ -107,7 +107,7 @@
 }
 
 .ugb-global-settings-font-pair__container {
-	max-height: 250px;
+	max-height: 270px;
 	overflow: auto;
 	border: 1px solid #ddd;
 	border: none;
@@ -123,7 +123,7 @@
 	.ugb-global-settings-font-pair__label {
 		font-size: 1.2rem;
 		display: block;
-		margin-bottom: 4px;
+		margin-bottom: 6px;
 		line-height: 1.2;
 	}
 	.ugb-global-settings-font-pair__sub-label {

src/util/font.js

@@ -184,7 +184,7 @@ export const isGoogleFontEnqueued = ( fontName, head = document.querySelector( '
 }
 
 // Outputs the font family name for display purposes.
-export const getFontFamilyLabel = fontName => {
+export const getFontFamilyLabel = ( fontName, defaultLabel = '' ) => {
 	// Modern font stacks.
 	if ( MODERN_FONT_STACKS[ fontName ] ) {
 		return MODERN_FONT_STACKS[ fontName ].label
@@ -195,10 +195,15 @@ export const getFontFamilyLabel = fontName => {
 		return SYSTEM_FONT_STACKS[ fontName ].label
 	}
 
-	return fontName || __( 'Default', i18n )
+	return fontName || defaultLabel || __( 'Default', i18n )
 }
 
 export const getFontFamily = fontName => {
+	const defaultFontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+	if ( ! fontName ) {
+		return defaultFontFamily
+	}
+
 	// If the font is a CSS custom property, return it directly.
 	if ( fontName.match( /^\s*var\(--/ ) ) {
 		return fontName
@@ -219,7 +224,7 @@ export const getFontFamily = fontName => {
 		return SYSTEM_FONT_STACKS[ fontName ].value
 	}
 
-	return '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+	return defaultFontFamily
 }
 
 /** TODO: deprecate this.