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() { /> ) ) } -