From 89c137a378174a28ae7c8222bf92b2c84e74be04 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 24 Oct 2024 15:54:40 +0200
Subject: [PATCH 01/12] Remove Additional CSS button from ellipsis menu and
 always show in main panel.

---
 .../components/global-styles/screen-root.js   | 22 ++++++++++------
 .../src/components/global-styles/ui.js        | 25 -------------------
 2 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index ffa85b046ead71..e07b56806782f6 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -14,9 +14,8 @@ import {
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -25,13 +24,10 @@ import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
 import RootMenu from './root-menu';
 import PreviewStyles from './preview-styles';
+import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-
 function ScreenRoot() {
-	const [ customCSS ] = useGlobalStyle( 'css' );
-
 	const { hasVariations, canEditCSS } = useSelect( ( select ) => {
 		const {
 			getEntityRecord,
@@ -52,6 +48,13 @@ function ScreenRoot() {
 		};
 	}, [] );
 
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const loadAdditionalCSSView = () => {
+		setEditorCanvasContainerView( 'global-styles-css' );
+	};
+
 	return (
 		<Card
 			size="small"
@@ -115,7 +118,7 @@ function ScreenRoot() {
 				</ItemGroup>
 			</CardBody>
 
-			{ canEditCSS && !! customCSS && (
+			{ canEditCSS && (
 				<>
 					<CardDivider />
 					<CardBody>
@@ -130,7 +133,10 @@ function ScreenRoot() {
 							) }
 						</Spacer>
 						<ItemGroup>
-							<NavigationButtonAsItem path="/css">
+							<NavigationButtonAsItem
+								path="/css"
+								onClick={ loadAdditionalCSSView }
+							>
 								<HStack justify="space-between">
 									<FlexItem>
 										{ __( 'Additional CSS' ) }
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 22ebad383884e9..8f762ec9ff8665 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -18,7 +18,6 @@ import {
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
 import { useEffect } from '@wordpress/element';
 import { usePrevious } from '@wordpress/compose';
 
@@ -56,25 +55,6 @@ const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
 function GlobalStylesActionMenu() {
 	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { toggle } = useDispatch( preferencesStore );
-	const { canEditCSS } = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
-		};
-	}, [] );
-	const { setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
-	const loadCustomCSS = () => {
-		setEditorCanvasContainerView( 'global-styles-css' );
-	};
 
 	return (
 		<GlobalStylesMenuFill>
@@ -86,11 +66,6 @@ function GlobalStylesActionMenu() {
 				{ ( { onClose } ) => (
 					<>
 						<MenuGroup>
-							{ canEditCSS && (
-								<MenuItem onClick={ loadCustomCSS }>
-									{ __( 'Additional CSS' ) }
-								</MenuItem>
-							) }
 							<MenuItem
 								onClick={ () => {
 									toggle(

From 6719e904c8aa1fa6292468d80f7834475d591b51 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 24 Oct 2024 16:34:58 +0200
Subject: [PATCH 02/12] Remove descriptions and group navigation buttons.

---
 .../components/global-styles/screen-root.js   | 68 +++++--------------
 1 file changed, 16 insertions(+), 52 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index e07b56806782f6..a58c2bca98efc5 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -4,7 +4,6 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
 	__experimentalVStack as VStack,
 	FlexItem,
 	CardBody,
@@ -91,22 +90,7 @@ function ScreenRoot() {
 			<CardDivider />
 
 			<CardBody>
-				<Spacer
-					as="p"
-					paddingTop={ 2 }
-					/*
-					 * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
-					 * This is an ad hoc override for this instance and the Addtional CSS option below. Other options for matching the
-					 * the nav button inset should be looked at before reusing further.
-					 */
-					paddingX="13px"
-					marginBottom={ 4 }
-				>
-					{ __(
-						'Customize the appearance of specific blocks for the whole site.'
-					) }
-				</Spacer>
-				<ItemGroup>
+				<ItemGroup isBordered isSeparated>
 					<NavigationButtonAsItem path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
@@ -115,43 +99,23 @@ function ScreenRoot() {
 							/>
 						</HStack>
 					</NavigationButtonAsItem>
+					{ canEditCSS && (
+						<NavigationButtonAsItem
+							path="/css"
+							onClick={ loadAdditionalCSSView }
+						>
+							<HStack justify="space-between">
+								<FlexItem>{ __( 'Additional CSS' ) }</FlexItem>
+								<IconWithCurrentColor
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
+							</HStack>
+						</NavigationButtonAsItem>
+					) }
 				</ItemGroup>
 			</CardBody>
-
-			{ canEditCSS && (
-				<>
-					<CardDivider />
-					<CardBody>
-						<Spacer
-							as="p"
-							paddingTop={ 2 }
-							paddingX="13px"
-							marginBottom={ 4 }
-						>
-							{ __(
-								'Add your own CSS to customize the appearance and layout of your site.'
-							) }
-						</Spacer>
-						<ItemGroup>
-							<NavigationButtonAsItem
-								path="/css"
-								onClick={ loadAdditionalCSSView }
-							>
-								<HStack justify="space-between">
-									<FlexItem>
-										{ __( 'Additional CSS' ) }
-									</FlexItem>
-									<IconWithCurrentColor
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</HStack>
-							</NavigationButtonAsItem>
-						</ItemGroup>
-					</CardBody>
-				</>
-			) }
 		</Card>
 	);
 }

From bddd1030f4df4c73a250749b3d7fbd6fd4d5f03e Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 25 Oct 2024 14:26:19 +0200
Subject: [PATCH 03/12] Move Styles revisions button from panel header into
 panel.

---
 .../components/global-styles-sidebar/index.js |  47 +------
 .../components/global-styles/screen-root.js   | 124 +++++++++++++++---
 2 files changed, 108 insertions(+), 63 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js
index 02a29dac5c0b7d..4e9c47c51f1d3c 100644
--- a/packages/edit-site/src/components/global-styles-sidebar/index.js
+++ b/packages/edit-site/src/components/global-styles-sidebar/index.js
@@ -3,7 +3,7 @@
  */
 import { FlexItem, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { styles, seen, backup } from '@wordpress/icons';
+import { styles, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -21,7 +21,6 @@ import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesMenuSlot } from '../global-styles/ui';
 import { unlock } from '../../lock-unlock';
-import { store as coreStore } from '@wordpress/core-data';
 import DefaultSidebar from './default-sidebar';
 
 const { interfaceStore } = unlock( editorPrivateApis );
@@ -34,7 +33,6 @@ export default function GlobalStylesSidebar() {
 		shouldClearCanvasContainerView,
 		isStyleBookOpened,
 		showListViewByDefault,
-		hasRevisions,
 		isRevisionsOpened,
 		isRevisionsStyleBookOpened,
 	} = useSelect(
@@ -51,13 +49,6 @@ export default function GlobalStylesSidebar() {
 				'core',
 				'showListViewByDefault'
 			);
-			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-				select( coreStore );
-
-			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-			const globalStyles = globalStylesId
-				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-				: undefined;
 
 			return {
 				isStyleBookOpened: 'style-book' === canvasContainerView,
@@ -67,9 +58,6 @@ export default function GlobalStylesSidebar() {
 					! _isVisualEditorMode ||
 					! _isEditCanvasMode,
 				showListViewByDefault: _showListViewByDefault,
-				hasRevisions:
-					!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]
-						?.count,
 				isRevisionsStyleBookOpened:
 					'global-styles-revisions:style-book' ===
 					canvasContainerView,
@@ -92,25 +80,6 @@ export default function GlobalStylesSidebar() {
 
 	const { setIsListViewOpened } = useDispatch( editorStore );
 
-	const toggleRevisions = () => {
-		setIsListViewOpened( false );
-		if ( isRevisionsStyleBookOpened ) {
-			setEditorCanvasContainerView( 'style-book' );
-			return;
-		}
-		if ( isRevisionsOpened ) {
-			setEditorCanvasContainerView( undefined );
-			return;
-		}
-
-		if ( isStyleBookOpened ) {
-			setEditorCanvasContainerView(
-				'global-styles-revisions:style-book'
-			);
-		} else {
-			setEditorCanvasContainerView( 'global-styles-revisions' );
-		}
-	};
 	const toggleStyleBook = () => {
 		if ( isRevisionsOpened ) {
 			setEditorCanvasContainerView(
@@ -181,20 +150,6 @@ export default function GlobalStylesSidebar() {
 								/>
 							</FlexItem>
 						) }
-						<FlexItem>
-							<Button
-								label={ __( 'Revisions' ) }
-								icon={ backup }
-								onClick={ toggleRevisions }
-								accessibleWhenDisabled
-								disabled={ ! hasRevisions }
-								isPressed={
-									isRevisionsOpened ||
-									isRevisionsStyleBookOpened
-								}
-								size="compact"
-							/>
-						</FlexItem>
 						<GlobalStylesMenuSlot />
 					</Flex>
 				</Flex>
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index a58c2bca98efc5..f8770a55a408a9 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -14,7 +14,13 @@ import {
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -26,26 +32,65 @@ import PreviewStyles from './preview-styles';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
+const { interfaceStore } = unlock( editorPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
+
 function ScreenRoot() {
-	const { hasVariations, canEditCSS } = useSelect( ( select ) => {
-		const {
-			getEntityRecord,
-			__experimentalGetCurrentGlobalStylesId,
-			__experimentalGetCurrentThemeGlobalStylesVariations,
-		} = select( coreStore );
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
+	const {
+		hasVariations,
+		canEditCSS,
+		shouldClearCanvasContainerView,
+		isStyleBookOpened,
+		hasRevisions,
+		isRevisionsOpened,
+		isRevisionsStyleBookOpened,
+	} = useSelect(
+		( select ) => {
+			const {
+				getEntityRecord,
+				__experimentalGetCurrentGlobalStylesId,
+				__experimentalGetCurrentThemeGlobalStylesVariations,
+			} = select( coreStore );
 
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
 
-		return {
-			hasVariations:
-				!! __experimentalGetCurrentThemeGlobalStylesVariations()
-					?.length,
-			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
-		};
-	}, [] );
+			const { getActiveComplementaryArea } = select( interfaceStore );
+			const { getEditorCanvasContainerView } = unlock(
+				select( editSiteStore )
+			);
+			const canvasContainerView = getEditorCanvasContainerView();
+			const _isVisualEditorMode =
+				'visual' === select( editorStore ).getEditorMode();
+			const _isEditCanvasMode = 'edit' === canvas;
+
+			return {
+				hasVariations:
+					!! __experimentalGetCurrentThemeGlobalStylesVariations()
+						?.length,
+				canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
+				isStyleBookOpened: 'style-book' === canvasContainerView,
+				shouldClearCanvasContainerView:
+					'edit-site/global-styles' !==
+						getActiveComplementaryArea( 'core' ) ||
+					! _isVisualEditorMode ||
+					! _isEditCanvasMode,
+				hasRevisions:
+					!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]
+						?.count,
+				isRevisionsStyleBookOpened:
+					'global-styles-revisions:style-book' ===
+					canvasContainerView,
+				isRevisionsOpened:
+					'global-styles-revisions' === canvasContainerView,
+			};
+		},
+		[ canvas ]
+	);
 
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
@@ -54,6 +99,34 @@ function ScreenRoot() {
 		setEditorCanvasContainerView( 'global-styles-css' );
 	};
 
+	useEffect( () => {
+		if ( shouldClearCanvasContainerView ) {
+			setEditorCanvasContainerView( undefined );
+		}
+	}, [ shouldClearCanvasContainerView, setEditorCanvasContainerView ] );
+
+	const { setIsListViewOpened } = useDispatch( editorStore );
+
+	const loadRevisionsView = () => {
+		setIsListViewOpened( false );
+		if ( isRevisionsStyleBookOpened ) {
+			setEditorCanvasContainerView( 'style-book' );
+			return;
+		}
+		if ( isRevisionsOpened ) {
+			setEditorCanvasContainerView( undefined );
+			return;
+		}
+
+		if ( isStyleBookOpened ) {
+			setEditorCanvasContainerView(
+				'global-styles-revisions:style-book'
+			);
+		} else {
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+		}
+	};
+
 	return (
 		<Card
 			size="small"
@@ -114,6 +187,23 @@ function ScreenRoot() {
 							</HStack>
 						</NavigationButtonAsItem>
 					) }
+					{ hasRevisions && (
+						<NavigationButtonAsItem
+							path="/revisions"
+							onClick={ loadRevisionsView }
+						>
+							<HStack justify="space-between">
+								<FlexItem>
+									{ __( 'Styles revisions' ) }
+								</FlexItem>
+								<IconWithCurrentColor
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
+							</HStack>
+						</NavigationButtonAsItem>
+					) }
 				</ItemGroup>
 			</CardBody>
 		</Card>

From d694996eacbc25a8199a066a942595d887f74d2a Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 25 Oct 2024 15:15:58 +0200
Subject: [PATCH 04/12] Adjust tests.

---
 .../site-editor/block-style-variations.spec.js   |  2 +-
 .../user-global-styles-revisions.spec.js         | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/test/e2e/specs/site-editor/block-style-variations.spec.js b/test/e2e/specs/site-editor/block-style-variations.spec.js
index 03fc5398f4a0a5..414d350c970716 100644
--- a/test/e2e/specs/site-editor/block-style-variations.spec.js
+++ b/test/e2e/specs/site-editor/block-style-variations.spec.js
@@ -194,7 +194,7 @@ test.describe( 'Block Style Variations', () => {
 		// The initial revision styles should match the editor canvas.
 		await siteEditorBlockStyleVariations.openStylesPanel();
 		const revisionsButton = page.getByRole( 'button', {
-			name: 'Revisions',
+			name: 'Styles revisions',
 			exact: true,
 		} );
 		await revisionsButton.click();
diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
index 917bf1e0c9c69e..ff03e814971550 100644
--- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
+++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
@@ -48,7 +48,7 @@ test.describe( 'Style Revisions', () => {
 		await userGlobalStylesRevisions.openStylesPanel();
 
 		// Now there should be enough revisions to show the revisions UI.
-		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+		await page.getByRole( 'button', { name: 'Styles revisions' } ).click();
 
 		const revisionButtons = page.getByRole( 'option', {
 			name: /^Changes saved by /,
@@ -83,7 +83,7 @@ test.describe( 'Style Revisions', () => {
 			.getByRole( 'option', { name: 'Color: Luminous vivid amber' } )
 			.click( { force: true } );
 
-		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+		await page.getByRole( 'button', { name: 'Styles revisions' } ).click();
 
 		const unSavedButton = page.getByRole( 'option', {
 			name: /^Unsaved changes/,
@@ -119,7 +119,7 @@ test.describe( 'Style Revisions', () => {
 	} ) => {
 		await editor.canvas.locator( 'body' ).click();
 		await userGlobalStylesRevisions.openStylesPanel();
-		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+		await page.getByRole( 'button', { name: 'Styles revisions' } ).click();
 		const lastRevisionItem = page
 			.getByLabel( 'Global styles revisions list' )
 			.getByRole( 'option' )
@@ -142,7 +142,7 @@ test.describe( 'Style Revisions', () => {
 			.click();
 
 		await navigationContainer
-			.getByRole( 'button', { name: 'Revisions' } )
+			.getByRole( 'button', { name: 'Styles revisions' } )
 			.click();
 
 		await expect(
@@ -159,7 +159,7 @@ test.describe( 'Style Revisions', () => {
 		await userGlobalStylesRevisions.openStylesPanel();
 		// Search for exact names to avoid selecting the command bar button in the header.
 		const revisionsButton = page.getByRole( 'button', {
-			name: 'Revisions',
+			name: 'Styles revisions',
 			exact: true,
 		} );
 		const styleBookButton = page.getByRole( 'button', {
@@ -205,7 +205,7 @@ test.describe( 'Style Revisions', () => {
 		await editor.canvas.locator( 'body' ).click();
 		await userGlobalStylesRevisions.openStylesPanel();
 		const revisionsButton = page.getByRole( 'button', {
-			name: 'Revisions',
+			name: 'Styles revisions',
 		} );
 		const styleBookButton = page.getByRole( 'button', {
 			name: 'Style Book',
@@ -238,7 +238,7 @@ test.describe( 'Style Revisions', () => {
 		await userGlobalStylesRevisions.openStylesPanel();
 		await page
 			.getByRole( 'button', {
-				name: 'Revisions',
+				name: 'Styles revisions',
 				exact: true,
 			} )
 			.click();
@@ -268,7 +268,7 @@ test.describe( 'Style Revisions', () => {
 			} );
 		}
 		await userGlobalStylesRevisions.openStylesPanel();
-		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+		await page.getByRole( 'button', { name: 'Styles revisions' } ).click();
 		const pagination = page.getByLabel(
 			'Global Styles pagination navigation'
 		);

From edc2bff3197f8ebf361aef66981edbf63f9de26e Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 28 Oct 2024 11:37:19 +0100
Subject: [PATCH 05/12] Adjusting tests attempt.

---
 .../specs/site-editor/user-global-styles-revisions.spec.js  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
index ff03e814971550..8eb397d0534b48 100644
--- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
+++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
@@ -83,6 +83,8 @@ test.describe( 'Style Revisions', () => {
 			.getByRole( 'option', { name: 'Color: Luminous vivid amber' } )
 			.click( { force: true } );
 
+		await page.click( 'role=button[name="Back"]' );
+
 		await page.getByRole( 'button', { name: 'Styles revisions' } ).click();
 
 		const unSavedButton = page.getByRole( 'option', {
@@ -142,7 +144,7 @@ test.describe( 'Style Revisions', () => {
 			.click();
 
 		await navigationContainer
-			.getByRole( 'button', { name: 'Styles revisions' } )
+			.getByRole( 'button', { name: 'Revisions' } )
 			.click();
 
 		await expect(
@@ -185,7 +187,7 @@ test.describe( 'Style Revisions', () => {
 
 		// Deactivating revisions view while the style book is open should close revisions,
 		// but not the style book.
-		await revisionsButton.click();
+		await page.click( 'role=button[name="Back"]' );
 
 		// Style book is still visible but...
 		await expect(

From 0325236325bd795c27301acad2b99b8539f3c34c Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 29 Oct 2024 09:56:03 +0100
Subject: [PATCH 06/12] Try the ItemGroup isSeparated style variant.

---
 packages/edit-site/src/components/global-styles/screen-root.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index f8770a55a408a9..e1b42b8be1026b 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -163,7 +163,7 @@ function ScreenRoot() {
 			<CardDivider />
 
 			<CardBody>
-				<ItemGroup isBordered isSeparated>
+				<ItemGroup isSeparated>
 					<NavigationButtonAsItem path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>

From 837a6a34d4687435301e201b8ca9070faa154a3f Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 20 Nov 2024 10:29:28 +0100
Subject: [PATCH 07/12] Render the revisions button only in canvas edit mmode.

---
 .../edit-site/src/components/global-styles/screen-root.js     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index e1b42b8be1026b..c38987f2620630 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -46,6 +46,7 @@ function ScreenRoot() {
 		hasRevisions,
 		isRevisionsOpened,
 		isRevisionsStyleBookOpened,
+		isEditCanvasMode,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -87,6 +88,7 @@ function ScreenRoot() {
 					canvasContainerView,
 				isRevisionsOpened:
 					'global-styles-revisions' === canvasContainerView,
+				isEditCanvasMode: _isEditCanvasMode,
 			};
 		},
 		[ canvas ]
@@ -187,7 +189,7 @@ function ScreenRoot() {
 							</HStack>
 						</NavigationButtonAsItem>
 					) }
-					{ hasRevisions && (
+					{ hasRevisions && isEditCanvasMode && (
 						<NavigationButtonAsItem
 							path="/revisions"
 							onClick={ loadRevisionsView }

From 8129ea8b43b0e730cf224feec0c87d622a60ba56 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 9 Dec 2024 12:16:56 +0100
Subject: [PATCH 08/12] Adjust retrieval of location query params.

---
 .../edit-site/src/components/global-styles/screen-root.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index c38987f2620630..c902bb754df7eb 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -36,8 +36,8 @@ const { interfaceStore } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
 function ScreenRoot() {
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { query } = useLocation();
+	const { canvas = 'view' } = query;
 	const {
 		hasVariations,
 		canEditCSS,

From 13619a1cb8b5d50cb04f8711b9dd8272806346d2 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 12 Dec 2024 11:17:54 +0100
Subject: [PATCH 09/12] Rename Styles revisions to Revisions.

---
 .../src/components/global-styles/screen-root.js    |  4 +---
 .../site-editor/block-style-variations.spec.js     |  2 +-
 .../user-global-styles-revisions.spec.js           | 14 +++++++-------
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index c902bb754df7eb..496aed26a056b7 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -195,9 +195,7 @@ function ScreenRoot() {
 							onClick={ loadRevisionsView }
 						>
 							<HStack justify="space-between">
-								<FlexItem>
-									{ __( 'Styles revisions' ) }
-								</FlexItem>
+								<FlexItem>{ __( 'Revisions' ) }</FlexItem>
 								<IconWithCurrentColor
 									icon={
 										isRTL() ? chevronLeft : chevronRight
diff --git a/test/e2e/specs/site-editor/block-style-variations.spec.js b/test/e2e/specs/site-editor/block-style-variations.spec.js
index 414d350c970716..03fc5398f4a0a5 100644
--- a/test/e2e/specs/site-editor/block-style-variations.spec.js
+++ b/test/e2e/specs/site-editor/block-style-variations.spec.js
@@ -194,7 +194,7 @@ test.describe( 'Block Style Variations', () => {
 		// The initial revision styles should match the editor canvas.
 		await siteEditorBlockStyleVariations.openStylesPanel();
 		const revisionsButton = page.getByRole( 'button', {
-			name: 'Styles revisions',
+			name: 'Revisions',
 			exact: true,
 		} );
 		await revisionsButton.click();
diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
index 8eb397d0534b48..f15904accc6e7d 100644
--- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
+++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
@@ -48,7 +48,7 @@ test.describe( 'Style Revisions', () => {
 		await userGlobalStylesRevisions.openStylesPanel();
 
 		// Now there should be enough revisions to show the revisions UI.
-		await page.getByRole( 'button', { name: 'Styles revisions' } ).click();
+		await page.getByRole( 'button', { name: 'Revisions' } ).click();
 
 		const revisionButtons = page.getByRole( 'option', {
 			name: /^Changes saved by /,
@@ -85,7 +85,7 @@ test.describe( 'Style Revisions', () => {
 
 		await page.click( 'role=button[name="Back"]' );
 
-		await page.getByRole( 'button', { name: 'Styles revisions' } ).click();
+		await page.getByRole( 'button', { name: 'Revisions' } ).click();
 
 		const unSavedButton = page.getByRole( 'option', {
 			name: /^Unsaved changes/,
@@ -121,7 +121,7 @@ test.describe( 'Style Revisions', () => {
 	} ) => {
 		await editor.canvas.locator( 'body' ).click();
 		await userGlobalStylesRevisions.openStylesPanel();
-		await page.getByRole( 'button', { name: 'Styles revisions' } ).click();
+		await page.getByRole( 'button', { name: 'Revisions' } ).click();
 		const lastRevisionItem = page
 			.getByLabel( 'Global styles revisions list' )
 			.getByRole( 'option' )
@@ -161,7 +161,7 @@ test.describe( 'Style Revisions', () => {
 		await userGlobalStylesRevisions.openStylesPanel();
 		// Search for exact names to avoid selecting the command bar button in the header.
 		const revisionsButton = page.getByRole( 'button', {
-			name: 'Styles revisions',
+			name: 'Revisions',
 			exact: true,
 		} );
 		const styleBookButton = page.getByRole( 'button', {
@@ -207,7 +207,7 @@ test.describe( 'Style Revisions', () => {
 		await editor.canvas.locator( 'body' ).click();
 		await userGlobalStylesRevisions.openStylesPanel();
 		const revisionsButton = page.getByRole( 'button', {
-			name: 'Styles revisions',
+			name: 'Revisions',
 		} );
 		const styleBookButton = page.getByRole( 'button', {
 			name: 'Style Book',
@@ -240,7 +240,7 @@ test.describe( 'Style Revisions', () => {
 		await userGlobalStylesRevisions.openStylesPanel();
 		await page
 			.getByRole( 'button', {
-				name: 'Styles revisions',
+				name: 'Revisions',
 				exact: true,
 			} )
 			.click();
@@ -270,7 +270,7 @@ test.describe( 'Style Revisions', () => {
 			} );
 		}
 		await userGlobalStylesRevisions.openStylesPanel();
-		await page.getByRole( 'button', { name: 'Styles revisions' } ).click();
+		await page.getByRole( 'button', { name: 'Revisions' } ).click();
 		const pagination = page.getByLabel(
 			'Global Styles pagination navigation'
 		);

From 45eb439b68c0189f2e91cbea75681e1a6ec5b560 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 12 Dec 2024 12:49:07 +0100
Subject: [PATCH 10/12] Move Revisions item to content panel.

---
 .../components/global-styles/screen-root.js   | 28 +++++---
 .../index.js                                  | 66 -------------------
 .../style.scss                                |  8 ---
 .../index.js                                  | 54 +--------------
 .../sidebar-navigation-screen/style.scss      |  5 --
 packages/edit-site/src/style.scss             |  1 -
 6 files changed, 20 insertions(+), 142 deletions(-)
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index 496aed26a056b7..e545cebd4bdbd0 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -11,7 +11,7 @@ import {
 	CardDivider,
 	CardMedia,
 } from '@wordpress/components';
-import { isRTL, __ } from '@wordpress/i18n';
+import { isRTL, __, _n, sprintf } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
@@ -31,6 +31,7 @@ import RootMenu from './root-menu';
 import PreviewStyles from './preview-styles';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import useGlobalStylesRevisions from './screen-revisions/use-global-styles-revisions';
 
 const { interfaceStore } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
@@ -43,10 +44,8 @@ function ScreenRoot() {
 		canEditCSS,
 		shouldClearCanvasContainerView,
 		isStyleBookOpened,
-		hasRevisions,
 		isRevisionsOpened,
 		isRevisionsStyleBookOpened,
-		isEditCanvasMode,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -80,20 +79,21 @@ function ScreenRoot() {
 						getActiveComplementaryArea( 'core' ) ||
 					! _isVisualEditorMode ||
 					! _isEditCanvasMode,
-				hasRevisions:
-					!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]
-						?.count,
 				isRevisionsStyleBookOpened:
 					'global-styles-revisions:style-book' ===
 					canvasContainerView,
 				isRevisionsOpened:
 					'global-styles-revisions' === canvasContainerView,
-				isEditCanvasMode: _isEditCanvasMode,
 			};
 		},
 		[ canvas ]
 	);
 
+	const { isLoading: isLoadingRevisions, revisionsCount } =
+		useGlobalStylesRevisions();
+
+	const shouldShowRevisionsItem = revisionsCount > 0 && ! isLoadingRevisions;
+
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
@@ -189,13 +189,23 @@ function ScreenRoot() {
 							</HStack>
 						</NavigationButtonAsItem>
 					) }
-					{ hasRevisions && isEditCanvasMode && (
+					{ shouldShowRevisionsItem && (
 						<NavigationButtonAsItem
 							path="/revisions"
 							onClick={ loadRevisionsView }
 						>
 							<HStack justify="space-between">
-								<FlexItem>{ __( 'Revisions' ) }</FlexItem>
+								<FlexItem>
+									{ sprintf(
+										/* translators: %d: Number of Styles revisions. */
+										_n(
+											'%d Revision',
+											'%d Revisions',
+											revisionsCount
+										),
+										revisionsCount
+									) }
+								</FlexItem>
 								<IconWithCurrentColor
 									icon={
 										isRTL() ? chevronLeft : chevronRight
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js
deleted file mode 100644
index f7e5f8bbec34de..00000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { _n, sprintf } from '@wordpress/i18n';
-import { addQueryArgs } from '@wordpress/url';
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { backup } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationItem from '../sidebar-navigation-item';
-
-export default function SidebarNavigationScreenDetailsFooter( {
-	record,
-	revisionsCount,
-	...otherProps
-} ) {
-	/*
-	 * There might be other items in the future,
-	 * but for now it's just modified date.
-	 * Later we might render a list of items and isolate
-	 * the following logic.
-	 */
-	const hrefProps = {};
-	const lastRevisionId =
-		record?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
-
-	// Use incoming prop first, then the record's version history, if available.
-	revisionsCount =
-		revisionsCount ||
-		record?._links?.[ 'version-history' ]?.[ 0 ]?.count ||
-		0;
-
-	/*
-	 * Enable the revisions link if there is a last revision and there is more than one revision.
-	 * This link is used for theme assets, e.g., templates, which have no database record until they're edited.
-	 * For these files there's only a "revision" after they're edited twice,
-	 * which means the revision.php page won't display a proper diff.
-	 * See: https://github.com/WordPress/gutenberg/issues/49164.
-	 */
-	if ( lastRevisionId && revisionsCount > 1 ) {
-		hrefProps.href = addQueryArgs( 'revision.php', {
-			revision: record?._links[ 'predecessor-version' ][ 0 ].id,
-		} );
-		hrefProps.as = 'a';
-	}
-	return (
-		<ItemGroup
-			size="large"
-			className="edit-site-sidebar-navigation-screen-details-footer"
-		>
-			<SidebarNavigationItem
-				icon={ backup }
-				{ ...hrefProps }
-				{ ...otherProps }
-			>
-				{ sprintf(
-					/* translators: %d: Number of Styles revisions. */
-					_n( '%d Revision', '%d Revisions', revisionsCount ),
-					revisionsCount
-				) }
-			</SidebarNavigationItem>
-		</ItemGroup>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss
deleted file mode 100644
index 0b48d451129662..00000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.edit-site-sidebar-navigation-screen-details-footer {
-	// Default background color (no link or button).
-	div.edit-site-sidebar-navigation-item.components-item:focus,
-	div.edit-site-sidebar-navigation-item.components-item:hover,
-	div.edit-site-sidebar-navigation-item.components-item[aria-current] {
-		background: none;
-	}
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
index a5902dc37362c5..5aaa8e516f4bcc 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -2,24 +2,17 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
-import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
-import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main';
 
-const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { name } = useLocation();
@@ -32,42 +25,6 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 }
 
 export default function SidebarNavigationScreenGlobalStyles() {
-	const history = useHistory();
-	const { path } = useLocation();
-	const {
-		revisions,
-		isLoading: isLoadingRevisions,
-		revisionsCount,
-	} = useGlobalStylesRevisions();
-	const { openGeneralSidebar } = useDispatch( editSiteStore );
-	const { setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
-	const { set: setPreference } = useDispatch( preferencesStore );
-
-	const openGlobalStyles = useCallback( async () => {
-		history.navigate( addQueryArgs( path, { canvas: 'edit' } ), {
-			transition: 'canvas-mode-edit-transition',
-		} );
-		return Promise.all( [
-			setPreference( 'core', 'distractionFree', false ),
-			openGeneralSidebar( 'edit-site/global-styles' ),
-		] );
-	}, [ path, history, openGeneralSidebar, setPreference ] );
-
-	const openRevisions = useCallback( async () => {
-		await openGlobalStyles();
-		// Open the global styles revisions once the canvas mode is set to edit,
-		// and the global styles sidebar is open. The global styles UI is responsible
-		// for redirecting to the revisions screen once the editor canvas container
-		// has been set to 'global-styles-revisions'.
-		setEditorCanvasContainerView( 'global-styles-revisions' );
-	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
-
-	// If there are no revisions, do not render a footer.
-	const shouldShowGlobalStylesFooter =
-		!! revisionsCount && ! isLoadingRevisions;
-
 	return (
 		<>
 			<SidebarNavigationScreen
@@ -79,15 +36,6 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				content={
 					<MainSidebarNavigationContent activeItem="styles-navigation-item" />
 				}
-				footer={
-					shouldShowGlobalStylesFooter && (
-						<SidebarNavigationScreenDetailsFooter
-							record={ revisions?.[ 0 ] }
-							revisionsCount={ revisionsCount }
-							onClick={ openRevisions }
-						/>
-					)
-				}
 			/>
 		</>
 	);
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index 71704653b4cd89..afdce99f6a1900 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -125,11 +125,6 @@
 	padding: $grid-unit-10 $grid-unit-20;
 	margin: $grid-unit-20 0 0;
 	border-top: 1px solid $gray-800;
-
-	.edit-site-sidebar-navigation-screen-details-footer {
-		margin-left: -$grid-unit-20;
-		margin-right: -$grid-unit-20;
-	}
 }
 
 /* In general style overrides are discouraged.
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 9f98c2c172e091..4774a3eef6f6ff 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -18,7 +18,6 @@
 @import "./components/sidebar-button/style.scss";
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";
-@import "./components/sidebar-navigation-screen-details-footer/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
 @import "./components/sidebar-navigation-screen-patterns/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";

From 3e47bf2774878e02ffc46b659a8ab947aca3bc4a Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 12 Dec 2024 13:14:34 +0100
Subject: [PATCH 11/12] Do not set focus on the Close revisions button in the
 canvas.

---
 .../edit-site/src/components/editor-canvas-container/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
index 050d2e19585cc4..fb3d2574c4cb79 100644
--- a/packages/edit-site/src/components/editor-canvas-container/index.js
+++ b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -10,7 +10,7 @@ import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
-import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
+import { useFocusReturn } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	store as editorStore,
@@ -74,7 +74,6 @@ function EditorCanvasContainer( {
 	);
 	const { setIsListViewOpened } = useDispatch( editorStore );
 
-	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const sectionFocusReturnRef = useFocusReturn();
 
 	function onCloseContainer() {
@@ -119,7 +118,6 @@ function EditorCanvasContainer( {
 					{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 					<section
 						className="edit-site-editor-canvas-container__section"
-						ref={ shouldShowCloseButton ? focusOnMountRef : null }
 						onKeyDown={ closeOnEscape }
 						aria-label={ title }
 					>

From df9819e25ba570bcf097650ffd7f15cc2ce3997b Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 12 Dec 2024 15:54:51 +0100
Subject: [PATCH 12/12] Adjust tests.

---
 .../components/global-styles/screen-root.js   |  1 +
 .../block-style-variations.spec.js            |  7 ++---
 test/e2e/specs/site-editor/style-book.spec.js |  3 ++
 .../user-global-styles-revisions.spec.js      | 28 ++++++-------------
 4 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index e545cebd4bdbd0..14f357b35f8404 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -193,6 +193,7 @@ function ScreenRoot() {
 						<NavigationButtonAsItem
 							path="/revisions"
 							onClick={ loadRevisionsView }
+							data-testid="revisions-button"
 						>
 							<HStack justify="space-between">
 								<FlexItem>
diff --git a/test/e2e/specs/site-editor/block-style-variations.spec.js b/test/e2e/specs/site-editor/block-style-variations.spec.js
index 03fc5398f4a0a5..86b1299fe07881 100644
--- a/test/e2e/specs/site-editor/block-style-variations.spec.js
+++ b/test/e2e/specs/site-editor/block-style-variations.spec.js
@@ -193,11 +193,8 @@ test.describe( 'Block Style Variations', () => {
 
 		// The initial revision styles should match the editor canvas.
 		await siteEditorBlockStyleVariations.openStylesPanel();
-		const revisionsButton = page.getByRole( 'button', {
-			name: 'Revisions',
-			exact: true,
-		} );
-		await revisionsButton.click();
+		await page.getByTestId( 'revisions-button' ).click();
+
 		await expect(
 			page.locator( 'iframe[name="revisions"]' )
 		).toBeVisible();
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index 350b1925385063..35445cdb631ebf 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -136,6 +136,9 @@ test.describe( 'Style Book', () => {
 			'style book should be visible'
 		).toBeVisible();
 
+		// Move focus inside the region.
+		await styleBookRegion.getByRole( 'button', { name: 'Close' } ).focus();
+
 		// Close Style Book via Escape key.
 		await page.keyboard.press( 'Escape' );
 		await expect(
diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
index f15904accc6e7d..425407597339ff 100644
--- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
+++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
@@ -48,7 +48,7 @@ test.describe( 'Style Revisions', () => {
 		await userGlobalStylesRevisions.openStylesPanel();
 
 		// Now there should be enough revisions to show the revisions UI.
-		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+		await page.getByTestId( 'revisions-button' ).click();
 
 		const revisionButtons = page.getByRole( 'option', {
 			name: /^Changes saved by /,
@@ -85,7 +85,7 @@ test.describe( 'Style Revisions', () => {
 
 		await page.click( 'role=button[name="Back"]' );
 
-		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+		await page.getByTestId( 'revisions-button' ).click();
 
 		const unSavedButton = page.getByRole( 'option', {
 			name: /^Unsaved changes/,
@@ -121,7 +121,7 @@ test.describe( 'Style Revisions', () => {
 	} ) => {
 		await editor.canvas.locator( 'body' ).click();
 		await userGlobalStylesRevisions.openStylesPanel();
-		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+		await page.getByTestId( 'revisions-button' ).click();
 		const lastRevisionItem = page
 			.getByLabel( 'Global styles revisions list' )
 			.getByRole( 'option' )
@@ -143,9 +143,7 @@ test.describe( 'Style Revisions', () => {
 			.getByRole( 'button', { name: 'Styles' } )
 			.click();
 
-		await navigationContainer
-			.getByRole( 'button', { name: 'Revisions' } )
-			.click();
+		await page.getByTestId( 'revisions-button' ).click();
 
 		await expect(
 			page.getByLabel( 'Global styles revisions list' )
@@ -160,10 +158,7 @@ test.describe( 'Style Revisions', () => {
 		await editor.canvas.locator( 'body' ).click();
 		await userGlobalStylesRevisions.openStylesPanel();
 		// Search for exact names to avoid selecting the command bar button in the header.
-		const revisionsButton = page.getByRole( 'button', {
-			name: 'Revisions',
-			exact: true,
-		} );
+		const revisionsButton = page.getByTestId( 'revisions-button' );
 		const styleBookButton = page.getByRole( 'button', {
 			name: 'Style Book',
 			exact: true,
@@ -206,9 +201,7 @@ test.describe( 'Style Revisions', () => {
 	} ) => {
 		await editor.canvas.locator( 'body' ).click();
 		await userGlobalStylesRevisions.openStylesPanel();
-		const revisionsButton = page.getByRole( 'button', {
-			name: 'Revisions',
-		} );
+		const revisionsButton = page.getByTestId( 'revisions-button' );
 		const styleBookButton = page.getByRole( 'button', {
 			name: 'Style Book',
 		} );
@@ -238,12 +231,7 @@ test.describe( 'Style Revisions', () => {
 	} ) => {
 		await editor.canvas.locator( 'body' ).click();
 		await userGlobalStylesRevisions.openStylesPanel();
-		await page
-			.getByRole( 'button', {
-				name: 'Revisions',
-				exact: true,
-			} )
-			.click();
+		await page.getByTestId( 'revisions-button' ).click();
 
 		// Open the command menu from the header.
 		await page
@@ -270,7 +258,7 @@ test.describe( 'Style Revisions', () => {
 			} );
 		}
 		await userGlobalStylesRevisions.openStylesPanel();
-		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+		await page.getByTestId( 'revisions-button' ).click();
 		const pagination = page.getByLabel(
 			'Global Styles pagination navigation'
 		);