diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 2b46a401d4b0e9..03e7d6f1b97e09 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -73,13 +73,16 @@ function gutenberg_initialize_editor( $editor_name, $editor_script_handle, $sett
}
/**
- * Sets a global JS variable used to trigger the availability of zoomed out view.
+ * Sets a global JS variable used to trigger the availability of each Gutenberg Experiment.
*/
-function gutenberg_enable_zoomed_out_view() {
+function gutenberg_enable_experiments() {
$gutenberg_experiments = get_option( 'gutenberg-experiments' );
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoomed-out-view', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomedOutView = true', 'before' );
}
+ if ( $gutenberg_experiments && array_key_exists( 'gutenberg-color-randomizer', $gutenberg_experiments ) ) {
+ wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableColorRandomizer = true', 'before' );
+ }
}
-add_action( 'admin_init', 'gutenberg_enable_zoomed_out_view' );
+add_action( 'admin_init', 'gutenberg_enable_experiments' );
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 3d09f05bd655c8..0d0e5495888607 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -52,6 +52,19 @@ function gutenberg_initialize_experiments_settings() {
'id' => 'gutenberg-zoomed-out-view',
)
);
+
+ add_settings_field(
+ 'gutenberg-color-randomizer',
+ __( 'Color randomizer ', 'gutenberg' ),
+ 'gutenberg_display_experiment_field',
+ 'gutenberg-experiments',
+ 'gutenberg_experiments_section',
+ array(
+ 'label' => __( 'Test the Global Styles color randomizer; a utility that lets you mix the current color palette pseudo-randomly.', 'gutenberg' ),
+ 'id' => 'gutenberg-color-randomizer',
+ )
+ );
+
register_setting(
'gutenberg-experiments',
'gutenberg-experiments'
diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
index 0fdb8f1a7697d1..2de36fbb60b728 100644
--- a/packages/edit-site/src/components/global-styles/hooks.js
+++ b/packages/edit-site/src/components/global-styles/hooks.js
@@ -329,7 +329,7 @@ export function useGradientsPerOrigin( name ) {
}, [ customGradients, themeGradients, defaultGradients ] );
}
-export function useRandomizer( name ) {
+export function useColorRandomizer( name ) {
const [ themeColors, setThemeColors ] = useSetting(
'color.palette.theme',
name
@@ -355,5 +355,7 @@ export function useRandomizer( name ) {
setThemeColors( newColors );
}
- return [ randomizeColors ];
+ return window.__experimentalEnableColorRandomizer
+ ? [ randomizeColors ]
+ : [];
}
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 08837723e38351..eb6f7d289fdf6a 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -27,7 +27,7 @@ import ScreenHeadingColor from './screen-heading-color';
import ScreenButtonColor from './screen-button-color';
import ScreenLayout from './screen-layout';
import ScreenStyleVariations from './screen-style-variations';
-import { useRandomizer } from './hooks';
+import { useColorRandomizer } from './hooks';
function GlobalStylesNavigationScreen( { className, ...props } ) {
return (
@@ -121,7 +121,7 @@ function ContextScreens( { name } ) {
function GlobalStylesUI() {
const blocks = getBlockTypes();
- const [ randomizeTheme ] = useRandomizer();
+ const [ randomizeThemeColors ] = useColorRandomizer();
return (
<>
@@ -159,11 +159,13 @@ function GlobalStylesUI() {
/>
) ) }
-
+ { randomizeThemeColors && (
+
+ ) }
>
);
}