@wordpress/editor 14.45.0 → 14.45.2-next.v.202605131006.0

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

@@ -45,8 +45,19 @@ function stringifyValue( value ) {
 }
 
 /**
- * Calculate text similarity using word diff (semantically meaningful).
- * Returns ratio of unchanged words to total words.
+ * Calculate text similarity using word-set overlap.
+ *
+ * Uses a variant of the Jaccard index (https://en.wikipedia.org/wiki/Jaccard_index)
+ * called the overlap coefficient (https://en.wikipedia.org/wiki/Overlap_coefficient)
+ * where we divide by the larger set size rather than the union. This ensures that
+ * a small edit to a long paragraph scores high — the few changed words don't
+ * dilute the score.
+ *
+ * This replaces the previous diffWords-based similarity which was O(n*m) per pair.
+ * The word-set approach is O(n) where n is the number of words.
+ *
+ * Words are extracted using Intl.Segmenter for proper multilingual support
+ * (CJK, Thai, etc.) rather than splitting on whitespace.
  *
  * @param {string} text1 First text to compare.
  * @param {string} text2 Second text to compare.
@@ -60,17 +71,53 @@ function textSimilarity( text1, text2 ) {
 		return 0;
 	}
 
-	const changes = diffWords( text1, text2 );
-	const unchanged = changes
-		.filter( ( c ) => ! c.added && ! c.removed )
-		.reduce( ( sum, c ) => sum + c.value.length, 0 );
-	const total = Math.max( text1.length, text2.length );
-	return total > 0 ? unchanged / total : 0;
+	const segmenter = new Intl.Segmenter( undefined, {
+		granularity: 'word',
+	} );
+	// Safari's Intl.Segmenter returns isWordLike: false for numeric segments,
+	// so fall back to a Unicode-aware regex for letters and numbers.
+	const wordLikeRegex = /[\p{L}\p{N}]/u;
+	const getWords = ( text ) => {
+		const words = [];
+		for ( const { segment, isWordLike } of segmenter.segment( text ) ) {
+			if ( isWordLike || wordLikeRegex.test( segment ) ) {
+				words.push( segment );
+			}
+		}
+		return words;
+	};
+	const words1 = getWords( text1 );
+	const words2 = getWords( text2 );
+
+	if ( words1.length === 0 && words2.length === 0 ) {
+		return 1;
+	}
+
+	const set1 = new Set( words1 );
+	let intersection = 0;
+	for ( const word of words2 ) {
+		if ( set1.has( word ) ) {
+			intersection++;
+		}
+	}
+
+	const total = Math.max( words1.length, words2.length );
+	return total > 0 ? intersection / total : 0;
 }
 
 /**
  * Post-process diff result to pair similar removed/added blocks as modifications.
- * This catches modifications that LCS missed due to content changes.
+ *
+ * After LCS diffing, a block whose content changed appears as a separate "removed"
+ * and "added" entry (since the full block signature differs). This function detects
+ * such pairs and merges them into a single "modified" block with inline diff.
+ *
+ * Two pairing strategies are used:
+ * 1. When exactly one block of a given type was removed and one was added,
+ *    they are paired directly — no ambiguity, no similarity check needed.
+ * 2. When multiple candidates exist, textSimilarity (overlap coefficient) is
+ *    used to find the best match. Blocks must share at least 50% of their
+ *    words to be paired, preventing unrelated paragraphs from being merged.
  *
  * @param {Array} blocks Raw blocks with diff status.
  * @return {Array} Blocks with similar pairs converted to modifications.
@@ -94,62 +141,139 @@ function pairSimilarBlocks( blocks ) {
 		return blocks;
 	}
 
-	const pairedRemoved = new Set(); // Indices of removed blocks that were paired.
-	const modifications = new Map(); // Map from added block index to modified block.
-	const SIMILARITY_THRESHOLD = 0.3;
+	const pairedRemoved = new Set(); // Indices of removed blocks filtered out.
+	const pairedAdded = new Set(); // Indices of added blocks filtered out.
+	const modifications = new Map(); // Index → modified block.
+	const SIMILARITY_THRESHOLD = 0.5;
+
+	// Group candidates by block name for efficient lookup.
+	const addedByName = new Map();
+	for ( const add of added ) {
+		const name = add.block.blockName;
+		if ( ! addedByName.has( name ) ) {
+			addedByName.set( name, [] );
+		}
+		addedByName.get( name ).push( add );
+	}
+	const removedByName = new Map();
+	for ( const rem of removed ) {
+		const name = rem.block.blockName;
+		if ( ! removedByName.has( name ) ) {
+			removedByName.set( name, [] );
+		}
+		removedByName.get( name ).push( rem );
+	}
 
 	// For each removed block, find best matching added block.
+	// Track the highest added index paired so far — new pairings must
+	// not go backwards, or the removed/added text order would break.
+	let maxPairedAddedIndex = -1;
+
 	for ( const rem of removed ) {
-		let bestMatch = null;
-		let bestScore = 0;
+		const candidates = addedByName.get( rem.block.blockName ) || [];
+		const sameNameRemoved = removedByName.get( rem.block.blockName ) || [];
+		const unpaired = candidates.filter(
+			( add ) =>
+				! modifications.has( add.index ) &&
+				add.index > maxPairedAddedIndex
+		);
 
-		for ( const add of added ) {
-			if ( modifications.has( add.index ) ) {
-				continue;
-			}
-			if ( add.block.blockName !== rem.block.blockName ) {
-				continue;
-			}
+		if ( unpaired.length === 0 ) {
+			continue;
+		}
 
-			const score = textSimilarity(
-				rem.block.innerHTML || '',
-				add.block.innerHTML || ''
-			);
-			// If content is identical (score=1), only pair if attrs differ.
-			// Otherwise identical blocks are just position swaps, not modifications.
+		let bestMatch = null;
+
+		// If there's exactly one removed and one added of this type,
+		// pair them directly — no ambiguity, no similarity check needed.
+		if ( sameNameRemoved.length === 1 && unpaired.length === 1 ) {
+			const add = unpaired[ 0 ];
 			const attrsMatch =
 				JSON.stringify( rem.block.attrs ) ===
 				JSON.stringify( add.block.attrs );
-			if (
-				score > bestScore &&
-				score > SIMILARITY_THRESHOLD &&
-				( score < 1 || ! attrsMatch )
-			) {
-				bestScore = score;
+			// Only skip pairing if both content and attrs are identical
+			// (position swap, not a modification).
+			const contentMatch =
+				( rem.block.innerHTML || '' ) === ( add.block.innerHTML || '' );
+			if ( ! contentMatch || ! attrsMatch ) {
 				bestMatch = add;
 			}
+		} else {
+			// Multiple candidates — use similarity to find best match.
+			let bestScore = 0;
+			for ( const add of unpaired ) {
+				const score = textSimilarity(
+					rem.block.innerHTML || '',
+					add.block.innerHTML || ''
+				);
+				// Skip identical blocks (score=1 with same attrs) — those
+				// are position swaps, not modifications. They should show
+				// as separate removed + added, not as a no-op "modified".
+				const attrsMatch =
+					JSON.stringify( rem.block.attrs ) ===
+					JSON.stringify( add.block.attrs );
+				if (
+					score > bestScore &&
+					score > SIMILARITY_THRESHOLD &&
+					( score < 1 || ! attrsMatch )
+				) {
+					bestScore = score;
+					bestMatch = add;
+				}
+			}
 		}
 
 		if ( bestMatch ) {
-			pairedRemoved.add( rem.index );
+			maxPairedAddedIndex = bestMatch.index;
 
-			// Create modified block with previous content stored.
-			modifications.set( bestMatch.index, {
+			const modifiedBlock = {
 				...bestMatch.block,
 				__revisionDiffStatus: { status: 'modified' },
 				__previousRawBlock: rem.block,
-			} );
+			};
+
+			// Decide where to place the modified block by checking
+			// what's between the removed and added positions.
+			// If there are unpaired added blocks between them,
+			// placing at the removed position would put the modified
+			// block before content that comes before it in the
+			// current revision — so use the added position.
+			// Otherwise, use the removed position to keep the
+			// previous revision's order intact.
+			const lo = Math.min( rem.index, bestMatch.index );
+			const hi = Math.max( rem.index, bestMatch.index );
+			let hasAddedBetween = false;
+			for ( let i = lo + 1; i < hi; i++ ) {
+				if (
+					blocks[ i ].__revisionDiffStatus?.status === 'added' &&
+					! pairedAdded.has( i )
+				) {
+					hasAddedBetween = true;
+					break;
+				}
+			}
+
+			if ( hasAddedBetween ) {
+				// Use the added position — don't jump before
+				// current-revision content.
+				modifications.set( bestMatch.index, modifiedBlock );
+				pairedRemoved.add( rem.index );
+			} else {
+				// Use the removed position — keep the previous
+				// revision's reading order.
+				modifications.set( rem.index, modifiedBlock );
+				pairedAdded.add( bestMatch.index );
+			}
 		}
 	}
 
-	// Rebuild result: filter out paired removed, replace paired added with modified.
+	// Rebuild result: replace modification targets, filter out
+	// their paired counterparts.
 	return blocks
 		.map( ( block, index ) => {
-			// Skip paired removed blocks.
-			if ( pairedRemoved.has( index ) ) {
+			if ( pairedRemoved.has( index ) || pairedAdded.has( index ) ) {
 				return null;
 			}
-			// Replace paired added blocks with modified version.
 			if ( modifications.has( index ) ) {
 				return modifications.get( index );
 			}

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
@@ -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>
 	);
 }
 

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

@@ -2,10 +2,13 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { RangeControl, Spinner } from '@wordpress/components';
+import { RangeControl, Spinner, Button } 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';
+import { Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -14,64 +17,61 @@ 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 _revisionKey = entityConfig?.revisionKey || 'id';
-			const query = {
-				per_page: -1,
-				context: 'edit',
-				orderby: 'date',
-				order: 'asc',
-				_fields: [
-					...new Set( [
-						'id',
-						'date',
-						'modified',
-						'author',
-						'meta',
-						'title.raw',
-						'excerpt.raw',
-						'content.raw',
-						_revisionKey,
-					] ),
-				].join(),
-			};
-			return {
-				revisions: getRevisions( 'postType', postType, postId, query ),
-				isLoading: isResolving( 'getRevisions', [
-					'postType',
-					postType,
-					postId,
-					query,
-				] ),
-				currentRevisionId: unlock(
-					select( editorStore )
-				).getCurrentRevisionId(),
-				revisionKey: _revisionKey,
-			};
-		},
-		[]
+	const {
+		revisions: rawRevisions,
+		perPage,
+		currentRevisionId,
+		revisionKey,
+		revisionPage,
+		totalRevisions,
+	} = useSelect( ( select ) => {
+		const {
+			getCurrentRevisionId,
+			getRevisionPage,
+			getPageRevisions,
+			getRevisionsPerPage,
+		} = unlock( select( editorStore ) );
+
+		const postType = select( editorStore ).getCurrentPostType();
+		if ( ! postType ) {
+			return {};
+		}
+
+		const entityConfig = select( coreStore ).getEntityConfig(
+			'postType',
+			postType
+		);
+		const _revisionKey = entityConfig?.revisionKey || 'id';
+		const _revisionPage = getRevisionPage();
+
+		return {
+			revisions: getPageRevisions( _revisionPage ),
+			perPage: getRevisionsPerPage(),
+			currentRevisionId: getCurrentRevisionId(),
+			revisionKey: _revisionKey,
+			revisionPage: _revisionPage,
+			totalRevisions:
+				select( editorStore ).getCurrentPostRevisionsCount(),
+		};
+	}, [] );
+
+	const { setCurrentRevisionId, setRevisionPage } = unlock(
+		useDispatch( editorStore )
 	);
 
-	const { setCurrentRevisionId } = 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
@@ -94,11 +94,13 @@ function RevisionsSlider() {
 		return dateI18n( dateSettings.formats.datetime, revision.date );
 	};
 
-	if ( isLoading ) {
+	const showPagination = totalPages > 1;
+
+	if ( isLoading && ! showPagination ) {
 		return <Spinner />;
 	}
 
-	if ( ! revisions?.length ) {
+	if ( ! isLoading && ! revisions?.length ) {
 		return (
 			<span className="editor-revisions-header__no-revisions">
 				{ __( 'No revisions found.' ) }
@@ -106,7 +108,7 @@ function RevisionsSlider() {
 		);
 	}
 
-	if ( revisions?.length === 1 ) {
+	if ( totalRevisions <= 1 ) {
 		return (
 			<span className="editor-revisions-header__no-revisions">
 				{ __( 'Only one revision found.' ) }
@@ -114,21 +116,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
-			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 }
-		/>
+		<Stack direction="row" gap="sm" align="center" style={ { flex: 1 } }>
+			<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
+			/>
+		</Stack>
 	);
 }
 

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

@@ -35,7 +35,7 @@
 .revision-diff-markers {
 	position: relative;
 	flex-shrink: 0;
-	width: 12px;
+	width: 24px;
 	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 {