From 9fc442c6b5c9e0cee869beda9012d64074056090 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 1 Jan 2024 12:37:08 +0530 Subject: [PATCH 1/3] Add progress bar when uploading the font file via site editor --- .../font-library-modal/local-fonts.js | 40 ++++++++++++------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js index 9612f8be52f5e..503741a2e0890 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js @@ -11,6 +11,7 @@ import { FormFileUpload, Notice, FlexItem, + privateApis as componentsPrivateApis, } from '@wordpress/components'; import { useContext, useState, useEffect } from '@wordpress/element'; @@ -23,10 +24,14 @@ import { Font } from '../../../../lib/lib-font.browser'; import makeFamiliesFromFaces from './utils/make-families-from-faces'; import { loadFontFaceInBrowser } from './utils'; import { getNoticeFromInstallResponse } from './utils/get-notice-from-response'; +import { unlock } from '../../../lock-unlock'; + +const { ProgressBar } = unlock( componentsPrivateApis ); function LocalFonts() { const { installFonts } = useContext( FontLibraryContext ); const [ notice, setNotice ] = useState( null ); + const [ isUploading, setIsUploading ] = useState( false ); const supportedFormats = ALLOWED_FILE_EXTENSIONS.slice( 0, -1 ) .map( ( extension ) => `.${ extension }` ) @@ -58,6 +63,7 @@ function LocalFonts() { */ const handleFilesUpload = ( files ) => { setNotice( null ); + setIsUploading( true ); const uniqueFilenames = new Set(); const selectedFiles = [ ...files ]; const allowedFiles = selectedFiles.filter( ( file ) => { @@ -150,6 +156,7 @@ function LocalFonts() { const response = await installFonts( fontFamilies ); const installNotice = getNoticeFromInstallResponse( response ); setNotice( installNotice ); + setIsUploading( false ); }; return ( @@ -157,21 +164,24 @@ function LocalFonts() { - `.${ ext }` - ).join( ',' ) } - multiple={ true } - onChange={ onFilesUpload } - render={ ( { openFileDialog } ) => ( - - ) } - /> + { ! isUploading && ( + `.${ ext }` + ).join( ',' ) } + multiple={ true } + onChange={ onFilesUpload } + render={ ( { openFileDialog } ) => ( + + ) } + /> + ) } + { isUploading && } { notice && ( From 710f22fa704f8334818909f05a5d96bd142bb352 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Thu, 4 Jan 2024 10:15:15 +0530 Subject: [PATCH 2/3] Add vertical spacing and make progress bar center align With this commit, we have centered the progress bar and added some vertical spacing to the progress bar so it look as in center.Also while uploading we have just shown the progress bar and no text before and after, because while uploading it is good to show only progress bar. --- .../font-library-modal/local-fonts.js | 30 ++++++++++++------- .../font-library-modal/style.scss | 4 +++ 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js index 503741a2e0890..23e2921b593a2 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js @@ -181,8 +181,14 @@ function LocalFonts() { ) } /> ) } - { isUploading && } - { notice && ( + { isUploading && ( + + + + + + ) } + { ! isUploading && notice && ( ) } - - { sprintf( - /* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */ - __( - 'Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.' - ), - supportedFormats - ) } - + { ! isUploading && ( + + { sprintf( + /* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */ + __( + 'Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.' + ), + supportedFormats + ) } + + ) } ); 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 86cac4244dea9..bdd49f140cd6a 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 @@ -101,6 +101,10 @@ margin: 0 auto; width: 80%; + .font-library-modal__upload-area__progress-bar { + margin: 0 auto; // Inherit does not work here, because it's inside a flex Item. + } + .font-library-modal__upload-area__text { color: #6e6e6e; } From 55fa1211673ea64ed437f5881221c6416873b330 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Thu, 4 Jan 2024 17:04:05 +0530 Subject: [PATCH 3/3] Add more consistent style for progress bar Added the consistent style for progress bar and also change the text position before any notice after uploading the fonts in order to reduce the layout shifts. --- .../font-library-modal/local-fonts.js | 28 +++++++++---------- .../font-library-modal/style.scss | 7 ++--- 2 files changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js index 23e2921b593a2..4030dcfb69a77 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js @@ -183,11 +183,21 @@ function LocalFonts() { ) } { isUploading && ( - - - +
+ +
) } + + + { sprintf( + /* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */ + __( + 'Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.' + ), + supportedFormats + ) } + { ! isUploading && notice && ( @@ -200,18 +210,6 @@ function LocalFonts() { ) } - - { ! isUploading && ( - - { sprintf( - /* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */ - __( - 'Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.' - ), - supportedFormats - ) } - - ) } ); 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 bdd49f140cd6a..4af4d238afa90 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 @@ -94,6 +94,9 @@ justify-content: center; height: 250px; width: 100%; +} + +button.font-library-modal__upload-area { background-color: #f0f0f0; } @@ -101,10 +104,6 @@ margin: 0 auto; width: 80%; - .font-library-modal__upload-area__progress-bar { - margin: 0 auto; // Inherit does not work here, because it's inside a flex Item. - } - .font-library-modal__upload-area__text { color: #6e6e6e; }