From ead19d71ca59afd6f7aefe84aa5b3a28a85ed12e Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Thu, 15 May 2025 13:27:31 +0530
Subject: [PATCH 1/4] Global Styles: Move 'Randomize colors' button to Edit
 Palette panel

---
 .../global-styles/color-palette-panel.js        | 16 ++++++++++++++++
 .../src/components/global-styles/palette.js     | 17 +----------------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js
index 0b1d482c0a1b3d..5aa45c7ca2a654 100644
--- a/packages/edit-site/src/components/global-styles/color-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js
@@ -5,15 +5,18 @@ import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalPaletteEdit as PaletteEdit,
 	__experimentalVStack as VStack,
+	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { shuffle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import ColorVariations from './variations/variations-color';
+import { useColorRandomizer } from './hooks';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
@@ -49,6 +52,8 @@ export default function ColorPalettePanel( { name } ) {
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
 
+	const [ randomizeThemeColors ] = useColorRandomizer();
+
 	return (
 		<VStack
 			className="edit-site-global-styles-color-palette-panel"
@@ -78,6 +83,17 @@ export default function ColorPalettePanel( { name } ) {
 						popoverProps={ popoverProps }
 					/>
 				) }
+			{ window.__experimentalEnableColorRandomizer &&
+				themeColors?.length > 0 && (
+					<Button
+						__next40pxDefaultSize
+						variant="secondary"
+						icon={ shuffle }
+						onClick={ randomizeThemeColors }
+					>
+						{ __( 'Randomize colors' ) }
+					</Button>
+				) }
 			<PaletteEdit
 				colors={ customColors }
 				onChange={ setCustomColors }
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 9b8c3f829d2426..ceb15ef3bb6976 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -8,10 +8,9 @@ import {
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
 	ColorIndicator,
-	Button,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
-import { Icon, shuffle, chevronLeft, chevronRight } from '@wordpress/icons';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -20,7 +19,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
-import { useColorRandomizer } from './hooks';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 import { unlock } from '../../lock-unlock';
 
@@ -38,8 +36,6 @@ function Palette( { name } ) {
 		name
 	);
 
-	const [ randomizeThemeColors ] = useColorRandomizer();
-
 	const colors = useMemo(
 		() => [
 			...( customColors || EMPTY_COLORS ),
@@ -87,17 +83,6 @@ function Palette( { name } ) {
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
-			{ window.__experimentalEnableColorRandomizer &&
-				themeColors?.length > 0 && (
-					<Button
-						__next40pxDefaultSize
-						variant="secondary"
-						icon={ shuffle }
-						onClick={ randomizeThemeColors }
-					>
-						{ __( 'Randomize colors' ) }
-					</Button>
-				) }
 		</VStack>
 	);
 }

From 69a283b6ee19b2c485bf52f6f2067e91bcd441a2 Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Mon, 19 May 2025 13:46:22 +0530
Subject: [PATCH 2/4] Global Styles: Reduce spacing between Custom palette and
 Randomize colors button to `16px`

---
 packages/edit-site/src/components/global-styles/style.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index bd6b0dec5dc1dc..ac98e6f2f7e4ae 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -259,3 +259,10 @@
 		border-radius: $radius-small;
 	}
 }
+
+.edit-site-global-styles-color-palette-panel {
+	// Reduce spacing between Color palette and Randomize colors button
+	.components-button.is-secondary.has-icon.has-text {
+		margin-top: -16px;
+	}
+}

From 7f8f5c3cc911310cc50bdb2650b228e082a95679 Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Wed, 21 May 2025 11:45:12 +0530
Subject: [PATCH 3/4] Remove custom styles added

---
 packages/edit-site/src/components/global-styles/style.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index ac98e6f2f7e4ae..bd6b0dec5dc1dc 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -259,10 +259,3 @@
 		border-radius: $radius-small;
 	}
 }
-
-.edit-site-global-styles-color-palette-panel {
-	// Reduce spacing between Color palette and Randomize colors button
-	.components-button.is-secondary.has-icon.has-text {
-		margin-top: -16px;
-	}
-}

From 0a0eaaab56e74fd215fb35f01af13deee042e356 Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Wed, 21 May 2025 11:47:29 +0530
Subject: [PATCH 4/4] Wrap the Theme colors palette and randomize colors button
 in VStack

---
 .../global-styles/color-palette-panel.js      | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js
index 5aa45c7ca2a654..606eb996ccccd3 100644
--- a/packages/edit-site/src/components/global-styles/color-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js
@@ -59,17 +59,30 @@ export default function ColorPalettePanel( { name } ) {
 			className="edit-site-global-styles-color-palette-panel"
 			spacing={ 8 }
 		>
-			{ !! themeColors && !! themeColors.length && (
-				<PaletteEdit
-					canReset={ themeColors !== baseThemeColors }
-					canOnlyChangeValues
-					colors={ themeColors }
-					onChange={ setThemeColors }
-					paletteLabel={ __( 'Theme' ) }
-					paletteLabelHeadingLevel={ 3 }
-					popoverProps={ popoverProps }
-				/>
-			) }
+			<VStack spacing={ 4 }>
+				{ !! themeColors && !! themeColors.length && (
+					<PaletteEdit
+						canReset={ themeColors !== baseThemeColors }
+						canOnlyChangeValues
+						colors={ themeColors }
+						onChange={ setThemeColors }
+						paletteLabel={ __( 'Theme' ) }
+						paletteLabelHeadingLevel={ 3 }
+						popoverProps={ popoverProps }
+					/>
+				) }
+				{ window.__experimentalEnableColorRandomizer &&
+					themeColors?.length > 0 && (
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							icon={ shuffle }
+							onClick={ randomizeThemeColors }
+						>
+							{ __( 'Randomize colors' ) }
+						</Button>
+					) }
+			</VStack>
 			{ !! defaultColors &&
 				!! defaultColors.length &&
 				!! defaultPaletteEnabled && (
@@ -83,17 +96,6 @@ export default function ColorPalettePanel( { name } ) {
 						popoverProps={ popoverProps }
 					/>
 				) }
-			{ window.__experimentalEnableColorRandomizer &&
-				themeColors?.length > 0 && (
-					<Button
-						__next40pxDefaultSize
-						variant="secondary"
-						icon={ shuffle }
-						onClick={ randomizeThemeColors }
-					>
-						{ __( 'Randomize colors' ) }
-					</Button>
-				) }
 			<PaletteEdit
 				colors={ customColors }
 				onChange={ setCustomColors }