From 70fc06b1972793f1b00a758411edc39a44f5a6b3 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 21 May 2021 16:48:23 +1000 Subject: [PATCH 1/2] Set border style to none when 0 width This application of the border-style: none will only occur if border style support has been opted into for the block. --- .../block-editor/src/hooks/border-width.js | 32 ++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/border-width.js b/packages/block-editor/src/hooks/border-width.js index 88c49769259802..9ec647a7c8b812 100644 --- a/packages/block-editor/src/hooks/border-width.js +++ b/packages/block-editor/src/hooks/border-width.js @@ -5,6 +5,7 @@ import { __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, } from '@wordpress/components'; +import { useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; /** @@ -28,6 +29,17 @@ export const BorderWidthEdit = ( props ) => { setAttributes, } = props; + const { width, style: borderStyle } = style?.border || {}; + const [ styleSelection, setStyleSelection ] = useState(); + + // Temporarily track previous border style selection to be able to restore + // it when border width changes from zero value. + useEffect( () => { + if ( borderStyle !== 'none' ) { + setStyleSelection( borderStyle ); + } + }, [ borderStyle ] ); + const onChange = ( newWidth ) => { let newStyle = { ...style, @@ -37,6 +49,24 @@ export const BorderWidthEdit = ( props ) => { }, }; + const hasZeroWidth = parseFloat( newWidth ) === 0; + + // Setting the border width explicitly to zero will also set the + // border style prop to `none`. This style will only be applied if + // border style support has also been opted into. + if ( hasZeroWidth ) { + 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; + } + + // If width was reset, clean out undefined styles. if ( newWidth === undefined || newWidth === '' ) { newStyle = cleanEmptyObject( newStyle ); } @@ -50,7 +80,7 @@ export const BorderWidthEdit = ( props ) => { return ( Date: Mon, 24 May 2021 19:26:27 +1000 Subject: [PATCH 2/2] Clear border color selection on 0 border width This clear border color selection when the border width is explicitly set to zero. When it is set back to a non-zero value (including undefined) it will attempt to restore the previous color selection if available. --- .../block-editor/src/hooks/border-width.js | 39 +++++++++++++++---- 1 file changed, 32 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/hooks/border-width.js b/packages/block-editor/src/hooks/border-width.js index 9ec647a7c8b812..4a08e240cef607 100644 --- a/packages/block-editor/src/hooks/border-width.js +++ b/packages/block-editor/src/hooks/border-width.js @@ -25,21 +25,32 @@ const MIN_BORDER_WIDTH = 0; */ export const BorderWidthEdit = ( props ) => { const { - attributes: { style }, + attributes: { borderColor, style }, setAttributes, } = props; - const { width, style: borderStyle } = style?.border || {}; + const { width, color: customBorderColor, style: borderStyle } = + style?.border || {}; const [ styleSelection, setStyleSelection ] = useState(); + const [ colorSelection, setColorSelection ] = useState(); - // Temporarily track previous border style selection to be able to restore - // it when border width changes from zero value. + // 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 onChange = ( newWidth ) => { let newStyle = { ...style, @@ -49,12 +60,16 @@ export const BorderWidthEdit = ( props ) => { }, }; + // Used to clear named border color attribute. + let borderPaletteColor = borderColor; + const hasZeroWidth = parseFloat( newWidth ) === 0; // Setting the border width explicitly to zero will also set the - // border style prop to `none`. This style will only be applied if - // border style support has also been opted into. + // border style to `none` and clear border color attributes. if ( hasZeroWidth ) { + borderPaletteColor = undefined; + newStyle.border.color = undefined; newStyle.border.style = 'none'; } @@ -66,12 +81,22 @@ export const BorderWidthEdit = ( props ) => { 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 width was reset, clean out undefined styles. if ( newWidth === undefined || newWidth === '' ) { newStyle = cleanEmptyObject( newStyle ); } - setAttributes( { style: newStyle } ); + setAttributes( { + borderColor: borderPaletteColor, + style: newStyle, + } ); }; const units = useCustomUnits( {