@wordpress/edit-site 5.25.0 → 5.25.1-next.79a6196f.0

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

@@ -0,0 +1,58 @@
+/**
+ * Internal dependencies
+ */
+import { makeFormDataFromFontFamily } from '../index';
+
+/* global File */
+
+describe( 'makeFormDataFromFontFamily', () => {
+	it( 'should process fontFamilies and return FormData', () => {
+		const mockFontFamily = {
+			slug: 'bebas',
+			name: 'Bebas',
+			fontFamily: 'Bebas',
+			fontFace: [
+				{
+					file: new File( [ 'content' ], 'test-font1.woff2' ),
+					fontWeight: '500',
+					fontStyle: 'normal',
+				},
+				{
+					file: new File( [ 'content' ], 'test-font2.woff2' ),
+					fontWeight: '400',
+					fontStyle: 'normal',
+				},
+			],
+		};
+
+		const formData = makeFormDataFromFontFamily( mockFontFamily );
+
+		expect( formData instanceof FormData ).toBeTruthy();
+
+		// Check if files are added correctly
+		expect( formData.get( 'file-0' ).name ).toBe( 'test-font1.woff2' );
+		expect( formData.get( 'file-1' ).name ).toBe( 'test-font2.woff2' );
+
+		// Check if 'fontFamilies' key in FormData is correct
+		const expectedFontFamily = {
+			fontFace: [
+				{
+					fontWeight: '500',
+					fontStyle: 'normal',
+					uploadedFile: 'file-0',
+				},
+				{
+					fontWeight: '400',
+					fontStyle: 'normal',
+					uploadedFile: 'file-1',
+				},
+			],
+			slug: 'bebas',
+			name: 'Bebas',
+			fontFamily: 'Bebas',
+		};
+		expect( JSON.parse( formData.get( 'font_family_settings' ) ) ).toEqual(
+			expectedFontFamily
+		);
+	} );
+} );

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

@@ -11,8 +11,12 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
-import { useState, useMemo } from '@wordpress/element';
+import {
+	useThrottle,
+	useReducedMotion,
+	useResizeObserver,
+} from '@wordpress/compose';
+import { useLayoutEffect, useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -60,6 +64,13 @@ const normalizedHeight = 152;
 
 const normalizedColorSwatchSize = 32;
 
+// Throttle options for useThrottle. Must be defined outside of the component,
+// so that the object reference is the same on each render.
+const THROTTLE_OPTIONS = {
+	leading: true,
+	trailing: true,
+};
+
 const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 	const [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );
 	const [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );
@@ -79,7 +90,47 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 	const disableMotion = useReducedMotion();
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ containerResizeListener, { width } ] = useResizeObserver();
-	const ratio = width ? width / normalizedWidth : 1;
+	const [ throttledWidth, setThrottledWidthState ] = useState( width );
+	const [ ratioState, setRatioState ] = useState();
+
+	const setThrottledWidth = useThrottle(
+		setThrottledWidthState,
+		250,
+		THROTTLE_OPTIONS
+	);
+
+	// Must use useLayoutEffect to avoid a flash of the iframe at the wrong
+	// size before the width is set.
+	useLayoutEffect( () => {
+		if ( width ) {
+			setThrottledWidth( width );
+		}
+	}, [ width, setThrottledWidth ] );
+
+	// Must use useLayoutEffect to avoid a flash of the iframe at the wrong
+	// size before the width is set.
+	useLayoutEffect( () => {
+		const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
+		const ratioDiff = newRatio - ( ratioState || 0 );
+
+		// Only update the ratio state if the difference is big enough
+		// or if the ratio state is not yet set. This is to avoid an
+		// endless loop of updates at particular viewport heights when the
+		// presence of a scrollbar causes the width to change slightly.
+		const isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;
+
+		if ( isRatioDiffBigEnough || ! ratioState ) {
+			setRatioState( newRatio );
+		}
+	}, [ throttledWidth, ratioState ] );
+
+	// Set a fallbackRatio to use before the throttled ratio has been set.
+	const fallbackRatio = width ? width / normalizedWidth : 1;
+	// Use the throttled ratio if it has been calculated, otherwise
+	// use the fallback ratio. The throttled ratio is used to avoid
+	// an endless loop of updates at particular viewport heights.
+	// See: https://github.com/WordPress/gutenberg/issues/55112
+	const ratio = ratioState ? ratioState : fallbackRatio;
 
 	const { paletteColors, highlightedColors } = useStylesPreviewColors();
 
@@ -108,6 +159,7 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 				<Iframe
 					className="edit-site-global-styles-preview__iframe"
 					style={ {
+						width: '100%',
 						height: normalizedHeight * ratio,
 					} }
 					onMouseEnter={ () => setIsHovered( true ) }

package/src/components/global-styles/screen-color-palette.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { TabPanel } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,6 +10,9 @@ import { TabPanel } from '@wordpress/components';
 import ColorPalettePanel from './color-palette-panel';
 import GradientPalettePanel from './gradients-palette-panel';
 import ScreenHeader from './header';
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 function ScreenColorPalette( { name } ) {
 	return (
@@ -20,31 +23,18 @@ function ScreenColorPalette( { name } ) {
 					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
 				) }
 			/>
-			<TabPanel
-				tabs={ [
-					{
-						name: 'solid',
-						title: 'Solid',
-						value: 'solid',
-					},
-					{
-						name: 'gradient',
-						title: 'Gradient',
-						value: 'gradient',
-					},
-				] }
-			>
-				{ ( tab ) => (
-					<>
-						{ tab.value === 'solid' && (
-							<ColorPalettePanel name={ name } />
-						) }
-						{ tab.value === 'gradient' && (
-							<GradientPalettePanel name={ name } />
-						) }
-					</>
-				) }
-			</TabPanel>
+			<Tabs>
+				<Tabs.TabList>
+					<Tabs.Tab tabId="solid">Solid</Tabs.Tab>
+					<Tabs.Tab tabId="gradient">Gradient</Tabs.Tab>
+				</Tabs.TabList>
+				<Tabs.TabPanel tabId="solid" focusable={ false }>
+					<ColorPalettePanel name={ name } />
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="gradient" focusable={ false }>
+					<GradientPalettePanel name={ name } />
+				</Tabs.TabPanel>
+			</Tabs>
 		</>
 	);
 }

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

@@ -3,13 +3,11 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	Button,
 	__experimentalUseNavigator as useNavigator,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Spinner,
 } 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,
@@ -22,51 +20,43 @@ import {
 import ScreenHeader from '../header';
 import { unlock } from '../../../lock-unlock';
 import Revisions from '../../revisions';
-import SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom';
 import { store as editSiteStore } from '../../../store';
 import useGlobalStylesRevisions from './use-global-styles-revisions';
 import RevisionsButtons from './revisions-buttons';
+import StyleBook from '../../style-book';
+import Pagination from '../../pagination';
 
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
 
+const PAGE_SIZE = 10;
+
 function ScreenRevisions() {
 	const { goTo } = useNavigator();
 	const { user: currentEditorGlobalStyles, setUserConfig } =
 		useContext( GlobalStylesContext );
-	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 { blocks, editorCanvasContainerView } = useSelect(
+		( select ) => ( {
+			editorCanvasContainerView: unlock(
+				select( editSiteStore )
+			).getEditorCanvasContainerView(),
+			blocks: select( blockEditorStore ).getBlocks(),
+		} ),
 		[]
 	);
-	const { revisions, isLoading, hasUnsavedChanges } =
-		useGlobalStylesRevisions();
+	const [ currentPage, setCurrentPage ] = useState( 1 );
+	const [ currentRevisions, setCurrentRevisions ] = useState( [] );
+	const { revisions, isLoading, hasUnsavedChanges, revisionsCount } =
+		useGlobalStylesRevisions( {
+			query: {
+				per_page: PAGE_SIZE,
+				page: currentPage,
+			},
+		} );
+
+	const numPages = Math.ceil( revisionsCount / PAGE_SIZE );
+
 	const [ currentlySelectedRevision, setCurrentlySelectedRevision ] =
 		useState( currentEditorGlobalStyles );
 	const [
@@ -104,12 +94,21 @@ function ScreenRevisions() {
 	};
 
 	useEffect( () => {
-		if ( editorCanvasContainerView !== 'global-styles-revisions' ) {
+		if (
+			! editorCanvasContainerView ||
+			! editorCanvasContainerView.startsWith( 'global-styles-revisions' )
+		) {
 			goTo( '/' ); // Return to global styles main panel.
 			setEditorCanvasContainerView( editorCanvasContainerView );
 		}
 	}, [ editorCanvasContainerView ] );
 
+	useEffect( () => {
+		if ( ! isLoading && revisions.length ) {
+			setCurrentRevisions( revisions );
+		}
+	}, [ revisions, isLoading ] );
+
 	const firstRevision = revisions[ 0 ];
 	const currentlySelectedRevisionId = currentlySelectedRevision?.id;
 	const shouldSelectFirstItem =
@@ -137,8 +136,10 @@ function ScreenRevisions() {
 	// Only display load button if there is a revision to load,
 	// and it is different from the current editor styles.
 	const isLoadButtonEnabled =
-		!! currentlySelectedRevisionId && ! selectedRevisionMatchesEditorStyles;
-	const shouldShowRevisions = ! isLoading && revisions.length;
+		!! currentlySelectedRevisionId &&
+		currentlySelectedRevisionId !== 'unsaved' &&
+		! selectedRevisionMatchesEditorStyles;
+	const hasRevisions = !! currentRevisions.length;
 
 	return (
 		<>
@@ -153,69 +154,67 @@ function ScreenRevisions() {
 				) }
 				onBack={ onCloseRevisions }
 			/>
-			{ isLoading && (
+			{ ! hasRevisions && (
 				<Spinner className="edit-site-global-styles-screen-revisions__loading" />
 			) }
-			{ shouldShowRevisions && (
-				<>
+			{ hasRevisions &&
+				( editorCanvasContainerView ===
+				'global-styles-revisions:style-book' ? (
+					<StyleBook
+						userConfig={ currentlySelectedRevision }
+						isSelected={ () => {} }
+						onClose={ () => {
+							setEditorCanvasContainerView(
+								'global-styles-revisions'
+							);
+						} }
+					/>
+				) : (
 					<Revisions
 						blocks={ blocks }
 						userConfig={ currentlySelectedRevision }
-						onClose={ onCloseRevisions }
+						closeButtonLabel={ __( 'Close revisions' ) }
+					/>
+				) ) }
+			<RevisionsButtons
+				onChange={ selectRevision }
+				selectedRevisionId={ currentlySelectedRevisionId }
+				userRevisions={ currentRevisions }
+				canApplyRevision={ isLoadButtonEnabled }
+				onApplyRevision={ () =>
+					hasUnsavedChanges
+						? setIsLoadingRevisionWithUnsavedChanges( true )
+						: restoreRevision( currentlySelectedRevision )
+				}
+			/>
+			{ numPages > 1 && (
+				<div className="edit-site-global-styles-screen-revisions__footer">
+					<Pagination
+						className="edit-site-global-styles-screen-revisions__pagination"
+						currentPage={ currentPage }
+						numPages={ numPages }
+						changePage={ setCurrentPage }
+						totalItems={ revisionsCount }
+						disabled={ isLoading }
+						label={ __( 'Global Styles pagination navigation' ) }
 					/>
-					<div className="edit-site-global-styles-screen-revisions">
-						<RevisionsButtons
-							onChange={ selectRevision }
-							selectedRevisionId={ currentlySelectedRevisionId }
-							userRevisions={ revisions }
-							canApplyRevision={ isLoadButtonEnabled }
-						/>
-						{ isLoadButtonEnabled && (
-							<SidebarFixedBottom>
-								<Button
-									variant="primary"
-									className="edit-site-global-styles-screen-revisions__button"
-									disabled={
-										! currentlySelectedRevisionId ||
-										currentlySelectedRevisionId ===
-											'unsaved'
-									}
-									onClick={ () => {
-										if ( hasUnsavedChanges ) {
-											setIsLoadingRevisionWithUnsavedChanges(
-												true
-											);
-										} else {
-											restoreRevision(
-												currentlySelectedRevision
-											);
-										}
-									} }
-								>
-									{ currentlySelectedRevisionId === 'parent'
-										? __( 'Reset to defaults' )
-										: __( 'Apply' ) }
-								</Button>
-							</SidebarFixedBottom>
-						) }
-					</div>
-					{ isLoadingRevisionWithUnsavedChanges && (
-						<ConfirmDialog
-							isOpen={ isLoadingRevisionWithUnsavedChanges }
-							confirmButtonText={ __( 'Apply' ) }
-							onConfirm={ () =>
-								restoreRevision( currentlySelectedRevision )
-							}
-							onCancel={ () =>
-								setIsLoadingRevisionWithUnsavedChanges( false )
-							}
-						>
-							{ __(
-								'Any unsaved changes will be lost when you apply this revision.'
-							) }
-						</ConfirmDialog>
+				</div>
+			) }
+			{ isLoadingRevisionWithUnsavedChanges && (
+				<ConfirmDialog
+					isOpen={ isLoadingRevisionWithUnsavedChanges }
+					confirmButtonText={ __( 'Apply' ) }
+					onConfirm={ () =>
+						restoreRevision( currentlySelectedRevision )
+					}
+					onCancel={ () =>
+						setIsLoadingRevisionWithUnsavedChanges( false )
+					}
+				>
+					{ __(
+						'Any unsaved changes will be lost when you apply this revision.'
 					) }
-				</>
+				</ConfirmDialog>
 			) }
 		</>
 	);

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

@@ -6,45 +6,31 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
-import { getBlockTypes } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import getRevisionChanges from './get-revision-changes';
+import { unlock } from '../../../lock-unlock';
 
 const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;
-const MAX_CHANGES = 7;
+const { getGlobalStylesChanges } = unlock( blockEditorPrivateApis );
 
-function ChangesSummary( { revision, previousRevision, blockNames } ) {
-	const changes = getRevisionChanges(
-		revision,
-		previousRevision,
-		blockNames
-	);
+function ChangesSummary( { revision, previousRevision } ) {
+	const changes = getGlobalStylesChanges( revision, previousRevision, {
+		maxResults: 7,
+	} );
 	const changesLength = changes.length;
 
 	if ( ! changesLength ) {
 		return null;
 	}
 
-	// Truncate to `n` results if necessary.
-	if ( changesLength > MAX_CHANGES ) {
-		const deleteCount = changesLength - MAX_CHANGES;
-		const andMoreText = sprintf(
-			// translators: %d: number of global styles changes that are not displayed in the UI.
-			_n( '…and %d more change.', '…and %d more changes.', deleteCount ),
-			deleteCount
-		);
-		changes.splice( MAX_CHANGES, deleteCount, andMoreText );
-	}
-
 	return (
 		<span
 			data-testid="global-styles-revision-changes"
@@ -115,6 +101,7 @@ function RevisionsButtons( {
 	selectedRevisionId,
 	onChange,
 	canApplyRevision,
+	onApplyRevision,
 } ) {
 	const { currentThemeName, currentUser } = useSelect( ( select ) => {
 		const { getCurrentTheme, getCurrentUser } = select( coreStore );
@@ -125,20 +112,13 @@ function RevisionsButtons( {
 			currentUser: getCurrentUser(),
 		};
 	}, [] );
-	const blockNames = useMemo( () => {
-		const blockTypes = getBlockTypes();
-		return blockTypes.reduce( ( accumulator, { name, title } ) => {
-			accumulator[ name ] = title;
-			return accumulator;
-		}, {} );
-	}, [] );
 	const dateNowInMs = getDate().getTime();
 	const { datetimeAbbreviated } = getSettings().formats;
 
 	return (
 		<ol
 			className="edit-site-global-styles-screen-revisions__revisions-list"
-			aria-label={ __( 'Global styles revisions' ) }
+			aria-label={ __( 'Global styles revisions list' ) }
 			role="group"
 		>
 			{ userRevisions.map( ( revision, index ) => {
@@ -178,6 +158,7 @@ function RevisionsButtons( {
 							}
 						) }
 						key={ id }
+						aria-current={ isSelected }
 					>
 						<Button
 							className="edit-site-global-styles-screen-revisions__revision-button"
@@ -208,9 +189,15 @@ function RevisionsButtons( {
 											{ displayDate }
 										</time>
 									) }
+									<span className="edit-site-global-styles-screen-revisions__meta">
+										<img
+											alt={ authorDisplayName }
+											src={ authorAvatar }
+										/>
+										{ authorDisplayName }
+									</span>
 									{ isSelected && (
 										<ChangesSummary
-											blockNames={ blockNames }
 											revision={ revision }
 											previousRevision={
 												index < userRevisions.length
@@ -219,16 +206,28 @@ function RevisionsButtons( {
 											}
 										/>
 									) }
-									<span className="edit-site-global-styles-screen-revisions__meta">
-										<img
-											alt={ authorDisplayName }
-											src={ authorAvatar }
-										/>
-										{ authorDisplayName }
-									</span>
 								</span>
 							) }
 						</Button>
+						{ isSelected &&
+							( areStylesEqual ? (
+								<p className="edit-site-global-styles-screen-revisions__applied-text">
+									{ __(
+										'These styles are already applied to your site.'
+									) }
+								</p>
+							) : (
+								<Button
+									disabled={ areStylesEqual }
+									variant="primary"
+									className="edit-site-global-styles-screen-revisions__apply-button"
+									onClick={ onApplyRevision }
+								>
+									{ isReset
+										? __( 'Reset to defaults' )
+										: __( 'Apply' ) }
+								</Button>
+							) ) }
 					</li>
 				);
 			} ) }