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

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-header.js

@@ -2,12 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
-import { store as preferencesStore } from '@wordpress/preferences';
-import { PinnedItems } from '@wordpress/interface';
-import { __, _x } from '@wordpress/i18n';
-import { seen } from '@wordpress/icons';
+import { store as interfaceStore } from '@wordpress/interface';
+import { __, _x, isRTL } from '@wordpress/i18n';
+import { drawerLeft, drawerRight, seen } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,14 +13,9 @@ import { seen } from '@wordpress/icons';
 import HeaderSkeleton from '../header/header-skeleton';
 import MoreMenu from '../more-menu';
 import PostPreviewButton from '../post-preview-button';
-import PreviewDropdown from '../preview-dropdown';
 import RevisionsSlider from './revisions-slider';
 import { store as editorStore } from '../../store';
-import {
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_POST_TYPE,
-	NAVIGATION_POST_TYPE,
-} from '../../store/constants';
+import { sidebars } from '../sidebar/constants';
 import { unlock } from '../../lock-unlock';
 
 /**
@@ -34,32 +27,24 @@ import { unlock } from '../../lock-unlock';
  * @return {React.JSX.Element} The revisions header component.
  */
 function RevisionsHeader( { showDiff, onToggleDiff } ) {
-	const isWideViewport = useViewportMatch( 'large' );
-	const { postType, showIconLabels, currentRevisionId } = useSelect(
-		( select ) => {
-			const { get: getPreference } = select( preferencesStore );
-			const { getCurrentPostType } = select( editorStore );
-
-			return {
-				postType: getCurrentPostType(),
-				showIconLabels: getPreference( 'core', 'showIconLabels' ),
-				currentRevisionId: unlock(
-					select( editorStore )
-				).getCurrentRevisionId(),
-			};
-		},
-		[]
-	);
+	const { currentRevisionId, sidebarIsOpened } = useSelect( ( select ) => {
+		return {
+			currentRevisionId: unlock(
+				select( editorStore )
+			).getCurrentRevisionId(),
+			sidebarIsOpened:
+				!! select( interfaceStore ).getActiveComplementaryArea(
+					'core'
+				),
+		};
+	}, [] );
 
 	const { setCurrentRevisionId, restoreRevision } = unlock(
 		useDispatch( editorStore )
 	);
 
-	const disablePreviewOption = [
-		NAVIGATION_POST_TYPE,
-		TEMPLATE_PART_POST_TYPE,
-		PATTERN_POST_TYPE,
-	].includes( postType );
+	const { enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
 
 	const canRestore = !! currentRevisionId;
 
@@ -85,13 +70,26 @@ function RevisionsHeader( { showDiff, onToggleDiff } ) {
 			center={ <RevisionsSlider /> }
 			settings={
 				<>
-					<PreviewDropdown disabled={ disablePreviewOption } />
-
 					<PostPreviewButton className="editor-header__post-preview-button" />
 
-					{ ( isWideViewport || ! showIconLabels ) && (
-						<PinnedItems.Slot scope="core" />
-					) }
+					<Button
+						__next40pxDefaultSize
+						icon={ isRTL() ? drawerLeft : drawerRight }
+						label={ _x( 'Settings', 'panel button label' ) }
+						isPressed={ sidebarIsOpened }
+						aria-expanded={ sidebarIsOpened }
+						onClick={ () => {
+							if ( sidebarIsOpened ) {
+								disableComplementaryArea( 'core' );
+							} else {
+								enableComplementaryArea(
+									'core',
+									sidebars.document
+								);
+							}
+						} }
+						size="compact"
+					/>
 
 					<Button
 						__next40pxDefaultSize

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,78 +21,90 @@ 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 } = useSelect(
-		( select ) => {
-			const { getCurrentPostId, getCurrentPostType } =
-				select( editorStore );
-			const { getRevisions, isResolving } = select( coreStore );
-
-			const postId = getCurrentPostId();
-			const postType = getCurrentPostType();
-
-			if ( ! postId || ! postType ) {
-				return {};
-			}
-
-			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(),
-			};
-		},
-		[]
-	);
+	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(
-		( r ) => r.id === currentRevisionId
+		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.id );
+			setCurrentRevisionId( revision[ revisionKey ] );
 		}
 	};
 
 	// 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.' ) }
@@ -94,7 +112,7 @@ function RevisionsSlider() {
 		);
 	}
 
-	if ( sortedRevisions.length === 1 ) {
+	if ( totalRevisions <= 1 ) {
 		return (
 			<span className="editor-revisions-header__no-revisions">
 				{ __( 'Only one revision found.' ) }
@@ -102,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 {