@wordpress/edit-site 5.28.1 → 5.28.3

package/src/components/add-new-pattern/index.js

@@ -25,10 +25,11 @@ import {
 	PATTERN_DEFAULT_CATEGORY,
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
-import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
 
 const { useHistory, useLocation } = unlock( routerPrivateApis );
-const { CreatePatternModal } = unlock( editPatternsPrivateApis );
+const { CreatePatternModal, useAddPatternCategory } = unlock(
+	editPatternsPrivateApis
+);
 
 export default function AddNewPattern() {
 	const history = useHistory();
@@ -43,7 +44,6 @@ export default function AddNewPattern() {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const patternUploadInputRef = useRef();
-	const { patternCategories } = usePatternCategories();
 
 	function handleCreatePattern( { pattern, categoryId } ) {
 		setShowPatternModal( false );
@@ -97,6 +97,7 @@ export default function AddNewPattern() {
 		title: __( 'Import pattern from JSON' ),
 	} );
 
+	const { categoryMap, findOrCreateTerm } = useAddPatternCategory();
 	return (
 		<>
 			<DropdownMenu
@@ -132,12 +133,23 @@ export default function AddNewPattern() {
 					const file = event.target.files?.[ 0 ];
 					if ( ! file ) return;
 					try {
-						const currentCategoryId =
-							params.categoryType !== TEMPLATE_PART_POST_TYPE &&
-							patternCategories.find(
-								( category ) =>
-									category.name === params.categoryId
-							)?.id;
+						let currentCategoryId;
+						// When we're not handling template parts, we should
+						// add or create the proper pattern category.
+						if ( params.categoryType !== TEMPLATE_PART_POST_TYPE ) {
+							const currentCategory = categoryMap
+								.values()
+								.find(
+									( term ) => term.name === params.categoryId
+								);
+							if ( !! currentCategory ) {
+								currentCategoryId =
+									currentCategory.id ||
+									( await findOrCreateTerm(
+										currentCategory.label
+									) );
+							}
+						}
 						const pattern = await createPatternFromFile(
 							file,
 							currentCategoryId
@@ -146,8 +158,12 @@ export default function AddNewPattern() {
 						);
 
 						// Navigate to the All patterns category for the newly created pattern
-						// if we're not on that page already.
-						if ( ! currentCategoryId ) {
+						// if we're not on that page already and if we're not in the `my-patterns`
+						// category.
+						if (
+							! currentCategoryId &&
+							params.categoryId !== 'my-patterns'
+						) {
 							history.push( {
 								path: `/patterns`,
 								categoryType: PATTERN_TYPES.theme,

package/src/components/editor/index.js

@@ -263,6 +263,7 @@ export default function Editor( { isLoading } ) {
 								( shouldShowListView && <ListViewSidebar /> ) )
 						}
 						sidebar={
+							! isDistractionFree &&
 							isEditMode &&
 							isRightSidebarOpen && (
 								<>

package/src/components/global-styles/block-preview-panel.js

@@ -28,7 +28,7 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 	}, [ name, blockExample, variation ] );
 
 	const viewportWidth = blockExample?.viewportWidth ?? null;
-	const previewHeight = '150px';
+	const previewHeight = 150;
 
 	if ( ! blockExample ) {
 		return null;
@@ -48,7 +48,7 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 						{
 							css: `
 								body{
-									min-height:${ previewHeight };
+									min-height:${ previewHeight }px;
 									display:flex;align-items:center;justify-content:center;
 								}
 							`,

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

@@ -48,7 +48,7 @@ function CollectionFontDetails( {
 					/>
 				) ) }
 			</VStack>
-			<Spacer margin={ 8 } />
+			<Spacer margin={ 16 } />
 		</>
 	);
 }

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

@@ -392,7 +392,7 @@ function FontLibraryProvider( { children } ) {
 					loadFontFaceInBrowser(
 						face,
 						getDisplaySrcFromFontFace( face.src ),
-						'iframe'
+						'all'
 					);
 				} );
 			}

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

@@ -1,11 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { useContext, useEffect, useState, useMemo } from '@wordpress/element';
+import {
+	useContext,
+	useEffect,
+	useState,
+	useMemo,
+	createInterpolateElement,
+} from '@wordpress/element';
 import {
 	__experimentalSpacer as Spacer,
 	__experimentalInputControl as InputControl,
 	__experimentalText as Text,
+	__experimentalHStack as HStack,
 	SelectControl,
 	Spinner,
 	Icon,
@@ -14,7 +21,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
-import { __, _x } from '@wordpress/i18n';
+import { sprintf, __, _x } from '@wordpress/i18n';
 import { search, closeSmall } from '@wordpress/icons';
 
 /**
@@ -22,7 +29,6 @@ import { search, closeSmall } from '@wordpress/icons';
  */
 import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
-import FontsGrid from './fonts-grid';
 import FontCard from './font-card';
 import filterFonts from './utils/filter-fonts';
 import CollectionFontDetails from './collection-font-details';
@@ -48,6 +54,7 @@ function FontCollection( { slug } ) {
 
 	const [ selectedFont, setSelectedFont ] = useState( null );
 	const [ fontsToInstall, setFontsToInstall ] = useState( [] );
+	const [ page, setPage ] = useState( 1 );
 	const [ filters, setFilters ] = useState( {} );
 	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
 		requiresPermission && ! getGoogleFontsPermissionFromStorage()
@@ -109,22 +116,34 @@ function FontCollection( { slug } ) {
 		[ collectionFonts, filters ]
 	);
 
+	// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px
+	// The height of each font family item is 61px.
+	const pageSize = Math.floor( ( window.innerHeight - 417 ) / 61 );
+	const totalPages = Math.ceil( fonts.length / pageSize );
+	const itemsStart = ( page - 1 ) * pageSize;
+	const itemsLimit = page * pageSize;
+	const items = fonts.slice( itemsStart, itemsLimit );
+
 	const handleCategoryFilter = ( category ) => {
 		setFilters( { ...filters, category } );
+		setPage( 1 );
 	};
 
 	const handleUpdateSearchInput = ( value ) => {
 		setFilters( { ...filters, search: value } );
+		setPage( 1 );
 	};
 
 	const debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );
 
 	const resetFilters = () => {
 		setFilters( {} );
+		setPage( 1 );
 	};
 
 	const resetSearch = () => {
 		setFilters( { ...filters, search: '' } );
+		setPage( 1 );
 	};
 
 	const handleUnselectFont = () => {
@@ -186,6 +205,24 @@ function FontCollection( { slug } ) {
 		resetFontsToInstall();
 	};
 
+	let footerComponent = null;
+	if ( selectedFont ) {
+		footerComponent = (
+			<InstallFooter
+				handleInstall={ handleInstall }
+				isDisabled={ fontsToInstall.length === 0 }
+			/>
+		);
+	} else if ( ! renderConfirmDialog && totalPages > 1 ) {
+		footerComponent = (
+			<PaginationFooter
+				page={ page }
+				totalPages={ totalPages }
+				setPage={ setPage }
+			/>
+		);
+	}
+
 	return (
 		<TabPanelLayout
 			title={
@@ -198,12 +235,7 @@ function FontCollection( { slug } ) {
 			}
 			notice={ notice }
 			handleBack={ !! selectedFont && handleUnselectFont }
-			footer={
-				<Footer
-					handleInstall={ handleInstall }
-					isDisabled={ fontsToInstall.length === 0 }
-				/>
-			}
+			footer={ footerComponent }
 		>
 			{ renderConfirmDialog && (
 				<>
@@ -275,8 +307,8 @@ function FontCollection( { slug } ) {
 			) }
 
 			{ ! renderConfirmDialog && ! selectedFont && (
-				<FontsGrid>
-					{ fonts.map( ( font ) => (
+				<div className="font-library-modal__fonts-grid__main">
+					{ items.map( ( font ) => (
 						<FontCard
 							key={ font.font_family_settings.slug }
 							font={ font.font_family_settings }
@@ -285,13 +317,86 @@ function FontCollection( { slug } ) {
 							} }
 						/>
 					) ) }
-				</FontsGrid>
+				</div>
 			) }
 		</TabPanelLayout>
 	);
 }
 
-function Footer( { handleInstall, isDisabled } ) {
+function PaginationFooter( { page, totalPages, setPage } ) {
+	return (
+		<Flex justify="center">
+			<Button
+				label={ __( 'First page' ) }
+				size="compact"
+				onClick={ () => setPage( 1 ) }
+				disabled={ page === 1 }
+				__experimentalIsFocusable
+			>
+				<span>«</span>
+			</Button>
+			<Button
+				label={ __( 'Previous page' ) }
+				size="compact"
+				onClick={ () => setPage( page - 1 ) }
+				disabled={ page === 1 }
+				__experimentalIsFocusable
+			>
+				<span>‹</span>
+			</Button>
+			<HStack justify="flex-start" expanded={ false } spacing={ 2 }>
+				{ createInterpolateElement(
+					sprintf(
+						// translators: %s: Total number of pages.
+						_x( 'Page <CurrenPageControl /> of %s', 'paging' ),
+						totalPages
+					),
+					{
+						CurrenPageControl: (
+							<SelectControl
+								aria-label={ __( 'Current page' ) }
+								value={ page }
+								options={ [ ...Array( totalPages ) ].map(
+									( e, i ) => {
+										return {
+											label: i + 1,
+											value: i + 1,
+										};
+									}
+								) }
+								onChange={ ( newPage ) =>
+									setPage( parseInt( newPage ) )
+								}
+								size={ 'compact' }
+								__nextHasNoMarginBottom
+							/>
+						),
+					}
+				) }
+			</HStack>
+			<Button
+				label={ __( 'Next page' ) }
+				size="compact"
+				onClick={ () => setPage( page + 1 ) }
+				disabled={ page === totalPages }
+				__experimentalIsFocusable
+			>
+				<span>›</span>
+			</Button>
+			<Button
+				label={ __( 'Last page' ) }
+				size="compact"
+				onClick={ () => setPage( totalPages ) }
+				disabled={ page === totalPages }
+				__experimentalIsFocusable
+			>
+				<span>»</span>
+			</Button>
+		</Flex>
+	);
+}
+
+function InstallFooter( { handleInstall, isDisabled } ) {
 	const { isInstalling } = useContext( FontLibraryContext );
 
 	return (

package/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js

@@ -24,7 +24,7 @@ function GoogleFontsConfirmDialog() {
 		<div className="font-library__google-fonts-confirm">
 			<Card>
 				<CardBody>
-					<Text as="h3">Connect to Google Fonts</Text>
+					<Text as="h3">{ __( 'Connect to Google Fonts' ) }</Text>
 					<Spacer margin={ 6 } />
 					<Text as="p">
 						{ __(

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

@@ -7,6 +7,7 @@ import {
 	privateApis as componentsPrivateApis,
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
+	__experimentalText as Text,
 	Button,
 	Spinner,
 	FlexItem,
@@ -17,7 +18,6 @@ import {
  */
 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';
@@ -123,36 +123,38 @@ function InstalledFonts() {
 					) }
 					{ baseCustomFonts.length > 0 && (
 						<>
-							<FontsGrid>
-								{ baseCustomFonts.map( ( font ) => (
-									<LibraryFontCard
-										font={ font }
-										key={ font.slug }
-										onClick={ () => {
-											handleSelectFont( font );
-										} }
-									/>
-								) ) }
-							</FontsGrid>
+							{ baseCustomFonts.map( ( font ) => (
+								<LibraryFontCard
+									font={ font }
+									key={ font.slug }
+									onClick={ () => {
+										handleSelectFont( 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 ) => (
+								<LibraryFontCard
+									font={ font }
+									key={ font.slug }
+									onClick={ () => {
+										handleSelectFont( font );
+									} }
+								/>
+							) ) }
 						</>
 					) }
+					<Spacer margin={ 16 } />
 				</>
 			) }
 

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

@@ -36,11 +36,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 {

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

@@ -9,7 +9,7 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { FONT_WEIGHTS, FONT_STYLES } from './constants';
 import { unlock } from '../../../../lock-unlock';
 import { fetchInstallFontFace } from '../resolvers';
-import { formatFontFamily } from './preview-styles';
+import { formatFontFaceName } from './preview-styles';
 
 /**
  * Browser dependencies
@@ -99,7 +99,7 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 	}
 
 	const newFont = new window.FontFace(
-		formatFontFamily( fontFace.fontFamily ),
+		formatFontFaceName( fontFace.fontFamily ),
 		dataSource,
 		{
 			style: fontFace.fontStyle,

package/src/components/global-styles/font-library-modal/utils/make-families-from-faces.js

@@ -1,10 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../../lock-unlock';
+
+const { kebabCase } = unlock( componentsPrivateApis );
+
 export default function makeFamiliesFromFaces( fontFaces ) {
 	const fontFamiliesObject = fontFaces.reduce( ( acc, item ) => {
 		if ( ! acc[ item.fontFamily ] ) {
 			acc[ item.fontFamily ] = {
 				name: item.fontFamily,
 				fontFamily: item.fontFamily,
-				slug: item.fontFamily.replace( /\s+/g, '-' ).toLowerCase(),
+				slug: kebabCase( item.fontFamily.toLowerCase() ),
 				fontFace: [],
 			};
 		}

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

@@ -30,22 +30,79 @@ function extractFontWeights( fontFaces ) {
 	return result;
 }
 
+/*
+ * Format the font family to use in the CSS font-family property of a CSS rule.
+ *
+ * The input can be a string with the font family name or a string with multiple font family names separated by commas.
+ * It follows the recommendations from the CSS Fonts Module Level 4.
+ * https://www.w3.org/TR/css-fonts-4/#font-family-prop
+ *
+ * @param {string} input - The font family.
+ * @return {string} The formatted font family.
+ *
+ * Example:
+ * formatFontFamily( "Open Sans, Font+Name, sans-serif" ) => '"Open Sans", "Font+Name", sans-serif'
+ * formatFontFamily( "'Open Sans', generic(kai), sans-serif" ) => '"Open Sans", sans-serif'
+ * formatFontFamily( "DotGothic16, Slabo 27px, serif" ) => '"DotGothic16","Slabo 27px",serif'
+ * formatFontFamily( "Mine's, Moe's Typography" ) => `"mine's","Moe's Typography"`
+ */
 export function formatFontFamily( input ) {
-	return input
-		.split( ',' )
-		.map( ( font ) => {
-			font = font.trim(); // Remove any leading or trailing white spaces
-			// If the font doesn't start with quotes and contains a space, then wrap in quotes.
-			// Check that string starts with a single or double quote and not a space
-			if (
-				! ( font.startsWith( '"' ) || font.startsWith( "'" ) ) &&
-				font.indexOf( ' ' ) !== -1
-			) {
-				return `"${ font }"`;
-			}
-			return font; // Return font as is if no transformation is needed
-		} )
-		.join( ', ' );
+	// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).
+	const regex = /^(?!generic\([ a-zA-Z\-]+\)$)(?!^[a-zA-Z\-]+$).+/;
+	const output = input.trim();
+
+	const formatItem = ( item ) => {
+		item = item.trim();
+		if ( item.match( regex ) ) {
+			// removes leading and trailing quotes.
+			item = item.replace( /^["']|["']$/g, '' );
+			return `"${ item }"`;
+		}
+		return item;
+	};
+
+	if ( output.includes( ',' ) ) {
+		return output
+			.split( ',' )
+			.map( formatItem )
+			.filter( ( item ) => item !== '' )
+			.join( ', ' );
+	}
+
+	return formatItem( output );
+}
+
+/*
+ * Format the font face name to use in the font-family property of a font face.
+ *
+ * The input can be a string with the font face name or a string with multiple font face names separated by commas.
+ * It removes the leading and trailing quotes from the font face name.
+ *
+ * @param {string} input - The font face name.
+ * @return {string} The formatted font face name.
+ *
+ * Example:
+ * formatFontFaceName("Open Sans") => "Open Sans"
+ * formatFontFaceName("'Open Sans', sans-serif") => "Open Sans"
+ * formatFontFaceName(", 'Open Sans', 'Helvetica Neue', sans-serif") => "Open Sans"
+ */
+export function formatFontFaceName( input ) {
+	let output = input.trim();
+	if ( output.includes( ',' ) ) {
+		output = output
+			.split( ',' )
+			// finds the first item that is not an empty string.
+			.find( ( item ) => item.trim() !== '' )
+			.trim();
+	}
+	// removes leading and trailing quotes.
+	output = output.replace( /^["']|["']$/g, '' );
+
+	// Firefox needs the font name to be wrapped in double quotes meanwhile other browsers don't.
+	if ( window.navigator.userAgent.toLowerCase().includes( 'firefox' ) ) {
+		output = `"${ output }"`;
+	}
+	return output;
 }
 
 export function getFamilyPreviewStyle( family ) {

package/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js

@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import { getFamilyPreviewStyle, formatFontFamily } from '../preview-styles';
+import {
+	getFamilyPreviewStyle,
+	formatFontFamily,
+	formatFontFaceName,
+} from '../preview-styles';
 
 describe( 'getFamilyPreviewStyle', () => {
 	it( 'should return default fontStyle and fontWeight if fontFace is not provided', () => {
@@ -139,7 +143,7 @@ describe( 'formatFontFamily', () => {
 				"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"
 			)
 		).toBe(
-			"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"
+			'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif'
 		);
 	} );
 
@@ -153,9 +157,60 @@ describe( 'formatFontFamily', () => {
 		);
 	} );
 
-	it( 'should wrap only those font names with spaces which are not already quoted', () => {
-		expect( formatFontFamily( 'Baloo Bhai 2, Arial' ) ).toBe(
-			'"Baloo Bhai 2", Arial'
+	it( 'should wrap names with special characters in quotes', () => {
+		expect(
+			formatFontFamily(
+				'Font+Name, Font*Name, _Font_Name_, generic(kai), sans-serif'
+			)
+		).toBe(
+			'"Font+Name", "Font*Name", "_Font_Name_", generic(kai), sans-serif'
+		);
+	} );
+
+	it( 'should fix empty wrong formatted font family', () => {
+		expect( formatFontFamily( ', Abril Fatface,Times,serif' ) ).toBe(
+			'"Abril Fatface", Times, serif'
+		);
+	} );
+
+	it( 'should not add quotes to generic names', () => {
+		expect(
+			formatFontFamily(
+				'Paren(thesis)Font, generic(kai), generic(fasongsong), generic( abc ), Helvetica Neue'
+			)
+		).toBe(
+			'"Paren(thesis)Font", generic(kai), generic(fasongsong), generic( abc ), "Helvetica Neue"'
 		);
 	} );
 } );
+
+describe( 'formatFontFaceName', () => {
+	it( 'should remove leading and trailing quotes', () => {
+		expect( formatFontFaceName( '"Open Sans"' ) ).toBe( 'Open Sans' );
+	} );
+
+	it( 'should remove leading and trailing quotes from multiple font face names', () => {
+		expect(
+			formatFontFaceName( "'Open Sans', 'Helvetica Neue', sans-serif" )
+		).toBe( 'Open Sans' );
+	} );
+
+	it( 'should remove leading and trailing quotes even from names with spaces and special characters', () => {
+		expect( formatFontFaceName( "'Font+Name 24', sans-serif" ) ).toBe(
+			'Font+Name 24'
+		);
+	} );
+
+	it( 'should ouput the font face name with quotes on Firefox', () => {
+		const mockUserAgent =
+			'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:122.0) Gecko/20100101 Firefox/122.0';
+
+		// Mock the userAgent for this test
+		Object.defineProperty( window.navigator, 'userAgent', {
+			value: mockUserAgent,
+			configurable: true,
+		} );
+
+		expect( formatFontFaceName( 'Open Sans' ) ).toBe( '"Open Sans"' );
+	} );
+} );