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] 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";