Global Styles: Move `Randomize colors` button to Edit Palette panel #70128

himanshupathak95 · 2025-05-15T09:05:04Z

What?

This PR relocates the Randomize colors button from the main color palette overview to within the 'Edit Palette' panel in the Site Editor's Global Styles.

Why?

Introduced in #52315. Currently, the Randomize colors button is positioned outside the palette editing interface. These previews are limited to the first 5 colors, providing an incomplete view of the actual changes across the entire palette.

Moving the button inside the 'Edit Palette' panel allows users to see the randomization effect applied to the entire theme color palette displayed within that panel. This offers a clearer, more accurate, and more useful user experience for this feature.

Testing Instructions

Set a theme like Twenty Twenty-Four.
Navigate to the Site Editor (Appearance > Editor).
In the Site sidebar, select "Styles > Colors".
In the "Colors" panel, observe the "Palette" section.
Confirm that the 'Randomize colors' button is no longer present directly under the 'Edit palette' button.
Click the 'Edit palette' button.
The "Edit Palette" panel will open. Confirm the 'Randomize colors' button is now visible within this panel.
Click the 'Randomize colors' button.
Observe that the theme colors randomization happens as intended.

Screenshots or screencast

Before	After

github-actions · 2025-05-15T09:39:10Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

himanshupathak95 · 2025-05-15T10:01:59Z

Just found out that the Gradient panel is getting squashed in the Twenty Twenty-Five theme because of the newly occupied vertical space -

I believe this can be taken out in a separate issue since this is happening even by adding custom colors ( basically anything that increases the vertical space occupation ).

Screen.Recording.2025-05-15.at.15.17.51.mov

The squash disappears after removing the height: 100% property from the edit-site-layout container -

I'll wait for some more eyes on this.

t-hamano

Thanks for the PR!

It almost looks good, but personally, it might be good to move the button up about 16px to make it more relevant to the palette:

Before	After

…lors button to `16px`

himanshupathak95 · 2025-05-20T10:20:37Z

Hey @t-hamano, Thanks for the review. I have adjusted the button as suggested. Please let me know if it looks good to you whenever you have time.

t-hamano · 2025-05-20T11:01:32Z

@himanshupathak95 Thanks for the update!

Sorry, my explanation was insufficient.

When defining styles, it's important to note the following:

Don't use selectors with the components- prefix as much as possible: the internal implementation of the component may change.
Don't use hard-coded values for spacing. Use 8px-based $grid-unit-xx.

I think you can achieve this without using CSS using the following approach:

Details

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 5aa45c7ca2..17750bf9d6 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,41 +59,43 @@ 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 }
-                               />
-                       ) }
-                       { !! defaultColors &&
-                               !! defaultColors.length &&
-                               !! defaultPaletteEnabled && (
+                       <VStack spacing={ 4 }>
+                               { !! themeColors && !! themeColors.length && (
                                        <PaletteEdit
-                                               canReset={ defaultColors !== baseDefaultColors }
+                                               canReset={ themeColors !== baseThemeColors }
                                                canOnlyChangeValues
-                                               colors={ defaultColors }
-                                               onChange={ setDefaultColors }
-                                               paletteLabel={ __( 'Default' ) }
+                                               colors={ themeColors }
+                                               onChange={ setThemeColors }
+                                               paletteLabel={ __( 'Theme' ) }
                                                paletteLabelHeadingLevel={ 3 }
                                                popoverProps={ popoverProps }
+                                                       __next40pxDefaultSize
+                                                       variant="secondary"
+                                                       icon={ shuffle }
+                                                       onClick={ randomizeThemeColors }
+                                               >
+                                                       { __( 'Randomize colors' ) }
+                                               </Button>
+                                       ) }
+                       </VStack>
                        <PaletteEdit
                                colors={ customColors }
                                onChange={ setCustomColors }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index ac98e6f2f7..bd6b0dec5d 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;
-       }
-}

In other words, all we need to do is wrap the color palette and the randomize button in a VStack component.

t-hamano

LGTM!

Just found out that the Gradient panel is getting squashed in the Twenty Twenty-Five theme because of the newly occupied vertical space -

Do you mind submitting a new issue regarding the problem above?

himanshupathak95 · 2025-05-21T07:08:56Z

Do you mind submitting a new issue regarding the problem above?

Thanks @t-hamano for the review. I will soon open an issue for that problem.

…ordPress#70128) * Global Styles: Move 'Randomize colors' button to Edit Palette panel * Global Styles: Reduce spacing between Custom palette and Randomize colors button to `16px` * Remove custom styles added * Wrap the Theme colors palette and randomize colors button in VStack Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org>

himanshupathak95 marked this pull request as ready for review May 15, 2025 09:39

t-hamano reviewed May 16, 2025

View reviewed changes

himanshupathak95 requested a review from t-hamano May 19, 2025 10:25

himanshupathak95 added 2 commits May 19, 2025 17:27

Global Styles: Move 'Randomize colors' button to Edit Palette panel

ead19d7

Global Styles: Reduce spacing between Custom palette and Randomize co…

69a283b

…lors button to `16px`

himanshupathak95 force-pushed the fix/66169 branch from d6355f1 to 69a283b Compare May 19, 2025 11:57

himanshupathak95 added 2 commits May 21, 2025 11:45

Remove custom styles added

7f8f5c3

Wrap the Theme colors palette and randomize colors button in VStack

0a0eaaa

t-hamano approved these changes May 21, 2025

View reviewed changes

t-hamano closed this May 21, 2025

t-hamano reopened this May 21, 2025

t-hamano merged commit 9fc7182 into WordPress:trunk May 21, 2025
110 of 129 checks passed

github-actions bot added this to the Gutenberg 20.9 milestone May 21, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Global Styles: Move `Randomize colors` button to Edit Palette panel #70128

Global Styles: Move `Randomize colors` button to Edit Palette panel #70128

Uh oh!

himanshupathak95 commented May 15, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 15, 2025 •

edited

Loading

Uh oh!

himanshupathak95 commented May 15, 2025

Uh oh!

t-hamano left a comment

Uh oh!

himanshupathak95 commented May 20, 2025

Uh oh!

t-hamano commented May 20, 2025

Uh oh!

t-hamano left a comment

Uh oh!

himanshupathak95 commented May 21, 2025

Uh oh!

Uh oh!

Uh oh!

Global Styles: Move Randomize colors button to Edit Palette panel #70128

Global Styles: Move Randomize colors button to Edit Palette panel #70128

Uh oh!

Conversation

himanshupathak95 commented May 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

Testing Instructions

Screenshots or screencast

Uh oh!

github-actions bot commented May 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

himanshupathak95 commented May 15, 2025

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

himanshupathak95 commented May 20, 2025

Uh oh!

t-hamano commented May 20, 2025

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

himanshupathak95 commented May 21, 2025

Uh oh!

Uh oh!

Uh oh!

Global Styles: Move `Randomize colors` button to Edit Palette panel #70128

Global Styles: Move `Randomize colors` button to Edit Palette panel #70128

himanshupathak95 commented May 15, 2025 •

edited

Loading

github-actions bot commented May 15, 2025 •

edited

Loading