From c641f4b793a1c7c83a7157e26c5312e4fca4b4aa Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 29 Jul 2021 16:26:00 +1000
Subject: [PATCH] Fix border global style hasValue checks
---
.../src/components/sidebar/border-panel.js | 80 ++++++++-----------
1 file changed, 35 insertions(+), 45 deletions(-)
diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js
index 985628737ab8b..06210d8081000 100644
--- a/packages/edit-site/src/components/sidebar/border-panel.js
+++ b/packages/edit-site/src/components/sidebar/border-panel.js
@@ -69,36 +69,34 @@ export default function BorderPanel( {
getStyle,
setStyle,
} ) {
+ // To better reflect if the user has customized a value we need to
+ // ensure the style value being checked is from the `user` origin.
+ const createHasValueCallback = ( feature ) => () =>
+ !! getStyle( name, feature, 'user' );
+
+ const createResetCallback = ( feature ) => () =>
+ setStyle( name, feature, undefined );
+
+ const handleOnChange = ( feature ) => ( value ) => {
+ setStyle( name, feature, value || undefined );
+ };
+
const units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
} );
- // Border width.
const showBorderWidth = useHasBorderWidthControl( { supports, name } );
- const borderWidth = getStyle( name, 'borderWidth' );
- const resetBorderWidth = () => setStyle( name, 'borderWidth', undefined );
- const hasBorderWidth = () => !! borderWidth;
-
- // Border style.
const showBorderStyle = useHasBorderStyleControl( { supports, name } );
- const borderStyle = getStyle( name, 'borderStyle' );
- const resetBorderStyle = () => setStyle( name, 'borderStyle', undefined );
- const hasBorderStyle = () => !! borderStyle;
+ const showBorderColor = useHasBorderColorControl( { supports, name } );
+ const showBorderRadius = useHasBorderRadiusControl( { supports, name } );
- // Border color.
const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
const disableCustomColors = ! useSetting( 'color.custom' );
const disableCustomGradients = ! useSetting( 'color.customGradient' );
- const showBorderColor = useHasBorderColorControl( { supports, name } );
- const borderColor = getStyle( name, 'borderColor' );
- const resetBorderColor = () => setStyle( name, 'borderColor', undefined );
- const hasBorderColor = () => !! borderColor;
- // Border radius.
- const showBorderRadius = useHasBorderRadiusControl( { supports, name } );
- const borderRadius = getStyle( name, 'borderRadius' );
- const resetBorderRadius = () => setStyle( name, 'borderRadius', undefined );
const hasBorderRadius = () => {
+ const borderRadius = getStyle( name, 'borderRadius', 'user' );
+
if ( typeof borderRadius === 'object' ) {
return Object.entries( borderRadius ).some( Boolean );
}
@@ -107,10 +105,10 @@ export default function BorderPanel( {
};
const resetAll = () => {
- resetBorderColor();
- resetBorderRadius();
- resetBorderStyle();
- resetBorderWidth();
+ setStyle( name, 'borderColor', undefined );
+ setStyle( name, 'borderRadius', undefined );
+ setStyle( name, 'borderStyle', undefined );
+ setStyle( name, 'borderWidth', undefined );
};
return (
@@ -121,54 +119,48 @@ export default function BorderPanel( {
>
{ showBorderWidth && (
{
- setStyle( name, 'borderWidth', value || undefined );
- } }
+ onChange={ handleOnChange( 'borderWidth' ) }
units={ units }
/>
) }
{ showBorderStyle && (
- setStyle( name, 'borderStyle', value )
- }
+ value={ getStyle( name, 'borderStyle' ) }
+ onChange={ handleOnChange( 'borderStyle' ) }
/>
) }
{ showBorderColor && (
- setStyle( name, 'borderColor', value )
- }
+ onColorChange={ handleOnChange( 'borderColor' ) }
/>
) }
@@ -176,14 +168,12 @@ export default function BorderPanel( {
- setStyle( name, 'borderRadius', value )
- }
+ values={ getStyle( name, 'borderRadius' ) }
+ onChange={ handleOnChange( 'borderRadius' ) }
/>
) }