diff --git a/lib/compat/wordpress-6.5/fonts/class-wp-font-collection.php b/lib/compat/wordpress-6.5/fonts/class-wp-font-collection.php index 3ccbed6ed275e9..30d477cbd786f4 100644 --- a/lib/compat/wordpress-6.5/fonts/class-wp-font-collection.php +++ b/lib/compat/wordpress-6.5/fonts/class-wp-font-collection.php @@ -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; } @@ -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( diff --git a/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-collections-controller.php b/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-collections-controller.php index 2433a8d4ff9553..0d88705984704d 100644 --- a/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-collections-controller.php +++ b/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-collections-controller.php @@ -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 ) ) { @@ -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', diff --git a/lib/compat/wordpress-6.5/fonts/fonts.php b/lib/compat/wordpress-6.5/fonts/fonts.php index 8307d5217ad426..a19b2efea6e98b 100644 --- a/lib/compat/wordpress-6.5/fonts/fonts.php +++ b/lib/compat/wordpress-6.5/fonts/fonts.php @@ -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' ), 'font_families' => 'https://s.w.org/images/fonts/17.7/collections/google-fonts-with-preview.json', 'categories' => array( array( 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 01f7a90357c8ba..c978e1e1caace8 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 @@ -18,6 +18,8 @@ import { __experimentalNavigatorScreen as NavigatorScreen, __experimentalNavigatorToParentButton as NavigatorToParentButton, __experimentalHeading as Heading, + Card, + CardBody, Notice, SelectControl, Spinner, @@ -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'; @@ -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, @@ -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( () => { @@ -244,30 +245,36 @@ function FontCollection( { slug } ) { return sortFontFaces( fontFamily.fontFace ); }; - if ( renderConfirmDialog ) { - return ; - } - - const ActionsComponent = () => { - if ( slug !== 'google-fonts' || renderConfirmDialog || selectedFont ) { - return null; - } + if ( selectedCollection?.permission && ! hasPermission ) { return ( - +
+ + + + { sprintf( + // translators: %s: Name of the Font Collection. + _x( 'Connect to %s' ), + selectedCollection.name + ) } + + + { selectedCollection.permission } + + + + +
); - }; + } return (
@@ -280,7 +287,25 @@ function FontCollection( { slug } ) { { selectedCollection.name } - + { selectedCollection?.permission && ( + + ) } { selectedCollection.description } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js b/packages/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js deleted file mode 100644 index dde6dc87c858ac..00000000000000 --- a/packages/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { - Button, - Card, - CardBody, - __experimentalText as Text, - __experimentalSpacer as Spacer, -} from '@wordpress/components'; - -function GoogleFontsConfirmDialog() { - const handleConfirm = () => { - // eslint-disable-next-line no-undef - window.localStorage.setItem( - 'wp-font-library-google-fonts-permission', - 'true' - ); - window.dispatchEvent( new Event( 'storage' ) ); - }; - - return ( -
- - - { __( 'Connect to Google Fonts' ) } - - - { __( - '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.' - ) } - - - - - -
- ); -} - -export default GoogleFontsConfirmDialog; diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js b/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js index a114630cfc08d1..62ec780875e5a9 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js @@ -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 );