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

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

@@ -150,33 +150,38 @@ 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
-                <SelectControl
+                label={ __("Tint", "badegg") }
-                  label={ __("Tint", "badegg") }
+                value={ background_tint }
-                  value={ background_tint }
+                options={ configOptions.tints }
-                  options={ configOptions.tints }
+                onChange={ (value) => setAttributes({ background_tint: value }) }
-                  onChange={ (value) => setAttributes({ background_tint: value }) }
+                __next40pxDefaultSize={ true }
-                  __next40pxDefaultSize={ true }
+                __nextHasNoMarginBottom={ true }
-                  __nextHasNoMarginBottom={ true }
+              />
-                />
-                <ToggleControl
-                  label={ __('Text Contrast', 'badegg') }
-                  checked={ background_contrast }
-                  onChange={(value) => setAttributes({ background_contrast: value }) }
-                  __nextHasNoMarginBottom
-                />
-              </>
             ) : null }
 
+            <ToggleControl
+              label={ __('Text Contrast', 'badegg') }
+              checked={ background_contrast }
+              onChange={(value) => setAttributes({ background_contrast: value }) }
+              __nextHasNoMarginBottom
+            />
+
             { background_image != 0 && (
               <>
                 <ToggleControl