Move Revisions item to content panel.

WordPress · Dec 12, 2024 · 45eb439 · 45eb439
1 parent 13619a1
commit 45eb439
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 142 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
@@ -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
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
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
@@ -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
@@ -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
@@ -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";