From 0ed34b4adad6a4f47ed5bfb6e5883e9d3474c87d Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 20 Feb 2024 13:48:53 +0100
Subject: [PATCH 1/2] Font Library: add option to revoke access to Google Fonts

---
 .../font-library-modal/font-collection.js     | 31 ++++++++++++++++++-
 .../font-library-modal/tab-panel-layout.js    |  9 +++++-
 2 files changed, 38 insertions(+), 2 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
index 6236ea8fe3f246..ddb2c65d2bb567 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
@@ -76,6 +77,14 @@ function FontCollection( { slug } ) {
 		return () => window.removeEventListener( 'storage', handleStorage );
 	}, [ slug, requiresPermission ] );
 
+	const revokeAccess = () => {
+		window.localStorage.setItem(
+			'wp-font-library-google-fonts-permission',
+			'false'
+		);
+		window.dispatchEvent( new Event( 'storage' ) );
+	};
+
 	useEffect( () => {
 		const fetchFontCollection = async () => {
 			try {
@@ -223,11 +232,31 @@ function FontCollection( { slug } ) {
 		);
 	}
 
+	let actionsComponent = null;
+	if ( ! renderConfirmDialog && ! selectedFont ) {
+		actionsComponent = (
+			<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
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( {
 			<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 && (

From 31a49174f4027c83e5a8ff40fedb82cc77b9bfc5 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 21 Feb 2024 07:00:24 +0100
Subject: [PATCH 2/2] Change the ActionsComponent to a function component

Change the ActionsComponent to a function component.
Add a constant for the name of the Google Fonts local storage item.
---
 .../font-library-modal/font-collection.js     | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 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
index ddb2c65d2bb567..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
@@ -42,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 );
@@ -78,10 +77,7 @@ function FontCollection( { slug } ) {
 	}, [ slug, requiresPermission ] );
 
 	const revokeAccess = () => {
-		window.localStorage.setItem(
-			'wp-font-library-google-fonts-permission',
-			'false'
-		);
+		window.localStorage.setItem( LOCAL_STORAGE_ITEM, 'false' );
 		window.dispatchEvent( new Event( 'storage' ) );
 	};
 
@@ -232,9 +228,11 @@ function FontCollection( { slug } ) {
 		);
 	}
 
-	let actionsComponent = null;
-	if ( ! renderConfirmDialog && ! selectedFont ) {
-		actionsComponent = (
+	const ActionsComponent = () => {
+		if ( slug !== 'google-fonts' || renderConfirmDialog || selectedFont ) {
+			return null;
+		}
+		return (
 			<DropdownMenu
 				icon={ moreVertical }
 				label={ __( 'Actions' ) }
@@ -249,14 +247,14 @@ function FontCollection( { slug } ) {
 				] }
 			/>
 		);
-	}
+	};
 
 	return (
 		<TabPanelLayout
 			title={
 				! selectedFont ? selectedCollection.name : selectedFont.name
 			}
-			actions={ actionsComponent }
+			actions={ <ActionsComponent /> }
 			description={
 				! selectedFont
 					? selectedCollection.description