Font Library: add option to revoke access to Google Fonts (#59205)

* Font Library: add option to revoke access to Google Fonts --------- Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
WordPress · Feb 23, 2024 · d1e4353 · d1e4353
1 parent 0ea8901
commit d1e4353
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
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
@@ -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
@@ -42,17 +43,14 @@ const DEFAULT_CATEGORY = {
 	name: _x( 'All', 'font categories' ),
 };
 
+const LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission';
 const MIN_WINDOW_HEIGHT = 500;
 
 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 );
@@ -79,6 +77,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 {
@@ -227,11 +230,33 @@ function FontCollection( { slug } ) {
 		);
 	}
 
+	const ActionsComponent = () => {
+		if ( slug !== 'google-fonts' || renderConfirmDialog || selectedFont ) {
+			return null;
+		}
+		return (
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Actions' ) }
+				popoverProps={ {
+					position: 'bottom left',
+				} }
+				controls={ [
+					{
+						title: __( 'Revoke access to Google Fonts' ),
+						onClick: revokeAccess,
+					},
+				] }
+			/>
+		);
+	};
+
 	return (
 		<TabPanelLayout
 			title={
 				! selectedFont ? selectedCollection.name : selectedFont.name
 			}
+			actions={ <ActionsComponent /> }
 			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
@@ -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( {
 			<Spacer margin={ 4 } />
 			<VStack spacing={ 4 } justify="space-between">
 				<VStack spacing={ 2 }>
-					<HStack justify="flex-start">
+					<HStack
+						justify={
+							!! handleBack ? 'flex-start' : 'space-between'
+						}
+					>
 						{ !! handleBack && (
 							<Button
 								variant="tertiary"
@@ -54,6 +60,7 @@ function TabPanelLayout( {
 								{ title }
 							</Heading>
 						) }
+						{ actions && <FlexItem>{ actions }</FlexItem> }
 					</HStack>
 					{ description && <Text>{ description }</Text> }
 					{ notice && (