diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js index b6f8dc46aa564..cf6857b30c59e 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js +++ b/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.' ) } + { getSortedFontFaces( selectedFont ).map( diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss index 5cbb53a6296cc..10b5b816cb9bd 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss +++ b/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; } } -