From 93f1f7db28dd74ac36dcae9522566f9423c871b1 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Fri, 9 Sep 2022 12:08:44 -0400 Subject: [PATCH 1/4] add color randomizer --- package-lock.json | 8 +++ packages/edit-site/package.json | 1 + .../src/components/global-styles/hooks.js | 34 +++++++++ .../src/components/global-styles/ui.js | 72 +++++++++++-------- 4 files changed, 85 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index e00ad245d20c9..ad772d88dd125 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18057,11 +18057,19 @@ "@wordpress/url": "file:packages/url", "@wordpress/viewport": "file:packages/viewport", "classnames": "^2.3.1", + "colord": "^2.9.2", "downloadjs": "^1.4.7", "history": "^5.1.0", "lodash": "^4.17.21", "react-autosize-textarea": "^7.1.0", "rememo": "^4.0.0" + }, + "dependencies": { + "colord": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz", + "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==" + } } }, "@wordpress/edit-widgets": { diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index 9c6388a947c2c..13c859b42935b 100644 --- a/packages/edit-site/package.json +++ b/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", diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index f6df419a46d00..0fdb8f1a7697d 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/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,32 @@ export function useGradientsPerOrigin( name ) { return result; }, [ customGradients, themeGradients, defaultGradients ] ); } + +export function useRandomizer( 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 [ randomizeColors ]; +} diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 6eeada1e67c61..08837723e3835 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -4,8 +4,11 @@ import { __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, + Button, } from '@wordpress/components'; import { getBlockTypes } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; +import { shuffle } from '@wordpress/icons'; /** * Internal dependencies @@ -24,6 +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'; function GlobalStylesNavigationScreen( { className, ...props } ) { return ( @@ -117,42 +121,50 @@ function ContextScreens( { name } ) { function GlobalStylesUI() { const blocks = getBlockTypes(); + const [ randomizeTheme ] = useRandomizer(); return ( - - - - - - - - - - - - + <> + + + + - { blocks.map( ( block ) => ( - - + + - ) ) } - + + + - { blocks.map( ( block ) => ( - - ) ) } - + { blocks.map( ( block ) => ( + + + + ) ) } + + + + { blocks.map( ( block ) => ( + + ) ) } + + + ) } ); } diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index eb6f7d289fdf6..6eeada1e67c61 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -4,11 +4,8 @@ import { __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, - Button, } from '@wordpress/components'; import { getBlockTypes } from '@wordpress/blocks'; -import { __ } from '@wordpress/i18n'; -import { shuffle } from '@wordpress/icons'; /** * Internal dependencies @@ -27,7 +24,6 @@ import ScreenHeadingColor from './screen-heading-color'; import ScreenButtonColor from './screen-button-color'; import ScreenLayout from './screen-layout'; import ScreenStyleVariations from './screen-style-variations'; -import { useColorRandomizer } from './hooks'; function GlobalStylesNavigationScreen( { className, ...props } ) { return ( @@ -121,52 +117,42 @@ function ContextScreens( { name } ) { function GlobalStylesUI() { const blocks = getBlockTypes(); - const [ randomizeThemeColors ] = useColorRandomizer(); return ( - <> - - - - + + + + - - - + + + + + + + - - + { blocks.map( ( block ) => ( + + + ) ) } - { blocks.map( ( block ) => ( - - - - ) ) } - - - - { blocks.map( ( block ) => ( - - ) ) } - - { randomizeThemeColors && ( -