Fix navigation when all font faces are removed

WordPress · Dec 27, 2022 · f6d8bba · f6d8bba · github-actions · Dec 27, 2022
1 parent d02fb4c
commit f6d8bba
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 38 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-theme-font-faces.js b/packages/edit-site/src/components/global-styles/screen-theme-font-faces.js
@@ -3,7 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Icon, check } from '@wordpress/icons';
-import { Tooltip, Button } from '@wordpress/components';
+import {
+	Tooltip,
+	Button,
+	__experimentalUseNavigator as useNavigator,
+} from '@wordpress/components';
+import { useMemo, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,9 +19,28 @@ import { useFontFamilies } from './hooks';
 import FontFaceItem from './font-face-item';
 
 function ScreenThemeFontFacesList( { themeFontSelected } ) {
+	const { goBack } = useNavigator();
 	const { fontFamilies, handleRemoveFontFace, sortFontFaces } =
 		useFontFamilies();
 	const font = fontFamilies[ themeFontSelected ];
+	const getFontFaces = ( fontFamily ) => {
+		if ( ! fontFamily || ! Array.isArray( fontFamily.fontFace ) ) {
+			return [];
+		}
+		return sortFontFaces(
+			font.fontFace.filter( ( fontFace ) => ! fontFace.shouldBeRemoved )
+		);
+	};
+	const fontFaces = useMemo( () => getFontFaces( font ), [ fontFamilies ] );
+
+	useEffect( () => {
+		// Go Back if no font faces are available
+		// This can happen if all font faces are flagged as shouldBeRemoved and the change is saved.
+		// After the change is saved, the font faces are removed from the font family and the font faces are no longer available.
+		if ( ! fontFaces.length ) {
+			goBack();
+		}
+	}, [ fontFamilies ] );
 
 	return (
 		<>
@@ -43,40 +67,31 @@ function ScreenThemeFontFacesList( { themeFontSelected } ) {
 
 				{ ! font && <p>{ __( 'No font faces available' ) }</p> }
 
-				{ font &&
-					Array.isArray( font.fontFace ) &&
-					sortFontFaces( font.fontFace ).map( ( fontFace, i ) => {
-						return (
-							! fontFace.shouldBeRemoved && (
-								<FontFaceItem
-									fontFace={ fontFace }
-									key={ `font-face-${ i }` }
-									actionTrigger={
-										<Tooltip
-											text={ __( 'Remove Font Face' ) }
-											delay={ 0 }
-										>
-											<Button
-												style={ { padding: '0 8px' } }
-												onClick={ () =>
-													handleRemoveFontFace(
-														fontFace.fontFamily,
-														fontFace.fontWeight,
-														fontFace.fontStyle
-													)
-												}
-											>
-												<Icon
-													icon={ check }
-													size={ 20 }
-												/>
-											</Button>
-										</Tooltip>
+				{ fontFaces.map( ( fontFace, i ) => (
+					<FontFaceItem
+						fontFace={ fontFace }
+						key={ `font-face-${ i }` }
+						actionTrigger={
+							<Tooltip
+								text={ __( 'Remove Font Face' ) }
+								delay={ 0 }
+							>
+								<Button
+									style={ { padding: '0 8px' } }
+									onClick={ () =>
+										handleRemoveFontFace(
+											fontFace.fontFamily,
+											fontFace.fontWeight,
+											fontFace.fontStyle
+										)
 									}
-								/>
-							)
-						);
-					} ) }
+								>
+									<Icon icon={ check } size={ 20 } />
+								</Button>
+							</Tooltip>
+						}
+					/>
+				) ) }
 			</div>
 		</>
 	);

diff --git a/packages/edit-site/src/components/global-styles/screen-theme-font-families.js b/packages/edit-site/src/components/global-styles/screen-theme-font-families.js
@@ -19,14 +19,26 @@ import { useFontFamilies } from './hooks';
 
 function ScreenThemeFontFamilies( { setThemeFontSelected } ) {
 	const { fontFamilies, count } = useFontFamilies();
-	const { goTo } = useNavigator();
+	const { goBack } = useNavigator();
+
+	// we do this instead of filtering the font families in the useFontFamilies hook because we need to keep the index of the font families to set the selected font family.
+	const shouldDisplayFontFamily = ( fontFamily ) => {
+		// If the font family has no font faces, it should be displayed.
+		if ( ! fontFamily.fontFace ) {
+			return true;
+		}
+		// If the font family has font faces, it should be displayed if at least one of them is not flagged as shouldBeRemoved.
+		return fontFamily.fontFace.some(
+			( fontFace ) => ! fontFace.shouldBeRemoved
+		);
+	};
 
 	if ( ! count ) {
-		goTo( '/typography' );
+		goBack();
 	}
 
-	const handleClick = ( family ) => {
-		setThemeFontSelected( family );
+	const handleClick = ( index ) => {
+		setThemeFontSelected( index );
 	};
 
 	return (
@@ -55,6 +67,11 @@ function ScreenThemeFontFamilies( { setThemeFontSelected } ) {
 						fontStyle: 'normal',
 						fontWeight: '400',
 					};
+
+					if ( ! shouldDisplayFontFamily( family ) ) {
+						return null;
+					}
+
 					return (
 						<FontFaceItem
 							key={ `family-${ i }` }