From a34b3b43d2681113a50968fcdee5b2764b04ce16 Mon Sep 17 00:00:00 2001 From: Jason Crist Date: Fri, 23 Feb 2024 11:55:02 -0500 Subject: [PATCH] Use NavigatorProvider in Font Library Modal (#59036) * Use NavigatorProvider in installed fonts panel * Style Changes to font modal installed font details page * Simplified Font Face Demo component so it can be more easily reused * Refactored 'installed-fonts' component to use Navigator Components * Refactored Font Collection tab to use Navigator Provider, refactored Font Card to handle navigator transitions and consolidated components when possible * Corrected/standardized Font Demo component name throughout * Fixed notice display * Fixed focus state outline * Fixed secondary page heading layout * Added hover state to font list items * Simplified and removed 'TabPanelLayout' component * close verify window as soon as user ansswers * Fixed a bug to better support BOTH font FAMILIES as well as font FACES in the Font Demo component. * Returned selected font heading to use Heading instead of Font Demo * Fixed linting error Co-authored-by: pbking Co-authored-by: matiasbenedetto Co-authored-by: colorful-tones Co-authored-by: t-hamano Co-authored-by: carolinan Co-authored-by: afercia Co-authored-by: joedolson Co-authored-by: alexstine Co-authored-by: andrewhayward Co-authored-by: afragen Co-authored-by: jasmussen Co-authored-by: juanfra Co-authored-by: okmttdhr --- .../collection-font-details.js | 56 -- .../collection-font-variant.js | 8 +- .../confirm-delete-dialog.js | 33 -- .../font-library-modal/font-card.js | 37 +- .../font-library-modal/font-collection.js | 477 ++++++++++-------- .../font-library-modal/font-demo.js | 42 +- .../font-library-modal/installed-fonts.js | 338 ++++++++----- .../font-library-modal/library-font-card.js | 34 -- .../library-font-variant.js | 8 +- .../font-library-modal/style.scss | 23 +- .../font-library-modal/tab-panel-layout.js | 92 ---- .../font-library-modal/upload-fonts.js | 18 +- 12 files changed, 580 insertions(+), 586 deletions(-) delete mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js delete mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/confirm-delete-dialog.js delete mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js delete mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js deleted file mode 100644 index a696295266193..0000000000000 --- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * WordPress dependencies - */ -import { - __experimentalVStack as VStack, - __experimentalSpacer as Spacer, -} from '@wordpress/components'; - -/** - * Internal dependencies - */ -import CollectionFontVariant from './collection-font-variant'; -import { isFontFontFaceInOutline } from './utils/fonts-outline'; -import { sortFontFaces } from './utils/sort-font-faces'; - -function CollectionFontDetails( { - font, - handleToggleVariant, - fontToInstallOutline, -} ) { - const fontFaces = - font.fontFace && font.fontFace.length - ? sortFontFaces( font.fontFace ) - : [ - { - fontFamily: font.fontFamily, - fontStyle: 'normal', - fontWeight: '400', - }, - ]; - - return ( - <> - - - - { fontFaces.map( ( face, i ) => ( - - ) ) } - - - - ); -} - -export default CollectionFontDetails; diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js index 0db8932a98e34..04300be95a0cf 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js @@ -11,7 +11,7 @@ import { * Internal dependencies */ import { getFontFaceVariantName } from './utils'; -import FontFaceDemo from './font-demo'; +import FontDemo from './font-demo'; import { unlock } from '../../../lock-unlock'; function CollectionFontVariant( { @@ -35,7 +35,7 @@ function CollectionFontVariant( { ); return ( -
+
) } - - { ! renderConfirmDialog && - ! selectedCollection?.font_families && - ! notice && } - - { ! renderConfirmDialog && - !! selectedCollection?.font_families?.length && - ! fonts.length && ( - - { __( - 'No fonts found. Try with a different search term' + { ! selectedFont && ( + + + + + { createInterpolateElement( + sprintf( + // translators: %s: Total number of pages. + _x( + 'Page of %s', + 'paging' + ), + totalPages + ), + { + CurrenPageControl: ( + { + return { + label: i + 1, + value: i + 1, + }; + } ) } + onChange={ ( newPage ) => + setPage( parseInt( newPage ) ) + } + size={ 'compact' } + __nextHasNoMarginBottom + /> + ), + } ) } - - ) } - - { ! renderConfirmDialog && selectedFont && ( - - ) } - - { ! renderConfirmDialog && ! selectedFont && ( -
- { items.map( ( font ) => ( - { - setSelectedFont( font.font_family_settings ); - } } - /> - ) ) } -
+ + + + ) } - - ); -} - -function PaginationFooter( { page, totalPages, setPage } ) { - return ( - - - - - { createInterpolateElement( - sprintf( - // translators: %s: Total number of pages. - _x( 'Page of %s', 'paging' ), - totalPages - ), - { - CurrenPageControl: ( - { - return { - label: i + 1, - value: i + 1, - }; - } - ) } - onChange={ ( newPage ) => - setPage( parseInt( newPage ) ) - } - size={ 'compact' } - __nextHasNoMarginBottom - /> - ), - } - ) } - - - - - ); -} - -function InstallFooter( { handleInstall, isDisabled } ) { - const { isInstalling } = useContext( FontLibraryContext ); - - return ( - - - +
); } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js index ee745caf45932..0320bdd4e4893 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js @@ -8,7 +8,10 @@ import { useContext, useEffect, useState, useRef } from '@wordpress/element'; * Internal dependencies */ import { FontLibraryContext } from './context'; -import { getFacePreviewStyle } from './utils/preview-styles'; +import { + getFacePreviewStyle, + getFamilyPreviewStyle, +} from './utils/preview-styles'; function getPreviewUrl( fontFace ) { if ( fontFace.preview ) { @@ -19,8 +22,39 @@ function getPreviewUrl( fontFace ) { } } -function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) { +function getDisplayFontFace( font ) { + // if this IS a font face return it + if ( font.fontStyle || font.fontWeight ) { + return font; + } + // if this is a font family with a collection of font faces + // return the first one that is normal and 400 OR just the first one + if ( font.fontFace && font.fontFace.length ) { + return ( + font.fontFace.find( + ( face ) => + face.fontStyle === 'normal' && face.fontWeight === '400' + ) || font.fontFace[ 0 ] + ); + } + // This must be a font family with no font faces + // return a fake font face + return { + fontStyle: 'normal', + fontWeight: '400', + fontFamily: font.fontFamily, + fake: true, + }; +} + +function FontDemo( { font, text } ) { const ref = useRef( null ); + + const fontFace = getDisplayFontFace( font ); + const style = getFamilyPreviewStyle( font ); + text = text || font.name; + const customPreviewUrl = font.preview; + const [ isIntersecting, setIsIntersecting ] = useState( false ); const [ isAssetLoaded, setIsAssetLoaded ] = useState( false ); const { loadFontFaceAsset } = useContext( FontLibraryContext ); @@ -34,8 +68,8 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) { fontSize: '18px', lineHeight: 1, opacity: isAssetLoaded ? '1' : '0', - ...faceStyles, ...style, + ...faceStyles, }; useEffect( () => { @@ -79,4 +113,4 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) { ); } -export default FontFaceDemo; +export default FontDemo; 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 99c99e44a43af..a72b7d59d150c 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 @@ -1,27 +1,35 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; -import { useContext, useEffect, useState } from '@wordpress/element'; import { - privateApis as componentsPrivateApis, + Button, + __experimentalConfirmDialog as ConfirmDialog, __experimentalHStack as HStack, + __experimentalHeading as Heading, + __experimentalNavigatorProvider as NavigatorProvider, + __experimentalNavigatorScreen as NavigatorScreen, + __experimentalNavigatorToParentButton as NavigatorToParentButton, + __experimentalUseNavigator as useNavigator, __experimentalSpacer as Spacer, __experimentalText as Text, - Button, + __experimentalVStack as VStack, + Flex, + Notice, Spinner, - FlexItem, + privateApis as componentsPrivateApis, } from '@wordpress/components'; +import { useContext, useEffect, useState } from '@wordpress/element'; +import { __, sprintf } from '@wordpress/i18n'; +import { chevronLeft } from '@wordpress/icons'; /** * Internal dependencies */ -import TabPanelLayout from './tab-panel-layout'; -import { FontLibraryContext } from './context'; -import LibraryFontDetails from './library-font-details'; -import LibraryFontCard from './library-font-card'; -import ConfirmDeleteDialog from './confirm-delete-dialog'; import { unlock } from '../../../lock-unlock'; +import { FontLibraryContext } from './context'; +import FontCard from './font-card'; +import LibraryFontVariant from './library-font-variant'; +import { sortFontFaces } from './utils/sort-font-faces'; const { ProgressBar } = unlock( componentsPrivateApis ); function InstalledFonts() { @@ -33,102 +41,98 @@ function InstalledFonts() { refreshLibrary, uninstallFontFamily, isResolvingLibrary, + isInstalling, + saveFontFamilies, + getFontFacesActivated, + fontFamiliesHasChanges, notice, setNotice, } = useContext( FontLibraryContext ); const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false ); - const handleUnselectFont = () => { - handleSetLibraryFontSelected( null ); - }; + const shouldDisplayDeleteButton = + !! libraryFontSelected && libraryFontSelected?.source !== 'theme'; - const handleSelectFont = ( font ) => { - handleSetLibraryFontSelected( font ); + const handleUninstallClick = () => { + setIsConfirmDeleteOpen( true ); }; - const handleConfirmUninstall = async () => { - setNotice( null ); - - try { - await uninstallFontFamily( libraryFontSelected ); - setNotice( { - type: 'success', - message: __( 'Font family uninstalled successfully.' ), - } ); - - // If the font was succesfully uninstalled it is unselected. - handleUnselectFont(); - setIsConfirmDeleteOpen( false ); - } catch ( error ) { - setNotice( { - type: 'error', - message: - __( 'There was an error uninstalling the font family. ' ) + - error.message, - } ); + const getFontFacesToDisplay = ( font ) => { + if ( ! font ) { + return []; } + if ( ! font.fontFace || ! font.fontFace.length ) { + return [ + { + fontFamily: font.fontFamily, + fontStyle: 'normal', + fontWeight: '400', + }, + ]; + } + return sortFontFaces( font.fontFace ); }; - const handleUninstallClick = async () => { - setIsConfirmDeleteOpen( true ); - }; - - const handleCancelUninstall = () => { - setIsConfirmDeleteOpen( false ); + const getFontCardVariantsText = ( font ) => { + const variantsInstalled = + font?.fontFace?.length > 0 ? font.fontFace.length : 1; + const variantsActive = getFontFacesActivated( + font.slug, + font.source + ).length; + return sprintf( + /* translators: 1: Active font variants, 2: Total font variants. */ + __( '%1$s/%2$s variants active' ), + variantsActive, + variantsInstalled + ); }; - const tabDescription = !! libraryFontSelected - ? __( - 'Choose font variants. Keep in mind that too many variants could make your site slower.' - ) - : null; - - const shouldDisplayDeleteButton = - !! libraryFontSelected && libraryFontSelected?.source !== 'theme'; - useEffect( () => { - handleSelectFont( libraryFontSelected ); + handleSetLibraryFontSelected( libraryFontSelected ); refreshLibrary(); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ); return ( - - } - > - - - { ! libraryFontSelected && ( - <> - { isResolvingLibrary && ( - - - - - +
+ { isResolvingLibrary && ( + + + + + + ) } + + + + { notice && ( + <> + + setNotice( null ) } + > + { notice.message } + + + ) } { baseCustomFonts.length > 0 && ( <> + + { __( 'Installed Fonts' ) } + + { baseCustomFonts.map( ( font ) => ( - { - handleSelectFont( font ); + handleSetLibraryFontSelected( font ); } } /> ) ) } @@ -141,42 +145,93 @@ function InstalledFonts() { { __( 'Theme Fonts' ) } - { baseThemeFonts.map( ( font ) => ( - { - handleSelectFont( font ); + handleSetLibraryFontSelected( font ); } } /> ) ) } ) } - - ) } + - { libraryFontSelected && ( - - ) } - - ); -} + + -function Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) { - const { saveFontFamilies, fontFamiliesHasChanges, isInstalling } = - useContext( FontLibraryContext ); - return ( - - { isInstalling && } -
+ + { + handleSetLibraryFontSelected( null ); + } } + aria-label={ __( 'Navigate to the previous view' ) } + /> + + { 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 && (
- - + + +
+ ); +} + +function ConfirmDeleteDialog( { + font, + isOpen, + setIsOpen, + setNotice, + uninstallFontFamily, + handleSetLibraryFontSelected, +} ) { + const navigator = useNavigator(); + + const handleConfirmUninstall = async () => { + setNotice( null ); + setIsOpen( false ); + try { + await uninstallFontFamily( font ); + navigator.goBack(); + handleSetLibraryFontSelected( null ); + setNotice( { + type: 'success', + message: __( 'Font family uninstalled successfully.' ), + } ); + } catch ( error ) { + setNotice( { + type: 'error', + message: + __( 'There was an error uninstalling the font family. ' ) + + error.message, + } ); + } + }; + + const handleCancelUninstall = () => { + setIsOpen( false ); + }; + + return ( + + { font && + sprintf( + /* translators: %s: Name of the font. */ + __( + 'Are you sure you want to delete "%s" font and all its variants and assets?' + ), + font.name + ) } + ); } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js deleted file mode 100644 index aae43fcf63eba..0000000000000 --- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * WordPress dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; -import { useContext } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import FontCard from './font-card'; -import { FontLibraryContext } from './context'; - -function LibraryFontCard( { font, ...props } ) { - const { getFontFacesActivated } = useContext( FontLibraryContext ); - - const variantsInstalled = - font?.fontFace?.length > 0 ? font.fontFace.length : 1; - const variantsActive = getFontFacesActivated( - font.slug, - font.source - ).length; - const variantsText = sprintf( - /* translators: 1: Active font variants, 2: Total font variants. */ - __( '%1$s/%2$s variants active' ), - variantsActive, - variantsInstalled - ); - - return ( - - ); -} - -export default LibraryFontCard; diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js index f58eccd2b6ec2..a81d12bbe858d 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js @@ -13,7 +13,7 @@ import { */ import { getFontFaceVariantName } from './utils'; import { FontLibraryContext } from './context'; -import FontFaceDemo from './font-demo'; +import FontDemo from './font-demo'; import { unlock } from '../../../lock-unlock'; function LibraryFontVariant( { face, font } ) { @@ -45,7 +45,7 @@ function LibraryFontVariant( { face, font } ) { ); return ( -
+