diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index 9cb7dc74e303ff..2e1243757c5723 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -11,9 +11,6 @@ function gutenberg_enable_experiments() { global $pagenow; - if ( gutenberg_is_experiment_enabled( 'gutenberg-color-randomizer' ) ) { - wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableColorRandomizer = true', 'before' ); - } if ( gutenberg_is_experiment_enabled( 'gutenberg-grid-interactivity' ) ) { wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGridInteractivity = true', 'before' ); } diff --git a/lib/experimental/experiments/load.php b/lib/experimental/experiments/load.php index 8b3d343af567f7..780ecaabe47d35 100644 --- a/lib/experimental/experiments/load.php +++ b/lib/experimental/experiments/load.php @@ -99,11 +99,6 @@ function gutenberg_initialize_experiments_settings() { 'slug' => 'other', 'label' => _x( 'Other', 'experiments group name', 'gutenberg' ), 'items' => array( - array( - 'id' => 'gutenberg-color-randomizer', - 'label' => __( 'Color randomizer', 'gutenberg' ), - 'description' => __( 'Enables the Global Styles color randomizer in the Site Editor; a utility that lets you mix the current color palette pseudo-randomly.', 'gutenberg' ), - ), array( 'id' => 'gutenberg-workflow-palette', 'label' => __( 'Workflow Palette', 'gutenberg' ), diff --git a/package-lock.json b/package-lock.json index dc161930fbde9b..bdb6ef571b1b47 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52566,8 +52566,7 @@ "@wordpress/keycodes": "file:../keycodes", "@wordpress/private-apis": "file:../private-apis", "@wordpress/ui": "file:../ui", - "clsx": "^2.1.1", - "colord": "^2.9.3" + "clsx": "^2.1.1" }, "devDependencies": { "@testing-library/dom": "^10.4.1", diff --git a/packages/global-styles-ui/CHANGELOG.md b/packages/global-styles-ui/CHANGELOG.md index b5e9949d538586..c87529b6dc40fe 100644 --- a/packages/global-styles-ui/CHANGELOG.md +++ b/packages/global-styles-ui/CHANGELOG.md @@ -34,6 +34,7 @@ ### Internal +- Remove the experimental color randomizer from the palette editor, along with the `colord` dependency it used ([#82452](https://github.com/WordPress/gutenberg/pull/82452)). - Exclude the JavaScript tests and story from the build project so their declarations are not published. ([#81516](https://github.com/WordPress/gutenberg/pull/81516)) ## 1.20.0 (2026-08-12) diff --git a/packages/global-styles-ui/package.json b/packages/global-styles-ui/package.json index 7def1f5f007df0..c4473a4ab01635 100644 --- a/packages/global-styles-ui/package.json +++ b/packages/global-styles-ui/package.json @@ -61,8 +61,7 @@ "@wordpress/keycodes": "file:../keycodes", "@wordpress/private-apis": "file:../private-apis", "@wordpress/ui": "file:../ui", - "clsx": "^2.1.1", - "colord": "^2.9.3" + "clsx": "^2.1.1" }, "devDependencies": { "@testing-library/dom": "^10.4.1", diff --git a/packages/global-styles-ui/src/color-palette-panel.tsx b/packages/global-styles-ui/src/color-palette-panel.tsx index a722e6461842c4..fe0f2797e7b9bd 100644 --- a/packages/global-styles-ui/src/color-palette-panel.tsx +++ b/packages/global-styles-ui/src/color-palette-panel.tsx @@ -3,11 +3,9 @@ import { useViewportMatch } from '@wordpress/compose'; import { __experimentalPaletteEdit as PaletteEdit, __experimentalVStack as VStack, - Button, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { shuffle } from '@wordpress/icons'; -import { useSetting, useColorRandomizer } from './hooks'; +import { useSetting } from './hooks'; import ColorVariations from './variations/variations-color'; const mobilePopoverProps = { placement: 'bottom-start' as const, offset: 8 }; @@ -48,35 +46,18 @@ export default function ColorPalettePanel( { name }: ColorPalettePanelProps ) { const isMobileViewport = useViewportMatch( 'small', '<' ); const popoverProps = isMobileViewport ? mobilePopoverProps : undefined; - const [ randomizeThemeColors ] = useColorRandomizer( name ); - return ( - { /* Both children need theme colors, so without them the wrapper - renders empty and still takes a slot in the parent's gap. */ } { !! themeColors?.length && ( - - - { ( window as any ).__experimentalEnableColorRandomizer && - randomizeThemeColors && ( - - ) } - + ) } { !! defaultColors && !! defaultColors.length && diff --git a/packages/global-styles-ui/src/hooks.ts b/packages/global-styles-ui/src/hooks.ts index 719d959a0a5533..d991ee692b1008 100644 --- a/packages/global-styles-ui/src/hooks.ts +++ b/packages/global-styles-ui/src/hooks.ts @@ -1,5 +1,3 @@ -import { colord, extend } from 'colord'; -import a11yPlugin from 'colord/plugins/a11y'; import { useCallback, useContext, useMemo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; @@ -15,14 +13,10 @@ import { import type { GlobalStylesConfig, StyleVariation, - Color, } from '@wordpress/global-styles-engine'; import { GlobalStylesContext } from './context'; import { removePropertiesFromObject, isVariationWithProperties } from './utils'; -// Enable colord's a11y plugin. -extend( [ a11yPlugin ] ); - /** * Hook to get and set style values with memoization. * @@ -251,45 +245,6 @@ export function useColorVariations(): StyleVariation[] { ); } -/** - * Hook to randomize theme colors using color rotation. - * - * @param blockName The name of the block, if applicable. - * @return Array containing the randomize function if feature is enabled, empty array otherwise. - */ -export function useColorRandomizer( blockName?: string ): [ () => void ] | [] { - const [ themeColors, setThemeColors ] = useSetting< Color[] >( - 'color.palette.theme', - blockName - ); - - const randomizeColors = useCallback( () => { - if ( ! themeColors || ! themeColors.length ) { - return; - } - - const randomRotationValue = Math.floor( Math.random() * 225 ); - - const newColors = themeColors.map( ( colorObject ) => { - const { color } = colorObject; - const newColor = colord( color ) - .rotate( randomRotationValue ) - .toHex(); - - return { - ...colorObject, - color: newColor, - }; - } ); - - setThemeColors( newColors ); - }, [ themeColors, setThemeColors ] ); - - return ( window as any ).__experimentalEnableColorRandomizer - ? [ randomizeColors ] - : []; -} - /** * Resolves `ref` pointers and theme-relative (`file:./…`) URLs in a style * object's `background` sub-tree, for display. The Global Styles screens