Styles panel: Rearrange the Revisions and Additional CSS toggles

packages/edit-site/src/components/editor-canvas-container/index.js

@@ -10,7 +10,7 @@ import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
-import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
+import { useFocusReturn } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	store as editorStore,
@@ -74,7 +74,6 @@ function EditorCanvasContainer( {
 	);
 	const { setIsListViewOpened } = useDispatch( editorStore );
 
-	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const sectionFocusReturnRef = useFocusReturn();
 
 	function onCloseContainer() {
@@ -119,7 +118,6 @@ function EditorCanvasContainer( {
 					{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 					<section
 						className="edit-site-editor-canvas-container__section"
-						ref={ shouldShowCloseButton ? focusOnMountRef : null }
 						onKeyDown={ closeOnEscape }
 						aria-label={ title }
 					>

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

@@ -3,7 +3,7 @@
  */
 import { FlexItem, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { styles, seen, backup } from '@wordpress/icons';
+import { styles, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -21,7 +21,6 @@ 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';
 import DefaultSidebar from './default-sidebar';
 
 const { interfaceStore } = unlock( editorPrivateApis );
@@ -34,7 +33,6 @@ export default function GlobalStylesSidebar() {
 		shouldClearCanvasContainerView,
 		isStyleBookOpened,
 		showListViewByDefault,
-		hasRevisions,
 		isRevisionsOpened,
 		isRevisionsStyleBookOpened,
 	} = useSelect(
@@ -51,13 +49,6 @@ export default function GlobalStylesSidebar() {
 				'core',
 				'showListViewByDefault'
 			);
-			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-				select( coreStore );
-
-			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-			const globalStyles = globalStylesId
-				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-				: undefined;
 
 			return {
 				isStyleBookOpened: 'style-book' === canvasContainerView,
@@ -67,9 +58,6 @@ export default function GlobalStylesSidebar() {
 					! _isVisualEditorMode ||
 					! _isEditCanvasMode,
 				showListViewByDefault: _showListViewByDefault,
-				hasRevisions:
-					!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]
-						?.count,
 				isRevisionsStyleBookOpened:
 					'global-styles-revisions:style-book' ===
 					canvasContainerView,
@@ -92,25 +80,6 @@ export default function GlobalStylesSidebar() {
 
 	const { setIsListViewOpened } = useDispatch( editorStore );
 
-	const toggleRevisions = () => {
-		setIsListViewOpened( false );
-		if ( isRevisionsStyleBookOpened ) {
-			setEditorCanvasContainerView( 'style-book' );
-			return;
-		}
-		if ( isRevisionsOpened ) {
-			setEditorCanvasContainerView( undefined );
-			return;
-		}
-
-		if ( isStyleBookOpened ) {
-			setEditorCanvasContainerView(
-				'global-styles-revisions:style-book'
-			);
-		} else {
-			setEditorCanvasContainerView( 'global-styles-revisions' );
-		}
-	};
 	const toggleStyleBook = () => {
 		if ( isRevisionsOpened ) {
 			setEditorCanvasContainerView(
@@ -181,20 +150,6 @@ export default function GlobalStylesSidebar() {
 								/>
 							</FlexItem>
 						) }
-						<FlexItem>
-							<Button
-								label={ __( 'Revisions' ) }
-								icon={ backup }
-								onClick={ toggleRevisions }
-								accessibleWhenDisabled
-								disabled={ ! hasRevisions }
-								isPressed={
-									isRevisionsOpened ||
-									isRevisionsStyleBookOpened
-								}
-								size="compact"
-							/>
-						</FlexItem>
 						<GlobalStylesMenuSlot />
 					</Flex>
 				</Flex>

packages/edit-site/src/components/global-styles/screen-root.js

@@ -4,19 +4,23 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
 	__experimentalVStack as VStack,
 	FlexItem,
 	CardBody,
 	Card,
 	CardDivider,
 	CardMedia,
 } from '@wordpress/components';
-import { isRTL, __ } from '@wordpress/i18n';
+import { isRTL, __, _n, sprintf } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -25,32 +29,105 @@ import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
 import RootMenu from './root-menu';
 import PreviewStyles from './preview-styles';
+import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import useGlobalStylesRevisions from './screen-revisions/use-global-styles-revisions';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { interfaceStore } = unlock( editorPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 function ScreenRoot() {
-	const [ customCSS ] = useGlobalStyle( 'css' );
-
-	const { hasVariations, canEditCSS } = useSelect( ( select ) => {
-		const {
-			getEntityRecord,
-			__experimentalGetCurrentGlobalStylesId,
-			__experimentalGetCurrentThemeGlobalStylesVariations,
-		} = select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			hasVariations:
-				!! __experimentalGetCurrentThemeGlobalStylesVariations()
-					?.length,
-			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
-		};
-	}, [] );
+	const { query } = useLocation();
+	const { canvas = 'view' } = query;
+	const {
+		hasVariations,
+		canEditCSS,
+		shouldClearCanvasContainerView,
+		isStyleBookOpened,
+		isRevisionsOpened,
+		isRevisionsStyleBookOpened,
+	} = useSelect(
+		( select ) => {
+			const {
+				getEntityRecord,
+				__experimentalGetCurrentGlobalStylesId,
+				__experimentalGetCurrentThemeGlobalStylesVariations,
+			} = select( coreStore );
+
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+
+			const { getActiveComplementaryArea } = select( interfaceStore );
+			const { getEditorCanvasContainerView } = unlock(
+				select( editSiteStore )
+			);
+			const canvasContainerView = getEditorCanvasContainerView();
+			const _isVisualEditorMode =
+				'visual' === select( editorStore ).getEditorMode();
+			const _isEditCanvasMode = 'edit' === canvas;
+
+			return {
+				hasVariations:
+					!! __experimentalGetCurrentThemeGlobalStylesVariations()
+						?.length,
+				canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
+				isStyleBookOpened: 'style-book' === canvasContainerView,
+				shouldClearCanvasContainerView:
+					'edit-site/global-styles' !==
+						getActiveComplementaryArea( 'core' ) ||
+					! _isVisualEditorMode ||
+					! _isEditCanvasMode,
+				isRevisionsStyleBookOpened:
+					'global-styles-revisions:style-book' ===
+					canvasContainerView,
+				isRevisionsOpened:
+					'global-styles-revisions' === canvasContainerView,
+			};
+		},
+		[ canvas ]
+	);
+
+	const { isLoading: isLoadingRevisions, revisionsCount } =
+		useGlobalStylesRevisions();
+
+	const shouldShowRevisionsItem = revisionsCount > 0 && ! isLoadingRevisions;
+
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const loadAdditionalCSSView = () => {
+		setEditorCanvasContainerView( 'global-styles-css' );
+	};
+
+	useEffect( () => {
+		if ( shouldClearCanvasContainerView ) {
+			setEditorCanvasContainerView( undefined );
+		}
+	}, [ shouldClearCanvasContainerView, setEditorCanvasContainerView ] );
+
+	const { setIsListViewOpened } = useDispatch( editorStore );
+
+	const loadRevisionsView = () => {
+		setIsListViewOpened( false );
+		if ( isRevisionsStyleBookOpened ) {
+			setEditorCanvasContainerView( 'style-book' );
+			return;
+		}
+		if ( isRevisionsOpened ) {
+			setEditorCanvasContainerView( undefined );
+			return;
+		}
+
+		if ( isStyleBookOpened ) {
+			setEditorCanvasContainerView(
+				'global-styles-revisions:style-book'
+			);
+		} else {
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+		}
+	};
 
 	return (
 		<Card
@@ -88,22 +165,7 @@ function ScreenRoot() {
 			<CardDivider />
 
 			<CardBody>
-				<Spacer
-					as="p"
-					paddingTop={ 2 }
-					/*
-					 * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
-					 * This is an ad hoc override for this instance and the Addtional CSS option below. Other options for matching the
-					 * the nav button inset should be looked at before reusing further.
-					 */
-					paddingX="13px"
-					marginBottom={ 4 }
-				>
-					{ __(
-						'Customize the appearance of specific blocks for the whole site.'
-					) }
-				</Spacer>
-				<ItemGroup>
+				<ItemGroup isSeparated>
 					<NavigationButtonAsItem path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
@@ -112,40 +174,49 @@ function ScreenRoot() {
 							/>
 						</HStack>
 					</NavigationButtonAsItem>
+					{ canEditCSS && (
+						<NavigationButtonAsItem
+							path="/css"
+							onClick={ loadAdditionalCSSView }
+						>
+							<HStack justify="space-between">
+								<FlexItem>{ __( 'Additional CSS' ) }</FlexItem>
+								<IconWithCurrentColor
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
+							</HStack>
+						</NavigationButtonAsItem>
+					) }
+					{ shouldShowRevisionsItem && (
+						<NavigationButtonAsItem
+							path="/revisions"
+							onClick={ loadRevisionsView }
+							data-testid="revisions-button"
+						>
+							<HStack justify="space-between">
+								<FlexItem>
+									{ sprintf(
+										/* translators: %d: Number of Styles revisions. */
+										_n(
+											'%d Revision',
+											'%d Revisions',
+											revisionsCount
+										),
+										revisionsCount
+									) }
+								</FlexItem>
+								<IconWithCurrentColor
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
+							</HStack>
+						</NavigationButtonAsItem>
+					) }
 				</ItemGroup>
 			</CardBody>
-
-			{ canEditCSS && !! customCSS && (
-				<>
-					<CardDivider />
-					<CardBody>
-						<Spacer
-							as="p"
-							paddingTop={ 2 }
-							paddingX="13px"
-							marginBottom={ 4 }
-						>
-							{ __(
-								'Add your own CSS to customize the appearance and layout of your site.'
-							) }
-						</Spacer>
-						<ItemGroup>
-							<NavigationButtonAsItem path="/css">
-								<HStack justify="space-between">
-									<FlexItem>
-										{ __( 'Additional CSS' ) }
-									</FlexItem>
-									<IconWithCurrentColor
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</HStack>
-							</NavigationButtonAsItem>
-						</ItemGroup>
-					</CardBody>
-				</>
-			) }
 		</Card>
 	);
 }