@wordpress/editor 14.40.2-next.v.202602271551.0 → 14.40.2

package/src/components/post-revisions-preview/diff-markers.js

@@ -15,6 +15,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { Tooltip } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -32,10 +33,10 @@ const { useBlockElementRef } = unlock( blockEditorPrivateApis );
 function collectDiffBlocks( blocks ) {
 	const result = [];
 	for ( const block of blocks ) {
-		if ( block.__revisionDiffStatus ) {
+		if ( block.__revisionDiffStatus?.status ) {
 			result.push( {
 				clientId: block.clientId,
-				status: block.__revisionDiffStatus,
+				status: block.__revisionDiffStatus.status,
 			} );
 		}
 		if ( block.innerBlocks?.length ) {
@@ -97,15 +98,17 @@ function DiffMarkerButton( { clientId, status, subscribe } ) {
 	}
 
 	return (
-		<button
-			className={ `revision-diff-marker is-${ status }` }
-			style={ {
-				top: `${ position.top }%`,
-				height: `${ Math.max( position.height, 0.5 ) }%`,
-			} }
-			onClick={ () => blockRef.current?.focus() }
-			aria-label={ STATUS_LABELS[ status ] }
-		/>
+		<Tooltip text={ STATUS_LABELS[ status ] }>
+			<button
+				className={ `revision-diff-marker is-${ status }` }
+				style={ {
+					top: `${ position.top }%`,
+					height: `${ Math.max( position.height, 0.5 ) }%`,
+				} }
+				onClick={ () => blockRef.current?.focus() }
+				aria-label={ STATUS_LABELS[ status ] }
+			/>
+		</Tooltip>
 	);
 }
 
@@ -145,7 +148,7 @@ export function useDiffMarkers() {
 			key="diff-markers"
 			className="revision-diff-markers"
 			role="navigation"
-			aria-label={ __( 'Diff markers' ) }
+			aria-label={ __( 'Document changes' ) }
 		>
 			{ isMounted &&
 				diffBlocks.map( ( { clientId, status } ) => (

package/src/components/post-revisions-preview/revisions-canvas.js

@@ -7,13 +7,9 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { Spinner } from '@wordpress/components';
-import {
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { createBlock, parse } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { useEffect, useMemo, useRef } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 
 /**
@@ -27,12 +23,8 @@ import {
 	unregisterDiffFormatTypes,
 } from './diff-format-types';
 import { useDiffMarkers } from './diff-markers';
-import { preserveClientIds } from './preserve-client-ids';
-import { diffRevisionContent } from './block-diff';
 
-const { ExperimentalBlockEditorProvider, usePrivateStyleOverride } = unlock(
-	blockEditorPrivateApis
-);
+const { usePrivateStyleOverride } = unlock( blockEditorPrivateApis );
 
 // SVG filter for removed blocks: grayscale + red tint
 const REVISION_REMOVED_FILTER_SVG = `
@@ -66,14 +58,20 @@ const REVISION_REMOVED_FILTER_SVG = `
 const REVISION_DIFF_STYLES = `
 	.is-revision-added {
 		box-shadow: inset 0 0 0 9999px color-mix(in srgb, currentColor 5%, #00a32a 15%), 0 0 0 4px color-mix(in srgb, currentColor 5%, #00a32a 15%);
+		outline: 3px solid #00a32a;
+		outline-offset: 2px;
 	}
 	.is-revision-removed,
 	.revision-diff-removed {
 		text-decoration: line-through;
 		filter: url(#revision-removed-filter);
 	}
+	.is-revision-removed {
+		outline: 3px dashed #d63638;
+		outline-offset: 2px;
+	}
 	.is-revision-modified {
-		outline: 2px solid color-mix(in srgb, currentColor 30%, #dba617 70%) !important;
+		outline: 3px dotted #9a7000 !important;
 		outline-offset: 2px;
 	}
 	.revision-diff-added {
@@ -103,7 +101,7 @@ const REVISION_DIFF_STYLES = `
 function withRevisionDiffClasses( BlockListBlock ) {
 	return ( props ) => {
 		const { block, className } = props;
-		const diffStatus = block?.__revisionDiffStatus;
+		const diffStatus = block?.__revisionDiffStatus?.status;
 
 		const enhancedClassName = clsx( className, {
 			'is-revision-added': diffStatus === 'added',
@@ -150,12 +148,11 @@ function CanvasContent( { showDiff } ) {
 
 /**
  * Canvas component that renders a post revision in read-only mode.
+ * Block preparation and settings are handled by the parent EditorProvider.
  *
- * @param {Object}  props          Component props.
- * @param {boolean} props.showDiff Whether to show diff highlighting.
  * @return {React.JSX.Element} The revisions canvas component.
  */
-export default function RevisionsCanvas( { showDiff } ) {
+export default function RevisionsCanvas() {
 	useEffect( () => {
 		registerDiffFormatTypes();
 		return () => {
@@ -163,83 +160,23 @@ export default function RevisionsCanvas( { showDiff } ) {
 		};
 	}, [] );
 
-	const { revision, previousRevision, postType, blockEditorSettings } =
-		useSelect( ( select ) => {
-			const {
-				getCurrentRevision,
-				getPreviousRevision,
-				getCurrentPostType,
-			} = unlock( select( editorStore ) );
-			return {
-				revision: getCurrentRevision(),
-				previousRevision: getPreviousRevision(),
-				postType: getCurrentPostType(),
-				blockEditorSettings: select( blockEditorStore ).getSettings(),
-			};
-		}, [] );
-
-	// Track previously rendered blocks to preserve clientIds between renders.
-	const previousBlocksRef = useRef( [] );
-
-	const blocks = useMemo( () => {
-		const currentContent = revision?.content?.raw ?? '';
-
-		let parsedBlocks;
-		if ( showDiff ) {
-			const previousContent = previousRevision?.content?.raw || '';
-			// diffRevisionContent handles both normal diffing and the case
-			// where there's no previous revision (oldest revision shows all as added).
-			parsedBlocks = diffRevisionContent(
-				currentContent,
-				previousContent
-			);
-		} else {
-			// When diff is disabled, just parse the current revision content.
-			parsedBlocks = parse( currentContent );
-		}
-
-		if ( postType === 'wp_navigation' ) {
-			parsedBlocks = [
-				createBlock(
-					'core/navigation',
-					{ templateLock: false },
-					parsedBlocks
-				),
-			];
-		}
-
-		// Preserve clientIds from previous render to prevent React unmount/remount.
-		const blocksWithStableIds = preserveClientIds(
-			parsedBlocks,
-			previousBlocksRef.current
+	const { revision, showDiff } = useSelect( ( select ) => {
+		const { getCurrentRevision, isShowingRevisionDiff } = unlock(
+			select( editorStore )
 		);
-
-		// Update ref for next render.
-		previousBlocksRef.current = blocksWithStableIds;
-
-		return blocksWithStableIds;
-	}, [
-		revision?.content?.raw,
-		previousRevision?.content?.raw,
-		postType,
-		showDiff,
-	] );
-
-	const settings = useMemo(
-		() => ( {
-			...blockEditorSettings,
-			isPreviewMode: true,
-		} ),
-		[ blockEditorSettings ]
-	);
+		return {
+			revision: getCurrentRevision(),
+			showDiff: isShowingRevisionDiff(),
+		};
+	}, [] );
 
 	return revision ? (
-		<ExperimentalBlockEditorProvider value={ blocks } settings={ settings }>
+		<>
 			<DiffStyleOverrides showDiff={ showDiff } />
 			<div className="editor-revisions-canvas__content">
 				<CanvasContent showDiff={ showDiff } />
 			</div>
-		</ExperimentalBlockEditorProvider>
+		</>
 	) : (
 		<div className="editor-revisions-canvas__loading">
 			<Spinner />

package/src/components/post-revisions-preview/revisions-slider.js

@@ -1,12 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { RangeControl, Spinner } from '@wordpress/components';
+import {
+	RangeControl,
+	Spinner,
+	Button,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+import { useMemo } from '@wordpress/element';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,61 +21,68 @@ import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 /**
- * Slider component for navigating revisions.
+ * Slider component for navigating revisions with pagination.
  *
  * @return {React.JSX.Element} The revisions slider component.
  */
 function RevisionsSlider() {
-	const { revisions, isLoading, currentRevisionId, revisionKey } = useSelect(
-		( select ) => {
-			const { getCurrentPostId, getCurrentPostType } =
-				select( editorStore );
-			const { getRevisions, isResolving, getEntityConfig } =
-				select( coreStore );
-
-			const postId = getCurrentPostId();
-			const postType = getCurrentPostType();
-
-			if ( ! postId || ! postType ) {
-				return {};
-			}
-
-			const entityConfig = getEntityConfig( 'postType', postType );
-			const query = { per_page: -1, context: 'edit' };
-			return {
-				revisions: getRevisions( 'postType', postType, postId, query ),
-				isLoading: isResolving( 'getRevisions', [
-					'postType',
-					postType,
-					postId,
-					query,
-				] ),
-				currentRevisionId: unlock(
-					select( editorStore )
-				).getCurrentRevisionId(),
-				revisionKey: entityConfig?.revisionKey || 'id',
-			};
-		},
-		[]
-	);
+	const {
+		revisions: rawRevisions,
+		perPage,
+		currentRevisionId,
+		revisionKey,
+		revisionPage,
+		totalRevisions,
+	} = useSelect( ( select ) => {
+		const {
+			getCurrentRevisionId,
+			getRevisionPage,
+			getPageRevisions,
+			getRevisionsPerPage,
+		} = unlock( select( editorStore ) );
 
-	const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
+		const postType = select( editorStore ).getCurrentPostType();
+		if ( ! postType ) {
+			return {};
+		}
 
-	const sortedRevisions = useMemo( () => {
-		return (
-			revisions
-				?.slice()
-				.sort( ( a, b ) => new Date( a.date ) - new Date( b.date ) ) ??
-			[]
+		const entityConfig = select( coreStore ).getEntityConfig(
+			'postType',
+			postType
 		);
-	}, [ revisions ] );
+		const _revisionKey = entityConfig?.revisionKey || 'id';
+		const _revisionPage = getRevisionPage();
 
-	const selectedIndex = sortedRevisions.findIndex(
+		return {
+			revisions: getPageRevisions( _revisionPage ),
+			perPage: getRevisionsPerPage(),
+			currentRevisionId: getCurrentRevisionId(),
+			revisionKey: _revisionKey,
+			revisionPage: _revisionPage,
+			totalRevisions:
+				select( editorStore ).getCurrentPostRevisionsCount(),
+		};
+	}, [] );
+
+	const { setCurrentRevisionId, setRevisionPage } = unlock(
+		useDispatch( editorStore )
+	);
+
+	const isLoading = ! rawRevisions;
+	const totalPages = Math.ceil( totalRevisions / perPage ) || 1;
+
+	// Reverse desc→asc so the slider reads oldest (left) → newest (right).
+	const revisions = useMemo(
+		() => rawRevisions && [ ...rawRevisions ].reverse(),
+		[ rawRevisions ]
+	);
+
+	const selectedIndex = revisions?.findIndex(
 		( r ) => r[ revisionKey ] === currentRevisionId
 	);
 
 	const handleSliderChange = ( index ) => {
-		const revision = sortedRevisions[ index ];
+		const revision = revisions?.[ index ];
 		if ( revision ) {
 			setCurrentRevisionId( revision[ revisionKey ] );
 		}
@@ -78,18 +91,20 @@ function RevisionsSlider() {
 	// Format date for tooltip.
 	const dateSettings = getDateSettings();
 	const renderTooltipContent = ( index ) => {
-		const revision = sortedRevisions[ index ];
+		const revision = revisions?.[ index ];
 		if ( ! revision ) {
 			return index;
 		}
 		return dateI18n( dateSettings.formats.datetime, revision.date );
 	};
 
-	if ( isLoading ) {
+	const showPagination = totalPages > 1;
+
+	if ( isLoading && ! showPagination ) {
 		return <Spinner />;
 	}
 
-	if ( ! sortedRevisions.length ) {
+	if ( ! isLoading && ! revisions?.length ) {
 		return (
 			<span className="editor-revisions-header__no-revisions">
 				{ __( 'No revisions found.' ) }
@@ -97,7 +112,7 @@ function RevisionsSlider() {
 		);
 	}
 
-	if ( sortedRevisions.length === 1 ) {
+	if ( totalRevisions <= 1 ) {
 		return (
 			<span className="editor-revisions-header__no-revisions">
 				{ __( 'Only one revision found.' ) }
@@ -105,20 +120,78 @@ function RevisionsSlider() {
 		);
 	}
 
+	const getPageRangeLabel = ( page ) => {
+		const end = totalRevisions - ( page - 1 ) * perPage;
+		const start = Math.max( 1, end - perPage + 1 );
+		return sprintf(
+			/* translators: 1: first revision number, 2: last revision number */
+			__( 'Revisions %1$s–%2$s' ),
+			start,
+			end
+		);
+	};
+
+	const sliderOrSpinner =
+		isLoading || selectedIndex === -1 ? (
+			<Spinner />
+		) : (
+			<RangeControl
+				__next40pxDefaultSize
+				aria-valuetext={ renderTooltipContent( selectedIndex ) }
+				className="editor-revisions-header__slider"
+				hideLabelFromVision
+				label={ __( 'Revision' ) }
+				max={ revisions?.length - 1 }
+				min={ 0 }
+				marks
+				onChange={ handleSliderChange }
+				renderTooltipContent={ renderTooltipContent }
+				value={ selectedIndex }
+				withInputField={ false }
+			/>
+		);
+
+	if ( ! showPagination ) {
+		return sliderOrSpinner;
+	}
+
 	return (
-		<RangeControl
-			__next40pxDefaultSize
-			className="editor-revisions-header__slider"
-			hideLabelFromVision
-			label={ __( 'Revision' ) }
-			max={ sortedRevisions.length - 1 }
-			min={ 0 }
-			marks
-			onChange={ handleSliderChange }
-			renderTooltipContent={ renderTooltipContent }
-			value={ selectedIndex }
-			withInputField={ false }
-		/>
+		<HStack spacing={ 2 } expanded wrap={ false }>
+			<Button
+				icon={ chevronLeft }
+				label={
+					revisionPage < totalPages
+						? getPageRangeLabel( revisionPage + 1 )
+						: __( 'No older revisions' )
+				}
+				onClick={ () => setRevisionPage( revisionPage + 1 ) }
+				disabled={ isLoading || revisionPage >= totalPages }
+				size="compact"
+				accessibleWhenDisabled
+			/>
+			<div
+				style={ {
+					flex: 1,
+					minWidth: 0,
+					display: 'flex',
+					justifyContent: 'center',
+				} }
+			>
+				{ sliderOrSpinner }
+			</div>
+			<Button
+				icon={ chevronRight }
+				label={
+					revisionPage > 1
+						? getPageRangeLabel( revisionPage - 1 )
+						: __( 'No newer revisions' )
+				}
+				onClick={ () => setRevisionPage( revisionPage - 1 ) }
+				disabled={ isLoading || revisionPage <= 1 }
+				size="compact"
+				accessibleWhenDisabled
+			/>
+		</HStack>
 	);
 }
 

package/src/components/post-revisions-preview/style.scss

@@ -35,7 +35,7 @@
 .revision-diff-markers {
 	position: relative;
 	flex-shrink: 0;
-	width: 12px;
+	width: max(16px, 1rem);
 	background: rgba(0, 0, 0, 0.05);
 
 	.revision-diff-marker {
@@ -52,11 +52,11 @@
 		}
 
 		&.is-removed {
-			background: #d63638;
+			background: repeating-linear-gradient(45deg, #d63638, #d63638 3px, rgba(#d63638, 0.45) 3px, rgba(#d63638, 0.45) 6px);
 		}
 
 		&.is-modified {
-			background: #dba617;
+			background: repeating-linear-gradient(-45deg, #dba617, #dba617 3px, rgba(#dba617, 0.45) 3px, rgba(#dba617, 0.45) 6px);
 		}
 
 		&:hover {