The revisions button is a permanent member of the global styles sideb…

…ar, so it doesn't need to be included via fill. (#57034) This commit moves the button from ui.js to the sidebar component in the hope that it will make both maintenance and working with parallel states, e.g., style book visibility easier later.
WordPress · Dec 14, 2023 · 2fb3c57 · 2fb3c57 · github-actions · Dec 14, 2023
1 parent e103afb
commit 2fb3c57
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 58 deletions.
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/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 />

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/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>
 			}