article block front end rendering

composer.json

@@ -67,7 +67,8 @@
     "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",
@@ -89,6 +90,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"],

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": "45d0a582ae7850e497fe7f2b3d7752a7",
     "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",

web/app/themes/badegg/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);
-    }
-}

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_post_type_args', [$this, 'args'], 0, 2);
-        add_filter('register_taxonomy_args', [$this, 'args'], 0, 2);
+        // add_filter('register_taxonomy_args', [$this, 'args'], 0, 2);
     }
 
     public function args($args, $type)

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);
+        }
+    }
+}

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' ],
+        ];
+    }
+
+}

web/app/themes/badegg/app/blocks.php

@@ -103,6 +103,59 @@ add_action('init', function () {
             'style'             => "{$slug}-style",
             'script'            => "{$slug}-script",
             'view_script'       => "{$slug}-view-script",
+            'attributes'        => [
+                '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,
+                ],
+            ],
         ];
 
         if(!property_exists($json, 'acf') && \Roots\view()->exists("blocks.{$slug}.render")) {

web/app/themes/badegg/functions.php

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

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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "BSD-3-Clause"
-      "peer": true
     },
     "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",
+      "license": "Apache-2.0"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001751",
@@ -1613,8 +1582,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "CC-BY-4.0",
+      "license": "CC-BY-4.0"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "ISC"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/fast-glob": {
       "version": "3.3.3",
@@ -1851,8 +1807,7 @@
           "url": "https://opencollective.com/fastify"
         }
       ],
-      "license": "BSD-3-Clause",
+      "license": "BSD-3-Clause"
-      "peer": true
     },
     "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",
+      "license": "BSD-2-Clause"
-      "peer": true
     },
     "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",
+      "license": "ISC"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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",
+      "license": "MIT"
-      "peer": true
     },
     "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"
       }

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";

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;
+  }
+}

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 {
+.editor-styles-wrapper {
-    position: relative;
+  background: colours.$grey-lightest;
-    padding: 0.5rem;
-    border: 1px solid rgba(black, 0.3);
-    margin: 0;
 
-    &::before {
+  .block-list-appender {
-      content: 'Page Title';
+    width: 350px;
-      position: absolute;
+    max-width: 90%;
-      top: -0.5rem;
+    margin: 1em auto;
-      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;
-    }
   }
 }
+
+.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;
+}

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()} />
+			)}
+		</>
+	)
+}

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,
+          }}
+        />
+			)}
+		</>
+	)
+}

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

@@ -0,0 +1,233 @@
+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_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 }
+              />
+            ) : null }
+
+            { background_image != 0 && (
+              <>
+                <ToggleControl
+                  label={ __('Text Contrast', 'badegg') }
+                  checked={ background_contrast }
+                  onChange={(value) => setAttributes({ background_contrast: value }) }
+                  __nextHasNoMarginBottom
+                />
+                <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 }) }
+                  isDestructive
+                  variant="secondary"
+                >
+                  { __("Remove image", "badegg") }
+                </Button>
+              )}
+            </PanelRow>
+
+          </PanelBody>
+        </Panel>
+      </InspectorControls>
+    </>
+	);
+}

web/app/themes/badegg/resources/js/blocks/lib/classNames.js

@@ -0,0 +1,56 @@
+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 = [])
+{
+  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;
+}

web/app/themes/badegg/resources/views/blocks/article/block.json

@@ -8,27 +8,10 @@
     "foreground": "#f58762"
   },
   "description": "A wrapper to contain core blocks",
-  "attributes": {
-    "container_width": {
-      "type": "string",
-      "default": 0
-    },
-    "alignment": {
-      "type": "string"
-    },
-    "padding_top": {
-      "type": "boolean",
-      "default": true
-    },
-    "padding_bottom": {
-      "type": "boolean",
-      "default": true
-    }
-  },
   "supports": {
     "html": true,
     "color": {
-      "background": true,
+      "background": false,
       "text": false
     }
   }

web/app/themes/badegg/resources/views/blocks/article/index.jsx

@@ -1,93 +1,32 @@
 // block.json's editorScript, loaded only in the block editor
 
+import metadata from './block.json';
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 
 import {
   useBlockProps,
   InnerBlocks,
-  InspectorControls,
-  BlockControls,
-  AlignmentToolbar,
 } from '@wordpress/block-editor';
 
-import {
-  Panel,
-  PanelBody,
-  PanelRow,
-  SelectControl,
-  ToggleControl,
-} 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/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();
-    const [ isLoading, setIsLoading ] = useState( true );
+    blockProps.className = sectionClassNames(attributes, blockProps.className, [ 'wysiwyg' ]).join(' ');
-
-    const {
-      container_width,
-      alignment,
-      padding_top,
-      padding_bottom,
-    } = attributes;
-
-    const [
-      containerWidthOptions, setContainerWidthOptions,
-    ] = useState( [] );
-
-    useEffect( () => {
-        apiFetch( { path: '/badegg/v1/blocks/container_width' } )
-            .then( ( data ) => {
-                setContainerWidthOptions( data );
-                setIsLoading( false );
-            } )
-            .catch( () => {
-                setContainerWidthOptions( [] );
-                setIsLoading( false );
-            } );
-    }, [] );
-
-    console.log(attributes);
 
     return (
       <div { ...blockProps }>
-        <BlockControls>
+        <BlockSettings
-          <AlignmentToolbar
+          attributes={ attributes }
-            value={ alignment }
+          setAttributes={ setAttributes }
-            onChange={(value) => setAttributes({alignment: value})}
+        />
-          />
+
-        </BlockControls>
+        <div className={ containerClassNames(attributes).join(' ') }>
-        <InspectorControls>
-          <Panel>
-            <PanelBody title={ __("Settings", "badegg") }>
-              <SelectControl
-                label={ __("Container Width", "badegg") }
-                value={ container_width }
-                options={ containerWidthOptions }
-                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>
-          </Panel>
-        </InspectorControls>
-        <div className={`container container-${ attributes.container_width } align-${ attributes.alignment }`}>
           <InnerBlocks
             allowedBlocks={ allowedBlocks }
             defaultBlock={
@@ -100,15 +39,24 @@ registerBlockType(metadata.name, {
             }
           />
         </div>
+
+        <BackgroundImage { ...attributes } />
+
       </div>
     );
   },
   save({ attributes }) {
+    const blockProps = useBlockProps.save();
+    blockProps.className = sectionClassNames(attributes, blockProps.className, [ 'wysiwyg' ] ).join(' ');
+
     return (
-      <div { ...useBlockProps.save() }>
+      <div { ...blockProps }>
-        <div className={`container container-${attributes.container_width} align-${ attributes.alignment }`}>
+        <div className={ containerClassNames(attributes).join(' ') }>
           <InnerBlocks.Content />
         </div>
+
+        <BackgroundImage { ...attributes } />
+
       </div>
     )
   }