Extensible site editor: Add a revisions entry point to the Styles route

packages/editor/CHANGELOG.md

@@ -9,6 +9,7 @@
 ### Bug Fixes
 
 -   `EditorInterface`: Apply the `showListViewByDefault` preference when the editor enters edit mode, so every editor built on the package honors it — including the extensible site editor, which previously ignored it. The logic moves here from `edit-post` and `edit-site`.
+-   `StylesCanvas`: In preview mode, render edge to edge without the close button and Escape handler. There the canvas is the whole surface rather than a frame opened over an editing session, and whatever opened it owns closing it.
 
 ### Bug Fixes
 

packages/editor/src/components/styles-canvas/index.jsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { Button } from '@wordpress/components';
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
@@ -35,8 +36,8 @@ export function getStylesCanvasTitle( path, showStylebook ) {
  * @return {React.JSX.Element} The styles canvas or null if nothing to render.
  */
 export default function StylesCanvas() {
-	const { stylesPath, showStylebook, showListViewByDefault } = useSelect(
-		( select ) => {
+	const { stylesPath, showStylebook, showListViewByDefault, isPreviewMode } =
+		useSelect( ( select ) => {
 			const { getStylesPath, getShowStylebook } = unlock(
 				select( editorStore )
 			);
@@ -50,10 +51,10 @@ export default function StylesCanvas() {
 				stylesPath: getStylesPath(),
 				showStylebook: getShowStylebook(),
 				showListViewByDefault: _showListViewByDefault,
+				isPreviewMode:
+					select( editorStore ).getEditorSettings().isPreviewMode,
 			};
-		},
-		[]
-	);
+		}, [] );
 	const { resetStylesNavigation, setStylesPath } = unlock(
 		useDispatch( editorStore )
 	);
@@ -95,23 +96,31 @@ export default function StylesCanvas() {
 		}
 	};
 
+	// In preview mode (e.g. the styles route of the extensible site editor),
+	// the canvas is not opened over an editing session: whatever opened it
+	// owns closing it, so the close affordances would only desync that owner.
 	return (
-		<div className="editor-styles-canvas">
+		<div
+			className={ clsx( 'editor-styles-canvas', {
+				'is-preview-mode': isPreviewMode,
+			} ) }
+		>
 			<ResizableEditor enableResizing={ false }>
-				{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 				<section
 					className="editor-styles-canvas__section"
-					ref={ focusOnMountRef }
-					onKeyDown={ closeOnEscape }
+					ref={ isPreviewMode ? undefined : focusOnMountRef }
+					onKeyDown={ isPreviewMode ? undefined : closeOnEscape }
 					aria-label={ title }
 				>
-					<Button
-						size="compact"
-						className="editor-styles-canvas__close-button"
-						icon={ closeSmall }
-						label={ __( 'Close' ) }
-						onClick={ onCloseCanvas }
-					/>
+					{ ! isPreviewMode && (
+						<Button
+							size="compact"
+							className="editor-styles-canvas__close-button"
+							icon={ closeSmall }
+							label={ __( 'Close' ) }
+							onClick={ onCloseCanvas }
+						/>
+					) }
 					{ content }
 				</section>
 			</ResizableEditor>

packages/editor/src/components/styles-canvas/style.scss

@@ -15,6 +15,12 @@
 		width: 100%;
 		height: 100%;
 	}
+
+	// In preview mode the canvas is the whole surface, not a frame opened
+	// over an editing session, so it renders edge to edge.
+	&.is-preview-mode {
+		padding: 0;
+	}
 }
 
 .editor-styles-canvas__section {

routes/styles/canvas.tsx

@@ -4,10 +4,46 @@ import { useEditorAssets, useEditorSettings } from '@wordpress/lazy-editor';
 import { Spinner } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { useGlobalStylesRevisions } from '@wordpress/global-styles-ui';
 import { unlock } from '@wordpress/routes-lock-unlock';
 
 const { StyleBookPreview } = unlock( editorPrivateApis );
 
+// Rendered instead of the plain style book while a revision is selected in
+// the revisions screen, so the style book previews that revision's styles
+// rather than the current ones. A separate component so the revisions (and
+// authors) are only fetched once a revision is actually selected.
+function RevisionStyleBookPreview( {
+	revisionId,
+	section,
+	onChangeSection,
+	settings,
+}: {
+	revisionId: string;
+	section: string;
+	onChangeSection: ( updatedSection: string ) => void;
+	settings: any;
+} ) {
+	const { revisions, isLoading } = useGlobalStylesRevisions();
+
+	if ( isLoading ) {
+		return null;
+	}
+
+	const selectedRevision = revisions.find(
+		( revision: any ) => String( revision.id ) === revisionId
+	);
+
+	return (
+		<StyleBookPreview
+			path={ section }
+			onPathChange={ onChangeSection }
+			settings={ settings }
+			userConfig={ selectedRevision }
+		/>
+	);
+}
+
 function Canvas() {
 	const { isReady: assetsReady } = useEditorAssets();
 	const navigate = useNavigate();
@@ -63,6 +99,18 @@ function Canvas() {
 		return <StyleBookPreview isStatic settings={ editorSettings } />;
 	}
 
+	const revisionId = section.match( /^\/revisions\/(.+)$/ )?.[ 1 ];
+	if ( revisionId ) {
+		return (
+			<RevisionStyleBookPreview
+				revisionId={ revisionId }
+				section={ section }
+				onChangeSection={ onChangeSection }
+				settings={ editorSettings }
+			/>
+		);
+	}
+
 	return (
 		<StyleBookPreview
 			path={ section }

routes/styles/package.json

@@ -19,6 +19,7 @@
 		"@wordpress/data": "file:../../packages/data",
 		"@wordpress/editor": "file:../../packages/editor",
 		"@wordpress/element": "file:../../packages/element",
+		"@wordpress/global-styles-ui": "file:../../packages/global-styles-ui",
 		"@wordpress/html-entities": "file:../../packages/html-entities",
 		"@wordpress/i18n": "file:../../packages/i18n",
 		"@wordpress/icons": "file:../../packages/icons",

routes/styles/stage.tsx

@@ -1,18 +1,21 @@
 import { useNavigate, useSearch } from '@wordpress/route';
 import { Page } from '@wordpress/admin-ui';
 import { __ } from '@wordpress/i18n';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import {
+	privateApis as editorPrivateApis,
+	store as editorStore,
+} from '@wordpress/editor';
 import { useViewportMatch } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import {
 	Button,
 	Modal,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { decodeEntities } from '@wordpress/html-entities';
-import { seen } from '@wordpress/icons';
-import { useState } from '@wordpress/element';
+import { backup, seen } from '@wordpress/icons';
+import { useEffect, useState } from '@wordpress/element';
 import { useEditorSettings } from '@wordpress/lazy-editor';
 import { unlock } from '@wordpress/routes-lock-unlock';
 import { ActivatePanel } from './activate-panel';
@@ -28,15 +31,25 @@ function Stage() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isPreviewingTheme = !! getPreviewedStylesheet();
 	const [ isActivatePanelOpen, setIsActivatePanelOpen ] = useState( false );
-	const { globalStylesId, themeName } = useSelect(
+	const { globalStylesId, hasRevisions, themeName } = useSelect(
 		( select ) => {
-			const { getCurrentTheme, __experimentalGetCurrentGlobalStylesId } =
-				select( coreStore ) as any;
+			const {
+				getCurrentTheme,
+				getEntityRecord,
+				__experimentalGetCurrentGlobalStylesId,
+			} = select( coreStore ) as any;
 			const themeNameRendered = isPreviewingTheme
 				? getCurrentTheme()?.name?.rendered
 				: undefined;
+			const _globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = _globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', _globalStylesId )
+				: undefined;
 			return {
-				globalStylesId: __experimentalGetCurrentGlobalStylesId(),
+				globalStylesId: _globalStylesId,
+				hasRevisions:
+					!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]
+						?.count,
 				themeName: themeNameRendered
 					? decodeEntities( themeNameRendered )
 					: undefined,
@@ -49,6 +62,21 @@ function Stage() {
 	} );
 
 	const section = ( search.section ?? '/' ) as string;
+	const areRevisionsOpened = section.startsWith( '/revisions' );
+
+	// The canvas on this route is the editor in preview mode, and its
+	// revisions preview is driven by the editor store's styles path rather
+	// than this route's `section` search param. Keep the store in sync while
+	// the revisions screen is open so selecting a revision previews it in
+	// the canvas.
+	const { setStylesPath } = unlock( useDispatch( editorStore ) );
+	useEffect( () => {
+		if ( ! areRevisionsOpened ) {
+			return;
+		}
+		setStylesPath( section );
+		return () => setStylesPath( '/' );
+	}, [ areRevisionsOpened, section, setStylesPath ] );
 	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState(
 		search.preview === 'stylebook'
 	);
@@ -97,6 +125,24 @@ function Stage() {
 										} );
 									} }
 								/>
+								<Button
+									size="compact"
+									isPressed={ areRevisionsOpened }
+									icon={ backup }
+									label={ __( 'Revisions' ) }
+									// The revisions screen has no empty
+									// state; it expects to be opened only
+									// when revisions exist.
+									accessibleWhenDisabled
+									disabled={ ! hasRevisions }
+									onClick={ () =>
+										onChangeSection(
+											areRevisionsOpened
+												? '/'
+												: '/revisions'
+										)
+									}
+								/>
 								<GlobalStylesActionMenu
 									hideWelcomeGuide
 									onChangePath={ onChangeSection }

routes/styles/tsconfig.json

@@ -18,6 +18,7 @@
 		{ "path": "../../packages/data" },
 		{ "path": "../../packages/editor/tsconfig.build.json" },
 		{ "path": "../../packages/element/tsconfig.build.json" },
+		{ "path": "../../packages/global-styles-ui" },
 		{ "path": "../../packages/html-entities/tsconfig.build.json" },
 		{ "path": "../../packages/i18n/tsconfig.build.json" },
 		{ "path": "../../packages/icons/tsconfig.build.json" },