add block READMEs

add placeholder markup to example block editor file
add placeholder js to example block
2026-01-04 18:03:17 +00:00 · 2026-01-04 18:02:58 +00:00 · 2026-01-04 18:02:36 +00:00 · 2026-01-04 18:01:53 +00:00 · 2026-01-04 18:01:18 +00:00 · 2026-01-04 18:00:37 +00:00
45 changed files with 951 additions and 364 deletions
--- a/composer.json
+++ b/composer.json
@@ -67,11 +67,13 @@
    "wpackagist-plugin/flamingo": "^2.6",
    "wpengine/advanced-custom-fields-pro": "^6.7",
    "ourcodeworld/name-that-color": "dev-master",
-    "wpackagist-plugin/resizable-editor-sidebar": "1.0.6"
+    "wpackagist-plugin/resizable-editor-sidebar": "1.0.6",
+    "badegguk/hard-boiled-security": "^1.0"
  },
  "require-dev": {
    "roave/security-advisories": "dev-latest",
-    "laravel/pint": "^1.18"
+    "laravel/pint": "^1.18",
+    "wpackagist-plugin/ajax-thumbnail-rebuild": "^1.14"
  },
  "config": {
    "optimize-autoloader": true,
@@ -89,6 +91,7 @@
      "web/app/mu-plugins/{$name}/": [
        "type:wordpress-muplugin",
        "badegguk/bad-egg-digital-login-page",
+        "badegguk/hard-boiled-security",
        "wpengine/advanced-custom-fields-pro"
      ],
      "web/app/plugins/{$name}/": ["type:wordpress-plugin"],
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
        "This file is @generated automatically"
    ],
-    "content-hash": "0ff612e079c6a14f99464d43e9148603",
+    "content-hash": "7666943446e3342a3e30a48917611260",
    "packages": [
        {
            "name": "badegguk/bad-egg-digital-login-page",
@@ -32,6 +32,32 @@
            },
            "time": "2025-06-03T15:19:29+00:00"
        },
+        {
+            "name": "badegguk/hard-boiled-security",
+            "version": "v1.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/bad-egg-digital/hard-boiled-security.git",
+                "reference": "e4a327a5002848dbd0d01b814cd210374730f098"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/bad-egg-digital/hard-boiled-security/zipball/e4a327a5002848dbd0d01b814cd210374730f098",
+                "reference": "e4a327a5002848dbd0d01b814cd210374730f098",
+                "shasum": ""
+            },
+            "type": "wordpress-plugin",
+            "license": [
+                "GPLv3"
+            ],
+            "description": "A simple plugin that hardens some common Wordpress vulnerabilities.",
+            "homepage": "https://github.com/bad-egg-digital/hard-boiled-security",
+            "support": {
+                "source": "https://github.com/bad-egg-digital/hard-boiled-security/tree/v1.0.1",
+                "issues": "https://github.com/bad-egg-digital/hard-boiled-security/issues"
+            },
+            "time": "2025-12-30T00:36:57+00:00"
+        },
        {
            "name": "composer/installers",
            "version": "v2.3.0",
@@ -2820,6 +2846,24 @@
                }
            ],
            "time": "2025-12-12T23:06:01+00:00"
+        },
+        {
+            "name": "wpackagist-plugin/ajax-thumbnail-rebuild",
+            "version": "1.14",
+            "source": {
+                "type": "svn",
+                "url": "https://plugins.svn.wordpress.org/ajax-thumbnail-rebuild/",
+                "reference": "tags/1.14"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://downloads.wordpress.org/plugin/ajax-thumbnail-rebuild.1.14.zip"
+            },
+            "require": {
+                "composer/installers": "^1.0 || ^2.0"
+            },
+            "type": "wordpress-plugin",
+            "homepage": "https://wordpress.org/plugins/ajax-thumbnail-rebuild/"
        }
    ],
    "aliases": [],
--- a/web/app/themes/badegg/app/Admin/DisablePost.php
+++ b/web/app/themes/badegg/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)
--- a/web/app/themes/badegg/app/Admin/Theme.php
+++ b/web/app/themes/badegg/app/Admin/Theme.php
@@ -0,0 +1,35 @@
+<?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'] );
+    }
+
+    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);
+        }
+    }
+}
--- a/web/app/themes/badegg/app/Utilities/Colour.php
+++ b/web/app/themes/badegg/app/Utilities/Colour.php
@@ -10,6 +10,8 @@ class Colour

        if($colour == 'black'):
            $hex = '#000000';
+        elseif($colour == 'grey'):
+            $hex = '#808080';
        elseif($colour == 'white'):
            $hex = '#FFFFFF';
        else:
@@ -27,20 +29,23 @@ class Colour

    public function values()
    {
-        $colours = get_field('badegg_colours', 'option');
-
        $values = [];

-        if($colours):
-            foreach($colours as $index => $props):
-                $index = $index + 1;
-                $hex = @$props['hex'];
+        if(function_exists('get_field')):
+            $colours = get_field('badegg_colours', 'option');

-                if($hex) $values[$this->latinate($index)] = $hex;
-            endforeach;
+            if($colours):
+                foreach($colours as $index => $props):
+                    $index = $index + 1;
+                    $hex = @$props['hex'];
+
+                    if($hex) $values[$this->latinate($index)] = $hex;
+                endforeach;
+            endif;
        endif;

        $values['white'] = '#FFFFFF';
+        $values['grey'] = '#808080';
        $values['black'] = '#000000';

        return $values;
@@ -49,13 +54,13 @@ class Colour
    public function tints()
    {
      return [
-        'lightest'  =>  100,
-        'lighter'   =>  66,
-        'light'     =>  33,
+        'lightest'  =>  40,
+        'lighter'   =>  25,
+        'light'     =>  10,
        '0'         =>   0,
-        'dark'      => -33,
-        'darker'    => -66,
-        'darkest'   => -100,
+        'dark'      => -10,
+        'darker'    => -25,
+        'darkest'   => -40,
      ];
    }

--- a/web/app/themes/badegg/app/Utilities/CssClasses.php
+++ b/web/app/themes/badegg/app/Utilities/CssClasses.php
@@ -30,17 +30,17 @@ class CssClasses {
                'tint' => $props['bg_tint'],
            ]);

-        if(($knockout && $Colour->is_dark($hex) || $props['contrast'] == 'light'))
+        if(($props['contrast'] && $knockout))
            $classes[] = 'knockout';

-        if($props['padding_top'])
+        if(!$props['padding_top'])
            $classes[] = 'section-zero-top';

-        if($props['padding_bottom'])
+        if(!$props['padding_bottom'])
            $classes[] = 'section-zero-bottom';

        if($props['bg_image'])
-            $classes[] = "bg-watermarked";
+            $classes[] = "has-bg-image";

        return $classes;
    }
@@ -89,7 +89,7 @@ class CssClasses {
        if($args['align'])
            $classes[] = 'align-' . $args['align'];

-        if(($Colour->is_dark($hex) || $bg_props['contrast'] == 'light'))
+        if(($bg_props['contrast']))
            $classes[] = 'knockout';

        return $classes;
--- a/web/app/themes/badegg/app/Utilities/RestAPI.php
+++ b/web/app/themes/badegg/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' ],
+        ];
+    }
+
+}
--- a/web/app/themes/badegg/app/blocks.php
+++ b/web/app/themes/badegg/app/blocks.php
@@ -103,6 +103,7 @@ add_action('init', function () {
            'style'             => "{$slug}-style",
            'script'            => "{$slug}-script",
            'view_script'       => "{$slug}-view-script",
+            'attributes'        => attributes(),
        ];

        if(!property_exists($json, 'acf') && \Roots\view()->exists("blocks.{$slug}.render")) {
@@ -123,12 +124,20 @@ add_action('init', function () {

 function list_inner()
 {
-    $file = file_get_contents(get_theme_file_path("resources/json/core-block-whitelist.json"));
+    $file = file_get_contents(get_theme_file_path("resources/json/block-core-whitelist.json"));
    $json = json_decode($file);

    return $json;
 }

+function attributes()
+{
+    $file = file_get_contents(get_theme_file_path("resources/json/block-attributes.json"));
+    $json = json_decode($file, true);
+
+    return $json;
+}
+
 function list_all()
 {
    $blocks = array_map(function($block) {
--- a/web/app/themes/badegg/functions.php
+++ b/web/app/themes/badegg/functions.php
@@ -57,21 +57,7 @@ autoload_psr4('PostTypes');
 autoload_psr4('ACF');
 autoload_psr4('Utilities');
 autoload_psr4('Admin');
-autoload_psr4('Ajax');

-function autoload_psr4_blocks() {
-    $path = __dir__ . '/resources/views/acf-blocks/*';
-    $namespace = 'Blocks\\';
-
-    foreach(glob($path, GLOB_ONLYDIR) as $directory) {
-        $name = basename($directory);
-        $class = $namespace . $name . '\\' . $name;
-
-        new $class();
-    }
-}
-
-autoload_psr4_blocks();

 /*
 |--------------------------------------------------------------------------
--- a/web/app/themes/badegg/package-lock.json
+++ b/web/app/themes/badegg/package-lock.json
@@ -464,7 +464,6 @@
      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@jridgewell/sourcemap-codec": "^1.5.0",
        "@jridgewell/trace-mapping": "^0.3.24"
@@ -476,7 +475,6 @@
      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=6.0.0"
      }
@@ -487,7 +485,6 @@
      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@jridgewell/gen-mapping": "^0.3.5",
        "@jridgewell/trace-mapping": "^0.3.25"
@@ -498,8 +495,7 @@
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/@jridgewell/trace-mapping": {
      "version": "0.3.31",
@@ -507,7 +503,6 @@
      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@jridgewell/resolve-uri": "^3.1.0",
        "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1195,7 +1190,6 @@
      "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/estree": "*",
        "@types/json-schema": "*"
@@ -1207,7 +1201,6 @@
      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/eslint": "*",
        "@types/estree": "*"
@@ -1225,8 +1218,7 @@
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/@types/node": {
      "version": "24.9.2",
@@ -1234,7 +1226,6 @@
      "integrity": "sha512-uWN8YqxXxqFMX2RqGOrumsKeti4LlmIMIyV0lgut4jx7KQBcBiW6vkDtIBvHnHIquwNfJhk8v2OtmO8zXWHfPA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "undici-types": "~7.16.0"
      }
@@ -1245,7 +1236,6 @@
      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@webassemblyjs/helper-numbers": "1.13.2",
        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
@@ -1256,24 +1246,21 @@
      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/@webassemblyjs/helper-api-error": {
      "version": "1.13.2",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/@webassemblyjs/helper-buffer": {
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/@webassemblyjs/helper-numbers": {
      "version": "1.13.2",
@@ -1281,7 +1268,6 @@
      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
        "@webassemblyjs/helper-api-error": "1.13.2",
@@ -1293,8 +1279,7 @@
      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/@webassemblyjs/helper-wasm-section": {
      "version": "1.14.1",
@@ -1302,7 +1287,6 @@
      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@webassemblyjs/ast": "1.14.1",
        "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1316,7 +1300,6 @@
      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@xtuc/ieee754": "^1.2.0"
      }
@@ -1327,7 +1310,6 @@
      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
      "dev": true,
      "license": "Apache-2.0",
-      "peer": true,
      "dependencies": {
        "@xtuc/long": "4.2.2"
      }
@@ -1337,8 +1319,7 @@
      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/@webassemblyjs/wasm-edit": {
      "version": "1.14.1",
@@ -1346,7 +1327,6 @@
      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@webassemblyjs/ast": "1.14.1",
        "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1364,7 +1344,6 @@
      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@webassemblyjs/ast": "1.14.1",
        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
@@ -1379,7 +1358,6 @@
      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@webassemblyjs/ast": "1.14.1",
        "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1393,7 +1371,6 @@
      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@webassemblyjs/ast": "1.14.1",
        "@webassemblyjs/helper-api-error": "1.13.2",
@@ -1409,7 +1386,6 @@
      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@webassemblyjs/ast": "1.14.1",
        "@xtuc/long": "4.2.2"
@@ -1437,16 +1413,14 @@
      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
      "dev": true,
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
    },
    "node_modules/@xtuc/long": {
      "version": "4.2.2",
      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
      "dev": true,
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
    },
    "node_modules/acorn": {
      "version": "8.15.0",
@@ -1468,7 +1442,6 @@
      "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=10.13.0"
      },
@@ -1500,7 +1473,6 @@
      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "ajv": "^8.0.0"
      },
@@ -1519,7 +1491,6 @@
      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.3"
      },
@@ -1533,7 +1504,6 @@
      "integrity": "sha512-JU0h5APyQNsHOlAM7HnQnPToSDQoEBZqzu/YBlqDnEeymPnZDREeXJA3KBMQee+dKteAxZ2AtvQEvVYdZf241Q==",
      "dev": true,
      "license": "Apache-2.0",
-      "peer": true,
      "bin": {
        "baseline-browser-mapping": "dist/cli.js"
      }
@@ -1591,8 +1561,7 @@
      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001751",
@@ -1613,8 +1582,7 @@
          "url": "https://github.com/sponsors/ai"
        }
      ],
-      "license": "CC-BY-4.0",
-      "peer": true
+      "license": "CC-BY-4.0"
    },
    "node_modules/chokidar": {
      "version": "4.0.3",
@@ -1638,7 +1606,6 @@
      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=6.0"
      }
@@ -1648,8 +1615,7 @@
      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/detect-libc": {
      "version": "1.0.3",
@@ -1670,8 +1636,7 @@
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.244.tgz",
      "integrity": "sha512-OszpBN7xZX4vWMPJwB9illkN/znA8M36GQqQxi6MNy9axWxhOfJyZZJtSLQCpEFLHP2xK33BiWx9aIuIEXVCcw==",
      "dev": true,
-      "license": "ISC",
-      "peer": true
+      "license": "ISC"
    },
    "node_modules/enhanced-resolve": {
      "version": "5.18.3",
@@ -1679,7 +1644,6 @@
      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "graceful-fs": "^4.2.4",
        "tapable": "^2.2.0"
@@ -1693,8 +1657,7 @@
      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/esbuild": {
      "version": "0.25.11",
@@ -1744,7 +1707,6 @@
      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=6"
      }
@@ -1755,7 +1717,6 @@
      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
      "dev": true,
      "license": "BSD-2-Clause",
-      "peer": true,
      "dependencies": {
        "esrecurse": "^4.3.0",
        "estraverse": "^4.1.1"
@@ -1770,7 +1731,6 @@
      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
      "dev": true,
      "license": "BSD-2-Clause",
-      "peer": true,
      "dependencies": {
        "estraverse": "^5.2.0"
      },
@@ -1784,7 +1744,6 @@
      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
      "dev": true,
      "license": "BSD-2-Clause",
-      "peer": true,
      "engines": {
        "node": ">=4.0"
      }
@@ -1795,7 +1754,6 @@
      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
      "dev": true,
      "license": "BSD-2-Clause",
-      "peer": true,
      "engines": {
        "node": ">=4.0"
      }
@@ -1806,7 +1764,6 @@
      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.8.x"
      }
@@ -1816,8 +1773,7 @@
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/fast-glob": {
      "version": "3.3.3",
@@ -1851,8 +1807,7 @@
          "url": "https://opencollective.com/fastify"
        }
      ],
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
    },
    "node_modules/fastq": {
      "version": "1.19.1",
@@ -1928,16 +1883,14 @@
      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
      "dev": true,
-      "license": "BSD-2-Clause",
-      "peer": true
+      "license": "BSD-2-Clause"
    },
    "node_modules/graceful-fs": {
      "version": "4.2.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
      "dev": true,
-      "license": "ISC",
-      "peer": true
+      "license": "ISC"
    },
    "node_modules/has-flag": {
      "version": "4.0.0",
@@ -1945,7 +1898,6 @@
      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=8"
      }
@@ -1996,7 +1948,6 @@
      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/node": "*",
        "merge-stream": "^2.0.0",
@@ -2011,16 +1962,14 @@
      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/json-schema-traverse": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/json2php": {
      "version": "0.0.7",
@@ -2055,7 +2004,6 @@
      "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=6.11.5"
      },
@@ -2069,8 +2017,7 @@
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/merge2": {
      "version": "1.4.1",
@@ -2115,7 +2062,6 @@
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -2126,7 +2072,6 @@
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "mime-db": "1.52.0"
      },
@@ -2158,8 +2103,7 @@
      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/node-addon-api": {
      "version": "7.1.1",
@@ -2174,8 +2118,7 @@
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/picocolors": {
      "version": "1.1.1",
@@ -2190,6 +2133,7 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -2253,7 +2197,6 @@
      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "safe-buffer": "^5.1.0"
      }
@@ -2278,7 +2221,6 @@
      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -2379,8 +2321,7 @@
          "url": "https://feross.org/support"
        }
      ],
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/sass": {
      "version": "1.93.2",
@@ -2388,6 +2329,7 @@
      "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "chokidar": "^4.0.0",
        "immutable": "^5.0.2",
@@ -2409,7 +2351,6 @@
      "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/json-schema": "^7.0.9",
        "ajv": "^8.9.0",
@@ -2430,7 +2371,6 @@
      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
      "dev": true,
      "license": "BSD-3-Clause",
-      "peer": true,
      "dependencies": {
        "randombytes": "^2.1.0"
      }
@@ -2441,7 +2381,6 @@
      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
      "dev": true,
      "license": "BSD-3-Clause",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -2462,7 +2401,6 @@
      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "buffer-from": "^1.0.0",
        "source-map": "^0.6.0"
@@ -2474,7 +2412,6 @@
      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "has-flag": "^4.0.0"
      },
@@ -2491,7 +2428,6 @@
      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=6"
      },
@@ -2506,7 +2442,6 @@
      "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
      "dev": true,
      "license": "BSD-2-Clause",
-      "peer": true,
      "dependencies": {
        "@jridgewell/source-map": "^0.3.3",
        "acorn": "^8.15.0",
@@ -2526,7 +2461,6 @@
      "integrity": "sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@jridgewell/trace-mapping": "^0.3.25",
        "jest-worker": "^27.4.5",
@@ -2591,8 +2525,7 @@
      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/update-browserslist-db": {
      "version": "1.1.4",
@@ -2614,7 +2547,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "escalade": "^3.2.0",
        "picocolors": "^1.1.1"
@@ -2632,6 +2564,7 @@
      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "esbuild": "^0.25.0",
        "fdir": "^6.4.4",
@@ -2731,7 +2664,6 @@
      "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "glob-to-regexp": "^0.4.1",
        "graceful-fs": "^4.1.2"
@@ -2796,7 +2728,6 @@
      "integrity": "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=10.13.0"
      }
--- a/web/app/themes/badegg/resources/acf/group_clone_background_settings.json
+++ b/web/app/themes/badegg/resources/acf/group_clone_background_settings.json
@@ -17,9 +17,12 @@
                "id": ""
            },
            "choices": {
-                "0": "auto",
+                "0": "None",
                "primary": "<i class=\"fas fa-circle\" style=\"color: #dd3333\"><\/i> Punch",
+                "secondary": "<i class=\"fas fa-circle\" style=\"color: #81d742\"><\/i> Atlantis",
+                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #8224e3\"><\/i> Purple Heart",
                "white": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White",
+                "grey": "<i class=\"fas fa-circle\" style=\"color: #808080\"><\/i> Gray",
                "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black"
            },
            "default_value": 0,
@@ -91,10 +94,10 @@
        },
        {
            "key": "field_67350f526abf1",
-            "label": "Text Contrast",
+            "label": "",
            "name": "contrast",
            "aria-label": "",
-            "type": "select",
+            "type": "true_false",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
@@ -103,20 +106,12 @@
                "class": "",
                "id": ""
            },
-            "choices": {
-                "0": "Auto",
-                "dark": "Force dark text",
-                "light": "Force light text"
-            },
+            "message": "Text Contrast",
            "default_value": 0,
-            "return_format": "value",
-            "multiple": 0,
-            "allow_null": 0,
-            "ui": 0,
-            "ajax": 0,
-            "placeholder": "",
-            "create_options": 0,
-            "save_options": 0
+            "allow_in_bindings": 0,
+            "ui_on_text": "Light",
+            "ui_off_text": "Dark",
+            "ui": 1
        }
    ],
    "location": [
@@ -137,5 +132,6 @@
    "active": true,
    "description": "",
    "show_in_rest": 0,
-    "modified": 1765746167
+    "display_title": "",
+    "modified": 1767548180
 }
--- a/web/app/themes/badegg/resources/acf/group_clone_block_settings.json
+++ b/web/app/themes/badegg/resources/acf/group_clone_block_settings.json
@@ -36,56 +36,6 @@
            },
            "layout": "block",
            "sub_fields": [
-                {
-                    "key": "field_67350eb62cdf9",
-                    "label": "Top Padding",
-                    "name": "padding_top",
-                    "aria-label": "",
-                    "type": "radio",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "50",
-                        "class": "",
-                        "id": ""
-                    },
-                    "choices": [
-                        "On",
-                        "Off"
-                    ],
-                    "default_value": "",
-                    "return_format": "value",
-                    "allow_null": 0,
-                    "other_choice": 0,
-                    "layout": "horizontal",
-                    "save_other_choice": 0
-                },
-                {
-                    "key": "field_673510c1dc830",
-                    "label": "Bottom Padding",
-                    "name": "padding_bottom",
-                    "aria-label": "",
-                    "type": "radio",
-                    "instructions": "",
-                    "required": 0,
-                    "conditional_logic": 0,
-                    "wrapper": {
-                        "width": "50",
-                        "class": "",
-                        "id": ""
-                    },
-                    "choices": [
-                        "On",
-                        "Off"
-                    ],
-                    "default_value": "",
-                    "return_format": "value",
-                    "allow_null": 0,
-                    "other_choice": 0,
-                    "layout": "horizontal",
-                    "save_other_choice": 0
-                },
                {
                    "key": "field_6800097e61765",
                    "label": "Container Width",
@@ -119,6 +69,66 @@
                    "create_options": 0,
                    "save_options": 0
                },
+                {
+                    "key": "field_67350eb62cdf9",
+                    "label": "",
+                    "name": "padding_top",
+                    "aria-label": "",
+                    "type": "true_false",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "message": "Top Padding",
+                    "default_value": 1,
+                    "allow_in_bindings": 0,
+                    "ui_on_text": "On",
+                    "ui_off_text": "Off",
+                    "ui": 1
+                },
+                {
+                    "key": "field_673510c1dc830",
+                    "label": "",
+                    "name": "padding_bottom",
+                    "aria-label": "",
+                    "type": "true_false",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "message": "Bottom Padding",
+                    "default_value": 1,
+                    "allow_in_bindings": 0,
+                    "ui_on_text": "On",
+                    "ui_off_text": "Off",
+                    "ui": 1
+                },
+                {
+                    "key": "field_695aa550e16d4",
+                    "label": "Background",
+                    "name": "",
+                    "aria-label": "",
+                    "type": "message",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "message": "",
+                    "new_lines": "wpautop",
+                    "esc_html": 0
+                },
                {
                    "key": "field_67350aeb146ca",
                    "label": "Background",
@@ -181,5 +191,5 @@
    "description": "",
    "show_in_rest": 0,
    "display_title": "",
-    "modified": 1765815052
+    "modified": 1767548583
 }
--- a/web/app/themes/badegg/resources/css/app.scss
+++ b/web/app/themes/badegg/resources/css/app.scss
@@ -14,6 +14,7 @@
@use "sections/footer";

 // Components
+@use "components/block";
@use "components/forms";
@use "components/button";
@use "components/card";
--- a/web/app/themes/badegg/resources/css/blocks/BadExample.scss
+++ b/web/app/themes/badegg/resources/css/blocks/BadExample.scss
--- a/web/app/themes/badegg/resources/css/components/_block.scss
+++ b/web/app/themes/badegg/resources/css/components/_block.scss
@@ -0,0 +1,15 @@
+
+
+.has-bg-image {
+  position: relative;
+
+  >.container {
+    position: relative;
+    z-index: 1;
+  }
+
+  .badegg-block-background {
+    position: absolute;
+    inset: 0;
+  }
+}
--- a/web/app/themes/badegg/resources/css/editor.scss
+++ b/web/app/themes/badegg/resources/css/editor.scss
@@ -1,6 +1,10 @@
@use "app";
@use "global/variables/colours";

+html :where(.wp-block) {
+  max-width: none;
+}
+
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]) {
  &:hover:after {
    content: '';
@@ -20,20 +24,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 +33,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;
+}
--- a/web/app/themes/badegg/resources/css/global/_typography.scss
+++ b/web/app/themes/badegg/resources/css/global/_typography.scss
@@ -63,7 +63,7 @@ p,
 li,
 td,
 label {
-  color: colours.$grey-dark;
+  color: colours.$grey-darker;
  font-family: fonts.$font;
  font-weight: 400;
  line-height: 1.5em;
@@ -142,11 +142,7 @@ hr {
 }

 .align {
-  &-centre {
-    text-align: center;
-  }
-
-  &-right {
-    text-align: right;
-  }
+  &-left { text-align: left; }
+  &-centre, &-center { text-align: center; }
+  &-right { text-align: right; }
 }
--- a/web/app/themes/badegg/resources/css/global/mixins/_generate-button-classes.scss
+++ b/web/app/themes/badegg/resources/css/global/mixins/_generate-button-classes.scss
@@ -24,7 +24,7 @@
      }
    }

-    #{$button}.#{$name}.inverted {
+    #{$button}.#{$name}.outline {
      color: $hex;
      background: transparent;
      border-color: $hex;
--- a/web/app/themes/badegg/resources/css/global/variables/_colours.scss
+++ b/web/app/themes/badegg/resources/css/global/variables/_colours.scss
@@ -13,48 +13,50 @@ $secondary: #5bc0de;
 $tertiary: color.invert($primary);
 $quaternary: color.invert($secondary);

+//== Shades
+$white:               #FFFFFF;
+$grey:                #808080;
+$black:               #000000;
+
 //== Primary Tints
-$primary-darkest: color.adjust($primary, $lightness: -30%);
-$primary-darker: color.adjust($primary, $lightness: -20%);
-$primary-dark: color.adjust($primary, $lightness: -10%);
-$primary-light: color.adjust($primary, $lightness: 10%);
-$primary-lighter: color.adjust($primary, $lightness: 20%);
-$primary-lightest: color.adjust($primary, $lightness: 30%);
+$primary-darkest: color.adjust($primary, $lightness: -45%);
+$primary-darker: color.adjust($primary, $lightness: -30%);
+$primary-dark: color.adjust($primary, $lightness: -15%);
+$primary-light: color.adjust($primary, $lightness: 15%);
+$primary-lighter: color.adjust($primary, $lightness: 30%);
+$primary-lightest: color.adjust($primary, $lightness: 45%);

 //== Secondary Tints
-$secondary-darkest: color.adjust($secondary, $lightness: -30%);
-$secondary-darker: color.adjust($secondary, $lightness: -20%);
-$secondary-dark: color.adjust($secondary, $lightness: -10%);
-$secondary-light: color.adjust($secondary, $lightness: 10%);
-$secondary-lighter: color.adjust($secondary, $lightness: 20%);
-$secondary-lightest: color.adjust($secondary, $lightness: 30%);
+$secondary-darkest: color.adjust($secondary, $lightness: -45%);
+$secondary-darker: color.adjust($secondary, $lightness: -30%);
+$secondary-dark: color.adjust($secondary, $lightness: -15%);
+$secondary-light: color.adjust($secondary, $lightness: 15%);
+$secondary-lighter: color.adjust($secondary, $lightness: 30%);
+$secondary-lightest: color.adjust($secondary, $lightness: 45%);

 //== Tertiary Tints
-$tertiary-darkest: color.adjust($tertiary, $lightness: -30%);
-$tertiary-darker: color.adjust($tertiary, $lightness: -20%);
-$tertiary-dark: color.adjust($tertiary, $lightness: -10%);
-$tertiary-light: color.adjust($tertiary, $lightness: 10%);
-$tertiary-lighter: color.adjust($tertiary, $lightness: 20%);
-$tertiary-lightest: color.adjust($tertiary, $lightness: 30%);
+$tertiary-darkest: color.adjust($tertiary, $lightness: -45%);
+$tertiary-darker: color.adjust($tertiary, $lightness: -30%);
+$tertiary-dark: color.adjust($tertiary, $lightness: -15%);
+$tertiary-light: color.adjust($tertiary, $lightness: 15%);
+$tertiary-lighter: color.adjust($tertiary, $lightness: 30%);
+$tertiary-lightest: color.adjust($tertiary, $lightness: 45%);

 //== quaternary Tints
-$quaternary-darkest: color.adjust($quaternary, $lightness: -30%);
-$quaternary-darker: color.adjust($quaternary, $lightness: -20%);
-$quaternary-dark: color.adjust($quaternary, $lightness: -10%);
-$quaternary-light: color.adjust($quaternary, $lightness: 10%);
-$quaternary-lighter: color.adjust($quaternary, $lightness: 20%);
-$quaternary-lightest: color.adjust($quaternary, $lightness: 30%);
+$quaternary-darkest: color.adjust($quaternary, $lightness: -45%);
+$quaternary-darker: color.adjust($quaternary, $lightness: -30%);
+$quaternary-dark: color.adjust($quaternary, $lightness: -15%);
+$quaternary-light: color.adjust($quaternary, $lightness: 15%);
+$quaternary-lighter: color.adjust($quaternary, $lightness: 30%);
+$quaternary-lightest: color.adjust($quaternary, $lightness: 45%);

-//== Shades
-$white:               white;
-$grey-lightest:       color.adjust(black, $lightness: 95%);
-$grey-lighter:        color.adjust(black, $lightness: 80%);
-$grey-light:          color.adjust(black, $lightness: 70%);
-$grey:                color.adjust(black, $lightness: 50%);
-$grey-dark:           color.adjust(black, $lightness: 40%);
-$grey-darker:         color.adjust(black, $lightness: 20%);
-$grey-darkest:        color.adjust(black, $lightness: 05%);
-$black:               black;
+//== six shades of grey
+$grey-darkest:        color.adjust(grey, $lightness: -40%);
+$grey-darker:         color.adjust(grey, $lightness: -25%);
+$grey-dark:           color.adjust(grey, $lightness: -10%);
+$grey-light:          color.adjust(grey, $lightness: 10%);
+$grey-lighter:        color.adjust(grey, $lightness: 25%);
+$grey-lightest:       color.adjust(grey, $lightness: 40%);

 //## Colour Array (used in generating colour classes).
 $colors: (
--- a/web/app/themes/badegg/resources/js/blocks/components/AttachmentImage.jsx
+++ b/web/app/themes/badegg/resources/js/blocks/components/AttachmentImage.jsx
@@ -0,0 +1,46 @@
+import { useSelect } from '@wordpress/data';
+
+/**
+ * AttachmentImage
+ *
+ * This component is used to display an image from the media library.
+ * It's meant as a JS companion to the PHP function `wp_get_attachment_image()`.
+ *
+ * @link https://www.briancoords.com/getting-wordpress-media-library-images-in-javascript/
+ *
+ * @param {object} props
+ * @param {number} props.imageId The ID of the image to display.
+ * @param {string} props.size The size of the image to display. Defaults to 'full'.
+ * @returns {*} React JSX
+ */
+export default function AttachmentImage({ imageId, size = 'full' }) {
+
+	const { image } = useSelect((select) => ({
+		image: select('core').getEntityRecord('postType', 'attachment', imageId),
+	}));
+
+	const imageAttributes = () =>{
+		let attributes = {
+			src: image.source_url,
+			alt: image.alt_text,
+			className: `attachment-${size} size-${size}`,
+			width: image.media_details.width,
+			height: image.media_details.height,
+		};
+		if (image.media_details && image.media_details.sizes && image.media_details.sizes[size]) {
+			attributes.src = image.media_details.sizes[size].source_url;
+			attributes.width = image.media_details.sizes[size].width;
+			attributes.height = image.media_details.sizes[size].height;
+		}
+
+		return attributes;
+	};
+
+	return (
+		<>
+			{image && (
+				<img {...imageAttributes()} />
+			)}
+		</>
+	)
+}
--- a/web/app/themes/badegg/resources/js/blocks/components/BackgroundImage.jsx
+++ b/web/app/themes/badegg/resources/js/blocks/components/BackgroundImage.jsx
@@ -0,0 +1,33 @@
+import { useSelect } from '@wordpress/data';
+
+/**
+ * BackgroundImage
+ *
+ * This component is used to display a background image for a block based on its attributes.
+ *
+ * @param {object} props
+ * @param {string} props.background_image The url of the background image.
+ * @param {string} props.background_position The background-position property.
+ * @param {boolean} props.background_fixed Toggle for background-attachment: fixed.
+ * @param {number} props.background_opacity The opacity value applied to the image.
+ * @returns {*} React JSX
+ */
+export default function BackgroundImage({ background_url, background_position = 'center', background_fixed = false, background_opacity = 70 }) {
+
+	return (
+		<>
+			{background_url && (
+				<div
+          className="badegg-block-background"
+          style={{
+            backgroundImage: `url(${background_url})`,
+            backgroundPosition: background_position,
+            backgroundSize: 'cover',
+            backgroundAttachment: background_fixed ? 'fixed' : 'scroll',
+            opacity: Number(background_opacity) * 0.01,
+          }}
+        />
+			)}
+		</>
+	)
+}
--- a/web/app/themes/badegg/resources/js/blocks/components/BlockSettings.jsx
+++ b/web/app/themes/badegg/resources/js/blocks/components/BlockSettings.jsx
@@ -0,0 +1,236 @@
+import { useSelect } from '@wordpress/data';
+
+/**
+ * BlockSettings
+ *
+ * Bundles the <InspectorControls> used for several blocks
+ * *
+ * @param {object} props
+ * @param {number} props.attributes the data
+ * @param {string} props.setAttributes the state
+ * @returns {*} React JSX
+ */
+
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+
+import {
+	Panel,
+	PanelBody,
+	PanelRow,
+	SelectControl,
+	ToggleControl,
+	RangeControl,
+	ColorPalette,
+	Button,
+	Spinner,
+} from '@wordpress/components';
+
+import {
+	InspectorControls,
+  BlockControls,
+  AlignmentToolbar,
+	MediaUpload,
+	MediaUploadCheck,
+} from '@wordpress/block-editor';
+
+export default function BlockSettings({ attributes, setAttributes }) {
+	const [ configOptions, setConfigOptions ] = useState([]);
+	const [ isLoading, setIsLoading ] = useState(true);
+
+  useEffect( () => {
+		let isMounted = true;
+
+		apiFetch( { path: '/badegg/v1/blocks/config' } )
+			.then( ( data ) => {
+				if ( isMounted ) {
+					setConfigOptions( data );
+					setIsLoading( false );
+				}
+			} )
+			.catch( () => {
+				if ( isMounted ) {
+					setConfigOptions( null );
+					setIsLoading( false );
+				}
+			} );
+
+		return () => {
+			isMounted = false;
+		};
+	}, [] );
+
+  if ( isLoading ) {
+		return (
+			<InspectorControls>
+				<Panel>
+					<PanelBody>
+						<Spinner />
+					</PanelBody>
+				</Panel>
+			</InspectorControls>
+		);
+	}
+
+	if ( ! configOptions ) {
+		return null;
+	}
+
+  const {
+    alignment,
+		container_width,
+		padding_top,
+		padding_bottom,
+		background_hex,
+		background_tint,
+		background_image,
+    background_url,
+		background_opacity,
+		background_contrast,
+		background_fixed,
+	} = attributes;
+
+	return (
+    <>
+      <BlockControls>
+        <AlignmentToolbar
+          value={ alignment }
+          onChange={(value) => setAttributes({alignment: value})}
+        />
+      </BlockControls>
+      <InspectorControls>
+        <Panel className="badegg-components-panel">
+          <PanelBody title={ __("Spacing", "badegg") }>
+            <SelectControl
+              label={ __("Container Width", "badegg") }
+              value={ container_width }
+              options={ configOptions.container }
+              onChange={ (value) => setAttributes({ container_width: value }) }
+              __next40pxDefaultSize={ true }
+              __nextHasNoMarginBottom={ true }
+            />
+            <ToggleControl
+              label={ __('Top padding', 'badegg') }
+              checked={ padding_top }
+              onChange={(value) => setAttributes({ padding_top: value }) }
+              __nextHasNoMarginBottom
+            />
+            <ToggleControl
+              label={ __('Bottom padding', 'badegg') }
+              checked={ padding_bottom }
+              onChange={(value) => setAttributes({ padding_bottom: value }) }
+              __nextHasNoMarginBottom
+            />
+          </PanelBody>
+          <PanelBody title={ __("Background", "badegg") }>
+            <p style={{ textTransform: 'uppercase', fontSize: '11px' }} className="components-truncate components-text components-input-control__label">
+              { __('Colour', 'badegg') }
+            </p>
+            <ColorPalette
+              colors={ configOptions.colours }
+              value={ background_hex }
+              clearable={ false }
+              disableCustomColors={ true }
+              style={{ marginBottom: '16px' }}
+              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 && ![0, '0', 'white', 'black'].includes(attributes.background_colour) ? (
+              <>
+                <SelectControl
+                  label={ __("Background Tint", "badegg") }
+                  value={ background_tint }
+                  options={ configOptions.tints }
+                  onChange={ (value) => setAttributes({ background_tint: value }) }
+                  __next40pxDefaultSize={ true }
+                  __nextHasNoMarginBottom={ true }
+                />
+                <ToggleControl
+                  label={ __('Text Contrast', 'badegg') }
+                  checked={ background_contrast }
+                  onChange={(value) => setAttributes({ background_contrast: value }) }
+                  __nextHasNoMarginBottom
+                />
+              </>
+            ) : null }
+
+            { background_image != 0 && (
+              <>
+                <ToggleControl
+                  label={ __('Fixed Position', 'badegg') }
+                  checked={ background_fixed }
+                  onChange={(value) => setAttributes({ background_fixed: value }) }
+                  __nextHasNoMarginBottom
+                />
+                <RangeControl
+                  __next40pxDefaultSize
+                  __nextHasNoMarginBottom
+                  label={ __("Opacity", "badegg") }
+                  value={ background_opacity }
+                  onChange={ ( value ) => setAttributes({ background_opacity: value }) }
+                  min={ 5 }
+                  max={ 100 }
+                />
+              </>
+            )}
+
+            <PanelRow>
+              <MediaUploadCheck>
+                <MediaUpload
+                  onSelect={ (media) => {
+                    setAttributes({
+                      background_image: media.id,
+                      background_url: media.url,
+                    });
+                  }}
+                  allowedTypes={ ['image'] }
+                  value={ background_image }
+                  render={ ({ open }) => (
+                    <Button
+                      onClick={ open }
+                      variant="primary"
+                    >
+                      { background_image ?  __("Replace image", "badegg") :  __("Choose image", "badegg") }
+                    </Button>
+                  )}
+                />
+              </MediaUploadCheck>
+
+              { background_image != 0 && (
+                <Button
+                  onClick={ () => setAttributes({ background_image: 0, background_url: '' }) }
+                  isDestructive
+                  variant="secondary"
+                >
+                  { __("Remove image", "badegg") }
+                </Button>
+              )}
+            </PanelRow>
+
+          </PanelBody>
+        </Panel>
+      </InspectorControls>
+    </>
+	);
+}
--- a/web/app/themes/badegg/resources/js/blocks/lib/classNames.js
+++ b/web/app/themes/badegg/resources/js/blocks/lib/classNames.js
@@ -0,0 +1,59 @@
+export function containerClassNames(attributes, extraClasses = [])
+{
+
+  let classNames = [
+    'container',
+  ];
+
+  if('container_width' in attributes)
+    classNames.push(`container-${attributes.container_width}`);
+
+  if('alignment' in attributes)
+    classNames.push(`align-${attributes.alignment}`);
+
+  // combine arrays
+  classNames = classNames.concat(extraClasses);
+
+  return classNames;
+}
+
+export function sectionClassNames(attributes, defaultClasses = '', extraClasses = [])
+{
+  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);
+  }
+
+  if('background_image' in attributes && attributes.background_image != '0')
+    classNames.push('has-bg-image');
+
+  if('background_contrast' in attributes && attributes.background_contrast)
+    classNames.push('knockout');
+
+  // combine arrays
+  classNames = classNames.concat(defaultClasses).concat(extraClasses);
+
+  // remove duplicate items
+  classNames = [ ...new Set(classNames) ];
+
+  return classNames;
+}
--- a/web/app/themes/badegg/resources/js/editor.js
+++ b/web/app/themes/badegg/resources/js/editor.js
@@ -1,44 +1,12 @@
 import domReady from '@wordpress/dom-ready';
-import blockWhitelist from '../json/core-block-whitelist.json';
+import blockParents from '../json/block-parents.json';
+import blockWhitelist from '../json/block-core-whitelist.json';
 import.meta.glob('../views/blocks/**/{index.jsx,index.js}', { eager: true })

 domReady(() => {
-  const TEXT_EDITOR_BLOCKS = [
-    // Design
-    'core/separator',
-    'core/spacer',
-
-    // Media
-    'core/cover',
-    'core/file',
-    'core/gallery',
-    'core/image',
-    'core/media-text',
-    'core/audio',
-    'core/video',
-
-    // Text
-    'core/footnotes',
-    'core/heading',
-    'core/list',
-    'core/code',
-    'core/details',
-    'core/list-item',
-    'core/missing',
-    'core/paragraph',
-    'core/preformatted',
-    'core/pullquote',
-    'core/quote',
-    'core/table',
-    'core/verse',
-  ];
-
  const restrictEditorParentBlocks = (settings, name) => {
-    if (TEXT_EDITOR_BLOCKS.includes(name)) {
-      settings.parent = [
-        'acf/badegg-editor',
-        'badegg/article',
-      ];
+    if (blockWhitelist.includes(name)) {
+      settings.parent = blockParents;
    }

    return settings
@@ -46,8 +14,7 @@ domReady(() => {

  wp.hooks.addFilter(
      'blocks.registerBlockType',
-      'your-project-name/restrict-parent-blocks',
+      'badegg/restrict-parent-blocks',
      restrictEditorParentBlocks
  );
-
 });
--- a/web/app/themes/badegg/resources/js/lib/isInsideBlock.js
+++ b/web/app/themes/badegg/resources/js/lib/isInsideBlock.js
@@ -1,12 +0,0 @@
-export default function isInsideMyACFBlock(blockName)
-{
-  const editor = wp.data.select('core/block-editor');
-  const selectedId = editor.getSelectedBlockClientId();
-
-  if (!selectedId) return false;
-
-  const parents = editor.getBlockParents(selectedId);
-  const parentNames = parents.map(id => editor.getBlockName(id));
-
-  return parentNames.includes(blockName);
-}
--- a/web/app/themes/badegg/resources/json/block-attributes.json
+++ b/web/app/themes/badegg/resources/json/block-attributes.json
@@ -0,0 +1,53 @@
+{
+  "container_width": {
+      "type": "string",
+      "default": ""
+  },
+  "alignment": {
+      "type": "string"
+  },
+  "padding_top": {
+      "type": "boolean",
+      "default": true
+  },
+  "padding_bottom": {
+      "type": "boolean",
+      "default": true
+  },
+  "background_colour": {
+      "type": "string",
+      "default": ""
+  },
+  "background_hex": {
+      "type": "string",
+      "default": ""
+  },
+  "background_tint": {
+      "type": "string",
+      "default": "0"
+  },
+  "background_image": {
+      "type": "integer",
+      "default": 0
+  },
+  "background_url": {
+      "type": "string",
+      "default": ""
+  },
+  "background_opacity": {
+      "type": "integer",
+      "default": 30
+  },
+  "background_position": {
+      "type": "string",
+      "default": ""
+  },
+  "background_fixed": {
+      "type": "boolean",
+      "default": false
+  },
+  "background_contrast": {
+      "type": "boolean",
+      "default": false
+  }
+}
--- a/web/app/themes/badegg/resources/json/block-core-whitelist.json
+++ b/web/app/themes/badegg/resources/json/block-core-whitelist.json
--- a/web/app/themes/badegg/resources/json/block-parents.json
+++ b/web/app/themes/badegg/resources/json/block-parents.json
@@ -0,0 +1,4 @@
+[
+  "acf/badegg-editor",
+  "badegg/article"
+]
--- a/web/app/themes/badegg/resources/views/blocks/acfdemo/block.json
+++ b/web/app/themes/badegg/resources/views/blocks/acfdemo/block.json
@@ -1,4 +1,5 @@
 {
+  "apiVersion": 3,
  "name": "badegg/acfdemo",
  "title": "ACF Demo",
  "category": "badegg",
--- a/web/app/themes/badegg/resources/views/blocks/acfdemo/index.js
+++ b/web/app/themes/badegg/resources/views/blocks/acfdemo/index.js
@@ -1,2 +1 @@
 // block.json's editorScript, loaded only in the block editor
-console.log('loaded: resources/views/blocks/acfdemo/index.js')
--- a/web/app/themes/badegg/resources/views/blocks/acfdemo/script.js
+++ b/web/app/themes/badegg/resources/views/blocks/acfdemo/script.js
@@ -1,2 +1 @@
 // block.json's script, loaded in block editor and front end
-console.log('loaded: resources/views/blocks/acf-demo/script.js')
--- a/web/app/themes/badegg/resources/views/blocks/acfdemo/view.js
+++ b/web/app/themes/badegg/resources/views/blocks/acfdemo/view.js
@@ -1,2 +1 @@
 // block.json's viewScript, applied on front end only
-console.log('loaded: resources/views/blocks/acf-demo/view.js')
--- a/web/app/themes/badegg/resources/views/blocks/article/README.md
+++ b/web/app/themes/badegg/resources/views/blocks/article/README.md
@@ -0,0 +1,25 @@
+# Bad Egg's Article Builder
+
+Designed as a full width component, Article Builder bundles core wordpress blocks commonly used in articles into a classic editor like experience. 
+
+## Features
+- Uses the `<InnerBlocks/>` component with a whitelist defined in `resources/json/core-block-whitelist.json`
+- Provides spacing and background configuration options 
+- Default block attributes are defined in `resources/json/block-attributes.json` so that they are not needed in duplicate in `block.json`
+- A reusable customisation UI is defined in `resources/js/blocks/components/BlockSettings.jsx` so that multiple blocks can rely on the same controls 
+
+## Theme-level changes
+- All core wordpress blocks are disabled at the top level to prevent them from being used alongside full-width blocks designed to craft page layouts
+- Blocks that can use core whitelisted inner blocks are defined in `resources/json/block-parents.json`
+
+## Attributes
+- Top Padding
+- Bottom Padding
+- Container width
+- Background
+  - Colour
+  - Tint
+  - Image
+  - Image opacity
+  - Text contrast toggle
+  - Fixed position toggle
--- a/web/app/themes/badegg/resources/views/blocks/article/block.json
+++ b/web/app/themes/badegg/resources/views/blocks/article/block.json
@@ -10,9 +10,8 @@
  "description": "A wrapper to contain core blocks",
  "supports": {
    "html": true,
-    "align": ["wide", "full"],
    "color": {
-      "background": true,
+      "background": false,
      "text": false
    }
  }
--- a/web/app/themes/badegg/resources/views/blocks/article/editor.scss
+++ b/web/app/themes/badegg/resources/views/blocks/article/editor.scss
@@ -1,4 +0,0 @@
-// block.json's editorStyle, applied in block editor and front end
-.wp-block-badegg-article.block-editor-block-list__block {
-  display: block;
-}
--- a/web/app/themes/badegg/resources/views/blocks/article/index.jsx
+++ b/web/app/themes/badegg/resources/views/blocks/article/index.jsx
@@ -1,17 +1,32 @@
 // block.json's editorScript, loaded only in the block editor

-import { registerBlockType } from '@wordpress/blocks';
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import metadata from './block.json';
-import allowedBlocks from '../../../json/core-block-whitelist.json';
+import { __ } from '@wordpress/i18n';
+import { registerBlockType } from '@wordpress/blocks';
+
+import {
+  useBlockProps,
+  InnerBlocks,
+} from '@wordpress/block-editor';
+
+import allowedBlocks from '../../../json/block-core-whitelist.json';
+import { containerClassNames, sectionClassNames } from '../../../js/blocks/lib/classNames';
+import BackgroundImage from '../../../js/blocks/components/BackgroundImage';
+import BlockSettings from '../../../js/blocks/components/BlockSettings';

 registerBlockType(metadata.name, {
  edit({ attributes, setAttributes }) {
    const blockProps = useBlockProps();
+    blockProps.className = sectionClassNames(attributes, blockProps.className).join(' ');

    return (
      <div { ...blockProps }>
-        <div className="container">
+        <BlockSettings
+          attributes={ attributes }
+          setAttributes={ setAttributes }
+        />
+
+        <div className={ containerClassNames(attributes, [ 'wysiwyg' ]).join(' ') }>
          <InnerBlocks
            allowedBlocks={ allowedBlocks }
            defaultBlock={
@@ -24,15 +39,24 @@ registerBlockType(metadata.name, {
            }
          />
        </div>
+
+        <BackgroundImage { ...attributes } />
+
      </div>
    );
  },
-  save() {
+  save({ attributes }) {
+    const blockProps = useBlockProps.save();
+    blockProps.className = sectionClassNames(attributes, blockProps.className, [ 'wysiwyg' ] ).join(' ');
+
    return (
-      <div { ...useBlockProps.save() }>
-        <div className="container">
+      <div { ...blockProps }>
+        <div className={ containerClassNames(attributes, [ 'wysiwyg' ]).join(' ') }>
          <InnerBlocks.Content />
        </div>
+
+        <BackgroundImage { ...attributes } />
+
      </div>
    )
  }
--- a/web/app/themes/badegg/resources/views/blocks/article/script.js
+++ b/web/app/themes/badegg/resources/views/blocks/article/script.js
@@ -1,2 +0,0 @@
-// block.json's script, loaded in block editor and front end
-console.log('loaded: resources/views/blocks/article/script.js')
--- a/web/app/themes/badegg/resources/views/blocks/article/style.scss
+++ b/web/app/themes/badegg/resources/views/blocks/article/style.scss
@@ -1,4 +0,0 @@
-// block.json's style, applied in block editor and front end
-.wp-block-badegg-article {
-  display: block;
-}
--- a/web/app/themes/badegg/resources/views/blocks/article/view.js
+++ b/web/app/themes/badegg/resources/views/blocks/article/view.js
@@ -1,2 +0,0 @@
-// block.json's viewScript, applied on front end only
-console.log('loaded: resources/views/blocks/article/view.js')
--- a/web/app/themes/badegg/resources/views/blocks/example/README.md
+++ b/web/app/themes/badegg/resources/views/blocks/example/README.md
@@ -0,0 +1,40 @@
+# Bad Egg's Native Wordpress Block Example
+
+This block serves as a placeholder that can be copied and extended to build native Wordpress blocks.  
+
+## Features
+- Automatic registration and asset building through the theme's `app/blocks.php` file and `vite.config.js`
+- Automatic enqueueing of block scripts and styles if the correct files are included in the block's directory 
+- Supports Laravel Blade templates if the `render.blade.php` file is present, with access to the `$attributes`, `$block`, and `$content` variables.
+- Default block attributes are defined in `resources/json/block-attributes.json` so that they are not needed in duplicate in `block.json`
+- A reusable customisation UI is defined in `resources/js/blocks/components/BlockSettings.jsx` so that multiple blocks can rely on the same controls 
+
+## Directory Structure
+```
+app
+│   ...
+│
+│   blocks.php  ->  this is where the auto registration functions live
+│
+resources
+│   ...
+│
+└── js
+│   └── editor.js
+│
+└── views
+    │   ...
+    │
+    └── blocks
+        │   ...
+        │
+        └── example
+            │  README.md         ->   this file
+            │  block.json        ->   (required) the block's metadata
+            │  index.jsx         ->   (required) EditorScript
+            │  script.js         ->   (optional) Editor & Front end
+            │  view.js           ->   (optional) Front end
+            │  editor.scss       ->   (optional) Editor
+            │  style.scss        ->   (optional) Editor & Front end
+            │  render.blade.php  ->   (optional) falls back to index.jsx save
+```
--- a/web/app/themes/badegg/resources/views/blocks/example/index.jsx
+++ b/web/app/themes/badegg/resources/views/blocks/example/index.jsx
@@ -1,17 +1,22 @@
 // block.json's editorScript, loaded only in the block editor

+import metadata from './block.json';
 import { registerBlockType } from '@wordpress/blocks';
 import { useBlockProps } from '@wordpress/block-editor';
-import metadata from './block.json';
+import { containerClassNames, sectionClassNames } from '../../../js/blocks/lib/classNames';

 registerBlockType(metadata.name, {
-  edit() {
+  edit({ attributes }) {
    const blockProps = useBlockProps();

+    blockProps.className = sectionClassNames(attributes, blockProps.className, ['bg-success', 'knockout']).join(' ');
+
    return (
-      <section { ...blockProps }>
-        <h2>Bad Egg Block Example</h2>
-      </section>
+      <div { ...blockProps }>
+        <div className="container align-center wysiwyg">
+          <h2>Bad Egg Block Example</h2>
+        </div>
+      </div>
    );
  }
 });
--- a/web/app/themes/badegg/resources/views/blocks/example/render.blade.php
+++ b/web/app/themes/badegg/resources/views/blocks/example/render.blade.php
@@ -1,3 +1,7 @@
-<div class="block-badegg-example">
-  <h2>Bad Egg Example Block (Blade)</h2>
+<div {!! get_block_wrapper_attributes([
+  'class' => 'section bg-success knockout',
+]) !!}>
+  <div class="container wysiwyg align-center">
+    <h2>Bad Egg Example Block (Blade)</h2>
+  </div>
 </div>
--- a/web/app/themes/badegg/resources/views/blocks/example/script.js
+++ b/web/app/themes/badegg/resources/views/blocks/example/script.js
@@ -1,2 +1,2 @@
 // block.json's script, loaded in block editor and front end
-console.log('loaded: resources/views/blocks/example/script.js')
+console.log('bad egg example block script.js loaded.');
--- a/web/app/themes/badegg/resources/views/blocks/example/view.js
+++ b/web/app/themes/badegg/resources/views/blocks/example/view.js
@@ -1,2 +1,2 @@
 // block.json's viewScript, applied on front end only
-console.log('loaded: resources/views/blocks/example/view.js')
+console.log('bad egg example block view.js loaded.');
--- a/web/app/themes/badegg/resources/views/partials/block-acf-footer.blade.php
+++ b/web/app/themes/badegg/resources/views/partials/block-acf-footer.blade.php
@@ -1,4 +1,4 @@
-@if($props['blurb'])
+@if($props['blurb'] || $props['links'])
  @php
    $containerProps = [
      'width' => $props['container_width'],
Author	SHA1	Message	Date
Steve Ross	2704c2e0a3	add block READMEs	2026-01-04 18:03:17 +00:00
Steve Ross	53ed3f5d73	add placeholder markup to example block editor file	2026-01-04 18:02:58 +00:00
Steve Ross	d0ba326cf9	add placeholder js to example block	2026-01-04 18:02:36 +00:00
Steve Ross	df4e07915a	remove unused styles and scripts from article block	2026-01-04 18:01:53 +00:00
Steve Ross	f189292c7d	remove unused js function	2026-01-04 18:01:18 +00:00
Steve Ross	7fb3851141	acf footer block can have buttons or blurb	2026-01-04 18:00:37 +00:00
Steve Ross	fe0ca810c9	add some placeholder markup to dynamic example block	2026-01-04 18:00:05 +00:00
Steve Ross	8d362f10a6	article block : add wysiwyg class to container	2026-01-04 17:59:40 +00:00
Steve Ross	1b05d22cd8	background tint no longer requires background image	2026-01-04 17:59:01 +00:00
Steve Ross	703f883000	allow extra classes in className js function	2026-01-04 17:57:51 +00:00
Steve Ross	eb4db916a9	use json lists in editor.js	2026-01-04 17:57:20 +00:00
Steve Ross	e4d698d8c6	adjust framework css	2026-01-04 17:56:40 +00:00
Steve Ross	fa82ec6446	acf blocks: adjust padding and contrast controls	2026-01-04 17:55:34 +00:00
Steve Ross	feec3dcbda	most block lists to json files	2026-01-04 17:54:46 +00:00
Steve Ross	6366dc3589	adjust colour php functions	2026-01-04 17:53:45 +00:00
Steve Ross	95d07390a5	add ajax thumbnail rebuild to dev	2026-01-04 14:55:22 +00:00
Steve Ross	6163ed77dc	article block front end rendering	2026-01-03 13:33:13 +00:00
Steve Ross	94a6c1e0f6	package-lock.json	2026-01-03 10:32:26 +00:00
Steve Ross	0d2fb4922e	basic article block backend working	2026-01-03 10:31:24 +00:00
Steve Ross	17a8807a87	block background image settings	2026-01-02 20:21:33 +00:00
Steve Ross	7200e572e0	cleanup unused theme hook	2026-01-02 18:54:16 +00:00
Steve Ross	ed045c16e1	block background colours and tint	2026-01-02 01:15:56 +00:00
Steve Ross	0c6b74042e	add hard boiled security plugin	2026-01-01 21:56:56 +00:00
Steve Ross	706f04d91d	add css class name helper functions for blocks	2025-12-19 12:29:38 +00:00
Steve Ross	3d51f8f735	move restAPI class to utilities	2025-12-19 12:28:59 +00:00
Steve Ross	39444a6898	fix editor styles after wp update	2025-12-19 12:28:25 +00:00
Steve Ross	a4d764b510	remove console.log from block js	2025-12-18 11:01:52 +00:00
Steve Ross	beb4ca8e6c	remove unused css	2025-12-18 11:00:43 +00:00
Steve Ross	e11cdede0b	setup endpoints class and add container widths for blocks	2025-12-18 10:59:25 +00:00
Steve Ross	007bc6cbac	integrating attributes	2025-12-18 10:57:50 +00:00
Steve Ross	5a3d5f148a	remove autoload_psr4 for old block approach	2025-12-18 10:54:43 +00:00