move randomize colors button to colors gs panel

WordPress · Nov 1, 2022 · 43e0afb · 43e0afb
1 parent 861a6f9
commit 43e0afb
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 44 deletions.
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
@@ -8,16 +8,18 @@ import {
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
 	ColorIndicator,
+	Button,
 } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { shuffle } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
-import { useSetting } from './hooks';
+import { useColorRandomizer, useSetting } from './hooks';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 
 const EMPTY_COLORS = [];
@@ -31,6 +33,9 @@ function Palette( { name } ) {
 		'color.defaultPalette',
 		name
 	);
+
+	const [ randomizeThemeColors ] = useColorRandomizer();
+
 	const colors = useMemo(
 		() => [
 			...( customColors || EMPTY_COLORS ),
@@ -82,6 +87,15 @@ function Palette( { name } ) {
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
+			{ randomizeThemeColors && (
+				<Button
+					variant="secondary"
+					icon={ shuffle }
+					onClick={ randomizeThemeColors }
+				>
+					{ __( 'Randomize colors' ) }
+				</Button>
+			) }
 		</VStack>
 	);
 }

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
@@ -4,11 +4,8 @@
 import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
-	Button,
 } from '@wordpress/components';
 import { getBlockTypes } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import { shuffle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -27,7 +24,6 @@ import ScreenHeadingColor from './screen-heading-color';
 import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
-import { useColorRandomizer } from './hooks';
 
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
@@ -121,52 +117,42 @@ function ContextScreens( { name } ) {
 
 function GlobalStylesUI() {
 	const blocks = getBlockTypes();
-	const [ randomizeThemeColors ] = useColorRandomizer();
 
 	return (
-		<>
-			<NavigatorProvider
-				className="edit-site-global-styles-sidebar__navigator-provider"
-				initialPath="/"
-			>
-				<GlobalStylesNavigationScreen path="/">
-					<ScreenRoot />
-				</GlobalStylesNavigationScreen>
+		<NavigatorProvider
+			className="edit-site-global-styles-sidebar__navigator-provider"
+			initialPath="/"
+		>
+			<GlobalStylesNavigationScreen path="/">
+				<ScreenRoot />
+			</GlobalStylesNavigationScreen>
 
-				<GlobalStylesNavigationScreen path="/variations">
-					<ScreenStyleVariations />
-				</GlobalStylesNavigationScreen>
+			<GlobalStylesNavigationScreen path="/variations">
+				<ScreenStyleVariations />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/blocks">
+				<ScreenBlockList />
+			</GlobalStylesNavigationScreen>
 
-				<GlobalStylesNavigationScreen path="/blocks">
-					<ScreenBlockList />
+			{ blocks.map( ( block ) => (
+				<GlobalStylesNavigationScreen
+					key={ 'menu-block-' + block.name }
+					path={ '/blocks/' + block.name }
+				>
+					<ScreenBlock name={ block.name } />
 				</GlobalStylesNavigationScreen>
+			) ) }
 
-				{ blocks.map( ( block ) => (
-					<GlobalStylesNavigationScreen
-						key={ 'menu-block-' + block.name }
-						path={ '/blocks/' + block.name }
-					>
-						<ScreenBlock name={ block.name } />
-					</GlobalStylesNavigationScreen>
-				) ) }
-
-				<ContextScreens />
-
-				{ blocks.map( ( block ) => (
-					<ContextScreens
-						key={ 'screens-block-' + block.name }
-						name={ block.name }
-					/>
-				) ) }
-			</NavigatorProvider>
-			{ randomizeThemeColors && (
-				<Button
-					icon={ shuffle }
-					label={ __( 'Randomize colors' ) }
-					onClick={ randomizeThemeColors }
+			<ContextScreens />
+
+			{ blocks.map( ( block ) => (
+				<ContextScreens
+					key={ 'screens-block-' + block.name }
+					name={ block.name }
 				/>
-			) }
-		</>
+			) ) }
+		</NavigatorProvider>
 	);
 }