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 6236ea8fe3f246..8615159e3ce35e 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,10 +19,11 @@ import { FlexItem, Flex, Button, + DropdownMenu, } from '@wordpress/components'; import { debounce } from '@wordpress/compose'; import { sprintf, __, _x } from '@wordpress/i18n'; -import { search, closeSmall } from '@wordpress/icons'; +import { search, closeSmall, moreVertical } from '@wordpress/icons'; /** * Internal dependencies @@ -41,15 +42,14 @@ const DEFAULT_CATEGORY = { slug: 'all', name: _x( 'All', 'font categories' ), }; + +const LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission'; + function FontCollection( { slug } ) { const requiresPermission = slug === 'google-fonts'; const getGoogleFontsPermissionFromStorage = () => { - return ( - window.localStorage.getItem( - 'wp-font-library-google-fonts-permission' - ) === 'true' - ); + return window.localStorage.getItem( LOCAL_STORAGE_ITEM ) === 'true'; }; const [ selectedFont, setSelectedFont ] = useState( null ); @@ -76,6 +76,11 @@ function FontCollection( { slug } ) { return () => window.removeEventListener( 'storage', handleStorage ); }, [ slug, requiresPermission ] ); + const revokeAccess = () => { + window.localStorage.setItem( LOCAL_STORAGE_ITEM, 'false' ); + window.dispatchEvent( new Event( 'storage' ) ); + }; + useEffect( () => { const fetchFontCollection = async () => { try { @@ -223,11 +228,33 @@ function FontCollection( { slug } ) { ); } + const ActionsComponent = () => { + if ( slug !== 'google-fonts' || renderConfirmDialog || selectedFont ) { + return null; + } + return ( + + ); + }; + return ( } description={ ! selectedFont ? selectedCollection.description diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js b/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js index c959a5373190ec..87a569b5500ee0 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js @@ -11,6 +11,7 @@ import { Button, Notice, FlexBlock, + FlexItem, } from '@wordpress/components'; import { chevronLeft } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; @@ -27,6 +28,7 @@ function TabPanelLayout( { handleBack, children, footer, + actions, } ) { const { setNotice } = useContext( FontLibraryContext ); @@ -35,7 +37,11 @@ function TabPanelLayout( { - + { !! handleBack && (