available font faces: adding animation when removing or restoring fon…

…t faces

packages/edit-site/package.json

@@ -27,6 +27,7 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@react-spring/web": "^9.4.5",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/block-editor": "file:../block-editor",

packages/edit-site/src/components/global-styles/screen-theme-font-faces.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { useSpring, animated } from '@react-spring/web';
+
 /**
  * WordPress dependencies
  */
@@ -18,18 +23,59 @@ import Subtitle from './subtitle';
 import { useFontFamilies } from './hooks';
 import FontFaceItem from './font-face-item';
 
+function RemovableFontFace( { fontFace } ) {
+	const { handleRemoveFontFace } = useFontFamilies();
+	const [ springs, api ] = useSpring( () => ( {
+		from: { y: 0, opacity: 1 },
+	} ) );
+
+	useEffect( () => {
+		if ( ! fontFace.shouldBeRemoved ) {
+			api.start( { y: 0, opacity: 1 } );
+		}
+	}, [ fontFace ] );
+
+	const handleRemove = () => {
+		api.start( { y: -20, opacity: 0 } );
+		const timer = setTimeout( () => {
+			handleRemoveFontFace(
+				fontFace.fontFamily,
+				fontFace.fontWeight,
+				fontFace.fontStyle
+			);
+			return () => clearTimeout( timer );
+		}, 200 );
+	};
+
+	if ( fontFace.shouldBeRemoved ) {
+		return null;
+	}
+
+	return (
+		<animated.div style={ springs }>
+			<FontFaceItem
+				fontFace={ fontFace }
+				actionTrigger={
+					<Tooltip text={ __( 'Remove Font Face' ) } delay={ 0 }>
+						<Button
+							style={ { padding: '0 8px' } }
+							onClick={ handleRemove }
+						>
+							<Icon icon={ check } size={ 20 } />
+						</Button>
+					</Tooltip>
+				}
+			/>
+		</animated.div>
+	);
+}
+
 function ScreenThemeFontFacesList( { themeFontSelected } ) {
 	const { goBack } = useNavigator();
-	const { fontFamilies, handleRemoveFontFace, sortFontFaces } =
-		useFontFamilies();
+	const { fontFamilies, sortFontFaces } = useFontFamilies();
 	const font = fontFamilies[ themeFontSelected ];
 	const getFontFaces = ( fontFamily ) => {
-		if ( ! fontFamily || ! Array.isArray( fontFamily.fontFace ) ) {
-			return [];
-		}
-		return sortFontFaces(
-			font.fontFace.filter( ( fontFace ) => ! fontFace.shouldBeRemoved )
-		);
+		return sortFontFaces( fontFamily.fontFace || [] );
 	};
 	const fontFaces = useMemo( () => getFontFaces( font ), [ fontFamilies ] );
 
@@ -68,28 +114,9 @@ function ScreenThemeFontFacesList( { themeFontSelected } ) {
 				{ ! font && <p>{ __( 'No font faces available' ) }</p> }
 
 				{ fontFaces.map( ( fontFace, i ) => (
-					<FontFaceItem
+					<RemovableFontFace
 						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>
-						}
+						key={ `fontface-${ i }` }
 					/>
 				) ) }
 			</div>