block background colours and tint

resources/js/lib/blocks/classNames.js

@@ -28,6 +28,19 @@ export function sectionClassNames(attributes, defaultClasses, extraClasses = [])
   if('padding_bottom'in attributes && !attributes.padding_bottom)
     classNames.push('section-zero-bottom');
 
+  if('background_colour' in attributes && attributes.background_colour) {
+    let bg = `bg-${ attributes.background_colour }`;
+
+    if(
+      'background_tint' in attributes &&
+      attributes.background_tint != 0 &&
+      !['white', 'black'].includes(attributes.background_colour)
+    ) {
+      bg += `-${ attributes.background_tint }`;
+    }
+
+    classNames.push(bg);
+  }
 
   // combine arrays
   classNames = classNames.concat(defaultClasses).concat(extraClasses);

resources/views/blocks/article/block.json

@@ -11,7 +11,7 @@
   "attributes": {
     "container_width": {
       "type": "string",
-      "default": 0
+      "default": ""
     },
     "alignment": {
       "type": "string"
@@ -23,12 +23,24 @@
     "padding_bottom": {
       "type": "boolean",
       "default": true
+    },
+    "background_colour": {
+      "type": "string",
+      "default": ""
+    },
+    "background_hex": {
+      "type": "string",
+      "default": ""
+    },
+    "background_tint": {
+      "type": "string",
+      "default": "0"
     }
   },
   "supports": {
     "html": true,
     "color": {
-      "background": true,
+      "background": false,
       "text": false
     }
   }

resources/views/blocks/article/index.jsx

@@ -17,6 +17,8 @@ import {
   PanelRow,
   SelectControl,
   ToggleControl,
+  ColorIndicator,
+  ColorPalette,
 } from '@wordpress/components';
 
 import { useState, useEffect } from '@wordpress/element';
@@ -35,20 +37,23 @@ registerBlockType(metadata.name, {
       alignment,
       padding_top,
       padding_bottom,
+      background_colour,
+      background_hex,
+      background_tint,
     } = attributes;
 
     const [
-      containerWidthOptions, setContainerWidthOptions,
+      configOptions, setConfigOptions,
     ] = useState( [] );
 
     useEffect( () => {
-      apiFetch( { path: '/badegg/v1/blocks/container-widths' } )
+      apiFetch( { path: '/badegg/v1/blocks/config' } )
         .then( ( data ) => {
-          setContainerWidthOptions( data );
+          setConfigOptions( data );
           setIsLoading( false );
         } )
         .catch( () => {
-          setContainerWidthOptions( [] );
+          setConfigOptions( [] );
           setIsLoading( false );
         } );
     }, [] );
@@ -60,7 +65,7 @@ registerBlockType(metadata.name, {
         'wysiwyg'
       ]).join(' ');
 
-    console.log(blockProps.className);
+    // console.log(attributes);
 
     return (
       <div { ...blockProps }>
@@ -76,7 +81,7 @@ registerBlockType(metadata.name, {
               <SelectControl
                 label={ __("Container Width", "badegg") }
                 value={ container_width }
-                options={ containerWidthOptions }
+                options={ configOptions.container }
                 onChange={ (value) => setAttributes({ container_width: value }) }
                 __next40pxDefaultSize={ true }
                 __nextHasNoMarginBottom={ true }
@@ -94,6 +99,46 @@ registerBlockType(metadata.name, {
                 __nextHasNoMarginBottom
               />
             </PanelBody>
+            <PanelBody title={ __("Background Colour", "badegg") }>
+              <ColorPalette
+                colors={ configOptions.colours }
+                value={ background_hex }
+                disableCustomColors={ true }
+                onChange={ ( value ) => {
+                  let slug, hex, selected = '';
+
+                  if(value) {
+                    selected = configOptions.colours.find(
+                      ( c ) => c.color === value
+                    );
+
+                    hex = value;
+                  }
+
+                  if(selected) {
+                    slug = selected.slug;
+                  }
+
+                  setAttributes( {
+                    background_colour: slug,
+                    background_hex: hex,
+                  });
+
+                } }
+              />
+
+              { 'background_colour' in attributes && attributes.background_colour ? (
+                <SelectControl
+                  label={ __("Tint", "badegg") }
+                  value={ background_tint }
+                  options={ configOptions.tints }
+                  onChange={ (value) => setAttributes({ background_tint: value }) }
+                  __next40pxDefaultSize={ true }
+                  __nextHasNoMarginBottom={ true }
+                />
+              ) : null }
+
+            </PanelBody>
           </Panel>
         </InspectorControls>
         <div className={ containerClassNames(attributes).join(' ') }>