@wordpress/edit-site 5.28.2 → 5.28.4

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

@@ -1,27 +1,35 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useContext, useEffect, useState } from '@wordpress/element';
 import {
-	privateApis as componentsPrivateApis,
+	Button,
+	__experimentalConfirmDialog as ConfirmDialog,
 	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalUseNavigator as useNavigator,
 	__experimentalSpacer as Spacer,
-	Button,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	Flex,
+	Notice,
 	Spinner,
-	FlexItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { useContext, useEffect, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import TabPanelLayout from './tab-panel-layout';
-import { FontLibraryContext } from './context';
-import FontsGrid from './fonts-grid';
-import LibraryFontDetails from './library-font-details';
-import LibraryFontCard from './library-font-card';
-import ConfirmDeleteDialog from './confirm-delete-dialog';
 import { unlock } from '../../../lock-unlock';
+import { FontLibraryContext } from './context';
+import FontCard from './font-card';
+import LibraryFontVariant from './library-font-variant';
+import { sortFontFaces } from './utils/sort-font-faces';
 const { ProgressBar } = unlock( componentsPrivateApis );
 
 function InstalledFonts() {
@@ -33,148 +41,199 @@ function InstalledFonts() {
 		refreshLibrary,
 		uninstallFontFamily,
 		isResolvingLibrary,
+		isInstalling,
+		saveFontFamilies,
+		getFontFacesActivated,
+		fontFamiliesHasChanges,
 		notice,
 		setNotice,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
 
-	const handleUnselectFont = () => {
-		handleSetLibraryFontSelected( null );
-	};
+	const shouldDisplayDeleteButton =
+		!! libraryFontSelected && libraryFontSelected?.source !== 'theme';
 
-	const handleSelectFont = ( font ) => {
-		handleSetLibraryFontSelected( font );
+	const handleUninstallClick = () => {
+		setIsConfirmDeleteOpen( true );
 	};
 
-	const handleConfirmUninstall = async () => {
-		setNotice( null );
-
-		try {
-			await uninstallFontFamily( libraryFontSelected );
-			setNotice( {
-				type: 'success',
-				message: __( 'Font family uninstalled successfully.' ),
-			} );
-
-			// If the font was succesfully uninstalled it is unselected.
-			handleUnselectFont();
-			setIsConfirmDeleteOpen( false );
-		} catch ( error ) {
-			setNotice( {
-				type: 'error',
-				message:
-					__( 'There was an error uninstalling the font family. ' ) +
-					error.message,
-			} );
+	const getFontFacesToDisplay = ( font ) => {
+		if ( ! font ) {
+			return [];
 		}
+		if ( ! font.fontFace || ! font.fontFace.length ) {
+			return [
+				{
+					fontFamily: font.fontFamily,
+					fontStyle: 'normal',
+					fontWeight: '400',
+				},
+			];
+		}
+		return sortFontFaces( font.fontFace );
 	};
 
-	const handleUninstallClick = async () => {
-		setIsConfirmDeleteOpen( true );
-	};
-
-	const handleCancelUninstall = () => {
-		setIsConfirmDeleteOpen( false );
+	const getFontCardVariantsText = ( font ) => {
+		const variantsInstalled =
+			font?.fontFace?.length > 0 ? font.fontFace.length : 1;
+		const variantsActive = getFontFacesActivated(
+			font.slug,
+			font.source
+		).length;
+		return sprintf(
+			/* translators: 1: Active font variants, 2: Total font variants. */
+			__( '%1$s/%2$s variants active' ),
+			variantsActive,
+			variantsInstalled
+		);
 	};
 
-	const tabDescription = !! libraryFontSelected
-		? __(
-				'Choose font variants. Keep in mind that too many variants could make your site slower.'
-		  )
-		: null;
-
-	const shouldDisplayDeleteButton =
-		!! libraryFontSelected && libraryFontSelected?.source !== 'theme';
-
 	useEffect( () => {
-		handleSelectFont( libraryFontSelected );
+		handleSetLibraryFontSelected( libraryFontSelected );
 		refreshLibrary();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	return (
-		<TabPanelLayout
-			title={ libraryFontSelected?.name || '' }
-			description={ tabDescription }
-			notice={ notice }
-			handleBack={ !! libraryFontSelected && handleUnselectFont }
-			footer={
-				<Footer
-					shouldDisplayDeleteButton={ shouldDisplayDeleteButton }
-					handleUninstallClick={ handleUninstallClick }
-				/>
-			}
-		>
-			<ConfirmDeleteDialog
-				font={ libraryFontSelected }
-				isConfirmDeleteOpen={ isConfirmDeleteOpen }
-				handleConfirmUninstall={ handleConfirmUninstall }
-				handleCancelUninstall={ handleCancelUninstall }
-			/>
-
-			{ ! libraryFontSelected && (
-				<>
-					{ isResolvingLibrary && (
-						<FlexItem>
-							<Spacer margin={ 2 } />
-							<Spinner />
-							<Spacer margin={ 2 } />
-						</FlexItem>
+		<div className="font-library-modal__tabpanel-layout">
+			{ isResolvingLibrary && (
+				<HStack align="center">
+					<Spacer />
+					<Spinner />
+					<Spacer />
+				</HStack>
+			) }
+
+			<NavigatorProvider
+				initialPath={ libraryFontSelected ? '/fontFamily' : '/' }
+			>
+				<NavigatorScreen path="/">
+					{ notice && (
+						<>
+							<Spacer margin={ 1 } />
+							<Notice
+								status={ notice.type }
+								onRemove={ () => setNotice( null ) }
+							>
+								{ notice.message }
+							</Notice>
+							<Spacer margin={ 1 } />
+						</>
 					) }
 					{ baseCustomFonts.length > 0 && (
 						<>
-							<FontsGrid>
-								{ baseCustomFonts.map( ( font ) => (
-									<LibraryFontCard
-										font={ font }
-										key={ font.slug }
-										onClick={ () => {
-											handleSelectFont( font );
-										} }
-									/>
-								) ) }
-							</FontsGrid>
+							<Text className="font-library-modal__subtitle">
+								{ __( 'Installed Fonts' ) }
+							</Text>
+							<Spacer margin={ 2 } />
+							{ baseCustomFonts.map( ( font ) => (
+								<FontCard
+									font={ font }
+									key={ font.slug }
+									navigatorPath={ '/fontFamily' }
+									variantsText={ getFontCardVariantsText(
+										font
+									) }
+									onClick={ () => {
+										handleSetLibraryFontSelected( font );
+									} }
+								/>
+							) ) }
 							<Spacer margin={ 8 } />
 						</>
 					) }
 
 					{ baseThemeFonts.length > 0 && (
 						<>
-							<FontsGrid title={ __( 'Theme Fonts' ) }>
-								{ baseThemeFonts.map( ( font ) => (
-									<LibraryFontCard
-										font={ font }
-										key={ font.slug }
-										onClick={ () => {
-											handleSelectFont( font );
-										} }
-									/>
-								) ) }
-							</FontsGrid>
+							<Text className="font-library-modal__subtitle">
+								{ __( 'Theme Fonts' ) }
+							</Text>
+							<Spacer margin={ 2 } />
+							{ baseThemeFonts.map( ( font ) => (
+								<FontCard
+									font={ font }
+									key={ font.slug }
+									navigatorPath={ '/fontFamily' }
+									variantsText={ getFontCardVariantsText(
+										font
+									) }
+									onClick={ () => {
+										handleSetLibraryFontSelected( font );
+									} }
+								/>
+							) ) }
 						</>
 					) }
-				</>
-			) }
+					<Spacer margin={ 16 } />
+				</NavigatorScreen>
 
-			{ libraryFontSelected && (
-				<LibraryFontDetails
-					font={ libraryFontSelected }
-					isConfirmDeleteOpen={ isConfirmDeleteOpen }
-					handleConfirmUninstall={ handleConfirmUninstall }
-					handleCancelUninstall={ handleCancelUninstall }
-				/>
-			) }
-		</TabPanelLayout>
-	);
-}
+				<NavigatorScreen path="/fontFamily">
+					<ConfirmDeleteDialog
+						font={ libraryFontSelected }
+						isOpen={ isConfirmDeleteOpen }
+						setIsOpen={ setIsConfirmDeleteOpen }
+						setNotice={ setNotice }
+						uninstallFontFamily={ uninstallFontFamily }
+						handleSetLibraryFontSelected={
+							handleSetLibraryFontSelected
+						}
+					/>
 
-function Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {
-	const { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =
-		useContext( FontLibraryContext );
-	return (
-		<HStack justify="flex-end">
-			{ isInstalling && <ProgressBar /> }
-			<div>
+					<Flex justify="flex-start">
+						<NavigatorToParentButton
+							icon={ chevronLeft }
+							isSmall
+							onClick={ () => {
+								handleSetLibraryFontSelected( null );
+							} }
+							aria-label={ __( 'Navigate to the previous view' ) }
+						/>
+						<Heading
+							level={ 2 }
+							size={ 13 }
+							className="edit-site-global-styles-header"
+						>
+							{ libraryFontSelected?.name }
+						</Heading>
+					</Flex>
+					{ notice && (
+						<>
+							<Spacer margin={ 1 } />
+							<Notice
+								status={ notice.type }
+								onRemove={ () => setNotice( null ) }
+							>
+								{ notice.message }
+							</Notice>
+							<Spacer margin={ 1 } />
+						</>
+					) }
+					<Spacer margin={ 4 } />
+					<Text>
+						{ __(
+							'Choose font variants. Keep in mind that too many variants could make your site slower.'
+						) }
+					</Text>
+					<Spacer margin={ 4 } />
+					<VStack spacing={ 0 }>
+						<Spacer margin={ 8 } />
+						{ getFontFacesToDisplay( libraryFontSelected ).map(
+							( face, i ) => (
+								<LibraryFontVariant
+									font={ libraryFontSelected }
+									face={ face }
+									key={ `face${ i }` }
+								/>
+							)
+						) }
+					</VStack>
+				</NavigatorScreen>
+			</NavigatorProvider>
+
+			<HStack
+				justify="flex-end"
+				className="font-library-modal__tabpanel-layout__footer"
+			>
+				{ isInstalling && <ProgressBar /> }
 				{ shouldDisplayDeleteButton && (
 					<Button
 						isDestructive
@@ -184,16 +243,71 @@ function Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {
 						{ __( 'Delete' ) }
 					</Button>
 				) }
-			</div>
-			<Button
-				variant="primary"
-				onClick={ saveFontFamilies }
-				disabled={ ! fontFamiliesHasChanges }
-				__experimentalIsFocusable
-			>
-				{ __( 'Update' ) }
-			</Button>
-		</HStack>
+				<Button
+					variant="primary"
+					onClick={ saveFontFamilies }
+					disabled={ ! fontFamiliesHasChanges }
+					__experimentalIsFocusable
+				>
+					{ __( 'Update' ) }
+				</Button>
+			</HStack>
+		</div>
+	);
+}
+
+function ConfirmDeleteDialog( {
+	font,
+	isOpen,
+	setIsOpen,
+	setNotice,
+	uninstallFontFamily,
+	handleSetLibraryFontSelected,
+} ) {
+	const navigator = useNavigator();
+
+	const handleConfirmUninstall = async () => {
+		setNotice( null );
+		setIsOpen( false );
+		try {
+			await uninstallFontFamily( font );
+			navigator.goBack();
+			handleSetLibraryFontSelected( null );
+			setNotice( {
+				type: 'success',
+				message: __( 'Font family uninstalled successfully.' ),
+			} );
+		} catch ( error ) {
+			setNotice( {
+				type: 'error',
+				message:
+					__( 'There was an error uninstalling the font family. ' ) +
+					error.message,
+			} );
+		}
+	};
+
+	const handleCancelUninstall = () => {
+		setIsOpen( false );
+	};
+
+	return (
+		<ConfirmDialog
+			isOpen={ isOpen }
+			cancelButtonText={ __( 'Cancel' ) }
+			confirmButtonText={ __( 'Delete' ) }
+			onCancel={ handleCancelUninstall }
+			onConfirm={ handleConfirmUninstall }
+		>
+			{ font &&
+				sprintf(
+					/* translators: %s: Name of the font. */
+					__(
+						'Are you sure you want to delete "%s" font and all its variants and assets?'
+					),
+					font.name
+				) }
+		</ConfirmDialog>
 	);
 }
 

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

@@ -13,7 +13,7 @@ import {
  */
 import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
-import FontFaceDemo from './font-demo';
+import FontDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 
 function LibraryFontVariant( { face, font } ) {
@@ -45,7 +45,7 @@ function LibraryFontVariant( { face, font } ) {
 	);
 
 	return (
-		<div className="font-library-modal__library-font-variant">
+		<div className="font-library-modal__font-card">
 			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ isInstalled }
@@ -54,8 +54,8 @@ function LibraryFontVariant( { face, font } ) {
 					id={ checkboxId }
 				/>
 				<label htmlFor={ checkboxId }>
-					<FontFaceDemo
-						fontFace={ face }
+					<FontDemo
+						font={ face }
 						text={ displayName }
 						onClick={ handleToggleActivation }
 					/>

package/src/components/global-styles/font-library-modal/style.scss

@@ -22,9 +22,17 @@
 		font-weight: 500;
 		font-size: 11px;
 	}
+
+	// Add padding so the focus state outline (box-shadow) of font list items is visible
+	.components-navigator-screen {
+		padding: 3px;
+	}
 }
 
 .font-library-modal__tabpanel-layout {
+
+	margin-top: $grid-unit-40;
+
 	.font-library-modal__tabpanel-layout__footer {
 		border-top: 1px solid $gray-300;
 		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
@@ -36,11 +44,8 @@
 	}
 }
 
-.font-library-modal__fonts-grid {
-	.font-library-modal__fonts-grid__main {
-		display: flex;
-		flex-direction: column;
-	}
+.font-library-modal__tabpanel-layout .components-base-control__field {
+	margin-bottom: 0;
 }
 
 .font-library-modal__font-card {
@@ -50,6 +55,10 @@
 	padding: $grid-unit-20;
 	margin-top: -1px; /* To collapse the margin with the previous element */
 
+	&:hover {
+		background-color: $gray-100;
+	}
+
 	.font-library-modal__font-card__name {
 		font-weight: bold;
 	}
@@ -59,12 +68,6 @@
 	}
 }
 
-.font-library-modal__library-font-variant {
-	border: 1px solid $gray-200;
-	padding: $grid-unit-20;
-	margin-top: -1px; /* To collapse the margin with the previous element */
-}
-
 .font-library-modal__font-variant_demo-image {
 	display: block;
 	height: $grid-unit-30;
@@ -120,6 +123,7 @@ button.font-library-modal__upload-area {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	margin-top: $grid-unit-80;
 
 	h3 {
 		font-size: 1.4rem;
@@ -127,7 +131,7 @@ button.font-library-modal__upload-area {
 
 	.components-card {
 		width: 50%;
-		min-width: 250px;
-		max-width: 350px;
+		min-width: 350px;
+		max-width: 400px;
 	}
 }

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

@@ -3,11 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	Button,
-	DropZone,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
+	Button,
+	DropZone,
+	Notice,
 	FormFileUpload,
 	FlexItem,
 	privateApis as componentsPrivateApis,
@@ -22,7 +23,6 @@ import { FontLibraryContext } from './context';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
-import TabPanelLayout from './tab-panel-layout';
 import { unlock } from '../../../lock-unlock';
 
 const { ProgressBar } = unlock( componentsPrivateApis );
@@ -171,9 +171,17 @@ function UploadFonts() {
 	};
 
 	return (
-		<TabPanelLayout notice={ notice }>
+		<div className="font-library-modal__tabpanel-layout">
 			<DropZone onFilesDrop={ handleDropZone } />
 			<VStack className="font-library-modal__local-fonts">
+				{ notice && (
+					<Notice
+						status={ notice.type }
+						onRemove={ () => setNotice( null ) }
+					>
+						{ notice.message }
+					</Notice>
+				) }
 				{ isUploading && (
 					<FlexItem>
 						<div className="font-library-modal__upload-area">
@@ -205,7 +213,7 @@ function UploadFonts() {
 					) }
 				</Text>
 			</VStack>
-		</TabPanelLayout>
+		</div>
 	);
 }
 

package/src/components/global-styles/screen-revisions/index.js

@@ -73,7 +73,11 @@ function ScreenRevisions() {
 
 	const onCloseRevisions = () => {
 		goTo( '/' ); // Return to global styles main panel.
-		setEditorCanvasContainerView( undefined );
+		const canvasContainerView =
+			editorCanvasContainerView === 'global-styles-revisions:style-book'
+				? 'style-book'
+				: undefined;
+		setEditorCanvasContainerView( canvasContainerView );
 	};
 
 	const restoreRevision = ( revision ) => {
@@ -99,7 +103,6 @@ function ScreenRevisions() {
 			! editorCanvasContainerView.startsWith( 'global-styles-revisions' )
 		) {
 			goTo( '/' ); // Return to global styles main panel.
-			setEditorCanvasContainerView( editorCanvasContainerView );
 		}
 	}, [ editorCanvasContainerView ] );
 

package/src/components/global-styles/ui.js

@@ -230,12 +230,14 @@ function GlobalStylesBlockLink() {
 }
 
 function GlobalStylesEditorCanvasContainerLink() {
-	const { goTo } = useNavigator();
+	const { goTo, location } = useNavigator();
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
 			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
 		[]
 	);
+	const path = location?.path;
+	const isRevisionsOpen = path === '/revisions';
 
 	// If the user switches the editor canvas container view, redirect
 	// to the appropriate screen. This effectively allows deep linking to the
@@ -249,11 +251,33 @@ function GlobalStylesEditorCanvasContainerLink() {
 			case 'global-styles-css':
 				goTo( '/css' );
 				break;
+			case 'style-book':
+				/*
+				 * The stand-alone style book is open
+				 * and the revisions panel is open,
+				 * close the revisions panel.
+				 * Otherwise keep the style book open while
+				 * browsing global styles panel.
+				 */
+				if ( isRevisionsOpen ) {
+					goTo( '/' );
+				}
+				break;
 			default:
+				/*
+				 * Example: the user has navigated to "Browse styles" or elsewhere
+				 * and changes the editorCanvasContainerView, e.g., closes the style book.
+				 * The panel should not be affected.
+				 * Exclude revisions panel from this behavior,
+				 * as it should close when the editorCanvasContainerView doesn't correspond.
+				 */
+				if ( path !== '/' && ! isRevisionsOpen ) {
+					return;
+				}
 				goTo( '/' );
 				break;
 		}
-	}, [ editorCanvasContainerView, goTo ] );
+	}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
 }
 
 function GlobalStylesUI() {

package/src/components/header-edit-mode/index.js

@@ -134,7 +134,9 @@ export default function HeaderEditMode() {
 								className={ classnames(
 									'selected-block-tools-wrapper',
 									{
-										'is-collapsed': isBlockToolsCollapsed,
+										'is-collapsed':
+											isBlockToolsCollapsed ||
+											! hasBlockSelected,
 									}
 								) }
 							>