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 }
 					>
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 ffa85b046ead71..14f357b35f8404 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,
@@ -12,11 +11,16 @@ 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 } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -25,32 +29,105 @@ 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';
+import useGlobalStylesRevisions from './screen-revisions/use-global-styles-revisions';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { interfaceStore } = unlock( editorPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 function ScreenRoot() {
-	const [ customCSS ] = useGlobalStyle( 'css' );
-
-	const { hasVariations, canEditCSS } = useSelect( ( select ) => {
-		const {
-			getEntityRecord,
-			__experimentalGetCurrentGlobalStylesId,
-			__experimentalGetCurrentThemeGlobalStylesVariations,
-		} = select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			hasVariations:
-				!! __experimentalGetCurrentThemeGlobalStylesVariations()
-					?.length,
-			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
-		};
-	}, [] );
+	const { query } = useLocation();
+	const { canvas = 'view' } = query;
+	const {
+		hasVariations,
+		canEditCSS,
+		shouldClearCanvasContainerView,
+		isStyleBookOpened,
+		isRevisionsOpened,
+		isRevisionsStyleBookOpened,
+	} = useSelect(
+		( select ) => {
+			const {
+				getEntityRecord,
+				__experimentalGetCurrentGlobalStylesId,
+				__experimentalGetCurrentThemeGlobalStylesVariations,
+			} = select( coreStore );
+
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+
+			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,
+				isRevisionsStyleBookOpened:
+					'global-styles-revisions:style-book' ===
+					canvasContainerView,
+				isRevisionsOpened:
+					'global-styles-revisions' === canvasContainerView,
+			};
+		},
+		[ canvas ]
+	);
+
+	const { isLoading: isLoadingRevisions, revisionsCount } =
+		useGlobalStylesRevisions();
+
+	const shouldShowRevisionsItem = revisionsCount > 0 && ! isLoadingRevisions;
+
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const loadAdditionalCSSView = () => {
+		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
@@ -88,22 +165,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 isSeparated>
 					<NavigationButtonAsItem path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
@@ -112,40 +174,49 @@ 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>
+					) }
+					{ shouldShowRevisionsItem && (
+						<NavigationButtonAsItem
+							path="/revisions"
+							onClick={ loadRevisionsView }
+							data-testid="revisions-button"
+						>
+							<HStack justify="space-between">
+								<FlexItem>
+									{ sprintf(
+										/* translators: %d: Number of Styles revisions. */
+										_n(
+											'%d Revision',
+											'%d Revisions',
+											revisionsCount
+										),
+										revisionsCount
+									) }
+								</FlexItem>
+								<IconWithCurrentColor
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
+							</HStack>
+						</NavigationButtonAsItem>
+					) }
 				</ItemGroup>
 			</CardBody>
-
-			{ canEditCSS && !! customCSS && (
-				<>
-					<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">
-								<HStack justify="space-between">
-									<FlexItem>
-										{ __( 'Additional CSS' ) }
-									</FlexItem>
-									<IconWithCurrentColor
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</HStack>
-							</NavigationButtonAsItem>
-						</ItemGroup>
-					</CardBody>
-				</>
-			) }
 		</Card>
 	);
 }
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(
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";
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 917bf1e0c9c69e..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 /,
@@ -83,7 +83,9 @@ test.describe( 'Style Revisions', () => {
 			.getByRole( 'option', { name: 'Color: Luminous vivid amber' } )
 			.click( { force: true } );
 
-		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+		await page.click( 'role=button[name="Back"]' );
+
+		await page.getByTestId( 'revisions-button' ).click();
 
 		const unSavedButton = page.getByRole( 'option', {
 			name: /^Unsaved changes/,
@@ -119,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' )
@@ -141,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' )
@@ -158,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,
@@ -185,7 +182,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(
@@ -204,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',
 		} );
@@ -236,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
@@ -268,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'
 		);