From f2fbf9a12e3b78ad7c76c4dd85c3253c65dc0312 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Mon, 8 Apr 2024 14:39:46 +0100 Subject: [PATCH 01/16] Replace Spinner with ProgressBar --- .../font-library-modal/font-collection.js | 10 ++++++++-- .../font-library-modal/installed-fonts.js | 3 +-- 2 files changed, 9 insertions(+), 4 deletions(-) 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 4368d72645959..ba6e3ca4e3d17 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 @@ -19,12 +19,12 @@ import { __experimentalHeading as Heading, Notice, SelectControl, - Spinner, FlexItem, Flex, Button, DropdownMenu, SearchControl, + privateApis as componentsPrivateApis, } from '@wordpress/components'; import { debounce } from '@wordpress/compose'; import { sprintf, __, _x } from '@wordpress/i18n'; @@ -45,6 +45,8 @@ import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog'; import { downloadFontFaceAssets } from './utils'; import { sortFontFaces } from './utils/sort-font-faces'; import CollectionFontVariant from './collection-font-variant'; +import { unlock } from '../../../lock-unlock'; +const { ProgressBar } = unlock( componentsPrivateApis ); const DEFAULT_CATEGORY = { slug: 'all', @@ -309,7 +311,11 @@ function FontCollection( { slug } ) { { ! selectedCollection?.font_families && ! notice && ( - + + + + + ) } { !! selectedCollection?.font_families?.length && diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js index ff8d0a7e4565c..ecf4eda3a41b2 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js @@ -15,7 +15,6 @@ import { __experimentalVStack as VStack, Flex, Notice, - Spinner, privateApis as componentsPrivateApis, } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; @@ -116,7 +115,7 @@ function InstalledFonts() { { isResolvingLibrary && ( - + ) } From 6497f94d694ae96bc306cd11d7282411d5dd491c Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Mon, 8 Apr 2024 14:40:20 +0100 Subject: [PATCH 02/16] Fix unrelated dependency array --- .../global-styles/font-library-modal/installed-fonts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js index ecf4eda3a41b2..d41b79fc2d938 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js @@ -108,7 +108,7 @@ function InstalledFonts() { useEffect( () => { handleSetLibraryFontSelected( libraryFontSelected ); refreshLibrary(); - }, [] ); + }, [ handleSetLibraryFontSelected, libraryFontSelected, refreshLibrary ] ); return (
From b37cacdad316776a0ec933ca211a163a7b387076 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Mon, 8 Apr 2024 19:20:40 +0100 Subject: [PATCH 03/16] Revert dependency array change --- .../global-styles/font-library-modal/installed-fonts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js index d41b79fc2d938..ecf4eda3a41b2 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js @@ -108,7 +108,7 @@ function InstalledFonts() { useEffect( () => { handleSetLibraryFontSelected( libraryFontSelected ); refreshLibrary(); - }, [ handleSetLibraryFontSelected, libraryFontSelected, refreshLibrary ] ); + }, [] ); return (
From c189a7c514308d841b12f6442ff820f52c6186c7 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Tue, 9 Apr 2024 12:52:34 +0100 Subject: [PATCH 04/16] Improve use of Spacer components --- .../font-library-modal/font-collection.js | 10 +++++----- .../font-library-modal/installed-fonts.js | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) 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 ba6e3ca4e3d17..8ae4d3d452f8e 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 @@ -311,11 +311,11 @@ function FontCollection( { slug } ) { { ! selectedCollection?.font_families && ! notice && ( - - - - - + + + + + ) } { !! selectedCollection?.font_families?.length && diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js index ecf4eda3a41b2..f068dc0cbba38 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js @@ -113,11 +113,11 @@ function InstalledFonts() { return (
{ isResolvingLibrary && ( - - - - - + + + + + ) } Date: Wed, 10 Apr 2024 11:29:41 +0100 Subject: [PATCH 05/16] Update packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --- .../global-styles/font-library-modal/font-collection.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 8ae4d3d452f8e..094ba66c01b29 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 @@ -312,7 +312,7 @@ function FontCollection( { slug } ) { { ! selectedCollection?.font_families && ! notice && ( - + From 617c4471f1d3a53c2778a4072fd97a7e622f53d2 Mon Sep 17 00:00:00 2001 From: Sarah Norris <1645628+mikachan@users.noreply.github.com> Date: Wed, 10 Apr 2024 11:29:55 +0100 Subject: [PATCH 06/16] Update packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --- .../global-styles/font-library-modal/installed-fonts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js index f068dc0cbba38..5465be90f4943 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js @@ -114,7 +114,7 @@ function InstalledFonts() {
{ isResolvingLibrary && ( - + From cfda6b864b8d312b2d15034e6462370b88a8b42c Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Wed, 10 Apr 2024 18:23:41 +0100 Subject: [PATCH 07/16] Replace ProgressBar with Spinner --- .../global-styles/font-library-modal/font-collection.js | 6 ++---- .../global-styles/font-library-modal/installed-fonts.js | 3 ++- 2 files changed, 4 insertions(+), 5 deletions(-) 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 094ba66c01b29..9042e063f7202 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 @@ -19,12 +19,12 @@ import { __experimentalHeading as Heading, Notice, SelectControl, + Spinner, FlexItem, Flex, Button, DropdownMenu, SearchControl, - privateApis as componentsPrivateApis, } from '@wordpress/components'; import { debounce } from '@wordpress/compose'; import { sprintf, __, _x } from '@wordpress/i18n'; @@ -45,8 +45,6 @@ import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog'; import { downloadFontFaceAssets } from './utils'; import { sortFontFaces } from './utils/sort-font-faces'; import CollectionFontVariant from './collection-font-variant'; -import { unlock } from '../../../lock-unlock'; -const { ProgressBar } = unlock( componentsPrivateApis ); const DEFAULT_CATEGORY = { slug: 'all', @@ -313,7 +311,7 @@ function FontCollection( { slug } ) { { ! selectedCollection?.font_families && ! notice && ( - + ) } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js index 5465be90f4943..1f7788c8f125a 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js @@ -15,6 +15,7 @@ import { __experimentalVStack as VStack, Flex, Notice, + Spinner, privateApis as componentsPrivateApis, } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; @@ -115,7 +116,7 @@ function InstalledFonts() { { isResolvingLibrary && ( - + ) } From 61c6a19df820567dea5ed6fa111fa14295212587 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Thu, 11 Apr 2024 11:09:17 +0100 Subject: [PATCH 08/16] Add CSS for loading container --- .../global-styles/font-library-modal/style.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) 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 989570038fdd6..f1b6176f0ed10 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 @@ -3,7 +3,6 @@ // the content width, we should use that prop instead of this style. // see https://github.com/WordPress/gutenberg/issues/54471. &.font-library-modal { - @include break-medium() { width: 65vw; } @@ -30,9 +29,16 @@ } .font-library-modal__tabpanel-layout { - margin-top: $grid-unit-40; + .font-library-modal__loading { + position: absolute; + top: #{$header-height + $grid-unit-15 + $grid-unit-60}; // (modal header) + (height of the tabs) = 120px + bottom: 0; + left: 0; + right: 0; + } + .font-library-modal__tabpanel-layout__footer { border-top: 1px solid $gray-300; margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1}; @@ -90,6 +96,7 @@ [role="tablist"] { position: sticky; top: 0; + height: $grid-unit-60; border-bottom: 1px solid $gray-300; background: $white; margin: 0 #{$grid-unit-40 * -1}; From 134ba6bca17b4dab7c408eeaa14301908051f947 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Thu, 11 Apr 2024 11:11:53 +0100 Subject: [PATCH 09/16] Replace Spinner in InstalledFonts --- .../font-library-modal/installed-fonts.js | 312 +++++++++--------- 1 file changed, 163 insertions(+), 149 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js index 1f7788c8f125a..abbe8d0dd0a9f 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js @@ -15,7 +15,6 @@ import { __experimentalVStack as VStack, Flex, Notice, - Spinner, privateApis as componentsPrivateApis, } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; @@ -114,164 +113,179 @@ function InstalledFonts() { return (
{ isResolvingLibrary && ( - - - - - +
+ + + +
) } - - - { notice && ( - <> - - setNotice( null ) } - > - { notice.message } - - - - ) } - { baseCustomFonts.length > 0 && ( - <> - - { __( 'Installed Fonts' ) } - - - { baseCustomFonts.map( ( font ) => ( - { - handleSetLibraryFontSelected( font ); - } } - /> - ) ) } - - - ) } + { ! isResolvingLibrary && ( + <> + + + { notice && ( + <> + + setNotice( null ) } + > + { notice.message } + + + + ) } + { baseCustomFonts.length > 0 && ( + <> + + { __( 'Installed Fonts' ) } + + + { baseCustomFonts.map( ( font ) => ( + { + handleSetLibraryFontSelected( + font + ); + } } + /> + ) ) } + + + ) } - { baseThemeFonts.length > 0 && ( - <> - - { __( 'Theme Fonts' ) } - - - { baseThemeFonts.map( ( font ) => ( - 0 && ( + <> + + { __( 'Theme Fonts' ) } + + + { baseThemeFonts.map( ( font ) => ( + { + handleSetLibraryFontSelected( + font + ); + } } + /> + ) ) } + + ) } + + + + + + + + { - handleSetLibraryFontSelected( font ); + handleSetLibraryFontSelected( null ); } } + label={ __( 'Back' ) } /> - ) ) } - - ) } - - - - - + + { libraryFontSelected?.name } + + + { notice && ( + <> + + setNotice( null ) } + > + { notice.message } + + + + ) } + + + { __( + 'Choose font variants. Keep in mind that too many variants could make your site slower.' + ) } + + + + + { getFontFacesToDisplay( + libraryFontSelected + ).map( ( face, i ) => ( + + ) ) } + + + - - + { isInstalling && } + { shouldDisplayDeleteButton && ( + + ) } + - ) } - - + { __( 'Update' ) } + + + + ) }
); } From c170e94935461c21faf433b7d4a6abc31a8dfd1b Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Thu, 11 Apr 2024 11:12:25 +0100 Subject: [PATCH 10/16] Replace Spinner in FontCollection --- .../font-library-modal/font-collection.js | 478 ++++++++++-------- 1 file changed, 254 insertions(+), 224 deletions(-) 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 9042e063f7202..84f165e7399b1 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 @@ -19,12 +19,12 @@ import { __experimentalHeading as Heading, Notice, SelectControl, - Spinner, FlexItem, Flex, Button, DropdownMenu, SearchControl, + privateApis as componentsPrivateApis, } from '@wordpress/components'; import { debounce } from '@wordpress/compose'; import { sprintf, __, _x } from '@wordpress/i18n'; @@ -45,6 +45,8 @@ import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog'; import { downloadFontFaceAssets } from './utils'; import { sortFontFaces } from './utils/sort-font-faces'; import CollectionFontVariant from './collection-font-variant'; +import { unlock } from '../../../lock-unlock'; +const { ProgressBar } = unlock( componentsPrivateApis ); const DEFAULT_CATEGORY = { slug: 'all', @@ -136,6 +138,8 @@ function FontCollection( { slug } ) { [ collectionFonts, filters ] ); + const isLoading = ! selectedCollection?.font_families && ! notice; + // NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px // The height of each font family item is 61px. const windowHeight = Math.max( window.innerHeight, MIN_WINDOW_HEIGHT ); @@ -260,239 +264,265 @@ function FontCollection( { slug } ) { return (
- - - - - - { selectedCollection.name } - - { selectedCollection.description } - - + { isLoading && ( +
+ + - - - - - - - - { categories && - categories.map( ( category ) => ( - - ) ) } - - - - - - - { ! selectedCollection?.font_families && ! notice && ( - - - +
+ ) } + + { ! isLoading && ( + <> + + + + + + { selectedCollection.name } + + + { selectedCollection.description } + + + + + + + + + + + + { categories && + categories.map( ( category ) => ( + + ) ) } + + - - ) } - { !! selectedCollection?.font_families?.length && - ! fonts.length && ( + + + { !! selectedCollection?.font_families?.length && + ! fonts.length && ( + + { __( + 'No fonts found. Try with a different search term' + ) } + + ) } + +
+ { items.map( ( font ) => ( + { + setSelectedFont( + font.font_family_settings + ); + } } + /> + ) ) } +
+ + + + + { + setSelectedFont( null ); + setNotice( null ); + } } + label={ __( 'Back' ) } + /> + + { selectedFont?.name } + + + { notice && ( + <> + + setNotice( null ) } + > + { notice.message } + + + + ) } + + { ' ' } { __( - 'No fonts found. Try with a different search term' - ) } + 'Select font variants to install.' + ) }{ ' ' } - ) } - -
- { items.map( ( font ) => ( - { - setSelectedFont( - font.font_family_settings - ); - } } - /> - ) ) } -
- - - - - { - setSelectedFont( null ); - setNotice( null ); - } } - label={ __( 'Back' ) } - /> - + + + { getSortedFontFaces( selectedFont ).map( + ( face, i ) => ( + + ) + ) } + + + + + + { selectedFont && ( + - { selectedFont?.name } - - - { notice && ( - <> - - setNotice( null ) } + + ) } - - { __( 'Select font variants to install.' ) } - - - - { getSortedFontFaces( selectedFont ).map( - ( face, i ) => ( - - ) - ) } - - - - - - { selectedFont && ( - - - - ) } - { ! selectedFont && ( - - - - - { createInterpolateElement( - sprintf( - // translators: %s: Total number of pages. - _x( - 'Page of %s', - 'paging' - ), - totalPages - ), - { - CurrentPageControl: ( - { - return { - label: i + 1, - value: i + 1, - }; - } ) } - onChange={ ( newPage ) => - setPage( parseInt( newPage ) ) - } - size={ 'compact' } - __nextHasNoMarginBottom - /> - ), - } - ) } - - - - + { ! selectedFont && ( + + + + + { createInterpolateElement( + sprintf( + // translators: %s: Total number of pages. + _x( + 'Page of %s', + 'paging' + ), + totalPages + ), + { + CurrentPageControl: ( + { + return { + label: i + 1, + value: i + 1, + }; + } ) } + onChange={ ( newPage ) => + setPage( + parseInt( newPage ) + ) + } + size={ 'compact' } + __nextHasNoMarginBottom + /> + ), + } + ) } + + + + + ) } + ) }
); From 890fa18f8738b529e5896f00ebfbc1d1d08bc560 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Thu, 11 Apr 2024 11:16:36 +0100 Subject: [PATCH 11/16] Fix text wrap on font names --- .../components/global-styles/font-library-modal/style.scss | 5 +++++ 1 file changed, 5 insertions(+) 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 f1b6176f0ed10..aeb2d5adaaa39 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 @@ -72,6 +72,11 @@ .font-library-modal__font-card__count { color: $gray-700; } + + .font-library-modal__font-variant_demo-text { + white-space: nowrap; + text-overflow: ellipsis; + } } .font-library-modal__font-variant_demo-image { From 6bb02a943fb182599ffb5fb8795f688446c14fd7 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Thu, 11 Apr 2024 17:27:40 +0100 Subject: [PATCH 12/16] Make demo text CSS more specific --- .../font-library-modal/style.scss | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) 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 aeb2d5adaaa39..794c5dc868609 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 @@ -73,25 +73,20 @@ color: $gray-700; } + .font-library-modal__font-variant_demo-image { + display: block; + height: $grid-unit-30; + width: auto; + } + .font-library-modal__font-variant_demo-text { white-space: nowrap; - text-overflow: ellipsis; + flex-shrink: 0; + transition: opacity 0.3s ease-in-out; + @include reduce-motion("transition"); } } -.font-library-modal__font-variant_demo-image { - display: block; - height: $grid-unit-30; - width: auto; -} - -.font-library-modal__font-variant_demo-text { - white-space: nowrap; - flex-shrink: 0; - transition: opacity 0.3s ease-in-out; - @include reduce-motion("transition"); -} - .font-library-modal__font-variant { border-bottom: 1px solid $gray-200; padding-bottom: $grid-unit-20; From ab509646306041077346ce9efdcc7ee42f6e88a6 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Thu, 11 Apr 2024 18:16:57 +0100 Subject: [PATCH 13/16] Simplify ProgressBar markup --- .../font-library-modal/font-collection.js | 9 +-------- .../font-library-modal/installed-fonts.js | 9 +-------- .../global-styles/font-library-modal/style.scss | 10 ++++++---- 3 files changed, 8 insertions(+), 20 deletions(-) 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 84f165e7399b1..7e624f4af3e83 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 @@ -266,14 +266,7 @@ function FontCollection( { slug } ) {
{ isLoading && (
- - - +
) } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js index 34e757a6d0186..b33bb1b639d00 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js @@ -114,14 +114,7 @@ function InstalledFonts() {
{ isResolvingLibrary && (
- - - +
) } 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 4f5c34faa06ea..b455c0666f98c 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 @@ -37,11 +37,14 @@ $footer-height: 70px; margin-top: $grid-unit-40; .font-library-modal__loading { + width: 100%; + height: 100%; + display: flex; position: absolute; - top: #{$header-height + $grid-unit-15 + $grid-unit-60}; // (modal header) + (height of the tabs) = 120px - bottom: 0; left: 0; - right: 0; + top: $header-height; + align-items: center; + justify-content: center; } .font-library-modal__tabpanel-layout__footer { @@ -102,7 +105,6 @@ $footer-height: 70px; [role="tablist"] { position: sticky; top: 0; - height: $grid-unit-60; border-bottom: 1px solid $gray-300; background: $white; margin: 0 #{$grid-unit-40 * -1}; From e2d9c94d4c4f50c83fcffc5b0964c6a01d0f0700 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Fri, 12 Apr 2024 17:43:03 +0100 Subject: [PATCH 14/16] Remove unnecessary spaces --- .../global-styles/font-library-modal/font-collection.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) 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 7e624f4af3e83..1a1853ac62a38 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 @@ -380,10 +380,7 @@ function FontCollection( { slug } ) { ) } - { ' ' } - { __( - 'Select font variants to install.' - ) }{ ' ' } + { __( 'Select font variants to install.' ) } From 7dafc44afab986ff934e47a4589e4eb53cec55fd Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Fri, 12 Apr 2024 18:06:27 +0100 Subject: [PATCH 15/16] Move centering offset to padding-top --- .../src/components/global-styles/font-library-modal/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 b455c0666f98c..c62a162e2e495 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 @@ -42,9 +42,10 @@ $footer-height: 70px; display: flex; position: absolute; left: 0; - top: $header-height; + top: 0; align-items: center; justify-content: center; + padding-top: $header-height; } .font-library-modal__tabpanel-layout__footer { From 89e2314d104856aba53b2a181e08ededbda9bb0f Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sat, 13 Apr 2024 14:08:00 +0900 Subject: [PATCH 16/16] Add calculated top padding to loading wrapper element --- .../components/global-styles/font-library-modal/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 c62a162e2e495..201d4d87a3fb1 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 @@ -45,7 +45,9 @@ $footer-height: 70px; top: 0; align-items: center; justify-content: center; - padding-top: $header-height; + // Push down so that the progress bar is centered vertically. + // It should be 120px (72px modal header height + 48px tab height) + padding-top: $header-height + $grid-unit-15 + $grid-unit-60; } .font-library-modal__tabpanel-layout__footer {