Font Library: Include a "Select All" options for google fonts (#63893)

* Add select all toggle for google fonts in font library

* Remove styles

Co-authored-by: akasunil <sunil25393@git.wordpress.org>
Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: creativecoder <grantmkin@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: ghorivipul97 <ghorivipul97@git.wordpress.org>

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

@@ -25,6 +25,7 @@ import {
 	DropdownMenu,
 	SearchControl,
 	ProgressBar,
+	CheckboxControl,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
@@ -175,6 +176,25 @@ function FontCollection( { slug } ) {
 		setFontsToInstall( [] );
 	};
 
+	const selectFontCount =
+		fontsToInstall.length > 0 ? fontsToInstall[ 0 ]?.fontFace?.length : 0;
+
+	// Check if any fonts are selected.
+	const isIndeterminate =
+		selectFontCount > 0 &&
+		selectFontCount !== selectedFont?.fontFace?.length;
+
+	// Check if all fonts are selected.
+	const isSelectAllChecked =
+		selectFontCount === selectedFont?.fontFace?.length;
+
+	// Toggle select all fonts.
+	const toggleSelectAll = () => {
+		const newFonts = isSelectAllChecked ? [] : [ selectedFont ];
+
+		setFontsToInstall( newFonts );
+	};
+
 	const handleInstall = async () => {
 		setNotice( null );
 
@@ -400,6 +420,14 @@ function FontCollection( { slug } ) {
 								{ __( 'Select font variants to install.' ) }
 							</Text>
 							<Spacer margin={ 4 } />
+							<CheckboxControl
+								className="font-library-modal__select-all"
+								label={ __( 'Select all' ) }
+								checked={ isSelectAllChecked }
+								onChange={ toggleSelectAll }
+								indeterminate={ isIndeterminate }
+								__nextHasNoMarginBottom
+							/>
 							<VStack spacing={ 0 }>
 								<Spacer margin={ 8 } />
 								{ getSortedFontFaces( selectedFont ).map(

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

@@ -194,4 +194,3 @@ button.font-library-modal__upload-area {
 		padding-left: $grid-unit-20;
 	}
 }
-