Skip to content

Commit

Permalink
Font Library: Make notices more consistent (#58180)
Browse files Browse the repository at this point in the history 
* Font Library: add wp_font_face post type and scaffold font face REST API controller (#57656)

* Font Library: create font faces through the REST API (#57702)

* Refactor Font Family Controller (#57785)

* Font Family and Font Face REST API endpoints: better data handling and errors  (#57843)

* Font Families REST API endpoint: ensure unique font family slugs (#57861)

* Font Library: delete child font faces and font assets when deleting parent (#57867)

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

* Font Library: refactor client side install functions to work with revised API (#57844)

* Add batchInstallFontFaces function and related plumbing.

* Fix resolver name.

* Add embedding and rebuild theme.json settings for fontFamily.

* Handle responses directly, add to collection before activating. Remove unused test.

* Remove getIntersectingFontFaces.

* Check for existing font family before installing.

* Reference src, not uploadedFile key.

Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>

* Check for existing font family using GET /font-families?slug=.

* Filter already installed font faces (determined by matching fontWeight AND fontStyle)

---------

Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: Jason Crist <jcrist@pbking.com>

* Cleanup/font library view error handling (#57926)

* Add batchInstallFontFaces function and related plumbing.

* Fix resolver name.

* Add embedding and rebuild theme.json settings for fontFamily.

* Handle responses directly, add to collection before activating. Remove unused test.

* Remove getIntersectingFontFaces.

* Check for existing font family before installing.

* Reference src, not uploadedFile key.

Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>

* Check for existing font family using GET /font-families?slug=.

* Filter already installed font faces (determined by matching fontWeight AND fontStyle)

* moved response processing into the resolver for fetchGetFontFamilyBySlug

* Moved response processing for font family installation to the resolver

* Refactored font face installation process to handle errors more cleanly

* Cleanup error handling for font library view

* Add i18n function to error messages

* Add TODO comment for uninstall notice

---------

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: Sarah Norris <sarah@sekai.co.uk>

* Font Faces endpoint: prevent creating font faces with duplicate settings (#57903)

* Font Library: Update uninstall/delete on client side (#57932)

* Fix delete endpoint

* Update fetchUninstallFontFamily to match new format

* Update uninstallFont

* Add uninstall notice back in

* Tidy up comments

* Re-word uninstall notices

* Add spacing to error message

* Refactored how font family values were processed so they would retain their id, which is now used to delete a font family without fetching data via slug

* Rename uninstallFont to uninstallFontFamily

* Throw uninstall errors rather than returning them

---------

Co-authored-by: Jason Crist <jcrist@pbking.com>

* Update packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js

Co-authored-by: Jonny Harris <spacedmonkey@users.noreply.github.com>

* Font Library: address JS feedback in #57688 (#57961)

* Wrap error messages in sprintf

* Use await rather than then

* Add variables for API URLs

* Update packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js

Co-authored-by: Jeff Ong <jonger4@gmail.com>

---------

Co-authored-by: Jeff Ong <jonger4@gmail.com>

* Add missing dep in font-demo

* Move notice to top of local-fonts panel

* Add container around spinner

* Move notice to TabPanelLayout

* Remove spacer from LocalFonts

* Move notice and setNotice state to context.js

* Move spacer outside of notice container

* Rename LocalFonts to UploadFonts

* Make notices dismissible

* Reset notices onRemove

* Reset notice when new tab is selected

* Reset notice on each action

* Fix notice re-render on fetchFontCollection

* Move notices below font collection title and description

---------

Co-authored-by: Grant Kinney <creativecoder@users.noreply.github.com>
Co-authored-by: Grant Kinney <hi@grant.mk>
Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: Jason Crist <jcrist@pbking.com>
Co-authored-by: Jonny Harris <spacedmonkey@users.noreply.github.com>
  • Loading branch information
@mikachan @creativecoder
@jffng @matiasbenedetto @pbking @spacedmonkey @cbravobernal
7 people authored and cbravobernal committed Jan 30, 2024
1 parent aac6674 commit 6715cf5
Show file tree
Hide file tree
Showing 9 changed files with 262 additions and 325 deletions.
14 changes: 14 additions & 0 deletions packages/edit-site/src/components/global-styles/font-library-modal/context.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,21 @@ function FontLibraryProvider( { children } ) {

const [ isInstalling, setIsInstalling ] = useState( false );
const [ refreshKey, setRefreshKey ] = useState( 0 );
const [ notice, setNotice ] = useState( null );

const refreshLibrary = () => {
setRefreshKey( Date.now() );
};

// Reset notice on dismiss.
useEffect( () => {
if ( notice ) {
notice.onRemove = () => {
setNotice( null );
};
}
}, [ notice, setNotice ] );

const {
records: libraryPosts = [],
isResolving: isResolvingLibrary,
Expand Down Expand Up @@ -134,6 +144,8 @@ function FontLibraryProvider( { children } ) {
}, [ modalTabOpen ] );

const handleSetLibraryFontSelected = ( font ) => {
setNotice( null );

// If font is null, reset the selected font
if ( ! font ) {
setLibraryFontSelected( null );
Expand Down Expand Up @@ -471,6 +483,8 @@ function FontLibraryProvider( { children } ) {
modalTabOpen,
toggleModal,
refreshLibrary,
notice,
setNotice,
saveFontFamilies,
fontFamiliesHasChanges,
isResolvingLibrary,
Expand Down
48 changes: 12 additions & 36 deletions packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
FlexItem,
Flex,
Button,
Notice,
} from '@wordpress/components';
import { debounce } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
Expand Down Expand Up @@ -47,14 +46,13 @@ function FontCollection( { slug } ) {
);
};

const [ notice, setNotice ] = useState( null );
const [ selectedFont, setSelectedFont ] = useState( null );
const [ fontsToInstall, setFontsToInstall ] = useState( [] );
const [ filters, setFilters ] = useState( {} );
const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
requiresPermission && ! getGoogleFontsPermissionFromStorage()
);
const { collections, getFontCollection, installFont } =
const { collections, getFontCollection, installFont, notice, setNotice } =
useContext( FontLibraryContext );
const selectedCollection = collections.find(
( collection ) => collection.slug === slug
Expand All @@ -77,36 +75,27 @@ function FontCollection( { slug } ) {
await getFontCollection( slug );
resetFilters();
} catch ( e ) {
setNotice( {
type: 'error',
message: e?.message,
duration: 0, // Don't auto-hide.
} );
if ( ! notice ) {
setNotice( {
type: 'error',
message: e?.message,
} );
}
}
};
fetchFontCollection();
}, [ slug, getFontCollection ] );
}, [ slug, getFontCollection, setNotice, notice ] );

useEffect( () => {
setSelectedFont( null );
setNotice( null );
}, [ slug ] );
}, [ slug, setNotice ] );

useEffect( () => {
// If the selected fonts change, reset the selected fonts to install
setFontsToInstall( [] );
}, [ selectedFont ] );

// Reset notice after 5 seconds
useEffect( () => {
if ( notice && notice?.duration !== 0 ) {
const timeout = setTimeout( () => {
setNotice( null );
}, notice.duration ?? 5000 );
return () => clearTimeout( timeout );
}
}, [ notice ] );

const collectionFonts = useMemo(
() => selectedCollection?.font_families ?? [],
[ selectedCollection ]
Expand Down Expand Up @@ -154,6 +143,8 @@ function FontCollection( { slug } ) {
};

const handleInstall = async () => {
setNotice( null );

const fontFamily = fontsToInstall[ 0 ];

try {
Expand Down Expand Up @@ -205,6 +196,7 @@ function FontCollection( { slug } ) {
? selectedCollection.description
: __( 'Select font variants to install.' )
}
notice={ notice }
handleBack={ !! selectedFont && handleUnselectFont }
footer={
fontsToInstall.length > 0 && (
Expand All @@ -219,22 +211,6 @@ function FontCollection( { slug } ) {
</>
) }

{ notice && (
<>
<FlexItem>
<Spacer margin={ 2 } />
<Notice
isDismissible={ false }
status={ notice.type }
className="font-library-modal__font-collection__notice"
>
{ notice.message }
</Notice>
</FlexItem>
<Spacer margin={ 2 } />
</>
) }

{ ! renderConfirmDialog && ! selectedFont && (
<Flex>
<FlexItem>
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
}
};
loadAsset();
}, [ fontFace, isIntersecting, loadFontFaceAsset ] );
}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );

return (
<div ref={ ref }>
Expand Down
9 changes: 7 additions & 2 deletions packages/edit-site/src/components/global-styles/font-library-modal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,18 @@ function FontLibraryModal( {
onRequestClose,
initialTabId = 'installed-fonts',
} ) {
const { collections } = useContext( FontLibraryContext );
const { collections, setNotice } = useContext( FontLibraryContext );

const tabs = [
...DEFAULT_TABS,
...tabsFromCollections( collections || [] ),
];

// Reset notice when new tab is selected.
const onSelect = () => {
setNotice( null );
};

return (
<Modal
title={ __( 'Fonts' ) }
Expand All @@ -58,7 +63,7 @@ function FontLibraryModal( {
className="font-library-modal"
>
<div className="font-library-modal__tabs">
<Tabs initialTabId={ initialTabId }>
<Tabs initialTabId={ initialTabId } onSelect={ onSelect }>
<Tabs.TabList>
{ tabs.map( ( { id, title } ) => (
<Tabs.Tab key={ id } tabId={ id }>
Expand Down
43 changes: 12 additions & 31 deletions packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
__experimentalSpacer as Spacer,
Button,
Spinner,
Notice,
FlexItem,
} from '@wordpress/components';

Expand All @@ -34,6 +33,8 @@ function InstalledFonts() {
refreshLibrary,
uninstallFontFamily,
isResolvingLibrary,
notice,
setNotice,
} = useContext( FontLibraryContext );
const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );

Expand All @@ -45,9 +46,9 @@ function InstalledFonts() {
handleSetLibraryFontSelected( font );
};

const [ notice, setNotice ] = useState( null );

const handleConfirmUninstall = async () => {
setNotice( null );

try {
await uninstallFontFamily( libraryFontSelected );
setNotice( {
Expand Down Expand Up @@ -91,20 +92,11 @@ function InstalledFonts() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [] );

// Reset notice after 5 seconds
useEffect( () => {
if ( notice ) {
const timeout = setTimeout( () => {
setNotice( null );
}, 5000 );
return () => clearTimeout( timeout );
}
}, [ notice ] );

return (
<TabPanelLayout
title={ libraryFontSelected?.name || '' }
description={ tabDescription }
notice={ notice }
handleBack={ !! libraryFontSelected && handleUnselectFont }
footer={
<Footer
Expand All @@ -120,28 +112,17 @@ function InstalledFonts() {
handleCancelUninstall={ handleCancelUninstall }
/>

{ notice && (
<>
<FlexItem>
<Spacer margin={ 2 } />
<Notice
isDismissible={ false }
status={ notice.type }
className="font-library-modal__font-collection__notice"
>
{ notice.message }
</Notice>
</FlexItem>
<Spacer margin={ 4 } />
</>
) }

{ ! libraryFontSelected && (
<>
{ isResolvingLibrary && <Spinner /> }
{ isResolvingLibrary && (
<FlexItem>
<Spacer margin={ 2 } />
<Spinner />
<Spacer margin={ 2 } />
</FlexItem>
) }
{ baseCustomFonts.length > 0 && (
<>
<Spacer margin={ 2 } />
<FontsGrid>
{ baseCustomFonts.map( ( font ) => (
<LibraryFontCard
Expand Down
Loading

0 comments on commit 6715cf5

Please sign in to comment.