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

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,14 +3,11 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	Button,
 	__experimentalUseNavigator as useNavigator,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Spinner,
-	__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,
@@ -23,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 [
@@ -105,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 =
@@ -135,10 +133,13 @@ function ScreenRevisions() {
 		}
 	}, [ shouldSelectFirstItem, firstRevision ] );
 
-	// Only display load button if there is a revision to load and it is different from the current editor styles.
+	// 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,76 +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' ) }
 					/>
-					<div className="edit-site-global-styles-screen-revisions">
-						<RevisionsButtons
-							onChange={ selectRevision }
-							selectedRevisionId={ currentlySelectedRevisionId }
-							userRevisions={ revisions }
-						/>
-						{ 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>
-					) }
-				</>
-			) : (
-				<Spacer marginX={ 4 } data-testid="global-styles-no-revisions">
-					{
-						// Adding an existing translation here in case these changes are shipped to WordPress 6.3.
-						// Later we could update to something better, e.g., "There are currently no style revisions.".
-						__( 'No results found.' )
+				) ) }
+			<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>
+			) }
+			{ isLoadingRevisionWithUnsavedChanges && (
+				<ConfirmDialog
+					isOpen={ isLoadingRevisionWithUnsavedChanges }
+					confirmButtonText={ __( 'Apply' ) }
+					onConfirm={ () =>
+						restoreRevision( currentlySelectedRevision )
 					}
-				</Spacer>
+					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

@@ -11,23 +11,50 @@ 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 { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
 
 const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;
+const { getGlobalStylesChanges } = unlock( blockEditorPrivateApis );
+
+function ChangesSummary( { revision, previousRevision } ) {
+	const changes = getGlobalStylesChanges( revision, previousRevision, {
+		maxResults: 7,
+	} );
+	const changesLength = changes.length;
+
+	if ( ! changesLength ) {
+		return null;
+	}
+
+	return (
+		<span
+			data-testid="global-styles-revision-changes"
+			className="edit-site-global-styles-screen-revisions__changes"
+		>
+			{ changes.join( ', ' ) }
+		</span>
+	);
+}
 
 /**
  * Returns a button label for the revision.
  *
  * @param {string|number} id                    A revision object.
- * @param {boolean}       isLatest              Whether the revision is the most current.
  * @param {string}        authorDisplayName     Author name.
  * @param {string}        formattedModifiedDate Revision modified date formatted.
+ * @param {boolean}       areStylesEqual        Whether the revision matches the current editor styles.
  * @return {string} Translated label.
  */
 function getRevisionLabel(
 	id,
-	isLatest,
 	authorDisplayName,
-	formattedModifiedDate
+	formattedModifiedDate,
+	areStylesEqual
 ) {
 	if ( 'parent' === id ) {
 		return __( 'Reset the styles to the theme defaults' );
@@ -35,21 +62,23 @@ function getRevisionLabel(
 
 	if ( 'unsaved' === id ) {
 		return sprintf(
-			/* translators: %s author display name */
+			/* translators: %s: author display name */
 			__( 'Unsaved changes by %s' ),
 			authorDisplayName
 		);
 	}
 
-	return isLatest
+	return areStylesEqual
 		? sprintf(
-				/* translators: %1$s author display name, %2$s: revision creation date */
-				__( 'Changes saved by %1$s on %2$s (current)' ),
+				// translators: %1$s: author display name, %2$s: revision creation date.
+				__(
+					'Changes saved by %1$s on %2$s. This revision matches current editor styles.'
+				),
 				authorDisplayName,
 				formattedModifiedDate
 		  )
 		: sprintf(
-				/* translators: %1$s author display name, %2$s: revision creation date */
+				// translators: %1$s: author display name, %2$s: revision creation date.
 				__( 'Changes saved by %1$s on %2$s' ),
 				authorDisplayName,
 				formattedModifiedDate
@@ -67,7 +96,13 @@ function getRevisionLabel(
  * @param    {props}         Component          props.
  * @return {JSX.Element} The modal component.
  */
-function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
+function RevisionsButtons( {
+	userRevisions,
+	selectedRevisionId,
+	onChange,
+	canApplyRevision,
+	onApplyRevision,
+} ) {
 	const { currentThemeName, currentUser } = useSelect( ( select ) => {
 		const { getCurrentTheme, getCurrentUser } = select( coreStore );
 		const currentTheme = getCurrentTheme();
@@ -78,36 +113,38 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 		};
 	}, [] );
 	const dateNowInMs = getDate().getTime();
-	const { date: dateFormat, datetimeAbbreviated } = getSettings().formats;
+	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 ) => {
-				const { id, isLatest, author, modified } = revision;
+				const { id, author, modified } = revision;
 				const isUnsaved = 'unsaved' === id;
 				// Unsaved changes are created by the current user.
 				const revisionAuthor = isUnsaved ? currentUser : author;
 				const authorDisplayName = revisionAuthor?.name || __( 'User' );
 				const authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ];
+				const isFirstItem = index === 0;
 				const isSelected = selectedRevisionId
 					? selectedRevisionId === id
-					: index === 0;
+					: isFirstItem;
+				const areStylesEqual = ! canApplyRevision && isSelected;
 				const isReset = 'parent' === id;
 				const modifiedDate = getDate( modified );
 				const displayDate =
 					modified &&
 					dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS
-						? dateI18n( dateFormat, modifiedDate )
+						? dateI18n( datetimeAbbreviated, modifiedDate )
 						: humanTimeDiff( modified );
 				const revisionLabel = getRevisionLabel(
 					id,
-					isLatest,
 					authorDisplayName,
-					dateI18n( datetimeAbbreviated, modifiedDate )
+					dateI18n( datetimeAbbreviated, modifiedDate ),
+					areStylesEqual
 				);
 
 				return (
@@ -116,10 +153,12 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 							'edit-site-global-styles-screen-revisions__revision-item',
 							{
 								'is-selected': isSelected,
+								'is-active': areStylesEqual,
 								'is-reset': isReset,
 							}
 						) }
 						key={ id }
+						aria-current={ isSelected }
 					>
 						<Button
 							className="edit-site-global-styles-screen-revisions__revision-button"
@@ -127,7 +166,7 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 							onClick={ () => {
 								onChange( revision );
 							} }
-							label={ revisionLabel }
+							aria-label={ revisionLabel }
 						>
 							{ isReset ? (
 								<span className="edit-site-global-styles-screen-revisions__description">
@@ -157,9 +196,38 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 										/>
 										{ authorDisplayName }
 									</span>
+									{ isSelected && (
+										<ChangesSummary
+											revision={ revision }
+											previousRevision={
+												index < userRevisions.length
+													? userRevisions[ index + 1 ]
+													: {}
+											}
+										/>
+									) }
 								</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>
 				);
 			} ) }