block background colours and tint

app/API/Admin.php

@@ -1,36 +0,0 @@
-<?php
-
-namespace App\API;
-
-class Admin
-{
-    public function __construct()
-    {
-        add_action( 'rest_api_init', [$this, 'blocks']);
-    }
-
-    public function blocks( )
-    {
-        register_rest_route('badegg/v1', '/blocks/container_width', [
-            'methods' => 'GET',
-            'callback' => [ $this, 'container_width'],
-            'permission_callback' => function(){
-                return true;
-            },
-        ]);
-    }
-
-    public function container_width()
-    {
-        $containerWidths = [
-            [ 'label' => __('Auto', 'badegg'),          'value' => 0        ],
-            [ 'label' => __('Narrow', 'badegg'),        'value' => 'narrow' ],
-            [ 'label' => __('Small', 'badegg'),         'value' => 'small'  ],
-            [ 'label' => __('Medium', 'badegg'),        'value' => 'medium' ],
-            [ 'label' => __('Large', 'badegg'),         'value' => 'large'  ],
-            [ 'label' => __('Edge to edge', 'badegg'),  'value' => 'full'   ],
-        ];
-
-        return rest_ensure_response($containerWidths);
-    }
-}

app/Admin/DisablePost.php

@@ -6,8 +6,8 @@ class DisablePost
 {
     public function __construct()
     {
-        add_filter('register_post_type_args', [$this, 'args'], 0, 2);
-        add_filter('register_taxonomy_args', [$this, 'args'], 0, 2);
+        // add_filter('register_post_type_args', [$this, 'args'], 0, 2);
+        // add_filter('register_taxonomy_args', [$this, 'args'], 0, 2);
     }
 
     public function args($args, $type)

app/Admin/Theme.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Admin;
+use ourcodeworld\NameThatColor\ColorInterpreter as NameThatColor;
+use App\Utilities;
+
+class Theme
+{
+    public function __construct()
+    {
+        add_action( 'after_setup_theme', [$this, 'DynamicPalette'] );
+        // add_action( 'init' , [$this, 'BackgroundTints']);
+    }
+
+    public function DynamicPalette()
+    {
+        $colour = new Utilities\Colour;
+        $NameThatColour = new NameThatColor;
+
+        $palette = [];
+
+        $colours = $colour->values();
+
+        foreach($colours as $slug => $hex) {
+            $palette[] = [
+                'name' => esc_html__(@$NameThatColour->name($hex)['name'], 'badegg'),
+                'slug' => $slug,
+                'color' => $hex,
+            ];
+        }
+
+        if(!empty($colours)) {
+            add_theme_support('editor-color-palette', $palette);
+        }
+    }
+
+    public function BackgroundTints()
+    {
+        register_block_style(
+            'badegg/article',
+            [
+                'name' => 'badegg-colour-tint',
+                'label' => __('Tint', 'badegg'),
+                // 'inline_style' =>'.wp-block-image.is-style-badegg-colour-tint {  }',
+            ]
+        );
+    }
+}

app/Utilities/RestAPI.php

@@ -0,0 +1,80 @@
+<?php
+
+namespace App\Utilities;
+use ourcodeworld\NameThatColor\ColorInterpreter as NameThatColor;
+
+class RestAPI
+{
+    public function __construct()
+    {
+        add_action( 'rest_api_init', [$this, 'blocks']);
+    }
+
+    public function blocks( )
+    {
+        $restBase = 'badegg/v1';
+
+        register_rest_route($restBase, '/blocks/config', [
+            'methods' => 'GET',
+            'callback' => [ $this, 'config'],
+            'permission_callback' => function(){
+                return true;
+            },
+        ]);
+    }
+
+    public function config()
+    {
+        return rest_ensure_response([
+            'container' => $this->containerWidths(),
+            'colours' => $this->colours(),
+            'tints' => $this->tints(),
+        ]);
+    }
+
+    public function containerWidths()
+    {
+        return [
+            [ 'label' => __('Auto', 'badegg'),          'value' => 0        ],
+            [ 'label' => __('Narrow', 'badegg'),        'value' => 'narrow' ],
+            [ 'label' => __('Small', 'badegg'),         'value' => 'small'  ],
+            [ 'label' => __('Medium', 'badegg'),        'value' => 'medium' ],
+            [ 'label' => __('Large', 'badegg'),         'value' => 'large'  ],
+            [ 'label' => __('Edge to edge', 'badegg'),  'value' => 'full'   ],
+        ];
+    }
+
+    public function colours()
+    {
+        $colour = new Colour;
+        $NameThatColour = new NameThatColor;
+
+        $palette = [];
+
+        $colours = $colour->values();
+
+        foreach($colours as $slug => $hex) {
+            $palette[] = [
+                'name' => esc_html__(@$NameThatColour->name($hex)['name'], 'badegg'),
+                'slug' => $slug,
+                'color' => $hex,
+            ];
+        }
+
+        return $palette;
+    }
+
+    public function tints()
+    {
+        return [
+            ['label' => __('Lightest',  'badegg'), 'value' => 'lightest'],
+            ['label' => __('Lighter',   'badegg'), 'value' => 'lighter' ],
+            ['label' => __('Light',     'badegg'), 'value' => 'light'   ],
+            ['label' => __('None',      'badegg'), 'value' => 0         ],
+            ['label' => __('Dark',      'badegg'), 'value' => 'dark'    ],
+            ['label' => __('Darker',    'badegg'), 'value' => 'darker'  ],
+            ['label' => __('Darkest',   'badegg'), 'value' => 'darkest' ],
+        ];
+    }
+
+}

functions.php

@@ -57,7 +57,6 @@ autoload_psr4('PostTypes');
 autoload_psr4('ACF');
 autoload_psr4('Utilities');
 autoload_psr4('Admin');
-autoload_psr4('API');
 
 
 /*

resources/css/editor.scss

@@ -20,20 +20,6 @@
 }
 
 .editor-visual-editor {
-  .wp-block {
-    max-width: none;
-  }
-
-  .is-root-container > .wp-block:not(.block-list-appender) {
-    margin: 0;
-  }
-
-  .block-list-appender {
-    width: 350px;
-    max-width: 90%;
-    margin: 1em auto;
-  }
-
   &__post-title-wrapper {
     position: sticky;
     top: 0;
@@ -43,26 +29,41 @@
     background: white;
     box-shadow: 0 0.5rem 1rem rgba(black, 0.15);
   }
+}
 
-  .wp-block-post-title {
-    position: relative;
-    padding: 0.5rem;
-    border: 1px solid rgba(black, 0.3);
-    margin: 0;
+.editor-styles-wrapper {
+  background: colours.$grey-lightest;
 
-    &::before {
-      content: 'Page Title';
-      position: absolute;
-      top: -0.5rem;
-      left: 0.5rem;
-      color: rgba(black, 0.3);
-      font-size: 0.8rem;
-      display: block;
-      padding: 0 0.5rem;
-      margin: 0;
-      background: white;
-      line-height: 1;
-      font-weight: 400;
-    }
+  .block-list-appender {
+    width: 350px;
+    max-width: 90%;
+    margin: 1em auto;
   }
 }
+
+.wp-block-post-title {
+  position: relative;
+  padding: 0.5rem;
+  border: 1px solid rgba(black, 0.3);
+  margin: 0;
+
+  &::before {
+    content: 'Page Title';
+    position: absolute;
+    top: -0.5rem;
+    left: 0.5rem;
+    color: rgba(black, 0.3);
+    font-size: 0.8rem;
+    display: block;
+    padding: 0 0.5rem;
+    margin: 0;
+    background: white;
+    line-height: 1;
+    font-weight: 400;
+  }
+}
+
+.is-root-container > .wp-block:not(.block-list-appender) {
+  max-width: none;
+  margin: 0;
+}

resources/js/lib/blocks/classNames.js

@@ -0,0 +1,52 @@
+export function containerClassNames(attributes, bgProps)
+{
+
+  let classNames = [
+    'container',
+  ];
+
+  if('container_width' in attributes)
+    classNames.push(`container-${attributes.container_width}`);
+
+  if('alignment' in attributes)
+    classNames.push(`align-${attributes.alignment}`);
+
+  return classNames;
+}
+
+export function sectionClassNames(attributes, defaultClasses, extraClasses = [])
+{
+  defaultClasses = defaultClasses.split(' ');
+
+  let classNames = [
+    'section',
+  ];
+
+  if('padding_top'in attributes && !attributes.padding_top)
+    classNames.push('section-zero-top');
+
+  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);
+
+  // remove duplicate items
+  classNames = [ ...new Set(classNames) ];
+
+  return classNames;
+}

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,11 +17,15 @@ import {
   PanelRow,
   SelectControl,
   ToggleControl,
+  ColorIndicator,
+  ColorPalette,
 } from '@wordpress/components';
+
 import { useState, useEffect } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import metadata from './block.json';
 import allowedBlocks from '../../../json/core-block-whitelist.json';
+import { containerClassNames, sectionClassNames } from '../../../js/lib/blocks/classNames';
 
 registerBlockType(metadata.name, {
   edit({ attributes, setAttributes }) {
@@ -33,25 +37,35 @@ 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_width' } )
-            .then( ( data ) => {
-                setContainerWidthOptions( data );
-                setIsLoading( false );
-            } )
-            .catch( () => {
-                setContainerWidthOptions( [] );
-                setIsLoading( false );
-            } );
+      apiFetch( { path: '/badegg/v1/blocks/config' } )
+        .then( ( data ) => {
+          setConfigOptions( data );
+          setIsLoading( false );
+        } )
+        .catch( () => {
+          setConfigOptions( [] );
+          setIsLoading( false );
+        } );
     }, [] );
 
-    console.log(attributes);
+    blockProps.className = sectionClassNames(
+      attributes,
+      blockProps.className,
+      [
+        'wysiwyg'
+      ]).join(' ');
+
+    // console.log(attributes);
 
     return (
       <div { ...blockProps }>
@@ -67,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 }
@@ -85,9 +99,49 @@ 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={`container container-${ attributes.container_width } align-${ attributes.alignment }`}>
+        <div className={ containerClassNames(attributes).join(' ') }>
           <InnerBlocks
             allowedBlocks={ allowedBlocks }
             defaultBlock={
@@ -106,7 +160,7 @@ registerBlockType(metadata.name, {
   save({ attributes }) {
     return (
       <div { ...useBlockProps.save() }>
-        <div className={`container container-${attributes.container_width} align-${ attributes.alignment }`}>
+        <div className={ containerClassNames(attributes).join() }>
           <InnerBlocks.Content />
         </div>
       </div>