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 && (
{ description && { description } }
{ notice && (