Font Library: Include a "Select All" options to activate/deactivate all fonts

packages/edit-site/src/components/global-styles/font-library-modal/context.js

@@ -384,6 +384,27 @@ function FontLibraryProvider( { children } ) {
 		return activeFonts;
 	};
 
+	const activateFontFamily = ( font ) => {
+		const initialFonts = fontFamilies?.[ font.source ] ?? [];
+		const newFonts = [ ...initialFonts, font ];
+		const activeFonts = {
+			...fontFamilies,
+			[ font.source ]: newFonts,
+		};
+		setFontFamilies( activeFonts );
+
+		if ( font.fontFace ) {
+			font.fontFace.forEach( ( face ) => {
+				loadFontFaceInBrowser(
+					face,
+					getDisplaySrcFromFontFace( face?.src ),
+					'all'
+				);
+			} );
+		}
+		return activeFonts;
+	};
+
 	const activateCustomFontFamilies = ( fontsToAdd ) => {
 		const fontsToActivate = cleanFontsForSave( fontsToAdd );
 
@@ -534,6 +555,8 @@ function FontLibraryProvider( { children } ) {
 				isInstalling,
 				collections,
 				getFontCollection,
+				deactivateFontFamily,
+				activateFontFamily,
 			} }
 		>
 			{ children }

packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -16,6 +16,7 @@ import {
 	Flex,
 	Notice,
 	ProgressBar,
+	CheckboxControl,
 } from '@wordpress/components';
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
@@ -50,8 +51,12 @@ function InstalledFonts() {
 		notice,
 		setNotice,
 		fontFamilies,
+		deactivateFontFamily,
+		activateFontFamily,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+	const [ isSelectAllChecked, setIsSelectAllChecked ] = useState( true );
+
 	const [ baseFontFamilies ] = useGlobalSetting(
 		'typography.fontFamilies',
 		undefined,
@@ -144,6 +149,16 @@ function InstalledFonts() {
 		refreshLibrary();
 	}, [] );
 
+	const handleSelectAll = () => {
+		if ( isSelectAllChecked ) {
+			deactivateFontFamily( libraryFontSelected );
+		} else {
+			activateFontFamily( libraryFontSelected );
+		}
+
+		setIsSelectAllChecked( ! isSelectAllChecked );
+	};
+
 	return (
 		<div className="font-library-modal__tabpanel-layout">
 			{ isResolvingLibrary && (
@@ -295,6 +310,18 @@ function InstalledFonts() {
 							</Text>
 							<Spacer margin={ 4 } />
 							<VStack spacing={ 0 }>
+								<Flex
+									className="font-library-modal__select-all"
+									justify="flex-start"
+									align="center"
+									gap="1rem"
+								>
+									<CheckboxControl
+										label={ __( 'Select all' ) }
+										checked={ isSelectAllChecked }
+										onChange={ handleSelectAll }
+									/>
+								</Flex>
 								<Spacer margin={ 8 } />
 								{ getFontFacesToDisplay(
 									libraryFontSelected

packages/edit-site/src/components/global-styles/font-library-modal/style.scss

@@ -186,3 +186,15 @@ button.font-library-modal__upload-area {
 		justify-content: center;
 	}
 }
+
+.font-library-modal__select-all {
+	width: 100%;
+	height: auto;
+	padding: $grid-unit-20;
+
+	.components-checkbox-control__label {
+		padding-left: $grid-unit-20;
+		font-size: 18px;
+		line-height: 1;
+	}
+}