Style Revisions: Remove style revisions dropdown menu (#56454)

* Remove dropdown menu * Make sure setEditorCanvasContainerView() calls are made when needed so that toggle status works correctly when viewing any other sections of global styles. * Pre select the revisions count to prevent flashes of incorrect revision counts. Hat tip @ramonjd. * Remove CSS no longer needed. * Modify e2e test to reflect removal of menu item. * Fix issue with style book closing when browsing blocks. * Replace onClick with onBack to reduce confusion with screen header click action. * Change ordering of `isRevisionsOpened` const.
WordPress · Dec 7, 2023 · bdd3d5b · bdd3d5b
1 parent 98b6977
commit bdd3d5b
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 99 deletions.
diff --git 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 } ) {
+function ScreenHeader( { title, description, onBack } ) {
 	return (
 		<VStack spacing={ 0 }>
 			<View>
@@ -27,6 +27,7 @@ function ScreenHeader( { title, description } ) {
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							isSmall
 							aria-label={ __( 'Navigate to the previous view' ) }
+							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
@@ -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 ] =
@@ -61,6 +84,7 @@ function ScreenRevisions() {
 
 	const onCloseRevisions = () => {
 		goTo( '/' ); // Return to global styles main panel.
+		setEditorCanvasContainerView( undefined );
 	};
 
 	const restoreRevision = ( revision ) => {
@@ -119,10 +143,15 @@ function ScreenRevisions() {
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'Revisions' ) }
+				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.'
 				) }
+				onBack={ onCloseRevisions }
 			/>
 			{ isLoading && (
 				<Spinner className="edit-site-global-styles-screen-revisions__loading" />

diff --git 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;
-}
diff --git 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
  */
@@ -55,6 +50,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 } =
@@ -69,49 +65,56 @@ 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>
 			<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 GlobalStylesRevisionsMenu() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
 	const { revisionsCount } = useSelect( ( select ) => {
@@ -128,56 +131,38 @@ function GlobalStylesRevisionsMenu() {
 				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
 		};
 	}, [] );
-	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { goTo } = useNavigator();
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const isRevisionsOpened = useSelect(
+		( select ) =>
+			'global-styles-revisions' ===
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
 	const loadRevisions = () => {
 		setIsListViewOpened( false );
-		goTo( '/revisions' );
-		setEditorCanvasContainerView( 'global-styles-revisions' );
+
+		if ( ! isRevisionsOpened ) {
+			goTo( '/revisions' );
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+		} else {
+			goTo( '/' );
+			setEditorCanvasContainerView( undefined );
+		}
 	};
 	const hasRevisions = revisionsCount > 0;
 
 	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>
 	);
 }

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
@@ -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() {