Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
Feb 23, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0ed34b4
Font Library: add option to revoke access to Google Fonts
carolinan Feb 20, 2024
31a4917
Change the ActionsComponent to a function component
carolinan Feb 21, 2024
675beda
Merge branch 'trunk' into update/font-library-revoke-access
carolinan Feb 21, 2024
1ebec6d
Merge branch 'trunk' into update/font-library-revoke-access
carolinan Feb 22, 2024
5c6366a
Merge branch 'trunk' into update/font-library-revoke-access
matiasbenedetto Feb 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 31 additions & 6 deletions packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 );
Expand All @@ -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 {
Expand Down Expand Up @@ -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
Expand Down
9 changes: 8 additions & 1 deletion packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Button,
Notice,
FlexBlock,
FlexItem,
} from '@wordpress/components';
import { chevronLeft } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
Expand All @@ -27,6 +28,7 @@ function TabPanelLayout( {
handleBack,
children,
footer,
actions,
} ) {
const { setNotice } = useContext( FontLibraryContext );

Expand All @@ -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"
Expand All @@ -54,6 +60,7 @@ function TabPanelLayout( {
{ title }
</Heading>
) }
{ actions && <FlexItem>{ actions }</FlexItem> }
</HStack>
{ description && <Text>{ description }</Text> }
{ notice && (
Expand Down
Loading