add color randomizer to gutenberg expriments

WordPress · Nov 1, 2022 · 861a6f9 · 861a6f9
1 parent 14b85d7
commit 861a6f9
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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() {
 					/>
 				) ) }
 			</NavigatorProvider>
-			<Button
-				icon={ shuffle }
-				label={ __( 'Randomize colors' ) }
-				onClick={ randomizeTheme }
-			/>
+			{ randomizeThemeColors && (
+				<Button
+					icon={ shuffle }
+					label={ __( 'Randomize colors' ) }
+					onClick={ randomizeThemeColors }
+				/>
+			) }
 		</>
 	);
 }