From 5ab2d7f448f2dd8cd024eeeaed82107b97847a6c Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Mon, 11 Jul 2022 11:18:54 -0500 Subject: [PATCH 1/4] Ensure color picker only updates with a valid color value --- .../components/color-control/index.js | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/plugin/assets/src/customizer/components/color-control/index.js b/plugin/assets/src/customizer/components/color-control/index.js index 77da7bc9..eec5d5b1 100644 --- a/plugin/assets/src/customizer/components/color-control/index.js +++ b/plugin/assets/src/customizer/components/color-control/index.js @@ -73,24 +73,26 @@ const ColorControl = ( { defaultValue, params, onColorChange, mode } ) => { }; useEffect( () => { - let hexColor = color.substring( 1 ); - - if ( hexColor.length === 3 ) { - hexColor = hexColor - .split( '' ) - .map( hex => hex + hex ) - .join( '' ); + if ( color ) { + let hexColor = color.substring( 1 ); + + if ( hexColor.length === 3 ) { + hexColor = hexColor + .split( '' ) + .map( hex => hex + hex ) + .join( '' ); + } + + if ( 6 !== hexColor.length ) { + return; + } + + onColorChange( `#${ hexColor }` ); + api.previewer.send( 'materialDesignM3PaletteUpdate', { + color, + isDarkMode, + } ); } - - if ( 6 !== hexColor.length ) { - return; - } - - onColorChange( `#${ hexColor }` ); - api.previewer.send( 'materialDesignM3PaletteUpdate', { - color, - isDarkMode, - } ); }, [ color ] ); return ( From 7e14a573d8e30ac694478da70fad473cb7e181b3 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Mon, 11 Jul 2022 11:20:04 -0500 Subject: [PATCH 2/4] Use white as default when user unselects a color --- plugin/assets/src/customizer/components/color-control/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugin/assets/src/customizer/components/color-control/index.js b/plugin/assets/src/customizer/components/color-control/index.js index eec5d5b1..a1422053 100644 --- a/plugin/assets/src/customizer/components/color-control/index.js +++ b/plugin/assets/src/customizer/components/color-control/index.js @@ -181,7 +181,7 @@ const ColorControl = ( { defaultValue, params, onColorChange, mode } ) => { { - onChange( value ); + onChange( value ?? '#ffffff' ); // Use white as default. } } materialColorsOnly={ true } /> From 585f1b0a6f812a3892a33906686179e9de8ec345 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Mon, 11 Jul 2022 11:33:46 -0500 Subject: [PATCH 3/4] Return to previous color on deselect --- .../assets/src/customizer/components/color-control/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/plugin/assets/src/customizer/components/color-control/index.js b/plugin/assets/src/customizer/components/color-control/index.js index a1422053..536516f0 100644 --- a/plugin/assets/src/customizer/components/color-control/index.js +++ b/plugin/assets/src/customizer/components/color-control/index.js @@ -38,6 +38,7 @@ const api = window.wp.customize; const ColorControl = ( { defaultValue, params, onColorChange, mode } ) => { const [ color, setColor ] = useState( defaultValue ); + const [ previousColor, setPreviousColor ] = useState( defaultValue ); /* @var {Theme} color The current color value. */ const [ displayColorPalette, setDisplayColorPalette ] = useState( false ); const [ materialPickerSelected, setMaterialPickerSelected ] = useState( @@ -50,6 +51,7 @@ const ColorControl = ( { defaultValue, params, onColorChange, mode } ) => { .matches; const onChange = value => { + setPreviousColor( color ); setColor( value ); }; @@ -181,7 +183,7 @@ const ColorControl = ( { defaultValue, params, onColorChange, mode } ) => { { - onChange( value ?? '#ffffff' ); // Use white as default. + onChange( value ?? previousColor ); } } materialColorsOnly={ true } /> From 7e6ec7d746b5a4f9714c37fc2d672ab33b58ea23 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Mon, 11 Jul 2022 11:37:15 -0500 Subject: [PATCH 4/4] Only return to default --- .../assets/src/customizer/components/color-control/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/plugin/assets/src/customizer/components/color-control/index.js b/plugin/assets/src/customizer/components/color-control/index.js index 536516f0..a2bce3c0 100644 --- a/plugin/assets/src/customizer/components/color-control/index.js +++ b/plugin/assets/src/customizer/components/color-control/index.js @@ -38,7 +38,6 @@ const api = window.wp.customize; const ColorControl = ( { defaultValue, params, onColorChange, mode } ) => { const [ color, setColor ] = useState( defaultValue ); - const [ previousColor, setPreviousColor ] = useState( defaultValue ); /* @var {Theme} color The current color value. */ const [ displayColorPalette, setDisplayColorPalette ] = useState( false ); const [ materialPickerSelected, setMaterialPickerSelected ] = useState( @@ -51,7 +50,6 @@ const ColorControl = ( { defaultValue, params, onColorChange, mode } ) => { .matches; const onChange = value => { - setPreviousColor( color ); setColor( value ); }; @@ -183,7 +181,7 @@ const ColorControl = ( { defaultValue, params, onColorChange, mode } ) => { { - onChange( value ?? previousColor ); + onChange( value ?? defaultValue ); } } materialColorsOnly={ true } />