Font Library: Fix focus issue when navigating

packages/global-styles-ui/src/font-library/font-card.tsx

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { _n, sprintf, isRTL } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
 import {
 	useNavigator,
 	__experimentalText as WCText,
@@ -22,11 +23,13 @@ function FontCard( {
 	onClick,
 	variantsText,
 	navigatorPath,
+	shouldFocus,
 }: {
 	font: FontFamily;
 	onClick: () => void;
 	variantsText?: string;
 	navigatorPath?: string;
+	shouldFocus?: boolean;
 } ) {
 	const variantsCount = font.fontFace?.length || 1;
 
@@ -35,9 +38,17 @@ function FontCard( {
 	};
 
 	const navigator = useNavigator();
+	const ref = useRef< HTMLButtonElement >( null );
+
+	useEffect( () => {
+		if ( shouldFocus ) {
+			ref.current?.focus();
+		}
+	}, [ shouldFocus ] );
 
 	return (
 		<Button
+			ref={ ref }
 			__next40pxDefaultSize
 			onClick={ () => {
 				onClick();

packages/global-styles-ui/src/font-library/font-collection.tsx

@@ -76,6 +76,9 @@ function FontCollection( { slug }: { slug: string } ) {
 	const [ selectedFont, setSelectedFont ] = useState< FontFamily | null >(
 		null
 	);
+	const [ lastSelectedFontSlug, setLastSelectedFontSlug ] = useState<
+		string | undefined
+	>( undefined );
 	const [ notice, setNotice ] = useState< {
 		type: 'success' | 'error' | 'info';
 		message: string;
@@ -361,6 +364,11 @@ function FontCollection( { slug }: { slug: string } ) {
 													font.font_family_settings
 												}
 												navigatorPath="/fontFamily"
+												shouldFocus={
+													font.font_family_settings
+														.slug ===
+													lastSelectedFontSlug
+												}
 												onClick={ () => {
 													setSelectedFont(
 														font.font_family_settings
@@ -382,6 +390,9 @@ function FontCollection( { slug }: { slug: string } ) {
 									}
 									size="small"
 									onClick={ () => {
+										setLastSelectedFontSlug(
+											selectedFont?.slug
+										);
 										setSelectedFont( null );
 										setNotice( null );
 									} }

packages/global-styles-ui/src/font-library/installed-fonts.tsx

@@ -85,6 +85,10 @@ function InstalledFonts() {
 	const [ fontFamilies, setFontFamilies ] = useSetting<
 		Record< string, FontFamilyPreset[] > | undefined
 	>( 'typography.fontFamilies' );
+	const [ lastSelectedFontSlug, setLastSelectedFontSlug ] = useState<
+		string | undefined
+	>( undefined );
+
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] =
 		useState< boolean >( false );
 	const [ notice, setNotice ] = useState< {
@@ -327,6 +331,10 @@ function InstalledFonts() {
 														variantsText={ getFontCardVariantsText(
 															font
 														) }
+														shouldFocus={
+															font.slug ===
+															lastSelectedFontSlug
+														}
 														onClick={ () => {
 															setNotice( null );
 															handleSetLibraryFontSelected(
@@ -368,6 +376,10 @@ function InstalledFonts() {
 														variantsText={ getFontCardVariantsText(
 															font
 														) }
+														shouldFocus={
+															font.slug ===
+															lastSelectedFontSlug
+														}
 														onClick={ () => {
 															setNotice( null );
 															handleSetLibraryFontSelected(
@@ -405,6 +417,9 @@ function InstalledFonts() {
 									}
 									size="small"
 									onClick={ () => {
+										setLastSelectedFontSlug(
+											libraryFontSelected?.slug
+										);
 										handleSetLibraryFontSelected(
 											undefined
 										);