Skip to content

Made the access and revoking of access to a collection available to any collection #59412

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

Open
pbking wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Made the access and revoking of access to a collection available to any collection #59412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions lib/compat/wordpress-6.5/fonts/class-wp-font-collection.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,10 @@ private function load_from_json( $file_or_url ) {
$data['categories'] = $this->data['categories'];
}

if ( isset( $this->data['permission'] ) ) {
$data['permission'] = $this->data['permission'];
}

return $data;
}

Expand Down Expand Up @@ -249,6 +253,7 @@ private function sanitize_and_validate_data( $data, $required_properties = array
private static function get_sanitization_schema() {
return array(
'name' => 'sanitize_text_field',
'permission' => 'sanitize_text_field',
'description' => 'sanitize_text_field',
'font_families' => array(
array(
Expand Down
7 changes: 6 additions & 1 deletion lib/compat/wordpress-6.5/fonts/class-wp-rest-font-collections-controller.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ public function prepare_item_for_response( $item, $request ) {
}

// If any data fields are requested, get the collection data.
$data_fields = array( 'name', 'description', 'font_families', 'categories' );
$data_fields = array( 'name', 'description', 'permission', 'font_families', 'categories' );
if ( ! empty( array_intersect( $fields, $data_fields ) ) ) {
$collection_data = $item->get_data();
if ( is_wp_error( $collection_data ) ) {
Expand Down Expand Up @@ -241,6 +241,11 @@ public function get_item_schema() {
'type' => 'string',
'context' => array( 'view', 'edit', 'embed' ),
),
'permission' => array(
'description' => __( 'The message to prompt a user for permission (if required).', 'gutenberg' ),
'type' => 'string',
'context' => array( 'view', 'edit', 'embed' ),
),
'font_families' => array(
'description' => __( 'The font families for the font collection.', 'gutenberg' ),
'type' => 'array',
Expand Down
1 change: 1 addition & 0 deletions lib/compat/wordpress-6.5/fonts/fonts.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ function gutenberg_register_font_collections() {
array(
'name' => _x( 'Google Fonts', 'font collection name', 'gutenberg' ),
'description' => __( 'Install from Google Fonts. Fonts are copied to and served from your site.', 'gutenberg' ),
'permission' => __( 'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts. You can alternatively upload files directly on the Upload tab.', 'gutenberg' ),

@t-hamano t-hamano Feb 28, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The gutenberg_register_font_collections() function performs an early return if the same Google font collection is already registered in the core. And I don't think this permission field exists in the core yet. As a result, I think this permission field is not included in the API response. Is my understanding correct?

If so, instead of performing an early reversion, wouldn't it be necessary to unregister the font collection using the wp_unregister_font_collection() function and then always re-register the font collection on the Gutenberg plugin side?

'font_families' => 'https://s.w.org/images/fonts/17.7/collections/google-fonts-with-preview.json',
'categories' => array(
array(
Expand Down
115 changes: 70 additions & 45 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 @@ -18,6 +18,8 @@ import {
__experimentalNavigatorScreen as NavigatorScreen,
__experimentalNavigatorToParentButton as NavigatorToParentButton,
__experimentalHeading as Heading,
Card,
CardBody,
Notice,
SelectControl,
Spinner,
Expand Down Expand Up @@ -47,7 +49,6 @@ import {
getFontsOutline,
isFontFontFaceInOutline,
} from './utils/fonts-outline';
import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
import { downloadFontFaceAssets } from './utils';
import { sortFontFaces } from './utils/sort-font-faces';
import CollectionFontVariant from './collection-font-variant';
Expand All @@ -57,23 +58,14 @@ const DEFAULT_CATEGORY = {
name: _x( 'All', 'font categories' ),
};

const LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission';
const LOCAL_STORAGE_KEY_PREFIX = `wp-font-library-collection-permission-`;
const MIN_WINDOW_HEIGHT = 500;

function FontCollection( { slug } ) {
const requiresPermission = slug === 'google-fonts';

const getGoogleFontsPermissionFromStorage = () => {
return window.localStorage.getItem( LOCAL_STORAGE_ITEM ) === 'true';
};

const [ selectedFont, setSelectedFont ] = useState( null );
const [ fontsToInstall, setFontsToInstall ] = useState( [] );
const [ page, setPage ] = useState( 1 );
const [ filters, setFilters ] = useState( {} );
const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
requiresPermission && ! getGoogleFontsPermissionFromStorage()
);
const {
collections,
getFontCollection,
Expand All @@ -86,20 +78,29 @@ function FontCollection( { slug } ) {
( collection ) => collection.slug === slug
);

useEffect( () => {
const handleStorage = () => {
setRenderConfirmDialog(
requiresPermission && ! getGoogleFontsPermissionFromStorage()
);
};
handleStorage();
window.addEventListener( 'storage', handleStorage );
return () => window.removeEventListener( 'storage', handleStorage );
}, [ slug, requiresPermission ] );
const getFontCollectionPermissionFromStorage = ( collectionSlug ) => {
return (
window.localStorage.getItem(
LOCAL_STORAGE_KEY_PREFIX + collectionSlug
) === 'true'
);
};

const [ hasPermission, setHasPermission ] = useState(
getFontCollectionPermissionFromStorage( slug )
);

const handleConfirmPermission = () => {
// eslint-disable-next-line no-undef
window.localStorage.setItem( LOCAL_STORAGE_KEY_PREFIX + slug, 'true' );
window.dispatchEvent( new Event( 'storage' ) );
setHasPermission( true );
};

const revokeAccess = () => {
window.localStorage.setItem( LOCAL_STORAGE_ITEM, 'false' );
window.localStorage.setItem( LOCAL_STORAGE_KEY_PREFIX + slug, 'false' );
window.dispatchEvent( new Event( 'storage' ) );
setHasPermission( false );
};

useEffect( () => {
Expand Down Expand Up @@ -244,30 +245,36 @@ function FontCollection( { slug } ) {
return sortFontFaces( fontFamily.fontFace );
};

if ( renderConfirmDialog ) {
return <GoogleFontsConfirmDialog />;
}

const ActionsComponent = () => {
if ( slug !== 'google-fonts' || renderConfirmDialog || selectedFont ) {
return null;
}
if ( selectedCollection?.permission && ! hasPermission ) {
return (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions' ) }
popoverProps={ {
position: 'bottom left',
} }
controls={ [
{
title: __( 'Revoke access to Google Fonts' ),
onClick: revokeAccess,
},
] }
/>
<div className="font-library__google-fonts-confirm">
<Card>
<CardBody>
<Text as="h3">
{ sprintf(
// translators: %s: Name of the Font Collection.
_x( 'Connect to %s' ),
selectedCollection.name
) }
</Text>
<Spacer margin={ 6 } />
<Text as="p">{ selectedCollection.permission }</Text>
<Spacer margin={ 6 } />
<Button
variant="primary"
onClick={ handleConfirmPermission }
>
{ sprintf(
// translators: %s: Name of the Font Collection.
_x( 'Allow access to %s' ),
selectedCollection.name
) }
</Button>
</CardBody>
</Card>
</div>
);
};
}

return (
<div className="font-library-modal__tabpanel-layout">
Expand All @@ -280,7 +287,25 @@ function FontCollection( { slug } ) {
<Heading level={ 2 } size={ 13 }>
{ selectedCollection.name }
</Heading>
<ActionsComponent />
{ selectedCollection?.permission && (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions' ) }
popoverProps={ {
position: 'bottom left',
} }
controls={ [
{
title: sprintf(
// translators: %s: Name of the Font Collection.
_x( 'Revoke access from %s' ),
selectedCollection.name
),
onClick: revokeAccess,
},
] }
/>
) }
</HStack>
<Text>{ selectedCollection.description }</Text>
<Spacer margin={ 4 } />
Expand Down
50 changes: 0 additions & 50 deletions .../edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export async function fetchUninstallFontFamily( fontFamilyId ) {

export async function fetchFontCollections() {
const config = {
path: `${ FONT_COLLECTIONS_URL }?_fields=slug,name,description`,
path: `${ FONT_COLLECTIONS_URL }?_fields=slug,name,description,permission`,
method: 'GET',
};
return await apiFetch( config );
Expand Down