@wordpress/editor 14.45.2-next.v.202605131032.0 → 14.47.0

package/src/components/collaborators-presence/avatar/component.tsx

@@ -10,8 +10,10 @@ extend( [ a11yPlugin ] );
 /**
  * WordPress dependencies
  */
-import { Icon, Tooltip } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Tooltip } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -104,7 +106,7 @@ function Avatar( {
 			</span>
 			{ dimmed && !! statusIndicator && (
 				<span className="editor-avatar__status-indicator">
-					<Icon icon={ statusIndicator } />
+					<WCIcon icon={ statusIndicator } />
 				</span>
 			) }
 			{ showBadge && (
@@ -114,7 +116,12 @@ function Avatar( {
 	);
 
 	if ( name && ( ! showBadge || label ) ) {
-		return <Tooltip text={ name }>{ avatar }</Tooltip>;
+		return (
+			<Tooltip.Root>
+				<Tooltip.Trigger render={ avatar } />
+				<Tooltip.Popup>{ name }</Tooltip.Popup>
+			</Tooltip.Root>
+		);
 	}
 
 	return avatar;

package/src/components/collaborators-presence/avatar/test/index.tsx

@@ -2,12 +2,29 @@
  * External dependencies
  */
 import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Tooltip } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
 import Avatar from '..';
 
+/**
+ * Wraps the avatar in a `Tooltip.Provider` with `delay={ 0 }` so hover-based
+ * tooltip-presence assertions don't have to wait for the real-world delay.
+ *
+ * @param ui The avatar element (or anything else) to render.
+ */
+function renderAvatar( ui: React.ReactElement ): ReturnType< typeof render > {
+	return render( <Tooltip.Provider delay={ 0 }>{ ui }</Tooltip.Provider> );
+}
+
 /**
  * In JSDOM, `<img>` elements never fire `load` or `error` events on their
  * own. We simulate them using `fireEvent` on the `<img>` element, which we
@@ -190,12 +207,13 @@ describe( 'Avatar', () => {
 			expect( avatar ).toBeInTheDocument();
 		} );
 
-		it( 'should wrap in tooltip when label differs from name', () => {
-			render( <Avatar name="Jane Doe" label="You" variant="badge" /> );
-			const avatar = screen.getByRole( 'img', { name: 'Jane Doe' } );
-			// The Tooltip's Ariakit.TooltipAnchor makes the element
-			// focusable so the tooltip can be triggered via keyboard.
-			expect( avatar ).toHaveAttribute( 'tabindex', '0' );
+		it( 'should wrap in tooltip when label differs from name', async () => {
+			const user = userEvent.setup();
+			renderAvatar(
+				<Avatar name="Jane Doe" label="You" variant="badge" />
+			);
+			await user.hover( screen.getByRole( 'img', { name: 'Jane Doe' } ) );
+			expect( await screen.findByText( 'Jane Doe' ) ).toBeVisible();
 		} );
 	} );
 
@@ -367,23 +385,37 @@ describe( 'Avatar', () => {
 	} );
 
 	describe( 'tooltip', () => {
-		it( 'should wrap in tooltip when name is provided without badge', () => {
-			render( <Avatar name="Jane Doe" /> );
-			const avatar = screen.getByRole( 'img', { name: 'Jane Doe' } );
-			expect( avatar ).toHaveAttribute( 'tabindex', '0' );
+		it( 'should wrap in tooltip when name is provided without badge', async () => {
+			const user = userEvent.setup();
+			renderAvatar( <Avatar name="Jane Doe" /> );
+			await user.hover( screen.getByRole( 'img', { name: 'Jane Doe' } ) );
+			expect( await screen.findByText( 'Jane Doe' ) ).toBeVisible();
 		} );
 
-		it( 'should not wrap in tooltip for badge without label', () => {
-			render( <Avatar name="Jane Doe" variant="badge" /> );
-			const avatar = screen.getByRole( 'img', { name: 'Jane Doe' } );
-			// Badge shows the name visibly, so no tooltip needed.
-			expect( avatar ).not.toHaveAttribute( 'tabindex' );
+		it( 'should not wrap in tooltip for badge without label', async () => {
+			const user = userEvent.setup();
+			renderAvatar( <Avatar name="Jane Doe" variant="badge" /> );
+			// Before hovering: the single "Jane Doe" occurrence is the
+			// badge text — that's what the next assertion is allowed to
+			// match. Hovering should not add a second occurrence.
+			expect( screen.getAllByText( 'Jane Doe' ) ).toHaveLength( 1 );
+			await user.hover( screen.getByRole( 'img', { name: 'Jane Doe' } ) );
+			expect( screen.getAllByText( 'Jane Doe' ) ).toHaveLength( 1 );
 		} );
 
-		it( 'should not wrap in tooltip when name is not provided', () => {
-			render( <Avatar data-testid="avatar" /> );
+		it( 'should not wrap in tooltip when name is not provided', async () => {
+			const user = userEvent.setup();
+			renderAvatar( <Avatar data-testid="avatar" /> );
 			const avatar = screen.getByTestId( 'avatar' );
-			expect( avatar ).not.toHaveAttribute( 'tabindex' );
+			const bodyTextBefore = document.body.textContent;
+			await user.hover( avatar );
+			// No name → no `Tooltip.Root` wrapper at all, so hovering
+			// cannot reveal any additional text content anywhere in the
+			// document (no popup mounts). Strict equality is what we
+			// want here — a substring `toHaveTextContent` would still
+			// pass if the popup added text.
+			// eslint-disable-next-line jest-dom/prefer-to-have-text-content -- intentional, see comment above.
+			expect( document.body.textContent ).toBe( bodyTextBefore );
 		} );
 	} );
 } );

package/src/components/collaborators-presence/styles/collaborators-presence.scss

@@ -8,7 +8,6 @@
 	height: $button-size-compact;
 	background: $gray-100;
 	border-radius: $grid-unit-05;
-	margin-right: $grid-unit-10;
 
 	&:hover {
 		background-color: $gray-200;
@@ -19,6 +18,10 @@
 	}
 }
 
+.editor-header__center .editor-collaborators-presence {
+	margin-right: $grid-unit-10;
+}
+
 .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button {
 	display: flex;
 	align-items: center;

package/src/components/collaborators-presence/test/use-collaborator-notifications.ts

@@ -52,7 +52,8 @@ jest.mock( '@wordpress/core-data', () => ( {
 } ) );
 
 jest.mock( '../../../lock-unlock', () => ( {
-	unlock: jest.fn( () => ( {
+	unlock: jest.fn( ( value: unknown ) => ( {
+		...( value as object ),
 		useOnCollaboratorJoin: jest.fn(
 			( postId: unknown, _postType: unknown, callback: Function ) => {
 				lastJoinPostId = postId;

package/src/components/collaborators-presence/use-collaborator-notifications.ts

@@ -70,13 +70,15 @@ export function useCollaboratorNotifications(
 ): void {
 	const { postStatus, isCollaborationEnabled, showNotifications } = useSelect(
 		( select ) => {
-			const editorSel = select( editorStore );
+			const {
+				getCurrentPostAttribute,
+				isCollaborationEnabledForCurrentPost,
+			} = unlock( select( editorStore ) );
 			return {
-				postStatus: editorSel.getCurrentPostAttribute( 'status' ) as
+				postStatus: getCurrentPostAttribute( 'status' ) as
 					| string
 					| undefined,
-				isCollaborationEnabled:
-					editorSel.isCollaborationEnabledForCurrentPost(),
+				isCollaborationEnabled: isCollaborationEnabledForCurrentPost(),
 				showNotifications:
 					select( preferencesStore ).get(
 						'core',

package/src/components/editor-help/help-topic-row.native.js

@@ -6,7 +6,7 @@ import { useNavigation } from '@react-navigation/native';
 /**
  * WordPress dependencies
  */
-import { TextControl, Icon } from '@wordpress/components';
+import { TextControl, Icon as WCIcon } from '@wordpress/components';
 import { chevronRight } from '@wordpress/icons';
 
 const HelpTopicRow = ( { label, icon, screenName, isLastItem } ) => {
@@ -25,7 +25,7 @@ const HelpTopicRow = ( { label, icon, screenName, isLastItem } ) => {
 			label={ label }
 			icon={ icon }
 		>
-			<Icon icon={ chevronRight } />
+			<WCIcon icon={ chevronRight } />
 		</TextControl>
 	);
 };

package/src/components/editor-interface/index.js

@@ -10,7 +10,11 @@ import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { BlockBreadcrumb, BlockToolbar } from '@wordpress/block-editor';
+import {
+	BlockBreadcrumb,
+	BlockToolbar,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { useViewportMatch } from '@wordpress/compose';
 import { useState, useCallback } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -32,7 +36,6 @@ import SavePublishPanels from '../save-publish-panels';
 import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import StylesCanvas from '../styles-canvas';
-import { MediaPreview } from '../media';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
@@ -47,14 +50,21 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-const Notices = () => (
-	<InlineNotices
-		pinnedNoticesClassName="editor-notices__pinned"
-		dismissibleNoticesClassName="editor-notices__dismissible"
-	>
-		<TemplateValidationNotice />
-	</InlineNotices>
-);
+function Notices() {
+	const isValidTemplate = useSelect( ( select ) => {
+		return select( blockEditorStore ).isValidTemplate();
+	}, [] );
+
+	return (
+		<InlineNotices
+			className="editor-notices"
+			pinnedNoticesClassName="editor-notices__pinned"
+			dismissibleNoticesClassName="editor-notices__dismissible"
+		>
+			{ ! isValidTemplate && <TemplateValidationNotice /> }
+		</InlineNotices>
+	);
+}
 
 export default function EditorInterface( {
 	className,
@@ -72,7 +82,6 @@ export default function EditorInterface( {
 		mode,
 		postId,
 		postType,
-		isAttachment,
 		isInserterOpened,
 		isListViewOpened,
 		isDistractionFree,
@@ -119,9 +128,6 @@ export default function EditorInterface( {
 			postTypeLabel: getPostTypeLabel(),
 			stylesPath: getStylesPath(),
 			showStylebook: getShowStylebook(),
-			isAttachment:
-				getCurrentPostType() === 'attachment' &&
-				window?.__experimentalMediaEditor,
 			isRevisionsMode: _isRevisionsMode(),
 			showDiff: isShowingRevisionDiff(),
 		};
@@ -136,12 +142,9 @@ export default function EditorInterface( {
 	const secondarySidebarLabel = isListViewOpened
 		? __( 'Document Overview' )
 		: __( 'Block Library' );
-	const shouldShowMediaEditor = !! isAttachment;
 	const shouldShowStylesCanvas =
-		! isAttachment &&
-		( showStylebook || stylesPath?.startsWith( '/revisions' ) );
-	const shouldShowBlockEditor =
-		! shouldShowMediaEditor && ! shouldShowStylesCanvas;
+		showStylebook || stylesPath?.startsWith( '/revisions' );
+	const shouldShowBlockEditor = ! shouldShowStylesCanvas;
 
 	// Local state for save panel.
 	// Note 'truthy' callback implies an open panel.
@@ -200,7 +203,6 @@ export default function EditorInterface( {
 			}
 			editorNotices={ <Notices /> }
 			secondarySidebar={
-				! isAttachment &&
 				! isPreviewMode &&
 				mode === 'visual' &&
 				( ( isInserterOpened && <InserterSidebar /> ) ||
@@ -213,9 +215,6 @@ export default function EditorInterface( {
 			content={
 				<>
 					{ ! isDistractionFree && ! isPreviewMode && <Notices /> }
-					{ shouldShowMediaEditor && (
-						<MediaPreview { ...iframeProps } />
-					) }
 					{ shouldShowStylesCanvas && <StylesCanvas /> }
 					{ shouldShowBlockEditor && (
 						<>

package/src/components/editor-interface/style.scss

@@ -9,6 +9,10 @@
 	isolation: isolate;
 }
 
+.editor-editor-interface .editor-notices {
+	padding: var(--wpds-dimension-padding-md);
+}
+
 .editor-visual-editor {
 	flex: 1 0 auto;
 }

package/src/components/editor-notices/index.js

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { InlineNotices } from '@wordpress/notices';
 
 /**
@@ -19,12 +21,16 @@ export function EditorNotices() {
 		alternative: 'wp.notices.InlineNotices',
 	} );
 
+	const isValidTemplate = useSelect( ( select ) => {
+		return select( blockEditorStore ).isValidTemplate();
+	}, [] );
+
 	return (
 		<InlineNotices
 			pinnedNoticesClassName="components-editor-notices__pinned"
 			dismissibleNoticesClassName="components-editor-notices__dismissible"
 		>
-			<TemplateValidationNotice />
+			{ ! isValidTemplate && <TemplateValidationNotice /> }
 		</InlineNotices>
 	);
 }

package/src/components/error-boundary/index.native.js

@@ -17,7 +17,7 @@ import {
 	withPreferredColorScheme,
 } from '@wordpress/compose';
 import { cautionFilled } from '@wordpress/icons';
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -140,7 +140,7 @@ class ErrorBoundary extends Component {
 				>
 					<View style={ styles[ 'error-boundary__container' ] }>
 						<View style={ iconContainerStyle }>
-							<Icon
+							<WCIcon
 								icon={ cautionFilled }
 								{ ...styles[ 'error-boundary__icon' ] }
 							/>

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

@@ -35,6 +35,13 @@ function useGlobalStylesUserConfig() {
 
 			let record;
 
+			/*
+			 * Ensure that the global styles ID request is complete by testing `_globalStylesId`,
+			 * before firing off the `canUser` OPTIONS request for user capabilities, otherwise it will
+			 * fetch `/wp/v2/global-styles` instead of `/wp/v2/global-styles/{id}`.
+			 * NOTE: Please keep in sync any preload paths sent to `block_editor_rest_api_preload()`,
+			 * or set using the `block_editor_rest_api_preload_paths` filter, if this changes.
+			 */
 			const userCanEditGlobalStyles = _globalStylesId
 				? canUser( 'update', {
 						kind: 'root',
@@ -45,8 +52,21 @@ function useGlobalStylesUserConfig() {
 
 			if (
 				_globalStylesId &&
+				/*
+				 * Test that the OPTIONS request for user capabilities is complete
+				 * before fetching the global styles entity record.
+				 * This is to avoid fetching the global styles entity unnecessarily.
+				 */
 				typeof userCanEditGlobalStyles === 'boolean'
 			) {
+				/*
+				 * Fetch the global styles entity record based on the user's capabilities.
+				 * The default context is `edit` for users who can edit global styles.
+				 * Otherwise, the context is `view`.
+				 * NOTE: There is an equivalent conditional check using `current_user_can()` in the backend
+				 * to preload the global styles entity. Please keep in sync any preload paths sent to `block_editor_rest_api_preload()`,
+				 * or set using `block_editor_rest_api_preload_paths` filter, if this changes.
+				 */
 				if ( userCanEditGlobalStyles ) {
 					record = getEditedEntityRecord(
 						'root',
@@ -110,6 +130,12 @@ function useGlobalStylesUserConfig() {
 	}, [ settings, styles, _links ] );
 
 	const setConfig = useCallback(
+		/**
+		 * Set the global styles config.
+		 * @param {Function|Object} callbackOrObject If the callbackOrObject is a function, pass the current config to the callback so the consumer can merge values.
+		 *                                           Otherwise, overwrite the current config with the incoming object.
+		 * @param {Object}          options          Options for editEntityRecord Core selector.
+		 */
 		( callbackOrObject, options = {} ) => {
 			const record = getEditedEntityRecord(
 				'root',

package/src/components/global-styles-sidebar/style.scss

@@ -19,15 +19,6 @@
 	flex: 1;
 }
 
-.editor-global-styles-sidebar .components-navigation__menu-title-heading {
-	font-size: $default-font-size * 1.2;
-	font-weight: $font-weight-medium;
-}
-
-.editor-global-styles-sidebar .components-navigation__item > button span {
-	font-weight: $font-weight-medium;
-}
-
 .editor-global-styles-sidebar .block-editor-panel-color-gradient-settings {
 	border: 0;
 }

package/src/components/header/index.js

@@ -50,7 +50,6 @@ function Header( {
 		hasBlockSelection,
 		hasSectionRootClientId,
 		isStylesCanvasActive,
-		isAttachment,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const {
@@ -78,9 +77,6 @@ function Header( {
 			isStylesCanvasActive:
 				!! getStylesPath()?.startsWith( '/revisions' ) ||
 				getShowStylebook(),
-			isAttachment:
-				getCurrentPostType() === ATTACHMENT_POST_TYPE &&
-				window?.__experimentalMediaEditor,
 		};
 	}, [] );
 
@@ -109,13 +105,11 @@ function Header( {
 		<HeaderSkeleton
 			toolbar={
 				<>
-					{ ! isAttachment && (
-						<DocumentTools
-							disableBlockTools={
-								isStylesCanvasActive || isTextEditor
-							}
-						/>
-					) }
+					<DocumentTools
+						disableBlockTools={
+							isStylesCanvasActive || isTextEditor
+						}
+					/>
 					{ hasFixedToolbar && isLargeViewport && (
 						<CollapsibleBlockToolbar
 							isCollapsed={ isBlockToolsCollapsed }
@@ -137,6 +131,12 @@ function Header( {
 			}
 			settings={
 				<>
+					{ ! hasCenter && ! isTooNarrowForDocumentBar && (
+						<CollaboratorsPresence
+							postType={ postType }
+							postId={ postId }
+						/>
+					) }
 					{ ! customSaveButton && ! isPublishSidebarOpened && (
 						/*
 						 * This button isn't completely hidden by the publish sidebar.
@@ -177,7 +177,7 @@ function Header( {
 						/>
 					) }
 					{ customSaveButton }
-					{ ! isAttachment && <MoreMenu /> }
+					<MoreMenu />
 				</>
 			}
 		/>

package/src/components/media/media-editor-modal.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSettings } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { privateApis as mediaEditorPrivateApis } from '@wordpress/media-editor';
 
@@ -11,7 +12,9 @@ import { privateApis as mediaEditorPrivateApis } from '@wordpress/media-editor';
 import { unlock } from '../../lock-unlock';
 import usePostFields from '../post-fields';
 
-const { MediaEditorModal } = unlock( mediaEditorPrivateApis );
+const { MediaEditorModal, store: mediaEditorStore } = unlock(
+	mediaEditorPrivateApis
+);
 
 function ratioToNumber( ratio ) {
 	if ( ratio === undefined || ratio === null ) {
@@ -48,9 +51,24 @@ function aspectRatioPresetFromSettings( { name, ratio } = {} ) {
  * into the modal, since `@wordpress/media-editor` cannot depend on
  * `@wordpress/editor`.
  *
- * @return {Element} The MediaEditorModal component wired with attachment fields.
+ * Defers the attachment fields and settings reads until the modal
+ * actually opens, so editor startup doesn't pay for them on every
+ * page load.
+ *
+ * @return {Element|null} The MediaEditorModal component wired with attachment fields, or null when closed.
  */
 export default function MediaEditorModalMount() {
+	const isOpen = useSelect(
+		( select ) => select( mediaEditorStore ).isOpen(),
+		[]
+	);
+	if ( ! isOpen ) {
+		return null;
+	}
+	return <MediaEditorModalContent />;
+}
+
+function MediaEditorModalContent() {
 	const fields = usePostFields( { postType: 'attachment' } );
 	const [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(
 		'dimensions.aspectRatios.default',

package/src/components/offline-status/index.native.js

@@ -11,7 +11,7 @@ import {
 	useNetworkConnectivity,
 	usePrevious,
 } from '@wordpress/compose';
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 import { offline as offlineIcon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
@@ -90,7 +90,7 @@ const OfflineStatus = () => {
 			) }
 			style={ containerStyle }
 		>
-			<Icon fill={ iconStyle.fill } icon={ offlineIcon } />
+			<WCIcon fill={ iconStyle.fill } icon={ offlineIcon } />
 			<Text style={ textStyle }>{ __( 'Working Offline' ) } </Text>
 		</View>
 	) : null;

package/src/components/post-card-panel/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	Icon,
+	Icon as WCIcon,
 	Button,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -130,7 +130,10 @@ export default function PostCardPanel( {
 				className="editor-post-card-panel__header"
 				alignment="flex-start"
 			>
-				<Icon className="editor-post-card-panel__icon" icon={ icon } />
+				<WCIcon
+					className="editor-post-card-panel__icon"
+					icon={ icon }
+				/>
 				<WCText
 					numberOfLines={ 2 }
 					truncate

package/src/components/post-last-revision/index.js

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { sprintf, __ } from '@wordpress/i18n';
+import { sprintf, __, _n } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { backup } from '@wordpress/icons';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -16,11 +17,16 @@ import { unlock } from '../../lock-unlock';
 
 function usePostLastRevisionInfo() {
 	return useSelect( ( select ) => {
-		const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
-			select( editorStore );
+		const {
+			getCurrentPostLastRevisionId,
+			getCurrentPostRevisionsCount,
+			getEditorSettings,
+		} = select( editorStore );
 		return {
 			lastRevisionId: getCurrentPostLastRevisionId(),
 			revisionsCount: getCurrentPostRevisionsCount(),
+			disableVisualRevisions:
+				!! getEditorSettings().disableVisualRevisions,
 		};
 	}, [] );
 }
@@ -31,14 +37,23 @@ function usePostLastRevisionInfo() {
  * @return {React.ReactNode} The rendered component.
  */
 function PostLastRevision() {
-	const { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();
+	const { lastRevisionId, revisionsCount, disableVisualRevisions } =
+		usePostLastRevisionInfo();
 	const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
 
+	const buttonProps = disableVisualRevisions
+		? {
+				href: addQueryArgs( 'revision.php', {
+					revision: lastRevisionId,
+				} ),
+		  }
+		: { onClick: () => setCurrentRevisionId( lastRevisionId ) };
+
 	return (
 		<PostLastRevisionCheck>
 			<Button
 				__next40pxDefaultSize
-				onClick={ () => setCurrentRevisionId( lastRevisionId ) }
+				{ ...buttonProps }
 				className="editor-post-last-revision__title"
 				icon={ backup }
 				iconPosition="right"
@@ -53,19 +68,32 @@ function PostLastRevision() {
 }
 
 export function PrivatePostLastRevision() {
-	const { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();
+	const { lastRevisionId, revisionsCount, disableVisualRevisions } =
+		usePostLastRevisionInfo();
 	const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
 
+	const buttonProps = disableVisualRevisions
+		? {
+				href: addQueryArgs( 'revision.php', {
+					revision: lastRevisionId,
+				} ),
+		  }
+		: { onClick: () => setCurrentRevisionId( lastRevisionId ) };
+
 	return (
 		<PostLastRevisionCheck>
 			<PostPanelRow label={ __( 'Revisions' ) }>
 				<Button
-					onClick={ () => setCurrentRevisionId( lastRevisionId ) }
+					{ ...buttonProps }
 					className="editor-private-post-last-revision__button"
 					text={ revisionsCount }
 					aria-label={ sprintf(
-						/* translators: %s: number of revisions. */
-						__( 'Open revisions screen: %s revisions' ),
+						/* translators: %d: number of revisions. */
+						_n(
+							'Open revisions screen: %d revision',
+							'Open revisions screen: %d revisions',
+							revisionsCount
+						),
 						revisionsCount
 					) }
 					variant="tertiary"