@wordpress/edit-site 6.9.0 → 6.10.0

package/build-style/style.css

@@ -827,44 +827,31 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list li {
   margin: 0;
-  cursor: pointer;
   border-top: 1px solid #f0f0f0;
 }
 .dataviews-view-list li .dataviews-view-list__item-wrapper {
   position: relative;
-  border-radius: 4px;
-}
-.dataviews-view-list li .dataviews-view-list__item-wrapper > * {
-  width: 100%;
+  padding: 16px 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions {
-  position: absolute;
-  top: 16px;
-  right: 0;
+  flex: 0;
+  overflow: hidden;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions > div {
   height: 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions .components-button {
+  position: relative;
+  z-index: 1;
   opacity: 0;
 }
-.dataviews-view-list li:has(.dataviews-view-list__fields:empty) .dataviews-view-list__item-actions {
-  top: 50%;
-  transform: translateY(-50%);
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions {
-  background: #f8f8f8;
-  padding-left: 8px;
-  margin-right: 24px;
-  box-shadow: -12px 0 8px 0 #f8f8f8;
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions {
+  flex-basis: min-content;
+  overflow: unset;
+  margin-inline: 8px 0;
 }
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions .components-button, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions .components-button, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions .components-button {
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions .components-button {
   opacity: 1;
-  position: static;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions {
-  background-color: #f7f8ff;
-  box-shadow: -12px 0 8px 0 #f7f8ff;
 }
 .dataviews-view-list li.is-selected.is-selected {
   border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
@@ -897,26 +884,36 @@ ul.dataviews-view-list {
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list .dataviews-view-list__item {
-  box-sizing: border-box;
-  padding: 16px 24px;
-  width: 100%;
+  position: absolute;
+  z-index: 1;
+  inset: 0;
   scroll-margin: 8px 0;
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+}
+.dataviews-view-list .dataviews-view-list__item:focus-visible {
+  outline: none;
 }
 .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
   position: absolute;
   content: "";
-  top: var(--wp-admin-border-width-focus);
-  right: var(--wp-admin-border-width-focus);
-  bottom: var(--wp-admin-border-width-focus);
-  left: var(--wp-admin-border-width-focus);
+  inset: var(--wp-admin-border-width-focus);
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   border-radius: 2px;
+  outline: 2px solid transparent;
 }
-.dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
+.dataviews-view-list .dataviews-view-list__primary-field {
+  flex: 1;
   min-height: 24px;
   line-height: 24px;
   overflow: hidden;
 }
+.dataviews-view-list .dataviews-view-list__primary-field:has(a, button) {
+  z-index: 1;
+}
 .dataviews-view-list .dataviews-view-list__media-wrapper {
   width: 52px;
   height: 52px;
@@ -948,6 +945,7 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list .dataviews-view-list__field-wrapper {
   min-height: 52px;
+  flex-grow: 1;
 }
 .dataviews-view-list .dataviews-view-list__fields {
   color: #757575;
@@ -1155,8 +1153,7 @@ ul.dataviews-view-list {
   align-items: center;
   padding: 6px 0;
   line-height: 20px;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
 }
 
 .dataforms-layouts-panel__field-control {
@@ -2546,7 +2543,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _u3rbd_slide-from-right {
+@keyframes _s81uu_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2556,7 +2553,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _u3rbd_slide-from-left {
+@keyframes _s81uu_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2612,10 +2609,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _u3rbd_slide-from-left;
+  animation-name: _s81uu_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _u3rbd_slide-from-right;
+  animation-name: _s81uu_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2630,7 +2627,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 3px solid transparent;
 }
-.edit-site-sidebar-button:hover, .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not([aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
+.edit-site-sidebar-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not(:disabled, [aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
   color: #f0f0f0;
 }
 
@@ -2725,7 +2722,9 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-sidebar-navigation-screen__title {
   flex-grow: 1;
   overflow-wrap: break-word;
-  padding: 2px 0 0 0;
+}
+.edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title, .edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title .edit-site-sidebar-navigation-screen__title {
+  line-height: 32px;
 }
 
 .edit-site-sidebar-navigation-screen__actions {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.9.0",
+	"version": "6.10.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,47 +27,47 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
+		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.9.0",
-		"@wordpress/api-fetch": "^7.9.0",
-		"@wordpress/blob": "^4.9.0",
-		"@wordpress/block-editor": "^14.4.0",
-		"@wordpress/block-library": "^9.9.0",
-		"@wordpress/blocks": "^13.9.0",
-		"@wordpress/commands": "^1.9.0",
-		"@wordpress/components": "^28.9.0",
-		"@wordpress/compose": "^7.9.0",
-		"@wordpress/core-commands": "^1.9.0",
-		"@wordpress/core-data": "^7.9.0",
-		"@wordpress/data": "^10.9.0",
-		"@wordpress/dataviews": "^4.5.0",
-		"@wordpress/date": "^5.9.0",
-		"@wordpress/deprecated": "^4.9.0",
-		"@wordpress/dom": "^4.9.0",
-		"@wordpress/editor": "^14.9.0",
-		"@wordpress/element": "^6.9.0",
-		"@wordpress/escape-html": "^3.9.0",
-		"@wordpress/hooks": "^4.9.0",
-		"@wordpress/html-entities": "^4.9.0",
-		"@wordpress/i18n": "^5.9.0",
-		"@wordpress/icons": "^10.9.0",
-		"@wordpress/keyboard-shortcuts": "^5.9.0",
-		"@wordpress/keycodes": "^4.9.0",
-		"@wordpress/notices": "^5.9.0",
-		"@wordpress/patterns": "^2.9.0",
-		"@wordpress/plugins": "^7.9.0",
-		"@wordpress/preferences": "^4.9.0",
-		"@wordpress/primitives": "^4.9.0",
-		"@wordpress/priority-queue": "^3.9.0",
-		"@wordpress/private-apis": "^1.9.0",
-		"@wordpress/reusable-blocks": "^5.9.0",
-		"@wordpress/router": "^1.9.0",
-		"@wordpress/style-engine": "^2.9.0",
-		"@wordpress/url": "^4.9.0",
-		"@wordpress/viewport": "^6.9.0",
-		"@wordpress/widgets": "^4.9.0",
-		"@wordpress/wordcount": "^4.9.0",
+		"@wordpress/a11y": "^4.10.0",
+		"@wordpress/api-fetch": "^7.10.0",
+		"@wordpress/blob": "^4.10.0",
+		"@wordpress/block-editor": "^14.5.0",
+		"@wordpress/block-library": "^9.10.0",
+		"@wordpress/blocks": "^13.10.0",
+		"@wordpress/commands": "^1.10.0",
+		"@wordpress/components": "^28.10.0",
+		"@wordpress/compose": "^7.10.0",
+		"@wordpress/core-commands": "^1.10.0",
+		"@wordpress/core-data": "^7.10.0",
+		"@wordpress/data": "^10.10.0",
+		"@wordpress/dataviews": "^4.6.0",
+		"@wordpress/date": "^5.10.0",
+		"@wordpress/deprecated": "^4.10.0",
+		"@wordpress/dom": "^4.10.0",
+		"@wordpress/editor": "^14.10.0",
+		"@wordpress/element": "^6.10.0",
+		"@wordpress/escape-html": "^3.10.0",
+		"@wordpress/hooks": "^4.10.0",
+		"@wordpress/html-entities": "^4.10.0",
+		"@wordpress/i18n": "^5.10.0",
+		"@wordpress/icons": "^10.10.0",
+		"@wordpress/keyboard-shortcuts": "^5.10.0",
+		"@wordpress/keycodes": "^4.10.0",
+		"@wordpress/notices": "^5.10.0",
+		"@wordpress/patterns": "^2.10.0",
+		"@wordpress/plugins": "^7.10.0",
+		"@wordpress/preferences": "^4.10.0",
+		"@wordpress/primitives": "^4.10.0",
+		"@wordpress/priority-queue": "^3.10.0",
+		"@wordpress/private-apis": "^1.10.0",
+		"@wordpress/reusable-blocks": "^5.10.0",
+		"@wordpress/router": "^1.10.0",
+		"@wordpress/style-engine": "^2.10.0",
+		"@wordpress/url": "^4.10.0",
+		"@wordpress/viewport": "^6.10.0",
+		"@wordpress/widgets": "^4.10.0",
+		"@wordpress/wordcount": "^4.10.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2e5495c635910cb34bfaca3c6258d2e989f66214"
+	"gitHead": "ab34a7ac935fd1478eac63b596242d83270897ee"
 }

package/src/components/editor/index.js

@@ -230,7 +230,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 						'show-icon-labels': showIconLabels,
 					} ) }
 					styles={ styles }
-					enableRegionNavigation={ false }
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />
 					}

package/src/components/global-styles/font-families.js

@@ -6,9 +6,11 @@ import {
 	__experimentalText as Text,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
 	Button,
 } from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { settings } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -25,6 +27,19 @@ import { unlock } from '../../lock-unlock';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
+/**
+ * Maps the fonts with the source, if available.
+ *
+ * @param {Array}  fonts  The fonts to map.
+ * @param {string} source The source of the fonts.
+ * @return {Array} The mapped fonts.
+ */
+function mapFontsWithSource( fonts, source ) {
+	return fonts
+		? fonts.map( ( f ) => setUIValuesNeeded( f, { source } ) )
+		: [];
+}
+
 function FontFamilies() {
 	const { baseCustomFonts, modalTabOpen, setModalTabOpen } =
 		useContext( FontLibraryContext );
@@ -34,18 +49,12 @@ function FontFamilies() {
 		undefined,
 		'base'
 	);
-	const themeFonts = fontFamilies?.theme
-		? fontFamilies.theme
-				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
-				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
-		: [];
-	const customFonts = fontFamilies?.custom
-		? fontFamilies.custom
-				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
-				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
-		: [];
-	const hasFonts = 0 < customFonts.length || 0 < themeFonts.length;
-
+	const themeFonts = mapFontsWithSource( fontFamilies?.theme, 'theme' );
+	const customFonts = mapFontsWithSource( fontFamilies?.custom, 'custom' );
+	const activeFonts = [ ...themeFonts, ...customFonts ].sort( ( a, b ) =>
+		a.name.localeCompare( b.name )
+	);
+	const hasFonts = 0 < activeFonts.length;
 	const hasInstalledFonts =
 		hasFonts ||
 		baseFontFamilies?.theme?.length > 0 ||
@@ -60,12 +69,20 @@ function FontFamilies() {
 				/>
 			) }
 
-			<VStack spacing={ 4 }>
-				{ [ ...themeFonts, ...customFonts ].length > 0 && (
+			<VStack spacing={ 2 }>
+				<HStack justify="space-between">
+					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+					<Button
+						onClick={ () => setModalTabOpen( 'installed-fonts' ) }
+						label={ __( 'Manage fonts' ) }
+						icon={ settings }
+						size="small"
+					/>
+				</HStack>
+				{ activeFonts.length > 0 && (
 					<>
-						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 						<ItemGroup size="large" isBordered isSeparated>
-							{ themeFonts.map( ( font ) => (
+							{ activeFonts.map( ( font ) => (
 								<FontFamilyItem
 									key={ font.slug }
 									font={ font }
@@ -75,31 +92,30 @@ function FontFamilies() {
 					</>
 				) }
 				{ ! hasFonts && (
-					<VStack>
-						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+					<>
 						<Text as="p">
 							{ hasInstalledFonts
 								? __( 'No fonts activated.' )
 								: __( 'No fonts installed.' ) }
 						</Text>
-					</VStack>
+						<Button
+							className="edit-site-global-styles-font-families__manage-fonts"
+							variant="secondary"
+							__next40pxDefaultSize
+							onClick={ () => {
+								setModalTabOpen(
+									hasInstalledFonts
+										? 'installed-fonts'
+										: 'upload-fonts'
+								);
+							} }
+						>
+							{ hasInstalledFonts
+								? __( 'Manage fonts' )
+								: __( 'Add fonts' ) }
+						</Button>
+					</>
 				) }
-				<Button
-					className="edit-site-global-styles-font-families__manage-fonts"
-					variant="secondary"
-					__next40pxDefaultSize
-					onClick={ () => {
-						setModalTabOpen(
-							hasInstalledFonts
-								? 'installed-fonts'
-								: 'upload-fonts'
-						);
-					} }
-				>
-					{ hasInstalledFonts
-						? __( 'Manage fonts' )
-						: __( 'Add fonts' ) }
-				</Button>
 			</VStack>
 		</>
 	);

package/src/components/global-styles/font-sizes/font-size.js

@@ -36,7 +36,7 @@ function FontSize() {
 
 	const {
 		params: { origin, slug },
-		goTo,
+		goBack,
 	} = useNavigator();
 
 	const [ fontSizes, setFontSizes ] = useGlobalSetting(
@@ -53,10 +53,10 @@ function FontSize() {
 
 	// Navigate to the font sizes list if the font size is not available.
 	useEffect( () => {
-		if ( ! fontSize ) {
-			goTo( '/typography/font-sizes/', { isBack: true } );
+		if ( !! slug && ! fontSize ) {
+			goBack();
 		}
-	}, [ fontSize, goTo ] );
+	}, [ slug, fontSize, goBack ] );
 
 	if ( ! origin || ! slug || ! fontSize ) {
 		return null;
@@ -158,7 +158,6 @@ function FontSize() {
 							__( 'Manage the font size %s.' ),
 							fontSize.name
 						) }
-						onBack={ () => goTo( '/typography/font-sizes/' ) }
 					/>
 					{ origin === 'custom' && (
 						<FlexItem>
@@ -197,7 +196,11 @@ function FontSize() {
 				</HStack>
 
 				<View>
-					<Spacer paddingX={ 4 }>
+					<Spacer
+						paddingX={ 4 }
+						marginBottom={ 0 }
+						paddingBottom={ 6 }
+					>
 						<VStack spacing={ 4 }>
 							<FlexItem>
 								<FontSizePreview fontSize={ fontSize } />

package/src/components/global-styles/font-sizes/font-sizes-count.js

@@ -24,7 +24,7 @@ function FontSizes() {
 			</HStack>
 			<ItemGroup isBordered isSeparated>
 				<NavigationButtonAsItem
-					path="/typography/font-sizes/"
+					path="/typography/font-sizes"
 					aria-label={ __( 'Edit font size presets' ) }
 				>
 					<HStack direction="row">

package/src/components/global-styles/screen-block-list.js

@@ -174,7 +174,7 @@ function ScreenBlockList() {
 				className="edit-site-block-types-search"
 				onChange={ setFilterValue }
 				value={ filterValue }
-				label={ __( 'Search for blocks' ) }
+				label={ __( 'Search' ) }
 				placeholder={ __( 'Search' ) }
 			/>
 			<MemoizedBlockList filterValue={ deferredFilterValue } />

package/src/components/global-styles/screen-revisions/index.js

@@ -3,7 +3,6 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	useNavigator,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Spinner,
 } from '@wordpress/components';
@@ -33,7 +32,6 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 const PAGE_SIZE = 10;
 
 function ScreenRevisions() {
-	const { goTo } = useNavigator();
 	const { user: currentEditorGlobalStyles, setUserConfig } =
 		useContext( GlobalStylesContext );
 	const { blocks, editorCanvasContainerView } = useSelect(
@@ -71,6 +69,8 @@ function ScreenRevisions() {
 		currentEditorGlobalStyles
 	);
 
+	// The actual code that triggers the revisions screen to navigate back
+	// to the home screen in in `packages/edit-site/src/components/global-styles/ui.js`.
 	const onCloseRevisions = () => {
 		const canvasContainerView =
 			editorCanvasContainerView === 'global-styles-revisions:style-book'
@@ -85,15 +85,6 @@ function ScreenRevisions() {
 		onCloseRevisions();
 	};
 
-	useEffect( () => {
-		if (
-			! editorCanvasContainerView ||
-			! editorCanvasContainerView.startsWith( 'global-styles-revisions' )
-		) {
-			goTo( '/' ); // Return to global styles main panel.
-		}
-	}, [ editorCanvasContainerView ] );
-
 	useEffect( () => {
 		if ( ! isLoading && revisions.length ) {
 			setCurrentRevisions( revisions );

package/src/components/global-styles/screen-style-variations.js

@@ -4,6 +4,8 @@
 import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useZoomOut } from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -12,9 +14,12 @@ import ScreenHeader from './header';
 import SidebarNavigationScreenGlobalStylesContent from '../sidebar-navigation-screen-global-styles/content';
 
 function ScreenStyleVariations() {
-	// Move to zoom out mode when this component is mounted
-	// and back to the previous mode when unmounted.
+	// Style Variations should only be previewed in with
+	// - a "zoomed out" editor
+	// - "Desktop" device preview
+	const { setDeviceType } = useDispatch( editorStore );
 	useZoomOut();
+	setDeviceType( 'desktop' );
 
 	return (
 		<>

package/src/components/global-styles/shadows-edit-panel.js

@@ -35,7 +35,7 @@ import {
 	reset,
 	moreVertical,
 } from '@wordpress/icons';
-import { useState, useMemo } from '@wordpress/element';
+import { useState, useMemo, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -73,12 +73,30 @@ const presetShadowMenuItems = [
 
 export default function ShadowsEditPanel() {
 	const {
+		goBack,
 		params: { category, slug },
-		goTo,
 	} = useNavigator();
 	const [ shadows, setShadows ] = useGlobalSetting(
 		`shadow.presets.${ category }`
 	);
+
+	useEffect( () => {
+		const hasCurrentShadow = shadows?.some(
+			( shadow ) => shadow.slug === slug
+		);
+		// If the shadow being edited doesn't exist anymore in the global styles setting, navigate back
+		// to prevent the user from editing a non-existent shadow entry.
+		// This can happen, for example:
+		// - when the user deletes the shadow
+		// - when the user resets the styles while editing a custom shadow
+		//
+		// The check on the slug is necessary to prevent a double back navigation when the user triggers
+		// a backward navigation by interacting with the screen's UI.
+		if ( !! slug && ! hasCurrentShadow ) {
+			goBack();
+		}
+	}, [ shadows, slug, goBack ] );
+
 	const [ baseShadows ] = useGlobalSetting(
 		`shadow.presets.${ category }`,
 		undefined,
@@ -123,9 +141,7 @@ export default function ShadowsEditPanel() {
 	};
 
 	const handleShadowDelete = () => {
-		const updatedShadows = shadows.filter( ( s ) => s.slug !== slug );
-		setShadows( updatedShadows );
-		goTo( `/shadows` );
+		setShadows( shadows.filter( ( s ) => s.slug !== slug ) );
 	};
 
 	const handleShadowRename = ( newName ) => {

package/src/components/global-styles/style-variations-container.js

@@ -3,7 +3,7 @@
  */
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useContext, useEffect, useMemo, useState } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 import { __experimentalGrid as Grid } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
@@ -20,12 +20,7 @@ const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
 export default function StyleVariationsContainer( { gap = 2 } ) {
 	const { user } = useContext( GlobalStylesContext );
-	const [ currentUserStyles, setCurrentUserStyles ] = useState( user );
-	const userStyles = currentUserStyles?.styles;
-
-	useEffect( () => {
-		setCurrentUserStyles( user );
-	}, [ user ] );
+	const userStyles = user?.styles;
 
 	const variations = useSelect( ( select ) => {
 		return select(

package/src/components/global-styles/ui.js

@@ -70,10 +70,8 @@ function GlobalStylesActionMenu() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-	const { goTo } = useNavigator();
 	const loadCustomCSS = () => {
 		setEditorCanvasContainerView( 'global-styles-css' );
-		goTo( '/css' );
 	};
 
 	return (
@@ -253,21 +251,29 @@ function GlobalStylesEditorCanvasContainerLink() {
 		switch ( editorCanvasContainerView ) {
 			case 'global-styles-revisions':
 			case 'global-styles-revisions:style-book':
-				goTo( '/revisions' );
+				if ( ! isRevisionsOpen ) {
+					goTo( '/revisions' );
+				}
 				break;
 			case 'global-styles-css':
 				goTo( '/css' );
 				break;
+			// The stand-alone style book is open
+			// and the revisions panel is open,
+			// close the revisions panel.
+			// Otherwise keep the style book open while
+			// browsing global styles panel.
+			//
+			// Falling through as it matches the default scenario.
 			case 'style-book':
-				/*
-				 * The stand-alone style book is open
-				 * and the revisions panel is open,
-				 * close the revisions panel.
-				 * Otherwise keep the style book open while
-				 * browsing global styles panel.
-				 */
+			default:
+				// In general, if the revision screen is in view but the
+				// `editorCanvasContainerView` is not a revision view, close it.
+				// This also includes the scenario when the stand-alone style
+				// book is open, in which case we want the user to close the
+				// revisions screen and browse global styles.
 				if ( isRevisionsOpen ) {
-					goTo( '/' );
+					goTo( '/', { isBack: true } );
 				}
 				break;
 		}
@@ -302,7 +308,7 @@ function GlobalStylesUI() {
 				<ScreenTypography />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path="/typography/font-sizes/">
+			<GlobalStylesNavigationScreen path="/typography/font-sizes">
 				<FontSizes />
 			</GlobalStylesNavigationScreen>