Global styles: relocate revisions from fill to sidebar component

packages/edit-site/src/components/global-styles/ui.js

@@ -6,7 +6,6 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalUseNavigator as useNavigator,
 	createSlotFill,
-	Button,
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
@@ -19,7 +18,7 @@ import {
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { backup, moreVertical } from '@wordpress/icons';
+import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useEffect } from '@wordpress/element';
 
@@ -115,58 +114,6 @@ function GlobalStylesActionMenu() {
 	);
 }
 
-function GlobalStylesRevisionsMenu() {
-	const { setIsListViewOpened } = useDispatch( editSiteStore );
-	const { revisionsCount } = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			revisionsCount:
-				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
-		};
-	}, [] );
-	const { goTo } = useNavigator();
-	const { setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
-	const isRevisionsOpened = useSelect(
-		( select ) =>
-			'global-styles-revisions' ===
-			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
-		[]
-	);
-	const loadRevisions = () => {
-		setIsListViewOpened( false );
-
-		if ( ! isRevisionsOpened ) {
-			goTo( '/revisions' );
-			setEditorCanvasContainerView( 'global-styles-revisions' );
-		} else {
-			goTo( '/' );
-			setEditorCanvasContainerView( undefined );
-		}
-	};
-	const hasRevisions = revisionsCount > 0;
-
-	return (
-		<GlobalStylesMenuFill>
-			<Button
-				label={ __( 'Revisions' ) }
-				icon={ backup }
-				onClick={ loadRevisions }
-				disabled={ ! hasRevisions }
-				isPressed={ isRevisionsOpened }
-			/>
-		</GlobalStylesMenuFill>
-	);
-}
-
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
 		<NavigatorScreen
@@ -403,7 +350,6 @@ function GlobalStylesUI() {
 				<GlobalStylesStyleBook />
 			) }
 
-			<GlobalStylesRevisionsMenu />
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
 			<GlobalStylesEditorCanvasContainerLink />

packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -1,9 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';
+import {
+	FlexItem,
+	FlexBlock,
+	Flex,
+	Button,
+	__experimentalUseNavigator as useNavigator,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { styles, seen } from '@wordpress/icons';
+import { styles, seen, backup } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { store as interfaceStore } from '@wordpress/interface';
@@ -17,33 +23,48 @@ 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';
 
 export default function GlobalStylesSidebar() {
 	const {
 		shouldClearCanvasContainerView,
 		isStyleBookOpened,
 		showListViewByDefault,
+		hasRevisions,
+		isRevisionsOpened,
 	} = useSelect( ( select ) => {
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const { getEditorCanvasContainerView, getCanvasMode } = unlock(
 			select( editSiteStore )
 		);
+		const canvasContainerView = getEditorCanvasContainerView();
 		const _isVisualEditorMode =
 			'visual' === select( editSiteStore ).getEditorMode();
 		const _isEditCanvasMode = 'edit' === getCanvasMode();
 		const _showListViewByDefault = select( preferencesStore ).get(
 			'core/edit-site',
 			'showListViewByDefault'
 		);
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
 
 		return {
-			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
+			isStyleBookOpened: 'style-book' === canvasContainerView,
 			shouldClearCanvasContainerView:
 				'edit-site/global-styles' !==
 					getActiveComplementaryArea( 'core/edit-site' ) ||
 				! _isVisualEditorMode ||
 				! _isEditCanvasMode,
 			showListViewByDefault: _showListViewByDefault,
+			hasRevisions:
+				!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count,
+			isRevisionsOpened:
+				'global-styles-revisions' === canvasContainerView,
 		};
 	}, [] );
 	const { setEditorCanvasContainerView } = unlock(
@@ -57,6 +78,18 @@ export default function GlobalStylesSidebar() {
 	}, [ shouldClearCanvasContainerView ] );
 
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
+	const { goTo } = useNavigator();
+	const loadRevisions = () => {
+		setIsListViewOpened( false );
+
+		if ( ! isRevisionsOpened ) {
+			goTo( '/revisions' );
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+		} else {
+			goTo( '/' );
+			setEditorCanvasContainerView( undefined );
+		}
+	};
 
 	return (
 		<DefaultSidebar
@@ -91,6 +124,15 @@ export default function GlobalStylesSidebar() {
 							} }
 						/>
 					</FlexItem>
+					<FlexItem>
+						<Button
+							label={ __( 'Revisions' ) }
+							icon={ backup }
+							onClick={ loadRevisions }
+							disabled={ ! hasRevisions }
+							isPressed={ isRevisionsOpened }
+						/>
+					</FlexItem>
 					<GlobalStylesMenuSlot />
 				</Flex>
 			}