From 6b9bd081c7c0c17d220ab0be924c983eaa5197ce Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Wed, 22 Nov 2023 13:57:00 -0800
Subject: [PATCH 1/8] Remove dropdown menu

---
 .../src/components/global-styles/ui.js        | 141 +++++++++---------
 1 file changed, 69 insertions(+), 72 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 2e33d4b599b7b..d345574916f3e 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -1,7 +1,7 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
+// /**
+//  * External dependencies
+//  */
+// import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -55,6 +55,7 @@ const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
 	createSlotFill( SLOT_FILL_NAME );
 
 function GlobalStylesActionMenu() {
+	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { toggle } = useDispatch( preferencesStore );
 	const { canEditCSS } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
@@ -76,42 +77,56 @@ function GlobalStylesActionMenu() {
 		<GlobalStylesMenuFill>
 			<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>
 				{ ( { onClose } ) => (
-					<MenuGroup>
-						{ canEditCSS && (
-							<MenuItem onClick={ loadCustomCSS }>
-								{ __( 'Additional CSS' ) }
+					<>
+						<MenuGroup>
+							{ canEditCSS && (
+								<MenuItem onClick={ loadCustomCSS }>
+									{ __( 'Additional CSS' ) }
+								</MenuItem>
+							) }
+							<MenuItem
+								onClick={ () => {
+									toggle(
+										'core/edit-site',
+										'welcomeGuideStyles'
+									);
+									onClose();
+								} }
+							>
+								{ __( 'Welcome Guide' ) }
+							</MenuItem>
+						</MenuGroup>
+						<MenuGroup>
+							<MenuItem
+								onClick={ () => {
+									onReset();
+									onClose();
+								} }
+								disabled={ ! canReset }
+							>
+								{ __( 'Reset styles' ) }
 							</MenuItem>
-						) }
-						<MenuItem
-							onClick={ () => {
-								toggle(
-									'core/edit-site',
-									'welcomeGuideStyles'
-								);
-								onClose();
-							} }
-						>
-							{ __( 'Welcome Guide' ) }
-						</MenuItem>
-					</MenuGroup>
+						</MenuGroup>
+					</>
 				) }
 			</DropdownMenu>
 		</GlobalStylesMenuFill>
 	);
 }
 
-function RevisionsCountBadge( { className, children } ) {
-	return (
-		<span
-			className={ classnames(
-				className,
-				'edit-site-global-styles-sidebar__revisions-count-badge'
-			) }
-		>
-			{ children }
-		</span>
-	);
-}
+// function RevisionsCountBadge( { className, children } ) {
+// 	return (
+// 		<span
+// 			className={ classnames(
+// 				className,
+// 				'edit-site-global-styles-sidebar__revisions-count-badge'
+// 			) }
+// 		>
+// 			{ children }
+// 		</span>
+// 	);
+// }
+
 function GlobalStylesRevisionsMenu() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
 	const { revisionsCount } = useSelect( ( select ) => {
@@ -128,56 +143,38 @@ function GlobalStylesRevisionsMenu() {
 				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
 		};
 	}, [] );
-	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { goTo } = useNavigator();
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
 	const loadRevisions = () => {
 		setIsListViewOpened( false );
-		goTo( '/revisions' );
-		setEditorCanvasContainerView( 'global-styles-revisions' );
+
+		if ( ! isRevisionsOpened ) {
+			goTo( '/revisions' );
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+		} else {
+			goTo( '/' );
+			setEditorCanvasContainerView( '' );
+		}
 	};
 	const hasRevisions = revisionsCount > 0;
+	const isRevisionsOpened = useSelect(
+		( select ) =>
+			'global-styles-revisions' ===
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
 
 	return (
 		<GlobalStylesMenuFill>
-			{ canReset || hasRevisions ? (
-				<DropdownMenu icon={ backup } label={ __( 'Revisions' ) }>
-					{ ( { onClose } ) => (
-						<MenuGroup>
-							{ hasRevisions && (
-								<MenuItem
-									onClick={ loadRevisions }
-									icon={
-										<RevisionsCountBadge>
-											{ revisionsCount }
-										</RevisionsCountBadge>
-									}
-								>
-									{ __( 'Revision history' ) }
-								</MenuItem>
-							) }
-							<MenuItem
-								onClick={ () => {
-									onReset();
-									onClose();
-								} }
-								disabled={ ! canReset }
-							>
-								{ __( 'Reset to defaults' ) }
-							</MenuItem>
-						</MenuGroup>
-					) }
-				</DropdownMenu>
-			) : (
-				<Button
-					label={ __( 'Revisions' ) }
-					icon={ backup }
-					disabled
-					__experimentalIsFocusable
-				/>
-			) }
+			<Button
+				label={ __( 'Revisions' ) }
+				icon={ backup }
+				onClick={ loadRevisions }
+				disabled={ ! hasRevisions }
+				isPressed={ isRevisionsOpened }
+			/>
 		</GlobalStylesMenuFill>
 	);
 }

From e4d853010148519279f0ed2d673219fd60f1c9de Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Thu, 23 Nov 2023 11:58:42 -0800
Subject: [PATCH 2/8] Make sure setEditorCanvasContainerView() calls are made
 when needed so that toggle status works correctly when viewing any other
 sections of global styles.

---
 .../src/components/global-styles/header.js    | 14 ++++++++++
 .../global-styles/screen-revisions/index.js   | 11 +++++++-
 .../src/components/global-styles/ui.js        | 28 ++++++-------------
 3 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index f62820653ff92..1a894c068be71 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -9,10 +9,21 @@ import {
 	__experimentalView as View,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
 function ScreenHeader( { title, description } ) {
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+
 	return (
 		<VStack spacing={ 0 }>
 			<View>
@@ -27,6 +38,9 @@ function ScreenHeader( { title, description } ) {
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							isSmall
 							aria-label={ __( 'Navigate to the previous view' ) }
+							onClick={ () =>
+								setEditorCanvasContainerView( undefined )
+							}
 						/>
 						<Spacer>
 							<Heading
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
index d5c884f9d20cf..b9a3b3a62eaa6 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -61,6 +61,7 @@ function ScreenRevisions() {
 
 	const onCloseRevisions = () => {
 		goTo( '/' ); // Return to global styles main panel.
+		setEditorCanvasContainerView( undefined );
 	};
 
 	const restoreRevision = ( revision ) => {
@@ -116,10 +117,18 @@ function ScreenRevisions() {
 		!! currentlySelectedRevisionId && ! selectedRevisionMatchesEditorStyles;
 	const shouldShowRevisions = ! isLoading && revisions.length;
 
+	const revisionsCountBadge = () => {
+		if ( revisions.length ) {
+			return ' (' + revisions.length + ')';
+		}
+
+		return '';
+	};
+
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'Revisions' ) }
+				title={ __( 'Revisions' ) + revisionsCountBadge() }
 				description={ __(
 					'Click on previously saved styles to preview them. To restore a selected version to the editor, hit "Apply." When you\'re ready, use the Save button to save your changes.'
 				) }
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index d345574916f3e..e57294106a09d 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -1,8 +1,3 @@
-// /**
-//  * External dependencies
-//  */
-// import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -70,8 +65,14 @@ function GlobalStylesActionMenu() {
 			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
 		};
 	}, [] );
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
 	const { goTo } = useNavigator();
-	const loadCustomCSS = () => goTo( '/css' );
+	const loadCustomCSS = () => {
+		setEditorCanvasContainerView( 'global-styles-css' );
+		goTo( '/css' );
+	};
 
 	return (
 		<GlobalStylesMenuFill>
@@ -114,19 +115,6 @@ function GlobalStylesActionMenu() {
 	);
 }
 
-// function RevisionsCountBadge( { className, children } ) {
-// 	return (
-// 		<span
-// 			className={ classnames(
-// 				className,
-// 				'edit-site-global-styles-sidebar__revisions-count-badge'
-// 			) }
-// 		>
-// 			{ children }
-// 		</span>
-// 	);
-// }
-
 function GlobalStylesRevisionsMenu() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
 	const { revisionsCount } = useSelect( ( select ) => {
@@ -155,7 +143,7 @@ function GlobalStylesRevisionsMenu() {
 			setEditorCanvasContainerView( 'global-styles-revisions' );
 		} else {
 			goTo( '/' );
-			setEditorCanvasContainerView( '' );
+			setEditorCanvasContainerView( undefined );
 		}
 	};
 	const hasRevisions = revisionsCount > 0;

From 9f64eef827372569fdd5d6c8834e09cd62d0c30b Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Fri, 24 Nov 2023 09:55:30 -0800
Subject: [PATCH 3/8] Pre select the revisions count to prevent flashes of
 incorrect revision counts. Hat tip @ramonjd.

---
 .../global-styles/screen-revisions/index.js   | 55 +++++++++++++------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
index b9a3b3a62eaa6..1fda22a4f543f 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	Button,
 	__experimentalUseNavigator as useNavigator,
@@ -10,6 +10,7 @@ import {
 	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useContext, useState, useEffect } from '@wordpress/element';
 import {
 	privateApis as blockEditorPrivateApis,
@@ -35,14 +36,36 @@ function ScreenRevisions() {
 	const { goTo } = useNavigator();
 	const { user: currentEditorGlobalStyles, setUserConfig } =
 		useContext( GlobalStylesContext );
-	const { blocks, editorCanvasContainerView } = useSelect( ( select ) => {
-		return {
-			editorCanvasContainerView: unlock(
-				select( editSiteStore )
-			).getEditorCanvasContainerView(),
-			blocks: select( blockEditorStore ).getBlocks(),
-		};
-	}, [] );
+	const { blocks, editorCanvasContainerView, revisionsCount } = useSelect(
+		( select ) => {
+			const {
+				getEntityRecord,
+				__experimentalGetCurrentGlobalStylesId,
+				__experimentalGetDirtyEntityRecords,
+			} = select( coreStore );
+			const isDirty = __experimentalGetDirtyEntityRecords().length > 0;
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+			let _revisionsCount =
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count || 0;
+			// one for the reset item.
+			_revisionsCount++;
+			// one for any dirty changes (unsaved).
+			if ( isDirty ) {
+				_revisionsCount++;
+			}
+			return {
+				editorCanvasContainerView: unlock(
+					select( editSiteStore )
+				).getEditorCanvasContainerView(),
+				blocks: select( blockEditorStore ).getBlocks(),
+				revisionsCount: _revisionsCount,
+			};
+		},
+		[]
+	);
 	const { revisions, isLoading, hasUnsavedChanges } =
 		useGlobalStylesRevisions();
 	const [ currentlySelectedRevision, setCurrentlySelectedRevision ] =
@@ -117,18 +140,14 @@ function ScreenRevisions() {
 		!! currentlySelectedRevisionId && ! selectedRevisionMatchesEditorStyles;
 	const shouldShowRevisions = ! isLoading && revisions.length;
 
-	const revisionsCountBadge = () => {
-		if ( revisions.length ) {
-			return ' (' + revisions.length + ')';
-		}
-
-		return '';
-	};
-
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'Revisions' ) + revisionsCountBadge() }
+				title={
+					revisionsCount &&
+					// translators: %s: number of revisions.
+					sprintf( __( 'Revisions (%s)' ), revisionsCount )
+				}
 				description={ __(
 					'Click on previously saved styles to preview them. To restore a selected version to the editor, hit "Apply." When you\'re ready, use the Save button to save your changes.'
 				) }

From 944279df7d1c560dfed49062e137e0efbc814a30 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Fri, 24 Nov 2023 09:57:24 -0800
Subject: [PATCH 4/8] Remove CSS no longer needed.

---
 .../edit-site/src/components/global-styles/style.scss | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 3560ef139fa3f..a899495cc332b 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -191,14 +191,3 @@
 .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
 	fill: currentColor;
 }
-
-[class][class].edit-site-global-styles-sidebar__revisions-count-badge {
-	align-items: center;
-	background: $gray-800;
-	border-radius: 2px;
-	color: $white;
-	display: inline-flex;
-	justify-content: center;
-	min-height: $icon-size;
-	min-width: $icon-size;
-}

From 1e590635d673d4a94da3f7bd3c2a30623364ea78 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Fri, 24 Nov 2023 10:28:20 -0800
Subject: [PATCH 5/8] Modify e2e test to reflect removal of menu item.

---
 .../e2e/specs/site-editor/user-global-styles-revisions.spec.js | 3 ---
 1 file changed, 3 deletions(-)

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 61fbf7c795a60..2d51b5ac5014b 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
@@ -147,9 +147,6 @@ class UserGlobalStylesRevisions {
 			.getByRole( 'menubar', { name: 'Styles actions' } )
 			.click();
 		await this.page.getByRole( 'button', { name: 'Revisions' } ).click();
-		await this.page
-			.getByRole( 'menuitem', { name: /^Revision history/ } )
-			.click();
 	}
 
 	async openStylesPanel() {

From 381a6abf5868d464befdd4a4fe9cf41f6465fdde Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Fri, 24 Nov 2023 11:04:25 -0800
Subject: [PATCH 6/8] Fix issue with style book closing when browsing blocks.

---
 .../src/components/global-styles/header.js      | 17 ++---------------
 .../global-styles/screen-revisions/index.js     |  1 +
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index 1a894c068be71..02234b8472784 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -9,21 +9,10 @@ import {
 	__experimentalView as View,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-
-function ScreenHeader( { title, description } ) {
-	const { setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
-
+function ScreenHeader( { title, description, onClick } ) {
 	return (
 		<VStack spacing={ 0 }>
 			<View>
@@ -38,9 +27,7 @@ function ScreenHeader( { title, description } ) {
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							isSmall
 							aria-label={ __( 'Navigate to the previous view' ) }
-							onClick={ () =>
-								setEditorCanvasContainerView( undefined )
-							}
+							onClick={ onClick }
 						/>
 						<Spacer>
 							<Heading
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
index 1fda22a4f543f..769ca5f375302 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -151,6 +151,7 @@ function ScreenRevisions() {
 				description={ __(
 					'Click on previously saved styles to preview them. To restore a selected version to the editor, hit "Apply." When you\'re ready, use the Save button to save your changes.'
 				) }
+				onClick={ onCloseRevisions }
 			/>
 			{ isLoading && (
 				<Spinner className="edit-site-global-styles-screen-revisions__loading" />

From 9abf98cce888ac7dfe4ff24313d177fe3f1b691b Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Mon, 27 Nov 2023 10:00:00 -0800
Subject: [PATCH 7/8] Replace onClick with onBack to reduce confusion with
 screen header click action.

---
 packages/edit-site/src/components/global-styles/header.js     | 4 ++--
 .../src/components/global-styles/screen-revisions/index.js    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index 02234b8472784..e6da4115217f5 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -12,7 +12,7 @@ import {
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
-function ScreenHeader( { title, description, onClick } ) {
+function ScreenHeader( { title, description, onBack } ) {
 	return (
 		<VStack spacing={ 0 }>
 			<View>
@@ -27,7 +27,7 @@ function ScreenHeader( { title, description, onClick } ) {
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							isSmall
 							aria-label={ __( 'Navigate to the previous view' ) }
-							onClick={ onClick }
+							onClick={ onBack }
 						/>
 						<Spacer>
 							<Heading
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
index 769ca5f375302..90bf68e579cb7 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -151,7 +151,7 @@ function ScreenRevisions() {
 				description={ __(
 					'Click on previously saved styles to preview them. To restore a selected version to the editor, hit "Apply." When you\'re ready, use the Save button to save your changes.'
 				) }
-				onClick={ onCloseRevisions }
+				onBack={ onCloseRevisions }
 			/>
 			{ isLoading && (
 				<Spinner className="edit-site-global-styles-screen-revisions__loading" />

From d6eda1c680771ed829d917ff986efa7aae77db0e Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Mon, 27 Nov 2023 10:05:08 -0800
Subject: [PATCH 8/8] Change ordering of `isRevisionsOpened` const.

---
 .../edit-site/src/components/global-styles/ui.js     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index e57294106a09d..c8d72205c3bed 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -135,6 +135,12 @@ function GlobalStylesRevisionsMenu() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const isRevisionsOpened = useSelect(
+		( select ) =>
+			'global-styles-revisions' ===
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
 	const loadRevisions = () => {
 		setIsListViewOpened( false );
 
@@ -147,12 +153,6 @@ function GlobalStylesRevisionsMenu() {
 		}
 	};
 	const hasRevisions = revisionsCount > 0;
-	const isRevisionsOpened = useSelect(
-		( select ) =>
-			'global-styles-revisions' ===
-			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
-		[]
-	);
 
 	return (
 		<GlobalStylesMenuFill>