Font Library Modal: Remove notice context and add message when fonts updated

packages/edit-site/src/components/global-styles/font-families.js

@@ -26,7 +26,7 @@ import { unlock } from '../../lock-unlock';
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 function FontFamilies() {
- const { baseCustomFonts, modalTabOpen, setModalTabOpen, setNotice } =
+ const { baseCustomFonts, modalTabOpen, setModalTabOpen } =
  useContext( FontLibraryContext );
  const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' );
  const [ baseFontFamilies ] = useGlobalSetting(
@@ -112,8 +112,6 @@ function FontFamilies() {
  variant="secondary"
  __next40pxDefaultSize
  onClick={ () => {
- // Reset notice when opening the modal.
- setNotice( null );
  setModalTabOpen(
  hasInstalledFonts
  ? 'installed-fonts'

packages/edit-site/src/components/global-styles/font-library-modal/context.js

@@ -54,7 +54,6 @@ function FontLibraryProvider( { children } ) {
 
  const [ isInstalling, setIsInstalling ] = useState( false );
  const [ refreshKey, setRefreshKey ] = useState( 0 );
- const [ notice, setNotice ] = useState( null );
 
  const refreshLibrary = () => {
  setRefreshKey( Date.now() );
@@ -139,8 +138,6 @@ function FontLibraryProvider( { children } ) {
  }, [ modalTabOpen ] );
 
  const handleSetLibraryFontSelected = ( font ) => {
- setNotice( null );
-
  // If font is null, reset the selected font
  if ( ! font ) {
  setLibraryFontSelected( null );
@@ -527,8 +524,6 @@ function FontLibraryProvider( { children } ) {
  modalTabOpen,
  setModalTabOpen,
  refreshLibrary,
- notice,
- setNotice,
  saveFontFamilies,
  isResolvingLibrary,
  isInstalling,

packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js

@@ -63,20 +63,15 @@ function FontCollection( { slug } ) {
  };
 
  const [ selectedFont, setSelectedFont ] = useState( null );
+ const [ notice, setNotice ] = useState( false );
  const [ fontsToInstall, setFontsToInstall ] = useState( [] );
  const [ page, setPage ] = useState( 1 );
  const [ filters, setFilters ] = useState( {} );
  const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
  requiresPermission && ! getGoogleFontsPermissionFromStorage()
  );
- const {
- collections,
- getFontCollection,
- installFonts,
- isInstalling,
- notice,
- setNotice,
- } = useContext( FontLibraryContext );
+ const { collections, getFontCollection, installFonts, isInstalling } =
+ useContext( FontLibraryContext );
  const selectedCollection = collections.find(
  ( collection ) => collection.slug === slug
  );
@@ -116,8 +111,7 @@ function FontCollection( { slug } ) {
 
  useEffect( () => {
  setSelectedFont( null );
- setNotice( null );
- }, [ slug, setNotice ] );
+ }, [ slug ] );
 
  useEffect( () => {
  // If the selected fonts change, reset the selected fonts to install

packages/edit-site/src/components/global-styles/font-library-modal/index.js

@@ -44,7 +44,7 @@ function FontLibraryModal( {
  onRequestClose,
  defaultTabId = 'installed-fonts',
 } ) {
- const { collections, setNotice } = useContext( FontLibraryContext );
+ const { collections } = useContext( FontLibraryContext );
  const canUserCreate = useSelect( ( select ) => {
  return select( coreStore ).canUser( 'create', {
  kind: 'postType',
@@ -59,11 +59,6 @@ function FontLibraryModal( {
  tabs.push( ...tabsFromCollections( collections || [] ) );
  }
 
- // Reset notice when new tab is selected.
- const onSelect = () => {
- setNotice( null );
- };
-
  return (
  <Modal
  title={ __( 'Fonts' ) }
@@ -72,7 +67,7 @@ function FontLibraryModal( {
  className="font-library-modal"
  >
  <div className="font-library-modal__tabs">
- <Tabs defaultTabId={ defaultTabId } onSelect={ onSelect }>
+ <Tabs defaultTabId={ defaultTabId }>
  <Tabs.TabList>
  { tabs.map( ( { id, title } ) => (
  <Tabs.Tab key={ id } tabId={ id }>

packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -53,14 +53,13 @@ function InstalledFonts() {
  isInstalling,
  saveFontFamilies,
  getFontFacesActivated,
- notice,
- setNotice,
  } = useContext( FontLibraryContext );
 
  const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
  'typography.fontFamilies'
  );
  const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+ const [ notice, setNotice ] = useState( false );
  const [ baseFontFamilies ] = useGlobalSetting(
  'typography.fontFamilies',
  undefined,
@@ -120,6 +119,24 @@ function InstalledFonts() {
  setIsConfirmDeleteOpen( true );
  };
 
+ const handleUpdate = async () => {
+ setNotice( null );
+ try {
+ await saveFontFamilies( fontFamilies );
+ setNotice( {
+ type: 'success',
+ message: __( 'Font family updated successfully.' ),
+ } );
+ } catch ( error ) {
+ setNotice( {
+ type: 'error',
+ message:
+ __( 'There was an error updating the font family. ' ) +
+ error.message,
+ } );
+ }
+ };
+
  const getFontFacesToDisplay = ( font ) => {
  if ( ! font ) {
  return [];
@@ -265,6 +282,7 @@ function InstalledFonts() {
  font
  ) }
  onClick={ () => {
+ setNotice( null );
  handleSetLibraryFontSelected(
  font
  );
@@ -305,6 +323,7 @@ function InstalledFonts() {
  font
  ) }
  onClick={ () => {
+ setNotice( null );
  handleSetLibraryFontSelected(
  font
  );
@@ -337,6 +356,7 @@ function InstalledFonts() {
  size="small"
  onClick={ () => {
  handleSetLibraryFontSelected( null );
+ setNotice( null );
  } }
  label={ __( 'Back' ) }
  />
@@ -406,9 +426,7 @@ function InstalledFonts() {
  ) }
  <Button
  variant="primary"
- onClick={ () => {
- saveFontFamilies( fontFamilies );
- } }
+ onClick={ handleUpdate }
  disabled={ ! fontFamiliesHasChanges }
  accessibleWhenDisabled
  >

packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js

@@ -25,9 +25,9 @@ import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
 
 function UploadFonts() {
- const { installFonts, notice, setNotice } =
- useContext( FontLibraryContext );
+ const { installFonts } = useContext( FontLibraryContext );
  const [ isUploading, setIsUploading ] = useState( false );
+ const [ notice, setNotice ] = useState( false );
 
  const handleDropZone = ( files ) => {
  handleFilesUpload( files );