block settings: toggle for text contrast and fix colour/tint

web/app/themes/badegg/resources/js/blocks/components/BlockSettings.jsx

@@ -150,16 +150,21 @@ export default function BlockSettings({ attributes, setAttributes }) {
                   slug = selected.slug;
                 }
 
-                setAttributes( {
+                let colourAttributes = {
                   background_colour: slug,
                   background_hex: hex,
-                });
+                };
+
+                if(!slug || [0, '0', 'white', 'black'].includes(slug)) {
+                  colourAttributes.background_tint = '0';
+                }
+
+                setAttributes( colourAttributes );
 
               } }
             />
 
             { 'background_colour' in attributes && attributes.background_colour && ![0, '0', 'white', 'black'].includes(attributes.background_colour) ? (
-              <>
               <SelectControl
                 label={ __("Tint", "badegg") }
                 value={ background_tint }
@@ -168,14 +173,14 @@ export default function BlockSettings({ attributes, setAttributes }) {
                 __next40pxDefaultSize={ true }
                 __nextHasNoMarginBottom={ true }
               />
+            ) : null }
+
             <ToggleControl
               label={ __('Text Contrast', 'badegg') }
               checked={ background_contrast }
               onChange={(value) => setAttributes({ background_contrast: value }) }
               __nextHasNoMarginBottom
             />
-              </>
-            ) : null }
 
             { background_image != 0 && (
               <>