Try generating random color palettes

lib/experimental/editor-settings.php

@@ -73,25 +73,19 @@ 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' );
 	}
-}
-
-add_action( 'admin_init', 'gutenberg_enable_zoomed_out_view' );
-
-/**
- * Sets a global JS variable used to trigger the availability of the Navigation List View experiment.
- */
-function gutenberg_enable_off_canvas_navigation_editor() {
-	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-color-randomizer', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableColorRandomizer = true', 'before' );
+	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-off-canvas-navigation-editor', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableOffCanvasNavigationEditor = true', 'before' );
 	}
 }
 
-add_action( 'admin_init', 'gutenberg_enable_off_canvas_navigation_editor' );
+add_action( 'admin_init', 'gutenberg_enable_experiments' );

lib/experiments-page.php

@@ -63,6 +63,18 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-off-canvas-navigation-editor',
 		)
 	);
+	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'

packages/edit-site/package.json

@@ -55,6 +55,7 @@
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
 		"classnames": "^2.3.1",
+		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
 		"lodash": "^4.17.21",

packages/edit-site/src/components/global-styles/hooks.js

@@ -2,6 +2,8 @@
  * External dependencies
  */
 import { get, set, isEqual } from 'lodash';
+import { colord, extend } from 'colord';
+import a11yPlugin from 'colord/plugins/a11y';
 
 /**
  * WordPress dependencies
@@ -20,6 +22,9 @@ import {
 import { getValueFromVariable, getPresetVariableFromValue } from './utils';
 import { GlobalStylesContext } from './context';
 
+// Enable colord's a11y plugin.
+extend( [ a11yPlugin ] );
+
 const EMPTY_CONFIG = { settings: {}, styles: {} };
 
 export const useGlobalStylesReset = () => {
@@ -323,3 +328,34 @@ export function useGradientsPerOrigin( name ) {
 		return result;
 	}, [ customGradients, themeGradients, defaultGradients ] );
 }
+
+export function useColorRandomizer( name ) {
+	const [ themeColors, setThemeColors ] = useSetting(
+		'color.palette.theme',
+		name
+	);
+
+	function randomizeColors() {
+		/* eslint-disable no-restricted-syntax */
+		const randomRotationValue = Math.floor( Math.random() * 225 );
+		/* eslint-enable no-restricted-syntax */
+
+		const newColors = themeColors.map( ( colorObject ) => {
+			const { color } = colorObject;
+			const newColor = colord( color )
+				.rotate( randomRotationValue )
+				.toHex();
+
+			return {
+				...colorObject,
+				color: newColor,
+			};
+		} );
+
+		setThemeColors( newColors );
+	}
+
+	return window.__experimentalEnableColorRandomizer
+		? [ randomizeColors ]
+		: [];
+}

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>
 	);
 }