@wordpress/edit-site 5.19.2 → 5.20.0

package/src/components/dataviews/view-actions.js

@@ -0,0 +1,246 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Icon,
+	SelectControl,
+	privateApis as componentsPrivateApis,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
+import {
+	chevronRightSmall,
+	check,
+	blockTable,
+	chevronDown,
+	arrowUp,
+	arrowDown,
+} from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const {
+	DropdownMenuV2,
+	DropdownMenuGroupV2,
+	DropdownMenuItemV2,
+	DropdownSubMenuV2,
+	DropdownSubMenuTriggerV2,
+} = unlock( componentsPrivateApis );
+
+export const PAGE_SIZE_VALUES = [ 5, 20, 50 ];
+
+export function PageSizeControl( { dataView } ) {
+	const label = __( 'Rows per page:' );
+	return (
+		<SelectControl
+			__nextHasNoMarginBottom
+			label={ label }
+			hideLabelFromVision
+			// TODO: This should probably use a label based on the wanted design
+			// and we could remove InputControlPrefixWrapper usage.
+			prefix={
+				<InputControlPrefixWrapper
+					as="span"
+					className="dataviews__per-page-control-prefix"
+				>
+					{ label }
+				</InputControlPrefixWrapper>
+			}
+			value={ dataView.getState().pagination.pageSize }
+			options={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( {
+				value: pageSize,
+				label: pageSize,
+			} ) ) }
+			onChange={ ( value ) => dataView.setPageSize( +value ) }
+		/>
+	);
+}
+
+function PageSizeMenu( { dataView } ) {
+	const currenPageSize = dataView.getState().pagination.pageSize;
+	return (
+		<DropdownSubMenuV2
+			trigger={
+				<DropdownSubMenuTriggerV2
+					suffix={
+						<>
+							{ currenPageSize }
+							<Icon icon={ chevronRightSmall } />
+						</>
+					}
+				>
+					{ /* TODO: probably label per view type. */ }
+					{ __( 'Rows per page' ) }
+				</DropdownSubMenuTriggerV2>
+			}
+		>
+			{ PAGE_SIZE_VALUES.map( ( size ) => {
+				return (
+					<DropdownMenuItemV2
+						key={ size }
+						prefix={
+							currenPageSize === size && <Icon icon={ check } />
+						}
+						onSelect={ ( event ) => {
+							// We need to handle this on DropDown component probably..
+							event.preventDefault();
+							dataView.setPageSize( size );
+						} }
+						// TODO: check about role and a11y.
+						role="menuitemcheckbox"
+					>
+						{ size }
+					</DropdownMenuItemV2>
+				);
+			} ) }
+		</DropdownSubMenuV2>
+	);
+}
+
+function FieldsVisibilityMenu( { dataView } ) {
+	const hideableFields = dataView
+		.getAllColumns()
+		.filter( ( columnn ) => columnn.getCanHide() );
+	if ( ! hideableFields?.length ) {
+		return null;
+	}
+	return (
+		<DropdownSubMenuV2
+			trigger={
+				<DropdownSubMenuTriggerV2
+					suffix={ <Icon icon={ chevronRightSmall } /> }
+				>
+					{ __( 'Fields' ) }
+				</DropdownSubMenuTriggerV2>
+			}
+		>
+			{ hideableFields?.map( ( field ) => {
+				return (
+					<DropdownMenuItemV2
+						key={ field.id }
+						prefix={
+							field.getIsVisible() && <Icon icon={ check } />
+						}
+						onSelect={ ( event ) => {
+							event.preventDefault();
+							field.getToggleVisibilityHandler()( event );
+						} }
+						role="menuitemcheckbox"
+					>
+						{ field.columnDef.header }
+					</DropdownMenuItemV2>
+				);
+			} ) }
+		</DropdownSubMenuV2>
+	);
+}
+
+// This object is used to construct the sorting options per sortable field.
+const sortingItemsInfo = {
+	asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
+	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
+};
+function SortMenu( { dataView } ) {
+	const sortableFields = dataView
+		.getAllColumns()
+		.filter( ( columnn ) => columnn.getCanSort() );
+	if ( ! sortableFields?.length ) {
+		return null;
+	}
+	const currentSortedField = sortableFields.find( ( field ) =>
+		field.getIsSorted()
+	);
+	return (
+		<DropdownSubMenuV2
+			trigger={
+				<DropdownSubMenuTriggerV2
+					suffix={
+						<>
+							{ currentSortedField?.columnDef.header }
+							<Icon icon={ chevronRightSmall } />
+						</>
+					}
+				>
+					{ __( 'Sort by' ) }
+				</DropdownSubMenuTriggerV2>
+			}
+		>
+			{ sortableFields?.map( ( field ) => {
+				const sortedDirection = field.getIsSorted();
+				return (
+					<DropdownSubMenuV2
+						key={ field.id }
+						trigger={
+							<DropdownSubMenuTriggerV2
+								suffix={ <Icon icon={ chevronRightSmall } /> }
+							>
+								{ field.columnDef.header }
+							</DropdownSubMenuTriggerV2>
+						}
+						side="left"
+					>
+						{ Object.entries( sortingItemsInfo ).map(
+							( [ direction, info ] ) => {
+								return (
+									<DropdownMenuItemV2
+										key={ direction }
+										prefix={ <Icon icon={ info.icon } /> }
+										suffix={
+											sortedDirection === direction && (
+												<Icon icon={ check } />
+											)
+										}
+										onSelect={ ( event ) => {
+											event.preventDefault();
+											if (
+												sortedDirection === direction
+											) {
+												dataView.resetSorting();
+											} else {
+												dataView.setSorting( [
+													{
+														id: field.id,
+														desc:
+															direction ===
+															'desc',
+													},
+												] );
+											}
+										} }
+									>
+										{ info.label }
+									</DropdownMenuItemV2>
+								);
+							}
+						) }
+					</DropdownSubMenuV2>
+				);
+			} ) }
+		</DropdownSubMenuV2>
+	);
+}
+
+export default function ViewActions( { dataView, className } ) {
+	return (
+		<DropdownMenuV2
+			label={ __( 'Actions' ) }
+			className={ className }
+			trigger={
+				<Button variant="tertiary" icon={ blockTable }>
+					{ __( 'View' ) }
+					<Icon icon={ chevronDown } />
+				</Button>
+			}
+		>
+			<DropdownMenuGroupV2>
+				<SortMenu dataView={ dataView } />
+				<FieldsVisibilityMenu dataView={ dataView } />
+				<PageSizeMenu dataView={ dataView } />
+			</DropdownMenuGroupV2>
+		</DropdownMenuV2>
+	);
+}

package/src/components/global-styles/font-families.js

@@ -64,12 +64,8 @@ function FontFamilies() {
 	);
 }
 
-const FontFamiliesComponent = ( { ...props } ) => (
+export default ( { ...props } ) => (
 	<FontLibraryProvider>
 		<FontFamilies { ...props } />
 	</FontLibraryProvider>
 );
-
-export default process.env.IS_GUTENBERG_PLUGIN
-	? FontFamiliesComponent
-	: undefined;

package/src/components/global-styles/font-library-modal/collection-font-details.js

@@ -42,7 +42,7 @@ function CollectionFontDetails( {
 						handleToggleVariant={ handleToggleVariant }
 						selected={ isFontFontFaceInOutline(
 							font.slug,
-							face,
+							font.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline
 							fontToInstallOutline
 						) }
 					/>

package/src/components/global-styles/font-library-modal/context.js

@@ -9,8 +9,6 @@ import {
 	useEntityRecords,
 	store as coreStore,
 } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -51,8 +49,6 @@ function FontLibraryProvider( { children } ) {
 	const fontFamiliesHasChanges =
 		!! globalStyles?.edits?.settings?.typography?.fontFamilies;
 
-	const { createErrorNotice } = useDispatch( noticesStore );
-
 	const [ isInstalling, setIsInstalling ] = useState( false );
 	const [ refreshKey, setRefreshKey ] = useState( 0 );
 
@@ -202,7 +198,8 @@ function FontLibraryProvider( { children } ) {
 			// Prepare formData to install.
 			const formData = makeFormDataFromFontFamilies( fonts );
 			// Install the fonts (upload the font files to the server and create the post in the database).
-			const fontsInstalled = await fetchInstallFonts( formData );
+			const response = await fetchInstallFonts( formData );
+			const fontsInstalled = response?.successes || [];
 			// Get intersecting font faces between the fonts we tried to installed and the fonts that were installed
 			// (to avoid activating a non installed font).
 			const fontToBeActivated = getIntersectingFontFaces(
@@ -217,41 +214,40 @@ function FontLibraryProvider( { children } ) {
 			] );
 			refreshLibrary();
 			setIsInstalling( false );
-			return true;
-		} catch ( e ) {
-			// eslint-disable-next-line no-console
-			console.error( e );
-			createErrorNotice( __( 'Error installing fonts.' ), {
-				type: 'snackbar',
-			} );
+
+			return response;
+		} catch ( error ) {
 			setIsInstalling( false );
-			return false;
+			return {
+				errors: [ error ],
+			};
 		}
 	}
 
 	async function uninstallFont( font ) {
 		try {
 			// Uninstall the font (remove the font files from the server and the post from the database).
-			await fetchUninstallFonts( [ font ] );
+			const response = await fetchUninstallFonts( [ font ] );
 			// Deactivate the font family (remove the font family from the global styles).
-			deactivateFontFamily( font );
-			// Save the global styles to the database.
-			await saveSpecifiedEntityEdits(
-				'root',
-				'globalStyles',
-				globalStylesId,
-				[ 'settings.typography.fontFamilies' ]
-			);
+			if ( ! response.errors ) {
+				deactivateFontFamily( font );
+				// Save the global styles to the database.
+				await saveSpecifiedEntityEdits(
+					'root',
+					'globalStyles',
+					globalStylesId,
+					[ 'settings.typography.fontFamilies' ]
+				);
+			}
 			// Refresh the library (the the library font families from database).
 			refreshLibrary();
-			return true;
-		} catch ( e ) {
+			return response;
+		} catch ( error ) {
 			// eslint-disable-next-line no-console
-			console.error( e );
-			createErrorNotice( __( 'Error uninstalling fonts.' ), {
-				type: 'snackbar',
-			} );
-			return false;
+			console.error( error );
+			return {
+				errors: [ error ],
+			};
 		}
 	}
 
@@ -281,14 +277,16 @@ function FontLibraryProvider( { children } ) {
 		} );
 		// Add custom fonts to the browser.
 		fontsToAdd.forEach( ( font ) => {
-			font.fontFace.forEach( ( face ) => {
-				// Load font faces just in the iframe because they already are in the document.
-				loadFontFaceInBrowser(
-					face,
-					getDisplaySrcFromFontFace( face.src ),
-					'iframe'
-				);
-			} );
+			if ( font.fontFace ) {
+				font.fontFace.forEach( ( face ) => {
+					// Load font faces just in the iframe because they already are in the document.
+					loadFontFaceInBrowser(
+						face,
+						getDisplaySrcFromFontFace( face.src ),
+						'iframe'
+					);
+				} );
+			}
 		} );
 	};
 
@@ -311,7 +309,7 @@ function FontLibraryProvider( { children } ) {
 		// Get the src of the font.
 		const src = getDisplaySrcFromFontFace( fontFace.src, themeUrl );
 		// If the font is already loaded, don't load it again.
-		if ( loadedFontUrls.has( src ) ) return;
+		if ( ! src || loadedFontUrls.has( src ) ) return;
 		// Load the font in the browser.
 		loadFontFaceInBrowser( fontFace, src, 'document' );
 		// Add the font to the loaded fonts list.

package/src/components/global-styles/font-library-modal/font-collection.js

@@ -12,6 +12,7 @@ import {
 	FlexItem,
 	Flex,
 	Button,
+	Notice,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -29,6 +30,7 @@ import CollectionFontDetails from './collection-font-details';
 import { toggleFont } from './utils/toggleFont';
 import { getFontsOutline } from './utils/fonts-outline';
 import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
+import { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
 
 const DEFAULT_CATEGORY = {
 	id: 'all',
@@ -45,13 +47,15 @@ function FontCollection( { id } ) {
 		);
 	};
 
+	const [ notice, setNotice ] = useState( null );
 	const [ selectedFont, setSelectedFont ] = useState( null );
 	const [ fontsToInstall, setFontsToInstall ] = useState( [] );
 	const [ filters, setFilters ] = useState( {} );
 	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
 		requiresPermission && ! getGoogleFontsPermissionFromStorage()
 	);
-	const { collections, getFontCollection } = useContext( FontLibraryContext );
+	const { collections, getFontCollection, installFonts } =
+		useContext( FontLibraryContext );
 	const selectedCollection = collections.find(
 		( collection ) => collection.id === id
 	);
@@ -76,6 +80,16 @@ function FontCollection( { id } ) {
 		setSelectedFont( null );
 	}, [ id ] );
 
+	// Reset notice after 5 seconds
+	useEffect( () => {
+		if ( notice ) {
+			const timeout = setTimeout( () => {
+				setNotice( null );
+			}, 5000 );
+			return () => clearTimeout( timeout );
+		}
+	}, [ notice ] );
+
 	const collectionFonts = useMemo(
 		() => selectedCollection?.data?.fontFamilies ?? [],
 		[ selectedCollection ]
@@ -122,6 +136,13 @@ function FontCollection( { id } ) {
 		setFontsToInstall( [] );
 	};
 
+	const handleInstall = async () => {
+		const response = await installFonts( fontsToInstall );
+		const installNotice = getNoticeFromInstallResponse( response );
+		setNotice( installNotice );
+		resetFontsToInstall();
+	};
+
 	return (
 		<TabLayout
 			title={
@@ -135,10 +156,7 @@ function FontCollection( { id } ) {
 			handleBack={ !! selectedFont && handleUnselectFont }
 			footer={
 				fontsToInstall.length > 0 && (
-					<Footer
-						fontsToInstall={ fontsToInstall }
-						resetFontsToInstall={ resetFontsToInstall }
-					/>
+					<Footer handleInstall={ handleInstall } />
 				)
 			}
 		>
@@ -153,6 +171,22 @@ function FontCollection( { id } ) {
 				<Spinner />
 			) }
 
+			{ notice && (
+				<>
+					<FlexItem>
+						<Spacer margin={ 2 } />
+						<Notice
+							isDismissible={ false }
+							status={ notice.type }
+							className="font-library-modal__font-collection__notice"
+						>
+							{ notice.message }
+						</Notice>
+					</FlexItem>
+					<Spacer margin={ 2 } />
+				</>
+			) }
+
 			{ ! renderConfirmDialog && ! selectedFont && (
 				<Flex>
 					<FlexItem>
@@ -232,13 +266,8 @@ function FontCollection( { id } ) {
 	);
 }
 
-function Footer( { fontsToInstall, resetFontsToInstall } ) {
-	const { installFonts, isInstalling } = useContext( FontLibraryContext );
-
-	const handleInstall = async () => {
-		await installFonts( fontsToInstall );
-		resetFontsToInstall();
-	};
+function Footer( { handleInstall } ) {
+	const { isInstalling } = useContext( FontLibraryContext );
 
 	return (
 		<Flex justify="flex-end">

package/src/components/global-styles/font-library-modal/index.js

@@ -10,13 +10,21 @@ import { useContext } from '@wordpress/element';
  */
 import InstalledFonts from './installed-fonts';
 import FontCollection from './font-collection';
+import UploadFonts from './upload-fonts';
 import { FontLibraryContext } from './context';
 
-const INSTALLED_FONTS_TAB = {
-	name: 'installed-fonts',
-	title: __( 'Library' ),
-	className: 'installed-fonts',
-};
+const DEFAULT_TABS = [
+	{
+		name: 'installed-fonts',
+		title: __( 'Library' ),
+		className: 'installed-fonts',
+	},
+	{
+		name: 'upload-fonts',
+		title: __( 'Upload' ),
+		className: 'upload-fonts',
+	},
+];
 
 const tabsFromCollections = ( collections ) =>
 	collections.map( ( { id, name } ) => ( {
@@ -35,7 +43,7 @@ function FontLibraryModal( {
 	const { collections } = useContext( FontLibraryContext );
 
 	const tabs = [
-		INSTALLED_FONTS_TAB,
+		...DEFAULT_TABS,
 		...tabsFromCollections( collections || [] ),
 	];
 
@@ -53,6 +61,8 @@ function FontLibraryModal( {
 			>
 				{ ( tab ) => {
 					switch ( tab.name ) {
+						case 'upload-fonts':
+							return <UploadFonts />;
 						case 'installed-fonts':
 							return <InstalledFonts />;
 						default:

package/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -9,6 +9,8 @@ import {
 	__experimentalSpacer as Spacer,
 	Button,
 	Spinner,
+	Notice,
+	FlexItem,
 } from '@wordpress/components';
 
 /**
@@ -19,8 +21,8 @@ import { FontLibraryContext } from './context';
 import FontsGrid from './fonts-grid';
 import LibraryFontDetails from './library-font-details';
 import LibraryFontCard from './library-font-card';
-import LocalFonts from './local-fonts';
 import ConfirmDeleteDialog from './confirm-delete-dialog';
+import { getNoticeFromUninstallResponse } from './utils/get-notice-from-response';
 import { unlock } from '../../../lock-unlock';
 const { ProgressBar } = unlock( componentsPrivateApis );
 
@@ -44,10 +46,14 @@ function InstalledFonts() {
 		handleSetLibraryFontSelected( font );
 	};
 
+	const [ notice, setNotice ] = useState( null );
+
 	const handleConfirmUninstall = async () => {
-		const result = await uninstallFont( libraryFontSelected );
+		const response = await uninstallFont( libraryFontSelected );
+		const uninstallNotice = getNoticeFromUninstallResponse( response );
+		setNotice( uninstallNotice );
 		// If the font was succesfully uninstalled it is unselected
-		if ( result ) {
+		if ( ! response?.errors?.length ) {
 			handleUnselectFont();
 		}
 		setIsConfirmDeleteOpen( false );
@@ -72,8 +78,19 @@ function InstalledFonts() {
 
 	useEffect( () => {
 		refreshLibrary();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
+	// Reset notice after 5 seconds
+	useEffect( () => {
+		if ( notice ) {
+			const timeout = setTimeout( () => {
+				setNotice( null );
+			}, 5000 );
+			return () => clearTimeout( timeout );
+		}
+	}, [ notice ] );
+
 	return (
 		<TabLayout
 			title={ libraryFontSelected?.name || '' }
@@ -93,6 +110,22 @@ function InstalledFonts() {
 				handleCancelUninstall={ handleCancelUninstall }
 			/>
 
+			{ notice && (
+				<>
+					<FlexItem>
+						<Spacer margin={ 2 } />
+						<Notice
+							isDismissible={ false }
+							status={ notice.type }
+							className="font-library-modal__font-collection__notice"
+						>
+							{ notice.message }
+						</Notice>
+					</FlexItem>
+					<Spacer margin={ 4 } />
+				</>
+			) }
+
 			{ ! libraryFontSelected && (
 				<>
 					{ isResolvingLibrary && <Spinner /> }
@@ -129,9 +162,6 @@ function InstalledFonts() {
 							</FontsGrid>
 						</>
 					) }
-
-					<Spacer margin={ 8 } />
-					<LocalFonts />
 				</>
 			) }