Font Library: add e2e tests for Upload tab

packages/e2e-tests/plugins/font-library-permissions.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Font Library Permissions
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-font-library-permissions
+ */
+
+/**
+ * Add custom permissions to disallow creating and deleting font families.
+ */
+add_filter(
+	'register_post_type_args',
+	function ( $args, $post_type ) {
+		if ( 'wp_font_family' === $post_type ) {
+			$args['capabilities']['create_posts']           = 'do_not_allow';
+			$args['capabilities']['delete_published_posts'] = 'do_not_allow';
+		}
+		return $args;
+	},
+	10,
+	2
+);

packages/edit-site/src/components/global-styles/font-library-modal/index.js

@@ -6,6 +6,8 @@ import {
 	Modal,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -19,16 +21,15 @@ import { unlock } from '../../../lock-unlock';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
-const DEFAULT_TABS = [
-	{
-		id: 'installed-fonts',
-		title: __( 'Library' ),
-	},
-	{
-		id: 'upload-fonts',
-		title: __( 'Upload' ),
-	},
-];
+const DEFAULT_TAB = {
+	id: 'installed-fonts',
+	title: __( 'Library' ),
+};
+
+const UPLOAD_TAB = {
+	id: 'upload-fonts',
+	title: __( 'Upload' ),
+};
 
 const tabsFromCollections = ( collections ) =>
 	collections.map( ( { slug, name } ) => ( {
@@ -44,11 +45,17 @@ function FontLibraryModal( {
 	defaultTabId = 'installed-fonts',
 } ) {
 	const { collections, setNotice } = useContext( FontLibraryContext );
+	const canUserCreate = useSelect( ( select ) => {
+		const { canUser } = select( coreStore );
+		return canUser( 'create', 'font-families' );
+	}, [] );
+
+	const tabs = [ DEFAULT_TAB ];
 
-	const tabs = [
-		...DEFAULT_TABS,
-		...tabsFromCollections( collections || [] ),
-	];
+	if ( canUserCreate ) {
+		tabs.push( UPLOAD_TAB );
+		tabs.push( ...tabsFromCollections( collections || [] ) );
+	}
 
 	// Reset notice when new tab is selected.
 	const onSelect = () => {

packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -18,6 +18,8 @@ import {
 	Spinner,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { chevronLeft } from '@wordpress/icons';
@@ -49,9 +51,24 @@ function InstalledFonts() {
 		setNotice,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+	const customFontFamilyId =
+		libraryFontSelected?.source === 'custom' && libraryFontSelected?.id;
+
+	const canUserDelete = useSelect(
+		( select ) => {
+			const { canUser } = select( coreStore );
+			return (
+				customFontFamilyId &&
+				canUser( 'delete', 'font-families', customFontFamilyId )
+			);
+		},
+		[ customFontFamilyId ]
+	);
 
 	const shouldDisplayDeleteButton =
-		!! libraryFontSelected && libraryFontSelected?.source !== 'theme';
+		!! libraryFontSelected &&
+		libraryFontSelected?.source !== 'theme' &&
+		canUserDelete;
 
 	const handleUninstallClick = () => {
 		setIsConfirmDeleteOpen( true );

packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js

@@ -13,6 +13,8 @@ import {
 	FlexItem,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { useContext, useState } from '@wordpress/element';
 
 /**
@@ -30,6 +32,14 @@ const { ProgressBar } = unlock( componentsPrivateApis );
 function UploadFonts() {
 	const { installFont, notice, setNotice } = useContext( FontLibraryContext );
 	const [ isUploading, setIsUploading ] = useState( false );
+	const canUserCreate = useSelect( ( select ) => {
+		const { canUser } = select( coreStore );
+		return canUser( 'create', 'font-families' );
+	}, [] );
+
+	if ( ! canUserCreate ) {
+		return null;
+	}
 
 	const handleDropZone = ( files ) => {
 		handleFilesUpload( files );

test/e2e/specs/site-editor/font-library.spec.js

@@ -15,12 +15,12 @@ test.describe( 'Font Library', () => {
 		} );
 
 		test( 'should display the "Manage Fonts" icon', async ( { page } ) => {
-			await page.getByRole( 'button', { name: /styles/i } ).click();
+			await page.getByRole( 'button', { name: 'Styles' } ).click();
 			await page
-				.getByRole( 'button', { name: /typography styles/i } )
+				.getByRole( 'button', { name: 'Typography Styles' } )
 				.click();
 			const manageFontsIcon = page.getByRole( 'button', {
-				name: /manage fonts/i,
+				name: 'Manage Fonts',
 			} );
 			await expect( manageFontsIcon ).toBeVisible();
 		} );
@@ -37,26 +37,26 @@ test.describe( 'Font Library', () => {
 		} );
 
 		test( 'should display the "Manage Fonts" icon', async ( { page } ) => {
-			await page.getByRole( 'button', { name: /styles/i } ).click();
+			await page.getByRole( 'button', { name: 'Styles' } ).click();
 			await page
-				.getByRole( 'button', { name: /typography styles/i } )
+				.getByRole( 'button', { name: 'Typography Styles' } )
 				.click();
 			const manageFontsIcon = page.getByRole( 'button', {
-				name: /manage fonts/i,
+				name: 'Manage Fonts',
 			} );
 			await expect( manageFontsIcon ).toBeVisible();
 		} );
 
 		test( 'should open the "Manage Fonts" modal when clicking the "Manage Fonts" icon', async ( {
 			page,
 		} ) => {
-			await page.getByRole( 'button', { name: /styles/i } ).click();
+			await page.getByRole( 'button', { name: 'Styles' } ).click();
 			await page
-				.getByRole( 'button', { name: /typography styles/i } )
+				.getByRole( 'button', { name: 'Typography Styles' } )
 				.click();
 			await page
 				.getByRole( 'button', {
-					name: /manage fonts/i,
+					name: 'Manage Fonts',
 				} )
 				.click();
 			await expect( page.getByRole( 'dialog' ) ).toBeVisible();
@@ -68,22 +68,105 @@ test.describe( 'Font Library', () => {
 		test( 'should show font variant panel when clicking on a font family', async ( {
 			page,
 		} ) => {
-			await page.getByRole( 'button', { name: /styles/i } ).click();
+			await page.getByRole( 'button', { name: 'Styles' } ).click();
 			await page
-				.getByRole( 'button', { name: /typography styles/i } )
+				.getByRole( 'button', { name: 'Typography Styles' } )
 				.click();
 			await page
 				.getByRole( 'button', {
 					name: /manage fonts/i,
 				} )
 				.click();
-			await page.getByRole( 'button', { name: /system font/i } ).click();
+			await page.getByRole( 'button', { name: 'System Font' } ).click();
+			await expect(
+				page.getByRole( 'heading', { name: 'System Font' } )
+			).toBeVisible();
 			await expect(
-				page.getByRole( 'heading', { name: /system font/i } )
+				page.getByRole( 'checkbox', { name: 'System Font Normal' } )
 			).toBeVisible();
+		} );
+	} );
+
+	test.describe( 'When user has permissions to edit font families', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'twentytwentythree' );
+		} );
+
+		test.beforeEach( async ( { admin, editor, page } ) => {
+			await admin.visitSiteEditor();
+			await editor.canvas.locator( 'body' ).click();
+			await page.getByRole( 'button', { name: 'Styles' } ).click();
+			await page
+				.getByRole( 'button', { name: 'Typography Styles' } )
+				.click();
+			await page
+				.getByRole( 'button', {
+					name: 'Manage Fonts',
+				} )
+				.click();
+
+			// We need to wait the response from the `wp_font_family` request in order to test the Upload tab.
+			await page.waitForResponse(
+				( resp ) =>
+					resp
+						.url()
+						.includes(
+							'/index.php?rest_route=%2Fwp%2Fv2%2Ffont-families'
+						) && resp.status() === 200,
+				{ timeout: 50000 }
+			);
+		} );
+
+		test( 'should display the "Upload" tab', async ( { page } ) => {
 			await expect(
-				page.getByRole( 'checkbox', { name: /system font normal/i } )
+				page.getByRole( 'tab', { name: 'Upload' } )
 			).toBeVisible();
 		} );
 	} );
+
+	test.describe( 'When user does not have permission to edit font families', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'twentytwentythree' );
+			await requestUtils.activatePlugin(
+				'gutenberg-test-font-library-permissions'
+			);
+		} );
+
+		test.beforeEach( async ( { admin, editor, page } ) => {
+			await admin.visitSiteEditor();
+			await editor.canvas.locator( 'body' ).click();
+			await page.getByRole( 'button', { name: 'Styles' } ).click();
+			await page
+				.getByRole( 'button', { name: 'Typography Styles' } )
+				.click();
+			await page
+				.getByRole( 'button', {
+					name: 'Manage Fonts',
+				} )
+				.click();
+
+			// We need to wait the response from the `wp_font_family` request in order to test the Upload tab.
+			await page.waitForResponse(
+				( resp ) =>
+					resp
+						.url()
+						.includes(
+							'/index.php?rest_route=%2Fwp%2Fv2%2Ffont-families'
+						) && resp.status() === 200,
+				{ timeout: 50000 }
+			);
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.deactivatePlugin(
+				'gutenberg-test-font-library-permissions'
+			);
+		} );
+
+		test( 'should not display the "Upload" tab', async ( { page } ) => {
+			await expect(
+				page.getByRole( 'tab', { name: 'Upload' } )
+			).toBeHidden();
+		} );
+	} );
 } );