Icons and stuff

WordPress · Jun 9, 2023 · b5d8ecb · b5d8ecb
1 parent 00f5e96
commit b5d8ecb
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 28 deletions.
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -179,3 +179,14 @@
 .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,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -16,9 +21,9 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { __, sprintf, _n } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { moreVertical } from '@wordpress/icons';
+import { backup, code, lifesaver, moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useEffect } from '@wordpress/element';
 
@@ -49,7 +54,7 @@ const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
 
 function GlobalStylesActionMenu() {
 	const { toggle } = useDispatch( preferencesStore );
-	const { canEditCSS, revisionsCount } = useSelect( ( select ) => {
+	const { canEditCSS } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
 			select( coreStore );
 
@@ -61,22 +66,10 @@ function GlobalStylesActionMenu() {
 		return {
 			canEditCSS:
 				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
-			revisionsCount:
-				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
 		};
 	}, [] );
-	const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
-	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { goTo } = useNavigator();
-	const { setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
 	const loadCustomCSS = () => goTo( '/css' );
-	const loadRevisions = () => {
-		goTo( '/revisions' );
-		setEditorCanvasContainerView( 'global-styles-revisions' );
-	};
-	const hasRevisions = revisionsCount >= 2;
 
 	return (
 		<GlobalStylesMenuFill>
@@ -87,28 +80,82 @@ function GlobalStylesActionMenu() {
 				{ () => (
 					<MenuGroup>
 						{ canEditCSS && (
-							<MenuItem onClick={ loadCustomCSS }>
+							<MenuItem onClick={ loadCustomCSS } icon={ code }>
 								{ __( 'Additional CSS' ) }
 							</MenuItem>
 						) }
 						<MenuItem
+							icon={ lifesaver }
 							onClick={ () =>
 								toggle( 'core/edit-site', 'welcomeGuideStyles' )
 							}
 						>
 							{ __( 'Welcome Guide' ) }
 						</MenuItem>
+					</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 { 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 { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
+	const [ canReset, onReset ] = useGlobalStylesReset();
+	const { goTo } = useNavigator();
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const loadRevisions = () => {
+		goTo( '/revisions' );
+		setEditorCanvasContainerView( 'global-styles-revisions' );
+	};
+	const hasRevisions = revisionsCount >= 2;
+
+	return (
+		<GlobalStylesMenuFill>
+			<DropdownMenu
+				icon={ backup }
+				label={ __( 'Styles revisions actions' ) }
+			>
+				{ () => (
+					<MenuGroup>
 						{ hasRevisions && (
-							<MenuItem onClick={ loadRevisions }>
-								{ sprintf(
-									/* translators: %d: number of revisions */
-									_n(
-										'%d Revision',
-										'%d Revisions',
-										revisionsCount
-									),
-									revisionsCount
-								) }
+							<MenuItem
+								onClick={ loadRevisions }
+								icon={
+									<RevisionsCountBadge>
+										{ revisionsCount }
+									</RevisionsCountBadge>
+								}
+							>
+								{ __( 'Revision history' ) }
 							</MenuItem>
 						) }
 						<MenuItem onClick={ onReset } disabled={ ! canReset }>
@@ -354,6 +401,7 @@ function GlobalStylesUI() {
 				<GlobalStylesStyleBook />
 			) }
 
+			<GlobalStylesRevisionsMenu />
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
 			<GlobalStylesEditorCanvasContainerLink />

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
@@ -136,9 +136,11 @@ class UserGlobalStylesRevisions {
 
 	async openRevisions() {
 		await this.page
-			.getByRole( 'button', { name: 'Styles actions' } )
+			.getByRole( 'button', { name: 'Styles revisions actions' } )
+			.click();
+		await this.page
+			.getByRole( 'menuitem', { name: /^Revision history/ } )
 			.click();
-		await this.page.getByRole( 'menuitem', { name: 'Revisions' } ).click();
 	}
 
 	async openStylesPanel() {