@wordpress/edit-site 5.22.0 → 5.24.0

package/src/components/global-styles/font-library-modal/utils/get-intersecting-font-faces.js

@@ -47,7 +47,7 @@ export default function getIntersectingFontFaces( incoming, existing ) {
 						} );
 					}
 				);
-				matches.push( { ...existingFont, fontFace: matchingFaces } );
+				matches.push( { ...incomingFont, fontFace: matchingFaces } );
 			} else {
 				matches.push( incomingFont );
 			}

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

@@ -1,8 +1,12 @@
+/**
+ * External dependencies
+ */
+import { paramCase as kebabCase } from 'change-case';
+
 /**
  * Internal dependencies
  */
 import { FONT_WEIGHTS, FONT_STYLES } from './constants';
-import { formatFontFamily } from './preview-styles';
 
 export function setUIValuesNeeded( font, extraValues = {} ) {
 	if ( ! font.name && ( font.fontFamily || font.slug ) ) {
@@ -85,14 +89,10 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 	}
 
 	// eslint-disable-next-line no-undef
-	const newFont = new FontFace(
-		formatFontFamily( fontFace.fontFamily ),
-		dataSource,
-		{
-			style: fontFace.fontStyle,
-			weight: fontFace.fontWeight,
-		}
-	);
+	const newFont = new FontFace( fontFace.fontFamily, dataSource, {
+		style: fontFace.fontStyle,
+		weight: fontFace.fontWeight,
+	} );
 
 	const loadedFace = await newFont.load();
 
@@ -129,9 +129,20 @@ export function getDisplaySrcFromFontFace( input, urlPrefix ) {
 	return src;
 }
 
+// This function replicates one behavior of _wp_to_kebab_case().
+// Additional context: https://github.com/WordPress/gutenberg/issues/53695
+export function wpKebabCase( str ) {
+	// If a string contains a digit followed by a number, insert a dash between them.
+	return kebabCase( str ).replace(
+		/([a-zA-Z])(\d)|(\d)([a-zA-Z])/g,
+		'$1$3-$2$4'
+	);
+}
+
 export function makeFormDataFromFontFamilies( fontFamilies ) {
 	const formData = new FormData();
 	const newFontFamilies = fontFamilies.map( ( family, familyIndex ) => {
+		family.slug = wpKebabCase( family.slug );
 		if ( family?.fontFace ) {
 			family.fontFace = family.fontFace.map( ( face, faceIndex ) => {
 				if ( face.file ) {

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

@@ -5,7 +5,7 @@ import getIntersectingFontFaces from '../get-intersecting-font-faces';
 
 describe( 'getIntersectingFontFaces', () => {
 	it( 'returns matching font faces for matching font family', () => {
-		const intendedFontsFamilies = [
+		const incomingFontFamilies = [
 			{
 				slug: 'lobster',
 				fontFace: [
@@ -30,15 +30,15 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 
-		expect( result ).toEqual( intendedFontsFamilies );
+		expect( result ).toEqual( incomingFontFamilies );
 	} );
 
 	it( 'returns empty array when there is no match', () => {
-		const intendedFontsFamilies = [
+		const incomingFontFamilies = [
 			{
 				slug: 'lobster',
 				fontFace: [
@@ -63,7 +63,7 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 
@@ -71,7 +71,7 @@ describe( 'getIntersectingFontFaces', () => {
 	} );
 
 	it( 'returns matching font faces', () => {
-		const intendedFontsFamilies = [
+		const incomingFontFamilies = [
 			{
 				slug: 'lobster',
 				fontFace: [
@@ -129,7 +129,7 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 
@@ -137,7 +137,7 @@ describe( 'getIntersectingFontFaces', () => {
 	} );
 
 	it( 'returns empty array when the first list is empty', () => {
-		const intendedFontsFamilies = [];
+		const incomingFontFamilies = [];
 
 		const existingFontFamilies = [
 			{
@@ -152,7 +152,7 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 
@@ -160,7 +160,7 @@ describe( 'getIntersectingFontFaces', () => {
 	} );
 
 	it( 'returns empty array when the second list is empty', () => {
-		const intendedFontsFamilies = [
+		const incomingFontFamilies = [
 			{
 				slug: 'lobster',
 				fontFace: [
@@ -175,7 +175,7 @@ describe( 'getIntersectingFontFaces', () => {
 		const existingFontFamilies = [];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 
@@ -183,7 +183,7 @@ describe( 'getIntersectingFontFaces', () => {
 	} );
 
 	it( 'returns intersecting font family when there are no fonfaces', () => {
-		const intendedFontsFamilies = [
+		const incomingFontFamilies = [
 			{
 				slug: 'piazzolla',
 				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
@@ -200,7 +200,7 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 
@@ -208,7 +208,7 @@ describe( 'getIntersectingFontFaces', () => {
 	} );
 
 	it( 'returns intersecting if there is an intended font face and is not present in the returning it should not be returned', () => {
-		const intendedFontsFamilies = [
+		const incomingFontFamilies = [
 			{
 				slug: 'piazzolla',
 				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
@@ -226,7 +226,7 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 
 		const result = getIntersectingFontFaces(
-			intendedFontsFamilies,
+			incomingFontFamilies,
 			existingFontFamilies
 		);
 		const expected = [
@@ -237,4 +237,35 @@ describe( 'getIntersectingFontFaces', () => {
 		];
 		expect( result ).toEqual( expected );
 	} );
+
+	it( 'updates font family definition using the incoming data', () => {
+		const incomingFontFamilies = [
+			{
+				slug: 'gothic-a1',
+				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
+				fontFamily: "'Gothic A1', serif",
+			},
+		];
+
+		const existingFontFamilies = [
+			{
+				slug: 'gothic-a1',
+				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
+				fontFamily: 'Gothic A1, serif',
+			},
+		];
+
+		const result = getIntersectingFontFaces(
+			incomingFontFamilies,
+			existingFontFamilies
+		);
+		const expected = [
+			{
+				slug: 'gothic-a1',
+				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
+				fontFamily: "'Gothic A1', serif",
+			},
+		];
+		expect( result ).toEqual( expected );
+	} );
 } );

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

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import { wpKebabCase } from '../index';
+
+describe( 'wpKebabCase', () => {
+	it( 'should insert a dash between a letter and a digit', () => {
+		const input = 'abc1def';
+		const expectedOutput = 'abc-1def';
+		expect( wpKebabCase( input ) ).toEqual( expectedOutput );
+
+		const input2 = 'abc1def2ghi';
+		const expectedOutput2 = 'abc-1def-2ghi';
+		expect( wpKebabCase( input2 ) ).toEqual( expectedOutput2 );
+	} );
+
+	it( 'should not insert a dash between two letters', () => {
+		const input = 'abcdef';
+		const expectedOutput = 'abcdef';
+		expect( wpKebabCase( input ) ).toEqual( expectedOutput );
+	} );
+
+	it( 'should not insert a dash between a digit and a hyphen', () => {
+		const input = 'abc1-def';
+		const expectedOutput = 'abc-1-def';
+		expect( wpKebabCase( input ) ).toEqual( expectedOutput );
+	} );
+} );

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

@@ -12,7 +12,7 @@ import {
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
-function ScreenHeader( { title, description } ) {
+function ScreenHeader( { title, description, onBack } ) {
 	return (
 		<VStack spacing={ 0 }>
 			<View>
@@ -27,6 +27,7 @@ function ScreenHeader( { title, description } ) {
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							isSmall
 							aria-label={ __( 'Navigate to the previous view' ) }
+							onClick={ onBack }
 						/>
 						<Spacer>
 							<Heading

package/src/components/global-styles/screen-block-list.js

@@ -9,7 +9,13 @@ import {
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { useState, useMemo, useEffect, useRef } from '@wordpress/element';
+import {
+	useState,
+	useEffect,
+	useRef,
+	useDeferredValue,
+	memo,
+} from '@wordpress/element';
 import {
 	BlockIcon,
 	privateApis as blockEditorPrivateApis,
@@ -99,22 +105,16 @@ function BlockMenuItem( { block } ) {
 	);
 }
 
-function ScreenBlockList() {
+function BlockList( { filterValue } ) {
 	const sortedBlockTypes = useSortedBlockTypes();
-	const [ filterValue, setFilterValue ] = useState( '' );
 	const debouncedSpeak = useDebounce( speak, 500 );
-	const isMatchingSearchTerm = useSelect(
-		( select ) => select( blocksStore ).isMatchingSearchTerm,
-		[]
-	);
-	const filteredBlockTypes = useMemo( () => {
-		if ( ! filterValue ) {
-			return sortedBlockTypes;
-		}
-		return sortedBlockTypes.filter( ( blockType ) =>
-			isMatchingSearchTerm( blockType, filterValue )
-		);
-	}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );
+	const { isMatchingSearchTerm } = useSelect( blocksStore );
+
+	const filteredBlockTypes = ! filterValue
+		? sortedBlockTypes
+		: sortedBlockTypes.filter( ( blockType ) =>
+				isMatchingSearchTerm( blockType, filterValue )
+		  );
 
 	const blockTypesListRef = useRef();
 
@@ -140,6 +140,27 @@ function ScreenBlockList() {
 		debouncedSpeak( resultsFoundMessage, count );
 	}, [ filterValue, debouncedSpeak ] );
 
+	return (
+		<div
+			ref={ blockTypesListRef }
+			className="edit-site-block-types-item-list"
+		>
+			{ filteredBlockTypes.map( ( block ) => (
+				<BlockMenuItem
+					block={ block }
+					key={ 'menu-itemblock-' + block.name }
+				/>
+			) ) }
+		</div>
+	);
+}
+
+const MemoizedBlockList = memo( BlockList );
+
+function ScreenBlockList() {
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const deferredFilterValue = useDeferredValue( filterValue );
+
 	return (
 		<>
 			<ScreenHeader
@@ -156,17 +177,7 @@ function ScreenBlockList() {
 				label={ __( 'Search for blocks' ) }
 				placeholder={ __( 'Search' ) }
 			/>
-			<div
-				ref={ blockTypesListRef }
-				className="edit-site-block-types-item-list"
-			>
-				{ filteredBlockTypes.map( ( block ) => (
-					<BlockMenuItem
-						block={ block }
-						key={ 'menu-itemblock-' + block.name }
-					/>
-				) ) }
-			</div>
+			<MemoizedBlockList filterValue={ deferredFilterValue } />
 		</>
 	);
 }

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	Button,
 	__experimentalUseNavigator as useNavigator,
@@ -10,6 +10,7 @@ import {
 	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useContext, useState, useEffect } from '@wordpress/element';
 import {
 	privateApis as blockEditorPrivateApis,
@@ -32,22 +33,43 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 );
 
 function ScreenRevisions() {
-	const { goBack } = useNavigator();
-	const { user: userConfig, setUserConfig } =
+	const { goTo } = useNavigator();
+	const { user: currentEditorGlobalStyles, setUserConfig } =
 		useContext( GlobalStylesContext );
-	const { blocks, editorCanvasContainerView } = useSelect( ( select ) => {
-		return {
-			editorCanvasContainerView: unlock(
-				select( editSiteStore )
-			).getEditorCanvasContainerView(),
-			blocks: select( blockEditorStore ).getBlocks(),
-		};
-	}, [] );
+	const { blocks, editorCanvasContainerView, revisionsCount } = useSelect(
+		( select ) => {
+			const {
+				getEntityRecord,
+				__experimentalGetCurrentGlobalStylesId,
+				__experimentalGetDirtyEntityRecords,
+			} = select( coreStore );
+			const isDirty = __experimentalGetDirtyEntityRecords().length > 0;
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+			let _revisionsCount =
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count || 0;
+			// one for the reset item.
+			_revisionsCount++;
+			// one for any dirty changes (unsaved).
+			if ( isDirty ) {
+				_revisionsCount++;
+			}
+			return {
+				editorCanvasContainerView: unlock(
+					select( editSiteStore )
+				).getEditorCanvasContainerView(),
+				blocks: select( blockEditorStore ).getBlocks(),
+				revisionsCount: _revisionsCount,
+			};
+		},
+		[]
+	);
 	const { revisions, isLoading, hasUnsavedChanges } =
 		useGlobalStylesRevisions();
-	const [ selectedRevisionId, setSelectedRevisionId ] = useState();
-	const [ globalStylesRevision, setGlobalStylesRevision ] =
-		useState( userConfig );
+	const [ currentlySelectedRevision, setCurrentlySelectedRevision ] =
+		useState( currentEditorGlobalStyles );
 	const [
 		isLoadingRevisionWithUnsavedChanges,
 		setIsLoadingRevisionWithUnsavedChanges,
@@ -55,16 +77,14 @@ function ScreenRevisions() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-
-	useEffect( () => {
-		if ( editorCanvasContainerView !== 'global-styles-revisions' ) {
-			goBack();
-			setEditorCanvasContainerView( editorCanvasContainerView );
-		}
-	}, [ editorCanvasContainerView ] );
+	const selectedRevisionMatchesEditorStyles = areGlobalStyleConfigsEqual(
+		currentlySelectedRevision,
+		currentEditorGlobalStyles
+	);
 
 	const onCloseRevisions = () => {
-		goBack();
+		goTo( '/' ); // Return to global styles main panel.
+		setEditorCanvasContainerView( undefined );
 	};
 
 	const restoreRevision = ( revision ) => {
@@ -77,26 +97,61 @@ function ScreenRevisions() {
 	};
 
 	const selectRevision = ( revision ) => {
-		setGlobalStylesRevision( {
+		setCurrentlySelectedRevision( {
 			styles: revision?.styles || {},
 			settings: revision?.settings || {},
 			id: revision?.id,
 		} );
-		setSelectedRevisionId( revision?.id );
 	};
 
+	useEffect( () => {
+		if ( editorCanvasContainerView !== 'global-styles-revisions' ) {
+			goTo( '/' ); // Return to global styles main panel.
+			setEditorCanvasContainerView( editorCanvasContainerView );
+		}
+	}, [ editorCanvasContainerView ] );
+
+	const firstRevision = revisions[ 0 ];
+	const currentlySelectedRevisionId = currentlySelectedRevision?.id;
+	const shouldSelectFirstItem =
+		!! firstRevision?.id &&
+		! selectedRevisionMatchesEditorStyles &&
+		! currentlySelectedRevisionId;
+
+	useEffect( () => {
+		/*
+		 * Ensure that the first item is selected and loaded into the preview pane
+		 * when no revision is selected and the selected styles don't match the current editor styles.
+		 * This is required in case editor styles are changed outside the revisions panel,
+		 * e.g., via the reset styles function of useGlobalStylesReset().
+		 * See: https://github.com/WordPress/gutenberg/issues/55866
+		 */
+		if ( shouldSelectFirstItem ) {
+			setCurrentlySelectedRevision( {
+				styles: firstRevision?.styles || {},
+				settings: firstRevision?.settings || {},
+				id: firstRevision?.id,
+			} );
+		}
+	}, [ shouldSelectFirstItem, firstRevision ] );
+
+	// Only display load button if there is a revision to load and it is different from the current editor styles.
 	const isLoadButtonEnabled =
-		!! globalStylesRevision?.id &&
-		! areGlobalStyleConfigsEqual( globalStylesRevision, userConfig );
+		!! currentlySelectedRevisionId && ! selectedRevisionMatchesEditorStyles;
 	const shouldShowRevisions = ! isLoading && revisions.length;
 
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'Revisions' ) }
+				title={
+					revisionsCount &&
+					// translators: %s: number of revisions.
+					sprintf( __( 'Revisions (%s)' ), revisionsCount )
+				}
 				description={ __(
-					'Revisions are added to the timeline when style changes are saved.'
+					'Click on previously saved styles to preview them. To restore a selected version to the editor, hit "Apply." When you\'re ready, use the Save button to save your changes.'
 				) }
+				onBack={ onCloseRevisions }
 			/>
 			{ isLoading && (
 				<Spinner className="edit-site-global-styles-screen-revisions__loading" />
@@ -105,13 +160,13 @@ function ScreenRevisions() {
 				<>
 					<Revisions
 						blocks={ blocks }
-						userConfig={ globalStylesRevision }
+						userConfig={ currentlySelectedRevision }
 						onClose={ onCloseRevisions }
 					/>
 					<div className="edit-site-global-styles-screen-revisions">
 						<RevisionsButtons
 							onChange={ selectRevision }
-							selectedRevisionId={ selectedRevisionId }
+							selectedRevisionId={ currentlySelectedRevisionId }
 							userRevisions={ revisions }
 						/>
 						{ isLoadButtonEnabled && (
@@ -120,8 +175,9 @@ function ScreenRevisions() {
 									variant="primary"
 									className="edit-site-global-styles-screen-revisions__button"
 									disabled={
-										! globalStylesRevision?.id ||
-										globalStylesRevision?.id === 'unsaved'
+										! currentlySelectedRevisionId ||
+										currentlySelectedRevisionId ===
+											'unsaved'
 									}
 									onClick={ () => {
 										if ( hasUnsavedChanges ) {
@@ -130,12 +186,12 @@ function ScreenRevisions() {
 											);
 										} else {
 											restoreRevision(
-												globalStylesRevision
+												currentlySelectedRevision
 											);
 										}
 									} }
 								>
-									{ globalStylesRevision?.id === 'parent'
+									{ currentlySelectedRevisionId === 'parent'
 										? __( 'Reset to defaults' )
 										: __( 'Apply' ) }
 								</Button>
@@ -147,7 +203,7 @@ function ScreenRevisions() {
 							isOpen={ isLoadingRevisionWithUnsavedChanges }
 							confirmButtonText={ __( 'Apply' ) }
 							onConfirm={ () =>
-								restoreRevision( globalStylesRevision )
+								restoreRevision( currentlySelectedRevision )
 							}
 							onCancel={ () =>
 								setIsLoadingRevisionWithUnsavedChanges( false )