From 62377b1c82e967bb7479bdec3ecf06e010a7470b Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Wed, 1 Dec 2021 15:12:53 -0800 Subject: [PATCH 1/2] Don't restore previous color value if it was explicitly deselected If you deselect a color value before setting the width to zero, when the width is changed to a non-zero value that color should not be restored (because it was explicitly deselected). This was happening because the state that tracked previous values would not update when the value was set to undefined. --- .../block-editor/src/hooks/border-width.js | 64 +++++++++---------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/src/hooks/border-width.js b/packages/block-editor/src/hooks/border-width.js index 29c4ddbda28fc4..8c7338c1522ca9 100644 --- a/packages/block-editor/src/hooks/border-width.js +++ b/packages/block-editor/src/hooks/border-width.js @@ -5,7 +5,7 @@ import { __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, } from '@wordpress/components'; -import { useEffect, useState } from '@wordpress/element'; +import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; /** @@ -32,25 +32,12 @@ export const BorderWidthEdit = ( props ) => { const { width, color: customBorderColor, style: borderStyle } = style?.border || {}; + + // Used to temporarily track previous border color & style selections to be + // able to restore them when border width changes from zero value. const [ styleSelection, setStyleSelection ] = useState(); const [ colorSelection, setColorSelection ] = useState(); - - // Temporarily track previous border color & style selections to be able to - // restore them when border width changes from zero value. - useEffect( () => { - if ( borderStyle !== 'none' ) { - setStyleSelection( borderStyle ); - } - }, [ borderStyle ] ); - - useEffect( () => { - if ( borderColor || customBorderColor ) { - setColorSelection( { - name: !! borderColor ? borderColor : undefined, - color: !! customBorderColor ? customBorderColor : undefined, - } ); - } - }, [ borderColor, customBorderColor ] ); + const [ customColorSelection, setCustomColorSelection ] = useState(); const onChange = ( newWidth ) => { let newStyle = { @@ -65,28 +52,41 @@ export const BorderWidthEdit = ( props ) => { let borderPaletteColor = borderColor; const hasZeroWidth = parseFloat( newWidth ) === 0; + const hadPreviousZeroWidth = parseFloat( width ) === 0; // Setting the border width explicitly to zero will also set the // border style to `none` and clear border color attributes. - if ( hasZeroWidth ) { + if ( hasZeroWidth && ! hadPreviousZeroWidth ) { + // Before clearing color and style selections, keep track of + // the current selections so they can be restored when the width + // changes to a non-zero value. + setColorSelection( borderColor ); + setCustomColorSelection( customBorderColor ); + if ( borderStyle !== 'none' ) { + setStyleSelection( borderStyle ); + } + + // Clear style and color attributes. borderPaletteColor = undefined; newStyle.border.color = undefined; newStyle.border.style = 'none'; } - // Restore previous border style selection if width is now not zero and - // border style was 'none'. This is to support changes to the UI which - // change the border style UI to a segmented control without a "none" - // option. - if ( ! hasZeroWidth && borderStyle === 'none' ) { - newStyle.border.style = styleSelection; - } - - // Restore previous border color selection if width is no longer zero - // and current border color is undefined. - if ( ! hasZeroWidth && borderColor === undefined ) { - borderPaletteColor = colorSelection?.name; - newStyle.border.color = colorSelection?.color; + if ( ! hasZeroWidth && hadPreviousZeroWidth ) { + // Restore previous border style selection if width is now not zero and + // border style was 'none'. This is to support changes to the UI which + // change the border style UI to a segmented control without a "none" + // option. + if ( borderStyle === 'none' ) { + newStyle.border.style = styleSelection; + } + + // Restore previous border color selection if width is no longer zero + // and current border color is undefined. + if ( borderColor === undefined ) { + borderPaletteColor = colorSelection; + newStyle.border.color = customColorSelection; + } } // If width was reset, clean out undefined styles. From 639a146a6dc2d8021f5b29af6ac88a92fd5cd6cc Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Fri, 3 Dec 2021 11:39:32 -0800 Subject: [PATCH 2/2] Remove superfluous borderStyle check --- packages/block-editor/src/hooks/border-width.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/border-width.js b/packages/block-editor/src/hooks/border-width.js index 8c7338c1522ca9..f6ce67d781f34f 100644 --- a/packages/block-editor/src/hooks/border-width.js +++ b/packages/block-editor/src/hooks/border-width.js @@ -62,9 +62,7 @@ export const BorderWidthEdit = ( props ) => { // changes to a non-zero value. setColorSelection( borderColor ); setCustomColorSelection( customBorderColor ); - if ( borderStyle !== 'none' ) { - setStyleSelection( borderStyle ); - } + setStyleSelection( borderStyle ); // Clear style and color attributes. borderPaletteColor = undefined;